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

package/dist/calendar/root/calendar-root.svelte

@@ -34,6 +34,7 @@
 	type CalendarRootProps = {
 		selectionMode?: CalendarSelectionMode;
 		visibleMonths?: number;
+		showOutsideDays?: boolean;
 		isDateUnavailable?: (date: string) => boolean;
 		isDisabled?: boolean;
 		isReadOnly?: boolean;
@@ -62,6 +63,7 @@
 	let {
 		selectionMode = 'single',
 		visibleMonths = 1,
+		showOutsideDays = false,
 		isDateUnavailable,
 		isDisabled = false,
 		isReadOnly = false,
@@ -100,6 +102,7 @@
 		return {
 			selectionMode,
 			visibleMonths,
+			showOutsideDays,
 			locale: resolvedLocale,
 			isDateUnavailable,
 			isDisabled,

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

@@ -4,6 +4,7 @@ import { type CalendarDateValue } from './date-utils';
 type CalendarRootProps = {
     selectionMode?: CalendarSelectionMode;
     visibleMonths?: number;
+    showOutsideDays?: boolean;
     isDateUnavailable?: (date: string) => boolean;
     isDisabled?: boolean;
     isReadOnly?: boolean;

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

@@ -16,6 +16,7 @@ export type CalendarMonth = {
 export type CreateCalendarContextOptions<TSelectionMode extends CalendarSelectionMode = CalendarSelectionMode> = {
     selectionMode?: TSelectionMode;
     visibleMonths?: number;
+    showOutsideDays?: boolean;
     locale?: string;
     isDisabled?: boolean;
     isReadOnly?: boolean;
@@ -31,12 +32,14 @@ export type CalendarContext = {
     selectionMode: CalendarSelectionMode;
     firstDayOfWeek: number;
     visibleMonths: number;
+    showOutsideDays: boolean;
     isDisabled: boolean;
     isReadOnly: boolean;
     months: CalendarMonth[];
     selectedValue: CalendarDateValue | undefined;
     rangeValue: CalendarRangeValue | undefined;
     focusedValue: CalendarDateValue;
+    focusVisible: boolean;
     weekdayLabels: string[];
     headingLabel: string;
     isSelected: (date: CalendarDateValue) => boolean;
@@ -47,6 +50,7 @@ export type CalendarContext = {
     isDateDisabled: (date: CalendarDateValue) => boolean;
     isOutsideVisibleRange: (date: CalendarDateValue, monthIndex: number) => boolean;
     setFocusedValue: (date: CalendarDateValue) => void;
+    setFocusVisible: (visible: boolean) => void;
     setHoveredValue: (date: CalendarDateValue | undefined) => void;
     selectDate: (date: CalendarDateValue) => void;
     goToNextPage: () => void;

package/dist/calendar/root/context.js

@@ -2,9 +2,8 @@ import { getContext, setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import { addDays, addMonths, buildMonthGrid, compareDates, formatCalendarDate, formatMonthHeading, getFirstDayOfWeek, getTodayUtcDate, getWeekdayLabels, isValidCalendarDateValue, parseCalendarDate, startOfMonth } from './date-utils';
 const KEY = Symbol('calendar');
-const MAX_FOCUS_SEARCH_DAYS = 370;
 export function createCalendarContext(options) {
-    let { selectionMode = 'single', visibleMonths = 1, locale = Intl.DateTimeFormat().resolvedOptions().locale, isDisabled = false, isReadOnly = false, isDateUnavailable, onChange } = options;
+    let { selectionMode = 'single', visibleMonths = 1, showOutsideDays = false, locale = Intl.DateTimeFormat().resolvedOptions().locale, isDisabled = false, isReadOnly = false, isDateUnavailable, onChange } = options;
     const { value, defaultValue } = options;
     function isRangeValue(valueToCheck) {
         if (!valueToCheck || typeof valueToCheck === 'string')
@@ -85,6 +84,7 @@ export function createCalendarContext(options) {
         initialRangeSelected?.end ??
         initialRangeSelected?.start ??
         fallbackToday;
+    let currentFocusVisible = false;
     let currentVisibleMonth = startOfMonth(parseCalendarDate(currentFocused) ?? getTodayUtcDate());
     let cachedMonths = [];
     let hasCachedMonths = false;
@@ -93,6 +93,7 @@ export function createCalendarContext(options) {
     let pendingRangePathCacheStart;
     let previousUnavailableFn = isDateUnavailable;
     let previousVisibleMonths = visibleMonths;
+    let previousShowOutsideDays = showOutsideDays;
     let previousLocale = locale;
     let cachedFirstDayOfWeek = getFirstDayOfWeek(locale);
     const layoutVersion = writable(0);
@@ -133,16 +134,19 @@ export function createCalendarContext(options) {
         let shouldNotifySelection = false;
         const nextSelectionMode = next.selectionMode ?? 'single';
         const nextVisibleMonths = Math.max(1, next.visibleMonths ?? 1);
+        const nextShowOutsideDays = next.showOutsideDays ?? false;
         const nextLocale = next.locale ?? Intl.DateTimeFormat().resolvedOptions().locale;
         const nextUnavailableFn = next.isDateUnavailable;
         if (nextUnavailableFn !== previousUnavailableFn ||
             nextVisibleMonths !== previousVisibleMonths ||
+            nextShowOutsideDays !== previousShowOutsideDays ||
             nextLocale !== previousLocale) {
             clearUnavailableCache();
             shouldNotifyLayout = true;
         }
         previousUnavailableFn = nextUnavailableFn;
         previousVisibleMonths = nextVisibleMonths;
+        previousShowOutsideDays = nextShowOutsideDays;
         previousLocale = nextLocale;
         if (selectionMode !== nextSelectionMode) {
             selectionMode = nextSelectionMode;
@@ -157,6 +161,7 @@ export function createCalendarContext(options) {
             shouldNotifyLayout = true;
         }
         visibleMonths = nextVisibleMonths;
+        showOutsideDays = nextShowOutsideDays;
         locale = nextLocale;
         cachedFirstDayOfWeek = getFirstDayOfWeek(locale);
         if (isDisabled !== (next.isDisabled ?? false) || isReadOnly !== (next.isReadOnly ?? false)) {
@@ -312,7 +317,7 @@ export function createCalendarContext(options) {
                 monthIndex,
                 monthStart,
                 heading: formatMonthHeading(monthStart, locale),
-                weeks: buildMonthGrid(monthStart, firstDayOfWeek)
+                weeks: buildMonthGrid(monthStart, firstDayOfWeek, showOutsideDays)
             };
         });
         hasCachedMonths = true;
@@ -359,7 +364,7 @@ export function createCalendarContext(options) {
         return result;
     }
     function isDateDisabled(date) {
-        if (isDisabled || isUnavailable(date))
+        if (isDisabled)
             return true;
         if (selectionMode === 'range' && currentRangeStart && !currentRangeEnd) {
             return !isPendingRangePathSelectable(date);
@@ -386,6 +391,12 @@ export function createCalendarContext(options) {
         }
         notifySelection();
     }
+    function setFocusVisible(visible) {
+        if (currentFocusVisible === visible)
+            return;
+        currentFocusVisible = visible;
+        notifySelection();
+    }
     function setHoveredValue(date) {
         if (selectionMode !== 'range')
             return;
@@ -514,7 +525,7 @@ export function createCalendarContext(options) {
             return undefined;
         const next = addDays(parsed, amount);
         const nextValue = formatCalendarDate(next);
-        const focusableValue = findFocusableDate(nextValue, amount);
+        const focusableValue = findFocusableDate(nextValue);
         if (!focusableValue)
             return undefined;
         setFocusedValue(focusableValue);
@@ -526,8 +537,7 @@ export function createCalendarContext(options) {
             return undefined;
         const next = addMonths(parsed, amount);
         const nextValue = formatCalendarDate(next);
-        const dayStep = amount >= 0 ? 1 : -1;
-        const focusableValue = findFocusableDate(nextValue, dayStep);
+        const focusableValue = findFocusableDate(nextValue);
         if (!focusableValue) {
             if (selectionMode === 'range' && currentRangeStart && !currentRangeEnd) {
                 return moveToMonthEdge(baseDate, amount >= 0 ? 'end' : 'start');
@@ -545,33 +555,19 @@ export function createCalendarContext(options) {
         const monthEnd = addDays(addMonths(monthStart, 1), -1);
         const targetDate = edge === 'start' ? monthStart : monthEnd;
         const nextValue = formatCalendarDate(targetDate);
-        const dayStep = edge === 'start' ? 1 : -1;
-        const focusableValue = findFocusableDate(nextValue, dayStep);
+        const focusableValue = findFocusableDate(nextValue);
         if (!focusableValue)
             return undefined;
         setFocusedValue(focusableValue);
         return focusableValue;
     }
-    function findFocusableDate(targetDate, dayStep) {
+    function findFocusableDate(targetDate) {
         if (isDisabled)
             return undefined;
-        if (!isDateDisabled(targetDate))
-            return targetDate;
-        if (dayStep === 0)
-            return undefined;
-        let current = parseCalendarDate(targetDate);
-        if (!current)
-            return undefined;
-        for (let index = 0; index < MAX_FOCUS_SEARCH_DAYS; index++) {
-            current = addDays(current, dayStep > 0 ? 1 : -1);
-            const candidate = formatCalendarDate(current);
-            if (!isDateDisabled(candidate)) {
-                return candidate;
-            }
-        }
-        return undefined;
+        return targetDate;
     }
     function handleCellKeydown(event, date) {
+        setFocusVisible(true);
         const keyDate = isValidCalendarDateValue(currentFocused) ? currentFocused : date;
         let movedDate;
         function extendRangeWithKeyboard(nextDate) {
@@ -668,6 +664,9 @@ export function createCalendarContext(options) {
         get visibleMonths() {
             return visibleMonths;
         },
+        get showOutsideDays() {
+            return showOutsideDays;
+        },
         get isDisabled() {
             return isDisabled;
         },
@@ -686,6 +685,9 @@ export function createCalendarContext(options) {
         get focusedValue() {
             return currentFocused;
         },
+        get focusVisible() {
+            return currentFocusVisible;
+        },
         get weekdayLabels() {
             return getWeekdayLabels(locale, cachedFirstDayOfWeek);
         },
@@ -700,6 +702,7 @@ export function createCalendarContext(options) {
         isDateDisabled,
         isOutsideVisibleRange,
         setFocusedValue,
+        setFocusVisible,
         setHoveredValue,
         selectDate,
         goToNextPage,

package/dist/calendar/root/date-utils.d.ts

@@ -13,5 +13,5 @@ export type CalendarDayCell = {
     date: CalendarDateValue;
     isOutsideMonth: boolean;
 };
-export declare function buildMonthGrid(monthStart: Date, firstDayOfWeek: number): CalendarDayCell[][];
+export declare function buildMonthGrid(monthStart: Date, firstDayOfWeek: number, showOutsideDays?: boolean): CalendarDayCell[][];
 export declare function formatMonthHeading(date: Date, locale: string): string;

package/dist/calendar/root/date-utils.js

@@ -1,43 +1,28 @@
-const DATE_RE = /^(\d{4})-(\d{2})-(\d{2})$/;
+import { createUtcDate, formatDateOnlyValue, isValidDateOnlyValue, parseDateOnlyValue } from '../../utils/date-only';
 export function isValidCalendarDateValue(value) {
-    const match = DATE_RE.exec(value);
-    if (!match)
-        return false;
-    const year = Number(match[1]);
-    const month = Number(match[2]);
-    const day = Number(match[3]);
-    if (month < 1 || month > 12 || day < 1 || day > 31)
-        return false;
-    const date = new Date(Date.UTC(year, month - 1, day));
-    return (date.getUTCFullYear() === year && date.getUTCMonth() === month - 1 && date.getUTCDate() === day);
+    return isValidDateOnlyValue(value);
 }
 export function parseCalendarDate(value) {
-    if (!isValidCalendarDateValue(value))
-        return null;
-    const [year, month, day] = value.split('-').map(Number);
-    return new Date(Date.UTC(year, month - 1, day));
+    return parseDateOnlyValue(value);
 }
 export function formatCalendarDate(date) {
-    const year = date.getUTCFullYear();
-    const month = String(date.getUTCMonth() + 1).padStart(2, '0');
-    const day = String(date.getUTCDate()).padStart(2, '0');
-    return `${year}-${month}-${day}`;
+    return formatDateOnlyValue(date);
 }
 export function startOfMonth(date) {
-    return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1));
+    return createUtcDate(date.getUTCFullYear(), date.getUTCMonth(), 1);
 }
 function getDaysInMonthUtc(year, monthIndex) {
-    return new Date(Date.UTC(year, monthIndex + 1, 0)).getUTCDate();
+    return createUtcDate(year, monthIndex + 1, 0).getUTCDate();
 }
 export function addMonths(date, amount) {
     const targetMonth = date.getUTCMonth() + amount;
     const targetYear = date.getUTCFullYear() + Math.floor(targetMonth / 12);
     const normalizedMonth = ((targetMonth % 12) + 12) % 12;
     const targetDay = Math.min(date.getUTCDate(), getDaysInMonthUtc(targetYear, normalizedMonth));
-    return new Date(Date.UTC(targetYear, normalizedMonth, targetDay));
+    return createUtcDate(targetYear, normalizedMonth, targetDay);
 }
 export function addDays(date, amount) {
-    return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + amount));
+    return createUtcDate(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + amount);
 }
 export function compareDates(a, b) {
     const at = a.getTime();
@@ -50,7 +35,7 @@ export function compareDates(a, b) {
 }
 export function getTodayUtcDate() {
     const now = new Date();
-    return new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()));
+    return createUtcDate(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate());
 }
 export function getFirstDayOfWeek(locale) {
     try {
@@ -76,13 +61,18 @@ export function getWeekdayLabels(locale, firstDayOfWeek) {
         return formatter.format(addDays(sunday, dayOffset));
     });
 }
-export function buildMonthGrid(monthStart, firstDayOfWeek) {
+export function buildMonthGrid(monthStart, firstDayOfWeek, showOutsideDays = true) {
     const firstOfMonth = startOfMonth(monthStart);
     const firstWeekday = firstOfMonth.getUTCDay();
     const startOffset = (firstWeekday - firstDayOfWeek + 7) % 7;
     const gridStart = addDays(firstOfMonth, -startOffset);
+    const lastOfMonth = addDays(addMonths(firstOfMonth, 1), -1);
+    const lastWeekday = lastOfMonth.getUTCDay();
+    const endOffset = (firstDayOfWeek + 6 - lastWeekday + 7) % 7;
+    const visibleDays = startOffset + lastOfMonth.getUTCDate() + endOffset;
+    const weekCount = showOutsideDays ? 6 : Math.max(1, Math.ceil(visibleDays / 7));
     const weeks = [];
-    for (let weekIndex = 0; weekIndex < 6; weekIndex++) {
+    for (let weekIndex = 0; weekIndex < weekCount; weekIndex++) {
         const week = [];
         for (let dayIndex = 0; dayIndex < 7; dayIndex++) {
             const date = addDays(gridStart, weekIndex * 7 + dayIndex);

package/dist/calendar/trigger-next/README.md

@@ -0,0 +1,14 @@
+# Calendar TriggerNext
+
+## API reference
+
+### Calendar.TriggerNext
+
+Name: `Calendar.TriggerNext`  
+Description: Button part that advances the visible calendar period.
+
+| 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/calendar/trigger-next/calendar-trigger-next.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { ButtonRoot } from '../../button/index.js';
 	import { useCalendarContext } from '../root/context';
 
-	type CalendarTriggerNextProps = Omit<HTMLButtonAttributes, 'children'> & {
+	type CalendarTriggerNextProps = Omit<
+		HTMLButtonAttributes,
+		'children' | 'class' | 'disabled' | 'aria-disabled'
+	> & {
+		class?: string;
 		children?: Snippet;
 	};
 
@@ -22,11 +27,11 @@
 	}
 </script>
 
-<button
+<ButtonRoot
 	type="button"
 	class={className}
 	aria-label="Next page"
-	disabled={isDisabled}
+	{isDisabled}
 	onclick={handleClick}
 	{...restProps}
 >
@@ -35,4 +40,4 @@
 	{:else}
 		Next
 	{/if}
-</button>
+</ButtonRoot>

package/dist/calendar/trigger-next/calendar-trigger-next.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
-type CalendarTriggerNextProps = Omit<HTMLButtonAttributes, 'children'> & {
+type CalendarTriggerNextProps = Omit<HTMLButtonAttributes, 'children' | 'class' | 'disabled' | 'aria-disabled'> & {
+    class?: string;
     children?: Snippet;
 };
 declare const CalendarTriggerNext: import("svelte").Component<CalendarTriggerNextProps, {}, "">;

package/dist/calendar/trigger-previous/README.md

@@ -0,0 +1,14 @@
+# Calendar TriggerPrevious
+
+## API reference
+
+### Calendar.TriggerPrevious
+
+Name: `Calendar.TriggerPrevious`  
+Description: Button part that moves the visible calendar period backward.
+
+| 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/calendar/trigger-previous/calendar-trigger-previous.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { ButtonRoot } from '../../button/index.js';
 	import { useCalendarContext } from '../root/context';
 
-	type CalendarTriggerPreviousProps = Omit<HTMLButtonAttributes, 'children'> & {
+	type CalendarTriggerPreviousProps = Omit<
+		HTMLButtonAttributes,
+		'children' | 'class' | 'disabled' | 'aria-disabled'
+	> & {
+		class?: string;
 		children?: Snippet;
 	};
 
@@ -22,11 +27,11 @@
 	}
 </script>
 
-<button
+<ButtonRoot
 	type="button"
 	class={className}
 	aria-label="Previous page"
-	disabled={isDisabled}
+	{isDisabled}
 	onclick={handleClick}
 	{...restProps}
 >
@@ -35,4 +40,4 @@
 	{:else}
 		Prev
 	{/if}
-</button>
+</ButtonRoot>

package/dist/calendar/trigger-previous/calendar-trigger-previous.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
-type CalendarTriggerPreviousProps = Omit<HTMLButtonAttributes, 'children'> & {
+type CalendarTriggerPreviousProps = Omit<HTMLButtonAttributes, 'children' | 'class' | 'disabled' | 'aria-disabled'> & {
+    class?: string;
     children?: Snippet;
 };
 declare const CalendarTriggerPrevious: import("svelte").Component<CalendarTriggerPreviousProps, {}, "">;

package/dist/checkbox/README.md

@@ -0,0 +1,53 @@
+# Checkbox
+
+## Description
+
+`Checkbox` is a composable tri-state checkbox with separate checked and indeterminate bindings, hidden input form support, and headless indicator rendering.
+
+## Anatomy
+
+- `Checkbox.Root`
+- `Checkbox.Indicator`
+
+```svelte
+<Checkbox.Root aria-label="Accept terms">
+	<Checkbox.Indicator>
+		<CheckIcon />
+	</Checkbox.Indicator>
+</Checkbox.Root>
+```
+
+## Usage guidelines
+
+- Use `isChecked` / `defaultChecked` for the checked state and `isIndeterminate` / `defaultIndeterminate` for the mixed state.
+- `isIndeterminate` takes precedence over `isChecked`. When both are `true`, the checkbox is exposed as indeterminate.
+- Use `value` only for form submission through the hidden native input; it does not represent the visual state.
+- Wrap the checkbox in a native `<label>` for the simplest accessible labeling pattern.
+
+## API reference
+
+- `Checkbox.Root`
+  - `isChecked?: boolean`
+  - `defaultChecked?: boolean`
+  - `isIndeterminate?: boolean`
+  - `defaultIndeterminate?: boolean`
+  - `onCheckedChange?: (checked: boolean) => void`
+  - `onIndeterminateChange?: (indeterminate: boolean) => void`
+  - `isDisabled?: boolean`
+  - `isReadOnly?: boolean`
+  - `name?: string`
+  - `value?: string`
+  - `required?: boolean`
+- `Checkbox.Indicator`
+  - `keepMounted?: boolean`
+
+## Accessibility
+
+- `Checkbox.Root` exposes `role="checkbox"` with `aria-checked="true" | "false" | "mixed"`.
+- Press `Space` to toggle the checkbox.
+- `isReadOnly` keeps the checkbox focusable while preventing state changes.
+
+## Notes
+
+- The first user toggle from the indeterminate state resolves to checked.
+- A hidden checkbox input is kept in sync for form integration and `label[for]` support.

package/dist/checkbox/TODO.md

@@ -0,0 +1,16 @@
+# Checkbox TODO
+
+## Goal
+
+Track Checkbox work with a single mandatory TODO format.
+
+## Backlog
+
+- [x] [S][P0][Area: Architecture][Owner: Unassigned][Target: Done] Create base `root` and `indicator` parts with namespace exports.
+- [x] [S][P0][Area: State][Owner: Unassigned][Target: Done] Implement checked, unchecked, and indeterminate state transitions.
+- [x] [S][P0][Area: Accessibility][Owner: Unassigned][Target: Done] Add checkbox semantics, keyboard toggle, and readonly behavior.
+- [x] [S][P0][Area: Forms][Owner: Unassigned][Target: Done] Sync a hidden native input for form submission and label targeting.
+- [x] [S][P0][Area: Testing][Owner: Unassigned][Target: Done] Add baseline tests for root and indicator behavior.
+- [ ] [S][P1][Area: API][Owner: Unassigned][Target: TBD] Add optional `nativeButton` rendering mode for sibling-label patterns.
+- [ ] [S][P1][Area: Forms][Owner: Unassigned][Target: TBD] Support unchecked submission values and form reset synchronization.
+- [ ] [C][P2][Area: Animation][Owner: Unassigned][Target: TBD] Add indicator presence data for enter and exit animations.

package/dist/checkbox/index.d.ts

@@ -0,0 +1,6 @@
+export * as Checkbox from './index.parts.js';
+export { default as CheckboxRoot } from './root/checkbox-root.svelte';
+export { default as CheckboxIndicator } from './indicator/checkbox-indicator.svelte';
+export { getCheckboxContext, setCheckboxContext, useCheckboxContext, type CheckboxContext, type CheckboxState } from './root/context.js';
+import * as CheckboxParts from './index.parts.js';
+export default CheckboxParts;

package/dist/checkbox/index.js

@@ -0,0 +1,6 @@
+export * as Checkbox from './index.parts.js';
+export { default as CheckboxRoot } from './root/checkbox-root.svelte';
+export { default as CheckboxIndicator } from './indicator/checkbox-indicator.svelte';
+export { getCheckboxContext, setCheckboxContext, useCheckboxContext } from './root/context.js';
+import * as CheckboxParts from './index.parts.js';
+export default CheckboxParts;

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

@@ -0,0 +1,2 @@
+export { default as Root } from './root/checkbox-root.svelte';
+export { default as Indicator } from './indicator/checkbox-indicator.svelte';

package/dist/checkbox/index.parts.js

@@ -0,0 +1,2 @@
+export { default as Root } from './root/checkbox-root.svelte';
+export { default as Indicator } from './indicator/checkbox-indicator.svelte';

package/dist/checkbox/indicator/README.md

@@ -0,0 +1,23 @@
+# Checkbox Indicator
+
+## API reference
+
+### Checkbox.Indicator
+
+Name: `Checkbox.Indicator`  
+Description: Headless presence wrapper for checkbox indicator content. It renders when the checkbox is checked or indeterminate.
+
+| Prop           | Type                              | Default     | Description                                                              |
+| -------------- | --------------------------------- | ----------- | ------------------------------------------------------------------------ |
+| `keepMounted`  | `boolean`                         | `false`     | Keeps the indicator mounted while hidden when the checkbox is unchecked. |
+| `children`     | `Snippet`                         | `undefined` | Rendered indicator content, such as a check or dash icon.                |
+| `class`        | `string`                          | `''`        | CSS class names for the indicator wrapper.                               |
+| `...restProps` | `HTMLAttributes<HTMLSpanElement>` | `-`         | Additional attributes forwarded to the indicator span.                   |
+
+```svelte
+<Checkbox.Root aria-label="Select row">
+	<Checkbox.Indicator>
+		<CheckIcon />
+	</Checkbox.Indicator>
+</Checkbox.Root>
+```

package/dist/checkbox/indicator/checkbox-indicator.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils/cn';
+	import { useCheckboxContext } from '../root/context';
+
+	type CheckboxIndicatorProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class'> & {
+		keepMounted?: boolean;
+		children?: Snippet;
+		class?: string;
+	};
+
+	let {
+		keepMounted = false,
+		children,
+		class: className = '',
+		...restProps
+	}: CheckboxIndicatorProps = $props();
+
+	const checkbox = useCheckboxContext();
+	const visible = $derived(checkbox.state !== 'unchecked');
+</script>
+
+{#if keepMounted || visible}
+	<span
+		{...restProps}
+		data-checkbox-indicator="true"
+		data-checked={checkbox.isChecked || undefined}
+		data-unchecked={checkbox.state === 'unchecked' || undefined}
+		data-indeterminate={checkbox.isIndeterminate || undefined}
+		data-pressed={checkbox.pressed || undefined}
+		data-disabled={checkbox.isDisabled || undefined}
+		data-readonly={checkbox.isReadOnly || undefined}
+		data-required={checkbox.required || undefined}
+		data-focused={checkbox.focused || undefined}
+		data-focus-visible={checkbox.focusVisible || undefined}
+		hidden={keepMounted && !visible}
+		aria-hidden={keepMounted && !visible ? 'true' : undefined}
+		class={cn('contents', className)}
+	>
+		{@render children?.()}
+	</span>
+{/if}

package/dist/checkbox/indicator/checkbox-indicator.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type CheckboxIndicatorProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class'> & {
+    keepMounted?: boolean;
+    children?: Snippet;
+    class?: string;
+};
+declare const CheckboxIndicator: import("svelte").Component<CheckboxIndicatorProps, {}, "">;
+type CheckboxIndicator = ReturnType<typeof CheckboxIndicator>;
+export default CheckboxIndicator;