sv5ui 1.1.2 → 1.2.0

package/dist/Avatar/avatar.variants.js

@@ -1,27 +1,38 @@
 import { tv } from 'tailwind-variants';
 export const avatarVariants = tv({
     slots: {
-        root: 'inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle overflow-hidden bg-surface-container-highest',
+        root: 'inline-flex items-center justify-center shrink-0 select-none align-middle bg-surface-container-highest',
         image: 'h-full w-full rounded-[inherit] object-cover',
-        fallback: 'font-medium leading-none truncate text-on-surface-variant'
+        fallback: 'font-medium leading-none truncate text-on-surface-variant',
+        icon: 'text-on-surface-variant'
     },
     variants: {
         size: {
-            '3xs': { root: 'size-4 text-[8px]' },
-            '2xs': { root: 'size-5 text-[10px]' },
-            xs: { root: 'size-6 text-xs' },
-            sm: { root: 'size-7 text-sm' },
-            md: { root: 'size-8 text-base' },
-            lg: { root: 'size-9 text-lg' },
-            xl: { root: 'size-10 text-xl' },
-            '2xl': { root: 'size-11 text-[22px]' },
-            '3xl': { root: 'size-12 text-2xl' }
+            '3xs': { root: 'size-4 text-[8px]', icon: 'size-2.5' },
+            '2xs': { root: 'size-5 text-[10px]', icon: 'size-3' },
+            xs: { root: 'size-6 text-xs', icon: 'size-3.5' },
+            sm: { root: 'size-7 text-sm', icon: 'size-4' },
+            md: { root: 'size-8 text-base', icon: 'size-5' },
+            lg: { root: 'size-9 text-lg', icon: 'size-5' },
+            xl: { root: 'size-10 text-xl', icon: 'size-6' },
+            '2xl': { root: 'size-11 text-[22px]', icon: 'size-7' },
+            '3xl': { root: 'size-12 text-2xl', icon: 'size-8' }
+        },
+        rounded: {
+            full: { root: 'rounded-full' },
+            lg: { root: 'rounded-lg' },
+            md: { root: 'rounded-md' },
+            sm: { root: 'rounded-sm' },
+            none: { root: 'rounded-none' }
         }
     },
     defaultVariants: {
-        size: 'md'
+        size: 'md',
+        rounded: 'full'
     }
 });
+/** Tailwind size-4 through size-12 → (4 + index) × 4 pixels */
+export const avatarSizePx = Object.fromEntries(Object.keys(avatarVariants.variants.size).map((key, i) => [key, (4 + i) * 4]));
 export const avatarDefaults = {
     defaultVariants: avatarVariants.defaultVariants,
     slots: {}

package/dist/Avatar/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Avatar } from './Avatar.svelte';
-export type { AvatarProps } from './avatar.types.js';
+export type { AvatarProps, AvatarSize } from './avatar.types.js';

package/dist/AvatarGroup/AvatarGroup.svelte

@@ -9,14 +9,16 @@
     import { getComponentConfig } from '../config.js'
     import { setContext } from 'svelte'
     import Avatar from '../Avatar/Avatar.svelte'
-    import type { AvatarSize } from '../Avatar/avatar.types.js'
+    import type { AvatarSize, AvatarRounded } from '../Avatar/avatar.types.js'
 
     const config = getComponentConfig('avatarGroup', avatarGroupDefaults)
 
     let {
+        ref = $bindable(null),
         as = 'div',
         ui,
         size = config.defaultVariants.size ?? 'md',
+        rounded = config.defaultVariants.rounded ?? 'full',
         avatars,
         max,
         class: className,
@@ -25,24 +27,27 @@
     }: Props = $props()
 
     const classes = $derived.by(() => {
-        const slots = avatarGroupVariants({ size })
+        const slots = avatarGroupVariants({ size, rounded })
         return {
             root: slots.root({ class: [config.slots.root, className, ui?.root] }),
             base: slots.base({ class: [config.slots.base, ui?.base] })
         }
     })
 
