sv5ui 1.1.3 → 1.2.0

package/dist/SelectMenu/select-menu.variants.js

@@ -0,0 +1,33 @@
+import { tv } from 'tailwind-variants';
+import { selectVariants } from '../Select/select.variants.js';
+export const selectMenuVariants = tv({
+    extend: selectVariants,
+    slots: {
+        content: [
+            'z-50 max-h-60 w-(--bits-floating-anchor-width)',
+            'bg-surface-container-low text-on-surface',
+            'rounded-md',
+            'ring ring-outline-variant/50',
+            'shadow-lg',
+            'focus:outline-none',
+            'overflow-hidden',
+            'flex flex-col'
+        ],
+        input: 'border-b border-outline-variant',
+        viewport: 'p-1 flex-1 overflow-y-auto',
+        empty: 'text-center text-on-surface-variant'
+    },
+    variants: {
+        size: {
+            xs: { empty: 'p-2 text-xs' },
+            sm: { empty: 'p-2.5 text-xs' },
+            md: { empty: 'p-2.5 text-sm' },
+            lg: { empty: 'p-3 text-sm' },
+            xl: { empty: 'p-3 text-base' }
+        }
+    }
+});
+export const selectMenuDefaults = {
+    defaultVariants: selectMenuVariants.defaultVariants,
+    slots: {}
+};

package/dist/Separator/Separator.svelte

@@ -40,7 +40,6 @@
             container: slots.container({ class: [config.slots.container, ui?.container] }),
             icon: slots.icon({ class: [config.slots.icon, ui?.icon] }),
             avatar: slots.avatar({ class: [config.slots.avatar, ui?.avatar] }),
-            avatarSize: slots.avatarSize() as AvatarSize,
             label: slots.label({ class: [config.slots.label, ui?.label] })
         }
     })
@@ -56,7 +55,7 @@
             {:else if avatar}
                 <Avatar
                     {...avatar}
-                    size={avatar.size ?? classes.avatarSize}
+                    size={avatar.size ?? (config.avatarSize as AvatarSize)}
                     class={classes.avatar}
                 />
             {:else if icon}

package/dist/Separator/separator.variants.d.ts

@@ -93,7 +93,6 @@ export declare const separatorVariants: import("tailwind-variants").TVReturnType
     container: string;
     icon: string;
     avatar: string;
