@human-kit/svelte-components 1.0.0-alpha.1

package/dist/primitives/focus-trap.js

@@ -0,0 +1,102 @@
+/**
+ * Focus trap primitive.
+ * Traps keyboard focus within a container element.
+ */
+const FOCUSABLE_SELECTOR = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+    '[contenteditable="true"]'
+].join(', ');
+function getFocusableElements(container) {
+    return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => el.offsetParent !== null);
+}
+/**
+ * Svelte action that traps focus within an element.
+ *
+ * @example
+ * ```svelte
+ * <div use:focusTrap={isOpen}>
+ *   <button>First</button>
+ *   <button>Last</button>
+ * </div>
+ * ```
+ */
+export function focusTrap(node, enabled = true) {
+    let previousActiveElement = null;
+    function handleKeydown(event) {
+        if (event.key !== 'Tab')
+            return;
+        const focusableElements = getFocusableElements(node);
+        if (focusableElements.length === 0) {
+            event.preventDefault();
+            node.focus();
+            return;
+        }
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        const focusIsInside = node.contains(document.activeElement);
+        if (!focusIsInside) {
+            event.preventDefault();
+            firstElement.focus();
+            return;
+        }
+        if (event.shiftKey) {
+            if (document.activeElement === firstElement || document.activeElement === node) {
+                event.preventDefault();
+                lastElement.focus();
+            }
+        }
+        else {
+            if (document.activeElement === lastElement || document.activeElement === node) {
+                event.preventDefault();
+                firstElement.focus();
+            }
+        }
+    }
+    function activate() {
+        previousActiveElement = document.activeElement;
+        if (!node.hasAttribute('tabindex')) {
+            node.setAttribute('tabindex', '-1');
+        }
+        // Focus first focusable element, or the container if none
+        requestAnimationFrame(() => {
+            const focusableElements = getFocusableElements(node);
+            if (focusableElements.length > 0) {
+                focusableElements[0].focus();
+            }
+            else {
+                node.focus();
+            }
+        });
+        document.addEventListener('keydown', handleKeydown, true);
+    }
+    function deactivate() {
+        document.removeEventListener('keydown', handleKeydown, true);
+        if (previousActiveElement && previousActiveElement.focus) {
+            previousActiveElement.focus();
+        }
+    }
+    if (enabled) {
+        activate();
+    }
+    return {
+        update(newEnabled) {
+            if (newEnabled && !enabled) {
+                activate();
+            }
+            else if (!newEnabled && enabled) {
+                deactivate();
+            }
+            enabled = newEnabled;
+        },
+        destroy() {
+            if (enabled) {
+                deactivate();
+            }
+        }
+    };
+}

package/dist/primitives/index.d.ts

@@ -0,0 +1,6 @@
+export * from './floating.js';
+export * from './focus-trap.js';
+export * from './keyboard-navigation.js';
+export * from './scroll-lock.js';
+export * from './aria-hide-outside.js';
+export * from './click-outside.js';

package/dist/primitives/index.js

@@ -0,0 +1,7 @@
+// Primitives exports
+export * from './floating.js';
+export * from './focus-trap.js';
+export * from './keyboard-navigation.js';
+export * from './scroll-lock.js';
+export * from './aria-hide-outside.js';
+export * from './click-outside.js';

package/dist/primitives/keyboard-navigation.d.ts

