entasis 0.10.2 → 0.12.0

package/dist/components/Form/Autocomplete/autocomplete.props.d.ts

@@ -0,0 +1,146 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { Messages } from '../../../i18n/en.js';
+import type { OpenChangeHandler } from '../../../utils/openChange.js';
+import type { ListLoop } from '../../../utils/useListNavigation.svelte.js';
+import type { InputProps } from '../Field/field.js';
+import type { ComboboxFilter, ComboboxHighlightChangePayload, ComboboxItemsRequest, ComboboxOption, MaybePromise } from '../Combobox/combobox.props.js';
+import type { AutocompleteThemeProps } from './autocomplete.theme.js';
+/** One suggestion: plain text, or an option with a label, description and metadata. */
+export type AutocompleteItem = string | ComboboxOption;
+/** A labelled group of suggestions. */
+export type AutocompleteItemGroup = {
+    /** Label rendered above the group's suggestions. */
+    label?: string;
+    /** The suggestions of the group. */
+    items: AutocompleteItem[];
+};
+/** Suggestions and `{ label, items }` groups can be mixed freely. */
+export type AutocompleteItems = (AutocompleteItem | AutocompleteItemGroup)[];
+/** Second argument of an `items` function. */
+export type AutocompleteItemsRequest = ComboboxItemsRequest;
+/** The suggestions, or a function that returns them for the current text. */
+export type AutocompleteItemsSource = AutocompleteItems | ((query: string, request: AutocompleteItemsRequest) => MaybePromise<AutocompleteItems>);
+/** Decides whether a suggestion matches the typed text. */
+export type AutocompleteFilter = ComboboxFilter;
+/**
+ * How the suggestions relate to the text:
+ * - `'list'`: suggestions are filtered by the text. The text only changes when you choose one.
+ * - `'both'`: filtered, and the text previews the highlighted suggestion (inline completion).
+ * - `'inline'`: not filtered, and the text previews the highlighted suggestion.
+ * - `'none'`: not filtered, and the text never changes until you choose one.
+ */
+export type AutocompleteMode = 'list' | 'both' | 'inline' | 'none';
+/** What `onSelect` receives. */
+export type AutocompleteSelectPayload = {
+    /** The chosen suggestion; a plain-text item arrives as `{ value: text, label: text }`. */
+    item: ComboboxOption;
+    /** The text now in the input: the suggestion's label. */
+    value: string;
+    /** The click or key event behind the choice. */
+    event?: Event;
+};
+export type AutocompleteHighlightChangePayload = ComboboxHighlightChangePayload;
+/** Native attributes the underlying input accepts; the component owns identity, value and ARIA state. */
+export type AutocompleteInputAttributes = Omit<HTMLInputAttributes, 'class' | 'disabled' | 'id' | 'name' | 'placeholder' | 'readonly' | 'required' | 'role' | 'type' | 'value' | 'form' | 'autocomplete' | 'aria-activedescendant' | 'aria-autocomplete' | 'aria-controls' | 'aria-expanded' | 'aria-haspopup' | 'aria-invalid'>;
+export type AutocompleteProps = InputProps<'text'> & {
+    /**
+     * The suggestions: strings, `{ value, label, description?, disabled?, data? }` options, groups
+     * of either, or a function returning them for the current text. The function receives
+     * `(query, { signal })`: it is called after a 100ms pause in typing, the signal is aborted when
+     * a newer text replaces the request, and a response that is not the latest is ignored. The
+     * function only runs while the list is open (typing opens it), never for a prefilled or just
+     * chosen text. A value listed more than once keeps its first entry.
+     */
+    items: AutocompleteItemsSource;
+    /**
+     * How suggestions relate to the text. See `AutocompleteMode`.
+     * @default 'list'
+     */
+    mode?: AutocompleteMode;
+    /**
+     * Which suggestion is highlighted without keyboard input. `true` highlights the first match
+     * while text is typed, `'always'` also while the text is empty, and `false` highlights nothing
+     * until an arrow key moves it, so Enter keeps the typed text. Pair `true` with `mode="both"` or
+     * `"inline"` to complete the text as you type.
+     * @default false
+     */
+    autoHighlight?: boolean | 'always';
+    /**
+     * Whether the list is open. Bindable. The list only shows while there is something to show
+     * (suggestions, a loading or error message, or a "no options" message for the typed text).
+     */
+    open?: boolean;
+    /** Initial open state when `open` is omitted. */
+    defaultOpen?: boolean;
+    /**
+     * Called before the list opens or closes, with the requested state and the change details:
+     * `reason` (`'input-change'`, `'escape-key'`, `'item-press'`, `'list-navigation'`,
+     * `'trigger-press'`, `'trigger-focus'`, `'focus-out'`…), the originating `event`, the
+     * `interaction` type and `cancel()`. Calling `details.cancel()` keeps the list as it is.
+     */
+    onOpenChange?: OpenChangeHandler;
+    /** Called once per open, after the open transition finishes. */
+    onAfterOpen?: () => void;
+    /** Called once per close, after the close transition finishes. */
+    onAfterClose?: () => void;
+    /**
+     * Opens the list when the input receives focus, even before anything is typed: static
+     * arrays list every suggestion and `items` functions are called with an empty text.
+     * @default false
+     */
+    openOnFocus?: boolean;
+    /**
+     * Whether the component narrows static suggestions to the typed text. Turn it off when the
+     * suggestions are already the right ones for the text. Always off for `mode="inline"` and
+     * `"none"`. Functions passed as `items` filter themselves.
+     * @default true
+     */
+    shouldFilter?: boolean;
+    /**
+     * Decides whether a suggestion matches the typed text. Defaults to a case- and
+     * accent-insensitive substring match on the label, in the active I18n locale.
+     */
+    filter?: AutocompleteFilter;
+    /** Shows at most this many matching suggestions. Matching stops once the limit is reached. */
+    limit?: number;
+    /**
+     * What moving past either end of the list does: `'wrap'` continues at the other end, `'input'`
+     * lands on no highlight first (the text returns to what was typed) and wraps from there, and
+     * `false` stops at the end.
+     * @default 'wrap'
+     */
+    loop?: ListLoop;
+    /** Called when a suggestion is chosen with a click or Enter, after the value changed. */
+    onSelect?: (payload: AutocompleteSelectPayload) => void;
+    /** Called when the highlighted suggestion changes, with why it moved and the event behind it. */
+    onHighlightChange?: (payload: AutocompleteHighlightChangePayload) => void;
+    /** Called with the new text for every edit the user makes or a suggestion fills in. */
+    onValueChange?: (value: string | null) => void;
+    /** Hint text shown in the empty input. */
+    placeholder?: string;
+    /** Text shown while suggestions load. Defaults to "Loading...". */
+    loadingText?: string;
+    /** Text shown when no suggestion matches. Defaults to "No options found". */
+    emptyText?: string;
+    /**
+     * Browser autofill hint for the input, such as `'email'` or `'address-level2'`. The component
+     * offers its own suggestions, so the browser's are off unless you ask.
+     * @default 'off'
+     */
+    autocomplete?: HTMLInputAttributes['autocomplete'];
+    /** Render a separator between consecutive groups. @default true */
+    separators?: boolean;
+    /** Custom row renderer: receives the suggestion. Overrides the default title and description layout. */
+    item?: Snippet<[ComboboxOption]>;
+    /**
+     * Native attributes applied to the underlying input, such as `inputmode` or `maxlength`. Event
+     * handlers run before the built-in behaviour for the same event, and `preventDefault()` on a
+     * cancelable one (`onkeydown`, `onclick`, `onpointerdown`) cancels it.
+     */
+    inputAttrs?: AutocompleteInputAttributes;
+    /** Per-instance i18n overrides merged over the global catalog. */
+    i18n?: Partial<Messages>;
+    /** Theme overrides for the input, its container and the suggestion list. */
+    theme?: AutocompleteThemeProps & InputProps<'text'>['theme'];
+};

