@human-kit/svelte-components 1.0.0-alpha.2 → 1.0.0-alpha.4

package/dist/datepicker/segment/date-picker-segment.svelte

@@ -0,0 +1,319 @@
+<script module lang="ts">
+	const monthFormatterCache: Record<string, Intl.DateTimeFormat> = Object.create(null);
+
+	function getMonthFormatter(locale: string): Intl.DateTimeFormat {
+		let formatter = monthFormatterCache[locale];
+		if (!formatter) {
+			formatter = new Intl.DateTimeFormat(locale, {
+				month: 'long',
+				timeZone: 'UTC'
+			});
+			monthFormatterCache[locale] = formatter;
+		}
+		return formatter;
+	}
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { DatePickerSegmentPart } from '../root/context';
+	import { useDatePickerContext } from '../root/context';
+	import {
+		shouldShowFocusVisible,
+		trackInteractionModality
+	} from '../../primitives/input-modality';
+
+	type DatePickerSegmentProps = Omit<
+		HTMLAttributes<HTMLSpanElement>,
+		| 'children'
+		| 'class'
+		| 'id'
+		| 'role'
+		| 'contenteditable'
+		| 'tabindex'
+		| 'aria-label'
+		| 'aria-labelledby'
+		| 'aria-valuemin'
+		| 'aria-valuemax'
+		| 'aria-valuenow'
+		| 'aria-valuetext'
+		| 'aria-readonly'
+		| 'aria-disabled'
+		| 'onfocus'
+		| 'onblur'
+		| 'onmousedown'
+		| 'onclick'
+		| 'onselectstart'
+		| 'onkeydown'
+	> & {
+		segment: DatePickerSegmentPart;
+		class?: string;
+	};
+
+	let { segment, class: className = '', ...restProps }: DatePickerSegmentProps = $props();
+	let isFocused = $state(false);
+	let segmentRef: HTMLSpanElement | null = $state(null);
+
+	const datePicker = useDatePickerContext();
+
+	const isEditableSegment = $derived(segment.type !== 'literal');
+	const isActive = $derived(
+		isEditableSegment && (datePicker.activeSegment === segment.type || isFocused)
+	);
+	const isFocusVisible = $derived(isFocused && datePicker.focusVisible);
+	const segmentId = $props.id();
+
+	const currentNumericValue = $derived.by(() => {
+		if (segment.type === 'literal') return undefined;
+		const segmentValue = datePicker.getSegmentValue(segment.type);
+		if (segmentValue.length === 0) return undefined;
+		const value = Number(segmentValue);
+		return Number.isFinite(value) ? value : undefined;
+	});
+
+	const valueMin = $derived.by(() => {
+		if (segment.type === 'literal') return undefined;
+		if (segment.type === 'month') return 1;
+		if (segment.type === 'day') return 1;
+		return 1;
+	});
+
+	const valueMax = $derived.by(() => {
+		if (segment.type === 'literal') return undefined;
+		if (segment.type === 'month') return 12;
+		if (segment.type === 'day') return 31;
+		return 9999;
+	});
+
+	const valueText = $derived.by(() => {
+		if (segment.type === 'literal') return segment.text;
+		if (segment.type === 'month' && currentNumericValue) {
+			const monthLabel = getMonthFormatter(datePicker.locale).format(
+				new Date(Date.UTC(2030, currentNumericValue - 1, 1))
+			);
+			return `${currentNumericValue} - ${monthLabel}`;
+		}
+		return segment.text;
+	});
+
+	const segmentLabel = $derived.by(() => {
+		if (segment.type === 'literal') return undefined;
+		return datePicker.getSegmentLabel(segment.type);
+	});
+
+	$effect(() => {
+		if (segment.type === 'literal') return;
+		const segmentType = segment.type;
+		datePicker.registerSegmentRef(segmentType, segmentRef);
+		return () => {
+			datePicker.registerSegmentRef(segmentType, null);
+		};
+	});
+
+	function handleFocus(event: FocusEvent) {
+		if (segment.type === 'literal') return;
+		if (datePicker.isDisabled) {
+			isFocused = false;
+			return;
+		}
+		isFocused = true;
+		datePicker.syncFocusWithin();
+		datePicker.setFocusVisible(shouldShowFocusVisible(event.currentTarget as HTMLElement));
+		datePicker.setActiveSegment(segment.type);
+	}
+
+	function handleBlur() {
+		if (segment.type === 'literal') return;
+		isFocused = false;
+		queueMicrotask(() => {
+			datePicker.syncFocusWithin();
+		});
+	}
+
+	function handleMouseDown(event: MouseEvent) {
+		if (segment.type === 'literal') return;
+		if (datePicker.isDisabled) {
+			event.preventDefault();
+			return;
+		}
+		trackInteractionModality(event, event.currentTarget as HTMLElement);
+		datePicker.setFocusVisible(false);
+		event.preventDefault();
+		const target = event.currentTarget as HTMLElement;
+		target.focus();
+		datePicker.setActiveSegment(segment.type);
+	}
+
+	function handleClick(event: MouseEvent) {
+		if (segment.type === 'literal') return;
+		if (datePicker.isDisabled) {
+			event.preventDefault();
+			return;
+		}
+		const target = event.currentTarget as HTMLElement;
+		target.focus();
+		datePicker.setActiveSegment(segment.type);
+	}
+
+	function handleSelectStart(event: Event) {
+		if (!segment.isPlaceholder) return;
+		event.preventDefault();
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (segment.type === 'literal') return;
+		if (datePicker.isDisabled) return;
+		trackInteractionModality(event, event.currentTarget as HTMLElement);
+		datePicker.setFocusVisible(true);
+
+		if (event.key === 'ArrowRight') {
+			event.preventDefault();
+			if (!datePicker.focusNextSegment(segment.type)) {
+				datePicker.triggerRef?.focus();
+			}
+			return;
+		}
+
+		if (event.key === 'ArrowLeft') {
+			event.preventDefault();
+			datePicker.focusPreviousSegment(segment.type);
+			return;
+		}
+
+		if (event.key === 'ArrowUp') {
+			event.preventDefault();
+			datePicker.adjustSegmentValue(segment.type, 1);
+			return;
+		}
+
+		if (event.key === 'ArrowDown') {
+			event.preventDefault();
+			datePicker.adjustSegmentValue(segment.type, -1);
+			return;
+		}
+
+		if (event.key === 'PageUp') {
+			event.preventDefault();
+			const step = segment.type === 'year' ? 10 : 5;
+			datePicker.adjustSegmentValue(segment.type, step);
+			return;
+		}
+
+		if (event.key === 'PageDown') {
+			event.preventDefault();
+			const step = segment.type === 'year' ? 10 : 5;
+			datePicker.adjustSegmentValue(segment.type, -step);
+			return;
+		}
+
+		if (event.key === 'Home') {
+			event.preventDefault();
+			if (segment.type === 'month') {
+				datePicker.setSegmentValue('month', '1');
+			} else if (segment.type === 'day') {
+				datePicker.setSegmentValue('day', '1');
+			} else {
+				datePicker.setSegmentValue('year', '1');
+			}
+			return;
+		}
+
+		if (event.key === 'End') {
+			event.preventDefault();
+			if (segment.type === 'month') {
+				datePicker.setSegmentValue('month', '12');
+			} else if (segment.type === 'day') {
+				datePicker.setSegmentValue('day', '31');
+			} else {
+				datePicker.setSegmentValue('year', '9999');
+			}
+			return;
+		}
+
+		if (event.key === 'Delete' || event.key === 'Backspace') {
+			event.preventDefault();
+			const currentValue = datePicker.getSegmentValue(segment.type);
+			if (currentValue.length === 0) {
+				if (event.key === 'Backspace') {
+					datePicker.focusPreviousSegment(segment.type);
+				}
+				return;
+			}
+			datePicker.setSegmentValue(segment.type, currentValue.slice(0, -1));
+			return;
+		}
+
+		if (event.key.length === 1 && /\d/.test(event.key)) {
+			event.preventDefault();
+			const didComplete = datePicker.typeSegmentDigit(segment.type, event.key);
+			if (didComplete) {
+				datePicker.focusNextSegment(segment.type);
+			}
+			return;
+		}
+
+		if (event.key === '/' || event.key === '-' || event.key === '.') {
+			event.preventDefault();
+			const currentValue = datePicker.getSegmentValue(segment.type);
+			if (currentValue.length === 0) {
+				return;
+			}
+			datePicker.focusNextSegment(segment.type);
+			return;
+		}
+
+		if (event.key === 'Tab') {
+			return;
+		}
+
+		event.preventDefault();
+	}
+</script>
+
+{#if segment.type === 'literal'}
+	<span
+		class={className}
+		{...restProps}
+		data-placeholder={segment.isPlaceholder || undefined}
+		data-type={segment.type}
+		aria-hidden="true"
+	>
+		{segment.text}
+	</span>
+{:else}
+	<span
+		bind:this={segmentRef}
+		id={segmentId}
+		class={className}
+		{...restProps}
+		data-date-picker-segment="true"
+		data-placeholder={segment.isPlaceholder || undefined}
+		data-type={segment.type}
+		data-focused={isActive ? 'true' : undefined}
+		data-focus-visible={isFocusVisible ? 'true' : undefined}
+		role="spinbutton"
+		aria-valuetext={valueText}
+		aria-valuemin={valueMin}
+		aria-valuemax={valueMax}
+		aria-valuenow={currentNumericValue}
+		aria-label={segmentLabel}
+		aria-readonly={datePicker.isReadOnly || undefined}
+		aria-disabled={datePicker.isDisabled || undefined}
+		contenteditable={!datePicker.isDisabled && !datePicker.isReadOnly}
+		spellcheck="false"
+		enterkeyhint="next"
+		inputmode="numeric"
+		tabindex={datePicker.isDisabled ? -1 : 0}
+		style={segment.isPlaceholder
+			? 'caret-color: transparent; user-select: none;'
+			: 'caret-color: transparent;'}
+		onfocus={handleFocus}
+		onblur={handleBlur}
+		onmousedown={handleMouseDown}
+		onclick={handleClick}
+		onselectstart={handleSelectStart}
+		onkeydown={handleKeydown}
+	>
+		{segment.text}
+	</span>
+{/if}

package/dist/datepicker/segment/date-picker-segment.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { DatePickerSegmentPart } from '../root/context';
+type DatePickerSegmentProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class' | 'id' | 'role' | 'contenteditable' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'aria-valuemin' | 'aria-valuemax' | 'aria-valuenow' | 'aria-valuetext' | 'aria-readonly' | 'aria-disabled' | 'onfocus' | 'onblur' | 'onmousedown' | 'onclick' | 'onselectstart' | 'onkeydown'> & {
+    segment: DatePickerSegmentPart;
+    class?: string;
+};
+declare const DatePickerSegment: import("svelte").Component<DatePickerSegmentProps, {}, "">;
+type DatePickerSegment = ReturnType<typeof DatePickerSegment>;
+export default DatePickerSegment;