-    setContext<{ size: AvatarSize; baseClass: string }>('avatarGroup', {
+    setContext<{ size: AvatarSize; rounded: AvatarRounded; baseClass: string }>('avatarGroup', {
         get size() {
             return size
         },
+        get rounded() {
+            return rounded
+        },
         get baseClass() {
             return classes.base
         }
     })
 
     const visibleAvatars = $derived(
-        !avatars ? [] : max && max > 0 && avatars.length > max ? avatars.slice(0, max) : avatars
+        !avatars ? [] : max && max > 0 ? avatars.slice(0, max) : avatars
     )
 
     const overflowCount = $derived(
@@ -50,12 +55,12 @@
     )
 </script>
 
-<svelte:element this={as} class={classes.root} {...restProps}>
+<svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>
     {#if avatars}
         {#if overflowCount > 0}
             <Avatar text={`+${overflowCount}`} />
         {/if}
-        {#each visibleAvatars as avatar, index (avatar.src ?? index)}
+        {#each visibleAvatars as avatar, index (index)}
             <Avatar {...avatar} />
         {/each}
     {:else if children}

package/dist/AvatarGroup/AvatarGroup.svelte.d.ts

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

package/dist/AvatarGroup/avatar-group.types.d.ts

@@ -1,8 +1,13 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
 import type { AvatarGroupSlots } from './avatar-group.variants.js';
-import type { AvatarProps, AvatarSize } from '../Avatar/avatar.types.js';
-export type AvatarGroupProps = HTMLAttributes<HTMLDivElement> & {
+import type { AvatarProps, AvatarSize, AvatarRounded } from '../Avatar/avatar.types.js';
+export type AvatarGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * The HTML element to render as.
      * @default 'div'
@@ -13,11 +18,16 @@ export type AvatarGroupProps = HTMLAttributes<HTMLDivElement> & {
      * @default 'md'
      */
     size?: AvatarSize;
+    /**
+     * Controls the border radius of all avatars in the group.
+     * @default 'full'
+     */
+    rounded?: AvatarRounded;
     /**
      * Array of avatar props to render.
      * Use with `max` to limit visible count.
      */
-    avatars?: Omit<AvatarProps, 'size' | 'children'>[];
+    avatars?: Omit<AvatarProps, 'size' | 'rounded' | 'children'>[];
     /**
      * Maximum visible avatars.
      * Excess displayed as a "+N" indicator.
@@ -31,4 +41,9 @@ export type AvatarGroupProps = HTMLAttributes<HTMLDivElement> & {
      * Override styles for specific avatar group slots.
      */
     ui?: Partial<Record<AvatarGroupSlots, ClassNameValue>>;
+    /**
+     * Custom content to render inside the group.
+     * When provided, overrides the `avatars` prop.
+     */
+    children?: Snippet;
 };

package/dist/AvatarGroup/avatar-group.variants.d.ts

@@ -29,6 +29,23 @@ export declare const avatarGroupVariants: import("tailwind-variants").TVReturnTy
             base: string;
         };
     };
+    rounded: {
+        full: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        none: {
+            base: string;
+        };
+    };
 }, {
     root: string;
     base: string;
@@ -62,6 +79,23 @@ export declare const avatarGroupVariants: import("tailwind-variants").TVReturnTy
             base: string;
         };
     };
+    rounded: {
+        full: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        none: {
+            base: string;
+        };
+    };
 }, {
     root: string;
     base: string;
@@ -95,6 +129,23 @@ export declare const avatarGroupVariants: import("tailwind-variants").TVReturnTy
             base: string;
         };
     };
+    rounded: {
+        full: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        none: {
+            base: string;
+        };
+    };
 }, {
     root: string;
     base: string;
@@ -132,6 +183,23 @@ export declare const avatarGroupDefaults: {
                 base: string;
             };
         };
+        rounded: {
+            full: {
+                base: string;
+            };
+            lg: {
+                base: string;
+            };
+            md: {
+                base: string;
+            };
+            sm: {
+                base: string;
+            };
+            none: {
+                base: string;
+            };
+        };
     }, {
         root: string;
         base: string;
@@ -165,6 +233,23 @@ export declare const avatarGroupDefaults: {
                 base: string;
             };
         };
