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

package/dist/datepicker/input/README.md

@@ -0,0 +1,15 @@
+# DatePicker Input
+
+## API reference
+
+### DatePicker.Input
+
+Name: `DatePicker.Input`  
+Description: Segmented date input group tied to `DatePicker.Root` value and focus management.
+
+| Prop           | Type                               | Default     | Description                                           |
+| -------------- | ---------------------------------- | ----------- | ----------------------------------------------------- |
+| `children`     | `Snippet<[DatePickerSegmentPart]>` | `undefined` | Optional custom renderer for each date segment part.  |
+| `class`        | `string`                           | `''`        | CSS class names for the input group element.          |
+| `aria-label`   | `string`                           | `undefined` | Accessible label for the segmented input group.       |
+| `...restProps` | `HTMLAttributes<HTMLDivElement>`   | `-`         | Additional attributes forwarded to the group element. |

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

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { useDatePickerContext, type DatePickerSegmentPart } from '../root/context';
+	import DatePickerSegment from '../segment/date-picker-segment.svelte';
+	import {
+		shouldShowFocusVisible,
+		trackInteractionModality
+	} from '../../primitives/input-modality';
+
+	type DatePickerInputProps = Omit<
+		HTMLAttributes<HTMLDivElement>,
+		| 'children'
+		| 'class'
+		| 'id'
+		| 'role'
+		| 'tabindex'
+		| 'onmousedown'
+		| 'onfocus'
+		| 'onblur'
+		| 'onkeydown'
+	> & {
+		children?: Snippet<[DatePickerSegmentPart]>;
+		class?: string;
+		'aria-label'?: string;
+	};
+
+	let {
+		children,
+		class: className = '',
+		'aria-label': ariaLabel,
+		...restProps
+	}: DatePickerInputProps = $props();
+
+	const datePicker = useDatePickerContext();
+	const segments = $derived(datePicker.getSegments());
+	const inputId = $derived(`${datePicker.id}-input`);
+
+	function handleMouseDown(event: MouseEvent) {
+		if (datePicker.isDisabled) return;
+		trackInteractionModality(event, event.currentTarget as HTMLElement);
+		datePicker.setFocusVisible(false);
+
+		const target = event.target as HTMLElement | null;
+		if (target?.closest('[data-date-picker-segment="true"]')) {
+			return;
+		}
+
+		event.preventDefault();
+		datePicker.focusNextPlaceholderOrLastSegment();
+	}
+
+	function handleFocus(event: FocusEvent) {
+		if (datePicker.isDisabled) return;
+		datePicker.syncFocusWithin();
+		datePicker.setFocusVisible(shouldShowFocusVisible(event.target as HTMLElement | null));
+		const target = event.target as HTMLElement | null;
+		if (target?.closest('[data-date-picker-segment="true"]')) {
+			return;
+		}
+		datePicker.focusNextPlaceholderOrLastSegment();
+	}
+
+	function handleBlur() {
+		queueMicrotask(() => {
+			datePicker.syncFocusWithin();
+		});
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (datePicker.isDisabled) return;
+		if (event.key !== 'Enter' && event.key !== ' ') return;
+		trackInteractionModality(event, event.currentTarget as HTMLElement);
+		datePicker.setFocusVisible(true);
+		event.preventDefault();
+		datePicker.focusNextPlaceholderOrLastSegment();
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- svelte-ignore a11y_role_supports_aria_props -->
+<div
+	id={inputId}
+	class={className}
+	{...restProps}
+	role="group"
+	aria-label={ariaLabel}
+	aria-invalid={datePicker.isInvalidDraft || undefined}
+	tabindex={datePicker.isDisabled ? -1 : 0}
+	data-disabled={datePicker.isDisabled || undefined}
+	data-readonly={datePicker.isReadOnly || undefined}
+	data-open={datePicker.open || undefined}
+	data-focus-visible={datePicker.focusVisible || undefined}
+	data-focus-within={datePicker.focusWithin || undefined}
+	data-invalid={datePicker.isInvalidDraft || undefined}
+	onmousedown={handleMouseDown}
+	onfocus={handleFocus}
+	onblur={handleBlur}
+	onkeydown={handleKeydown}
+>
+	{#each segments as segment, index (index)}
+		{#if children}
+			{@render children(segment)}
+		{:else}
+			<DatePickerSegment {segment} />
+		{/if}
+	{/each}
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type DatePickerSegmentPart } from '../root/context';
+type DatePickerInputProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'id' | 'role' | 'tabindex' | 'onmousedown' | 'onfocus' | 'onblur' | 'onkeydown'> & {
+    children?: Snippet<[DatePickerSegmentPart]>;
+    class?: string;
+    'aria-label'?: string;
+};
+declare const DatePickerInput: import("svelte").Component<DatePickerInputProps, {}, "">;
+type DatePickerInput = ReturnType<typeof DatePickerInput>;
+export default DatePickerInput;

package/dist/datepicker/internal/strict-props.d.ts

@@ -0,0 +1,2 @@
+export declare function sanitizeDatePickerProps(componentName: string, props: Record<string, unknown>, forbiddenProps: string[]): Record<string, unknown>;
+export declare function composeEventHandlers<TEvent extends Event>(internalHandler: ((event: TEvent) => void) | undefined, externalHandler: ((event: TEvent) => void) | undefined): (event: TEvent) => void;

package/dist/datepicker/internal/strict-props.js

@@ -0,0 +1,28 @@
+const warnedMessages = new Set();
+function warnOnce(message) {
+    if (!import.meta.env.DEV)
+        return;
+    if (warnedMessages.has(message))
+        return;
+    warnedMessages.add(message);
+    console.warn(message);
+}
+export function sanitizeDatePickerProps(componentName, props, forbiddenProps) {
+    if (props === null || typeof props !== 'object')
+        return {};
+    const sanitized = {};
+    for (const [key, value] of Object.entries(props)) {
+        if (forbiddenProps.includes(key)) {
+            warnOnce(`[DatePicker.${componentName}]: Prop "${key}" is controlled by DatePicker.Root and has been ignored.`);
+            continue;
+        }
+        sanitized[key] = value;
+    }
+    return sanitized;
+}
+export function composeEventHandlers(internalHandler, externalHandler) {
+    return (event) => {
+        internalHandler?.(event);
+        externalHandler?.(event);
+    };
+}

package/dist/datepicker/popover/README.md

@@ -0,0 +1,20 @@
+# DatePicker Popover
+
+## API reference
+
+### DatePicker.Popover
+
+Name: `DatePicker.Popover`  
+Description: Popover content wrapper for calendar and optional time controls, synchronized with `DatePicker.Root` open state.
+
+| Prop           | Type                                     | Default      | Description                                                      |
+| -------------- | ---------------------------------------- | ------------ | ---------------------------------------------------------------- |
+| `aria-label`   | `string`                                 | `'Calendar'` | Accessible name for the popover content.                         |
+| `initialFocus` | `() => HTMLElement \| null \| undefined` | `active day` | Optional initial focus resolver for popover open.                |
+| `class`        | `string`                                 | `''`         | CSS class names for popover content.                             |
+| `...restProps` | `ComponentProps<typeof Popover.Content>` | `-`          | Forwarded popover content props, excluding root-controlled keys. |
+
+### Notes
+
+Name: Root-controlled props  
+Description: `open`, `triggerRef`, `onOpenChange`, and `id` are controlled by `DatePicker.Root` and ignored when passed to this part.

package/dist/datepicker/popover/date-picker-popover-handler-test.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import DatePicker from '../index';
+
+	let pointerDownCalls = $state(0);
+	let keydownCaptureCalls = $state(0);
+	let selectedValue = $state<string | null>('');
+</script>
+
+<DatePicker.Root
+	defaultValue="2026-02-10"
+	onChange={(nextValue) => {
+		selectedValue = nextValue;
+	}}
+>
+	<DatePicker.Input class="date-picker-input" aria-label="Date input">
+		{#snippet children(segment)}
+			<DatePicker.Segment class="date-picker-segment" {segment} />
+		{/snippet}
+	</DatePicker.Input>
+	<DatePicker.Trigger class="date-picker-trigger">Open calendar</DatePicker.Trigger>
+
+	<DatePicker.Popover
+		class="date-picker-popover"
+		onmousedown={() => {
+			pointerDownCalls += 1;
+		}}
+		onkeydowncapture={() => {
+			keydownCaptureCalls += 1;
+		}}
+	>
+		<DatePicker.Calendar class="date-picker-calendar">
+			<div class="flex items-center justify-between gap-2 p-2">
+				<DatePicker.TriggerPrevious />
+				<DatePicker.Heading />
+				<DatePicker.TriggerNext />
+			</div>
+			<DatePicker.Grid>
+				<DatePicker.GridHeader>
+					{#snippet children(dayLabel: string)}
+						<DatePicker.HeaderCell>
+							{dayLabel}
+						</DatePicker.HeaderCell>
+					{/snippet}
+				</DatePicker.GridHeader>
+				<DatePicker.GridBody>
+					{#snippet children(date: string)}
+						<DatePicker.BodyCell {date} />
+					{/snippet}
+				</DatePicker.GridBody>
+			</DatePicker.Grid>
+		</DatePicker.Calendar>
+	</DatePicker.Popover>
+</DatePicker.Root>
+
+<p data-testid="pointer-down-calls">{pointerDownCalls}</p>
+<p data-testid="keydown-capture-calls">{keydownCaptureCalls}</p>
+<p data-testid="selected-value">{selectedValue}</p>

package/dist/datepicker/popover/date-picker-popover-handler-test.svelte.d.ts

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

package/dist/datepicker/popover/date-picker-popover-unsafe-props-test.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import DatePicker from '../index';
+
+	const unsafePopoverProps: Record<string, unknown> = {
+		id: 'unsafe-popover-id',
+		open: false,
+		triggerRef: null,
+		onOpenChange: () => {
+			// no-op
+		}
+	};
+</script>
+
+<DatePicker.Root defaultOpen={true}>
+	<DatePicker.Input class="date-picker-input" aria-label="Date input">
+		{#snippet children(segment)}
+			<DatePicker.Segment class="date-picker-segment" {segment} />
+		{/snippet}
+	</DatePicker.Input>
+	<DatePicker.Trigger class="date-picker-trigger">Open calendar</DatePicker.Trigger>
+
+	<DatePicker.Popover class="date-picker-popover" {...unsafePopoverProps}>
+		<DatePicker.Calendar class="date-picker-calendar">
+			<div class="flex items-center justify-between gap-2 p-2">
+				<DatePicker.TriggerPrevious />
+				<DatePicker.Heading />
+				<DatePicker.TriggerNext />
+			</div>
+			<DatePicker.Grid>
+				<DatePicker.GridHeader>
+					{#snippet children(dayLabel: string)}
+						<DatePicker.HeaderCell>
+							{dayLabel}
+						</DatePicker.HeaderCell>
+					{/snippet}
+				</DatePicker.GridHeader>
+				<DatePicker.GridBody>
+					{#snippet children(date: string)}
+						<DatePicker.BodyCell {date} />
+					{/snippet}
+				</DatePicker.GridBody>
+			</DatePicker.Grid>
+		</DatePicker.Calendar>
+	</DatePicker.Popover>
+</DatePicker.Root>

package/dist/datepicker/popover/date-picker-popover-unsafe-props-test.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DatePickerPopoverUnsafePropsTest: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DatePickerPopoverUnsafePropsTest = InstanceType<typeof DatePickerPopoverUnsafePropsTest>;
+export default DatePickerPopoverUnsafePropsTest;

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

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import { useDatePickerContext } from '../root/context';
+	import { Popover } from '../../popover';
+	import type { PopoverOpenChangeDetails } from '../../popover/root/context';
+	import { composeEventHandlers, sanitizeDatePickerProps } from '../internal/strict-props';
+	import { trackInteractionModality } from '../../primitives/input-modality';
+
+	type ForbiddenPopoverProp = 'open' | 'triggerRef' | 'onOpenChange' | 'id';
+
+	type DatePickerPopoverProps = Omit<ComponentProps<typeof Popover.Content>, ForbiddenPopoverProp>;
+
+	const forbiddenPopoverProps: ForbiddenPopoverProp[] = [
+		'open',
+		'triggerRef',
+		'onOpenChange',
+		'id'
+	];
+
+	let {
+		class: className = '',
+		children,
+		'aria-label': ariaLabel = 'Calendar',
+		initialFocus,
+		onmousedown: onMouseDownExternal,
+		onkeydowncapture: onKeydownCaptureExternal,
+		...unsafeRestProps
+	}: DatePickerPopoverProps = $props();
+
+	const datePicker = useDatePickerContext();
+	const dialogId = `${datePicker.id}-popover`;
+	const restProps = $derived.by(
+		() =>
+			sanitizeDatePickerProps(
+				'Popover',
+				unsafeRestProps as Record<string, unknown>,
+				forbiddenPopoverProps
+			) as Omit<ComponentProps<typeof Popover.Content>, ForbiddenPopoverProp>
+	);
+	const resolvedInitialFocus = $derived.by(() => {
+		if (typeof initialFocus === 'function') {
+			return () => initialFocus() ?? resolveInitialCalendarFocus();
+		}
+		if (initialFocus !== undefined) {
+			return initialFocus;
+		}
+		return resolveInitialCalendarFocus;
+	});
+
+	function handleOpenChange(nextOpen: boolean, details: PopoverOpenChangeDetails) {
+		datePicker.onOpenChange(nextOpen, details);
+	}
+
+	function resolveInitialCalendarFocus(): HTMLElement | null {
+		const dialog = document.getElementById(dialogId);
+		const activeDayCell = dialog?.querySelector<HTMLElement>('[role="gridcell"][tabindex="0"]');
+		return activeDayCell ?? null;
+	}
+
+	function handlePointerDown(event: MouseEvent) {
+		trackInteractionModality(event);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		trackInteractionModality(event);
+	}
+</script>
+
+<Popover.Root
+	open={datePicker.open}
+	triggerRef={datePicker.triggerRef}
+	onOpenChange={handleOpenChange}
+>
+	<Popover.Content
+		id={dialogId}
+		class={className}
+		aria-label={ariaLabel}
+		onmousedown={composeEventHandlers(handlePointerDown, onMouseDownExternal ?? undefined)}
+		onkeydowncapture={composeEventHandlers(handleKeydown, onKeydownCaptureExternal ?? undefined)}
+		initialFocus={resolvedInitialFocus}
+		{...restProps}
+	>
+		{#if children}
+			{@render children()}
+		{/if}
+	</Popover.Content>
+</Popover.Root>

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

@@ -0,0 +1,7 @@
+import type { ComponentProps } from 'svelte';
+import { Popover } from '../../popover';
+type ForbiddenPopoverProp = 'open' | 'triggerRef' | 'onOpenChange' | 'id';
+type DatePickerPopoverProps = Omit<ComponentProps<typeof Popover.Content>, ForbiddenPopoverProp>;
+declare const DatePickerPopover: import("svelte").Component<DatePickerPopoverProps, {}, "">;
+type DatePickerPopover = ReturnType<typeof DatePickerPopover>;
+export default DatePickerPopover;

package/dist/datepicker/root/README.md

@@ -0,0 +1,38 @@
+# DatePicker Root
+
+## API reference
+
+### DatePicker.Root
+
+Name: `DatePicker.Root`  
+Description: State container for segmented date input, popover lifecycle, calendar selection, and validation constraints.
+
+| Prop                | Type                                           | Default     | Description                                               |
+| ------------------- | ---------------------------------------------- | ----------- | --------------------------------------------------------- |
+| `value`             | `DatePickerDateValue \| null`                  | `bindable`  | Controlled ISO date value (`YYYY-MM-DD`).                 |
+| `defaultValue`      | `DatePickerDateValue \| null`                  | `undefined` | Initial date value for uncontrolled mode.                 |
+| `onChange`          | `(value: DatePickerDateValue \| null) => void` | `undefined` | Called when committed date value changes.                 |
+| `open`              | `boolean`                                      | `bindable`  | Controlled open state for the popover panel.              |
+| `defaultOpen`       | `boolean`                                      | `false`     | Initial open state in uncontrolled mode.                  |
+| `onOpenChange`      | `(open: boolean, details) => void`             | `undefined` | Called on open-state transitions (supports cancellation). |
+| `closeOnSelect`     | `boolean`                                      | `true`      | Closes the popover after calendar selection.              |
+| `minValue`          | `DatePickerDateValue`                          | `undefined` | Optional lower bound for selectable dates.                |
+| `maxValue`          | `DatePickerDateValue`                          | `undefined` | Optional upper bound for selectable dates.                |
+| `isDateUnavailable` | `(date: DatePickerDateValue) => boolean`       | `undefined` | Optional predicate to block unavailable dates.            |
+| `isDisabled`        | `boolean`                                      | `false`     | Disables interaction and selection.                       |
+| `isReadOnly`        | `boolean`                                      | `false`     | Prevents value changes while preserving navigation.       |
+| `children`          | `Snippet`                                      | `undefined` | Composed `DatePicker` parts.                              |
+| `class`             | `string`                                       | `''`        | CSS class names for root wrapper.                         |
+| `aria-label`        | `string`                                       | `undefined` | Accessible label for the root wrapper.                    |
+
+### Context utilities
+
+Name: `setDatePickerContext` / `getDatePickerContext` / `useDatePickerContext`  
+Description: Context helpers for internal/public `DatePicker` part composition.
+
+| Prop                   | Type                                   | Default | Description                                         |
+| ---------------------- | -------------------------------------- | ------- | --------------------------------------------------- |
+| `setDatePickerContext` | `(ctx: DatePickerContext) => void`     | `-`     | Publishes root context.                             |
+| `getDatePickerContext` | `() => DatePickerContext \| undefined` | `-`     | Reads context when available.                       |
+| `useDatePickerContext` | `() => DatePickerContext`              | `-`     | Reads context and throws outside `DatePicker.Root`. |
+| `DatePickerContext`    | `type`                                 | `-`     | Shared context contract for all datepicker parts.   |

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

@@ -0,0 +1,43 @@
+import type { DatePickerDateValue, DatePickerEditableSegmentType, DatePickerSegmentPart, DatePickerSegmentType } from './date-utils';
+import type { PopoverChangeReason, PopoverOpenChangeDetails } from '../../popover/root/context';
+export type DatePickerOpenChangeReason = PopoverChangeReason;
+export type DatePickerOpenChangeDetails = PopoverOpenChangeDetails;
+export type DatePickerContext = {
+    id: string;
+    isDisabled: boolean;
+    isReadOnly: boolean;
+    open: boolean;
+    focusVisible: boolean;
+    focusWithin: boolean;
+    isInvalidDraft: boolean;
+    activeSegment: Exclude<DatePickerSegmentType, 'literal'> | null;
+    value: DatePickerDateValue | null;
+    locale: string;
+    triggerRef: HTMLElement | null;
+    setTriggerRef: (element: HTMLElement | null) => void;
+    setFocusVisible: (visible: boolean) => void;
+    syncFocusWithin: () => void;
+    setActiveSegment: (segment: Exclude<DatePickerSegmentType, 'literal'> | null) => void;
+    openPopover: (reason?: DatePickerOpenChangeReason, event?: Event) => void;
+    closePopover: (reason?: DatePickerOpenChangeReason, event?: Event) => void;
+    togglePopover: (reason?: DatePickerOpenChangeReason, event?: Event) => void;
+    onOpenChange: (open: boolean, details: DatePickerOpenChangeDetails) => void;
+    setValue: (nextValue: DatePickerDateValue, source?: 'calendar' | 'input') => void;
+    typeSegmentDigit: (type: Exclude<DatePickerSegmentType, 'literal'>, digit: string) => boolean;
+    adjustSegmentValue: (type: Exclude<DatePickerSegmentType, 'literal'>, step: number) => void;
+    isDateOutOfRange: (value: DatePickerDateValue) => boolean;
+    isDateUnavailable: (value: DatePickerDateValue) => boolean;
+    getSegments: () => DatePickerSegmentPart[];
+    getSegmentValue: (type: Exclude<DatePickerSegmentType, 'literal'>) => string;
+    setSegmentValue: (type: Exclude<DatePickerSegmentType, 'literal'>, nextValue: string) => void;
+    getSegmentLabel: (type: DatePickerEditableSegmentType) => string;
+    registerSegmentRef: (type: DatePickerEditableSegmentType, element: HTMLElement | null) => void;
+    focusNextPlaceholderOrLastSegment: () => boolean;
+    focusNextSegment: (type: DatePickerEditableSegmentType) => boolean;
+    focusPreviousSegment: (type: DatePickerEditableSegmentType) => boolean;
+    focusLastSegment: () => boolean;
+};
+export declare function setDatePickerContext(context: DatePickerContext): void;
+export declare function getDatePickerContext(): DatePickerContext | undefined;
+export declare function useDatePickerContext(): DatePickerContext;
+export type { DatePickerSegmentPart, DatePickerSegmentType };

package/dist/datepicker/root/context.js

@@ -0,0 +1,15 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('date-picker');
+export function setDatePickerContext(context) {
+    setContext(KEY, context);
+}
+export function getDatePickerContext() {
+    return getContext(KEY);
+}
+export function useDatePickerContext() {
+    const context = getDatePickerContext();
+    if (!context) {
+        throw new Error('DatePicker components must be used within DatePicker.Root.');
+    }
+    return context;
+}

package/dist/datepicker/root/date-picker-bindable-empty-test.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import DatePicker from '../index';
+
+	let value = $state<string | null | undefined>(undefined);
+	let onChangeCalls = $state(0);
+</script>
+
+<DatePicker.Root
+	bind:value
+	onChange={() => {
+		onChangeCalls += 1;
+	}}
+>
+	<DatePicker.Input class="date-picker-input" aria-label="Date input">
+		{#snippet children(segment)}
+			<DatePicker.Segment class="date-picker-segment" {segment} />
+		{/snippet}
+	</DatePicker.Input>
+</DatePicker.Root>
+
+<p data-testid="bind-value-state">
+	{value === undefined ? 'undefined' : value === null ? 'null' : value}
+</p>
+<p data-testid="on-change-calls">{onChangeCalls}</p>

package/dist/datepicker/root/date-picker-bindable-empty-test.svelte.d.ts

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

package/dist/datepicker/root/date-picker-bindable-test.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import DatePicker from '../index';
+
+	let value = $state<string | null | undefined>('2026-02-10');
+	let open = $state(false);
+</script>
+
+<DatePicker.Root bind:value bind:open>
+	<DatePicker.Input class="date-picker-input" aria-label="Date input">
+		{#snippet children(segment)}
+			<DatePicker.Segment class="date-picker-segment" {segment} />
+		{/snippet}
+	</DatePicker.Input>
+	<DatePicker.Trigger class="date-picker-trigger">Open calendar</DatePicker.Trigger>
+	<DatePicker.Popover class="date-picker-popover">
+		<DatePicker.Calendar class="date-picker-calendar">
+			<div class="flex items-center justify-between gap-2 p-2">
+				<DatePicker.TriggerPrevious />
+				<DatePicker.Heading />
+				<DatePicker.TriggerNext />
+			</div>
+			<DatePicker.Grid>
+				<DatePicker.GridHeader>
+					{#snippet children(dayLabel: string)}
+						<DatePicker.HeaderCell>
+							{dayLabel}
+						</DatePicker.HeaderCell>
+					{/snippet}
+				</DatePicker.GridHeader>
+				<DatePicker.GridBody>
+					{#snippet children(date: string)}
+						<DatePicker.BodyCell {date} />
+					{/snippet}
+				</DatePicker.GridBody>
+			</DatePicker.Grid>
+		</DatePicker.Calendar>
+	</DatePicker.Popover>
+</DatePicker.Root>
+
+<p data-testid="bind-value">{value}</p>
+<p data-testid="bind-open">{String(open)}</p>

package/dist/datepicker/root/date-picker-bindable-test.svelte.d.ts

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

package/dist/datepicker/root/date-picker-empty-test.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { LocaleProvider } from '../../locale-provider';
+	import DatePicker from '../index';
+
+	let selectedValue = $state<string | null>('');
+</script>
+
+<LocaleProvider locale="en-GB">
+	<DatePicker.Root
+		onChange={(nextValue) => {
+			selectedValue = nextValue;
+		}}
+	>
+		<DatePicker.Input class="date-picker-input" aria-label="Date input">
+			{#snippet children(segment)}
+				<DatePicker.Segment class="date-picker-segment" {segment} />
+			{/snippet}
+		</DatePicker.Input>
+		<DatePicker.Trigger class="date-picker-trigger">Open calendar</DatePicker.Trigger>
+
+		<DatePicker.Popover class="date-picker-popover">
+			<DatePicker.Calendar class="date-picker-calendar">
+				<div class="flex items-center justify-between gap-2 p-2">
+					<DatePicker.TriggerPrevious />
+					<DatePicker.Heading />
+					<DatePicker.TriggerNext />
+				</div>
+				<DatePicker.Grid>
+					<DatePicker.GridHeader>
+						{#snippet children(dayLabel: string)}
+							<DatePicker.HeaderCell>
+								{dayLabel}
+							</DatePicker.HeaderCell>
+						{/snippet}
+					</DatePicker.GridHeader>
+					<DatePicker.GridBody>
+						{#snippet children(date: string)}
+							<DatePicker.BodyCell {date} />
+						{/snippet}
+					</DatePicker.GridBody>
+				</DatePicker.Grid>
+			</DatePicker.Calendar>
+		</DatePicker.Popover>
+	</DatePicker.Root>
+</LocaleProvider>
+
+<p data-testid="date-picker-value">{selectedValue}</p>

package/dist/datepicker/root/date-picker-empty-test.svelte.d.ts

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