@svgrid/grid 1.2.33 → 2.0.0

package/dist/columns.js

@@ -16,9 +16,10 @@ export function createColumns(ctx) {
         return "";
     }
     function isColumnPinned(columnId) {
-        if (ctx.columnPinning.left.includes(columnId))
+        const pinning = ctx.effectivePinning ?? ctx.columnPinning;
+        if (pinning.left.includes(columnId))
             return "left";
-        if (ctx.columnPinning.right.includes(columnId))
+        if (pinning.right.includes(columnId))
             return "right";
         return null;
     }

package/dist/core.d.ts

@@ -160,6 +160,12 @@ export type ColumnDef<TFeatures extends TableFeatures, TData extends RowData> =
      * this from the first data row for columns that declare neither.
      */
     cellDataType?: 'text' | 'number' | 'boolean' | 'date' | 'dateString';
+    /**
+     * Hide this column when the grid's `responsive` mode is on and the grid is
+     * narrower than this many pixels - drop low-priority columns on small
+     * screens. No effect unless the grid has `responsive` set.
+     */
+    hideBelow?: number;
     /**
      * For a column INSIDE a collapsible column group: `'open'` shows this column
      * only while the group is expanded, `'closed'` only while collapsed. Omit to
@@ -173,7 +179,7 @@ export type ColumnDef<TFeatures extends TableFeatures, TData extends RowData> =
      * and `columnGroupShow: 'closed'` children show until the user expands it.
      */
     openByDefault?: boolean;
-    editorType?: 'text' | 'number' | 'date' | 'datetime' | 'time' | 'date-native' | 'datetime-native' | 'time-native' | 'password' | 'checkbox' | 'list' | 'chips' | 'select' | 'rich-select' | 'autocomplete' | 'textarea' | 'color' | 'rating';
+    editorType?: 'text' | 'number' | 'date' | 'datetime' | 'time' | 'date-native' | 'datetime-native' | 'time-native' | 'password' | 'checkbox' | 'list' | 'chips' | 'select' | 'rich-select' | 'autocomplete' | 'textarea' | 'color' | 'rating' | (string & {});
     /**
      * Custom in-cell editor. Receives the cell context PLUS a `commit(value)`
      * and `cancel()` helper. Use when none of the built-in `editorType`s fit;

package/dist/countries.d.ts

@@ -12,4 +12,16 @@ export type Country = {
 /** Regional-indicator flag emoji from an ISO alpha-2 code. */
 export declare function flagEmoji(code: string): string;
 export declare const COUNTRIES: Country[];
+/**
+ * Expected national (post-dial-code) significant-digit count per country, as an
+ * exact length or an inclusive [min, max] range. A pragmatic length-based check
+ * (not full libphonenumber). Countries without an entry accept any non-empty
+ * number.
+ */
+export declare const PHONE_NATIONAL_LENGTHS: Record<string, number | [number, number]>;
+/**
+ * Whether `nationalDigits` is a plausible national number for `code` (length
+ * check). Unknown countries pass on any non-empty input. Pure.
+ */
+export declare function phoneDigitsValid(code: string, nationalDigits: string): boolean;
 export declare const COUNTRY_BY_CODE: Map<string, Country>;

package/dist/countries.js

@@ -58,4 +58,28 @@ export const COUNTRIES = [
     { code: 'CO', name: 'Colombia', dial: '+57' },
     { code: 'MX', name: 'Mexico', dial: '+52' },
 ];
