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

package/dist/FOCUS_STATE_CONTRACT.md

@@ -0,0 +1,51 @@
+# Focus State Contract
+
+## Scope
+
+Focus-state contract for composed and interactive library components.
+
+## Canonical Attributes
+
+- `data-focused`: focused interactive element (real focus or logical focus for active item).
+- `data-focus-visible`: visible focus based on keyboard/screen-reader modality.
+- `data-focus-within`: any descendant inside the composed container has focus.
+
+## Serialization Rules
+
+1. Attributes are serialized as presence (`"true"`) or absence.
+2. Never serialize `"false"`.
+
+## Invariants
+
+1. On containers, `data-focus-visible` implies `data-focus-within`.
+2. On items, `data-focus-visible` implies `data-focused`.
+3. On external blur (focus leaves scope), clear container `data-focus-within` and `data-focus-visible`.
+
+## Modality
+
+- Keyboard/SR: may activate `data-focus-visible`.
+- Pointer: should not activate `data-focus-visible` by default.
+
+Canonical implementation lives in `primitives/input-modality.ts`:
+
+- `trackInteractionModality(event, target)` records input modality transitions.
+- `shouldShowFocusVisible(target)` resolves whether `data-focus-visible` should be shown.
+- `focusWithModality(target, modality)` atomically sets modality + programmatic focus restore.
+- Keep explicit `trackInteractionModality` calls in component keyboard/pointer handlers to guarantee deterministic modality updates before local focus-state logic runs.
+
+## Restore focus
+
+On overlay/popover close, transient trigger state is allowed:
+
+- `escape-key` => `data-focused=true` and `data-focus-visible=true`.
+- `outside-press` => `data-focused=true` and `data-focus-visible` absent.
+
+## Recommended Implementation
+
+- Native visual baseline: `:focus`, `:focus-visible`, `:focus-within`.
+- Use `data-*` for composed state and restore semantics.
+- Avoid overengineering: centralize minimal synchronization utilities and validate with contract tests.
+
+## Operational Template
+
+- Use `FOCUS_STATE_REVIEW_TEMPLATE.md` for PR/release reviews (modality matrix + component status + checklist).

package/dist/FOCUS_STATE_REVIEW_TEMPLATE.md

@@ -0,0 +1,70 @@
+# Focus State Review Template
+
+## Usage
+
+Template to validate focus-related changes without adding extra CI guardrails.
+Fill this out for PRs that modify interaction, keyboard navigation, overlays, or focus-based styling.
+
+## 1) Review Metadata
+
+- PR/Branch:
+- Component(s):
+- Reviewer:
+- Date:
+- Verified browsers:
+  - [ ] Chromium
+  - [ ] Firefox
+  - [ ] WebKit/Safari
+
+## 2) Minimum Modality Matrix (per component)
+
+> Mark **OK/NA/FAIL** and add a short note when failing.
+
+| Scenario                           | What to validate                                                            | Status | Note |
+| ---------------------------------- | --------------------------------------------------------------------------- | ------ | ---- |
+| Keyboard (Tab/Arrow/Home/End/Page) | `data-*` and ARIA stay in sync with logical focus                           |        |      |
+| Pointer (click/mousedown)          | do not elevate `data-focus-visible` by default                              |        |      |
+| External blur                      | transient state cleanup (`data-focus-within`, `data-focus-visible`)         |        |      |
+| Close restore (`escape-key`)       | trigger: `data-focused=true`, `data-focus-visible=true` (when applicable)   |        |      |
+| Close restore (`outside-press`)    | trigger: `data-focused=true`, `data-focus-visible` absent (when applicable) |        |      |
+| Programmatic focus                 | does not break invariants or leave stale state                              |        |      |
+
+## 3) Required Invariants
+
+- [ ] Never serialize `'false'` for `data-focused`, `data-focus-visible`, `data-focus-within`.
+- [ ] On containers: `data-focus-visible => data-focus-within`.
+- [ ] On items: `data-focus-visible => data-focused`.
+- [ ] No visible desync between real focus, logical focus, and `data-*` attributes.
+
+## 4) Component Status (living status)
+
+> Use one row per component touched or audited.
+
+| Component  | Status                            | Current coverage | Residual risk   | Owner |
+| ---------- | --------------------------------- | ---------------- | --------------- | ----- |
+| DatePicker | Contract-ready / Partial / Legacy | tests + manual   | low/medium/high |       |
+| Popover    | Contract-ready / Partial / Legacy | tests + manual   | low/medium/high |       |
+| ListBox    | Contract-ready / Partial / Legacy | tests + manual   | low/medium/high |       |
+| ComboBox   | Contract-ready / Partial / Legacy | tests + manual   | low/medium/high |       |
+| Dialog     | Contract-ready / Partial / Legacy | tests + manual   | low/medium/high |       |
+| Calendar   | Contract-ready / Partial / Legacy | tests + manual   | low/medium/high |       |
+
+## 5) PR Checklist
+
+- [ ] If focus/keyboard/overlay behavior changed, tests were added or updated.
+- [ ] Shared helper was used: `src/lib/test-utils/focus-contract.ts`.
+- [ ] Focused suites for affected components were run.
+- [ ] If the change was cross-cutting, full package test suite was run.
+
+## 6) Suggested Commands
+
+- Focused (example):
+  - `bun run test -- --run src/lib/datepicker src/lib/popover src/lib/listbox src/lib/combobox src/lib/dialog src/lib/calendar`
+- Full:
+  - `bun run test -- --run`
+
+## 7) Final Decision
+
+- Final status: [ ] Approved [ ] Approved with risk [ ] Blocked
+- Residual risk summary:
+- Follow-up actions:

