sv5ui 1.1.2 → 1.2.0

package/dist/Textarea/Textarea.svelte

@@ -91,15 +91,16 @@
         loading && isTrailing ? loadingIcon : trailingIcon || (trailing ? icon : undefined)
     )
 
-    const ariaDescribedBy = $derived.by(() => {
-        if (!formFieldContext) return undefined
-        const id = formFieldContext.ariaId
-        if (hasError) return `${id}-error`
-        return `${id}-description ${id}-help`
-    })
+    const ariaDescribedBy = $derived(
+        !formFieldContext
+            ? undefined
+            : hasError
+              ? `${formFieldContext.ariaId}-error`
+              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+    )
 
-    const classes = $derived.by(() => {
-        const slots = textareaVariants({
+    const variantSlots = $derived(
+        textareaVariants({
             variant,
             color: resolvedColor,
             size: resolvedSize,
@@ -109,22 +110,22 @@
             highlight: resolvedHighlight,
             autoresize
         })
-        return {
-            root: slots.root({
-                class: [config.slots.root, fieldGroupClass?.root, className, ui?.root]
-            }),
-            base: slots.base({
-                class: [config.slots.base, fieldGroupClass?.base, ui?.base]
-            }),
-            leading: slots.leading({ class: [config.slots.leading, ui?.leading] }),
-            leadingIcon: slots.leadingIcon({
-                class: [config.slots.leadingIcon, ui?.leadingIcon]
-            }),
-            trailing: slots.trailing({ class: [config.slots.trailing, ui?.trailing] }),
-            trailingIcon: slots.trailingIcon({
-                class: [config.slots.trailingIcon, ui?.trailingIcon]
-            })
-        }
+    )
+    const classes = $derived({
+        root: variantSlots.root({
+            class: [config.slots.root, fieldGroupClass?.root, className, ui?.root]
+        }),
+        base: variantSlots.base({
+            class: [config.slots.base, fieldGroupClass?.base, ui?.base]
+        }),
+        leading: variantSlots.leading({ class: [config.slots.leading, ui?.leading] }),
+        leadingIcon: variantSlots.leadingIcon({
+            class: [config.slots.leadingIcon, ui?.leadingIcon]
+        }),
+        trailing: variantSlots.trailing({ class: [config.slots.trailing, ui?.trailing] }),
+        trailingIcon: variantSlots.trailingIcon({
+            class: [config.slots.trailingIcon, ui?.trailingIcon]
+        })
     })
 
     let cachedMaxHeight = $state(0)
@@ -172,6 +173,7 @@
     {/if}
 
     <textarea
+        {...restProps}
         bind:this={ref}
         bind:value
         {rows}
@@ -181,7 +183,6 @@
         aria-describedby={ariaDescribedBy}
         aria-invalid={resolvedHighlight ? true : undefined}
         class={classes.base}
-        {...restProps}
     ></textarea>
 
     {#if trailingSlot}

package/dist/ThemeModeButton/theme-mode-button.types.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { HTMLAttributes } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
 import type { ButtonVariantProps } from '../Button/button.variants.js';
 import type { ThemeModeButtonSlots } from './theme-mode-button.variants.js';
-export type ThemeModeButtonProps = Omit<HTMLButtonAttributes, 'children'> & {
+export type ThemeModeButtonProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'children'> & {
     /**
      * Controls the visual style of the button.
      * @default 'ghost'
@@ -36,6 +36,11 @@ export type ThemeModeButtonProps = Omit<HTMLButtonAttributes, 'children'> & {
      * @default false
      */
     loading?: boolean;
+    /**
+     * Disables the button and prevents interaction.
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Forces equal width and height, ideal for icon-only buttons.
      * @default true

package/dist/Timeline/Timeline.svelte

@@ -5,6 +5,7 @@
 </script>
 
 <script lang="ts">
+    import type { ClassNameValue } from 'tailwind-merge'
     import { timelineVariants, timelineDefaults } from './timeline.variants.js'
     import type { TimelineItemState } from './timeline.types.js'
     import { getComponentConfig } from '../config.js'
@@ -14,6 +15,7 @@
     const config = getComponentConfig('timeline', timelineDefaults)
 
     let {
+        ref = $bindable(null),
         as = 'div',
         items = [],
         size = config.defaultVariants.size,
@@ -31,19 +33,54 @@
         ...restProps
     }: Props = $props()
 
-    // Pre-compute shared slot classes outside the loop (these don't vary per item)
+    type ItemUi = Partial<Record<string, ClassNameValue>>
+
     const classes = $derived.by(() => {
         const slots = timelineVariants({ orientation, color, size, reverse })
+        const c = config.slots
+
+        // Pre-compute defaults — reused for all items without per-item ui
+        const _item = slots.item({ class: [c.item, ui?.item] })
+        const _container = slots.container({ class: [c.container, ui?.container] })
+        const _indicator = slots.indicator({ class: [c.indicator, ui?.indicator] })
+        const _separator = slots.separator({ class: [c.separator, ui?.separator] })
+        const _wrapper = slots.wrapper({ class: [c.wrapper, ui?.wrapper] })
+        const _date = slots.date({ class: [c.date, ui?.date] })
+        const _title = slots.title({ class: [c.title, ui?.title] })
+        const _description = slots.description({ class: [c.description, ui?.description] })
+
         return {
-            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-            item: slots.item({ class: [config.slots.item, ui?.item] }),
-            container: slots.container({ class: [config.slots.container, ui?.container] }),
-            indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
-            separator: slots.separator({ class: [config.slots.separator, ui?.separator] }),
-            wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
-            date: slots.date({ class: [config.slots.date, ui?.date] }),
-            title: slots.title({ class: [config.slots.title, ui?.title] }),
-            description: slots.description({ class: [config.slots.description, ui?.description] })
+            root: slots.root({ class: [c.root, className, ui?.root] }),
+            item: (itemClass?: ClassNameValue, itemUi?: ItemUi) =>
+                itemClass || itemUi
+                    ? slots.item({ class: [c.item, ui?.item, itemUi?.item, itemClass] })
+                    : _item,
+            container: (itemUi?: ItemUi) =>
+                itemUi
+                    ? slots.container({ class: [c.container, ui?.container, itemUi.container] })
+                    : _container,
+            indicator: (itemUi?: ItemUi) =>
+                itemUi
+                    ? slots.indicator({ class: [c.indicator, ui?.indicator, itemUi.indicator] })
+                    : _indicator,
+            separator: (itemUi?: ItemUi) =>
+                itemUi
+                    ? slots.separator({ class: [c.separator, ui?.separator, itemUi.separator] })
+                    : _separator,
+            wrapper: (itemUi?: ItemUi) =>
+                itemUi
+                    ? slots.wrapper({ class: [c.wrapper, ui?.wrapper, itemUi.wrapper] })
+                    : _wrapper,
+            date: (itemUi?: ItemUi) =>
+                itemUi?.date ? slots.date({ class: [c.date, ui?.date, itemUi.date] }) : _date,
+            title: (itemUi?: ItemUi) =>
+                itemUi?.title ? slots.title({ class: [c.title, ui?.title, itemUi.title] }) : _title,
+            description: (itemUi?: ItemUi) =>
+                itemUi?.description
+                    ? slots.description({
+                          class: [c.description, ui?.description, itemUi.description]
+                      })
+                    : _description
         }
     })
 
@@ -58,15 +95,21 @@
     }
 </script>
 
-<svelte:element this={as} class={classes.root} {...restProps}>
+<svelte:element
+    this={as}
+    bind:this={ref}
+    class={classes.root}
+    data-orientation={orientation}
+    {...restProps}
+>
     {#each items as item, index (item.value ?? index)}
         {@const state = getState(index)}
-        <div class={item.class ? `${classes.item} ${item.class}` : classes.item} data-state={state}>
-            <div class={classes.container}>
+        <div class={classes.item(item.class, item.ui)} data-state={state}>
+            <div class={classes.container(item.ui)}>
                 {#if indicator}
                     {@render indicator({ item, index, state })}
                 {:else}
-                    <div class={classes.indicator}>
+                    <div class={classes.indicator(item.ui)}>
                         {#if item.avatar}
                             <Avatar {...item.avatar} {size} />
                         {:else if item.icon}
@@ -76,27 +119,27 @@
                 {/if}
 
                 {#if reverse ? index > 0 : index < items.length - 1}
-                    <div class={classes.separator}></div>
+                    <div class={classes.separator(item.ui)}></div>
                 {/if}
             </div>
 
-            <div class={classes.wrapper}>
+            <div class={classes.wrapper(item.ui)}>
                 {#if dateSlot}
                     {@render dateSlot({ item, index, state })}
                 {:else if item.date}
-                    <div class={classes.date}>{item.date}</div>
+                    <div class={classes.date(item.ui)}>{item.date}</div>
                 {/if}
 
                 {#if titleSlot}
                     {@render titleSlot({ item, index, state })}
                 {:else if item.title}
-                    <div class={classes.title}>{item.title}</div>
+                    <div class={classes.title(item.ui)}>{item.title}</div>
                 {/if}
 
                 {#if descriptionSlot}
                     {@render descriptionSlot({ item, index, state })}
                 {:else if item.description}
-                    <div class={classes.description}>{item.description}</div>
+                    <div class={classes.description(item.ui)}>{item.description}</div>
                 {/if}
 
                 {#if content}

package/dist/Timeline/Timeline.svelte.d.ts

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

package/dist/Timeline/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Timeline } from './Timeline.svelte';
-export type { TimelineProps, TimelineItem } from './timeline.types.js';
+export type { TimelineProps, TimelineItem, TimelineItemState } from './timeline.types.js';

package/dist/Timeline/timeline.types.d.ts

@@ -38,8 +38,16 @@ export type TimelineItem = {
      * Additional CSS classes for this item.
      */
     class?: ClassNameValue;
+    /**
+     * Per-item slot class overrides.
+     */
+    ui?: Partial<Record<'item' | 'container' | 'indicator' | 'separator' | 'wrapper' | 'date' | 'title' | 'description', ClassNameValue>>;
 };
 export type TimelineProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * The HTML element to render as.
      * @default 'div'

package/dist/Tooltip/Tooltip.svelte

@@ -13,6 +13,7 @@
     const config = getComponentConfig('tooltip', tooltipDefaults)
 
     let {
+        ref = $bindable(null),
         open = $bindable(false),
         onOpenChange,
         delayDuration,
@@ -20,7 +21,7 @@
         disableCloseOnTriggerClick,
         ignoreNonKeyboardFocus,
         disabled = false,
-        side = config.defaultVariants.side ?? 'bottom',
+        side = 'bottom',
         sideOffset = 8,
         align = 'center',
         alignOffset = 0,
@@ -39,17 +40,18 @@
         ui,
         class: className,
         children,
-        content: contentSlot
+        content: contentSlot,
+        ...restProps
     }: Props = $props()
 
     // Pre-compute booleans
     const hasText = $derived(!!text)
     const hasKbds = $derived(!!kbds?.length)
     const hasContent = $derived(hasText || hasKbds || !!contentSlot)
-    const showArrow = $derived(!!arrow)
 
     // Compute variant classes
-    const variantSlots = $derived(tooltipVariants({ side, transition }))
+    const variantSlots = $derived(tooltipVariants({ transition }))
+    const kbdsSize = (config.slots.kbdsSize ?? 'sm') as 'sm' | 'md' | 'lg'
     const classes = $derived({
         content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
         arrow: variantSlots.arrow({ class: [config.slots.arrow, ui?.arrow] }),
@@ -57,7 +59,7 @@
         kbds: variantSlots.kbds({ class: [config.slots.kbds, ui?.kbds] })
     })
 
-    // Arrow props - default size matches tooltip height for proper pointing
+    // Arrow props
     const arrowProps = $derived.by(() => {
         if (typeof arrow === 'object') {
             return { width: 12, height: 6, ...arrow }
@@ -81,9 +83,9 @@
                         <span class="mx-0.5 text-inverse-on-surface/60">·</span>
                     {/if}
                     {#if typeof kbd === 'string'}
-                        <Kbd value={kbd} size="sm" variant="soft" color="surface" />
+                        <Kbd value={kbd} size={kbdsSize} variant="soft" color="surface" />
                     {:else}
-                        <Kbd size="sm" variant="soft" color="surface" {...kbd} />
+                        <Kbd size={kbdsSize} variant="soft" color="surface" {...kbd} />
                     {/if}
                 {/each}
             </span>
@@ -93,6 +95,7 @@
 
 {#snippet tooltipContentEl()}
     <Tooltip.Content
+        bind:ref
         {side}
         {sideOffset}
         {align}
@@ -105,10 +108,11 @@
         {onEscapeKeydown}
         {forceMount}
         class={classes.content}
+        {...restProps}
     >
         {@render tooltipContent()}
 
-        {#if showArrow}
+        {#if arrow}
             <Tooltip.Arrow
                 width={arrowProps.width}
                 height={arrowProps.height}
@@ -122,8 +126,6 @@
     <Tooltip.Root
         bind:open
         {onOpenChange}
-        {delayDuration}
-        {disableHoverableContent}
         {disableCloseOnTriggerClick}
         {ignoreNonKeyboardFocus}
         disabled={disabled || !hasContent}

package/dist/Tooltip/Tooltip.svelte.d.ts

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

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

@@ -1,13 +1,17 @@
 import type { Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
 import type { TooltipSlots, TooltipVariantProps } from './tooltip.variants.js';
-import type { TooltipRootPropsWithoutHTML, TooltipContentPropsWithoutHTML, TooltipArrowPropsWithoutHTML } from 'bits-ui';
+import type { TooltipRootPropsWithoutHTML, TooltipContentPropsWithoutHTML, TooltipArrowPropsWithoutHTML, TooltipProviderPropsWithoutHTML } from 'bits-ui';
 import type { KbdProps } from '../Kbd/kbd.types.js';
-export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
 export type TooltipAlign = 'start' | 'center' | 'end';
-type RootProps = Pick<TooltipRootPropsWithoutHTML, 'open' | 'onOpenChange' | 'delayDuration' | 'disableHoverableContent' | 'disableCloseOnTriggerClick' | 'ignoreNonKeyboardFocus' | 'disabled'>;
+type ProviderProps = Pick<TooltipProviderPropsWithoutHTML, 'delayDuration' | 'disableHoverableContent'>;
+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 RootProps, ContentProps {
+export interface TooltipProps extends ProviderProps, RootProps, ContentProps {
+    /**
+     * Bindable reference to the content DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * The text content of the tooltip.
      */

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

@@ -1,22 +1,8 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const tooltipVariants: import("tailwind-variants").TVReturnType<{
-    side: {
-        top: {
-            content: string;
-        };
-        right: {
-            content: string;
-        };
-        bottom: {
-            content: string;
-        };
-        left: {
-            content: string;
-        };
-    };
     transition: {
         true: {
-            content: string;
+            content: string[];
         };
     };
 }, {
@@ -24,24 +10,11 @@ export declare const tooltipVariants: import("tailwind-variants").TVReturnType<{
     arrow: string;
     text: string;
     kbds: string;
+    kbdsSize: string;
 }, undefined, {
-    side: {
-        top: {
-            content: string;
-        };
-        right: {
-            content: string;
-        };
-        bottom: {
-            content: string;
-        };
-        left: {
-            content: string;
-        };
-    };
     transition: {
         true: {
-            content: string;
+            content: string[];
         };
     };
 }, {
@@ -49,24 +22,11 @@ export declare const tooltipVariants: import("tailwind-variants").TVReturnType<{
     arrow: string;
     text: string;
     kbds: string;
+    kbdsSize: string;
 }, import("tailwind-variants").TVReturnType<{
-    side: {
-        top: {
-            content: string;
-        };
-        right: {
-            content: string;
-        };
-        bottom: {
-            content: string;
-        };
-        left: {
-            content: string;
-        };
-    };
     transition: {
         true: {
-            content: string;
+            content: string[];
         };
     };
 }, {
@@ -74,28 +34,15 @@ export declare const tooltipVariants: import("tailwind-variants").TVReturnType<{
     arrow: string;
     text: string;
     kbds: string;
+    kbdsSize: string;
 }, undefined, unknown, unknown, undefined>>;
 export type TooltipVariantProps = VariantProps<typeof tooltipVariants>;
 export type TooltipSlots = keyof ReturnType<typeof tooltipVariants>;
 export declare const tooltipDefaults: {
     defaultVariants: import("tailwind-variants").TVDefaultVariants<{
-        side: {
-            top: {
-                content: string;
-            };
-            right: {
-                content: string;
-            };
-            bottom: {
-                content: string;
-            };
-            left: {
-                content: string;
-            };
-        };
         transition: {
             true: {
-                content: string;
+                content: string[];
             };
         };
     }, {
@@ -103,24 +50,11 @@ export declare const tooltipDefaults: {
         arrow: string;
         text: string;
         kbds: string;
+        kbdsSize: string;
     }, {
-        side: {
-            top: {
-                content: string;
-            };
-            right: {
-                content: string;
-            };
-            bottom: {
-                content: string;
-            };
-            left: {
-                content: string;
-            };
-        };
         transition: {
             true: {
-                content: string;
+                content: string[];
             };
         };
     }, {
@@ -128,6 +62,7 @@ export declare const tooltipDefaults: {
         arrow: string;
         text: string;
         kbds: string;
+        kbdsSize: string;
     }>;
     slots: Partial<Record<TooltipSlots, string>>;
 };

package/dist/Tooltip/tooltip.variants.js

@@ -10,31 +10,22 @@ export const tooltipVariants = tv({
         ],
         arrow: 'fill-inverse-surface text-inverse-surface',
         text: 'truncate',
-        kbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5'
+        kbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
+        kbdsSize: 'sm'
     },
     variants: {
-        side: {
-            top: {
-                content: 'data-[state=delayed-open]:animate-[slide-in-from-bottom_150ms_ease-out] data-[state=closed]:animate-[slide-in-from-top_100ms_ease-in_reverse]'
-            },
-            right: {
-                content: 'data-[state=delayed-open]:animate-[slide-in-from-left_150ms_ease-out] data-[state=closed]:animate-[slide-in-from-right_100ms_ease-in_reverse]'
-            },
-            bottom: {
-                content: 'data-[state=delayed-open]:animate-[slide-in-from-top_150ms_ease-out] data-[state=closed]:animate-[slide-in-from-bottom_100ms_ease-in_reverse]'
-            },
-            left: {
-                content: 'data-[state=delayed-open]:animate-[slide-in-from-right_150ms_ease-out] data-[state=closed]:animate-[slide-in-from-left_100ms_ease-in_reverse]'
-            }
-        },
         transition: {
             true: {
-                content: 'data-[state=delayed-open]:animate-[fade-in_150ms_ease-out,zoom-in_150ms_ease-out] data-[state=closed]:animate-[fade-out_100ms_ease-in,zoom-out_100ms_ease-in]'
+                content: [
+                    'data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95',
+                    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+                    'data-[side=top]:slide-in-from-bottom-2 data-[side=right]:slide-in-from-left-2',
+                    'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2'
+                ]
             }
         }
     },
     defaultVariants: {
-        side: 'bottom',
         transition: true
     }
 });

package/dist/User/User.svelte

@@ -14,6 +14,7 @@
     const config = getComponentConfig('user', userDefaults)
 
     let {
+        ref = $bindable(null),
         as = 'div',
         ui,
         name,
@@ -44,13 +45,10 @@
     })
 
     const mergedAvatarProps = $derived(
-        avatar ? { size: size as typeof avatar.size, ...avatar } : undefined
+        avatar ? { alt: name, size: size as typeof avatar.size, ...avatar } : undefined
     )
 
-    const chipProps = $derived.by(() => {
-        if (!chip || !avatar) return null
-        return chip === true ? {} : chip
-    })
+    const chipProps = $derived(chip && avatar ? (chip === true ? {} : chip) : null)
 </script>
 
 {#snippet userContent()}
@@ -71,24 +69,30 @@
             {#if nameSlot}
                 {@render nameSlot()}
             {:else if name}
-                <div class={classes.name}>{name}</div>
+                <p class={classes.name}>{name}</p>
             {/if}
 
             {#if descriptionSlot}
                 {@render descriptionSlot()}
             {:else if description}
-                <div class={classes.description}>{description}</div>
+                <p class={classes.description}>{description}</p>
             {/if}
         </div>
     {/if}
 {/snippet}
 
 {#if href}
-    <Link {href} raw class={classes.root}>
+    <Link bind:ref {href} raw class={classes.root} data-orientation={orientation} {...restProps}>
         {@render userContent()}
     </Link>
 {:else}
-    <svelte:element this={as} class={classes.root} {...restProps}>
+    <svelte:element
+        this={as}
+        bind:this={ref}
+        class={classes.root}
+        data-orientation={orientation}
+        {...restProps}
+    >
         {@render userContent()}
     </svelte:element>
 {/if}

package/dist/User/User.svelte.d.ts

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

package/dist/User/user.types.d.ts

@@ -6,6 +6,10 @@ import type { AvatarProps } from '../Avatar/avatar.types.js';
 import type { ChipProps } from '../Chip/chip.types.js';
 import type { LinkProps } from '../Link/link.types.js';
 export type UserProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * Sets the HTML element type to render.
      * Ignored when `href` is provided.