+/**
+ * Expected national (post-dial-code) significant-digit count per country, as an
+ * exact length or an inclusive [min, max] range. A pragmatic length-based check
+ * (not full libphonenumber). Countries without an entry accept any non-empty
+ * number.
+ */
+export const PHONE_NATIONAL_LENGTHS = {
+    US: 10, CA: 10, GB: 10, IE: 9, FR: 9, DE: [10, 11], ES: 9, IT: [9, 10], NL: 9, BE: [8, 9],
+    CH: 9, AT: [10, 12], SE: [7, 9], NO: 8, DK: 8, FI: [9, 10], PL: 9, PT: 9, GR: 10, CZ: 9,
+    RU: 10, TR: 10, IL: 9, AE: 9, SA: 9, IN: 10, PK: 10, CN: 11, HK: 8, JP: 10, KR: [9, 10],
+    SG: 8, MY: [9, 10], TH: 9, ID: [9, 11], PH: 10, VN: 9, AU: 9, NZ: [8, 10], ZA: 9, NG: 10,
+    EG: 10, KE: 9, MA: 9, BR: 11, AR: 10, CL: 9, CO: 10, MX: 10,
+};
+/**
+ * Whether `nationalDigits` is a plausible national number for `code` (length
+ * check). Unknown countries pass on any non-empty input. Pure.
+ */
+export function phoneDigitsValid(code, nationalDigits) {
+    const n = (nationalDigits.match(/\d/g) ?? []).length;
+    const rule = PHONE_NATIONAL_LENGTHS[code.toUpperCase()];
+    if (rule == null)
+        return n > 0;
+    return typeof rule === 'number' ? n === rule : n >= rule[0] && n <= rule[1];
+}
 export const COUNTRY_BY_CODE = new Map(COUNTRIES.map((c) => [c.code, c]));

package/dist/createAccordion.svelte.d.ts

@@ -0,0 +1,71 @@
+/**
+ * createAccordion - the HEADLESS core behind <SvAccordion>: a WAI-ARIA accordion
+ * (collapsible sections) with single- or multiple-expand, roving header focus
+ * (Up/Down/Home/End) and full ARIA, exposed as **prop-getters** you spread onto
+ * YOUR OWN markup. No styles, no DOM. Parity: Smart `smart-accordion`.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createAccordion } from '@svgrid/grid'
+ *   let expanded = $state<string[]>(['a'])
+ *   const acc = createAccordion({ items: () => items, expanded: () => expanded, onChange: (ids) => (expanded = ids) })
+ * </script>
+ * {#each items as it, i (it.id)}
+ *   <h3><button {...acc.headerProps(i)}>{it.label}</button></h3>
+ *   {#if acc.isExpanded(it.id)}<div {...acc.panelProps(i)}>...</div>{/if}
+ * {/each}
+ * ```
+ *
+ * The styled <SvAccordion> is one renderer over this core. DOM focus movement is
+ * a render concern: the component watches `focusTick`/`focusIndex` and calls
+ * `.focus()` itself.
+ */
+export type AccordionItem = {
+    id: string;
+    label: string;
+    disabled?: boolean;
+};
+/** `single` keeps at most one panel open; `multiple` allows any number. */
+export type AccordionExpandMode = 'single' | 'multiple';
+/** Reactive inputs are passed as getters so the core tracks live prop changes. */
+export type AccordionConfig = {
+    items: () => ReadonlyArray<AccordionItem>;
+    /** Expanded item ids (controlled). */
+    expanded: () => string[];
+    onChange?: (expandedIds: string[]) => void;
+    expandMode?: () => AccordionExpandMode;
+    disabled?: () => boolean;
+    dir?: () => 'ltr' | 'rtl' | 'auto' | undefined;
+};
+export declare function createAccordion(config: AccordionConfig): {
+    /** Header index that should hold DOM focus after the latest keyboard move. */
+    readonly focusIndex: number;
+    /** Monotonic counter; changes only on keyboard navigation. */
+    readonly focusTick: number;
+    /** Currently-expanded item ids. */
+    readonly expandedIds: string[];
+    isExpanded: (itemId: string) => boolean;
+    toggle: (i: number) => void;
+    /** Spread onto the accordion root container. */
+    rootProps: () => {
+        'data-orientation': "vertical";
+    };
+    /** Spread onto the header <button> at `index`. */
+    headerProps: (index: number) => {
+        type: "button";
+        id: string;
+        'data-idx': number;
+        'aria-expanded': boolean;
+        'aria-controls': string;
+        disabled: true | undefined;
+        onclick: () => void;
+        onkeydown: (e: KeyboardEvent) => void;
+    };
+    /** Spread onto the panel/region element at `index`. */
+    panelProps: (index: number) => {
+        role: "region";
+        id: string;
+        'aria-labelledby': string;
+    };
+};
+export type Accordion = ReturnType<typeof createAccordion>;