@@ -0,0 +1,88 @@
+import { type Writable } from 'svelte/store';
+export type KeyboardNavigationOptions = {
+    /**
+     * Orientation of the navigation
+     * - 'vertical': ArrowUp/ArrowDown for navigation
+     * - 'horizontal': ArrowLeft/ArrowRight for navigation
+     * - 'both': All arrow keys for navigation
+     */
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    /**
+     * Whether navigation wraps around at the ends
+     */
+    loop?: boolean;
+    /**
+     * Selector for finding navigable items within the container
+     */
+    itemSelector?: string;
+    /**
+     * Callback when an item is selected (Enter/Space)
+     */
+    onSelect?: (id: string | number, element: HTMLElement) => void;
+    /**
+     * Callback when focused item changes
+     */
+    onFocusChange?: (id: string | number | null, element: HTMLElement | null) => void;
+    /**
+     * Callback for Ctrl+A (select all)
+     */
+    onSelectAll?: () => void;
+    /**
+     * Whether to handle Home/End keys
+     */
+    homeEndKeys?: boolean;
+    /**
+     * Whether to handle typeahead (character search)
+     */
+    typeahead?: boolean;
+};
+export type KeyboardNavigationState = {
+    focusedId: Writable<string | number | null>;
+    focusedElement: Writable<HTMLElement | null>;
+};
+export type KeyboardNavigationReturn = {
+    /** Current state stores */
+    state: KeyboardNavigationState;
+    /** Svelte action to attach to container */
+    action: (node: HTMLElement) => {
+        destroy: () => void;
+    };
+    /** Programmatic navigation methods */
+    focusNext: () => void;
+    focusPrevious: () => void;
+    focusFirst: () => void;
+    focusLast: () => void;
+    focusById: (id: string | number) => void;
+    /** Update items (call after DOM changes) */
+    updateItems: () => void;
+};
+/**
+ * Creates a keyboard navigation controller for list-like components.
+ * Implements WAI-ARIA patterns for keyboard navigation.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createKeyboardNavigation } from './keyboard-navigation';
+ *
+ *   const { action, state, focusNext } = createKeyboardNavigation({
+ *     orientation: 'vertical',
+ *     onSelect: (id) => console.log('Selected:', id)
+ *   });
+ * </script>
+ *
+ * <div use:action>
+ *   <div data-navigation-item data-item-id="1">Item 1</div>
+ *   <div data-navigation-item data-item-id="2">Item 2</div>
+ * </div>
+ * ```
+ */
+export declare function createKeyboardNavigation(options?: KeyboardNavigationOptions): KeyboardNavigationReturn;
+/**
+ * Simple Svelte action for roving tabindex without state management.
+ * Use this for simpler cases where you don't need programmatic control.
+ */
+export declare function rovingTabindex(container: HTMLElement, options?: Pick<KeyboardNavigationOptions, 'orientation' | 'loop' | 'itemSelector'>): {
+    update: () => void;
+    destroy: () => void;
+};

package/dist/primitives/keyboard-navigation.js

@@ -0,0 +1,274 @@
+import { writable } from 'svelte/store';
+/**
+ * Creates a keyboard navigation controller for list-like components.
+ * Implements WAI-ARIA patterns for keyboard navigation.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createKeyboardNavigation } from './keyboard-navigation';
+ *
+ *   const { action, state, focusNext } = createKeyboardNavigation({
+ *     orientation: 'vertical',
+ *     onSelect: (id) => console.log('Selected:', id)
+ *   });
+ * </script>
+ *
+ * <div use:action>
+ *   <div data-navigation-item data-item-id="1">Item 1</div>
+ *   <div data-navigation-item data-item-id="2">Item 2</div>
+ * </div>
+ * ```
+ */
+export function createKeyboardNavigation(options = {}) {
+    const { orientation = 'vertical', loop = false, itemSelector = '[data-navigation-item]:not([data-disabled])', onSelect, onFocusChange, onSelectAll, homeEndKeys = true, typeahead = false } = options;
+    const focusedId = writable(null);
+    const focusedElement = writable(null);
+    let container = null;
+    let items = [];
+    let typeaheadBuffer = '';
+    let typeaheadTimeout = null;
+    function getItems() {
+        if (!container)
+            return [];
+        return Array.from(container.querySelectorAll(itemSelector));
+    }
+    function updateItems() {
+        items = getItems();
+        // Note: tabIndex is now controlled by Svelte components via isFocused state
+        // The primitive only manages focus() calls and notifies about focus changes
+    }
+    function getItemId(element) {
+        const rawId = element.dataset.itemId;
+        if (rawId === undefined)
+            return null;
+        const idType = element.dataset.itemIdType;
+        if (idType === 'number') {
+            const parsed = Number(rawId);
+            return Number.isNaN(parsed) ? rawId : parsed;
+        }
+        return rawId;
+    }
+    function focusItem(element) {
+        if (!element) {
+            focusedId.set(null);
+            focusedElement.set(null);
+            onFocusChange?.(null, null);
+            return;
+        }
+        const id = getItemId(element);
+        focusedId.set(id);
+        focusedElement.set(element);
+        // Note: tabIndex is controlled by Svelte via isFocused state
+        // We just call focus() and notify - the component will react to onFocusChange
+        element.focus();
+        onFocusChange?.(id, element);
+    }
+    function getCurrentIndex() {
+        let currentElement = null;
+        focusedElement.subscribe((el) => (currentElement = el))();
+        if (!currentElement) {
+            const active = document.activeElement;
+            const idx = items.indexOf(active);
+            return idx;
+        }
+        return items.indexOf(currentElement);
+    }
+    function focusNext() {
+        items = getItems();
+        if (items.length === 0)
+            return;
+        const currentIdx = getCurrentIndex();
+        let nextIdx;
+        if (currentIdx === -1) {
+            nextIdx = 0;
+        }
+        else if (loop) {
+            nextIdx = (currentIdx + 1) % items.length;
+        }
+        else {
+            nextIdx = Math.min(currentIdx + 1, items.length - 1);
+        }
+        focusItem(items[nextIdx]);
+    }
+    function focusPrevious() {
+        items = getItems();
+        if (items.length === 0)
+            return;
+        const currentIdx = getCurrentIndex();
+        let prevIdx;
+        if (currentIdx === -1) {
+            prevIdx = items.length - 1;
+        }
+        else if (loop) {
+            prevIdx = (currentIdx - 1 + items.length) % items.length;
+        }
+        else {
+            prevIdx = Math.max(currentIdx - 1, 0);
+        }
+        focusItem(items[prevIdx]);
+    }
+    function focusFirst() {
+        items = getItems();
+        if (items.length === 0)
+            return;
+        focusItem(items[0]);
+    }
+    function focusLast() {
+        items = getItems();
+        if (items.length === 0)
+            return;
+        focusItem(items[items.length - 1]);
+    }
+    function focusById(id) {
+        items = getItems();
+        const element = items.find((el) => {
+            const itemId = getItemId(el);
+            return itemId === id || String(itemId) === String(id);
+        });
+        if (element) {
+            focusItem(element);
+        }
+    }
+    function handleTypeahead(char) {
+        if (!typeahead)
+            return;
+        if (typeaheadTimeout) {
+            clearTimeout(typeaheadTimeout);
+        }
+        typeaheadBuffer += char.toLowerCase();
+        items = getItems();
+        const match = items.find((el) => {
+            const text = el.textContent?.trim().toLowerCase() || '';
+            return text.startsWith(typeaheadBuffer);
+        });
+        if (match) {
+            focusItem(match);
+        }
+        typeaheadTimeout = setTimeout(() => {
+            typeaheadBuffer = '';
+        }, 500);
+    }
+    function handleKeydown(event) {
+        const { key, ctrlKey, metaKey } = event;
+        const nextKeys = orientation === 'horizontal'
+            ? ['ArrowRight']
+            : orientation === 'vertical'
+                ? ['ArrowDown']
+                : ['ArrowDown', 'ArrowRight'];
+        const prevKeys = orientation === 'horizontal'
+            ? ['ArrowLeft']
+            : orientation === 'vertical'
+                ? ['ArrowUp']
+                : ['ArrowUp', 'ArrowLeft'];
+        if (nextKeys.includes(key)) {
+            event.preventDefault();
+            focusNext();
+            return;
+        }
+        if (prevKeys.includes(key)) {
+            event.preventDefault();
+            focusPrevious();
+            return;
+        }
+        // For all other keys, block repeat (prevent scroll but don't act)
+        if (event.repeat) {
+            event.preventDefault();
+            return;
+        }
+        // Home/End - single press only
+        if (homeEndKeys) {
+            if (key === 'Home') {
+                event.preventDefault();
+                focusFirst();
+                return;
+            }
+            if (key === 'End') {
+                event.preventDefault();
+                focusLast();
+                return;
+            }
+        }
+        // Selection - single press only
+        if (key === 'Enter' || key === ' ') {
+            event.preventDefault();
+            const active = document.activeElement;
+            items = getItems();
+            if (active && items.includes(active)) {
+                const id = getItemId(active);
+                if (id !== null) {
+                    onSelect?.(id, active);
+                }
+            }
+            return;
+        }
+        // Select all (Ctrl+A / Cmd+A)
+        if ((ctrlKey || metaKey) && (key === 'a' || key === 'A')) {
+            if (onSelectAll) {
+                event.preventDefault();
+                onSelectAll();
+                return;
+            }
+        }
+        // Typeahead (single printable character)
+        if (typeahead && key.length === 1 && !ctrlKey && !metaKey) {
+            handleTypeahead(key);
+        }
+    }
+    function action(node) {
+        container = node;
+        updateItems();
+        node.addEventListener('keydown', handleKeydown);
+        // Handle focus on container
+        function handleContainerFocus(event) {
+            // If focusing container directly (not an item), focus first item
+            if (event.target === node) {
+                items = getItems();
+                if (items.length > 0) {
+                    // Focus the item with tabIndex 0 or first item
+                    const tabbable = items.find((el) => el.tabIndex === 0) || items[0];
+                    focusItem(tabbable);
+                }
+            }
+        }
+        node.addEventListener('focus', handleContainerFocus, true);
+        return {
+            destroy() {
+                node.removeEventListener('keydown', handleKeydown);
+                node.removeEventListener('focus', handleContainerFocus, true);
+                container = null;
+                if (typeaheadTimeout) {
+                    clearTimeout(typeaheadTimeout);
+                }
+            }
+        };
+    }
+    return {
+        state: {
+            focusedId,
+            focusedElement
+        },
+        action,
+        focusNext,
+        focusPrevious,
+        focusFirst,
+        focusLast,
+        focusById,
+        updateItems
+    };
+}
+/**
+ * Simple Svelte action for roving tabindex without state management.
+ * Use this for simpler cases where you don't need programmatic control.
+ */
+export function rovingTabindex(container, options = {}) {
+    if (typeof document === 'undefined') {
+        return { update: () => { }, destroy: () => { } };
+    }
+    const { action, updateItems } = createKeyboardNavigation(options);
+    const cleanup = action(container);
+    return {
+        update: updateItems,
+        destroy: cleanup.destroy
+    };
+}

