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

package/dist/popover/trigger/popover-trigger.svelte

@@ -24,17 +24,26 @@
 	const popoverCtx = ctx;
 
 	let wrapperRef: HTMLElement | null = $state(null);
+	let activeTrigger: HTMLElement | null = null;
+
+	function setActiveTrigger(button: HTMLElement) {
+		if (activeTrigger && activeTrigger !== button) {
+			activeTrigger.setAttribute('aria-expanded', 'false');
+		}
+
+		activeTrigger = button;
+		popoverCtx.setTriggerRef(button);
+		button.setAttribute('aria-haspopup', 'dialog');
+		button.setAttribute('aria-expanded', String(popoverCtx.isOpen));
+	}
 
 	function handleClick(event: MouseEvent) {
 		const target = event.target as HTMLElement;
 		const button = target.closest('button, [role="button"]') as HTMLElement | null;
 
 		if (button && wrapperRef?.contains(button)) {
-			// Set trigger ref if not already set
-			if (!popoverCtx.triggerRef) {
-				popoverCtx.setTriggerRef(button);
-			}
-			popoverCtx.toggle();
+			setActiveTrigger(button);
+			popoverCtx.toggle('trigger-press', event);
 		}
 	}
 
@@ -43,8 +52,7 @@
 			// Find and set up the trigger button
 			const firstButton = wrapperRef.querySelector('button, [role="button"]') as HTMLElement | null;
 			if (firstButton) {
-				popoverCtx.setTriggerRef(firstButton);
-				firstButton.setAttribute('aria-haspopup', 'dialog');
+				setActiveTrigger(firstButton);
 			}
 		}
 
@@ -59,6 +67,10 @@
 
 	$effect(() => {
 		if (popoverCtx.triggerRef) {
+			if (activeTrigger !== popoverCtx.triggerRef) {
+				activeTrigger = popoverCtx.triggerRef;
+			}
+			popoverCtx.triggerRef.setAttribute('aria-haspopup', 'dialog');
 			popoverCtx.triggerRef.setAttribute('aria-expanded', String(popoverCtx.isOpen));
 		}
 	});

package/dist/portal/portal.svelte

@@ -18,6 +18,8 @@
 		if (!browser || !wrapper) return;
 
 		await tick();
+		const wrapperNode = wrapper;
+		if (!wrapperNode) return;
 
 		const targetEl = document.querySelector(target);
 		if (!targetEl) {
@@ -25,7 +27,7 @@
 			return;
 		}
 
