feature(ComboControl):

- create ComboControl component for typography settings (font size, font
  weight, line height)
- integrate it to TypographyMenu and integrate it to Layout

src/shared/shadcn/ui/button-group/button-group-separator.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { Separator } from '$shared/shadcn/ui/separator/index.js';
+import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { ComponentProps } from 'svelte';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    orientation = 'vertical',
+    ...restProps
+}: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+    bind:ref
+    data-slot="button-group-separator"
+    {orientation}
+    class={cn('bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto', className)}
+    {...restProps}
+/>

src/shared/shadcn/ui/button-group/button-group-text.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+import {
+    type WithElementRef,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    child,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    child?: Snippet<[{ props: Record<string, unknown> }]>;
+} = $props();
+
+const mergedProps = $derived({
+    ...restProps,
+    class: cn(
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+    ),
+});
+</script>
+
+{#if child}
+    {@render child({ props: mergedProps })}
+{:else}
+    <div bind:this={ref} {...mergedProps}>
+        {@render mergedProps.children?.()}
+    </div>
+{/if}

src/shared/shadcn/ui/button-group/button-group.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" module>
+import {
+    type VariantProps,
+    tv,
+} from 'tailwind-variants';
+
+export const buttonGroupVariants = tv({
+    base:
+        "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+    variants: {
+        orientation: {
+            horizontal:
+                '[&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none',
+            vertical:
+                'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+        },
+    },
+    defaultVariants: {
+        orientation: 'horizontal',
+    },
+});
+
+export type ButtonGroupOrientation = VariantProps<typeof buttonGroupVariants>['orientation'];
+</script>
+
+<script lang="ts">
+import {
+    type WithElementRef,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    orientation = 'horizontal',
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    orientation?: ButtonGroupOrientation;
+} = $props();
+</script>
+
+<div
+    bind:this={ref}
+    role="group"
+    data-slot="button-group"
+    data-orientation={orientation}
+    class={cn(buttonGroupVariants({ orientation }), className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

src/shared/shadcn/ui/button-group/index.ts

@@ -0,0 +1,13 @@
+import Separator from './button-group-separator.svelte';
+import Text from './button-group-text.svelte';
+import Root from './button-group.svelte';
+
+export {
+    Root,
+    //
+    Root as ButtonGroup,
+    Separator,
+    Separator as ButtonGroupSeparator,
+    Text,
+    Text as ButtonGroupText,
+};

src/shared/shadcn/ui/item/index.ts

@@ -0,0 +1,34 @@
+import Actions from './item-actions.svelte';
+import Content from './item-content.svelte';
+import Description from './item-description.svelte';
+import Footer from './item-footer.svelte';
+import Group from './item-group.svelte';
+import Header from './item-header.svelte';
+import Media from './item-media.svelte';
+import Separator from './item-separator.svelte';
+import Title from './item-title.svelte';
+import Root from './item.svelte';
+
+export {
+    Actions,
+    Actions as ItemActions,
+    Content,
+    Content as ItemContent,
+    Description,
+    Description as ItemDescription,
+    Footer,
+    Footer as ItemFooter,
+    Group,
+    Group as ItemGroup,
+    Header,
+    Header as ItemHeader,
+    Media,
+    Media as ItemMedia,
+    Root,
+    //
+    Root as Item,
+    Separator,
+    Separator as ItemSeparator,
+    Title,
+    Title as ItemTitle,
+};

src/shared/shadcn/ui/item/item-actions.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import {
+    type WithElementRef,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="item-actions"
+    class={cn('flex items-center gap-2', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

src/shared/shadcn/ui/item/item-content.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import {
+    type WithElementRef,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="item-content"
+    class={cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

src/shared/shadcn/ui/item/item-description.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+import {
+    type WithElementRef,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+    bind:this={ref}
+    data-slot="item-description"
+    class={cn(
+        'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        className,
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+</p>

src/shared/shadcn/ui/item/item-footer.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import {
+    type WithElementRef,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="item-footer"
+    class={cn('flex basis-full items-center justify-between gap-2', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

src/shared/shadcn/ui/item/item-group.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+import {
+    type WithElementRef,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+    bind:this={ref}
+    role="list"
+    data-slot="item-group"
+    class={cn('group/item-group flex flex-col', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

src/shared/shadcn/ui/item/item-header.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import {
+    type WithElementRef,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="item-header"
+    class={cn('flex basis-full items-center justify-between gap-2', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

src/shared/shadcn/ui/item/item-media.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+import {
+    type VariantProps,
+    tv,
+} from 'tailwind-variants';
+
+export const itemMediaVariants = tv({
+    base:
+        'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none',
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
+            image: 'size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+
+export type ItemMediaVariant = VariantProps<typeof itemMediaVariants>['variant'];
+</script>
+
+<script lang="ts">
+import {
+    type WithElementRef,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    variant = 'default',
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: ItemMediaVariant } = $props();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="item-media"
+    data-variant={variant}
+    class={cn(itemMediaVariants({ variant }), className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

src/shared/shadcn/ui/item/item-separator.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+import { Separator } from '$shared/shadcn/ui/separator/index.js';
+import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { ComponentProps } from 'svelte';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+}: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+    bind:ref
+    data-slot="item-separator"
+    orientation="horizontal"
+    class={cn('my-0', className)}
+    {...restProps}
+/>

src/shared/shadcn/ui/item/item-title.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import {
+    type WithElementRef,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="item-title"
+    class={cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

src/shared/shadcn/ui/item/item.svelte

@@ -0,0 +1,67 @@
+<script lang="ts" module>
+import {
+    type VariantProps,
+    tv,
+} from 'tailwind-variants';
+
+export const itemVariants = tv({
+    base:
+        'group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors',
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            outline: 'border-border',
+            muted: 'bg-muted/50',
+        },
+        size: {
+            default: 'gap-4 p-4',
+            sm: 'gap-2.5 px-4 py-3',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+
+export type ItemSize = VariantProps<typeof itemVariants>['size'];
+export type ItemVariant = VariantProps<typeof itemVariants>['variant'];
+</script>
+
+<script lang="ts">
+import {
+    type WithElementRef,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    child,
+    variant,
+    size,
+    ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    child?: Snippet<[{ props: Record<string, unknown> }]>;
+    variant?: ItemVariant;
+    size?: ItemSize;
+} = $props();
+
+const mergedProps = $derived({
+    class: cn(itemVariants({ variant, size }), className),
+    'data-slot': 'item',
+    'data-variant': variant,
+    'data-size': size,
+    ...restProps,
+});
+</script>
+
+{#if child}
+    {@render child({ props: mergedProps })}
+{:else}
+    <div bind:this={ref} {...mergedProps}>
+        {@render mergedProps.children?.()}
+    </div>
+{/if}

src/shared/shadcn/ui/popover/index.ts

@@ -0,0 +1,19 @@
+import Close from './popover-close.svelte';
+import Content from './popover-content.svelte';
+import Portal from './popover-portal.svelte';
+import Trigger from './popover-trigger.svelte';
+import Root from './popover.svelte';
+
+export {
+    Close,
+    Close as PopoverClose,
+    Content,
+    Content as PopoverContent,
+    Portal,
+    Portal as PopoverPortal,
+    Root,
+    //
+    Root as Popover,
+    Trigger,
+    Trigger as PopoverTrigger,
+};

src/shared/shadcn/ui/popover/popover-close.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Popover as PopoverPrimitive } from 'bits-ui';
+
+let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps = $props();
+</script>
+
+<PopoverPrimitive.Close bind:ref data-slot="popover-close" {...restProps} />

src/shared/shadcn/ui/popover/popover-content.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+import {
+    type WithoutChildrenOrChild,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import { Popover as PopoverPrimitive } from 'bits-ui';
+import type { ComponentProps } from 'svelte';
+import PopoverPortal from './popover-portal.svelte';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 4,
+    align = 'center',
+    portalProps,
+    ...restProps
+}: PopoverPrimitive.ContentProps & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
+} = $props();
+</script>
+
+<PopoverPortal {...portalProps}>
+    <PopoverPrimitive.Content
+        bind:ref
+        data-slot="popover-content"
+        {sideOffset}
+        {align}
+        class={cn(
+            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+            className,
+        )}
+        {...restProps}
+    />
+</PopoverPortal>

src/shared/shadcn/ui/popover/popover-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Popover as PopoverPrimitive } from 'bits-ui';
+
+let { ...restProps }: PopoverPrimitive.PortalProps = $props();
+</script>
+
+<PopoverPrimitive.Portal {...restProps} />

src/shared/shadcn/ui/popover/popover-trigger.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import { Popover as PopoverPrimitive } from 'bits-ui';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+}: PopoverPrimitive.TriggerProps = $props();
+</script>
+
+<PopoverPrimitive.Trigger
+    bind:ref
+    data-slot="popover-trigger"
+    class={cn('', className)}
+    {...restProps}
+/>

src/shared/shadcn/ui/popover/popover.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Popover as PopoverPrimitive } from 'bits-ui';
+
+let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps = $props();
+</script>
+
+<PopoverPrimitive.Root bind:open {...restProps} />

src/shared/shadcn/ui/slider/index.ts

@@ -0,0 +1,7 @@
+import Root from './slider.svelte';
+
+export {
+    Root,
+    //
+    Root as Slider,
+};

src/shared/shadcn/ui/slider/slider.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+import {
+    type WithoutChildrenOrChild,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import { Slider as SliderPrimitive } from 'bits-ui';
+
+let {
+    ref = $bindable(null),
+    value,
+    orientation = 'horizontal',
+    class: className,
+    ...restProps
+}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
+</script>
+
+<SliderPrimitive.Root
+    bind:ref
+    value={value as never}
+    data-slot="slider"
+    {orientation}
+    class={cn(
+        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+        className,
+    )}
+    {...restProps}
+>
+    {#snippet children({ thumbs })}
+        <span
+            data-orientation={orientation}
+            data-slot="slider-track"
+            class={cn(
+                'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',
+            )}
+        >
+            <SliderPrimitive.Range
+                data-slot="slider-range"
+                class={cn(
+                    'bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',
+                )}
+            />
+        </span>
+        {#each thumbs as thumb (thumb)}
+            <SliderPrimitive.Thumb
+                data-slot="slider-thumb"
+                index={thumb}
+                class="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+            />
+        {/each}
+    {/snippet}
+</SliderPrimitive.Root>