-    avatarSize: string;
     label: string;
 }, undefined, {
     color: {
@@ -189,7 +188,6 @@ export declare const separatorVariants: import("tailwind-variants").TVReturnType
     container: string;
     icon: string;
     avatar: string;
-    avatarSize: string;
     label: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
@@ -285,7 +283,6 @@ export declare const separatorVariants: import("tailwind-variants").TVReturnType
     container: string;
     icon: string;
     avatar: string;
-    avatarSize: string;
     label: string;
 }, undefined, unknown, unknown, undefined>>;
 export type SeparatorVariantProps = VariantProps<typeof separatorVariants>;
@@ -385,7 +382,6 @@ export declare const separatorDefaults: {
         container: string;
         icon: string;
         avatar: string;
-        avatarSize: string;
         label: string;
     }, {
         color: {
@@ -481,8 +477,8 @@ export declare const separatorDefaults: {
         container: string;
         icon: string;
         avatar: string;
-        avatarSize: string;
         label: string;
     }>;
     slots: Partial<Record<SeparatorSlots, string>>;
+    avatarSize: string;
 };

package/dist/Separator/separator.variants.js

@@ -6,7 +6,6 @@ export const separatorVariants = tv({
         container: 'font-medium flex',
         icon: 'shrink-0',
         avatar: 'shrink-0',
-        avatarSize: '2xs',
         label: ''
     },
     variants: {
@@ -100,5 +99,6 @@ export const separatorVariants = tv({
 });
 export const separatorDefaults = {
     defaultVariants: separatorVariants.defaultVariants,
-    slots: {}
+    slots: {},
+    avatarSize: '2xs'
 };

package/dist/Skeleton/Skeleton.svelte

@@ -10,7 +10,14 @@
 
     const config = getComponentConfig('skeleton', skeletonDefaults)
 
-    let { as = 'div', ui, class: className, children, ...restProps }: Props = $props()
+    let {
+        ref = $bindable(null),
+        as = 'div',
+        ui,
+        class: className,
+        children,
+        ...restProps
+    }: Props = $props()
 
     const classes = $derived.by(() => {
         const slots = skeletonVariants()
@@ -20,6 +27,15 @@
     })
 </script>
 
-<svelte:element this={as} class={classes.root} {...restProps}>
+<svelte:element
+    this={as}
+    bind:this={ref}
+    class={classes.root}
+    role="alert"
+    aria-busy="true"
+    aria-label="loading"
+    aria-live="polite"
+    {...restProps}
+>
     {@render children?.()}
 </svelte:element>

package/dist/Skeleton/Skeleton.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { SkeletonProps } from './skeleton.types.js';
 export type Props = SkeletonProps;
-declare const Skeleton: import("svelte").Component<SkeletonProps, {}, "">;
+declare const Skeleton: import("svelte").Component<SkeletonProps, {}, "ref">;
 type Skeleton = ReturnType<typeof Skeleton>;
 export default Skeleton;

package/dist/Skeleton/skeleton.types.d.ts

@@ -1,18 +1,27 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
 import type { SkeletonSlots } from './skeleton.variants.js';
 export type SkeletonProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * Renders the skeleton as a different HTML element.
      * @default 'div'
      */
     as?: keyof HTMLElementTagNameMap;
     /**
-     * Override styles for specific skeleton slots (root).
+     * Override styles for specific skeleton slots.
      */
     ui?: Partial<Record<SkeletonSlots, ClassNameValue>>;
     /**
      * Additional CSS classes for the root element.
      */
     class?: ClassNameValue;
+    /**
+     * Default slot content.
+     */
+    children?: Snippet;
 };

package/dist/Slideover/Slideover.svelte

@@ -40,6 +40,7 @@
         header: headerSlot,
         titleSlot,
         descriptionSlot,
+        actions: actionsSlot,
         body: bodySlot,
         footer: footerSlot,
         closeSlot
@@ -51,7 +52,9 @@
     const hasTitle = $derived(!!title || !!titleSlot)
     const hasDescription = $derived(!!description || !!descriptionSlot)
     const hasHeading = $derived(hasTitle || hasDescription)
-    const hasHeader = $derived(!!headerSlot || hasHeading || showClose || !!closeSlot)
+    const hasHeader = $derived(
+        !!headerSlot || hasHeading || !!actionsSlot || showClose || !!closeSlot
+    )
 
     const variantSlots = $derived(
         slideoverVariants({ transition, side, inset, overlay: showOverlay })
@@ -66,6 +69,7 @@
         description: variantSlots.description({
             class: [config.slots.description, ui?.description]
         }),
+        actions: variantSlots.actions({ class: [config.slots.actions, ui?.actions] }),
         body: variantSlots.body({ class: [config.slots.body, ui?.body] }),
         footer: variantSlots.footer({ class: [config.slots.footer, ui?.footer] }),
         close: variantSlots.close({ class: [config.slots.close, ui?.close] })
@@ -132,6 +136,10 @@
                             {/if}
                         </div>
 
+                        {#if actionsSlot}
+                            <div class={classes.actions}>{@render actionsSlot()}</div>
+                        {/if}
+
                         {#if showClose || closeSlot}
                             <Dialog.Close>
                                 {#snippet child({ props })}

package/dist/Slideover/slideover.types.d.ts

@@ -112,6 +112,11 @@ export interface SlideoverProps extends RootProps, ContentProps {
      * Custom description slot. Overrides the `description` prop when provided.
      */
     descriptionSlot?: Snippet;
+    /**
+     * Actions slot rendered between the title/description wrapper
+     * and the close button inside the header.
+     */
+    actions?: Snippet;
     /**
      * Body content rendered between the header and footer.
      */

package/dist/Slideover/slideover.variants.d.ts

@@ -21,7 +21,9 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
     };
     inset: {
         true: {};
-        false: {};
+        false: {
+            content: string;
+        };
     };
     overlay: {
         true: {
@@ -37,6 +39,7 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
     footer: string;
     title: string;
     description: string;
+    actions: string;
     close: string;
 }, undefined, {
     transition: {
@@ -60,7 +63,9 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
     };
     inset: {
         true: {};
-        false: {};
+        false: {
+            content: string;
+        };
     };
     overlay: {
         true: {
@@ -76,6 +81,7 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
     footer: string;
     title: string;
     description: string;
+    actions: string;
     close: string;
 }, import("tailwind-variants").TVReturnType<{
     transition: {
@@ -99,7 +105,9 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
     };
     inset: {
         true: {};
-        false: {};
+        false: {
+            content: string;
+        };
     };
     overlay: {
         true: {
@@ -115,6 +123,7 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
     footer: string;
     title: string;
     description: string;
+    actions: string;
     close: string;
 }, undefined, unknown, unknown, undefined>>;
 export type SlideoverVariantProps = VariantProps<typeof slideoverVariants>;
@@ -142,7 +151,9 @@ export declare const slideoverDefaults: {
         };
         inset: {
             true: {};
-            false: {};
+            false: {
+                content: string;
+            };
         };
         overlay: {
             true: {
@@ -158,6 +169,7 @@ export declare const slideoverDefaults: {
         footer: string;
         title: string;
         description: string;
+        actions: string;
         close: string;
     }, {
         transition: {
@@ -181,7 +193,9 @@ export declare const slideoverDefaults: {
         };
         inset: {
             true: {};
-            false: {};
+            false: {
+                content: string;
+            };
         };
         overlay: {
             true: {
@@ -197,6 +211,7 @@ export declare const slideoverDefaults: {
         footer: string;
         title: string;
         description: string;
+        actions: string;
         close: string;
     }>;
     slots: Partial<Record<SlideoverSlots, string>>;

package/dist/Slideover/slideover.variants.js

@@ -9,6 +9,7 @@ export const slideoverVariants = tv({
         footer: 'flex items-center gap-1.5 p-4 sm:px-6',
         title: 'text-on-surface font-semibold',
         description: 'mt-1 text-on-surface-variant text-sm',
+        actions: 'flex items-center gap-1.5 shrink-0',
         close: 'absolute top-4 end-4'
     },
     variants: {
@@ -33,7 +34,9 @@ export const slideoverVariants = tv({
         },
         inset: {
             true: {},
-            false: {}
+            false: {
+                content: 'shadow-lg'
+            }
         },
         overlay: {
             true: {
@@ -97,34 +100,6 @@ export const slideoverVariants = tv({
             class: {
                 content: 'left-4 inset-y-4 rounded-xl shadow-lg ring ring-outline-variant'
             }
-        },
-        {
-            inset: false,
-            side: 'top',
-            class: {
-                content: 'shadow-lg'
-            }
-        },
-        {
-            inset: false,
-            side: 'right',
-            class: {
-                content: 'shadow-lg'
-            }
-        },
-        {
-            inset: false,
-            side: 'bottom',
-            class: {
-                content: 'shadow-lg'
-            }
-        },
-        {
-            inset: false,
-            side: 'left',
-            class: {
-                content: 'shadow-lg'
-            }
         }
     ],
     defaultVariants: {

package/dist/Switch/Switch.svelte

@@ -16,6 +16,7 @@
     const icons = getComponentConfig('icons', iconsDefaults)
 
     let {
+        ref = $bindable(null),
         checked = $bindable(false),
         onCheckedChange,
         ui,
@@ -34,7 +35,8 @@
         description,
         labelSlot,
         descriptionSlot,
-        class: className
+        class: className,
+        ...restProps
     }: Props = $props()
 
     const formFieldContext = getContext<
@@ -57,11 +59,13 @@
     const resolvedName = $derived(name ?? formFieldContext?.name)
     const isDisabled = $derived(disabled || loading)
 
-    const ariaDescribedBy = $derived.by(() => {
-        if (!formFieldContext) return undefined
-        const fid = formFieldContext.ariaId
-        return hasError ? `${fid}-error` : `${fid}-description ${fid}-help`
-    })
+    const ariaDescribedBy = $derived(
+        !formFieldContext
+            ? undefined
+            : hasError
+              ? `${formFieldContext.ariaId}-error`
+              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+    )
 
     const hasCheckedIcon = $derived(loading || !!checkedIcon)
     const hasUncheckedIcon = $derived(loading || !!uncheckedIcon)
@@ -74,7 +78,7 @@
         loading,
         required,
         disabled: isDisabled ? true : undefined
-    } as const)
+    })
 
     const classes = $derived.by(() => {
         const slots = switchVariants(variantOpts)
@@ -85,34 +89,31 @@
             thumb: slots.thumb({ class: [config.slots.thumb, ui?.thumb] }),
             wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
             label: slots.label({ class: [config.slots.label, ui?.label] }),
-            description: slots.description({
-                class: [config.slots.description, ui?.description]
-            })
+            description: slots.description({ class: [config.slots.description, ui?.description] })
         }
     })
 
-    const iconUiClass = $derived([config.slots.icon, ui?.icon])
-
-    const checkedIconClass = $derived.by(() => {
-        if (!hasCheckedIcon) return undefined
-        return switchVariants({
-            ...variantOpts,
-            checked: true,
-            unchecked: loading ? true : undefined
-        }).icon({ class: iconUiClass })
-    })
-
-    const uncheckedIconClass = $derived.by(() => {
-        if (!hasUncheckedIcon) return undefined
-        return switchVariants({
-            ...variantOpts,
-            unchecked: true,
-            checked: loading ? true : undefined
-        }).icon({ class: iconUiClass })
+    const iconClasses = $derived.by(() => {
+        if (!hasCheckedIcon && !hasUncheckedIcon)
+            return { checked: undefined, unchecked: undefined }
+        const iconUiClass = [config.slots.icon, ui?.icon]
+        return {
+            checked: hasCheckedIcon
+                ? switchVariants({ ...variantOpts, checked: true, unchecked: loading }).icon({
+                      class: iconUiClass
+                  })
+                : undefined,
+            unchecked:
+                hasUncheckedIcon && !loading
+                    ? switchVariants({ ...variantOpts, unchecked: true }).icon({
+                          class: iconUiClass
+                      })
+                    : undefined
+        }
     })
 </script>
 
-<div class={classes.root}>
+<div {...restProps} bind:this={ref} class={classes.root}>
     <div class={classes.container}>
         <Switch.Root
             bind:checked
@@ -128,10 +129,10 @@
         >
             <Switch.Thumb class={classes.thumb}>
                 {#if hasCheckedIcon && checkedIconName}
-                    <Icon name={checkedIconName} class={checkedIconClass} />
+                    <Icon name={checkedIconName} class={iconClasses.checked} />
                 {/if}
                 {#if hasUncheckedIcon && uncheckedIconName && !loading}
-                    <Icon name={uncheckedIconName} class={uncheckedIconClass} />
+                    <Icon name={uncheckedIconName} class={iconClasses.unchecked} />
                 {/if}
             </Switch.Thumb>
         </Switch.Root>

package/dist/Switch/Switch.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { SwitchProps } from './switch.types.js';
 export type Props = SwitchProps;
 import { Switch } from 'bits-ui';
-declare const Switch: import("svelte").Component<SwitchProps, {}, "checked">;
+declare const Switch: import("svelte").Component<SwitchProps, {}, "ref" | "checked">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/Switch/switch.types.d.ts

@@ -1,8 +1,13 @@
 import type { Snippet } from 'svelte';
 import type { Switch as SwitchPrimitive } from 'bits-ui';
 import type { ClassNameValue } from 'tailwind-merge';
+import type { HTMLAttributes } from 'svelte/elements';
 import type { SwitchVariantProps, SwitchSlots } from './switch.variants.js';
-export type SwitchProps = Pick<SwitchPrimitive.RootProps, 'disabled' | 'name' | 'value' | 'required'> & {
+export type SwitchProps = Pick<SwitchPrimitive.RootProps, 'disabled' | 'name' | 'value' | 'required'> & Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * The checked state of the switch. Supports two-way binding with `bind:checked`.
      * @default false

package/dist/Switch/switch.variants.js

@@ -10,7 +10,7 @@ export const switchVariants = tv({
         ],
         container: 'flex items-center',
         thumb: [
-            'group pointer-events-none rounded-full bg-white shadow-lg ring-0',
+            'group pointer-events-none rounded-full bg-surface shadow-lg ring-0',
             'flex items-center justify-center',
             'transition-transform duration-200',
             'data-[state=unchecked]:translate-x-0'
@@ -39,35 +39,35 @@ export const switchVariants = tv({
             xs: {
                 base: 'w-7',
                 container: 'h-4',
-                thumb: 'size-3 data-[state=checked]:translate-x-3',
+                thumb: 'size-3 data-[state=checked]:translate-x-3 rtl:data-[state=checked]:-translate-x-3',
                 icon: 'size-2',
                 wrapper: 'text-xs'
             },
             sm: {
                 base: 'w-8',
                 container: 'h-4',
-                thumb: 'size-3.5 data-[state=checked]:translate-x-3.5',
+                thumb: 'size-3.5 data-[state=checked]:translate-x-3.5 rtl:data-[state=checked]:-translate-x-3.5',
                 icon: 'size-2.5',
                 wrapper: 'text-xs'
             },
             md: {
                 base: 'w-9',
                 container: 'h-5',
-                thumb: 'size-4 data-[state=checked]:translate-x-4',
+                thumb: 'size-4 data-[state=checked]:translate-x-4 rtl:data-[state=checked]:-translate-x-4',
                 icon: 'size-3',
                 wrapper: 'text-sm'
             },
             lg: {
                 base: 'w-10',
                 container: 'h-5',
-                thumb: 'size-4.5 data-[state=checked]:translate-x-4.5',
+                thumb: 'size-4.5 data-[state=checked]:translate-x-4.5 rtl:data-[state=checked]:-translate-x-4.5',
                 icon: 'size-3.5',
                 wrapper: 'text-sm'
             },
             xl: {
                 base: 'w-11',
                 container: 'h-6',
-                thumb: 'size-5 data-[state=checked]:translate-x-5',
+                thumb: 'size-5 data-[state=checked]:translate-x-5 rtl:data-[state=checked]:-translate-x-5',
                 icon: 'size-4',
                 wrapper: 'text-base'
             }

package/dist/Tabs/Tabs.svelte

@@ -14,6 +14,7 @@
     const config = getComponentConfig('tabs', tabsDefaults)
 
     let {
+        ref = $bindable(null),
         items = [],
         value = $bindable(),
         defaultValue,
@@ -46,7 +47,7 @@
 
     const variantSlots = $derived(tabsVariants({ variant, color, size, orientation }))
 
-    const classes = $derived.by(() => ({
+    const classes = $derived({
         root: variantSlots.root({ class: [config.slots.root, className, ui?.root] }),
         list: variantSlots.list({ class: [config.slots.list, ui?.list] }),
         indicator: variantSlots.indicator({
@@ -58,7 +59,7 @@
         }),
         label: variantSlots.label({ class: [config.slots.label, ui?.label] }),
         content: variantSlots.content({ class: [config.slots.content, ui?.content] })
-    }))
+    })
 
     let rafId = 0
 
@@ -107,11 +108,6 @@
         rafId = requestAnimationFrame(updateIndicator)
     }
 
-    function handleValueChange(newValue: string) {
-        value = newValue
-        onValueChange?.(newValue)
-    }
-
     // Update indicator on mount and when dependencies change
     $effect(() => {
         void value
@@ -135,8 +131,9 @@
 </script>
 
 <Tabs.Root
-    {value}
-    onValueChange={handleValueChange}
+    bind:ref
+    bind:value
+    {onValueChange}
     {orientation}
     {activationMode}
     {disabled}

package/dist/Tabs/Tabs.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { TabsProps } from './tabs.types.js';
 export type Props = TabsProps;
 import { Tabs } from 'bits-ui';
-declare const Tabs: import("svelte").Component<TabsProps, {}, "value">;
+declare const Tabs: import("svelte").Component<TabsProps, {}, "ref" | "value">;
 type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;

package/dist/Tabs/tabs.types.d.ts

@@ -87,6 +87,10 @@ export interface TabsSlotProps {
  * @see https://bits-ui.com/docs/components/tabs
  */
 export interface TabsProps {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * Array of tab items to render.
      * Each item can have a label, icon, content, and optional styling overrides.

package/dist/Tabs/tabs.variants.js

@@ -7,6 +7,8 @@ export const tabsVariants = tv({
         trigger: [
             'relative inline-flex items-center justify-center whitespace-nowrap',
             'font-medium cursor-pointer select-none',
+            'data-[state=inactive]:text-on-surface-variant',
+            'hover:data-[state=inactive]:not-disabled:text-on-surface',
             'focus-visible:outline-none focus-visible:ring-2',
             'disabled:cursor-not-allowed disabled:opacity-50',
             'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',