sv5ui 1.1.3 → 1.3.0

package/dist/DropdownMenu/dropdown-menu.variants.js

@@ -1,4 +1,44 @@
 import { tv } from 'tailwind-variants';
+// Per-item color classes — static map, O(1) lookup, no TV re-instantiation per item
+// Default highlight is here (not in base item slot) to avoid class conflicts
+export const itemColorClasses = {
+    default: {
+        item: 'data-[highlighted]:bg-surface-container-highest',
+        itemLeadingIcon: ''
+    },
+    primary: {
+        item: 'text-primary data-[highlighted]:bg-primary-container data-[highlighted]:text-on-primary-container',
+        itemLeadingIcon: 'text-primary group-data-[highlighted]:text-on-primary-container'
+    },
+    secondary: {
+        item: 'text-secondary data-[highlighted]:bg-secondary-container data-[highlighted]:text-on-secondary-container',
+        itemLeadingIcon: 'text-secondary group-data-[highlighted]:text-on-secondary-container'
+    },
+    tertiary: {
+        item: 'text-tertiary data-[highlighted]:bg-tertiary-container data-[highlighted]:text-on-tertiary-container',
+        itemLeadingIcon: 'text-tertiary group-data-[highlighted]:text-on-tertiary-container'
+    },
+    success: {
+        item: 'text-success data-[highlighted]:bg-success-container data-[highlighted]:text-on-success-container',
+        itemLeadingIcon: 'text-success group-data-[highlighted]:text-on-success-container'
+    },
+    warning: {
+        item: 'text-warning data-[highlighted]:bg-warning-container data-[highlighted]:text-on-warning-container',
+        itemLeadingIcon: 'text-warning group-data-[highlighted]:text-on-warning-container'
+    },
+    error: {
+        item: 'text-error data-[highlighted]:bg-error-container data-[highlighted]:text-on-error-container',
+        itemLeadingIcon: 'text-error group-data-[highlighted]:text-on-error-container'
+    },
+    info: {
+        item: 'text-info data-[highlighted]:bg-info-container data-[highlighted]:text-on-info-container',
+        itemLeadingIcon: 'text-info group-data-[highlighted]:text-on-info-container'
+    },
+    surface: {
+        item: 'text-on-surface-variant data-[highlighted]:bg-surface-container-highest data-[highlighted]:text-on-surface',
+        itemLeadingIcon: 'text-on-surface-variant group-data-[highlighted]:text-on-surface'
+    }
+};
 export const dropdownMenuVariants = tv({
     slots: {
         content: [
@@ -10,18 +50,18 @@ export const dropdownMenuVariants = tv({
             'focus:outline-none',
             'overflow-hidden'
         ],
+        arrow: 'fill-surface-container-low text-surface-container-low',
         group: 'p-1',
         separator: '-mx-1 my-1 h-px bg-outline-variant',
         label: 'px-2 py-1.5 text-xs font-semibold text-on-surface-variant',
         item: [
             'group relative flex items-center gap-2 w-full rounded-sm px-2 cursor-pointer select-none',
             'focus:outline-none',
-            'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-            'data-[highlighted]:bg-surface-container-highest'
+            'data-[disabled]:pointer-events-none data-[disabled]:opacity-50'
         ],
-        itemIcon: 'shrink-0',
+        itemLeadingIcon: 'shrink-0',
         itemLabel: 'flex-1 truncate',
-        itemKbd: 'ml-auto flex items-center gap-0.5',
+        itemTrailingKbds: 'ml-auto flex items-center gap-0.5',
         itemIndicator: 'shrink-0',
         subTrigger: [
             'relative flex items-center gap-2 w-full rounded-sm px-2 cursor-pointer select-none',
@@ -39,151 +79,68 @@ export const dropdownMenuVariants = tv({
             'shadow-lg',
             'focus:outline-none',
             'overflow-hidden'
-        ],
-        checkboxIndicator: 'shrink-0',
-        radioIndicator: 'shrink-0'
+        ]
     },
     variants: {
-        side: {
-            top: {
-                content: 'data-[state=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=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=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=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=open]:animate-[fade-in_150ms_ease-out,scale-in_150ms_ease-out] data-[state=closed]:animate-[fade-out_100ms_ease-in,scale-out_100ms_ease-in]',
-                subContent: 'data-[state=open]:animate-[fade-in_150ms_ease-out,scale-in_150ms_ease-out] data-[state=closed]:animate-[fade-out_100ms_ease-in,scale-out_100ms_ease-in]'
+                content: [
+                    'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=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'
+                ],
+                subContent: [
+                    'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=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'
+                ]
             }
         },
         size: {
             xs: {
                 item: 'py-1 text-xs',
                 subTrigger: 'py-1 text-xs',
-                itemIcon: 'size-3',
+                itemLeadingIcon: 'size-3',
                 subTriggerIcon: 'size-3',
-                checkboxIndicator: 'size-3',
-                radioIndicator: 'size-3',
+                itemIndicator: 'size-3',
                 label: 'text-[10px]'
             },
             sm: {
                 item: 'py-1.5 text-xs',
                 subTrigger: 'py-1.5 text-xs',
-                itemIcon: 'size-3.5',
+                itemLeadingIcon: 'size-3.5',
                 subTriggerIcon: 'size-3.5',
-                checkboxIndicator: 'size-3.5',
-                radioIndicator: 'size-3.5',
+                itemIndicator: 'size-3.5',
                 label: 'text-[11px]'
             },
             md: {
                 item: 'py-1.5 text-sm',
                 subTrigger: 'py-1.5 text-sm',
-                itemIcon: 'size-4',
+                itemLeadingIcon: 'size-4',
                 subTriggerIcon: 'size-4',
-                checkboxIndicator: 'size-4',
-                radioIndicator: 'size-4'
+                itemIndicator: 'size-4'
             },
             lg: {
                 item: 'py-2 text-sm',
                 subTrigger: 'py-2 text-sm',
-                itemIcon: 'size-5',
+                itemLeadingIcon: 'size-5',
                 subTriggerIcon: 'size-5',
-                checkboxIndicator: 'size-5',
-                radioIndicator: 'size-5'
+                itemIndicator: 'size-5'
             },
             xl: {
                 item: 'py-2.5 text-base',
                 subTrigger: 'py-2.5 text-base',
-                itemIcon: 'size-5',
+                itemLeadingIcon: 'size-5',
                 subTriggerIcon: 'size-5',
-                checkboxIndicator: 'size-5',
-                radioIndicator: 'size-5'
+                itemIndicator: 'size-5'
             }
-        },
-        color: {
-            default: {},
-            primary: {},
-            secondary: {},
-            tertiary: {},
-            success: {},
-            warning: {},
-            error: {},
-            info: {},
-            surface: {}
         }
     },
-    compoundVariants: [
-        // Color variants for items (primarily for destructive/error actions)
-        {
-            color: 'error',
-            class: {
-                item: 'text-error data-[highlighted]:bg-error-container data-[highlighted]:text-on-error-container',
-                itemIcon: 'text-error group-data-[highlighted]:text-on-error-container'
-            }
-        },
-        {
-            color: 'success',
-            class: {
-                item: 'text-success data-[highlighted]:bg-success-container data-[highlighted]:text-on-success-container',
-                itemIcon: 'text-success group-data-[highlighted]:text-on-success-container'
-            }
-        },
-        {
-            color: 'warning',
-            class: {
-                item: 'text-warning data-[highlighted]:bg-warning-container data-[highlighted]:text-on-warning-container',
-                itemIcon: 'text-warning group-data-[highlighted]:text-on-warning-container'
-            }
-        },
-        {
-            color: 'info',
-            class: {
-                item: 'text-info data-[highlighted]:bg-info-container data-[highlighted]:text-on-info-container',
-                itemIcon: 'text-info group-data-[highlighted]:text-on-info-container'
-            }
-        },
-        {
-            color: 'primary',
-            class: {
-                item: 'text-primary data-[highlighted]:bg-primary-container data-[highlighted]:text-on-primary-container',
-                itemIcon: 'text-primary group-data-[highlighted]:text-on-primary-container'
-            }
-        },
-        {
-            color: 'secondary',
-            class: {
-                item: 'text-secondary data-[highlighted]:bg-secondary-container data-[highlighted]:text-on-secondary-container',
-                itemIcon: 'text-secondary group-data-[highlighted]:text-on-secondary-container'
-            }
-        },
-        {
-            color: 'tertiary',
-            class: {
-                item: 'text-tertiary data-[highlighted]:bg-tertiary-container data-[highlighted]:text-on-tertiary-container',
-                itemIcon: 'text-tertiary group-data-[highlighted]:text-on-tertiary-container'
-            }
-        },
-        {
-            color: 'surface',
-            class: {
-                item: 'text-on-surface-variant data-[highlighted]:bg-surface-container-highest data-[highlighted]:text-on-surface',
-                itemIcon: 'text-on-surface-variant group-data-[highlighted]:text-on-surface'
-            }
-        }
-    ],
     defaultVariants: {
-        side: 'bottom',
         transition: true,
-        size: 'md',
-        color: 'default'
+        size: 'md'
     }
 });
 export const dropdownMenuDefaults = {

package/dist/DropdownMenu/index.d.ts

@@ -1,2 +1,2 @@
 export { default as DropdownMenu } from './DropdownMenu.svelte';
-export type { DropdownMenuProps, DropdownMenuItem, DropdownMenuRadioGroup } from './dropdown-menu.types.js';
+export type { DropdownMenuProps, DropdownMenuItem, DropdownMenuItemColor, DropdownMenuRadioGroup } from './dropdown-menu.types.js';

package/dist/Empty/Empty.svelte

@@ -14,6 +14,7 @@
     const config = getComponentConfig('empty', emptyDefaults)
 
     let {
+        ref = $bindable(null),
         as = 'div',
         ui,
         icon,
@@ -21,7 +22,6 @@
         title,
         description,
         actions,
-        color = config.defaultVariants.color,
         variant = config.defaultVariants.variant,
         size = config.defaultVariants.size,
         class: className,
@@ -29,55 +29,90 @@
         titleSlot,
         descriptionSlot,
         actionsSlot,
+        header,
+        body,
+        footer,
         children,
         ...restProps
     }: Props = $props()
 
     const classes = $derived.by(() => {
-        const slots = emptyVariants({ variant, color, size })
+        const slots = emptyVariants({ variant, size })
+        const c = config.slots
         return {
-            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-            icon: slots.icon({ class: [config.slots.icon, ui?.icon] }),
-            avatar: slots.avatar({ class: [config.slots.avatar, ui?.avatar] }),
-            title: slots.title({ class: [config.slots.title, ui?.title] }),
-            description: slots.description({ class: [config.slots.description, ui?.description] }),
-            actions: slots.actions({ class: [config.slots.actions, ui?.actions] })
+            root: slots.root({ class: [c.root, className, ui?.root] }),
+            header: slots.header({ class: [c.header, ui?.header] }),
+            avatar: slots.avatar({ class: [c.avatar, ui?.avatar] }),
+            title: slots.title({ class: [c.title, ui?.title] }),
+            description: slots.description({ class: [c.description, ui?.description] }),
+            body: slots.body({ class: [c.body, ui?.body] }),
+            actions: slots.actions({ class: [c.actions, ui?.actions] }),
+            footer: slots.footer({ class: [c.footer, ui?.footer] })
         }
     })
 
+    const hasHeader = $derived(
+        !!icon ||
+            !!avatar ||
+            !!title ||
+            !!description ||
+            !!leading ||
+            !!titleSlot ||
+            !!descriptionSlot ||
+            !!header
+    )
     const hasActions = $derived(actions && actions.length > 0)
+    const hasBody = $derived(!!hasActions || !!actionsSlot || !!body || !!children)
 </script>
 
-<svelte:element this={as} class={classes.root} {...restProps}>
-    {#if leading}
-        {@render leading()}
-    {:else if icon}
-        <Icon name={icon} class={classes.icon} />
-    {:else if avatar}
-        <Avatar {...avatar} class={classes.avatar} />
-    {/if}
+<svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>
+    {#if header}
+        {@render header()}
+    {:else if hasHeader}
+        <div class={classes.header}>
+            {#if leading}
+                {@render leading()}
+            {:else if icon}
+                <Icon name={icon} class={classes.avatar} />
+            {:else if avatar}
+                <Avatar {...avatar} class={classes.avatar} />
+            {/if}
 
-    {#if titleSlot}
-        {@render titleSlot()}
-    {:else if title}
-        <div class={classes.title}>{title}</div>
-    {/if}
+            {#if titleSlot}
+                {@render titleSlot()}
+            {:else if title}
+                <p class={classes.title}>{title}</p>
+            {/if}
 
-    {#if descriptionSlot}
-        {@render descriptionSlot()}
-    {:else if description}
-        <p class={classes.description}>{description}</p>
+            {#if descriptionSlot}
+                {@render descriptionSlot()}
+            {:else if description}
+                <p class={classes.description}>{description}</p>
+            {/if}
+        </div>
     {/if}
 
-    {@render children?.()}
+    {#if body}
+        {@render body()}
+    {:else if hasBody}
+        <div class={classes.body}>
+            {@render children?.()}
+
+            {#if actionsSlot}
+                {@render actionsSlot()}
+            {:else if hasActions}
+                <div class={classes.actions}>
+                    {#each actions as action, index (index)}
+                        <Button size="sm" {...action} />
+                    {/each}
+                </div>
+            {/if}
+        </div>
+    {/if}
 
-    {#if actionsSlot}
-        {@render actionsSlot()}
-    {:else if hasActions}
-        <div class={classes.actions}>
-            {#each actions as action, index (index)}
-                <Button size="sm" {...action} />
-            {/each}
+    {#if footer}
+        <div class={classes.footer}>
+            {@render footer()}
         </div>
     {/if}
 </svelte:element>

package/dist/Empty/Empty.svelte.d.ts

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

package/dist/Empty/empty.types.d.ts

@@ -5,22 +5,26 @@ import type { EmptyVariantProps, EmptySlots } from './empty.variants.js';
 import type { AvatarProps } from '../Avatar/avatar.types.js';
 import type { ButtonProps } from '../Button/button.types.js';
 export type EmptyProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'title'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * Renders the empty state as a different HTML element.
      * @default 'div'
      */
     as?: keyof HTMLElementTagNameMap;
     /**
-     * Override styles for specific empty slots (root, icon, avatar, title, description, actions).
+     * Override styles for specific empty slots.
      */
     ui?: Partial<Record<EmptySlots, ClassNameValue>>;
     /**
-     * Icon to display in the empty state (e.g., 'lucide:inbox', 'lucide:file-x').
+     * Icon to display in the header area.
      * Takes precedence over avatar when both are provided.
      */
     icon?: string;
     /**
-     * Avatar configuration to display instead of an icon.
+     * Avatar configuration to display in the header area.
      * Only visible when icon is not specified.
      */
     avatar?: AvatarProps;
@@ -36,18 +40,13 @@ export type EmptyProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'title'>
      * Array of button configurations to render as action buttons.
      */
     actions?: ButtonProps[];
-    /**
-     * Controls the color scheme applied to the empty state.
-     * @default 'surface'
-     */
-    color?: NonNullable<EmptyVariantProps['color']>;
     /**
      * Controls the visual style and background treatment.
      * @default 'outline'
      */
     variant?: NonNullable<EmptyVariantProps['variant']>;
     /**
-     * Controls the overall dimensions, icon size, and typography scale.
+     * Controls the overall dimensions and typography scale.
      * @default 'md'
      */
     size?: NonNullable<EmptyVariantProps['size']>;
@@ -71,4 +70,22 @@ export type EmptyProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'title'>
      * Custom content to replace the default action buttons.
      */
     actionsSlot?: Snippet;
+    /**
+     * Custom header slot content.
+     * Replaces the entire header area (leading/icon/avatar + title + description).
+     */
+    header?: Snippet;
+    /**
+     * Custom body slot content.
+     * Replaces the entire body area (actions).
+     */
+    body?: Snippet;
+    /**
+     * Custom footer slot content.
+     */
+    footer?: Snippet;
+    /**
+     * Default slot content rendered in the body area.
+     */
+    children?: Snippet;
 };