sv5ui 2.0.0 → 2.1.0

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.

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

@@ -84,7 +84,7 @@ export interface TabsSlotProps {
  */
 export interface TabsProps extends Pick<TabsRootProps, 'id' | 'style' | 'title' | 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'onclick' | 'onkeydown' | 'onmouseenter' | 'onmouseleave' | 'onfocus' | 'onblur'> {
     /** Custom data attributes are forwarded to the root element. */
-    [key: `data-${string}`]: unknown;
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
     /**
      * Bindable reference to the root DOM element.
      */

package/dist/ThemeModeButton/ThemeModeButton.svelte

@@ -34,7 +34,8 @@
 
     const isDark = $derived(mode.current === 'dark')
 
-    const slots = $derived(themeModeButtonVariants())
+    const slots = themeModeButtonVariants()
+    const baseClass = $derived(slots.base({ class: [config.slots.base, className, ui?.base] }))
 
     const iconName = $derived(isDark ? lightIcon : darkIcon)
 </script>
@@ -48,7 +49,7 @@
         {disabled}
         {square}
         {block}
-        class={slots.base({ class: [config.slots.base, className, ui?.base] })}
+        class={baseClass}
         aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
         onclick={toggleMode}
         {...restProps}
@@ -65,7 +66,7 @@
         {square}
         {block}
         icon={iconName}
-        class={slots.base({ class: [config.slots.base, className, ui?.base] })}
+        class={baseClass}
         aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
         onclick={toggleMode}
         {...restProps}

package/dist/Tooltip/Tooltip.svelte

@@ -133,7 +133,7 @@
         {#if children}
             <Tooltip.Trigger>
                 {#snippet child({ props })}
-                    <span {...props} class={className as string}>
+                    <span {...props} class={[className]}>
                         {@render children({ open })}
                     </span>
                 {/snippet}

package/dist/Tooltip/tooltip.types.d.ts

@@ -8,6 +8,8 @@ type ProviderProps = Pick<TooltipProviderPropsWithoutHTML, 'delayDuration' | 'di
 type RootProps = Pick<TooltipRootPropsWithoutHTML, 'open' | 'onOpenChange' | 'disableCloseOnTriggerClick' | 'ignoreNonKeyboardFocus' | 'disabled'>;
 type ContentProps = Pick<TooltipContentPropsWithoutHTML, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'avoidCollisions' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'hideWhenDetached' | 'onEscapeKeydown' | 'forceMount'>;
 export interface TooltipProps extends ProviderProps, RootProps, ContentProps {
+    /** Custom data attributes are forwarded to the content element. */
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
     /**
      * Bindable reference to the content DOM element.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sv5ui",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "description": "A modern Svelte 5 UI component library with Tailwind CSS",
     "author": "ndlabdev",
     "license": "MIT",