+        rounded: {
+            full: {
+                base: string;
+            };
+            lg: {
+                base: string;
+            };
+            md: {
+                base: string;
+            };
+            sm: {
+                base: string;
+            };
+            none: {
+                base: string;
+            };
+        };
     }, {
         root: string;
         base: string;

package/dist/AvatarGroup/avatar-group.variants.js

@@ -2,41 +2,31 @@ import { tv } from 'tailwind-variants';
 export const avatarGroupVariants = tv({
     slots: {
         root: 'inline-flex flex-row-reverse justify-end',
-        base: 'relative rounded-full ring-surface first:me-0'
+        base: 'relative ring-surface first:me-0'
     },
     variants: {
         size: {
-            '3xs': {
-                base: 'ring -me-0.5'
-            },
-            '2xs': {
-                base: 'ring -me-0.5'
-            },
-            xs: {
-                base: 'ring -me-0.5'
-            },
-            sm: {
-                base: 'ring-2 -me-1.5'
-            },
-            md: {
-                base: 'ring-2 -me-1.5'
-            },
-            lg: {
-                base: 'ring-2 -me-1.5'
-            },
-            xl: {
-                base: 'ring-3 -me-2'
-            },
-            '2xl': {
-                base: 'ring-3 -me-2'
-            },
-            '3xl': {
-                base: 'ring-3 -me-2'
-            }
+            '3xs': { base: 'ring -me-0.5' },
+            '2xs': { base: 'ring -me-0.5' },
+            xs: { base: 'ring -me-0.5' },
+            sm: { base: 'ring-2 -me-1.5' },
+            md: { base: 'ring-2 -me-1.5' },
+            lg: { base: 'ring-2 -me-1.5' },
+            xl: { base: 'ring-3 -me-2' },
+            '2xl': { base: 'ring-3 -me-2' },
+            '3xl': { base: 'ring-3 -me-2' }
+        },
+        rounded: {
+            full: { base: 'rounded-full' },
+            lg: { base: 'rounded-lg' },
+            md: { base: 'rounded-md' },
+            sm: { base: 'rounded-sm' },
+            none: { base: 'rounded-none' }
         }
     },
     defaultVariants: {
-        size: 'md'
+        size: 'md',
+        rounded: 'full'
     }
 });
 export const avatarGroupDefaults = {

package/dist/Badge/Badge.svelte

@@ -14,6 +14,7 @@
     const config = getComponentConfig('badge', badgeDefaults)
 
     let {
+        ref = $bindable(null),
         as = 'span',
         ui,
         label,
@@ -32,7 +33,7 @@
         ...restProps
     }: Props = $props()
 
-    const isIconOnly = $derived(!!icon || (square && !label && !children))
+    const isIconOnly = $derived(!!icon || (square && label === undefined && !children))
 
     const classes = $derived.by(() => {
         const slots = badgeVariants({ variant, color, size, square: isIconOnly || square })
@@ -51,7 +52,7 @@
     })
 </script>
 
-<svelte:element this={as} class={classes.base} {...restProps}>
+<svelte:element this={as} bind:this={ref} class={classes.base} {...restProps}>
     {#if leading}
         {@render leading()}
     {:else if avatar}
@@ -63,7 +64,7 @@
     {#if icon}
         <Icon name={icon} class={classes.leadingIcon} />
     {:else if !isIconOnly}
-        {#if label !== null}
+        {#if label !== undefined}
             <span class={classes.label}>{label}</span>
         {:else if children}
             <span class={classes.label}>{@render children()}</span>

package/dist/Badge/Badge.svelte.d.ts

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

package/dist/Badge/badge.types.d.ts

@@ -4,6 +4,10 @@ import type { ClassNameValue } from 'tailwind-merge';
 import type { BadgeVariantProps, BadgeSlots } from './badge.variants.js';
 import type { AvatarProps } from '../Avatar/avatar.types.js';
 export type BadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * Sets the HTML element type to render.
      * @default 'span'
@@ -66,6 +70,11 @@ export type BadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, 'class'> & {
      * Takes precedence over avatar and leadingIcon.
      */
     leading?: Snippet;
+    /**
+     * Default content slot.
+     * Takes precedence over label when no label is provided.
+     */
+    children?: Snippet;
     /**
      * Custom trailing content slot.
      * Takes precedence over trailingIcon.

package/dist/Breadcrumb/Breadcrumb.svelte

@@ -14,28 +14,35 @@
     const config = getComponentConfig('breadcrumb', breadcrumbDefaults)
 
     let {
+        ref = $bindable(null),
         as = 'nav',
         items,
         separatorIcon = 'lucide:chevron-right',
         class: className,
         ui,
         item: itemSnippet,
-        separator: separatorSnippet
+        separator: separatorSnippet,
+        ...restProps
     }: Props = $props()
 
     const variantSlots = $derived(breadcrumbVariants(config.defaultVariants))
 
-    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] }),
         separator: variantSlots.separator({ class: [config.slots.separator, ui?.separator] }),
         separatorIcon: variantSlots.separatorIcon({
             class: [config.slots.separatorIcon, ui?.separatorIcon]
         })
-    }))
+    })
 
-    function getLinkClasses(active: boolean, disabled: boolean, itemClass?: ClassNameValue) {
-        const slots = breadcrumbVariants({ ...config.defaultVariants, active, disabled })
+    function getLinkClasses(
+        active: boolean,
+        disabled: boolean,
+        to: boolean,
+        itemClass?: ClassNameValue
+    ) {
+        const slots = breadcrumbVariants({ ...config.defaultVariants, active, disabled, to })
         return {
             item: slots.item({ class: [config.slots.item, ui?.item] }),
             link: slots.link({ class: [config.slots.link, itemClass, ui?.link] }),
@@ -47,12 +54,18 @@
     }
 </script>
 
-<svelte:element this={as} aria-label={as === 'nav' ? 'Breadcrumb' : undefined} class={classes.root}>
+<svelte:element
+    this={as}
+    bind:this={ref}
+    aria-label={as === 'nav' ? 'Breadcrumb' : undefined}
+    class={classes.root}
+    {...restProps}
+>
     <ol class={classes.list}>
         {#each items as item, index (item.label ?? index)}
             {@const active = index === items.length - 1}
             {@const disabled = item.disabled ?? false}
-            {@const itemClasses = getLinkClasses(active, disabled, item.class)}
+            {@const itemClasses = getLinkClasses(active, disabled, !!item.href, item.class)}
 
             <li class={itemClasses.item}>
                 {#if itemSnippet}

package/dist/Breadcrumb/Breadcrumb.svelte.d.ts

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

package/dist/Breadcrumb/breadcrumb.types.d.ts

@@ -25,11 +25,15 @@ export interface BreadcrumbItem {
     class?: ClassNameValue;
 }
 export interface BreadcrumbProps {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * The HTML element to render as the root wrapper.
      * @default 'nav'
      */
-    as?: string;
+    as?: keyof HTMLElementTagNameMap;
     /**
      * Array of breadcrumb items to render.
      */

package/dist/Breadcrumb/breadcrumb.variants.d.ts

@@ -12,7 +12,9 @@ export declare const breadcrumbVariants: import("tailwind-variants").TVReturnTyp
         true: {
             link: string;
         };
-        false: string;
+    };
+    to: {
+        true: string;
     };
 }, {
     root: string;
@@ -36,7 +38,9 @@ export declare const breadcrumbVariants: import("tailwind-variants").TVReturnTyp
         true: {
             link: string;
         };
-        false: string;
+    };
+    to: {
+        true: string;
     };
 }, {
     root: string;
@@ -60,7 +64,9 @@ export declare const breadcrumbVariants: import("tailwind-variants").TVReturnTyp
         true: {
             link: string;
         };
-        false: string;
+    };
+    to: {
+        true: string;
     };
 }, {
     root: string;
@@ -88,7 +94,9 @@ export declare const breadcrumbDefaults: {
             true: {
                 link: string;
             };
-            false: string;
+        };
+        to: {
+            true: string;
         };
     }, {
         root: string;
@@ -112,7 +120,9 @@ export declare const breadcrumbDefaults: {
             true: {
                 link: string;
             };
-            false: string;
+        };
+        to: {
+            true: string;
         };
     }, {
         root: string;

package/dist/Breadcrumb/breadcrumb.variants.js

@@ -25,14 +25,17 @@ export const breadcrumbVariants = tv({
         disabled: {
             true: {
                 link: 'cursor-not-allowed opacity-75'
-            },
-            false: ''
+            }
+        },
+        to: {
+            true: ''
         }
     },
     compoundVariants: [
         {
             active: false,
             disabled: false,
+            to: true,
             class: {
                 link: 'hover:text-on-surface transition-colors'
             }
@@ -40,7 +43,8 @@ export const breadcrumbVariants = tv({
     ],
     defaultVariants: {
         active: false,
-        disabled: false
+        disabled: false,
+        to: false
     }
 });
 export const breadcrumbDefaults = {