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

package/dist/timepicker/root/time-picker-test.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import TimePicker from '../index';
+
+	type Props = {
+		defaultValue?: string;
+		defaultOpen?: boolean;
+		isDisabled?: boolean;
+		isReadOnly?: boolean;
+		hourCycle?: 12 | 24;
+		granularity?: 'hour' | 'minute' | 'second';
+		isRequired?: boolean;
+		minValue?: string;
+		maxValue?: string;
+		popoverAriaLabel?: string;
+	};
+
+	let {
+		defaultValue = '14:30',
+		defaultOpen = false,
+		isDisabled = false,
+		isReadOnly = false,
+		hourCycle = 24,
+		granularity = 'minute',
+		isRequired = false,
+		minValue,
+		maxValue,
+		popoverAriaLabel = 'Time picker'
+	}: Props = $props();
+
+	let selectedValue = $state<string | null>('');
+	let openState = $state((() => defaultOpen)());
+	let openReason = $state('');
+</script>
+
+<TimePicker.Root
+	{defaultValue}
+	{defaultOpen}
+	{isDisabled}
+	{isReadOnly}
+	{hourCycle}
+	{granularity}
+	{isRequired}
+	{minValue}
+	{maxValue}
+	onChange={(nextValue) => {
+		selectedValue = nextValue;
+	}}
+	onOpenChange={(nextOpen, details) => {
+		openState = nextOpen;
+		openReason = details.reason;
+	}}
+>
+	<TimePicker.Input class="time-picker-input" aria-label="Time input">
+		{#snippet children(segment)}
+			<TimePicker.Segment class="time-picker-segment" {segment} />
+		{/snippet}
+	</TimePicker.Input>
+	<TimePicker.Trigger class="time-picker-trigger">Open time picker</TimePicker.Trigger>
+
+	<TimePicker.Popover class="time-picker-popover" aria-label={popoverAriaLabel}>
+		<TimePicker.Clock class="time-picker-columns">
+			{#snippet column(col)}
+				<TimePicker.WheelColumn type={col.type} class="time-picker-column h-44" />
+			{/snippet}
+		</TimePicker.Clock>
+	</TimePicker.Popover>
+</TimePicker.Root>
+
+<p data-testid="time-picker-value">{selectedValue}</p>
+<p data-testid="time-picker-open">{String(openState)}</p>
+<p data-testid="time-picker-open-reason">{openReason}</p>
+<button type="button" data-testid="outside-button">Outside</button>

package/dist/timepicker/root/time-picker-test.svelte.d.ts

@@ -0,0 +1,15 @@
+type Props = {
+    defaultValue?: string;
+    defaultOpen?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    hourCycle?: 12 | 24;
+    granularity?: 'hour' | 'minute' | 'second';
+    isRequired?: boolean;
+    minValue?: string;
+    maxValue?: string;
+    popoverAriaLabel?: string;
+};
+declare const TimePickerTest: import("svelte").Component<Props, {}, "">;
+type TimePickerTest = ReturnType<typeof TimePickerTest>;
+export default TimePickerTest;

package/dist/timepicker/root/time-utils.d.ts

@@ -0,0 +1 @@
+export { type TimePickerGranularity, type TimePickerHourCycle, type TimePickerTimeValue, type TimePickerSegmentType, type TimePickerEditableSegmentType, type TimePickerSegmentPart, type TimePickerDraft, type TimeParts, createEmptyTimePickerDraft, isValidTimePickerValue, parseTimePickerValue, formatTimePickerValue, toDraftFromTimeValue, getRequiredSegments, normalizeSegmentNumberInput, isSegmentValueEmpty, buildTimePartsFromDraft, compareTimeParts, isTimeOutOfRange, clampToStep, adjustSegmentWithStep, buildTimePickerSegments, getEditableSegmentOrder, getSegmentLabel } from '../../clock/root/time-utils';

package/dist/timepicker/root/time-utils.js

@@ -0,0 +1,3 @@
+// Canonical source lives in clock/root/time-utils.ts.
+// This barrel re-exports everything so existing TimePicker imports keep working.
+export { createEmptyTimePickerDraft, isValidTimePickerValue, parseTimePickerValue, formatTimePickerValue, toDraftFromTimeValue, getRequiredSegments, normalizeSegmentNumberInput, isSegmentValueEmpty, buildTimePartsFromDraft, compareTimeParts, isTimeOutOfRange, clampToStep, adjustSegmentWithStep, buildTimePickerSegments, getEditableSegmentOrder, getSegmentLabel } from '../../clock/root/time-utils';

package/dist/timepicker/segment/README.md

@@ -0,0 +1,14 @@
+# TimePicker Segment
+
+## API reference
+
+### TimePicker.Segment
+
+Name: `TimePicker.Segment`  
+Description: Editable (or literal) segment renderer used inside `TimePicker.Input`.
+
+| Prop           | Type                              | Default    | Description                                             |
+| -------------- | --------------------------------- | ---------- | ------------------------------------------------------- |
+| `segment`      | `TimePickerSegmentPart`           | `required` | Segment metadata and rendered text payload.             |
+| `class`        | `string`                          | `''`       | CSS class names for the segment span element.           |
+| `...restProps` | `HTMLAttributes<HTMLSpanElement>` | `-`        | Additional attributes forwarded to the segment element. |

package/dist/timepicker/segment/time-picker-segment.svelte

@@ -0,0 +1,365 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { TimePickerSegmentPart } from '../root/context';
+	import { useTimePickerContext } from '../root/context';
+	import {
+		shouldShowFocusVisible,
+		trackInteractionModality
+	} from '../../primitives/input-modality';
+
+	type TimePickerSegmentProps = Omit<
+		HTMLAttributes<HTMLSpanElement>,
+		| 'children'
+		| 'class'
+		| 'id'
+		| 'role'
+		| 'contenteditable'
+		| 'tabindex'
+		| 'aria-label'
+		| 'aria-valuemin'
+		| 'aria-valuemax'
+		| 'aria-valuenow'
+		| 'aria-valuetext'
+		| 'aria-readonly'
+		| 'aria-disabled'
+		| 'onfocus'
+		| 'onblur'
+		| 'onmousedown'
+		| 'onclick'
+		| 'onselectstart'
+		| 'onkeydown'
+		| 'onbeforeinput'
+		| 'oninput'
+		| 'onpaste'
+		| 'oncompositionend'
+	> & {
+		segment: TimePickerSegmentPart;
+		class?: string;
+	};
+
+	let { segment, class: className = '', ...restProps }: TimePickerSegmentProps = $props();
+	let isFocused = $state(false);
+	let segmentRef: HTMLSpanElement | null = $state(null);
+	let domResetVersion = $state(0);
+
+	const timePicker = useTimePickerContext();
+	const segmentId = $props.id();
+
+	const isEditableSegment = $derived(segment.type !== 'literal');
+	const isActive = $derived(
+		isEditableSegment && (timePicker.activeSegment === segment.type || isFocused)
+	);
+	const isFocusVisible = $derived(isFocused && timePicker.focusVisible);
+
+	const valueMin = $derived.by(() => {
+		if (segment.type === 'literal') return undefined;
+		if (segment.type === 'hour') return timePicker.hourCycle === 12 ? 1 : 0;
+		if (segment.type === 'minute' || segment.type === 'second') return 0;
+		if (segment.type === 'dayPeriod') return 0;
+		return undefined;
+	});
+
+	const valueMax = $derived.by(() => {
+		if (segment.type === 'literal') return undefined;
+		if (segment.type === 'hour') return timePicker.hourCycle === 12 ? 12 : 23;
+		if (segment.type === 'minute' || segment.type === 'second') return 59;
+		if (segment.type === 'dayPeriod') return 1;
+		return undefined;
+	});
+
+	const valueNow = $derived.by(() => {
+		if (segment.type === 'literal') return undefined;
+		if (segment.type === 'dayPeriod') {
+			const value = (timePicker.getSegmentValue('dayPeriod') || '').toUpperCase();
+			if (!value) return undefined;
+			return value === 'PM' ? 1 : 0;
+		}
+		const value = Number(timePicker.getSegmentValue(segment.type));
+		return Number.isFinite(value) ? value : undefined;
+	});
+
+	const valueText = $derived.by(() => {
+		if (segment.type === 'literal') return segment.text;
+		return timePicker.getSegmentValue(segment.type) || segment.text;
+	});
+
+	const segmentLabel = $derived.by(() => {
+		if (segment.type === 'literal') return undefined;
+		return timePicker.getSegmentLabel(segment.type);
+	});
+
+	$effect(() => {
+		if (segment.type === 'literal') return;
+		const segmentType = segment.type;
+		timePicker.registerSegmentRef(segmentType, segmentRef);
+		return () => {
+			timePicker.registerSegmentRef(segmentType, null);
+		};
+	});
+
+	function handleFocus(event: FocusEvent) {
+		if (segment.type === 'literal') return;
+		if (timePicker.isDisabled) {
+			isFocused = false;
+			return;
+		}
+		isFocused = true;
+		timePicker.syncFocusWithin();
+		timePicker.setFocusVisible(shouldShowFocusVisible(event.currentTarget as HTMLElement));
+		timePicker.setActiveSegment(segment.type);
+	}
+
+	function handleBlur() {
+		if (segment.type === 'literal') return;
+		isFocused = false;
+		queueMicrotask(() => {
+			timePicker.syncFocusWithin();
+		});
+	}
+
+	function handleMouseDown(event: MouseEvent) {
+		if (segment.type === 'literal') return;
+		if (timePicker.isDisabled) {
+			event.preventDefault();
+			return;
+		}
+		trackInteractionModality(event, event.currentTarget as HTMLElement);
+		timePicker.setFocusVisible(false);
+		event.preventDefault();
+		(event.currentTarget as HTMLElement).focus();
+		timePicker.setActiveSegment(segment.type);
+	}
+
+	function handleClick(event: MouseEvent) {
+		if (segment.type === 'literal') return;
+		if (timePicker.isDisabled) {
+			event.preventDefault();
+			return;
+		}
+		(event.currentTarget as HTMLElement).focus();
+		timePicker.setActiveSegment(segment.type);
+	}
+
+	function handleSelectStart(event: Event) {
+		if (!segment.isPlaceholder) return;
+		event.preventDefault();
+	}
+
+	function requestDomReset() {
+		domResetVersion += 1;
+	}
+
+	function shouldResetDomForDrift(target: EventTarget | null | undefined): boolean {
+		if (segment.type === 'literal') return false;
+		const element = target instanceof HTMLElement ? target : segmentRef;
+		if (!element) return false;
+		return (element.textContent ?? '') !== segment.text;
+	}
+
+	function handleBeforeInput(event: InputEvent) {
+		if (segment.type === 'literal') return;
+		if (timePicker.isDisabled || timePicker.isReadOnly) {
+			event.preventDefault();
+			return;
+		}
+
+		// Segment edits are keyboard-driven through `onkeydown` and root state.
+		// Block direct DOM mutations from paste/drop/IME/beforeinput paths.
+		event.preventDefault();
+	}
+
+	function handleInput(event: Event) {
+		if (!shouldResetDomForDrift(event.currentTarget)) return;
+		requestDomReset();
+	}
+
+	function handlePaste(event: ClipboardEvent) {
+		if (segment.type === 'literal') return;
+		event.preventDefault();
+		if (!shouldResetDomForDrift(event.currentTarget)) return;
+		requestDomReset();
+	}
+
+	function handleCompositionEnd(event: CompositionEvent) {
+		if (!shouldResetDomForDrift(event.currentTarget)) return;
+		requestDomReset();
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (segment.type === 'literal') return;
+		if (timePicker.isDisabled) return;
+		trackInteractionModality(event, event.currentTarget as HTMLElement);
+		timePicker.setFocusVisible(true);
+
+		if (segment.type === 'dayPeriod') {
+			if (event.key.toLowerCase() === 'a') {
+				event.preventDefault();
+				timePicker.setSegmentValue('dayPeriod', 'AM');
+				return;
+			}
+			if (event.key.toLowerCase() === 'p') {
+				event.preventDefault();
+				timePicker.setSegmentValue('dayPeriod', 'PM');
+				return;
+			}
+		}
+
+		if (event.key === 'ArrowRight') {
+			event.preventDefault();
+			if (!timePicker.focusNextSegment(segment.type)) {
+				timePicker.triggerRef?.focus();
+			}
+			return;
+		}
+
+		if (event.key === 'ArrowLeft') {
+			event.preventDefault();
+			timePicker.focusPreviousSegment(segment.type);
+			return;
+		}
+
+		if (event.key === 'ArrowUp') {
+			event.preventDefault();
+			timePicker.adjustSegmentValue(segment.type, 1);
+			return;
+		}
+
+		if (event.key === 'ArrowDown') {
+			event.preventDefault();
+			timePicker.adjustSegmentValue(segment.type, -1);
+			return;
+		}
+
+		if (event.key === 'PageUp') {
+			event.preventDefault();
+			const step = segment.type === 'hour' ? 1 : 5;
+			timePicker.adjustSegmentValue(segment.type, step);
+			return;
+		}
+
+		if (event.key === 'PageDown') {
+			event.preventDefault();
+			const step = segment.type === 'hour' ? 1 : 5;
+			timePicker.adjustSegmentValue(segment.type, -step);
+			return;
+		}
+
+		if (event.key === 'Home') {
+			event.preventDefault();
+			if (segment.type === 'hour') {
+				timePicker.setSegmentValue('hour', timePicker.hourCycle === 12 ? '1' : '0');
+			} else if (segment.type === 'minute') {
+				timePicker.setSegmentValue('minute', '0');
+			} else if (segment.type === 'second') {
+				timePicker.setSegmentValue('second', '0');
+			} else {
+				timePicker.setSegmentValue('dayPeriod', 'AM');
+			}
+			return;
+		}
+
+		if (event.key === 'End') {
+			event.preventDefault();
+			if (segment.type === 'hour') {
+				timePicker.setSegmentValue('hour', timePicker.hourCycle === 12 ? '12' : '23');
+			} else if (segment.type === 'minute') {
+				timePicker.setSegmentValue('minute', '59');
+			} else if (segment.type === 'second') {
+				timePicker.setSegmentValue('second', '59');
+			} else {
+				timePicker.setSegmentValue('dayPeriod', 'PM');
+			}
+			return;
+		}
+
+		if (event.key === 'Delete' || event.key === 'Backspace') {
+			event.preventDefault();
+			const currentValue = timePicker.getSegmentValue(segment.type);
+			if (currentValue.length === 0) {
+				if (event.key === 'Backspace') {
+					timePicker.focusPreviousSegment(segment.type);
+				}
+				return;
+			}
+			timePicker.setSegmentValue(segment.type, currentValue.slice(0, -1));
+			return;
+		}
+
+		if (event.key.length === 1 && /\d/.test(event.key)) {
+			event.preventDefault();
+			const didComplete = timePicker.typeSegmentDigit(segment.type, event.key);
+			if (didComplete) {
+				timePicker.focusNextSegment(segment.type);
+			}
+			return;
+		}
+
+		if (event.key === '/' || event.key === '-' || event.key === '.' || event.key === ':') {
+			event.preventDefault();
+			const currentValue = timePicker.getSegmentValue(segment.type);
+			if (currentValue.length === 0) return;
+			timePicker.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}
+	{#key `${segmentId}-${domResetVersion}`}
+		<span
+			bind:this={segmentRef}
+			id={segmentId}
+			class={className}
+			{...restProps}
+			data-time-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={valueNow}
+			aria-label={segmentLabel}
+			aria-readonly={timePicker.isReadOnly || undefined}
+			aria-disabled={timePicker.isDisabled || undefined}
+			contenteditable={!timePicker.isDisabled && !timePicker.isReadOnly}
+			spellcheck="false"
+			enterkeyhint="next"
+			inputmode={segment.type === 'dayPeriod' ? 'text' : 'numeric'}
+			tabindex={timePicker.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}
+			onbeforeinput={handleBeforeInput}
+			oninput={handleInput}
+			onpaste={handlePaste}
+			oncompositionend={handleCompositionEnd}
+		>
+			{segment.text}
+		</span>
+	{/key}
+{/if}

package/dist/timepicker/segment/time-picker-segment.svelte.d.ts

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

package/dist/timepicker/trigger/README.md

@@ -0,0 +1,14 @@
+# TimePicker Trigger
+
+## API reference
+
+### TimePicker.Trigger
+
+Name: `TimePicker.Trigger`  
+Description: Button part that toggles `TimePicker.Popover` and synchronizes focus modality with root state.
+
+| 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/timepicker/trigger/time-picker-trigger-forwarding-test.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import TimePicker from '../index';
+
+	let mouseDownCount = $state(0);
+	let clickCount = $state(0);
+	let keyCount = $state(0);
+</script>
+
+<TimePicker.Root defaultValue="14:30">
+	<TimePicker.Input aria-label="Time input">
+		{#snippet children(segment)}
+			<TimePicker.Segment {segment} />
+		{/snippet}
+	</TimePicker.Input>
+	<TimePicker.Trigger
+		onmousedown={() => {
+			mouseDownCount += 1;
+		}}
+		onclick={() => {
+			clickCount += 1;
+		}}
+		onkeydown={() => {
+			keyCount += 1;
+		}}
+	>
+		Open time picker
+	</TimePicker.Trigger>
+	<TimePicker.Popover>
+		<TimePicker.Clock />
+	</TimePicker.Popover>
+</TimePicker.Root>
+
+<p data-testid="trigger-mousedown-count">{mouseDownCount}</p>
+<p data-testid="trigger-click-count">{clickCount}</p>
+<p data-testid="trigger-key-count">{keyCount}</p>

package/dist/timepicker/trigger/time-picker-trigger-forwarding-test.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TimePickerTriggerForwardingTest: import("svelte").Component<Record<string, never>, {}, "">;
+type TimePickerTriggerForwardingTest = ReturnType<typeof TimePickerTriggerForwardingTest>;
+export default TimePickerTriggerForwardingTest;

package/dist/timepicker/trigger/time-picker-trigger.svelte

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

package/dist/timepicker/trigger/time-picker-trigger.svelte.d.ts

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

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;