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

package/dist/portal/portal.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onMount, onDestroy, tick } from 'svelte';
+	import { browser } from '$app/environment';
+
+	type PortalProps = {
+		/** Target element or selector to render into. Defaults to document.body */
+		target?: string;
+		/** Content to render in the portal */
+		children?: Snippet;
+	};
+
+	let { target = 'body', children }: PortalProps = $props();
+
+	let wrapper: HTMLDivElement | undefined = $state();
+
+	onMount(async () => {
+		if (!browser || !wrapper) return;
+
+		await tick();
+
+		const targetEl = document.querySelector(target);
+		if (!targetEl) {
+			console.error(`Portal: target "${target}" not found`);
+			return;
+		}
+
+		targetEl.appendChild(wrapper);
+	});
+
+	onDestroy(() => {
+		// Wrapper will be automatically removed when component is destroyed
+		// because Svelte still controls it
+		if (wrapper && wrapper.parentNode) {
+			wrapper.parentNode.removeChild(wrapper);
+		}
+	});
+</script>
+
+<div bind:this={wrapper} style="display: contents;">
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

package/dist/portal/portal.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type PortalProps = {
+    /** Target element or selector to render into. Defaults to document.body */
+    target?: string;
+    /** Content to render in the portal */
+    children?: Snippet;
+};
+declare const Portal: import("svelte").Component<PortalProps, {}, "">;
+type Portal = ReturnType<typeof Portal>;
+export default Portal;

package/dist/primitives/aria-hide-outside.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Hides all elements in the DOM tree outside of the given targets from screen readers
+ * and makes them inert. Based on React Aria's ariaHideOutside implementation.
+ *
+ * This works by walking the DOM from the body and marking all siblings
+ * of ancestors of the target elements as inert.
+ */
+interface HideOutsideResult {
+    /** Call this to restore the original state */
+    restore: () => void;
+}
+/**
+ * Hides all content outside of the target elements from assistive technologies
+ * and makes it non-interactive.
+ *
+ * @example
+ * ```typescript
+ * const { restore } = hideOutside([popoverRef]);
+ * // Later, when popover closes:
+ * restore();
+ * ```
+ */
+export declare function hideOutside(targets: HTMLElement[]): HideOutsideResult;
+/**
+ * Svelte action that hides all content outside of the element.
+ *
+ * @example
+ * ```svelte
+ * <div use:ariaHideOutside={enabled}>
+ *   Modal content
+ * </div>
+ * ```
+ */
+export declare function ariaHideOutside(node: HTMLElement, enabled?: boolean): {
+    update(newEnabled: boolean): void;
+    destroy(): void;
+};
+export {};

package/dist/primitives/aria-hide-outside.js

@@ -0,0 +1,152 @@
+/**
+ * Hides all elements in the DOM tree outside of the given targets from screen readers
+ * and makes them inert. Based on React Aria's ariaHideOutside implementation.
+ *
+ * This works by walking the DOM from the body and marking all siblings
+ * of ancestors of the target elements as inert.
+ */
+/**
+ * Global hidden state tracker.
+ * Allows multiple overlapping hideOutside calls without restoring too early.
+ */
+const hiddenState = new Map();
+function hideElement(element) {
+    const existing = hiddenState.get(element);
+    if (existing) {
+        existing.count += 1;
+        hiddenState.set(element, existing);
+    }
+    else {
+        hiddenState.set(element, {
+            count: 1,
+            hadInert: element.hasAttribute('inert'),
+            ariaHidden: element.getAttribute('aria-hidden')
+        });
+    }
+    element.setAttribute('inert', '');
+    element.setAttribute('aria-hidden', 'true');
+}
+function restoreElement(element) {
+    const existing = hiddenState.get(element);
+    if (!existing)
+        return;
+    if (existing.count > 1) {
+        existing.count -= 1;
+        hiddenState.set(element, existing);
+        return;
+    }
+    if (!existing.hadInert) {
+        element.removeAttribute('inert');
+    }
+    else {
+        element.setAttribute('inert', '');
+    }
+    if (existing.ariaHidden === null) {
+        element.removeAttribute('aria-hidden');
+    }
+    else {
+        element.setAttribute('aria-hidden', existing.ariaHidden);
+    }
+    hiddenState.delete(element);
+}
+/**
+ * Hides all content outside of the target elements from assistive technologies
+ * and makes it non-interactive.
+ *
+ * @example
+ * ```typescript
+ * const { restore } = hideOutside([popoverRef]);
+ * // Later, when popover closes:
+ * restore();
+ * ```
+ */
+export function hideOutside(targets) {
+    const affectedElements = new Set();
+    const targetSet = new Set(targets);
+    const targetAncestors = new Set();
+    for (const target of targets) {
+        let current = target.parentElement;
+        while (current) {
+            targetAncestors.add(current);
+            current = current.parentElement;
+        }
+    }
+    function walk(root) {
+        const children = root.children;
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+            const tagName = child.tagName;
+            if (tagName === 'SCRIPT' || tagName === 'STYLE' || tagName === 'LINK') {
+                continue;
+            }
+            if (targetSet.has(child)) {
+                continue;
+            }
+            if (targetAncestors.has(child)) {
+                walk(child);
+            }
+            else {
+                hideElement(child);
+                affectedElements.add(child);
+            }
+        }
+    }
+    if (document.body) {
+        walk(document.body);
+    }
+    let restored = false;
+    return {
+        restore() {
+            if (restored)
+                return;
+            restored = true;
+            affectedElements.forEach((element) => {
+                restoreElement(element);
+            });
+            affectedElements.clear();
+        }
+    };
+}
+/**
+ * Svelte action that hides all content outside of the element.
+ *
+ * @example
+ * ```svelte
+ * <div use:ariaHideOutside={enabled}>
+ *   Modal content
+ * </div>
+ * ```
+ */
+export function ariaHideOutside(node, enabled = true) {
+    let result = null;
+    function activate() {
+        requestAnimationFrame(() => {
+            if (node.isConnected) {
+                result = hideOutside([node]);
+            }
+        });
+    }
+    function deactivate() {
+        if (result) {
+            result.restore();
+            result = null;
+        }
+    }
+    if (enabled) {
+        activate();
+    }
+    return {
+        update(newEnabled) {
+            if (newEnabled && !enabled) {
+                activate();
+            }
+            else if (!newEnabled && enabled) {
+                deactivate();
+            }
+            enabled = newEnabled;
+        },
+        destroy() {
+            deactivate();
+        }
+    };
+}

package/dist/primitives/click-outside.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Click outside primitive.
+ * Detects clicks outside of an element.
+ */
+export type ClickOutsideOptions = {
+    /** Callback when clicking outside. */
+    handler: () => void;
+    /** Whether the listener is enabled. */
+    enabled?: boolean;
+    /** Elements to ignore (clicks on these won't trigger). */
+    ignore?: (HTMLElement | null)[];
+};
+/**
+ * Svelte action that detects clicks outside of an element.
+ *
+ * @example
+ * ```svelte
+ * <div use:clickOutside={{ handler: close, ignore: [triggerRef] }}>
+ *   Popover content
+ * </div>
+ * ```
+ */
+export declare function clickOutside(node: HTMLElement, options: ClickOutsideOptions): {
+    update(newOptions: ClickOutsideOptions): void;
+    destroy(): void;
+};

package/dist/primitives/click-outside.js

@@ -0,0 +1,66 @@
+/**
+ * Click outside primitive.
+ * Detects clicks outside of an element.
+ */
+/**
+ * Check if an element is in a "top layer" (portal, dialog, popover, etc.)
+ * that was spawned from within the reference node.
+ * This prevents clicks on nested portals from triggering clickOutside.
+ */
+function isInTopLayer(target) {
+    if (!(target instanceof Element))
+        return false;
+    // Check if the element or any ancestor is marked as top-layer
+    // This includes our popovers, nested dialogs, and other portaled content
+    const topLayerElement = target.closest('[data-dialog-content], [role="dialog"]');
+    return topLayerElement !== null;
+}
+/**
+ * Svelte action that detects clicks outside of an element.
+ *
+ * @example
+ * ```svelte
+ * <div use:clickOutside={{ handler: close, ignore: [triggerRef] }}>
+ *   Popover content
+ * </div>
+ * ```
+ */
+export function clickOutside(node, options) {
+    let { handler, enabled = true, ignore = [] } = options;
+    function handleClick(event) {
+        if (!enabled)
+            return;
+        const target = event.target;
+        if (node.contains(target))
+            return;
+        for (const el of ignore) {
+            if (el && el.contains(target))
+                return;
+        }
+        // Don't trigger if clicking on a top-layer element (portal content)
+        // This prevents closing when clicking on nested popovers/dialogs
+        if (isInTopLayer(target))
+            return;
+        handler();
+    }
+    if (enabled) {
+        document.addEventListener('mousedown', handleClick, true);
+    }
+    return {
+        update(newOptions) {
+            const wasEnabled = enabled;
+            handler = newOptions.handler;
+            enabled = newOptions.enabled ?? true;
+            ignore = newOptions.ignore ?? [];
+            if (enabled && !wasEnabled) {
+                document.addEventListener('mousedown', handleClick, true);
+            }
+            else if (!enabled && wasEnabled) {
+                document.removeEventListener('mousedown', handleClick, true);
+            }
+        },
+        destroy() {
+            document.removeEventListener('mousedown', handleClick, true);
+        }
+    };
+}

package/dist/primitives/floating.d.ts

@@ -0,0 +1,57 @@
+import { type Placement as FloatingPlacement } from '@floating-ui/dom';
+/**
+ * Placement options for floating elements.
+ * Follows the specification with logical 'start'/'end' values.
+ */
+export type Placement = 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+/**
+ * Extended placement type that includes human-readable variants.
+ */
+export type ExtendedPlacement = Placement | 'bottom left' | 'bottom right' | 'top left' | 'top right' | 'left top' | 'left bottom' | 'right top' | 'right bottom' | 'start' | 'start top' | 'start bottom' | 'end' | 'end top' | 'end bottom';
+/**
+ * Options for the floating element positioning.
+ */
+export type FloatingOptions = {
+    /** Offset along the main axis from the anchor. */
+    offset?: number;
+    /** Placement relative to the anchor element. */
+    placement?: ExtendedPlacement;
+    /** Whether to flip when there's insufficient space. */
+    shouldFlip?: boolean;
+    /** Boundary element for positioning constraints. */
+    boundaryElement?: Element | null;
+    /** Callback when position is updated. */
+    onPositionUpdate?: (x: number, y: number, placement: FloatingPlacement) => void;
+};
+/**
+ * Creates a Svelte action for positioning a floating element relative to an anchor.
+ *
+ * Exposes CSS custom properties on the floating element:
+ * - `--trigger-width`: The trigger element's width
+ * - `--trigger-height`: The trigger element's height
+ * - `--available-width`: Available width between trigger and viewport edge
+ * - `--available-height`: Available height between trigger and viewport edge
+ * - `--transform-origin`: Coordinates for animations (e.g., "center top")
+ */
+export declare function createFloating(anchorElement: HTMLElement | null, options?: FloatingOptions): (floatingElement: HTMLElement) => {
+    destroy(): void;
+} | undefined;
+/**
+ * Simple Svelte action for floating positioning.
+ * Use when you just need positioning without complex state management.
+ *
+ * Exposes CSS custom properties on the floating element:
+ * - `--trigger-width`: The trigger element's width
+ * - `--trigger-height`: The trigger element's height
+ * - `--available-width`: Available width between trigger and viewport edge
+ * - `--available-height`: Available height between trigger and viewport edge
+ * - `--transform-origin`: Coordinates for animations (e.g., "center top")
+ */
+export declare function floating(floatingElement: HTMLElement, options: {
+    anchor: HTMLElement | null;
+} & FloatingOptions): {
+    update(newOptions: {
+        anchor: HTMLElement | null;
+    } & FloatingOptions): void;
+    destroy(): void;
+} | undefined;