package/dist/primitives/scroll-lock.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Scroll lock primitive.
+ * Prevents scrolling of the document body.
+ */
+/**
+ * Svelte action that locks scrolling on the document body.
+ * Handles multiple nested scroll locks correctly.
+ *
+ * @example
+ * ```svelte
+ * <div use:scrollLock={isOpen}>
+ *   Modal content
+ * </div>
+ * ```
+ */
+export declare function scrollLock(node: HTMLElement, enabled?: boolean): {
+    update(newEnabled: boolean): void;
+    destroy(): void;
+};

package/dist/primitives/scroll-lock.js

@@ -0,0 +1,62 @@
+/**
+ * Scroll lock primitive.
+ * Prevents scrolling of the document body.
+ */
+let lockCount = 0;
+let originalOverflow = '';
+let originalPaddingRight = '';
+function getScrollbarWidth() {
+    return window.innerWidth - document.documentElement.clientWidth;
+}
+function lock() {
+    if (lockCount === 0) {
+        originalOverflow = document.body.style.overflow;
+        originalPaddingRight = document.body.style.paddingRight;
+        const scrollbarWidth = getScrollbarWidth();
+        document.body.style.overflow = 'hidden';
+        if (scrollbarWidth > 0) {
+            document.body.style.paddingRight = `${scrollbarWidth}px`;
+        }
+    }
+    lockCount++;
+}
+function unlock() {
+    lockCount--;
+    if (lockCount === 0) {
+        document.body.style.overflow = originalOverflow;
+        document.body.style.paddingRight = originalPaddingRight;
+    }
+    lockCount = Math.max(0, lockCount);
+}
+/**
+ * Svelte action that locks scrolling on the document body.
+ * Handles multiple nested scroll locks correctly.
+ *
+ * @example
+ * ```svelte
+ * <div use:scrollLock={isOpen}>
+ *   Modal content
+ * </div>
+ * ```
+ */
+export function scrollLock(node, enabled = true) {
+    if (enabled) {
+        lock();
+    }
+    return {
+        update(newEnabled) {
+            if (newEnabled && !enabled) {
+                lock();
+            }
+            else if (!newEnabled && enabled) {
+                unlock();
+            }
+            enabled = newEnabled;
+        },
+        destroy() {
+            if (enabled) {
+                unlock();
+            }
+        }
+    };
+}

