sv5ui 1.1.2 → 1.2.0

package/dist/Input/Input.svelte

@@ -94,15 +94,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 = inputVariants({
+    const variantSlots = $derived(
+        inputVariants({
             variant,
             color: resolvedColor,
             size: resolvedSize,
@@ -111,26 +112,26 @@
             loading,
             highlight: resolvedHighlight
         })
-        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]
-            }),
-            leadingAvatar: slots.leadingAvatar({
-                class: [config.slots.leadingAvatar, ui?.leadingAvatar]
-            }),
-            leadingAvatarSize: slots.leadingAvatarSize() as AvatarSize,
-            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]
+        }),
+        leadingAvatar: variantSlots.leadingAvatar({
+            class: [config.slots.leadingAvatar, ui?.leadingAvatar]
+        }),
+        leadingAvatarSize: variantSlots.leadingAvatarSize() as AvatarSize,
+        trailing: variantSlots.trailing({ class: [config.slots.trailing, ui?.trailing] }),
+        trailingIcon: variantSlots.trailingIcon({
+            class: [config.slots.trailingIcon, ui?.trailingIcon]
+        })
     })
 </script>
 
@@ -150,6 +151,7 @@
     {/if}
 
     <input
+        {...restProps}
         bind:this={ref}
         bind:value
         {type}
@@ -159,7 +161,6 @@
         aria-describedby={ariaDescribedBy}
         aria-invalid={resolvedHighlight ? true : undefined}
         class={classes.base}
-        {...restProps}
     />
 
     {#if trailingSlot}

package/dist/Kbd/Kbd.svelte

@@ -6,27 +6,37 @@
 </script>
 
 <script lang="ts">
+    import { onMount } from 'svelte'
     import { kbdVariants, kbdDefaults } from './kbd.variants.js'
     import { getComponentConfig } from '../config.js'
 
     const config = getComponentConfig('kbd', kbdDefaults)
 
     let {
+        ref = $bindable(null),
         as = 'kbd',
         value,
         color = config.defaultVariants.color,
         size = config.defaultVariants.size,
         variant = config.defaultVariants.variant,
+        ui,
         class: className,
         children,
         ...restProps
     }: Props = $props()
 
-    const displayValue = $derived(resolveKey(value))
-    const kbdClass = $derived(kbdVariants({ color, size, variant, class: className }))
+    let mounted = $state(false)
+    onMount(() => (mounted = true))
+
+    const displayValue = $derived(resolveKey(value, mounted))
+    const kbdClass = $derived(
+        kbdVariants({ color, size, variant }).base({
+            class: [config.slots.base, className, ui?.base]
+        })
+    )
 </script>
 
-<svelte:element this={as} class={kbdClass} {...restProps}>
+<svelte:element this={as} bind:this={ref} class={kbdClass} {...restProps}>
     {#if children}
         {@render children()}
     {:else if displayValue}

package/dist/Kbd/Kbd.svelte.d.ts

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

package/dist/Kbd/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Kbd } from './Kbd.svelte';
-export type { KbdProps } from './kbd.types.js';
+export type { KbdProps, UseKbdOptions, UseKbdReturn } from './kbd.types.js';
 export { formatShortcut, useKbd } from './useKbd.svelte.js';

package/dist/Kbd/kbd.types.d.ts

@@ -1,6 +1,7 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
-import type { KbdVariantProps } from './kbd.variants.js';
+import type { KbdVariantProps, KbdSlots } from './kbd.variants.js';
 export type KeyboardShortcutCallback = (event: KeyboardEvent) => void;
 export interface UseKbdOptions {
     /**
@@ -43,6 +44,10 @@ export interface UseKbdReturn {
     readonly pressedKeys: ReadonlySet<string>;
 }
 export type KbdProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * Sets the HTML element type to render.
      * @default 'kbd'
@@ -70,8 +75,17 @@ export type KbdProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
      * @default 'outline'
      */
     variant?: NonNullable<KbdVariantProps['variant']>;
+    /**
+     * Override styles for specific kbd slots.
+     * Available slots: base.
+     */
+    ui?: Partial<Record<KbdSlots, ClassNameValue>>;
     /**
      * Additional CSS classes for the root element.
      */
     class?: ClassNameValue;
+    /**
+     * Default content slot for custom key display.
+     */
+    children?: Snippet;
 };

package/dist/Kbd/kbd.variants.d.ts

@@ -10,17 +10,29 @@ export declare const kbdVariants: import("tailwind-variants").TVReturnType<{
         surface: string;
     };
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
     };
     variant: {
         solid: string;
-        outline: string;
+        outline: {
+            base: string;
+        };
         soft: string;
-        subtle: string;
+        subtle: {
+            base: string;
+        };
     };
