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

package/dist/combobox/TODO.md

@@ -1,175 +1,28 @@
-# ComboBox - Code Review & TODOs
-
-Comprehensive review based on: **Accessibility**, **Scalability**, **Performance**, **Svelte 5 Runes Best Practices**.
-
----
-
-## Accessibility
-
-### Completed (Accessibility)
-
-- [x] ARIA pattern: `aria-activedescendant` for virtual focus
-- [x] `aria-expanded`, `aria-haspopup`, `aria-controls` on input
-- [x] `aria-label` on ListBox
-- [x] `role="combobox"`, `role="listbox"`, `role="option"`
-- [x] `aria-selected` on selected items
-- [x] `aria-disabled` on disabled items/placeholder
-- [x] Input supports `aria-label` and `aria-labelledby` props
-- [x] ListBox has an ID so `aria-controls` works correctly
-- [x] Button has `aria-controls` pointing to the listbox
-- [x] Wrapper group supports `aria-label` and `aria-labelledby`
-- [x] Input supports `aria-describedby` for usage instructions
-
-### Pending (Accessibility)
-
-- [ ] **Live regions for result count**
-  - Add `<div aria-live="polite">` to announce "{N} results available" while filtering
-  - Important for screen readers that cannot see visual updates
-
-- [ ] **Selection announcement**
-  - Announce "Selected item: {label}" when an item is selected
-  - Use `aria-live="assertive"` for important changes
-
-- [ ] **Support for groups (sections)**
-  - Implement `role="group"` with `aria-labelledby` for sections
-  - Add `ComboBox.Section` component
-
----
-
-## Scalability
-
-### Completed (Scalability)
-
-- [x] Reusable `useVirtualFocus` hook
-- [x] Controlled/uncontrolled mode
-- [x] Automatic item filtering
-- [x] Reactive `emptyPlaceholder`
-
-### Pending (Scalability)
-
-- [ ] **Customizable `filterFn` prop**
-  - Filtering is currently case-insensitive includes
-  - Allow: fuzzy search, startsWith, exact match, async search
-
-- [ ] **`allowCreate` prop**
-  - Allow creating new items when there is no match
-  - Callback `onCreate?: (value: string) => void`
-
-- [x] **Multiple selection UI**
-  - Chips/tags for selected items: `ComboBox.Tags`, `ComboBox.Tag`, `ComboBox.TagRemove`
-  - Clear-all button (available via `clearSelection()` in context)
-  - Selected-count indicator (available via `selectedValue.size`)
-  - Keyboard tag navigation (ArrowLeft/Right, Delete/Backspace)
-  - `ComboBox.ItemIndicator` to show checks for selected items
-
-- [ ] **Form integration**
-  - `name` prop for native `<form>`
-  - Hidden input with serialized value
-  - Validation with `required`, `aria-invalid`
-
-- [ ] **Async data support**
-  - Props: `isLoading`, `loadingPlaceholder`
-  - Callback: `onLoadMore` for infinite scroll
-  - Built-in debounce for async search
-
-- [ ] **Virtualization**
-  - For large lists (>100 items)
-  - Integrate with `@tanstack/virtual` or similar
-
----
-
-## Performance
-
-### Completed (Performance)
-
-- [x] DOM query cache with invalidation (`cachedItemOrder`)
-- [x] `untrack()` to avoid infinite effect loops
-- [x] Subscription pattern for reactive `itemCount`
-- [x] Scoped queries via `containerRef`
-
-### Pending (Performance)
-
-- [ ] **`isVisible` memoization in ListBoxItem**
-  - It is currently recomputed on each render
-  - Consider more granular memoization with `$derived`
-
-- [ ] **Batch registration**
-  - `registerItem` runs once per individual item
-  - For large lists, consider batched notifications
-
-- [ ] **Lazy `itemLabels`**
-  - The `itemLabels` map grows with each item
-  - Cleanup on unmount is implemented, but consider `WeakMap`
-
-- [ ] **Effect cleanup optimizations**
-  - Review effects that could be consolidated
-  - `combobox-listboxitem.svelte` has 2 effects that might become 1
-
----
-
-## Svelte 5 Runes Best Practices
-
-### Completed (Runes)
-
-- [x] `$state` for reactive state
-- [x] `$derived` for computed values
-- [x] `$effect` with cleanup functions
-- [x] `$bindable` for two-way binding
-- [x] `$props()` for destructuring
-- [x] `untrack()` to avoid unnecessary re-runs
-- [x] `$derived(expression)` instead of `$derived(() => ...)` - simplified in `combobox-listboxitem.svelte`
-- [x] Consolidated effects - using 1 `$effect` + `onDestroy` instead of 2 effects
-
-### Reviewed - No Changes Required
-
-- [x] **`$effect.pre`**: Reviewed - no race conditions requiring it
-- [x] **Context typing**: Single shared type is appropriate - tree-shaking does not apply to context objects
-
----
-
-## Testing
-
-### Completed (Testing)
-
-- [x] 291 passing unit tests
-- [x] Keyboard navigation tests
-- [x] Selection tests
-- [x] Filtering tests
-- [x] Empty placeholder tests
-- [x] ARIA accessibility tests (6 tests)
-- [x] Edge cases: rapid typing, whitespace, backspace
-- [x] Disabled/ReadOnly state tests
-- [x] Trigger modes (focus, input, manual)
-- [x] Selection behavior (Enter, click, Escape restoration)
-- [x] Multi-select tests (12 tests)
-- [x] Tags component tests (4 tests)
-- [x] Tag component tests (13 tests) - includes keyboard navigation
-- [x] TagRemove component tests (6 tests)
-- [x] ItemIndicator component tests (5 tests)
-
-### Pending (Testing)
-
-- [ ] **Tests with many items (100+)** - performance tests
-- [ ] **Visual regression tests** - state screenshots
-
----
-
-## Documentation
-
-- [ ] **Complete JSDoc**
-  - Document all public props
-  - Add usage examples in comments
-
-- [ ] **Storybook/Demo page**
-  - Interactive examples for all use cases
-  - States: loading, error, disabled, readonly
-
----
-
-## Prioritized Next Steps
-
-1. **Live regions** (accessibility - high impact)
-2. **Form integration** (usability - common cases)
-3. **Customizable `filterFn`** (scalability)
-4. **Consolidate effects** (performance/best practices)
-5. **Async data support** (scalability)
+# Combobox TODO
+
+## Goal
+
+Track Combobox work with a single mandatory TODO format.
+
+## Backlog
+
+- [x] [M][P0][Area: Architecture][Owner: Unassigned][Target: Done] Build base component parts (`root`, `input`, `list`, `item`).
+- [x] [M][P0][Area: State][Owner: Unassigned][Target: Done] Implement open/close state management on root.
+- [x] [M][P0][Area: Filtering][Owner: Unassigned][Target: Done] Support filtering items by input value.
+- [x] [M][P0][Area: Selection][Owner: Unassigned][Target: Done] Implement item selection and emit `onSelectionChange`.
+- [x] [M][P0][Area: Accessibility][Owner: Unassigned][Target: Done] Add keyboard navigation and ARIA combobox/listbox semantics.
+- [x] [M][P0][Area: Interaction][Owner: Unassigned][Target: Done] Handle outside click and blur to close list.
+- [x] [M][P0][Area: States][Owner: Unassigned][Target: Done] Support disabled state for root and items.
+- [x] [M][P0][Area: Testing][Owner: Unassigned][Target: Done] Add baseline browser tests for open/filter/select behavior.
+- [x] [S][P1][Area: API][Owner: Unassigned][Target: Done] Support controlled/uncontrolled selected value.
+- [x] [M][P0][Area: Selection][Owner: Unassigned][Target: Done] Implement `supportsMultiple` mode with chips and remove action.
+- [x] [M][P0][Area: Data Model][Owner: Unassigned][Target: Done] Support rich object values and hidden input synchronization.
+- [x] [M][P0][Area: UX][Owner: Unassigned][Target: Done] Support loading, empty, and custom-value flows.
+- [x] [M][P0][Area: Focus][Owner: Unassigned][Target: Done] Align focus-visible behavior with shared input modality primitive.
+- [ ] [S][P1][Area: Data Source][Owner: Unassigned][Target: TBD] Add async item provider API (debounced remote filtering).
+- [ ] [S][P1][Area: Data Model][Owner: Unassigned][Target: TBD] Add grouped items with section headers.
+- [ ] [S][P1][Area: Performance][Owner: Unassigned][Target: TBD] Add optional virtualization for large datasets.
+- [ ] [S][P1][Area: Interaction][Owner: Unassigned][Target: TBD] Add option to commit free-text value on blur.
+- [ ] [S][P1][Area: API][Owner: Unassigned][Target: TBD] Add imperative focus/open API for advanced integrations.
+- [ ] [C][P2][Area: UX][Owner: Unassigned][Target: TBD] Add built-in highlighting helper for matched text.
+- [ ] [C][P2][Area: Performance][Owner: Unassigned][Target: TBD] Add benchmark tests for filtering and keyboard navigation.