-		targetEl.appendChild(wrapper);
+		targetEl.appendChild(wrapperNode);
 	});
 
 	onDestroy(() => {

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

@@ -4,7 +4,7 @@
  */
 export type ClickOutsideOptions = {
     /** Callback when clicking outside. */
-    handler: () => void;
+    handler: (event: MouseEvent) => void;
     /** Whether the listener is enabled. */
     enabled?: boolean;
     /** Elements to ignore (clicks on these won't trigger). */

package/dist/primitives/click-outside.js

@@ -41,7 +41,7 @@ export function clickOutside(node, options) {
         // This prevents closing when clicking on nested popovers/dialogs
         if (isInTopLayer(target))
             return;
-        handler();
+        handler(event);
     }
     if (enabled) {
         document.addEventListener('mousedown', handleClick, true);

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

@@ -2,6 +2,11 @@
  * Focus trap primitive.
  * Traps keyboard focus within a container element.
  */
+export type FocusTrapOptions = {
+    enabled?: boolean;
+    restoreFocus?: boolean;
+    initialFocus?: HTMLElement | string | (() => HTMLElement | null | undefined);
+};
 /**
  * Svelte action that traps focus within an element.
  *
@@ -13,7 +18,7 @@
  * </div>
  * ```
  */
-export declare function focusTrap(node: HTMLElement, enabled?: boolean): {
-    update(newEnabled: boolean): void;
+export declare function focusTrap(node: HTMLElement, options?: boolean | FocusTrapOptions): {
+    update(newOptions: boolean | FocusTrapOptions): void;
     destroy(): void;
 };

package/dist/primitives/focus-trap.js

@@ -11,6 +11,27 @@ const FOCUSABLE_SELECTOR = [
     '[tabindex]:not([tabindex="-1"])',
     '[contenteditable="true"]'
 ].join(', ');
+function resolveEnabled(options) {
+    if (typeof options === 'boolean')
+        return options;
+    return options.enabled ?? true;
+}
+function resolveRestoreFocus(options) {
+    if (typeof options === 'boolean')
+        return true;
+    return options.restoreFocus ?? true;
+}
+function resolveInitialFocus(container, initialFocus) {
+    if (!initialFocus)
+        return null;
+    if (typeof initialFocus === 'function') {
+        return initialFocus() ?? null;
+    }
+    if (typeof initialFocus === 'string') {
+        return container.querySelector(initialFocus);
+    }
+    return initialFocus;
+}
 function getFocusableElements(container) {
     return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => el.offsetParent !== null);
 }
@@ -25,8 +46,11 @@ function getFocusableElements(container) {
  * </div>
  * ```
  */
-export function focusTrap(node, enabled = true) {
+export function focusTrap(node, options = true) {
     let previousActiveElement = null;
+    let enabled = resolveEnabled(options);
+    let restoreFocus = resolveRestoreFocus(options);
+    let initialFocus = typeof options === 'boolean' ? undefined : options.initialFocus;
     function handleKeydown(event) {
         if (event.key !== 'Tab')
             return;
@@ -64,6 +88,11 @@ export function focusTrap(node, enabled = true) {
         }
         // Focus first focusable element, or the container if none
         requestAnimationFrame(() => {
+            const initialFocusTarget = resolveInitialFocus(node, initialFocus);
+            if (initialFocusTarget && initialFocusTarget.isConnected) {
+                initialFocusTarget.focus();
+                return;
+            }
             const focusableElements = getFocusableElements(node);
             if (focusableElements.length > 0) {
                 focusableElements[0].focus();
@@ -76,7 +105,7 @@ export function focusTrap(node, enabled = true) {
     }
     function deactivate() {
         document.removeEventListener('keydown', handleKeydown, true);
-        if (previousActiveElement && previousActiveElement.focus) {
+        if (restoreFocus && previousActiveElement && previousActiveElement.focus) {
             previousActiveElement.focus();
         }
     }
@@ -84,14 +113,19 @@ export function focusTrap(node, enabled = true) {
         activate();
     }
     return {
-        update(newEnabled) {
-            if (newEnabled && !enabled) {
+        update(newOptions) {
+            const nextEnabled = resolveEnabled(newOptions);
+            const nextRestoreFocus = resolveRestoreFocus(newOptions);
+            if (nextEnabled && !enabled) {
                 activate();
             }
-            else if (!newEnabled && enabled) {
+            else if (!nextEnabled && enabled) {
                 deactivate();
             }
-            enabled = newEnabled;
+            options = newOptions;
+            enabled = nextEnabled;
+            restoreFocus = nextRestoreFocus;
+            initialFocus = typeof newOptions === 'boolean' ? undefined : newOptions.initialFocus;
         },
         destroy() {
             if (enabled) {

package/dist/primitives/index.d.ts

@@ -4,3 +4,4 @@ export * from './keyboard-navigation.js';
 export * from './scroll-lock.js';
 export * from './aria-hide-outside.js';
 export * from './click-outside.js';
+export * from './input-modality.js';

package/dist/primitives/index.js

@@ -5,3 +5,4 @@ export * from './keyboard-navigation.js';
 export * from './scroll-lock.js';
 export * from './aria-hide-outside.js';
 export * from './click-outside.js';
+export * from './input-modality.js';

package/dist/primitives/input-modality.d.ts

@@ -0,0 +1,7 @@
+export type InputModality = 'keyboard' | 'pointer' | 'virtual';
+export declare function initInputModality(target?: HTMLElement | null): void;
+export declare function trackInteractionModality(event?: Event, target?: HTMLElement | null): void;
+export declare function getInteractionModality(): InputModality;
+export declare function shouldShowFocusVisible(target: HTMLElement | null): boolean;
+export declare function focusWithModality(target: HTMLElement, modality: InputModality, options?: FocusOptions): void;
+export declare function resolveCloseInteractionModality(reason: string, event?: Event): InputModality;

package/dist/primitives/input-modality.js

@@ -0,0 +1,116 @@
+let currentModality = 'virtual';
+const listenedWindows = new WeakSet();
+let forcedFocusTarget = null;
+let forcedFocusModality = null;
+function isModifierOnlyKey(event) {
+    return (event.key === 'Shift' || event.key === 'Control' || event.key === 'Alt' || event.key === 'Meta');
+}
+function isKeyboardModalityKey(event) {
+    if (event.ctrlKey || event.metaKey || event.altKey)
+        return false;
+    if (isModifierOnlyKey(event))
+        return false;
+    return true;
+}
+function ensureWindowListeners(win) {
+    if (!win)
+        return;
+    if (listenedWindows.has(win))
+        return;
+    const onKeyDown = (event) => {
+        if (!isKeyboardModalityKey(event))
+            return;
+        currentModality = 'keyboard';
+    };
+    const onPointerDown = () => {
+        currentModality = 'pointer';
+    };
+    const onFocusIn = () => {
+        if (currentModality === 'pointer' || currentModality === 'keyboard')
+            return;
+        currentModality = 'virtual';
+    };
+    win.addEventListener('keydown', onKeyDown, true);
+    win.addEventListener('pointerdown', onPointerDown, true);
+    win.addEventListener('mousedown', onPointerDown, true);
+    win.addEventListener('focusin', onFocusIn, true);
+    listenedWindows.add(win);
+}
+export function initInputModality(target) {
+    const ownerWindow = target?.ownerDocument?.defaultView;
+    if (ownerWindow) {
+        ensureWindowListeners(ownerWindow);
+        return;
+    }
+    if (typeof window !== 'undefined') {
+        ensureWindowListeners(window);
+    }
+}
+function inferModalityFromEvent(event) {
+    if (!event)
+        return undefined;
+    if (event instanceof KeyboardEvent) {
+        return isKeyboardModalityKey(event) ? 'keyboard' : undefined;
+    }
+    if (event instanceof MouseEvent && event.type === 'click' && event.detail === 0) {
+        return 'keyboard';
+    }
+    if (event instanceof PointerEvent || event instanceof MouseEvent) {
+        return 'pointer';
+    }
+    return undefined;
+}
+function resolveModalityForTarget(target) {
+    if (target && forcedFocusTarget === target && forcedFocusModality) {
+        const modality = forcedFocusModality;
+        forcedFocusTarget = null;
+        forcedFocusModality = null;
+        return modality;
+    }
+    return currentModality;
+}
+export function trackInteractionModality(event, target) {
+    initInputModality(target);
+    const inferred = inferModalityFromEvent(event);
+    if (inferred) {
+        currentModality = inferred;
+    }
+}
+export function getInteractionModality() {
+    return currentModality;
+}
+export function shouldShowFocusVisible(target) {
+    if (!target)
+        return false;
+    const modality = resolveModalityForTarget(target);
+    if (modality === 'pointer')
+        return false;
+    return target.matches(':focus-visible');
+}
+export function focusWithModality(target, modality, options) {
+    initInputModality(target);
+    // The forced target/modality pair is a synchronous safety net so a focus handler that runs
+    // immediately after target.focus() can resolve the intended modality without racing async timing.
+    // If it is consumed later, currentModality still preserves the same modality as fallback.
+    forcedFocusTarget = target;
+    forcedFocusModality = modality;
+    currentModality = modality;
+    target.focus(options);
+    queueMicrotask(() => {
+        if (forcedFocusTarget !== target)
+            return;
+        forcedFocusTarget = null;
+        forcedFocusModality = null;
+    });
+}
+export function resolveCloseInteractionModality(reason, event) {
+    if (reason === 'escape-key')
+        return 'keyboard';
+    if (event instanceof KeyboardEvent)
+        return 'keyboard';
+    if (event instanceof PointerEvent || event instanceof MouseEvent)
+        return 'pointer';
+    if (reason === 'outside-press')
+        return 'pointer';
+    return 'virtual';
+}

package/dist/test-utils/focus-contract.d.ts

@@ -0,0 +1,3 @@
+export declare function expectFocusVisibleImpliesFocusWithin(root: HTMLElement | null): void;
+export declare function expectFocusVisibleImpliesFocused(node: HTMLElement | null): void;
+export declare function expectNoFalseFocusAttributes(scope?: ParentNode): void;

package/dist/test-utils/focus-contract.js

@@ -0,0 +1,26 @@
+import { expect } from 'vitest';
+export function expectFocusVisibleImpliesFocusWithin(root) {
+    expect(root).toBeTruthy();
+    const focusVisible = root?.getAttribute('data-focus-visible');
+    const focusWithin = root?.getAttribute('data-focus-within');
+    if (focusVisible === 'true') {
+        expect(focusWithin).toBe('true');
+    }
+}
+export function expectFocusVisibleImpliesFocused(node) {
+    expect(node).toBeTruthy();
+    const focusVisible = node?.getAttribute('data-focus-visible');
+    const focused = node?.getAttribute('data-focused');
+    if (focusVisible === 'true') {
+        expect(focused).toBe('true');
+    }
+}
+export function expectNoFalseFocusAttributes(scope = document) {
+    const focusAttrs = ['data-focused', 'data-focus-visible', 'data-focus-within'];
+    for (const attr of focusAttrs) {
+        const nodes = Array.from(scope.querySelectorAll(`[${attr}]`));
+        for (const node of nodes) {
+            expect(node.getAttribute(attr)).not.toBe('false');
+        }
+    }
+}

package/dist/utils/date-only.d.ts

@@ -0,0 +1,11 @@
+export type DateOnlyValue = string;
+export declare function createUtcDate(year: number, monthIndex: number, day: number): Date;
+export declare function parseDateOnlyParts(value: string): {
+    year: number;
+    month: number;
+    day: number;
+} | null;
+export declare function isValidDateOnlyValue(value: string | undefined): value is DateOnlyValue;
+export declare function parseDateOnlyValue(value: string): Date | null;
+export declare function formatDateOnlyValue(date: Date): DateOnlyValue;
+export declare function compareDateOnlyValues(left: DateOnlyValue, right: DateOnlyValue): number;

package/dist/utils/date-only.js

@@ -0,0 +1,53 @@
+const DATE_ONLY_RE = /^(\d{4})-(\d{2})-(\d{2})$/;
+export function createUtcDate(year, monthIndex, day) {
+    const date = new Date(Date.UTC(0, 0, 1));
+    date.setUTCHours(0, 0, 0, 0);
+    date.setUTCFullYear(year, monthIndex, day);
+    return date;
+}
+export function parseDateOnlyParts(value) {
+    const match = DATE_ONLY_RE.exec(value);
+    if (!match)
+        return null;
+    const year = Number(match[1]);
+    const month = Number(match[2]);
+    const day = Number(match[3]);
+    if (!Number.isInteger(year) || !Number.isInteger(month) || !Number.isInteger(day))
+        return null;
+    return { year, month, day };
+}
+export function isValidDateOnlyValue(value) {
+    if (!value)
+        return false;
+    const parts = parseDateOnlyParts(value);
+    if (!parts)
+        return false;
+    const { year, month, day } = parts;
+    if (month < 1 || month > 12 || day < 1 || day > 31)
+        return false;
+    const date = createUtcDate(year, month - 1, day);
+    return (date.getUTCFullYear() === year && date.getUTCMonth() === month - 1 && date.getUTCDate() === day);
+}
+export function parseDateOnlyValue(value) {
+    if (!isValidDateOnlyValue(value))
+        return null;
+    const parts = parseDateOnlyParts(value);
+    if (!parts)
+        return null;
+    return createUtcDate(parts.year, parts.month - 1, parts.day);
+}
+export function formatDateOnlyValue(date) {
+    const year = String(date.getUTCFullYear()).padStart(4, '0');
+    const month = String(date.getUTCMonth() + 1).padStart(2, '0');
+    const day = String(date.getUTCDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+export function compareDateOnlyValues(left, right) {
+    const leftDate = parseDateOnlyValue(left);
+    const rightDate = parseDateOnlyValue(right);
+    if (!leftDate || !rightDate)
+        return 0;
+    if (leftDate.getTime() === rightDate.getTime())
+        return 0;
+    return leftDate.getTime() < rightDate.getTime() ? -1 : 1;
+}

package/dist/utils/index.d.ts

@@ -1 +1,2 @@
 export { cn } from './cn.js';
+export * from './date-only.js';

package/dist/utils/index.js

@@ -1 +1,2 @@
 export { cn } from './cn.js';
+export * from './date-only.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@human-kit/svelte-components",
-	"version": "1.0.0-alpha.1",
+	"version": "1.0.0-alpha.3",
 	"license": "MIT",
 	"type": "module",
 	"svelte": "./dist/index.js",
@@ -16,6 +16,16 @@
 			"svelte": "./dist/combobox/index.js",
 			"default": "./dist/combobox/index.js"
 		},
+		"./calendar": {
+			"types": "./dist/calendar/index.d.ts",
+			"svelte": "./dist/calendar/index.js",
+			"default": "./dist/calendar/index.js"
+		},
+		"./datepicker": {
+			"types": "./dist/datepicker/index.d.ts",
+			"svelte": "./dist/datepicker/index.js",
+			"default": "./dist/datepicker/index.js"
+		},
 		"./dialog": {
 			"types": "./dist/dialog/index.d.ts",
 			"svelte": "./dist/dialog/index.js",
@@ -41,6 +51,11 @@
 			"svelte": "./dist/label/index.js",
 			"default": "./dist/label/index.js"
 		},
+		"./locale-provider": {
+			"types": "./dist/locale-provider/index.d.ts",
+			"svelte": "./dist/locale-provider/index.js",
+			"default": "./dist/locale-provider/index.js"
+		},
 		"./portal": {
 			"types": "./dist/portal/index.d.ts",
 			"svelte": "./dist/portal/index.js",