-}, undefined, "inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase", {
+}, {
+    base: string;
+}, undefined, {
     color: {
         primary: string;
         secondary: string;
@@ -31,17 +43,29 @@ export declare const kbdVariants: import("tailwind-variants").TVReturnType<{
         surface: string;
     };
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
     };
     variant: {
         solid: string;
-        outline: string;
+        outline: {
+            base: string;
+        };
         soft: string;
-        subtle: string;
+        subtle: {
+            base: string;
+        };
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, {
+    base: string;
+}, import("tailwind-variants").TVReturnType<{
     color: {
         primary: string;
         secondary: string;
@@ -52,17 +76,29 @@ export declare const kbdVariants: import("tailwind-variants").TVReturnType<{
         surface: string;
     };
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
     };
     variant: {
         solid: string;
-        outline: string;
+        outline: {
+            base: string;
+        };
         soft: string;
-        subtle: string;
+        subtle: {
+            base: string;
+        };
     };
-}, undefined, "inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase", unknown, unknown, undefined>>;
+}, {
+    base: string;
+}, undefined, unknown, unknown, undefined>>;
 /** Static key symbols (same across all platforms) */
 export declare const kbdKeysMap: Record<string, string>;
 /** Platform-specific key mappings */
@@ -71,6 +107,7 @@ export declare const kbdKeysPlatformMap: Record<string, {
     other: string;
 }>;
 export type KbdVariantProps = VariantProps<typeof kbdVariants>;
+export type KbdSlots = keyof ReturnType<typeof kbdVariants>;
 export declare const kbdDefaults: {
     defaultVariants: import("tailwind-variants").TVDefaultVariants<{
         color: {
@@ -83,17 +120,29 @@ export declare const kbdDefaults: {
             surface: string;
         };
         size: {
-            sm: string;
-            md: string;
-            lg: string;
+            sm: {
+                base: string;
+            };
+            md: {
+                base: string;
+            };
+            lg: {
+                base: string;
+            };
         };
         variant: {
             solid: string;
-            outline: string;
+            outline: {
+                base: string;
+            };
             soft: string;
-            subtle: string;
+            subtle: {
+                base: string;
+            };
         };
-    }, undefined, {
+    }, {
+        base: string;
+    }, {
         color: {
             primary: string;
             secondary: string;
@@ -104,15 +153,28 @@ export declare const kbdDefaults: {
             surface: string;
         };
         size: {
-            sm: string;
-            md: string;
-            lg: string;
+            sm: {
+                base: string;
+            };
+            md: {
+                base: string;
+            };
+            lg: {
+                base: string;
+            };
         };
         variant: {
             solid: string;
-            outline: string;
+            outline: {
+                base: string;
+            };
             soft: string;
-            subtle: string;
+            subtle: {
+                base: string;
+            };
         };
-    }, undefined>;
+    }, {
+        base: string;
+    }>;
+    slots: Partial<Record<KbdSlots, string>>;
 };

package/dist/Kbd/kbd.variants.js

@@ -1,6 +1,8 @@
 import { tv } from 'tailwind-variants';
 export const kbdVariants = tv({
-    base: 'inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase',
+    slots: {
+        base: 'inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase'
+    },
     variants: {
         color: {
             primary: '',
@@ -12,101 +14,117 @@ export const kbdVariants = tv({
             surface: ''
         },
         size: {
-            sm: 'h-4 min-w-4 text-[10px]',
-            md: 'h-5 min-w-5 text-[11px]',
-            lg: 'h-6 min-w-6 text-[12px]'
+            sm: { base: 'h-4 min-w-4 text-[10px]' },
+            md: { base: 'h-5 min-w-5 text-[11px]' },
+            lg: { base: 'h-6 min-w-6 text-[12px]' }
         },
         variant: {
             solid: '',
-            outline: 'ring ring-inset',
+            outline: { base: 'ring ring-inset' },
             soft: '',
-            subtle: 'ring ring-inset'
+            subtle: { base: 'ring ring-inset' }
         }
     },
     compoundVariants: [
         // Solid variants
-        { color: 'primary', variant: 'solid', class: 'bg-primary text-on-primary' },
-        { color: 'secondary', variant: 'solid', class: 'bg-secondary text-on-secondary' },
-        { color: 'success', variant: 'solid', class: 'bg-success text-on-success' },
-        { color: 'warning', variant: 'solid', class: 'bg-warning text-on-warning' },
-        { color: 'error', variant: 'solid', class: 'bg-error text-on-error' },
-        { color: 'info', variant: 'solid', class: 'bg-info text-on-info' },
-        { color: 'surface', variant: 'solid', class: 'bg-inverse-surface text-inverse-on-surface' },
+        { color: 'primary', variant: 'solid', class: { base: 'bg-primary text-on-primary' } },
+        { color: 'secondary', variant: 'solid', class: { base: 'bg-secondary text-on-secondary' } },
+        { color: 'success', variant: 'solid', class: { base: 'bg-success text-on-success' } },
+        { color: 'warning', variant: 'solid', class: { base: 'bg-warning text-on-warning' } },
+        { color: 'error', variant: 'solid', class: { base: 'bg-error text-on-error' } },
+        { color: 'info', variant: 'solid', class: { base: 'bg-info text-on-info' } },
+        {
+            color: 'surface',
+            variant: 'solid',
+            class: { base: 'bg-inverse-surface text-inverse-on-surface' }
+        },
         // Outline variants
-        { color: 'primary', variant: 'outline', class: 'ring-primary/50 text-primary' },
-        { color: 'secondary', variant: 'outline', class: 'ring-secondary/50 text-secondary' },
-        { color: 'success', variant: 'outline', class: 'ring-success/50 text-success' },
-        { color: 'warning', variant: 'outline', class: 'ring-warning/50 text-warning' },
-        { color: 'error', variant: 'outline', class: 'ring-error/50 text-error' },
-        { color: 'info', variant: 'outline', class: 'ring-info/50 text-info' },
+        { color: 'primary', variant: 'outline', class: { base: 'ring-primary/50 text-primary' } },
+        {
+            color: 'secondary',
+            variant: 'outline',
+            class: { base: 'ring-secondary/50 text-secondary' }
+        },
+        { color: 'success', variant: 'outline', class: { base: 'ring-success/50 text-success' } },
+        { color: 'warning', variant: 'outline', class: { base: 'ring-warning/50 text-warning' } },
+        { color: 'error', variant: 'outline', class: { base: 'ring-error/50 text-error' } },
+        { color: 'info', variant: 'outline', class: { base: 'ring-info/50 text-info' } },
         {
             color: 'surface',
             variant: 'outline',
-            class: 'ring-outline-variant text-on-surface-variant'
+            class: { base: 'ring-outline-variant text-on-surface-variant' }
         },
         // Soft variants
         {
             color: 'primary',
             variant: 'soft',
-            class: 'bg-primary-container text-on-primary-container'
+            class: { base: 'bg-primary-container text-on-primary-container' }
         },
         {
             color: 'secondary',
             variant: 'soft',
-            class: 'bg-secondary-container text-on-secondary-container'
+            class: { base: 'bg-secondary-container text-on-secondary-container' }
         },
         {
             color: 'success',
             variant: 'soft',
-            class: 'bg-success-container text-on-success-container'
+            class: { base: 'bg-success-container text-on-success-container' }
         },
         {
             color: 'warning',
             variant: 'soft',
-            class: 'bg-warning-container text-on-warning-container'
+            class: { base: 'bg-warning-container text-on-warning-container' }
+        },
+        {
+            color: 'error',
+            variant: 'soft',
+            class: { base: 'bg-error-container text-on-error-container' }
+        },
+        {
+            color: 'info',
+            variant: 'soft',
+            class: { base: 'bg-info-container text-on-info-container' }
         },
-        { color: 'error', variant: 'soft', class: 'bg-error-container text-on-error-container' },
-        { color: 'info', variant: 'soft', class: 'bg-info-container text-on-info-container' },
         {
             color: 'surface',
             variant: 'soft',
-            class: 'bg-surface-container-highest text-on-surface'
+            class: { base: 'bg-surface-container-highest text-on-surface' }
         },
         // Subtle variants
         {
             color: 'primary',
             variant: 'subtle',
-            class: 'ring-primary/25 bg-primary-container text-on-primary-container'
+            class: { base: 'ring-primary/25 bg-primary-container text-on-primary-container' }
         },
         {
             color: 'secondary',
             variant: 'subtle',
-            class: 'ring-secondary/25 bg-secondary-container text-on-secondary-container'
+            class: { base: 'ring-secondary/25 bg-secondary-container text-on-secondary-container' }
         },
         {
             color: 'success',
             variant: 'subtle',
-            class: 'ring-success/25 bg-success-container text-on-success-container'
+            class: { base: 'ring-success/25 bg-success-container text-on-success-container' }
         },
         {
             color: 'warning',
             variant: 'subtle',
-            class: 'ring-warning/25 bg-warning-container text-on-warning-container'
+            class: { base: 'ring-warning/25 bg-warning-container text-on-warning-container' }
         },
         {
             color: 'error',
             variant: 'subtle',
-            class: 'ring-error/25 bg-error-container text-on-error-container'
+            class: { base: 'ring-error/25 bg-error-container text-on-error-container' }
         },
         {
             color: 'info',
             variant: 'subtle',
-            class: 'ring-info/25 bg-info-container text-on-info-container'
+            class: { base: 'ring-info/25 bg-info-container text-on-info-container' }
         },
         {
             color: 'surface',
             variant: 'subtle',
-            class: 'ring-outline-variant bg-surface-container-highest text-on-surface'
+            class: { base: 'ring-outline-variant bg-surface-container-highest text-on-surface' }
         }
     ],
     defaultVariants: {
@@ -121,6 +139,7 @@ export const kbdKeysMap = {
     shift: '⇧',
     control: '⌃',
     option: '⌥',
+    win: '⊞',
     enter: '↵',
     delete: '⌦',
     backspace: '⌫',
@@ -144,5 +163,6 @@ export const kbdKeysPlatformMap = {
     alt: { mac: '⌥', other: 'Alt' }
 };
 export const kbdDefaults = {
-    defaultVariants: kbdVariants.defaultVariants
+    defaultVariants: kbdVariants.defaultVariants,
+    slots: {}
 };

package/dist/Kbd/useKbd.svelte.d.ts

@@ -1,9 +1,9 @@
 import { kbdKeysMap, kbdKeysPlatformMap } from './kbd.variants.js';
 import type { UseKbdOptions, UseKbdReturn } from './kbd.types.js';
+export declare function isMac(): boolean;
 /** @internal */
 export declare const __resetPlatformCache: () => void;
-export declare const isMac: boolean;
-export declare function resolveKey(value: string | undefined): string | null;
+export declare function resolveKey(value: string | undefined, platformReady?: boolean): string | null;
 export declare function resolveShortcut(shortcut: string | undefined): string[];
 export declare function formatShortcut(shortcut: string | undefined, separator?: string): string;
 export declare function normalizeKey(eventKey: string): string;