package/dist/calendar/README.md

@@ -0,0 +1,66 @@
+# Calendar
+
+## Description
+
+`Calendar` provides single-date and range selection (ISO `YYYY-MM-DD`) with keyboard navigation, controlled/uncontrolled state, and part-based composition.
+
+## Usage Guidelines
+
+- Use `Calendar.Root` as the stateful container.
+- `selectionMode` supports `'single'` (default) and `'range'`.
+- In controlled mode, use `value` with `onChange`; in uncontrolled mode, use `defaultValue`.
+- In `single` mode, `value/defaultValue` is `YYYY-MM-DD`.
+- In `range` mode, `value/defaultValue` is `{ start?: 'YYYY-MM-DD', end?: 'YYYY-MM-DD' }`.
+- `visibleMonths` controls how many months are rendered and how paging behaves.
+- `showOutsideDays` controls whether days outside the current month are shown; default is `false`.
+- `isDateUnavailable` marks specific days as non-focusable and non-selectable.
+- Use `LocaleProvider` to localize month/day labels and first day of week.
+- Keyboard navigation uses `Arrow` keys for day/week movement and `Home/End` for month edges.
+
+## Accessibility
+
+- Each `grid` exposes an accessible name using the visible month heading.
+- Today exposes `aria-current="date"`.
+- Unavailable cells expose `aria-disabled="true"`. According to ARIA Grid specifications, disabled cells remain focusable so that screen reader users can spatially navigate and discover them, but they are not selectable.
+
+### Keyboard
+
+- `ArrowRight/ArrowLeft`: move focus by +/- 1 day.
+- `ArrowDown/ArrowUp`: move focus by +/- 7 days.
+- `Home/End`: move focus to first/last day of month.
+- `PageUp/PageDown`: move to previous/next month while trying to preserve day number.
+- `Enter` or `Space`: select the focused date (if selectable).
+- In `selectionMode="range"`, `Arrow/Page/Home/End` extend preview range while a range is pending.
+- In `selectionMode="range"`, `Enter` or `Space` confirm the preview when pending.
+
+## Internal Notes
+
+- `PageUp/PageDown` try to preserve the day when crossing months; if no focusable target exists in the destination month and a range is pending, focus falls back to the reachable edge in the current month (aligned with `Home/End` behavior).
+- In `selectionMode="range"`, the first click starts the range (`start`) and the second click confirms it (`end`), with automatic normalization for reversed selection order.
+- In `selectionMode="range"`, hover updates a live preview before confirmation.
+
+## Anatomy
+
+- `Calendar.Root`
+- `Calendar.TriggerPrevious`
+- `Calendar.Heading`
+- `Calendar.TriggerNext`
+- `Calendar.Grid`
+- `Calendar.GridHeader`
+- `Calendar.HeaderCell`
+- `Calendar.GridBody`
+- `Calendar.BodyCell`
+
+```svelte
+<LocaleProvider locale="es-ES">
+	<Calendar.Root>
+		<Calendar.TriggerPrevious />
+		<Calendar.Heading />
+		<Calendar.TriggerNext />
+		<Calendar.Grid>
+			<Calendar.GridHeader />
+			<Calendar.GridBody />
+		</Calendar.Grid>
+	</Calendar.Root>
+</LocaleProvider>
+```