package/dist/components/Form/Autocomplete/autocomplete.props.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Form/Autocomplete/autocomplete.theme.d.ts

@@ -0,0 +1,213 @@
+import { type InferComponentTheme } from '../../../utils/cva/index.js';
+export declare const autocompleteTheme: {
+    input: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+        hasValue: {
+            true: string;
+            false: string;
+        };
+        disabled: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    inputContainer: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+        disabled: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    loading: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    error: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    noOptions: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    group: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    groupLabel: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    separator: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+};
+export type AutocompleteTheme = typeof autocompleteTheme;
+export type AutocompleteThemeProps = InferComponentTheme<AutocompleteTheme>;
+export declare const setAutocompleteTheme: (theme: InferComponentTheme<{
+    input: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+        hasValue: {
+            true: string;
+            false: string;
+        };
+        disabled: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    inputContainer: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+        disabled: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    loading: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    error: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    noOptions: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    group: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    groupLabel: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    separator: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+}>) => void;
+export declare const useAutocompleteTheme: import("../../../utils/cva/theme.js").UseComponentTheme<{
+    input: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+        hasValue: {
+            true: string;
+            false: string;
+        };
+        disabled: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    inputContainer: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+        disabled: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    loading: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    error: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    noOptions: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    group: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    groupLabel: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    separator: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+}>;