package/dist/datepicker/trigger/README.md

@@ -0,0 +1,14 @@
+# DatePicker Trigger
+
+## API reference
+
+### DatePicker.Trigger
+
+Name: `DatePicker.Trigger`  
+Description: Button part that toggles `DatePicker.Popover` and anchors positioning/focus behavior.
+
+| Prop           | Type                   | Default     | Description                                            |
+| -------------- | ---------------------- | ----------- | ------------------------------------------------------ |
+| `children`     | `Snippet`              | `undefined` | Optional trigger content.                              |
+| `class`        | `string`               | `''`        | CSS class names for the trigger button.                |
+| `...restProps` | `HTMLButtonAttributes` | `-`         | Additional button attributes forwarded to the trigger. |

package/dist/datepicker/trigger/date-picker-trigger.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { useDatePickerContext } from '../root/context';
+	import {
+		shouldShowFocusVisible,
+		trackInteractionModality
+	} from '../../primitives/input-modality';
+
+	type DatePickerTriggerProps = Omit<
+		HTMLButtonAttributes,
+		'type' | 'children' | 'class' | 'onclick' | 'aria-haspopup' | 'aria-expanded'
+	> & {
+		children?: Snippet;
+		class?: string;
+	};
+
+	let { children, class: className = '', ...restProps }: DatePickerTriggerProps = $props();
+
+	let buttonRef: HTMLButtonElement | null = $state(null);
+	let isFocused = $state(false);
+	const datePicker = useDatePickerContext();
+
+	$effect(() => {
+		if (datePicker.isReadOnly) {
+			datePicker.setTriggerRef(null);
+			return;
+		}
+		if (buttonRef) {
+			datePicker.setTriggerRef(buttonRef);
+		}
+	});
+
+	function handleFocus() {
+		if (datePicker.isDisabled) {
+			isFocused = false;
+			return;
+		}
+		if (buttonRef) {
+			datePicker.setTriggerRef(buttonRef);
+			datePicker.setActiveSegment(null);
+			isFocused = true;
+			datePicker.syncFocusWithin();
+			datePicker.setFocusVisible(shouldShowFocusVisible(buttonRef));
+		}
+	}
+
+	function handleBlur() {
+		isFocused = false;
+		queueMicrotask(() => {
+			datePicker.syncFocusWithin();
+		});
+	}
+
+	function handleMouseDown(event: MouseEvent) {
+		if (datePicker.isDisabled || datePicker.isReadOnly) return;
+		trackInteractionModality(event, buttonRef);
+		datePicker.setFocusVisible(false);
+		event.preventDefault();
+	}
+
+	function handleClick(event: MouseEvent) {
+		if (datePicker.isDisabled || datePicker.isReadOnly) return;
+		if (event.detail > 0) {
+			trackInteractionModality(event, buttonRef);
+		}
+		if (buttonRef) {
+			datePicker.setTriggerRef(buttonRef);
+		}
+		datePicker.togglePopover('trigger-press', event);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (datePicker.isDisabled) return;
+		trackInteractionModality(event, buttonRef);
+		if (event.key === 'Enter' || event.key === ' ') {
+			datePicker.setFocusVisible(true);
+			return;
+		}
+		if (event.key !== 'ArrowLeft') return;
+		datePicker.setFocusVisible(true);
+
+		event.preventDefault();
+		datePicker.focusLastSegment();
+	}
+</script>
+
+{#if !datePicker.isReadOnly}
+	<button
+		bind:this={buttonRef}
+		type="button"
+		disabled={datePicker.isDisabled}
+		class={className}
+		aria-haspopup="dialog"
+		aria-expanded={datePicker.open}
+		data-disabled={datePicker.isDisabled || undefined}
+		data-focused={isFocused || undefined}
+		data-focus-visible={isFocused && datePicker.focusVisible ? 'true' : undefined}
+		onmousedown={handleMouseDown}
+		onfocus={handleFocus}
+		onblur={handleBlur}
+		onkeydown={handleKeydown}
+		onclick={handleClick}
+		{...restProps}
+	>
+		{#if children}
+			{@render children()}
+		{/if}
+	</button>
+{/if}

package/dist/datepicker/trigger/date-picker-trigger.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type DatePickerTriggerProps = Omit<HTMLButtonAttributes, 'type' | 'children' | 'class' | 'onclick' | 'aria-haspopup' | 'aria-expanded'> & {
+    children?: Snippet;
+    class?: string;
+};
+declare const DatePickerTrigger: import("svelte").Component<DatePickerTriggerProps, {}, "">;
+type DatePickerTrigger = ReturnType<typeof DatePickerTrigger>;
+export default DatePickerTrigger;

package/dist/dialog/content/dialog-content.svelte

@@ -45,16 +45,16 @@
 	let dialogId: symbol | null = null;
 	let dialogLevel = $state(0);
 
-	function close() {
-		dialogCtx.close();
+	function close(reason: 'escape-key' | 'outside-press' | 'imperative-action', event?: Event) {
+		dialogCtx.close(reason, event);
 	}
 
 	/**
 	 * Wrapper for close that only executes if this is the topmost dialog.
 	 */
-	function closeIfTopmost() {
+	function closeIfTopmost(event: MouseEvent) {
 		if (dialogId && isTopmostDialog(dialogId)) {
-			close();
+			close('outside-press', event);
 		}
 	}
 
@@ -63,7 +63,7 @@
 			// Only handle if this is the topmost dialog
 			if (dialogId && isTopmostDialog(dialogId)) {
 				event.preventDefault();
-				close();
+				close('escape-key', event);
 			}
 		}
 	}
@@ -71,7 +71,7 @@
 	onMount(() => {
 		if (!browser) return;
 		// Register this dialog in the stack
-		const { id, level } = pushDialog(close);
+		const { id, level } = pushDialog(() => close('imperative-action'));
 		dialogId = id;
 		dialogLevel = level;
 		// Share level with overlay via context

package/dist/dialog/root/context.d.ts

@@ -1,3 +1,4 @@
+export type DialogCloseReason = 'escape-key' | 'outside-press' | 'imperative-action' | 'none';
 /**
  * Context shared between Dialog components (Root, Trigger, Content).
  */
@@ -13,7 +14,7 @@ export type DialogContext = {
     /** Open the dialog */
     open: () => void;
     /** Close the dialog and return focus to trigger */
-    close: () => void;
+    close: (reason?: DialogCloseReason, event?: Event) => void;
     /** Called when dialog open state changes */
     onOpenChange: (open: boolean) => void;
     /** Stack level for z-index calculation (set by Content) */

package/dist/dialog/root/dialog-root.svelte

@@ -2,6 +2,11 @@
 	import type { Snippet } from 'svelte';
 	import { setDialogContext, type DialogContext } from './context';
 	import type { DialogStateHelpers } from './types';
+	import {
+		focusWithModality,
+		resolveCloseInteractionModality
+	} from '../../primitives/input-modality';
+	import type { DialogCloseReason } from './context';
 
 	/**
 	 * Dialog.Root - State management wrapper for Dialog components.
@@ -56,9 +61,11 @@
 		setOpen(true);
 	}
 
-	function closeDialog() {
+	function closeDialog(reason: DialogCloseReason = 'imperative-action', event?: Event) {
 		setOpen(false);
-		triggerRef?.focus();
+		if (triggerRef) {
+			focusWithModality(triggerRef, resolveCloseInteractionModality(reason, event));
+		}
 	}
 
 	function setTriggerRef(el: HTMLElement | null) {

package/dist/index.d.ts

@@ -1,5 +1,8 @@
 export { ComboBox } from './combobox/index.ts';
 export { Calendar } from './calendar/index.ts';
+export { Clock } from './clock/index.ts';
+export { DatePicker } from './datepicker/index.ts';
+export { TimePicker } from './timepicker/index.ts';
 export { Dialog } from './dialog/index.ts';
 export { ListBox } from './listbox/index.ts';
 export { Popover } from './popover/index.ts';
@@ -10,8 +13,13 @@ export { Portal } from './portal/index.ts';
 export * from './locale-provider/index.ts';
 export * from './combobox/index.ts';
 export * from './calendar/index.ts';
+export * from './clock/index.ts';
+export * from './datepicker/index.ts';
+export * from './timepicker/index.ts';
 export * from './dialog/index.ts';
 export * from './listbox/index.ts';
 export * from './popover/index.ts';
 export * from './primitives/index.ts';
 export { cn } from './utils/index.ts';
+export * from './utils/index.ts';
+export * from './utils/index.ts';

package/dist/index.js

@@ -2,6 +2,9 @@
 // Components (namespace exports)
 export { ComboBox } from './combobox/index.ts';
 export { Calendar } from './calendar/index.ts';
+export { Clock } from './clock/index.ts';
+export { DatePicker } from './datepicker/index.ts';
+export { TimePicker } from './timepicker/index.ts';
 export { Dialog } from './dialog/index.ts';
 export { ListBox } from './listbox/index.ts';
 export { Popover } from './popover/index.ts';
@@ -14,6 +17,9 @@ export * from './locale-provider/index.ts';
 // Re-export named exports from components
 export * from './combobox/index.ts';
 export * from './calendar/index.ts';
+export * from './clock/index.ts';
+export * from './datepicker/index.ts';
+export * from './timepicker/index.ts';
 export * from './dialog/index.ts';
 export * from './listbox/index.ts';
 export * from './popover/index.ts';
@@ -21,3 +27,5 @@ export * from './popover/index.ts';
 export * from './primitives/index.ts';
 // Utilities
 export { cn } from './utils/index.ts';
+export * from './utils/index.ts';
+export * from './utils/index.ts';

package/dist/listbox/root/listbox.svelte

@@ -1,6 +1,10 @@
 <script lang="ts" generics="T extends object = object">
 	import type { Snippet } from 'svelte';
 	import { createListBoxContext, type ListBoxContext } from './context';
+	import {
+		shouldShowFocusVisible,
+		trackInteractionModality
+	} from '../../primitives/input-modality';
 
 	/**
 	 * Props for the ListBox component.
@@ -114,6 +118,40 @@
 
 	const itemsArray = $derived(items ? Array.from(items) : []);
 	const hasItems = $derived(itemsArray.length > 0 || itemCount > 0);
+
+	let focusWithin = $state(false);
+	let focusVisible = $state(false);
+
+	function syncFocusWithin() {
+		focusWithin =
+			!!listboxElement &&
+			!!document.activeElement &&
+			listboxElement.contains(document.activeElement);
+		if (!focusWithin) {
+			focusVisible = false;
+		}
+	}
+
+	function handleFocusIn(event: FocusEvent) {
+		focusWithin = true;
+		focusVisible = shouldShowFocusVisible(event.target as HTMLElement | null);
+	}
+
+	function handleFocusOut() {
+		queueMicrotask(syncFocusWithin);
+	}
+
+	function handleMouseDown(event: MouseEvent) {
+		trackInteractionModality(event, event.target as HTMLElement | null);
+		focusVisible = false;
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		trackInteractionModality(event, event.target as HTMLElement | null);
+		if (focusWithin) {
+			focusVisible = true;
+		}
+	}
 </script>
 
 <div
@@ -124,7 +162,13 @@
 	aria-label={ariaLabel}
 	class={className}
 	tabindex="0"
+	data-focus-within={focusWithin || undefined}
+	data-focus-visible={focusVisible || undefined}
 	use:keyboardAction
+	onfocusin={handleFocusIn}
+	onfocusout={handleFocusOut}
+	onmousedown={handleMouseDown}
+	onkeydown={handleKeyDown}
 >
 	{#if items && children}
 		{#each itemsArray as item (item)}

package/dist/popover/README.md

@@ -12,6 +12,16 @@
 - Use `Popover.Content` inside `Popover.Root`, or in standalone mode with `open`, `triggerRef`, and `onOpenChange`.
 - Configure `isNonModal`, `shouldCloseOnInteractOutside`, and `shouldCloseOnBlur` to match your interaction model.
 
+## onOpenChange details
+
+`Popover.Root` and standalone `Popover.Content` use:
+
+- `onOpenChange(open, details)`
+- `details.reason`: `trigger-press | imperative-action | none | escape-key | outside-press | focus-out | close-press`
+- `details.event?`: native event that triggered the change when available
+- `details.cancel()`: prevents the open-state transition
+- `details.isCanceled`: reflects cancellation state inside the callback
+
 ## Anatomy
 
 Import the component and compose its parts: