sv5ui 1.8.0 → 2.1.0

package/dist/SelectMenu/SelectMenu.svelte

@@ -21,9 +21,9 @@
     } from '../FieldGroup/field-group.variants.js'
     import Icon from '../Icon/Icon.svelte'
     import Avatar from '../Avatar/Avatar.svelte'
-    import Input from '../Input/Input.svelte'
     import type { AvatarSize } from '../Avatar/avatar.types.js'
     import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
+    import { useDebounce } from '../hooks/useDebounce.svelte.js'
 
     const config = getComponentConfig('selectMenu', selectMenuDefaults)
     const icons = getComponentConfig('icons', iconsDefaults)
@@ -82,7 +82,8 @@
         itemTrailing,
         selected: selectedSlot,
         empty: emptySlot,
-        content: contentSlot
+        content: contentSlot,
+        ...restProps
     }: Props = $props()
 
     // ---- Form context ----
@@ -181,13 +182,28 @@
 
     // ---- Search & filtering ----
     let searchTerm = $state('')
+    let debouncedSearch = $state('')
+    const searchDebounce = useDebounce({ delay: 200 })
+
+    function setSearch(term: string) {
+        searchTerm = term
+        searchDebounce.run(() => {
+            debouncedSearch = term
+        })
+    }
+
+    function resetSearch() {
+        searchDebounce.cancel()
+        searchTerm = ''
+        debouncedSearch = ''
+    }
 
     const filteredItems = $derived(
-        ignoreFilter || !searchTerm.trim()
+        ignoreFilter || !debouncedSearch.trim()
             ? combinedItems
             : combinedItems.filter((item) => {
                   if ('type' in item) return true
-                  const query = searchTerm.toLowerCase()
+                  const query = debouncedSearch.toLowerCase()
                   return filterFields.some((field) => {
                       const val = (item as unknown as Record<string, unknown>)[field]
                       return typeof val === 'string' && val.toLowerCase().includes(query)
@@ -256,7 +272,7 @@
         }
 
         emit.onChange()
-        searchTerm = ''
+        resetSearch()
     }
 
     // ---- Leading / trailing ----
@@ -386,7 +402,7 @@
     // ---- Event handlers (Nuxt UI v4 pattern) ----
     function onUpdateOpen(val: boolean) {
         if (!val) {
-            searchTerm = ''
+            resetSearch()
             emit.onBlur()
         } else {
             emit.onFocus()
@@ -444,19 +460,19 @@
         {forceMount}
         class={contentClass}
     >
-        <Input
+        <!-- svelte-ignore a11y_autofocus -->
+        <input
+            type="text"
             autofocus
             placeholder={searchPlaceholder}
             value={searchTerm}
-            oninput={(e) => (searchTerm = (e.currentTarget as HTMLInputElement).value)}
+            oninput={(e) => setSearch((e.currentTarget as HTMLInputElement).value)}
             onkeydown={(e: KeyboardEvent) => {
                 if (e.key !== 'Enter') return
                 if (!showCreateItem) return
                 e.preventDefault()
                 handleCreate()
             }}
-            variant="none"
-            size={resolvedSize}
             class={inputClass}
         />
 
@@ -539,6 +555,7 @@
         />
 
         <Combobox.Trigger
+            {...restProps}
             id={resolvedId}
             aria-describedby={ariaDescribedBy}
             aria-invalid={resolvedHighlight ? true : undefined}

package/dist/SelectMenu/SelectMenuFormFieldTestWrapper.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import FormField from '../FormField/FormField.svelte'
+    import SelectMenu from './SelectMenu.svelte'
+    import type { SelectMenuItemType } from './select-menu.types.js'
+
+    let { items = [] }: { items?: SelectMenuItemType[] } = $props()
+</script>
+
+<FormField name="fruit" label="Fruit">
+    <SelectMenu open {items} placeholder="Pick" />
+</FormField>

package/dist/SelectMenu/SelectMenuFormFieldTestWrapper.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SelectMenuItemType } from './select-menu.types.js';
+type $$ComponentProps = {
+    items?: SelectMenuItemType[];
+};
+declare const SelectMenuFormFieldTestWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
+type SelectMenuFormFieldTestWrapper = ReturnType<typeof SelectMenuFormFieldTestWrapper>;
+export default SelectMenuFormFieldTestWrapper;

package/dist/SelectMenu/select-menu.types.d.ts

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
 import type { SelectMenuVariantProps, SelectMenuSlots } from './select-menu.variants.js';
 import type { AvatarProps } from '../Avatar/avatar.types.js';
-import type { ComboboxContentPropsWithoutHTML } from 'bits-ui';
+import type { ComboboxContentPropsWithoutHTML, ComboboxTriggerProps } from 'bits-ui';
 /**
  * A single selectable option within the SelectMenu.
  */
@@ -87,7 +87,10 @@ type ContentProps = Pick<ComboboxContentPropsWithoutHTML, 'side' | 'sideOffset'
  *
  * @see https://bits-ui.com/docs/components/combobox
  */
-export interface SelectMenuProps extends ContentProps {
+type TriggerHTMLProps = Pick<ComboboxTriggerProps, 'style' | 'title' | 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'onclick' | 'onkeydown' | 'onmouseenter' | 'onmouseleave' | 'onfocus' | 'onblur'>;
+export interface SelectMenuProps extends ContentProps, TriggerHTMLProps {
+    /** Custom data attributes are forwarded to the trigger element. */
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
     /**
      * Bindable reference to the root DOM element.
      */

package/dist/SelectMenu/select-menu.variants.d.ts

@@ -2,26 +2,31 @@ import { type VariantProps } from 'tailwind-variants';
 export declare const selectMenuVariants: import("tailwind-variants").TVReturnType<{
     size: {
         xs: {
+            input: string;
             empty: string;
             createItem: string;
             createItemIcon: string;
         };
         sm: {
+            input: string;
             empty: string;
             createItem: string;
             createItemIcon: string;
         };
         md: {
+            input: string;
             empty: string;
             createItem: string;
             createItemIcon: string;
         };
         lg: {
+            input: string;
             empty: string;
             createItem: string;
             createItemIcon: string;
         };
         xl: {
+            input: string;
             empty: string;
             createItem: string;
             createItemIcon: string;
@@ -29,7 +34,7 @@ export declare const selectMenuVariants: import("tailwind-variants").TVReturnTyp
     };
 }, {
     content: string[];
-    input: string;
+    input: string[];
     viewport: string;
     empty: string;
     createItem: string[];
@@ -606,26 +611,31 @@ export declare const selectMenuDefaults: {
     defaultVariants: import("tailwind-variants").TVDefaultVariants<{
         size: {
             xs: {
+                input: string;
                 empty: string;
                 createItem: string;
                 createItemIcon: string;
             };
             sm: {
+                input: string;
                 empty: string;
                 createItem: string;
                 createItemIcon: string;
             };
             md: {
+                input: string;
                 empty: string;
                 createItem: string;
                 createItemIcon: string;
             };
             lg: {
+                input: string;
                 empty: string;
                 createItem: string;
                 createItemIcon: string;
             };
             xl: {
+                input: string;
                 empty: string;
                 createItem: string;
                 createItemIcon: string;
@@ -633,7 +643,7 @@ export declare const selectMenuDefaults: {
         };
     }, {
         content: string[];
-        input: string;
+        input: string[];
         viewport: string;
         empty: string;
         createItem: string[];

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

@@ -13,7 +13,11 @@ export const selectMenuVariants = tv({
             'overflow-hidden',
             'flex flex-col'
         ],
-        input: 'border-b border-outline-variant',
+        input: [
+            'w-full border-0 border-b border-outline-variant bg-transparent',
+            'text-on-surface placeholder:text-on-surface-variant/50',
+            'focus:outline-none focus:ring-0'
+        ],
         viewport: 'p-1 flex-1 overflow-y-auto scrollbar-thin',
         empty: 'text-center text-on-surface-variant',
         createItem: [
@@ -28,26 +32,31 @@ export const selectMenuVariants = tv({
     variants: {
         size: {
             xs: {
+                input: 'px-2 py-1 text-xs',
                 empty: 'p-2 text-xs',
                 createItem: 'py-1 text-xs',
                 createItemIcon: 'size-3'
             },
             sm: {
+                input: 'px-2.5 py-1.5 text-xs',
                 empty: 'p-2.5 text-xs',
                 createItem: 'py-1.5 text-xs',
                 createItemIcon: 'size-3.5'
             },
             md: {
+                input: 'px-3 py-2 text-sm',
                 empty: 'p-2.5 text-sm',
                 createItem: 'py-1.5 text-sm',
                 createItemIcon: 'size-4'
             },
             lg: {
+                input: 'px-4 py-2.5 text-sm',
                 empty: 'p-3 text-sm',
                 createItem: 'py-2 text-sm',
                 createItemIcon: 'size-5'
             },
             xl: {
+                input: 'px-5 py-3 text-base',
                 empty: 'p-3 text-base',
                 createItem: 'py-2.5 text-base',
                 createItemIcon: 'size-5'

package/dist/Separator/Separator.svelte

@@ -24,6 +24,7 @@
         size = config.defaultVariants.size,
         type = config.defaultVariants.type,
         orientation = config.defaultVariants.orientation,
+        position = config.defaultVariants.position,
         decorative = false,
         class: className,
         content,
@@ -46,9 +47,11 @@
 </script>
 
 <Separator.Root bind:ref class={classes.root} {orientation} {decorative} {...restProps}>
-    <div class={classes.border}></div>
-
     {#if hasContent}
+        {#if position !== 'start'}
+            <div class={classes.border}></div>
+        {/if}
+
         <div class={classes.container}>
             {#if content}
                 {@render content()}
@@ -65,6 +68,10 @@
             {/if}
         </div>
 
+        {#if position !== 'end'}
+            <div class={classes.border}></div>
+        {/if}
+    {:else}
         <div class={classes.border}></div>
     {/if}
 </Separator.Root>

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

@@ -3,7 +3,7 @@ import type { ClassNameValue } from 'tailwind-merge';
 import type { Separator } from 'bits-ui';
 import type { SeparatorVariantProps, SeparatorSlots } from './separator.variants.js';
 import type { AvatarProps } from '../Avatar/avatar.types.js';
-export type SeparatorProps = Separator.RootProps & {
+export type SeparatorProps = Omit<Separator.RootProps, 'class'> & {
     /**
      * Sets the color scheme applied to the separator.
      * @default 'surface'
@@ -19,6 +19,11 @@ export type SeparatorProps = Separator.RootProps & {
      * @default 'solid'
      */
     type?: NonNullable<SeparatorVariantProps['type']>;
+    /**
+     * Position of the label/icon/avatar/content along the separator.
+     * @default 'center'
+     */
+    position?: NonNullable<SeparatorVariantProps['position']>;
     /**
      * Text content displayed in the center of the separator.
      */

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

@@ -87,6 +87,11 @@ export declare const separatorVariants: import("tailwind-variants").TVReturnType
             container: string;
         };
     };
+    position: {
+        start: string;
+        center: string;
+        end: string;
+    };
 }, {
     root: string;
     border: string;
@@ -182,6 +187,11 @@ export declare const separatorVariants: import("tailwind-variants").TVReturnType
             container: string;
         };
     };
+    position: {
+        start: string;
+        center: string;
+        end: string;
+    };
 }, {
     root: string;
     border: string;
@@ -277,6 +287,11 @@ export declare const separatorVariants: import("tailwind-variants").TVReturnType
             container: string;
         };
     };
+    position: {
+        start: string;
+        center: string;
+        end: string;
+    };
 }, {
     root: string;
     border: string;
@@ -376,6 +391,11 @@ export declare const separatorDefaults: {
                 container: string;
             };
         };
+        position: {
+            start: string;
+            center: string;
+            end: string;
+        };
     }, {
         root: string;
         border: string;
@@ -471,6 +491,11 @@ export declare const separatorDefaults: {
                 container: string;
             };
         };
+        position: {
+            start: string;
+            center: string;
+            end: string;
+        };
     }, {
         root: string;
         border: string;

package/dist/Separator/separator.variants.js

@@ -74,6 +74,11 @@ export const separatorVariants = tv({
                 border: 'h-full flex-1',
                 container: 'my-2'
             }
+        },
+        position: {
+            start: '',
+            center: '',
+            end: ''
         }
     },
     compoundVariants: [
@@ -94,7 +99,8 @@ export const separatorVariants = tv({
         color: 'surface',
         size: 'xs',
         type: 'solid',
-        orientation: 'horizontal'
+        orientation: 'horizontal',
+        position: 'center'
     }
 });
 export const separatorDefaults = {

package/dist/Skeleton/Skeleton.svelte

@@ -19,11 +19,9 @@
         ...restProps
     }: Props = $props()
 
-    const classes = $derived.by(() => {
-        const slots = skeletonVariants()
-        return {
-            root: slots.root({ class: [config.slots.root, className, ui?.root] })
-        }
+    const slots = skeletonVariants()
+    const classes = $derived({
+        root: slots.root({ class: [config.slots.root, className, ui?.root] })
     })
 </script>
 

package/dist/Slideover/Slideover.svelte

@@ -197,8 +197,10 @@
 
 <Dialog.Root bind:open onOpenChange={handleOpenChange} {onOpenChangeComplete}>
     {#if children}
-        <Dialog.Trigger class={className as string}>
-            {@render children()}
+        <Dialog.Trigger>
+            {#snippet child({ props })}
+                {@render children({ props })}
+            {/snippet}
         </Dialog.Trigger>
     {/if}
 

package/dist/Slideover/SlideoverTriggerTestWrapper.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import Slideover from './Slideover.svelte'
+</script>
+
+<Slideover title="Trigger test" description="D">
+    {#snippet children({ props })}
+        <button data-testid="trigger" {...props}>Open</button>
+    {/snippet}
+    {#snippet body()}<p>Body</p>{/snippet}
+</Slideover>

package/dist/Slideover/SlideoverTriggerTestWrapper.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SlideoverTriggerTestWrapper: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SlideoverTriggerTestWrapper = InstanceType<typeof SlideoverTriggerTestWrapper>;
+export default SlideoverTriggerTestWrapper;

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

@@ -100,10 +100,20 @@ export interface SlideoverProps extends RootProps, ContentProps {
      */
     class?: ClassNameValue;
     /**
-     * Default slot content used as the trigger element.
-     * When provided, clicking this element opens the slideover.
+     * Trigger content. Spread the provided `props` onto your own focusable
+     * element (e.g. a `<Button>`) so the dialog's trigger ARIA and event
+     * handlers land on the real control instead of a nested wrapper button.
+     *
+     * @example
+     * ```svelte
+     * {#snippet children({ props })}
+     *   <Button {...props}>Open</Button>
+     * {/snippet}
+     * ```
      */
-    children?: Snippet;
+    children?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
     /**
      * Custom content slot that replaces the entire default layout
      * (header, body, footer). Title and description are rendered

package/dist/Stepper/Stepper.svelte

@@ -122,9 +122,7 @@
         }
     }
 
-    $effect.pre(() => {
-        api = apiInstance
-    })
+    api = apiInstance
 
     const variantSlots = $derived(stepperVariants({ orientation, size, color }))
 

package/dist/Switch/Switch.svelte

@@ -72,17 +72,16 @@
         disabled: isDisabled ? true : undefined
     })
 
-    const classes = $derived.by(() => {
-        const slots = switchVariants(variantOpts)
-        return {
-            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-            base: slots.base({ class: [config.slots.base, ui?.base] }),
-            container: slots.container({ class: [config.slots.container, ui?.container] }),
-            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] })
-        }
+    const slots = $derived(switchVariants(variantOpts))
+
+    const classes = $derived({
+        root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+        base: slots.base({ class: [config.slots.base, ui?.base] }),
+        container: slots.container({ class: [config.slots.container, ui?.container] }),
+        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] })
     })
 
     const iconClasses = $derived.by(() => {
@@ -91,15 +90,11 @@
         const iconUiClass = [config.slots.icon, ui?.icon]
         return {
             checked: hasCheckedIcon
-                ? switchVariants({ ...variantOpts, checked: true, unchecked: loading }).icon({
-                      class: iconUiClass
-                  })
+                ? slots.icon({ class: iconUiClass, checked: true, unchecked: loading })
                 : undefined,
             unchecked:
                 hasUncheckedIcon && !loading
-                    ? switchVariants({ ...variantOpts, unchecked: true }).icon({
-                          class: iconUiClass
-                      })
+                    ? slots.icon({ class: iconUiClass, unchecked: true })
                     : undefined
         }
     })

package/dist/Table/table.utils.d.ts

@@ -35,17 +35,20 @@ export declare function resolveVisibleColumns<T extends Record<string, any>>(col
     left?: string[];
     right?: string[];
 }): TableColumn<T>[];
+type PinOffset = {
+    side: 'left' | 'right';
+    offset: number;
+};
+type PinOffsets = Map<string, PinOffset>;
 /**
  * Compute cumulative left/right offsets for pinned columns.
  */
 export declare function computePinOffsets<T extends Record<string, any>>(columns: TableColumn<T>[], columnSizing: Record<string, number>, columnPinning?: {
     left?: string[];
     right?: string[];
-}): Map<string, {
-    side: 'left' | 'right';
-    offset: number;
-}>;
+}): PinOffsets;
 /**
  * Format cell value for display — handles null/undefined/empty string.
  */
 export declare function formatCellValue(value: unknown): string;
+export {};

package/dist/Table/table.utils.js

@@ -17,20 +17,26 @@ export function getRowKey(row, rowKey, index) {
         return row[rowKey];
     return index;
 }
+function isNullish(v) {
+    return v === null || v === undefined;
+}
+function compareBooleans(a, b) {
+    return a === b ? 0 : a ? -1 : 1;
+}
 /**
  * Default sort comparator — handles string, number, boolean, null/undefined.
  */
 function defaultCompare(a, b) {
     if (a === b)
         return 0;
-    if (a === null || a === undefined)
+    if (isNullish(a))
         return 1;
-    if (b === null || b === undefined)
+    if (isNullish(b))
         return -1;
     if (typeof a === 'number' && typeof b === 'number')
         return a - b;
     if (typeof a === 'boolean' && typeof b === 'boolean')
-        return a === b ? 0 : a ? -1 : 1;
+        return compareBooleans(a, b);
     return String(a).localeCompare(String(b));
 }
 /**
@@ -128,33 +134,28 @@ export function resolveVisibleColumns(columns, columnVisibility, columnPinning)
     const right = visible.filter((c) => rightKeys.has(c.key));
     return [...left, ...center, ...right];
 }
+function pinOffsetsForSide(keys, side, columns, columnSizing) {
+    const entries = [];
+    let offset = 0;
+    for (const key of keys) {
+        const col = columns.find((c) => c.key === key);
+        if (!col)
+            continue;
+        entries.push([key, { side, offset }]);
+        offset += columnSizing[key] ?? col.width ?? 150;
+    }
+    return entries;
+}
 /**
  * Compute cumulative left/right offsets for pinned columns.
  */
 export function computePinOffsets(columns, columnSizing, columnPinning) {
-    const offsets = new Map();
     if (!columnPinning)
-        return offsets;
-    const leftKeys = columnPinning.left ?? [];
-    const rightKeys = columnPinning.right ?? [];
-    let leftOffset = 0;
-    for (const key of leftKeys) {
-        const col = columns.find((c) => c.key === key);
-        if (!col)
-            continue;
-        offsets.set(key, { side: 'left', offset: leftOffset });
-        leftOffset += columnSizing[key] ?? col.width ?? 150;
-    }
-    let rightOffset = 0;
-    for (let i = rightKeys.length - 1; i >= 0; i--) {
-        const key = rightKeys[i];
-        const col = columns.find((c) => c.key === key);
-        if (!col)
-            continue;
-        offsets.set(key, { side: 'right', offset: rightOffset });
-        rightOffset += columnSizing[key] ?? col.width ?? 150;
-    }
-    return offsets;
+        return new Map();
+    return new Map([
+        ...pinOffsetsForSide(columnPinning.left ?? [], 'left', columns, columnSizing),
+        ...pinOffsetsForSide([...(columnPinning.right ?? [])].reverse(), 'right', columns, columnSizing)
+    ]);
 }
 /**
  * Format cell value for display — handles null/undefined/empty string.