package/dist/calendar/TODO.md

@@ -0,0 +1,23 @@
+# Calendar TODO
+
+## Goal
+
+Track Calendar work with a single mandatory TODO format.
+
+## Backlog
+
+- [x] [M][P0][Area: Core API][Owner: Unassigned][Target: Done] Implement controlled/uncontrolled root (`value`, `defaultValue`, `onChange`).
+- [x] [M][P0][Area: Navigation][Owner: Unassigned][Target: Done] Implement paginated navigation via `visibleMonths`.
+- [x] [M][P0][Area: Selection][Owner: Unassigned][Target: Done] Implement single-date selection.
+- [x] [M][P0][Area: State][Owner: Unassigned][Target: Done] Support `isDisabled`, `isReadOnly`, and `isDateUnavailable`.
+- [x] [M][P0][Area: Accessibility][Owner: Unassigned][Target: Done] Deliver keyboard-accessible grid baseline.
+- [x] [M][P0][Area: Delivery][Owner: Unassigned][Target: Done] Ship exports, docs page, and initial tests.
+- [x] [S][P1][Area: Selection][Owner: Unassigned][Target: Done] Implement range selection.
+- [ ] [S][P1][Area: Selection][Owner: Unassigned][Target: TBD] Implement multi-select mode.
+- [ ] [C][P2][Area: Internationalization][Owner: Unassigned][Target: TBD] Add non-Gregorian calendar configuration.
+- [ ] [S][P1][Area: Availability API][Owner: Unassigned][Target: TBD] Add advanced unavailable API (set/ranges/rules).
+- [ ] [M][P0][Area: Availability API][Owner: Unassigned][Target: TBD] Keep backward compatibility with `isDateUnavailable`.
+- [ ] [M][P0][Area: Performance][Owner: Unassigned][Target: TBD] Compile unavailability config to cached predicate with proper invalidation.
+- [ ] [M][P0][Area: Testing][Owner: Unassigned][Target: TBD] Add coverage for unavailable parser, composition rules, and interaction flows.
+- [ ] [S][P1][Area: Documentation][Owner: Unassigned][Target: TBD] Document advanced unavailable API with migration examples.
+- [ ] [C][P2][Area: Demo][Owner: Unassigned][Target: TBD] Extend docs demo with unavailable strategy examples.

package/dist/calendar/body-cell/calendar-body-cell.svelte