package/dist/test-mocks/app-environment.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Mock for $app/environment used in vitest tests
+ */
+export declare const browser = true;
+export declare const dev = true;
+export declare const building = false;
+export declare const version = "test";

package/dist/test-mocks/app-environment.js

@@ -0,0 +1,7 @@
+/**
+ * Mock for $app/environment used in vitest tests
+ */
+export const browser = true;
+export const dev = true;
+export const building = false;
+export const version = 'test';

package/dist/test-mocks/app-navigation.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Mock for $app/navigation used in vitest tests
+ */
+export declare const goto: () => Promise<void>;
+export declare const invalidate: () => Promise<void>;
+export declare const invalidateAll: () => Promise<void>;
+export declare const prefetch: () => Promise<void>;
+export declare const prefetchRoutes: () => Promise<void>;
+export declare const beforeNavigate: () => void;
+export declare const afterNavigate: () => void;
+export declare const onNavigate: () => void;

package/dist/test-mocks/app-navigation.js

@@ -0,0 +1,11 @@
+/**
+ * Mock for $app/navigation used in vitest tests
+ */
+export const goto = () => Promise.resolve();
+export const invalidate = () => Promise.resolve();
+export const invalidateAll = () => Promise.resolve();
+export const prefetch = () => Promise.resolve();
+export const prefetchRoutes = () => Promise.resolve();
+export const beforeNavigate = () => { };
+export const afterNavigate = () => { };
+export const onNavigate = () => { };

package/dist/test-mocks/app-stores.d.ts

@@ -0,0 +1,16 @@
+export declare const page: import("svelte/store").Readable<{
+    url: URL;
+    params: {};
+    route: {
+        id: null;
+    };
+    status: number;
+    error: null;
+    data: {};
+    form: null;
+}>;
+export declare const navigating: import("svelte/store").Readable<null>;
+export declare const updated: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<boolean>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    check: () => Promise<boolean>;
+};

package/dist/test-mocks/app-stores.js

@@ -0,0 +1,18 @@
+/**
+ * Mock for $app/stores used in vitest tests
+ */
+import { readable } from 'svelte/store';
+export const page = readable({
+    url: new URL('http://localhost'),
+    params: {},
+    route: { id: null },
+    status: 200,
+    error: null,
+    data: {},
+    form: null
+});
+export const navigating = readable(null);
+export const updated = {
+    subscribe: readable(false).subscribe,
+    check: () => Promise.resolve(false)
+};

package/dist/utils/cn.d.ts

@@ -0,0 +1,2 @@
+import type { ClassValue } from 'class-variance-authority/types';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/utils/cn.js

@@ -0,0 +1,5 @@
+import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export { cn } from './cn.js';

package/dist/utils/index.js

@@ -0,0 +1 @@
+export { cn } from './cn.js';