package/dist/components/Form/Autocomplete/autocomplete.theme.js

@@ -0,0 +1,119 @@
+// The text input and the suggestion list start from Combobox's look; the separate registry key lets
+// an app restyle one without the other.
+import { setComponentTheme, useComponentTheme } from '../../../utils/cva/index.js';
+import { cva } from '../../../utils/cva/index.js';
+const defaultInput = cva({
+    base: 'outline-none flex-1 w-full min-w-0 h-full bg-transparent resize-none autofill:text-neutral appearance-none text-sm leading-normal',
+    variants: {
+        size: {
+            small: 'text-xs placeholder:text-xs',
+            normal: 'text-sm placeholder:text-sm',
+            large: 'text-sm placeholder:text-sm'
+        },
+        hasValue: {
+            true: 'placeholder:text-neutral',
+            false: 'placeholder:text-neutral/70'
+        },
+        disabled: {
+            true: 'cursor-not-allowed opacity-50',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        size: 'normal',
+        disabled: false
+    }
+});
+const defaultInputContainer = cva({
+    base: 'flex w-full items-center border border-neutral-muted bg-surface-raised px-lg text-neutral ring-0 transition-[color,background-color,border-color,box-shadow] rounded-md outline-none focus-within:ring-2 focus-within:ring-focus/50',
+    variants: {
+        size: {
+            small: 'h-control-sm text-xs',
+            normal: 'h-control-md text-sm',
+            large: 'h-control-lg text-sm'
+        },
+        disabled: {
+            true: 'cursor-not-allowed opacity-50',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        size: 'normal',
+        disabled: false
+    }
+});
+const defaultLoading = cva({
+    base: 'text-neutral/70 p-md text-sm',
+    variants: {
+        size: {
+            small: 'text-xs p-sm',
+            normal: 'text-sm p-sm',
+            large: 'text-sm p-md'
+        }
+    }
+});
+const defaultError = cva({
+    base: 'text-danger-readable p-md text-sm',
+    variants: {
+        size: {
+            small: 'text-xs p-sm',
+            normal: 'text-sm p-sm',
+            large: 'text-sm p-md'
+        }
+    }
+});
+const defaultNoOptions = cva({
+    base: 'text-neutral/70 p-md text-sm',
+    variants: {
+        size: {
+            small: 'text-xs p-sm',
+            normal: 'text-sm p-sm',
+            large: 'text-sm p-md'
+        }
+    }
+});
+const defaultGroup = cva({
+    base: 'flex scroll-my-1 flex-col',
+    variants: {
+        size: {
+            small: '',
+            normal: '',
+            large: ''
+        }
+    }
+});
+const defaultGroupLabel = cva({
+    base: 'text-neutral/70',
+    variants: {
+        size: {
+            small: 'px-sm py-xs text-xs',
+            normal: 'px-sm py-xs text-xs',
+            large: 'px-sm py-xs text-xs'
+        }
+    },
+    defaultVariants: {
+        size: 'normal'
+    }
+});
+const defaultSeparator = cva({
+    base: 'bg-neutral-muted my-xs h-px',
+    variants: {
+        size: {
+            small: '',
+            normal: '',
+            large: ''
+        }
+    }
+});
+export const autocompleteTheme = {
+    input: defaultInput,
+    inputContainer: defaultInputContainer,
+    loading: defaultLoading,
+    error: defaultError,
+    noOptions: defaultNoOptions,
+    group: defaultGroup,
+    groupLabel: defaultGroupLabel,
+    separator: defaultSeparator
+};
+export const setAutocompleteTheme = setComponentTheme('autocomplete');
+export const useAutocompleteTheme = useComponentTheme('autocomplete', autocompleteTheme);

package/dist/components/Form/Autocomplete/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Autocomplete } from './Autocomplete.svelte';
+export type { AutocompleteFilter, AutocompleteHighlightChangePayload, AutocompleteInputAttributes, AutocompleteItem, AutocompleteItemGroup, AutocompleteItems, AutocompleteItemsRequest, AutocompleteItemsSource, AutocompleteMode, AutocompleteProps, AutocompleteSelectPayload } from './autocomplete.props.js';
+export { autocompleteTheme, setAutocompleteTheme, useAutocompleteTheme, type AutocompleteTheme, type AutocompleteThemeProps } from './autocomplete.theme.js';

package/dist/components/Form/Autocomplete/index.js

@@ -0,0 +1,2 @@
+export { default as Autocomplete } from './Autocomplete.svelte';
+export { autocompleteTheme, setAutocompleteTheme, useAutocompleteTheme } from './autocomplete.theme.js';

package/dist/components/Form/Calendar/CalendarInput.svelte

@@ -15,6 +15,8 @@
 		type = 'calendar' as T,
 		required = false,
 		disabled,
+		readOnly,
+		messages,
 		name,
 		onValidate,
 		onValueChange,
@@ -71,6 +73,12 @@
 		set disabled(v: boolean | undefined) {
 			disabled = v;
 		},
+		get readOnly() {
+			return readOnly;
+		},
+		get messages() {
+			return messages;
+		},
 		get required() {
 			return required;
 		},
@@ -122,6 +130,7 @@
 			{locale}
 			label={typeof label === 'string' ? label : undefined}
 			disabled={field.disabled}
+			readOnly={field.readOnly}
 			{cell}
 			{buttons}
 			{header}

package/dist/components/Form/Calendar/CalendarMonthYearPicker.svelte

@@ -4,6 +4,7 @@
 	import { untrack } from 'svelte';
 	import { on } from 'svelte/events';
 	import ScrollArea from '../../ScrollArea/ScrollArea.svelte';
+	import { hasShortcutModifier } from '../../../utils/useKeyDown.svelte.js';
 	import { useNavigation } from '../../../utils/useNavigation.svelte.js';
 	import type { CalendarThemeProps } from './calendar.theme.js';
 	import { useCalendarInputTheme } from './calendar.theme.js';
@@ -177,6 +178,8 @@
 			onEscape();
 			return;
 		}
