sv5ui 1.1.2 → 1.2.0

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;

package/dist/Link/link.types.d.ts

@@ -1,16 +1,17 @@
-import type { HTMLAnchorAttributes } from 'svelte/elements';
-import type { LinkVariantProps, LinkSlots } from './link.variants.js';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { LinkSlots } from './link.variants.js';
 import type { ClassNameValue } from 'tailwind-merge';
-export type LinkProps = Omit<HTMLAnchorAttributes, 'class' | 'href'> & {
+export type LinkProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
     /**
-     * The destination URL for the anchor element.
+     * Bindable reference to the root DOM element.
      */
-    href: string;
+    ref?: HTMLElement | null;
     /**
-     * Sets the color scheme applied to the link.
-     * @default 'primary'
+     * The destination URL for the anchor element.
+     * When omitted, renders as a `<button>` element.
      */
-    color?: NonNullable<LinkVariantProps['color']>;
+    href?: string;
     /**
      * Overrides the auto-detected active state.
      * When omitted, the active state is inferred from the current route.
@@ -57,6 +58,19 @@ export type LinkProps = Omit<HTMLAnchorAttributes, 'class' | 'href'> & {
      * Auto-detected from the `href` when omitted.
      */
     external?: boolean;
+    /**
+     * The button type attribute. Only applies when rendering as `<button>`.
+     * @default 'button'
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * The link target attribute. Only applies when rendering as `<a>`.
+     */
+    target?: string;
+    /**
+     * The link rel attribute. Only applies when rendering as `<a>`.
+     */
+    rel?: string;
     /**
      * Additional CSS classes for the root element.
      */
@@ -65,4 +79,8 @@ export type LinkProps = Omit<HTMLAnchorAttributes, 'class' | 'href'> & {
      * Override styles for specific link slots.
      */
     ui?: Partial<Record<LinkSlots, ClassNameValue>>;
+    /**
+     * Content rendered inside the link.
+     */
+    children?: Snippet;
 };

package/dist/Link/link.variants.d.ts

@@ -1,17 +1,12 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const linkVariants: import("tailwind-variants").TVReturnType<{
-    color: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        success: string;
-        warning: string;
-        error: string;
-        info: string;
-    };
     active: {
-        true: string;
-        false: string;
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
     };
     disabled: {
         true: {
@@ -24,20 +19,15 @@ export declare const linkVariants: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, {
-    base: string[];
+    base: string;
 }, undefined, {
-    color: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        success: string;
-        warning: string;
-        error: string;
-        info: string;
-    };
     active: {
-        true: string;
-        false: string;
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
     };
     disabled: {
         true: {
@@ -50,20 +40,15 @@ export declare const linkVariants: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, {
-    base: string[];
+    base: string;
 }, import("tailwind-variants").TVReturnType<{
-    color: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        success: string;
-        warning: string;
-        error: string;
-        info: string;
-    };
     active: {
-        true: string;
-        false: string;
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
     };
     disabled: {
         true: {
@@ -76,24 +61,19 @@ export declare const linkVariants: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, {
-    base: string[];
+    base: string;
 }, undefined, unknown, unknown, undefined>>;
 export type LinkVariantProps = VariantProps<typeof linkVariants>;
 export type LinkSlots = keyof ReturnType<typeof linkVariants>;
 export declare const linkDefaults: {
     defaultVariants: import("tailwind-variants").TVDefaultVariants<{
-        color: {
-            primary: string;
-            secondary: string;
-            tertiary: string;
-            success: string;
-            warning: string;
-            error: string;
-            info: string;
-        };
         active: {
-            true: string;
-            false: string;
+            true: {
+                base: string;
+            };
+            false: {
+                base: string;
+            };
         };
         disabled: {
             true: {
@@ -106,20 +86,15 @@ export declare const linkDefaults: {
             false: string;
         };
     }, {
-        base: string[];
+        base: string;
     }, {
-        color: {
-            primary: string;
-            secondary: string;
-            tertiary: string;
-            success: string;
-            warning: string;
-            error: string;
-            info: string;
-        };
         active: {
-            true: string;
-            false: string;
+            true: {
+                base: string;
+            };
+            false: {
+                base: string;
+            };
         };
         disabled: {
             true: {
@@ -132,7 +107,7 @@ export declare const linkDefaults: {
             false: string;
         };
     }, {
-        base: string[];
+        base: string;
     }>;
     slots: Partial<Record<LinkSlots, string>>;
 };

package/dist/Link/link.variants.js

@@ -1,25 +1,16 @@
 import { tv } from 'tailwind-variants';
 export const linkVariants = tv({
     slots: {
-        base: [
-            'inline-flex items-center',
-            'transition-colors duration-200',
-            'focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'
-        ]
+        base: 'focus-visible:outline-primary'
     },
     variants: {
-        color: {
-            primary: '',
-            secondary: '',
-            tertiary: '',
-            success: '',
-            warning: '',
-            error: '',
-            info: ''
-        },
         active: {
-            true: '',
-            false: ''
+            true: {
+                base: 'text-primary'
+            },
+            false: {
+                base: 'text-on-surface-variant'
+            }
         },
         disabled: {
             true: {
@@ -33,107 +24,14 @@ export const linkVariants = tv({
         }
     },
     compoundVariants: [
-        // ========== PRIMARY ==========
-        {
-            color: 'primary',
-            active: true,
-            raw: false,
-            class: { base: 'text-primary' }
-        },
-        {
-            color: 'primary',
-            active: false,
-            disabled: false,
-            raw: false,
-            class: { base: 'text-primary/80 hover:text-primary' }
-        },
-        // ========== SECONDARY ==========
-        {
-            color: 'secondary',
-            active: true,
-            raw: false,
-            class: { base: 'text-secondary' }
-        },
-        {
-            color: 'secondary',
-            active: false,
-            disabled: false,
-            raw: false,
-            class: { base: 'text-secondary/80 hover:text-secondary' }
-        },
-        // ========== TERTIARY ==========
-        {
-            color: 'tertiary',
-            active: true,
-            raw: false,
-            class: { base: 'text-tertiary' }
-        },
-        {
-            color: 'tertiary',
-            active: false,
-            disabled: false,
-            raw: false,
-            class: { base: 'text-tertiary/80 hover:text-tertiary' }
-        },
-        // ========== SUCCESS ==========
-        {
-            color: 'success',
-            active: true,
-            raw: false,
-            class: { base: 'text-success' }
-        },
-        {
-            color: 'success',
-            active: false,
-            disabled: false,
-            raw: false,
-            class: { base: 'text-success/80 hover:text-success' }
-        },
-        // ========== WARNING ==========
-        {
-            color: 'warning',
-            active: true,
-            raw: false,
-            class: { base: 'text-warning' }
-        },
-        {
-            color: 'warning',
-            active: false,
-            disabled: false,
-            raw: false,
-            class: { base: 'text-warning/80 hover:text-warning' }
-        },
-        // ========== ERROR ==========
-        {
-            color: 'error',
-            active: true,
-            raw: false,
-            class: { base: 'text-error' }
-        },
-        {
-            color: 'error',
-            active: false,
-            disabled: false,
-            raw: false,
-            class: { base: 'text-error/80 hover:text-error' }
-        },
-        // ========== INFO ==========
-        {
-            color: 'info',
-            active: true,
-            raw: false,
-            class: { base: 'text-info' }
-        },
         {
-            color: 'info',
             active: false,
             disabled: false,
             raw: false,
-            class: { base: 'text-info/80 hover:text-info' }
+            class: { base: 'hover:text-on-surface transition-colors' }
         }
     ],
     defaultVariants: {
-        color: 'primary',
         active: false,
         disabled: false,
         raw: false

package/dist/Modal/Modal.svelte

@@ -40,6 +40,7 @@
         header: headerSlot,
         titleSlot,
         descriptionSlot,
+        actions: actionsSlot,
         body: bodySlot,
         footer: footerSlot,
         closeSlot
@@ -51,7 +52,9 @@
     const hasTitle = $derived(!!title || !!titleSlot)
     const hasDescription = $derived(!!description || !!descriptionSlot)
     const hasHeading = $derived(hasTitle || hasDescription)
-    const hasHeader = $derived(!!headerSlot || hasHeading || showClose || !!closeSlot)
+    const hasHeader = $derived(
+        !!headerSlot || hasHeading || !!actionsSlot || showClose || !!closeSlot
+    )
 
     const variantSlots = $derived(
         modalVariants({ transition, fullscreen, overlay: showOverlay, scrollable })
@@ -66,6 +69,7 @@
         description: variantSlots.description({
             class: [config.slots.description, ui?.description]
         }),
+        actions: variantSlots.actions({ class: [config.slots.actions, ui?.actions] }),
         body: variantSlots.body({ class: [config.slots.body, ui?.body] }),
         footer: variantSlots.footer({ class: [config.slots.footer, ui?.footer] }),
         close: variantSlots.close({ class: [config.slots.close, ui?.close] })
@@ -132,6 +136,10 @@
                             {/if}
                         </div>
 
+                        {#if actionsSlot}
+                            <div class={classes.actions}>{@render actionsSlot()}</div>
+                        {/if}
+
                         {#if showClose || closeSlot}
                             <Dialog.Close>
                                 {#snippet child({ props })}