package/dist/combobox/button/combobox-button.svelte

@@ -24,6 +24,8 @@
 	}
 </script>
 
+<!-- * CHANGE: CHANGE NAME FROM BUTTON TO TRIGGER -->
+
 <button
 	type="button"
 	{tabindex}

package/dist/combobox/root/combobox.svelte

@@ -3,6 +3,10 @@
 	import { setComboBoxContext, type ComboBoxContext } from './context';
 	import type { ListBoxContext } from '../../listbox/root/context';
 	import { useVirtualFocus } from '../../hooks/use-virtual-focus.svelte';
+	import {
+		shouldShowFocusVisible,
+		trackInteractionModality
+	} from '../../primitives/input-modality';
 
 	type ComboBoxProps<T> = {
 		/** Stable ID used to generate internal ARIA IDs (recommended for SSR). */
@@ -98,6 +102,8 @@
 
 	// Virtual focus for tag navigation in multiple mode
 	let focusedTagId: string | number | null = $state(null);
+	let focusWithin = $state(false);
+	let focusVisible = $state(false);
 
 	// Flag to control whether inputValue should be used for filtering
 	// When false, all items are shown regardless of inputValue
@@ -335,6 +341,23 @@
 		}
 	}
 
+	function syncFocusWithin() {
+		focusWithin =
+			!!wrapperRef && !!document.activeElement && wrapperRef.contains(document.activeElement);
+		if (!focusWithin) {
+			focusVisible = false;
+		}
+	}
+
+	function handleFocusIn(event: FocusEvent) {
+		focusWithin = true;
+		focusVisible = shouldShowFocusVisible(event.target as HTMLElement | null);
+	}
+
+	function handleFocusOut() {
+		queueMicrotask(syncFocusWithin);
+	}
+
 	// Use navigation hook methods for keyboard navigation
 	function selectFocusedItem() {
 		if (navigation.focusedId !== null) {
@@ -385,6 +408,7 @@
 
 	function handleKeydown(event: KeyboardEvent) {
 		if (isDisabled) return;
+		trackInteractionModality(event, event.target as HTMLElement | null);
 
 		// Handle tag virtual focus navigation in multiple mode
 		if (focusedTagId !== null && selectionMode === 'multiple') {
@@ -559,6 +583,8 @@
 					event.stopImmediatePropagation();
 				}
 				handleInputBlur();
+				// Escape is a keyboard-only path, so focus-visible remains enabled for the input.
+				focusVisible = true;
 				event.preventDefault();
 				break;
 			case 'Backspace':
@@ -688,7 +714,11 @@
 	data-combobox
 	data-disabled={isDisabled || undefined}
 	data-readonly={isReadOnly || undefined}
+	data-focus-within={focusWithin || undefined}
+	data-focus-visible={focusVisible || undefined}
 	use:setWrapperAsTrigger
+	onfocusin={handleFocusIn}
+	onfocusout={handleFocusOut}
 >
 	{#if children}
 		{@render children()}

package/dist/datepicker/README.md

@@ -0,0 +1,100 @@
+# DatePicker
+
+## Description
+
+`DatePicker` composes a segmented date input with a calendar popover for selecting dates.
+
+## Anatomy
+
+- `DatePicker.Root`
+- `DatePicker.Input`
+- `DatePicker.Segment`
+- `DatePicker.Trigger`
+- `DatePicker.Popover`
+- `DatePicker.Calendar`
+- `DatePicker.TriggerPrevious`
+- `DatePicker.Heading`
+- `DatePicker.TriggerNext`
+- `DatePicker.Grid`
+- `DatePicker.GridHeader`
+- `DatePicker.HeaderCell`
+- `DatePicker.GridBody`
+- `DatePicker.BodyCell`
+
+```svelte
+<DatePicker.Root>
+	<DatePicker.Input aria-label="Date input">
+		{#snippet children(segment)}
+			<DatePicker.Segment {segment} />
+		{/snippet}
+	</DatePicker.Input>
+	<DatePicker.Trigger />
+
+	<DatePicker.Popover>
+		<DatePicker.Calendar>
+			<div>
+				<DatePicker.TriggerPrevious />
+				<DatePicker.Heading />
+				<DatePicker.TriggerNext />
+			</div>
+			<DatePicker.Grid>
+				<DatePicker.GridHeader />
+				<DatePicker.GridBody />
+			</DatePicker.Grid>
+		</DatePicker.Calendar>
+	</DatePicker.Popover>
+</DatePicker.Root>
+```
+
+## Root API
+
+- `value?: string | null` (`YYYY-MM-DD`)
+- `defaultValue?: string | null` (`YYYY-MM-DD`)
+- `onChange?: (value: string | null) => void`
+- `isDisabled?: boolean`
+- `isReadOnly?: boolean`
+- `minValue?: string` (`YYYY-MM-DD`)
+- `maxValue?: string` (`YYYY-MM-DD`)
+- `isDateUnavailable?: (date: string) => boolean`
+- `open?: boolean`
+- `defaultOpen?: boolean`
+- `onOpenChange?: (open: boolean, details: { reason, event?, cancel(), isCanceled }) => void`
+- `closeOnSelect?: boolean`
+- Null-first empty contract: when `value` and `defaultValue` are omitted, the empty state is `null`.
+- `DatePicker.Input` exposes `aria-invalid` and `data-invalid` when the current segment draft is not committeable.
+
+## Popover API
+
+- `DatePicker.Popover` forwards `Popover.Content` props (for example `placement`, `offset`, `shouldFlip`, `boundaryElement`, `isNonModal`, and close behavior props).
+- The following are controlled internally by `DatePicker` and are not accepted on `DatePicker.Popover`: `open`, `triggerRef`, `onOpenChange`, `id`.
+- Defaults:
+  - `placement` defaults to `bottom-start`.
+  - `aria-label` defaults to `Calendar`.
+  - `initialFocus` defaults to focusing the current active day cell in the calendar grid.
+
+## Calendar API
+
+- `DatePicker.Calendar` forwards `Calendar.Root` props except those controlled by `DatePicker.Root`.
+- The following are controlled internally by `DatePicker` and are not accepted on `DatePicker.Calendar`: `selectionMode`, `value`, `defaultValue`, `onChange`, `isDisabled`, `isReadOnly`, `isDateUnavailable`.
+
+## Notes
+
+- Locale is read from `LocaleProvider` when available.
+- Segment accessible names are resolved automatically from the active locale.
+- During segment editing, the committed value is set to `null` when the draft is incomplete, invalid, out-of-range, or unavailable.
+- Current MVP focuses on date-only values.
+
+## UX Decisions
+
+- **No Date Auto-Correction:** When users manually type dates out of the configured bounds (`minValue`/`maxValue`) or dates that are unavailable, the DatePicker **does not auto-correct** the typed value. Instead, it exposes `aria-invalid="true"` and `data-invalid` on the input, allowing the user to see what they typed incorrectly. The underlying committed value is kept as `null` until a valid date is completed. Auto-correcting input without explicit user consent is an inaccessible anti-pattern.
+- **Navigable Disabled Dates:** When using the Calendar, disabled dates remain focusable via keyboard navigation. This ensures ARIA Grid spatial navigation parity so that screen readers can consistently announce all calendar cells and report them as "disabled", rather than skipping over them and disorienting the user.
+
+## Focus behavior decisions
+
+- DatePicker aligns with the shared modality primitive (`primitives/input-modality.ts`) for `keyboard`, `pointer`, and `virtual` interactions.
+- `data-focus-visible` is modality-driven; `data-focused` and `data-focus-within` continue to represent real DOM focus state.
+- Trigger focus restore after calendar close is modality-aware:
+  - keyboard close paths keep visible focus,
+  - pointer outside close restores focus without visible focus.
+- The component keeps explicit `trackInteractionModality(...)` calls in local handlers to ensure deterministic modality updates before local focus-state logic runs.
+- Cross-component focus contract and invariants are documented in `FOCUS_STATE_CONTRACT.md`.

package/dist/datepicker/TODO.md

@@ -0,0 +1,28 @@
+# DatePicker TODO
+
+## Goal
+
+Track DatePicker work with a single mandatory TODO format.
+
+## Backlog
+
+- [x] [M][P0][Area: Context][Owner: Unassigned][Target: Done] Complete core context wiring.
+- [x] [M][P0][Area: State][Owner: Unassigned][Target: Done] Implement root state and value handling.
+- [x] [M][P0][Area: Parsing][Owner: Unassigned][Target: Done] Integrate segment parser and formatter.
+- [x] [M][P0][Area: Input][Owner: Unassigned][Target: Done] Deliver baseline segmented input rendering.
+- [x] [M][P0][Area: Composition][Owner: Unassigned][Target: Done] Integrate calendar popover behavior.
+- [x] [M][P0][Area: Accessibility][Owner: Unassigned][Target: Done] Implement keyboard navigation baseline.
+- [x] [M][P0][Area: Validation][Owner: Unassigned][Target: Done] Implement min/max and unavailable date validation baseline.
+- [x] [M][P0][Area: API][Owner: Unassigned][Target: Done] Ship public exports and baseline docs/tests.
+- [x] [M][P0][Area: Forms][Owner: Unassigned][Target: Done] Support rich object values and hidden input synchronization.
+- [x] [M][P0][Area: Focus][Owner: Unassigned][Target: Done] Unify focus-visible behavior with shared modality semantics.
+- [x] [S][P1][Area: Focus][Owner: Unassigned][Target: Done] Remove DatePicker-local modality tracking in favor of shared primitive.
+- [x] [S][P1][Area: Documentation][Owner: Unassigned][Target: Done] Document focus contract updates and DatePicker rationale.
+- [ ] [S][P1][Area: Calendar][Owner: Unassigned][Target: TBD] Add multi-month calendar display.
+- [ ] [S][P1][Area: Accessibility][Owner: Unassigned][Target: TBD] Run deep accessibility audit (SR + keyboard edge cases).
+- [ ] [C][P2][Area: Time][Owner: Unassigned][Target: TBD] Add time selection integration.
+- [ ] [C][P2][Area: API][Owner: Unassigned][Target: TBD] Decide and implement date-range mode strategy.
+- [ ] [C][P2][Area: Input][Owner: Unassigned][Target: TBD] Add input mask helper utilities.
+- [ ] [C][P2][Area: Mobile][Owner: Unassigned][Target: TBD] Add mobile-optimized interaction pass.
+- [ ] [C][P2][Area: UX][Owner: Unassigned][Target: TBD] Add preset shortcuts (today, next week, custom).
+- [ ] [C][P2][Area: Performance][Owner: Unassigned][Target: TBD] Add segment update micro-benchmarks and optimizations.

package/dist/datepicker/calendar/README.md

@@ -0,0 +1,19 @@
+# DatePicker Calendar
+
+## API reference
+
+### DatePicker.Calendar
+
+Name: `DatePicker.Calendar`  
+Description: Calendar composition part connected to `DatePicker.Root` selected date and navigation state.
+
+| Prop           | Type                                                                                                                                                            | Default     | Description                                            |
+| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------ |
+| `children`     | `Snippet`                                                                                                                                                       | `undefined` | Optional custom calendar content.                      |
+| `class`        | `string`                                                                                                                                                        | `''`        | CSS class names for the calendar wrapper.              |
+| `...restProps` | `Omit<ComponentProps<typeof Calendar.Root>, 'selectionMode' \| 'value' \| 'defaultValue' \| 'onChange' \| 'isDisabled' \| 'isReadOnly' \| 'isDateUnavailable'>` | `-`         | Additional calendar root props forwarded by this part. |
+
+### Notes
+
+Name: Root-controlled calendar props  
+Description: `selectionMode`, `value`, `defaultValue`, `onChange`, `isDisabled`, `isReadOnly`, and `isDateUnavailable` are controlled by `DatePicker.Root` and ignored when passed to this part.

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

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import DatePicker from '../index';
+
+	let unsafeOnChangeCalls = $state(0);
+	let selectedValue = $state<string | null>('');
+
+	const unsafeCalendarProps: Record<string, unknown> = {
+		selectionMode: 'range',
+		value: { start: '2026-02-01', end: '2026-02-05' },
+		defaultValue: '2026-02-20',
+		onChange: () => {
+			unsafeOnChangeCalls += 1;
+		},
+		isDisabled: true,
+		isReadOnly: true,
+		isDateUnavailable: () => true
+	};
+</script>
+
+<DatePicker.Root
+	defaultValue="2026-02-10"
+	defaultOpen={true}
+	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" {...unsafeCalendarProps}>
+			<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="unsafe-on-change-calls">{unsafeOnChangeCalls}</p>
+<p data-testid="selected-value">{selectedValue}</p>

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

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

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

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { ComponentProps, Snippet } from 'svelte';
+	import { Calendar } from '../../calendar';
+	import { sanitizeDatePickerProps } from '../internal/strict-props';
+	import { useDatePickerContext } from '../root/context';
+
+	type ForbiddenCalendarProp =
+		| 'selectionMode'
+		| 'value'
+		| 'defaultValue'
+		| 'onChange'
+		| 'isDisabled'
+		| 'isReadOnly'
+		| 'isDateUnavailable';
+
+	type DatePickerCalendarProps = Omit<
+		ComponentProps<typeof Calendar.Root>,
+		ForbiddenCalendarProp
+	> & {
+		class?: string;
+		children?: Snippet;
+	};
+
+	const forbiddenCalendarProps: ForbiddenCalendarProp[] = [
+		'selectionMode',
+		'value',
+		'defaultValue',
+		'onChange',
+		'isDisabled',
+		'isReadOnly',
+		'isDateUnavailable'
+	];
+
+	let { class: className = '', children, ...unsafeRestProps }: DatePickerCalendarProps = $props();
+
+	const datePicker = useDatePickerContext();
+	const restProps = $derived.by(
+		() =>
+			sanitizeDatePickerProps(
+				'Calendar',
+				unsafeRestProps as Record<string, unknown>,
+				forbiddenCalendarProps
+			) as Omit<ComponentProps<typeof Calendar.Root>, ForbiddenCalendarProp>
+	);
+
+	function handleChange(nextValue: string) {
+		datePicker.setValue(nextValue, 'calendar');
+	}
+</script>
+
+<Calendar.Root
+	selectionMode="single"
+	showOutsideDays={false}
+	value={datePicker.value ?? undefined}
+	onChange={handleChange}
+	isDisabled={datePicker.isDisabled}
+	isReadOnly={datePicker.isReadOnly}
+	isDateUnavailable={datePicker.isDateUnavailable}
+	class={className}
+	{...restProps}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</Calendar.Root>

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

@@ -0,0 +1,10 @@
+import type { ComponentProps, Snippet } from 'svelte';
+import { Calendar } from '../../calendar';
+type ForbiddenCalendarProp = 'selectionMode' | 'value' | 'defaultValue' | 'onChange' | 'isDisabled' | 'isReadOnly' | 'isDateUnavailable';
+type DatePickerCalendarProps = Omit<ComponentProps<typeof Calendar.Root>, ForbiddenCalendarProp> & {
+    class?: string;
+    children?: Snippet;
+};
+declare const DatePickerCalendar: import("svelte").Component<DatePickerCalendarProps, {}, "">;
+type DatePickerCalendar = ReturnType<typeof DatePickerCalendar>;
+export default DatePickerCalendar;

package/dist/datepicker/index.d.ts

@@ -0,0 +1,18 @@
+export * as DatePicker from './index.parts.ts';
+export { default as DatePickerRoot } from './root/date-picker-root.svelte';
+export { default as DatePickerInput } from './input/date-picker-input.svelte';
+export { default as DatePickerSegment } from './segment/date-picker-segment.svelte';
+export { default as DatePickerTrigger } from './trigger/date-picker-trigger.svelte';
+export { default as DatePickerPopover } from './popover/date-picker-popover.svelte';
+export { default as DatePickerCalendar } from './calendar/date-picker-calendar.svelte';
+export { default as DatePickerTriggerPrevious } from '../calendar/trigger-previous/calendar-trigger-previous.svelte';
+export { default as DatePickerHeading } from '../calendar/heading/calendar-heading.svelte';
+export { default as DatePickerTriggerNext } from '../calendar/trigger-next/calendar-trigger-next.svelte';
+export { default as DatePickerGrid } from '../calendar/grid/calendar-grid.svelte';
+export { default as DatePickerGridHeader } from '../calendar/grid-header/calendar-grid-header.svelte';
+export { default as DatePickerHeaderCell } from '../calendar/header-cell/calendar-header-cell.svelte';
+export { default as DatePickerGridBody } from '../calendar/grid-body/calendar-grid-body.svelte';
+export { default as DatePickerBodyCell } from '../calendar/body-cell/calendar-body-cell.svelte';
+export { getDatePickerContext, setDatePickerContext, useDatePickerContext, type DatePickerContext, type DatePickerOpenChangeDetails, type DatePickerOpenChangeReason, type DatePickerSegmentPart, type DatePickerSegmentType } from './root/context.ts';
+import * as DatePickerParts from './index.parts.ts';
+export default DatePickerParts;

package/dist/datepicker/index.js

@@ -0,0 +1,18 @@
+export * as DatePicker from './index.parts.ts';
+export { default as DatePickerRoot } from './root/date-picker-root.svelte';
+export { default as DatePickerInput } from './input/date-picker-input.svelte';
+export { default as DatePickerSegment } from './segment/date-picker-segment.svelte';
+export { default as DatePickerTrigger } from './trigger/date-picker-trigger.svelte';
+export { default as DatePickerPopover } from './popover/date-picker-popover.svelte';
+export { default as DatePickerCalendar } from './calendar/date-picker-calendar.svelte';
+export { default as DatePickerTriggerPrevious } from '../calendar/trigger-previous/calendar-trigger-previous.svelte';
+export { default as DatePickerHeading } from '../calendar/heading/calendar-heading.svelte';
+export { default as DatePickerTriggerNext } from '../calendar/trigger-next/calendar-trigger-next.svelte';
+export { default as DatePickerGrid } from '../calendar/grid/calendar-grid.svelte';
+export { default as DatePickerGridHeader } from '../calendar/grid-header/calendar-grid-header.svelte';
+export { default as DatePickerHeaderCell } from '../calendar/header-cell/calendar-header-cell.svelte';
+export { default as DatePickerGridBody } from '../calendar/grid-body/calendar-grid-body.svelte';
+export { default as DatePickerBodyCell } from '../calendar/body-cell/calendar-body-cell.svelte';
+export { getDatePickerContext, setDatePickerContext, useDatePickerContext } from './root/context.ts';
+import * as DatePickerParts from './index.parts.ts';
+export default DatePickerParts;

package/dist/datepicker/index.parts.d.ts

@@ -0,0 +1,14 @@
+export { default as Root } from './root/date-picker-root.svelte';
+export { default as Input } from './input/date-picker-input.svelte';
+export { default as Segment } from './segment/date-picker-segment.svelte';
+export { default as Trigger } from './trigger/date-picker-trigger.svelte';
+export { default as Popover } from './popover/date-picker-popover.svelte';
+export { default as Calendar } from './calendar/date-picker-calendar.svelte';
+export { default as TriggerPrevious } from '../calendar/trigger-previous/calendar-trigger-previous.svelte';
+export { default as Heading } from '../calendar/heading/calendar-heading.svelte';
+export { default as TriggerNext } from '../calendar/trigger-next/calendar-trigger-next.svelte';
+export { default as Grid } from '../calendar/grid/calendar-grid.svelte';
+export { default as GridHeader } from '../calendar/grid-header/calendar-grid-header.svelte';
+export { default as HeaderCell } from '../calendar/header-cell/calendar-header-cell.svelte';
+export { default as GridBody } from '../calendar/grid-body/calendar-grid-body.svelte';
+export { default as BodyCell } from '../calendar/body-cell/calendar-body-cell.svelte';

package/dist/datepicker/index.parts.js

@@ -0,0 +1,14 @@
+export { default as Root } from './root/date-picker-root.svelte';
+export { default as Input } from './input/date-picker-input.svelte';
+export { default as Segment } from './segment/date-picker-segment.svelte';
+export { default as Trigger } from './trigger/date-picker-trigger.svelte';
+export { default as Popover } from './popover/date-picker-popover.svelte';
+export { default as Calendar } from './calendar/date-picker-calendar.svelte';
+export { default as TriggerPrevious } from '../calendar/trigger-previous/calendar-trigger-previous.svelte';
+export { default as Heading } from '../calendar/heading/calendar-heading.svelte';
+export { default as TriggerNext } from '../calendar/trigger-next/calendar-trigger-next.svelte';
+export { default as Grid } from '../calendar/grid/calendar-grid.svelte';
+export { default as GridHeader } from '../calendar/grid-header/calendar-grid-header.svelte';
+export { default as HeaderCell } from '../calendar/header-cell/calendar-header-cell.svelte';
+export { default as GridBody } from '../calendar/grid-body/calendar-grid-body.svelte';
+export { default as BodyCell } from '../calendar/body-cell/calendar-body-cell.svelte';