package/dist/primitives/floating.js

@@ -0,0 +1,179 @@
+import { computePosition, flip, shift, offset as offsetMiddleware, size, autoUpdate } from '@floating-ui/dom';
+/**
+ * Converts extended placement syntax to Floating UI placement.
+ */
+function normalizeExtendedPlacement(placement) {
+    const mappings = {
+        bottom: 'bottom',
+        'bottom-start': 'bottom-start',
+        'bottom-end': 'bottom-end',
+        'bottom left': 'bottom-start',
+        'bottom right': 'bottom-end',
+        top: 'top',
+        'top-start': 'top-start',
+        'top-end': 'top-end',
+        'top left': 'top-start',
+        'top right': 'top-end',
+        left: 'left',
+        'left-start': 'left-start',
+        'left-end': 'left-end',
+        'left top': 'left-start',
+        'left bottom': 'left-end',
+        right: 'right',
+        'right-start': 'right-start',
+        'right-end': 'right-end',
+        'right top': 'right-start',
+        'right bottom': 'right-end',
+        start: 'left',
+        'start top': 'left-start',
+        'start bottom': 'left-end',
+        end: 'right',
+        'end top': 'right-start',
+        'end bottom': 'right-end'
+    };
+    return mappings[placement] || 'bottom';
+}
+/**
+ * Calculates the transform origin based on the final placement.
+ * Used for animations that should originate from the anchor point.
+ */
+function getTransformOrigin(placement) {
+    const [side, align] = placement.split('-');
+    const sideMap = {
+        top: 'bottom',
+        bottom: 'top',
+        left: 'right',
+        right: 'left'
+    };
+    const alignMap = {
+        start: 'left',
+        end: 'right'
+    };
+    const vertical = side === 'top' || side === 'bottom';
+    const oppositeSide = sideMap[side] || 'top';
+    if (vertical) {
+        const horizontalAlign = align ? alignMap[align] || 'center' : 'center';
+        return `${horizontalAlign} ${oppositeSide}`;
+    }
+    else {
+        const verticalAlign = align ? (align === 'start' ? 'top' : 'bottom') : 'center';
+        return `${oppositeSide} ${verticalAlign}`;
+    }
+}
+/**
+ * Creates a Svelte action for positioning a floating element relative to an anchor.
+ *
+ * Exposes CSS custom properties on the floating element:
+ * - `--trigger-width`: The trigger element's width
+ * - `--trigger-height`: The trigger element's height
+ * - `--available-width`: Available width between trigger and viewport edge
+ * - `--available-height`: Available height between trigger and viewport edge
+ * - `--transform-origin`: Coordinates for animations (e.g., "center top")
+ */
+export function createFloating(anchorElement, options = {}) {
+    const { offset = 8, placement = 'bottom', shouldFlip = true, boundaryElement = null, onPositionUpdate } = options;
+    let cleanup = null;
+    function action(floatingElement) {
+        if (!anchorElement)
+            return;
+        const normalizedPlacement = normalizeExtendedPlacement(placement);
+        const middleware = [
+            offsetMiddleware(offset),
+            ...(shouldFlip ? [flip({ boundary: boundaryElement || undefined })] : []),
+            shift({ boundary: boundaryElement || undefined }),
+            size({
+                apply({ rects, availableWidth, availableHeight, elements, placement }) {
+                    const floatingEl = elements.floating;
+                    floatingEl.style.setProperty('--trigger-width', `${rects.reference.width}px`);
+                    floatingEl.style.setProperty('--trigger-height', `${rects.reference.height}px`);
+                    floatingEl.style.setProperty('--available-width', `${availableWidth}px`);
+                    floatingEl.style.setProperty('--available-height', `${availableHeight}px`);
+                    floatingEl.style.setProperty('--transform-origin', getTransformOrigin(placement));
+                }
+            })
+        ];
+        async function updatePosition() {
+            if (!anchorElement || !floatingElement)
+                return;
+            const { x, y, placement: finalPlacement } = await computePosition(anchorElement, floatingElement, {
+                placement: normalizedPlacement,
+                middleware
+            });
+            Object.assign(floatingElement.style, {
+                left: `${x}px`,
+                top: `${y}px`
+            });
+            onPositionUpdate?.(x, y, finalPlacement);
+        }
+        cleanup = autoUpdate(anchorElement, floatingElement, updatePosition);
+        return {
+            destroy() {
+                cleanup?.();
+                cleanup = null;
+            }
+        };
+    }
+    return action;
+}
+/**
+ * Simple Svelte action for floating positioning.
+ * Use when you just need positioning without complex state management.
+ *
+ * Exposes CSS custom properties on the floating element:
+ * - `--trigger-width`: The trigger element's width
+ * - `--trigger-height`: The trigger element's height
+ * - `--available-width`: Available width between trigger and viewport edge
+ * - `--available-height`: Available height between trigger and viewport edge
+ * - `--transform-origin`: Coordinates for animations (e.g., "center top")
+ */
+export function floating(floatingElement, options) {
+    const { anchor, ...floatingOptions } = options;
+    if (!anchor)
+        return;
+    const normalizedPlacement = normalizeExtendedPlacement(floatingOptions.placement || 'bottom');
+    const offset = floatingOptions.offset ?? 8;
+    const shouldFlip = floatingOptions.shouldFlip ?? true;
+    const boundaryElement = floatingOptions.boundaryElement || null;
+    const middleware = [
+        offsetMiddleware(offset),
+        ...(shouldFlip ? [flip({ boundary: boundaryElement || undefined })] : []),
+        shift({ boundary: boundaryElement || undefined }),
+        size({
+            apply({ rects, availableWidth, availableHeight, elements, placement }) {
+                const floatingEl = elements.floating;
+                floatingEl.style.setProperty('--trigger-width', `${rects.reference.width}px`);
+                floatingEl.style.setProperty('--trigger-height', `${rects.reference.height}px`);
+                floatingEl.style.setProperty('--available-width', `${availableWidth}px`);
+                floatingEl.style.setProperty('--available-height', `${availableHeight}px`);
+                floatingEl.style.setProperty('--transform-origin', getTransformOrigin(placement));
+            }
+        })
+    ];
+    let cleanup = null;
+    async function updatePosition() {
+        if (!anchor || !floatingElement)
+            return;
+        const { x, y, placement: finalPlacement } = await computePosition(anchor, floatingElement, {
+            placement: normalizedPlacement,
+            middleware,
+            strategy: 'fixed' // Use fixed strategy for portal-rendered elements
+        });
+        Object.assign(floatingElement.style, {
+            left: `${x}px`,
+            top: `${y}px`
+        });
+        floatingOptions.onPositionUpdate?.(x, y, finalPlacement);
+    }
+    cleanup = autoUpdate(anchor, floatingElement, updatePosition);
+    return {
+        update(newOptions) {
+            cleanup?.();
+            if (newOptions.anchor) {
+                cleanup = autoUpdate(newOptions.anchor, floatingElement, updatePosition);
+            }
+        },
+        destroy() {
+            cleanup?.();
+        }
+    };
+}

package/dist/primitives/focus-trap.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Focus trap primitive.
+ * Traps keyboard focus within a container element.
+ */
+/**
+ * Svelte action that traps focus within an element.
+ *
+ * @example
+ * ```svelte
+ * <div use:focusTrap={isOpen}>
+ *   <button>First</button>
+ *   <button>Last</button>
+ * </div>
+ * ```
+ */
+export declare function focusTrap(node: HTMLElement, enabled?: boolean): {
+    update(newEnabled: boolean): void;
+    destroy(): void;
+};