package/dist/createAccordion.svelte.js

@@ -0,0 +1,99 @@
+let uid = 0;
+export function createAccordion(config) {
+    const id = `sv-acc-${uid++}`;
+    const items = () => config.items();
+    const expandMode = () => config.expandMode?.() ?? 'single';
+    const disabled = () => config.disabled?.() ?? false;
+    const expandedSet = $derived(new Set(config.expanded()));
+    const enabledIdx = $derived(items().map((it, i) => (it.disabled ? -1 : i)).filter((i) => i >= 0));
+    let focusIndex = $state(0);
+    let focusTick = $state(0);
+    const requestFocus = (i) => { focusIndex = i; focusTick++; };
+    const headerId = (i) => `${id}-h-${i}`;
+    const panelId = (i) => `${id}-p-${i}`;
+    const isExpanded = (itemId) => expandedSet.has(itemId);
+    function toggle(i) {
+        const it = items()[i];
+        if (!it || it.disabled || disabled())
+            return;
+        const open = expandedSet.has(it.id);
+        if (expandMode() === 'single') {
+            config.onChange?.(open ? [] : [it.id]);
+        }
+        else {
+            const next = new Set(expandedSet);
+            open ? next.delete(it.id) : next.add(it.id);
+            config.onChange?.([...next]);
+        }
+    }
+    function move(delta) {
+        if (!enabledIdx.length)
+            return;
+        const pos = enabledIdx.indexOf(focusIndex);
+        const base = pos < 0 ? 0 : pos;
+        const next = enabledIdx[(base + delta + enabledIdx.length) % enabledIdx.length];
+        if (next != null)
+            requestFocus(next);
+    }
+    function onHeaderKeydown(e, i) {
+        if (disabled())
+            return;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                move(1);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                move(-1);
+                break;
+            case 'Home':
+                e.preventDefault();
+                requestFocus(enabledIdx[0] ?? 0);
+                break;
+            case 'End':
+                e.preventDefault();
+                requestFocus(enabledIdx.at(-1) ?? 0);
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                toggle(i);
+                break;
+        }
+    }
+    return {
+        /** Header index that should hold DOM focus after the latest keyboard move. */
+        get focusIndex() { return focusIndex; },
+        /** Monotonic counter; changes only on keyboard navigation. */
+        get focusTick() { return focusTick; },
+        /** Currently-expanded item ids. */
+        get expandedIds() { return [...expandedSet]; },
+        isExpanded,
+        toggle,
+        /** Spread onto the accordion root container. */
+        rootProps: () => ({
+            'data-orientation': 'vertical',
+        }),
+        /** Spread onto the header <button> at `index`. */
+        headerProps: (index) => {
+            const it = items()[index];
+            return {
+                type: 'button',
+                id: headerId(index),
+                'data-idx': index,
+                'aria-expanded': it ? isExpanded(it.id) : false,
+                'aria-controls': panelId(index),
+                disabled: disabled() || it?.disabled || undefined,
+                onclick: () => toggle(index),
+                onkeydown: (e) => onHeaderKeydown(e, index),
+            };
+        },
+        /** Spread onto the panel/region element at `index`. */
+        panelProps: (index) => ({
+            role: 'region',
+            id: panelId(index),
+            'aria-labelledby': headerId(index),
+        }),
+    };
+}

package/dist/createAutocomplete.svelte.d.ts