@@ -0,0 +1,230 @@
+<script module lang="ts">
+	const ariaDateFormatterCache: Record<string, Intl.DateTimeFormat> = Object.create(null);
+
+	function getAriaDateFormatter(locale: string): Intl.DateTimeFormat {
+		let formatter = ariaDateFormatterCache[locale];
+		if (!formatter) {
+			formatter = new Intl.DateTimeFormat(locale, {
+				dateStyle: 'full',
+				timeZone: 'UTC'
+			});
+			ariaDateFormatterCache[locale] = formatter;
+		}
+		return formatter;
+	}
+
+	function formatAriaDateLabel(locale: string, date: string): string {
+		const [yearText, monthText, dayText] = date.split('-');
+		const year = Number(yearText);
+		const month = Number(monthText);
+		const day = Number(dayText);
+
+		if (!Number.isInteger(year) || !Number.isInteger(month) || !Number.isInteger(day)) {
+			return date;
+		}
+
+		const parsed = new Date(Date.UTC(year, month - 1, day));
+		if (Number.isNaN(parsed.getTime())) return date;
+
+		return getAriaDateFormatter(locale).format(parsed);
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { useCalendarContext } from '../root/context';
+	import { getCalendarMonthIndex } from '../grid/month-scope';
+	import { formatCalendarDate, getTodayUtcDate, parseCalendarDate } from '../root/date-utils';
+	import {
+		shouldShowFocusVisible,
+		trackInteractionModality
+	} from '../../primitives/input-modality';
+
+	type CalendarBodyCellProps = Omit<HTMLAttributes<HTMLTableCellElement>, 'children'> & {
+		date: string;
+		children?: Snippet<[string]>;
+	};
+
+	let { date, children, class: className = '', ...restProps }: CalendarBodyCellProps = $props();
+
+	const calendar = useCalendarContext();
+	const layoutVersion = calendar.layoutVersion;
+	const selectionVersion = calendar.selectionVersion;
+	const monthIndex = getCalendarMonthIndex();
+
+	const parsedDate = $derived(parseCalendarDate(date));
+	const dayLabel = $derived(parsedDate ? String(parsedDate.getUTCDate()) : '');
+	const isSelected = $derived.by(() => {
+		void $layoutVersion;
+		void $selectionVersion;
+		if (calendar.isDisabled || calendar.isReadOnly) return false;
+		return calendar.isSelected(date);
+	});
+	const isRangeStart = $derived.by(() => {
+		void $layoutVersion;
+		void $selectionVersion;
+		if (calendar.isDisabled || calendar.isReadOnly) return false;
+		return calendar.isRangeStart(date);
+	});
+	const isRangeEnd = $derived.by(() => {
+		void $layoutVersion;
+		void $selectionVersion;
+		if (calendar.isDisabled || calendar.isReadOnly) return false;
+		return calendar.isRangeEnd(date);
+	});
+	const isInRange = $derived.by(() => {
+		void $layoutVersion;
+		void $selectionVersion;
+		if (calendar.isDisabled || calendar.isReadOnly) return false;
+		return calendar.isInRange(date);
+	});
+	const isFocused = $derived.by(() => {
+		void $selectionVersion;
+		return calendar.focusedValue === date;
+	});
+	const isFocusVisible = $derived.by(() => {
+		void $selectionVersion;
+		return calendar.focusVisible;
+	});
+	const isVisuallyFocused = $derived(isFocused && isFocusVisible);
+	const isDisabled = $derived.by(() => {
+		void $layoutVersion;
+		void $selectionVersion;
+		return calendar.isDateDisabled(date);
+	});
+	const isUnavailable = $derived.by(() => {
+		void $layoutVersion;
+		return calendar.isDateUnavailable(date);
+	});
+	const isAriaDisabled = $derived(isDisabled || isUnavailable);
+	const isOutsideMonth = $derived.by(() => {
+		void $layoutVersion;
+		return calendar.isOutsideVisibleRange(date, monthIndex);
+	});
+	const showOutsideDays = $derived.by(() => {
+		void $layoutVersion;
+		return calendar.showOutsideDays;
+	});
+	const hidesOutsideDay = $derived(isOutsideMonth && !showOutsideDays);
+	const isSelectionDisabled = $derived(isDisabled || hidesOutsideDay);
+	const isFocusDisabled = $derived(calendar.isDisabled || hidesOutsideDay);
+	const todayDate = formatCalendarDate(getTodayUtcDate());
+	const isToday = $derived(date === todayDate);
+	const ariaDateLabel = $derived.by(() => {
+		void $layoutVersion;
+		return formatAriaDateLabel(calendar.locale, date);
+	});
+
+	let gridCellElement = $state<HTMLDivElement | undefined>(undefined);
+
+	$effect(() => {
+		if (!isFocused || isFocusDisabled) return;
+		if (!gridCellElement) return;
+		if (document.activeElement === gridCellElement) return;
+		gridCellElement.focus();
+	});
+
+	$effect(() => {
+		if (!isFocusDisabled) return;
+		if (!gridCellElement) return;
+		if (document.activeElement !== gridCellElement) return;
+		gridCellElement.blur();
+	});
+
+	function handleClick() {
+		if (isFocusDisabled) return;
+		calendar.setFocusedValue(date);
+		if (!isSelectionDisabled) {
+			calendar.selectDate(date);
+		}
+	}
+
+	function handleFocus() {
+		if (isFocusDisabled) return;
+		calendar.setFocusedValue(date);
+		calendar.setFocusVisible(shouldShowFocusVisible(gridCellElement ?? null));
+	}
+
+	function handleMousedown(event: MouseEvent) {
+		trackInteractionModality(event, gridCellElement ?? null);
+		calendar.setFocusVisible(false);
+		if (isSelectionDisabled) {
+			event.preventDefault();
+		}
+	}
+
+	function handleMouseenter() {
+		if (isFocusDisabled) return;
+		calendar.setHoveredValue(date);
+	}
+
+	function handleMouseleave() {
+		if (isFocusDisabled) return;
+		calendar.setHoveredValue(undefined);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (isFocusDisabled) return;
+		trackInteractionModality(event, gridCellElement ?? null);
+		calendar.handleCellKeydown(event, date);
+	}
+</script>
+
+<td
+	role="presentation"
+	data-selected={isSelected || undefined}
+	data-focused={isFocused || undefined}
+	data-focus-visible={isVisuallyFocused || undefined}
+	data-disabled={isAriaDisabled || undefined}
+	data-unavailable={isUnavailable || undefined}
+	data-outside-month={isOutsideMonth || undefined}
+	data-range-start={isRangeStart || undefined}
+	data-range-end={isRangeEnd || undefined}
+	data-in-range={isInRange || undefined}
+	{...restProps}
+>
+	{#if hidesOutsideDay}
+		<div
+			class={className}
+			role="presentation"
+			data-disabled={true}
+			data-outside-month={true}
+			aria-hidden="true"
+		></div>
+	{:else}
+		<div
+			bind:this={gridCellElement}
+			class={className}
+			role="gridcell"
+			tabindex={isFocusDisabled ? -1 : isFocused ? 0 : -1}
+			data-selected={isSelected || undefined}
+			data-focused={isFocused || undefined}
+			data-focus-visible={isVisuallyFocused || undefined}
+			data-disabled={isAriaDisabled || hidesOutsideDay || undefined}
+			data-unavailable={isUnavailable || undefined}
+			data-outside-month={isOutsideMonth || undefined}
+			data-range-start={isRangeStart || undefined}
+			data-range-end={isRangeEnd || undefined}
+			data-in-range={isInRange || undefined}
+			data-date={date}
+			aria-selected={isSelected}
+			aria-disabled={isAriaDisabled || hidesOutsideDay || undefined}
+			aria-current={isToday ? 'date' : undefined}
+			aria-label={ariaDateLabel}
+			style={isVisuallyFocused ? undefined : 'outline: none;'}
+			onmousedown={handleMousedown}
+			onmouseenter={handleMouseenter}
+			onmouseleave={handleMouseleave}
+			onclick={handleClick}
+			onfocus={handleFocus}
+			onkeydown={handleKeydown}
+		>
+			{#if children}
+				{@render children(date)}
+			{:else}
+				{dayLabel}
+			{/if}
+		</div>
+	{/if}
+</td>

package/dist/calendar/body-cell/calendar-body-cell.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type CalendarBodyCellProps = Omit<HTMLAttributes<HTMLTableCellElement>, 'children'> & {
+    date: string;
+    children?: Snippet<[string]>;
+};
+declare const CalendarBodyCell: import("svelte").Component<CalendarBodyCellProps, {}, "">;
+type CalendarBodyCell = ReturnType<typeof CalendarBodyCell>;
+export default CalendarBodyCell;

package/dist/calendar/grid/calendar-grid-month-scope.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setCalendarMonthIndex } from './month-scope';
+
+	type CalendarGridMonthScopeProps = {
+		monthIndex: number;
+		children?: Snippet;
+	};
+
+	const props: CalendarGridMonthScopeProps = $props();
+	setCalendarMonthIndex(props.monthIndex);
+</script>
+
+{#if props.children}
+	{@render props.children()}
+{/if}

package/dist/calendar/grid/calendar-grid-month-scope.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type CalendarGridMonthScopeProps = {
+    monthIndex: number;
+    children?: Snippet;
+};
+declare const CalendarGridMonthScope: import("svelte").Component<CalendarGridMonthScopeProps, {}, "">;
+type CalendarGridMonthScope = ReturnType<typeof CalendarGridMonthScope>;
+export default CalendarGridMonthScope;

package/dist/calendar/grid/calendar-grid.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { useCalendarContext } from '../root/context';
+	import CalendarGridMonthScope from './calendar-grid-month-scope.svelte';
+
+	type CalendarGridProps = {
+		children?: Snippet;
+		class?: string;
+	};
+
+	let { children, class: className = '' }: CalendarGridProps = $props();
+	const calendar = useCalendarContext();
+	const layoutVersion = calendar.layoutVersion;
+	const months = $derived.by(() => {
+		void $layoutVersion;
+		return calendar.months;
+	});
+	const selectionMode = $derived.by(() => {
+		void $layoutVersion;
+		return calendar.selectionMode;
+	});
+	const isReadOnly = $derived.by(() => {
+		void $layoutVersion;
+		return calendar.isReadOnly;
+	});
+</script>
+
+<div class={className} data-calendar-grid>
+	{#each months as month (month.monthIndex)}
+		<div role="group" aria-label={month.heading} data-calendar-month={month.monthIndex}>
+			<CalendarGridMonthScope monthIndex={month.monthIndex}>
+				<table
+					role="grid"
+					aria-label={month.heading}
+					aria-readonly={isReadOnly || undefined}
+					aria-multiselectable={selectionMode === 'range' ? true : undefined}
+				>
+					{#if children}
+						{@render children()}
+					{/if}
+				</table>
+			</CalendarGridMonthScope>
+		</div>
+	{/each}
+</div>

package/dist/calendar/grid/calendar-grid.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type CalendarGridProps = {
+    children?: Snippet;
+    class?: string;
+};
+declare const CalendarGrid: import("svelte").Component<CalendarGridProps, {}, "">;
+type CalendarGrid = ReturnType<typeof CalendarGrid>;
+export default CalendarGrid;

package/dist/calendar/grid/month-scope.d.ts

@@ -0,0 +1,2 @@
+export declare function setCalendarMonthIndex(monthIndex: number): void;
+export declare function getCalendarMonthIndex(): number;

package/dist/calendar/grid/month-scope.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from 'svelte';
+const MONTH_SCOPE_KEY = Symbol('calendar-month-scope');
+export function setCalendarMonthIndex(monthIndex) {
+    setContext(MONTH_SCOPE_KEY, monthIndex);
+}
+export function getCalendarMonthIndex() {
+    return getContext(MONTH_SCOPE_KEY) ?? 0;
+}

package/dist/calendar/grid-body/calendar-grid-body-custom-test.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import Calendar from '../index';
+</script>
+
+<Calendar.Root defaultValue="2026-02-10" aria-label="Body custom test">
+	<Calendar.Grid>
+		<Calendar.GridBody>
+			{#snippet children(date)}
+				<Calendar.BodyCell {date}>{date}</Calendar.BodyCell>
+			{/snippet}
+		</Calendar.GridBody>
+	</Calendar.Grid>
+</Calendar.Root>

package/dist/calendar/grid-body/calendar-grid-body-custom-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 CalendarGridBodyCustomTest: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CalendarGridBodyCustomTest = InstanceType<typeof CalendarGridBodyCustomTest>;
+export default CalendarGridBodyCustomTest;

package/dist/calendar/grid-body/calendar-grid-body.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { useCalendarContext } from '../root/context';
+	import { getCalendarMonthIndex } from '../grid/month-scope';
+	import CalendarBodyCell from '../body-cell/calendar-body-cell.svelte';
+
+	type CalendarGridBodyProps = {
+		children?: Snippet<[string]>;
+		class?: string;
+	};
+
+	let { children, class: className = '' }: CalendarGridBodyProps = $props();
+
+	const calendar = useCalendarContext();
+	const layoutVersion = calendar.layoutVersion;
+	const monthIndex = getCalendarMonthIndex();
+	const month = $derived.by(() => {
+		void $layoutVersion;
+		return calendar.months[monthIndex];
+	});
+	const weeks = $derived(month?.weeks ?? []);
+</script>
+
+<tbody class={className}>
+	{#each weeks as week, weekIndex (weekIndex)}
+		<tr data-week={weekIndex}>
+			{#each week as day (day.date)}
+				{#if children}
+					{@render children(day.date)}
+				{:else}
+					<CalendarBodyCell date={day.date} />
+				{/if}
+			{/each}
+		</tr>
+	{/each}
+</tbody>

package/dist/calendar/grid-body/calendar-grid-body.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type CalendarGridBodyProps = {
+    children?: Snippet<[string]>;
+    class?: string;
+};
+declare const CalendarGridBody: import("svelte").Component<CalendarGridBodyProps, {}, "">;
+type CalendarGridBody = ReturnType<typeof CalendarGridBody>;
+export default CalendarGridBody;

package/dist/calendar/grid-header/calendar-grid-header-custom-test.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import Calendar from '../index';
+</script>
+
+<Calendar.Root defaultValue="2026-02-10" aria-label="Header custom test">
+	<Calendar.Grid>
+		<Calendar.GridHeader>
+			{#snippet children(day)}
+				<Calendar.HeaderCell>DAY-{day}</Calendar.HeaderCell>
+			{/snippet}
+		</Calendar.GridHeader>
+	</Calendar.Grid>
+</Calendar.Root>

package/dist/calendar/grid-header/calendar-grid-header-custom-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 CalendarGridHeaderCustomTest: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CalendarGridHeaderCustomTest = InstanceType<typeof CalendarGridHeaderCustomTest>;
+export default CalendarGridHeaderCustomTest;