sv5ui 1.1.3 → 1.3.0

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;

package/dist/Kbd/useKbd.svelte.js

@@ -1,25 +1,26 @@
 import { SvelteSet } from 'svelte/reactivity';
 import { kbdKeysMap, kbdKeysPlatformMap } from './kbd.variants.js';
 let cachedIsMac;
-const detectPlatform = () => {
+export function isMac() {
     if (cachedIsMac === undefined) {
         cachedIsMac =
             typeof navigator !== 'undefined' &&
                 /Macintosh|Mac OS|iPhone|iPad|iPod/i.test(navigator.userAgent);
     }
     return cachedIsMac;
-};
+}
 /** @internal */
 export const __resetPlatformCache = () => {
     cachedIsMac = undefined;
 };
-export const isMac = detectPlatform();
-export function resolveKey(value) {
+export function resolveKey(value, platformReady = true) {
     if (!value)
         return null;
     const key = value.toLowerCase();
     if (key in kbdKeysPlatformMap) {
-        return isMac ? kbdKeysPlatformMap[key].mac : kbdKeysPlatformMap[key].other;
+        if (!platformReady)
+            return null;
+        return isMac() ? kbdKeysPlatformMap[key].mac : kbdKeysPlatformMap[key].other;
     }
     return kbdKeysMap[key] ?? value;
 }
@@ -42,7 +43,7 @@ export function normalizeKey(eventKey) {
     const lower = eventKey.toLowerCase();
     return KEY_NORMALIZE[lower] ?? lower;
 }
-const CAPTURABLE_MODIFIERS = { alt: true, meta: true };
+const CAPTURABLE_MODIFIERS = new Set(['alt', 'meta']);
 const MODIFIER_PROPS = [
     ['ctrl', 'ctrlKey'],
     ['shift', 'shiftKey'],
@@ -142,6 +143,7 @@ function parseShortcuts(shortcuts) {
 }
 export function useKbd(options = {}) {
     const _pressedKeys = new SvelteSet();
+    const { captureModifiers = false, repeat: allowRepeat = false, preventDefault: shouldPrevent = true } = options;
     let _shortcutsRef;
     let _parsedShortcuts = [];
     if (typeof options.shortcuts !== 'function' && options.shortcuts) {
@@ -165,7 +167,6 @@ export function useKbd(options = {}) {
         const t = typeof options.target === 'function' ? options.target() : options.target;
         return t ?? (typeof window !== 'undefined' ? window : null);
     }
-    /** Sync modifier state from event booleans to fix missed keyup (e.g. Alt+Tab) */
     function reconcileModifiers(event) {
         for (const [key, prop] of MODIFIER_PROPS) {
             if (event[prop])
@@ -180,17 +181,15 @@ export function useKbd(options = {}) {
         reconcileModifiers(event);
         const key = normalizeKey(event.key);
         _pressedKeys.add(key);
-        if (options.captureModifiers && key in CAPTURABLE_MODIFIERS) {
+        if (captureModifiers && CAPTURABLE_MODIFIERS.has(key)) {
             event.preventDefault();
         }
-        if (event.repeat && !options.repeat)
+        if (event.repeat && !allowRepeat)
             return;
-        const bindings = getParsedShortcuts();
-        for (const binding of bindings) {
+        for (const binding of getParsedShortcuts()) {
             if (matchesShortcut(event, binding)) {
-                if (options.preventDefault !== false) {
+                if (shouldPrevent)
                     event.preventDefault();
-                }
                 binding.callback(event);
             }
         }
@@ -199,12 +198,21 @@ export function useKbd(options = {}) {
         if (!getEnabled())
             return;
         reconcileModifiers(event);
-        const key = normalizeKey(event.key);
-        _pressedKeys.delete(key);
+        _pressedKeys.delete(normalizeKey(event.key));
     }
     function handleClear() {
         _pressedKeys.clear();
     }
+    const callbacks = {
+        keydown: handleKeyDown,
+        keyup: handleKeyUp,
+        clear: handleClear
+    };
+    const clearOnlyCallbacks = {
+        keydown: () => { },
+        keyup: () => { },
+        clear: handleClear
+    };
     $effect(() => {
         if (!getEnabled()) {
             _pressedKeys.clear();
@@ -213,40 +221,25 @@ export function useKbd(options = {}) {
         const target = getTarget();
         if (!target)
             return;
-        const isWindowTarget = typeof window !== 'undefined' && target === window;
-        const callbacks = {
-            keydown: handleKeyDown,
-            keyup: handleKeyUp,
-            clear: handleClear
-        };
-        if (isWindowTarget) {
+        if (typeof window !== 'undefined' && target === window) {
             kbdRegistry.register(callbacks);
             return () => {
                 kbdRegistry.unregister(callbacks);
                 _pressedKeys.clear();
             };
         }
-        else {
-            const clearOnly = {
-                keydown: () => { },
-                keyup: () => { },
-                clear: handleClear
-            };
-            target.addEventListener('keydown', handleKeyDown);
-            target.addEventListener('keyup', handleKeyUp);
-            kbdRegistry.register(clearOnly);
-            return () => {
-                target.removeEventListener('keydown', handleKeyDown);
-                target.removeEventListener('keyup', handleKeyUp);
-                kbdRegistry.unregister(clearOnly);
-                _pressedKeys.clear();
-            };
-        }
+        target.addEventListener('keydown', handleKeyDown);
+        target.addEventListener('keyup', handleKeyUp);
+        kbdRegistry.register(clearOnlyCallbacks);
+        return () => {
+            target.removeEventListener('keydown', handleKeyDown);
+            target.removeEventListener('keyup', handleKeyUp);
+            kbdRegistry.unregister(clearOnlyCallbacks);
+            _pressedKeys.clear();
+        };
     });
     return {
-        isPressed(key) {
-            return _pressedKeys.has(normalizeKey(key));
-        },
+        isPressed: (key) => _pressedKeys.has(normalizeKey(key)),
         get pressedKeys() {
             return _pressedKeys;
         }

package/dist/Link/Link.svelte

@@ -28,11 +28,15 @@
         if (mode === false) return true
         if (mode === 'partial') {
             for (const [key, value] of linkQuery) {
-                if (currentQuery.get(key) !== value) return false
+                if (!currentQuery.getAll(key).includes(value)) return false
             }
             return true
         }
-        return linkQuery.toString() === currentQuery.toString()
+
+        // Exact: check size first (O(1) bail-out), then compare sorted strings
+        if (linkQuery.size !== currentQuery.size) return false
+        const sorted = (p: URLSearchParams) => new URLSearchParams([...p].sort()).toString()
+        return sorted(linkQuery) === sorted(currentQuery)
     }
 
     function isPathnameMatch(linkPath: string, currentPath: string, exactMatch: boolean): boolean {
@@ -53,8 +57,9 @@
     const config = getComponentConfig('link', linkDefaults)
 
     let {
+        ref = $bindable(null),
         href,
-        color = config.defaultVariants.color,
+        type,
         active,
         exact = false,
         exactQuery = false,
@@ -69,25 +74,36 @@
         ui,
         target,
         rel,
+        onclick,
         ...restProps
     }: Props = $props()
 
+    const isLink = $derived(!!href)
+
     const isExternal = $derived(
-        external ??
-            (href.startsWith('http://') || href.startsWith('https://') || href.startsWith('//'))
+        isLink &&
+            (external ??
+                (href!.startsWith('http://') ||
+                    href!.startsWith('https://') ||
+                    href!.startsWith('//')))
     )
 
-    const resolvedTarget = $derived(target ?? (isExternal ? '_blank' : undefined))
+    const resolvedTarget = $derived(
+        isLink ? (target ?? (isExternal ? '_blank' : undefined)) : undefined
+    )
 
     const resolvedRel = $derived(
-        rel ?? (isExternal || resolvedTarget === '_blank' ? 'noopener noreferrer' : undefined)
+        isLink
+            ? (rel ??
+                  (isExternal || resolvedTarget === '_blank' ? 'noopener noreferrer' : undefined))
+            : undefined
     )
 
     const isActive = $derived.by(() => {
         if (active !== undefined) return active
-        if (!page.url || isExternal) return false
+        if (!isLink || !page.url || isExternal) return false
 
-        const link = parseUrl(href, page.url)
+        const link = parseUrl(href!, page.url)
 
         if (exactHash && link.hash !== page.url.hash) return false
         if (!isQueryMatch(link.query, page.url.searchParams, exactQuery)) return false
@@ -99,24 +115,53 @@
         const stateClass = isActive ? activeClass : inactiveClass
         if (raw) return [className, stateClass].filter(Boolean).join(' ')
 
-        const slots = linkVariants({ color, active: isActive, disabled, raw })
+        const slots = linkVariants({ active: isActive, disabled, raw })
         return slots.base({ class: [config.slots.base, stateClass, className, ui?.base] })
     })
 
     const ariaCurrent = $derived(isActive && exact ? ('page' as const) : undefined)
+
+    function handleClick(e: MouseEvent) {
+        if (disabled) {
+            e.preventDefault()
+            e.stopPropagation()
+            return
+        }
+
+        if (typeof onclick === 'function') {
+            ;(onclick as (e: MouseEvent) => void)(e)
+        }
+    }
 </script>
 
-<!-- eslint-disable svelte/no-navigation-without-resolve -->
-<a
-    href={disabled ? undefined : href}
-    class={baseClass}
-    target={resolvedTarget}
-    rel={resolvedRel}
-    aria-disabled={disabled ? 'true' : undefined}
-    aria-current={ariaCurrent}
-    tabindex={disabled ? -1 : undefined}
-    {...restProps}
->
-    <!-- eslint-enable svelte/no-navigation-without-resolve -->
-    {@render children?.()}
-</a>
+{#if isLink}
+    <!-- eslint-disable svelte/no-navigation-without-resolve -->
+    <a
+        bind:this={ref}
+        href={disabled ? undefined : href}
+        class={baseClass}
+        target={resolvedTarget}
+        rel={resolvedRel}
+        role={disabled ? 'link' : undefined}
+        aria-disabled={disabled ? 'true' : undefined}
+        aria-current={ariaCurrent}
+        tabindex={disabled ? -1 : undefined}
+        onclick={handleClick}
+        {...restProps}
+    >
+        <!-- eslint-enable svelte/no-navigation-without-resolve -->
+        {@render children?.()}
+    </a>
+{:else}
+    <button
+        bind:this={ref}
+        type={type ?? 'button'}
+        class={baseClass}
+        {disabled}
+        aria-current={ariaCurrent}
+        onclick={handleClick}
+        {...restProps}
+    >
+        {@render children?.()}
+    </button>
+{/if}

package/dist/Link/Link.svelte.d.ts

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