+		// Alt/Ctrl/Meta + an arrow is a browser shortcut, as it is inside each list.
+		if (hasShortcutModifier(event)) return;
 
 		const activeElement = document.activeElement;
 		if (!(activeElement instanceof HTMLElement)) return;

package/dist/components/Form/Calendar/CalendarPrimitive.svelte

@@ -38,6 +38,7 @@
 		locale,
 		label,
 		disabled = false,
+		readOnly = false,
 		class: className,
 		cell: renderCell,
 		buttons,
@@ -132,6 +133,9 @@
 		get disabled() {
 			return disabled;
 		},
+		get readOnly() {
+			return readOnly;
+		},
 		get locale() {
 			return locale;
 		},
@@ -337,6 +341,7 @@
 {#snippet calendarPart(rows: typeof calendar.rows, month: Date)}
 	<div
 		role="grid"
+		aria-readonly={readOnly || undefined}
 		class={classes.grid()}
 		aria-label={month.toLocaleDateString(locale, { month: 'long', year: 'numeric' })}
 	>

package/dist/components/Form/Calendar/calendar.mcp.d.ts

@@ -1 +1 @@
-export declare const calendarDescription = "\n# Calendar\n\nDate-based calendar primitives for single, range, and multiple selection. CalendarPrimitive is the visual primitive; CalendarInput wraps single and range modes in the Form Field contract.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n  import { CalendarPrimitive, CalendarInput } from './index.ts';\n</script>\n```\n\n## Single date\n\n```svelte\n<script lang=\"ts\">\n  let value = $state<Date | null>(null);\n</script>\n\n<CalendarPrimitive type=\"calendar\" bind:value />\n```\n\n## Range\n\n```svelte\n<script lang=\"ts\">\n  let value = $state<[Date | null, Date | null] | null>(null);\n</script>\n\n<CalendarPrimitive type=\"calendar-range\" bind:value />\n```\n\n## Multiple dates\n\n```svelte\n<script lang=\"ts\">\n  let value = $state<Date[]>([]);\n</script>\n\n<CalendarPrimitive type=\"calendar-multiple\" bind:value />\n```\n\n## Main props\n\n- `type`: `'calendar' | 'calendar-range' | 'calendar-multiple'`.\n- `value`: bindable value matching the selected type.\n- `view`: `'single' | 'double'`. Double view falls back to one month when the calendar container is narrower than 576px.\n- `disabledDates`: individual dates or inclusive `[start, end]` ranges.\n- `minDate` / `maxDate`: selection bounds.\n- `events`: values with `start` and `end`; matching events are exposed to the custom cell snippet.\n- `cell`: custom day renderer receiving the complete Calendar cell payload.\n- `onViewChange`: receives the first and last visible month after pointer, keyboard, or controlled-value navigation.\n\n## Keyboard\n\nThe visible month title opens an in-place month and year chooser composed from two scroll areas. Each list uses roving focus with ArrowUp/ArrowDown and Home/End; Escape returns to the day grid.\n\nDay focus is roving. Arrow keys move by day or week, Home/End move to week boundaries, PageUp/PageDown move by month, and Shift+PageUp/PageDown move by year. Enter or Space uses the native day button activation.\n\nMonth navigation slides in chronological direction while the viewport transitions to its new intrinsic height. Double view responds to the calendar container rather than the browser viewport, so it safely falls back to one month in narrow layouts. Both animations respect reduced-motion preferences.\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";
+export declare const calendarDescription = "\n# Calendar\n\nDate-based calendar primitives for single, range, and multiple selection. CalendarPrimitive is the visual primitive; CalendarInput wraps single and range modes in the Form Field contract.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n  import { CalendarPrimitive, CalendarInput } from './index.ts';\n</script>\n```\n\n## Single date\n\n```svelte\n<script lang=\"ts\">\n  let value = $state<Date | null>(null);\n</script>\n\n<CalendarPrimitive type=\"calendar\" bind:value />\n```\n\n## Range\n\n```svelte\n<script lang=\"ts\">\n  let value = $state<[Date | null, Date | null] | null>(null);\n</script>\n\n<CalendarPrimitive type=\"calendar-range\" bind:value />\n```\n\n## Multiple dates\n\n```svelte\n<script lang=\"ts\">\n  let value = $state<Date[]>([]);\n</script>\n\n<CalendarPrimitive type=\"calendar-multiple\" bind:value />\n```\n\n## Main props\n\n- `type`: `'calendar' | 'calendar-range' | 'calendar-multiple'`.\n- `value`: bindable value matching the selected type.\n- `view`: `'single' | 'double'`. Double view falls back to one month when the calendar container is narrower than 576px.\n- `disabledDates`: individual dates or inclusive `[start, end]` ranges.\n- `minDate` / `maxDate`: selection bounds.\n- `readOnly`: months can be browsed but no date can be selected; the grid reports aria-readonly.\n- `events`: values with `start` and `end`; matching events are exposed to the custom cell snippet.\n- `cell`: custom day renderer receiving the complete Calendar cell payload.\n- `onViewChange`: receives the first and last visible month after pointer, keyboard, or controlled-value navigation.\n\n## Keyboard\n\nThe visible month title opens an in-place month and year chooser composed from two scroll areas. Each list uses roving focus with ArrowUp/ArrowDown and Home/End, ArrowLeft/ArrowRight move between the month and year lists (mirrored in RTL), and Escape returns to the day grid. Arrow keys held with Alt, Ctrl or Meta are left to the browser.\n\nDay focus is roving. Arrow keys move by day or week, Home/End move to week boundaries, PageUp/PageDown move by month, and Shift+PageUp/PageDown move by year. Enter or Space uses the native day button activation.\n\nMonth navigation slides in chronological direction while the viewport transitions to its new intrinsic height. Double view responds to the calendar container rather than the browser viewport, so it safely falls back to one month in narrow layouts. Both animations respect reduced-motion preferences.\n\n## State contract\n\n- **value**: current bindable editable value.\n- **defaultValue**: initial value used only when `value` is omitted.\n- **onValueChange**: called with the new value when the component changes it.\n\n";

package/dist/components/Form/Calendar/calendar.mcp.js

@@ -48,13 +48,14 @@ Date-based calendar primitives for single, range, and multiple selection. Calend
 - \`view\`: \`'single' | 'double'\`. Double view falls back to one month when the calendar container is narrower than 576px.
 - \`disabledDates\`: individual dates or inclusive \`[start, end]\` ranges.
 - \`minDate\` / \`maxDate\`: selection bounds.
+- \`readOnly\`: months can be browsed but no date can be selected; the grid reports aria-readonly.
 - \`events\`: values with \`start\` and \`end\`; matching events are exposed to the custom cell snippet.
 - \`cell\`: custom day renderer receiving the complete Calendar cell payload.
 - \`onViewChange\`: receives the first and last visible month after pointer, keyboard, or controlled-value navigation.
 
 ## Keyboard
 
-The visible month title opens an in-place month and year chooser composed from two scroll areas. Each list uses roving focus with ArrowUp/ArrowDown and Home/End; Escape returns to the day grid.
+The visible month title opens an in-place month and year chooser composed from two scroll areas. Each list uses roving focus with ArrowUp/ArrowDown and Home/End, ArrowLeft/ArrowRight move between the month and year lists (mirrored in RTL), and Escape returns to the day grid. Arrow keys held with Alt, Ctrl or Meta are left to the browser.
 
 Day focus is roving. Arrow keys move by day or week, Home/End move to week boundaries, PageUp/PageDown move by month, and Shift+PageUp/PageDown move by year. Enter or Space uses the native day button activation.
 

package/dist/components/Form/Calendar/calendarInput.props.d.ts

@@ -21,6 +21,8 @@ export type CalendarPrimitiveProps<E extends Event, T extends CalendarType> = Ba
     value?: CalendarValue<T>;
     /** Initial selection when `value` is omitted. */
     defaultValue?: CalendarValue<T>;
+    /** Keeps browsing months but refuses selecting a date. */
+    readOnly?: boolean;
     /** Called whenever the calendar selection changes. */
     onValueChange?: (value: CalendarValue<T>) => void;
 };

package/dist/components/Form/Calendar/useCalendar.svelte.d.ts

@@ -41,6 +41,8 @@ export interface CalendarStateOptions<E extends Event, T extends CalendarType> {
     view?: 'single' | 'double';
     disabledDates?: (Date | [Date, Date])[];
     disabled?: boolean;
+    /** Browsing stays possible; selecting a date is refused. */
+    readOnly?: boolean;
     locale?: string;
     onValueChange?: CalendarValueChangeHandler<T>;
     value?: CalendarValue<T>;
@@ -61,6 +63,7 @@ export declare class CalendarState<E extends Event = Event, T extends CalendarTy
     weekStartsOn: CalendarWeekday | undefined;
     disabledDates: (Date | [Date, Date])[];
     disabled: boolean;
+    readOnly: boolean;
     locale: string | undefined;
     today: Date;
     date: Date;

package/dist/components/Form/Calendar/useCalendar.svelte.js

@@ -49,6 +49,7 @@ export class CalendarState {
     weekStartsOn = undefined;
     disabledDates = [];
     disabled = false;
+    readOnly = false;
     locale;
     today = $state(createCalendarDate(1970, 0, 1));
     date = $state(createCalendarDate(1970, 0, 1));
@@ -275,6 +276,8 @@ export class CalendarState {
         return rows;
     };
     commitValue(value) {
+        if (this.readOnly)
+            return;
         const currentValue = this.value;
         if (Object.is(value, currentValue))
             return;