@@ -31,6 +31,11 @@ export type AutocompleteConfig = {
     ariaLabel?: () => string | undefined;
     /** DOM focus hook provided by the renderer; the core never touches the DOM. */
     focusInput?: () => void;
+    id?: () => string | undefined;
+    invalid?: () => boolean;
+    required?: () => boolean;
+    error?: () => string | undefined;
+    hint?: () => string | undefined;
 };
 export declare function createAutocomplete(config: AutocompleteConfig): {
     /** Panel open state. */
@@ -50,15 +55,19 @@ export declare function createAutocomplete(config: AutocompleteConfig): {
     onKeydown: (e: KeyboardEvent) => void;
     /** Spread onto the text <input>. */
     inputProps: () => {
-        role: "combobox";
-        'aria-expanded': boolean;
-        'aria-autocomplete': "list";
-        'aria-label': string | undefined;
         value: string;
         disabled: boolean;
         oninput: (e: Event) => void;
         onfocus: () => void;
         onkeydown: (e: KeyboardEvent) => void;
+        'aria-invalid': "true" | undefined;
+        'aria-required': "true" | undefined;
+        'aria-describedby': string | undefined;
+        'aria-label': string | undefined;
+        id: string | undefined;
+        role: "combobox";
+        'aria-expanded': boolean;
+        'aria-autocomplete': "list";
     };
     /** Spread onto the listbox container. */
     listboxProps: () => {

package/dist/createAutocomplete.svelte.js

@@ -20,8 +20,17 @@
  * ```
  */
 import { filterOptions } from './list-option';
+import { editorAria } from './editor-contract';
 export function createAutocomplete(config) {
     const minChars = () => config.minChars?.() ?? 1;
+    const ariaState = () => ({
+        id: config.id?.(),
+        invalid: config.invalid?.(),
+        required: config.required?.(),
+        error: config.error?.(),
+        hint: config.hint?.(),
+        ariaLabel: config.ariaLabel?.(),
+    });
     let open = $state(false);
     let active = $state(0);
     const asOptions = $derived(config.suggestions().map((s) => (typeof s === 'string' ? { value: s, label: s } : s)));
@@ -73,10 +82,11 @@ export function createAutocomplete(config) {
         onKeydown,
         /** Spread onto the text <input>. */
         inputProps: () => ({
+            id: config.id?.(),
             role: 'combobox',
             'aria-expanded': open,
             'aria-autocomplete': 'list',
-            'aria-label': config.ariaLabel?.(),
+            ...editorAria(ariaState()),
             value: config.value(),
             disabled: config.disabled?.() ?? false,
             oninput: onInput,

package/dist/createButtonGroup.svelte.d.ts

@@ -0,0 +1,62 @@
+export type ButtonGroupItem = {
+    value: string | number;
+    label?: string;
+    disabled?: boolean;
+};
+/** `single` = radio semantics; `multiple` = toggle set; `none` = action buttons. */
+export type ButtonGroupMode = 'single' | 'multiple' | 'none';
+export type ButtonGroupValue = string | number | Array<string | number> | null;
+/** Reactive inputs are passed as getters so the core tracks live prop changes. */
+export type ButtonGroupConfig = {
+    items: () => ReadonlyArray<ButtonGroupItem>;
+    value: () => ButtonGroupValue;
+    onChange?: (value: string | number | Array<string | number>) => void;
+    mode?: () => ButtonGroupMode;
+    disabled?: () => boolean;
+    orientation?: () => 'horizontal' | 'vertical';
+    /** Under `'rtl'` the horizontal Left/Right arrow direction flips. */
+    dir?: () => 'ltr' | 'rtl' | 'auto' | undefined;
+    id?: () => string | undefined;
+    invalid?: () => boolean;
+    required?: () => boolean;
+    error?: () => string | undefined;
+    hint?: () => string | undefined;
+    ariaLabel?: () => string | undefined;
+};
+/** Normalize the value to an array (pure). */
+export declare function toGroupArray(value: ButtonGroupValue): Array<string | number>;
+export declare function createButtonGroup(config: ButtonGroupConfig): {
+    /** Roving-focus target index (follows the selection in single mode). */
+    readonly activeIndex: number;
+    /** Selected values as an array (single mode -> 0 or 1 entry). */
+    readonly selectedValues: (string | number)[];
+    isSelected: (v: string | number) => boolean;
+    isActive: (i: number) => boolean;
+    pick: (i: number) => void;
+    move: (delta: number) => void;
+    onKeydown: (e: KeyboardEvent) => void;
+    /** Spread onto the group container element. */
+    rootProps: () => {
+        onkeydown: (e: KeyboardEvent) => void;
+        'aria-invalid': "true" | undefined;
+        'aria-required': "true" | undefined;
+        'aria-describedby': string | undefined;
+        'aria-label': string | undefined;
+        role: string;
+        id: string | undefined;
+        'aria-orientation': "horizontal" | "vertical";
+    };
+    /** Spread onto the button element at `index`. */
+    buttonProps: (index: number) => {
+        type: "button";
+        role: "radio" | undefined;
+        'data-idx': number;
+        'aria-checked': boolean | undefined;
+        'aria-pressed': boolean | undefined;
+        'data-selected': string | undefined;
+        disabled: true | undefined;
+        tabindex: number;
+        onclick: () => void;
+    };
+};
+export type ButtonGroup = ReturnType<typeof createButtonGroup>;

package/dist/createButtonGroup.svelte.js

@@ -0,0 +1,154 @@
+/**
+ * createButtonGroup - the HEADLESS core behind <SvButtonGroup>: a segmented
+ * button bar with single- or multi-select (or plain action buttons), roving
+ * tabindex + full keyboard, exposed as **prop-getters** you spread onto YOUR OWN
+ * markup. No styles, no DOM. Parity: Smart `smart-button-group`.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createButtonGroup } from '@svgrid/grid'
+ *   let value = $state<string | null>('day')
+ *   const g = createButtonGroup({ items: () => items, value: () => value, onChange: (v) => (value = v) })
+ * </script>
+ * <div {...g.rootProps()}>
+ *   {#each items as it, i (it.value)}<button {...g.buttonProps(i)}>{it.label}</button>{/each}
+ * </div>
+ * ```
+ *
+ * The styled <SvButtonGroup> is one renderer over this core.
+ */
+import { editorAria } from './editor-contract';
+/** Normalize the value to an array (pure). */
+export function toGroupArray(value) {
+    if (value == null)
+        return [];
+    return Array.isArray(value) ? [...value] : [value];
+}
+export function createButtonGroup(config) {
+    const items = () => config.items();
+    const mode = () => config.mode?.() ?? 'single';
+    const disabled = () => config.disabled?.() ?? false;
+    const isVert = () => (config.orientation?.() ?? 'horizontal') === 'vertical';
+    const rtl = () => config.dir?.() === 'rtl';
+    const selected = $derived(toGroupArray(config.value()));
+    const enabledIdx = $derived(items().map((it, i) => (it.disabled ? -1 : i)).filter((i) => i >= 0));
+    const isSelected = (v) => selected.includes(v);
+    const selectedIdx = $derived(items().findIndex((it) => isSelected(it.value)));
+    // Focus cursor. In single (radio) mode moving the cursor also selects, so the
+    // roving-tabindex target follows the selection; multiple/none keep their own
+    // cursor in `active`.
+    let active = $state(0);
+    $effect(() => {
+        const it = items()[active];
+        if (!it || it.disabled)
+            active = enabledIdx[0] ?? 0;
+    });
+    const cursor = $derived(mode() === 'single' ? (selectedIdx >= 0 ? selectedIdx : enabledIdx[0] ?? 0) : active);
+    function pick(i) {
+        const it = items()[i];
+        if (!it || it.disabled || disabled())
+            return;
+        active = i;
+        if (mode() === 'none') {
+            config.onChange?.(it.value);
+            return;
+        }
+        if (mode() === 'multiple') {
+            const set = new Set(selected);
+            set.has(it.value) ? set.delete(it.value) : set.add(it.value);
+            config.onChange?.([...set]);
+        }
+        else {
+            config.onChange?.(it.value);
+        }
+    }
+    function goto(i) {
+        // Radio semantics select on move; toggle/action only move focus.
+        if (mode() === 'single')
+            pick(i);
+        else
+            active = i;
+    }
+    function move(delta) {
+        if (!enabledIdx.length)
+            return;
+        const pos = enabledIdx.indexOf(cursor);
+        const next = enabledIdx[(pos + delta + enabledIdx.length) % enabledIdx.length];
+        if (next != null)
+            goto(next);
+    }
+    function onKeydown(e) {
+        if (disabled())
+            return;
+        const horiz = !isVert();
+        const rtlH = horiz && rtl();
+        const fwd = horiz ? (rtlH ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown';
+        const back = horiz ? (rtlH ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp';
+        if (e.key === fwd) {
+            e.preventDefault();
+            move(1);
+        }
+        else if (e.key === back) {
+            e.preventDefault();
+            move(-1);
+        }
+        else if (e.key === 'Home') {
+            e.preventDefault();
+            goto(enabledIdx[0] ?? 0);
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            goto(enabledIdx.at(-1) ?? 0);
+        }
+        else if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            pick(cursor);
+        }
+    }
+    const ariaState = () => ({
+        id: config.id?.(),
+        invalid: config.invalid?.(),
+        required: config.required?.(),
+        error: config.error?.(),
+        hint: config.hint?.(),
+        ariaLabel: config.ariaLabel?.(),
+    });
+    const groupRole = () => (mode() === 'single' ? 'radiogroup' : 'group');
+    return {
+        /** Roving-focus target index (follows the selection in single mode). */
+        get activeIndex() { return cursor; },
+        /** Selected values as an array (single mode -> 0 or 1 entry). */
+        get selectedValues() { return selected; },
+        isSelected,
+        isActive: (i) => i === cursor,
+        pick,
+        move,
+        onKeydown,
+        /** Spread onto the group container element. */
+        rootProps: () => ({
+            role: groupRole(),
+            id: config.id?.(),
+            'aria-orientation': isVert() ? 'vertical' : 'horizontal',
+            ...editorAria(ariaState()),
+            onkeydown: onKeydown,
+        }),
+        /** Spread onto the button element at `index`. */
+        buttonProps: (index) => {
+            const it = items()[index];
+            const on = it ? isSelected(it.value) : false;
+            const single = mode() === 'single';
+            return {
+                type: 'button',
+                role: single ? 'radio' : undefined,
+                'data-idx': index,
+                'aria-checked': single ? on : undefined,
+                'aria-pressed': mode() === 'multiple' ? on : undefined,
+                'data-selected': on ? '' : undefined,
+                disabled: disabled() || it?.disabled || undefined,
+                // Roving tabindex: only the cursor (selection in single mode) is tabbable.
+                tabindex: mode() === 'none' ? 0 : index === cursor ? 0 : -1,
+                onclick: () => pick(index),
+            };
+        },
+    };
+}

package/dist/createCalendar.svelte.d.ts

@@ -28,6 +28,7 @@
 import { type DateLike, type MonthMatrixCell } from './datetime/date-core';
 import { type SelectionMode } from './datetime/date-selection';
 import { type RestrictOptions } from './datetime/date-restrict';
+import { type RecurrenceRule } from './recurrence';
 export type DisplayMode = 'month' | 'year' | 'decade';
 export type CalendarNameFormat = 'narrow' | 'short' | 'long';
 /** Selected value(s). Single Date for one/zeroOrOne, array for multi modes. */
@@ -53,6 +54,8 @@ export type CalendarDayState = {
     outside: boolean;
     focused: boolean;
     preview: boolean;
+    /** Matches one of the `recurrence` rules (repeat pattern). */
+    recurring: boolean;
 };
 /** Reactive inputs are passed as getters so the core tracks live prop changes;
  *  callbacks are plain closures. */
@@ -75,6 +78,8 @@ export type CalendarConfig = {
     dayNameFormat?: () => CalendarNameFormat;
     monthNameFormat?: () => CalendarNameFormat;
     dateTooltip?: () => ((date: Date) => string | null | undefined) | undefined;
+    /** Repeat pattern(s) - matching days get `dayState().recurring = true`. */
+    recurrence?: () => RecurrenceRule | ReadonlyArray<RecurrenceRule> | null;
 };
 /** Normalize a calendar value to an ordered day-midnight list (pure). */
 export declare function normalizeCalendarValue(v: CalendarValue): Date[];

package/dist/createCalendar.svelte.js

@@ -28,6 +28,7 @@
 import { addDays, addMonths, addYears, monthMatrix, weekdayOrder, startOfDay, isSameDay, isSameMonth, toDate, decadeRange, } from './datetime/date-core';
 import { selectDate, isSelected, rangeDays, emptySelection, } from './datetime/date-selection';
 import { isDisabledDay, isImportant } from './datetime/date-restrict';
+import { matchesRecurrence } from './recurrence';
 const defaultLocale = () => (typeof navigator !== 'undefined' ? navigator.language : 'en-US');
 /** Normalize a calendar value to an ordered day-midnight list (pure). */
 export function normalizeCalendarValue(v) {
@@ -127,6 +128,7 @@ export function createCalendar(config) {
             outside: !isSameMonth(d, panelMonth),
             focused: isSameDay(d, focusDate),
             preview: inPreview(d),
+            recurring: matchesRecurrence(d, config.recurrence?.() ?? null),
         };
     }
     const title = $derived(mode === 'month'

package/dist/createCheckbox.svelte.d.ts

@@ -1,31 +1,23 @@
-/**
- * createCheckbox - the HEADLESS core behind <SvCheckBox>: a controlled tri-state
- * checkbox (checked / unchecked / indeterminate, ARIA `checkbox` with
- * `aria-checked="mixed"`), exposed as **prop-getters** you spread onto YOUR OWN
- * markup. A native <button> supplies Space/Enter activation.
- *
- * ```svelte
- * <script lang="ts">
- *   import { createCheckbox } from '@svgrid/grid'
- *   let checked = $state(false)
- *   const cb = createCheckbox({ checked: () => checked, onChange: (v) => (checked = v) })
- * </script>
- * <button {...cb.boxProps()}>{cb.checked ? '✓' : ''}</button>
- * ```
- *
- * The styled <SvCheckBox> is just one renderer over this core.
- */
 export type CheckboxConfig = {
     checked: () => boolean;
     indeterminate?: () => boolean;
     onChange?: (checked: boolean) => void;
     disabled?: () => boolean;
+    id?: () => string | undefined;
+    invalid?: () => boolean;
+    required?: () => boolean;
+    error?: () => string | undefined;
+    hint?: () => string | undefined;
     ariaLabel?: () => string | undefined;
 };
 export type CheckboxBoxProps = {
     type: 'button';
     role: 'checkbox';
+    id: string | undefined;
     'aria-checked': boolean | 'mixed';
+    'aria-invalid': 'true' | undefined;
+    'aria-required': 'true' | undefined;
+    'aria-describedby': string | undefined;
     'aria-label': string | undefined;
     disabled: boolean;
     'data-checked': '' | undefined;

package/dist/createCheckbox.svelte.js

@@ -1,3 +1,21 @@
+/**
+ * createCheckbox - the HEADLESS core behind <SvCheckBox>: a controlled tri-state
+ * checkbox (checked / unchecked / indeterminate, ARIA `checkbox` with
+ * `aria-checked="mixed"`), exposed as **prop-getters** you spread onto YOUR OWN
+ * markup. A native <button> supplies Space/Enter activation.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createCheckbox } from '@svgrid/grid'
+ *   let checked = $state(false)
+ *   const cb = createCheckbox({ checked: () => checked, onChange: (v) => (checked = v) })
+ * </script>
+ * <button {...cb.boxProps()}>{cb.checked ? '✓' : ''}</button>
+ * ```
+ *
+ * The styled <SvCheckBox> is just one renderer over this core.
+ */
+import { editorAria } from './editor-contract';
 export function createCheckbox(config) {
     const checked = () => config.checked();
     const indeterminate = () => config.indeterminate?.() ?? false;
@@ -7,6 +25,14 @@ export function createCheckbox(config) {
             return;
         config.onChange?.(indeterminate() ? true : !checked());
     }
+    const ariaState = () => ({
+        id: config.id?.(),
+        invalid: config.invalid?.(),
+        required: config.required?.(),
+        error: config.error?.(),
+        hint: config.hint?.(),
+        ariaLabel: config.ariaLabel?.(),
+    });
     return {
         get checked() { return checked(); },
         get indeterminate() { return indeterminate(); },
@@ -15,11 +41,12 @@ export function createCheckbox(config) {
         boxProps: () => ({
             type: 'button',
             role: 'checkbox',
+            id: config.id?.(),
             'aria-checked': indeterminate() ? 'mixed' : checked(),
-            'aria-label': config.ariaLabel?.(),
             disabled: disabled(),
             'data-checked': checked() && !indeterminate() ? '' : undefined,
             'data-indeterminate': indeterminate() ? '' : undefined,
+            ...editorAria(ariaState()),
             onclick: toggle,
         }),
     };