@svgrid/grid 2.2.16 → 2.2.18

package/dist/cell-formatting.d.ts

@@ -5,13 +5,13 @@
 export declare function resolveDatePattern(pattern: string | undefined, kind: 'date' | 'datetime'): Intl.DateTimeFormatOptions | undefined;
 type NumericFormatInput = {
     type: 'number' | 'currency' | 'percent';
-    locales?: string | string[];
+    locales?: string | readonly string[];
     currency?: string;
     /** When type is percent: treat value as 0–100 instead of Intl’s 0–1 fraction */
     valueIsPercentPoints?: boolean;
     options?: Intl.NumberFormatOptions;
 };
-export declare function getDateFormatter(locales: string | string[] | undefined, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat;
+export declare function getDateFormatter(locales: string | readonly string[] | undefined, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat;
 /** Format a numeric value for number / currency / percent column formats. */
 export declare function formatNumericWithConfig(value: unknown, config: NumericFormatInput): string;
 export {};

package/dist/cell-render.js

@@ -172,7 +172,7 @@ export function createCellRender(ctx) {
             formatConfig.type === "percent") {
             return formatNumericWithConfig(value, {
                 type: formatConfig.type,
-                locales: formatConfig.locales,
+                locales: (formatConfig.locales ?? ctx.props.localization?.locale),
                 currency: formatConfig.type === "currency"
                     ? (formatConfig.currency ?? "USD")
                     : undefined,
@@ -197,7 +197,7 @@ export function createCellRender(ctx) {
                             hour: "2-digit",
                             minute: "2-digit",
                         };
-                return getDateFormatter(formatConfig.locales, merged).format(parsedDate);
+                return getDateFormatter((formatConfig.locales ?? ctx.props.localization?.locale), merged).format(parsedDate);
             }
         }
         return String(value ?? "");
@@ -226,7 +226,7 @@ export function createCellRender(ctx) {
             formatConfig.type === "percent") {
             return formatNumericWithConfig(value, {
                 type: formatConfig.type,
-                locales: formatConfig.locales,
+                locales: (formatConfig.locales ?? ctx.props.localization?.locale),
                 currency: formatConfig.type === "currency"
                     ? (formatConfig.currency ?? "USD")
                     : undefined,
@@ -245,7 +245,7 @@ export function createCellRender(ctx) {
                     : formatConfig.type === "date"
                         ? { year: "numeric", month: "2-digit", day: "2-digit" }
                         : { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" };
-                return getDateFormatter(formatConfig.locales, merged).format(parsedDate);
+                return getDateFormatter((formatConfig.locales ?? ctx.props.localization?.locale), merged).format(parsedDate);
             }
         }
         return String(value ?? "");

package/dist/chart-view.svelte.d.ts

@@ -0,0 +1,25 @@
+/**
+ * chart-view registry - the injection seam for the *chart view of the grid*.
+ * Setting the `chart` prop on `<SvGrid>` swaps the table for a chart driven by
+ * the grid's filtered + sorted rows. Mirrors the `board-view` / `scheduler-view`
+ * seam, with one difference: the chart renderer is NOT a paid feature. The chart
+ * primitive (`SvChart` / `SvGridChart`) already ships in the free `@svgrid/grid`,
+ * so the grid lazy-loads a built-in default renderer (`SvGridChartView`) out of
+ * the box. This seam exists only so a host (or enterprise) can *override* that
+ * default with a richer renderer - it is not required for the view to work.
+ *
+ * ```ts
+ * // optional: replace the built-in chart view with your own renderer
+ * import { registerChartView } from '@svgrid/grid'
+ * import MyChartView from './MyChartView.svelte'
+ * registerChartView(MyChartView)
+ * ```
+ */
+import type { Component } from 'svelte';
+/** Override the built-in chart-view renderer. Optional - the grid ships a
+ *  free default, so this is only for hosts that want a custom renderer. */
+export declare function registerChartView(component: Component<any>): void;
+/** The registered chart-view override, or null to use the built-in default. */
+export declare function getChartView(): Component<any> | null;
+/** Whether a chart-view override has been registered. */
+export declare function hasChartView(): boolean;

package/dist/chart-view.svelte.js

@@ -0,0 +1,14 @@
+let renderer = $state(null);
+/** Override the built-in chart-view renderer. Optional - the grid ships a
+ *  free default, so this is only for hosts that want a custom renderer. */
+export function registerChartView(component) {
+    renderer = component;
+}
+/** The registered chart-view override, or null to use the built-in default. */
+export function getChartView() {
+    return renderer;
+}
+/** Whether a chart-view override has been registered. */
+export function hasChartView() {
+    return renderer != null;
+}

package/dist/createCombobox.svelte.d.ts

@@ -27,6 +27,8 @@ export type ComboboxConfig = {
     value: () => ComboboxValue;
     onChange?: (value: ComboboxValue) => void;
     disabled?: () => boolean;
+    /** Read-only: value shown, input focusable, but not editable and the panel will not open. */
+    readonly?: () => boolean;
     ariaLabel?: () => string | undefined;
     /** Filter the options locally by the query. Set false for server-side search. */
     localFilter?: () => boolean;
@@ -65,13 +67,16 @@ export declare function createCombobox(config: ComboboxConfig): {
     close: (revert?: boolean) => void;
     toggle: () => void;
     pick: (o: ListOption | undefined) => void;
+    clear: () => void;
     onInput: (e: Event) => void;
     onFocus: () => void;
     onKeydown: (e: KeyboardEvent) => void;
     /** Spread onto the editable <input>. */
     inputProps: () => {
+        'aria-readonly': true | undefined;
         value: string;
         disabled: boolean;
+        readonly: true | undefined;
         oninput: (e: Event) => void;
         onfocus: () => void;
         onkeydown: (e: KeyboardEvent) => void;

package/dist/createCombobox.svelte.js

@@ -27,6 +27,7 @@ export function createCombobox(config) {
     const listId = `${id}-list`;
     const opts = () => config.options();
     const disabled = () => config.disabled?.() ?? false;
+    const readonly = () => config.readonly?.() ?? false;
     let open = $state(false);
     let query = $state('');
     let active = $state(0);
@@ -47,7 +48,7 @@ export function createCombobox(config) {
         hint: config.hint?.(),
         ariaLabel: config.ariaLabel?.(),
     });
-    function openPanel() { if (disabled() || open)
+    function openPanel() { if (disabled() || readonly() || open)
         return; open = true; active = 0; }
     function close(revert = true) {
         open = false;
@@ -63,7 +64,7 @@ export function createCombobox(config) {
         openPanel();
     } }
     function pick(o) {
-        if (!o || o.disabled)
+        if (readonly() || !o || o.disabled)
             return;
         config.onChange?.(o.value);
         query = o.label;
@@ -71,18 +72,30 @@ export function createCombobox(config) {
         open = false;
         config.blurInput?.();
     }
+    /** Clear the selection (value -> null) and reset the shown text. */
+    function clear() {
+        if (readonly() || disabled())
+            return;
+        config.onChange?.(null);
+        query = '';
+        editing = false;
+        open = false;
+    }
     function setActive(i) { const o = filtered[i]; if (o && !o.disabled)
         active = i; }
     function onInput(e) {
+        if (readonly())
+            return;
         query = e.currentTarget.value;
         editing = true;
         active = 0;
         if (!open)
             openPanel();
     }
-    function onFocus() { editing = true; query = selected?.label ?? ''; openPanel(); }
+    function onFocus() { if (readonly())
+        return; editing = true; query = selected?.label ?? ''; openPanel(); }
     function onKeydown(e) {
-        if (disabled())
+        if (disabled() || readonly())
             return;
         if (!open && e.key === 'ArrowDown') {
             e.preventDefault();
@@ -133,6 +146,7 @@ export function createCombobox(config) {
         close,
         toggle,
         pick,
+        clear,
         onInput,
         onFocus,
         onKeydown,
@@ -145,8 +159,10 @@ export function createCombobox(config) {
             'aria-autocomplete': 'list',
             'aria-activedescendant': open && filtered[active] ? optionId(active) : undefined,
             ...editorAria(ariaState()),
+            'aria-readonly': readonly() || undefined,
             value: shownText,
             disabled: disabled(),
+            readonly: readonly() || undefined,
             oninput: onInput,
             onfocus: onFocus,
             onkeydown: onKeydown,
@@ -156,7 +172,7 @@ export function createCombobox(config) {
             type: 'button',
             tabindex: -1,
             'aria-label': 'Toggle',
-            disabled: disabled(),
+            disabled: disabled() || readonly(),
             onclick: toggle,
         }),
         /** Spread onto the listbox container. */

package/dist/createDropdownList.svelte.d.ts

@@ -27,6 +27,8 @@ export type DropdownListConfig = {
     value: () => DropdownValue;
     onChange?: (value: string | number) => void;
     disabled?: () => boolean;
+    /** Read-only: value shown, trigger focusable, but the panel will not open. */
+    readonly?: () => boolean;
     ariaLabel?: () => string | undefined;
     /** DOM focus hook provided by the renderer; the core never touches the DOM. */
     focusTrigger?: () => void;
@@ -56,6 +58,7 @@ export declare function createDropdownList(config: DropdownListConfig): {
     onKeydown: (e: KeyboardEvent) => void;
     /** Spread onto the trigger <button>. */
     triggerProps: () => {
+        'aria-readonly': true | undefined;
         disabled: boolean;
         onclick: () => void;
         onkeydown: (e: KeyboardEvent) => void;

package/dist/createDropdownList.svelte.js

@@ -27,6 +27,7 @@ export function createDropdownList(config) {
     const optionId = (index) => `${listId}-opt-${index}`;
     const opts = () => config.options();
     const disabled = () => config.disabled?.() ?? false;
+    const readonly = () => config.readonly?.() ?? false;
     const ariaState = () => ({
         id: config.id?.(),
         invalid: config.invalid?.(),
@@ -40,7 +41,7 @@ export function createDropdownList(config) {
     const selected = $derived(opts().find((o) => o.value === config.value()) ?? null);
     const enabledIdx = $derived(opts().map((o, i) => (o.disabled ? -1 : i)).filter((i) => i >= 0));
     function openPanel() {
-        if (disabled() || open)
+        if (disabled() || readonly() || open)
             return;
         open = true;
         active = Math.max(0, opts().findIndex((o) => o.value === config.value()));
@@ -53,6 +54,8 @@ export function createDropdownList(config) {
         openPanel();
     } }
     function pick(i) {
+        if (readonly())
+            return;
         const o = opts()[i];
         if (!o || o.disabled)
             return;
@@ -70,6 +73,8 @@ export function createDropdownList(config) {
     // when the list is closed, matching a native <select>).
     const typeahead = createTypeaheadBuffer();
     function onTypeahead(char) {
+        if (readonly())
+            return;
         const buffer = typeahead.push(char.toLowerCase());
         const from = active >= 0 ? active : opts().findIndex((o) => o.value === config.value());
         const next = nextTypeaheadIndex(opts(), buffer, from);
@@ -80,7 +85,7 @@ export function createDropdownList(config) {
             config.onChange?.(opts()[next].value);
     }
     function onKeydown(e) {
-        if (disabled())
+        if (disabled() || readonly())
             return;
         if (isTypeaheadKey(e)) {
             onTypeahead(e.key);
@@ -144,6 +149,7 @@ export function createDropdownList(config) {
             'aria-controls': listId,
             'aria-activedescendant': open && opts()[active] ? optionId(active) : undefined,
             ...editorAria(ariaState()),
+            'aria-readonly': readonly() || undefined,
             disabled: disabled(),
             onclick: toggle,
             onkeydown: onKeydown,

package/dist/createForm.svelte.d.ts

@@ -20,6 +20,14 @@
  * ```
  */
 import { type FormEntry } from './form-field';
+/** Localizable strings the form generates itself (override via `messages`). */
+export type FormMessages = {
+    required: (label: string) => string;
+    minItems: (label: string, n: number) => string;
+    maxItems: (label: string, n: number) => string;
+    /** Shown by SvForm while an async validator runs. */
+    checking: string;
+};
 export type FormConfig = {
     /** The schema - a mix of flat fields and titled sections. */
     fields: () => ReadonlyArray<FormEntry>;
@@ -29,6 +37,8 @@ export type FormConfig = {
      *  `submitting` stays true until the returned promise settles. */
     onSubmit?: (values: Record<string, any>) => void | Promise<void>;
     onChange?: (values: Record<string, any>) => void;
+    /** Override the built-in generated strings (required / min-max items / checking). */
+    messages?: Partial<FormMessages>;
 };
 export declare function createForm(config: FormConfig): {
     readonly values: Record<string, any>;
@@ -58,5 +68,13 @@ export declare function createForm(config: FormConfig): {
     submit: () => Promise<boolean>;
     reset: (next?: Record<string, any>) => void;
     setErrors: (map: Record<string, string>) => void;
+    errorList: () => {
+        name: string;
+        label: string;
+        message: string;
+    }[];
+    firstErrorField: () => string | undefined;
+    /** The resolved message strings (defaults merged with `config.messages`). */
+    messages: FormMessages;
 };
 export type Form = ReturnType<typeof createForm>;

package/dist/createForm.svelte.js

@@ -21,6 +21,12 @@
  */
 import { flattenFields } from './form-field';
 import { runRules } from './validators';
+const DEFAULT_FORM_MESSAGES = {
+    required: (l) => `${l} is required`,
+    minItems: (_l, n) => `Add at least ${n} item(s)`,
+    maxItems: (_l, n) => `At most ${n} item(s)`,
+    checking: 'Checking…',
+};
 /** Deep-ish equality for dirty tracking: identity for primitives, structural
  *  (JSON) for arrays/objects. Good enough for form values. */
 function eq(a, b) {
@@ -43,6 +49,7 @@ function resolveFlag(flag, dflt, values) {
     return typeof flag === 'function' ? !!flag(values) : !!flag;
 }
 export function createForm(config) {
+    const M = { ...DEFAULT_FORM_MESSAGES, ...(config.messages ?? {}) };
     let values = $state({ ...(config.initial ?? {}) });
     let errors = $state({});
     let touched = $state({});
@@ -73,7 +80,7 @@ export function createForm(config) {
      *  rows (so within-row cross-field rules work). */
     function syncError(field, v, ctx = values) {
         if (field.required && (v == null || v === '' || (Array.isArray(v) && !v.length)))
-            return `${field.label} is required`;
+            return M.required(field.label);
         if (field.rules) {
             const e = runRules(v, field.rules, ctx);
             if (e)
@@ -132,6 +139,11 @@ export function createForm(config) {
         const field = fieldOf(name);
         if (!field)
             return true;
+        // Computed fields are derived + read-only - never validated, never block submit.
+        if (field.computed) {
+            setError(name, null);
+            return true;
+        }
         // Hidden fields never block submit; clear any stale error + pending check.
         if (!isVisible(name)) {
             setError(name, null);
@@ -213,11 +225,11 @@ export function createForm(config) {
         const items = arrayItems(name);
         let arrErr = null;
         if (field.required && items.length === 0)
-            arrErr = `${field.label} is required`;
+            arrErr = M.required(field.label);
         else if (field.minItems != null && items.length < field.minItems)
-            arrErr = `Add at least ${field.minItems} item(s)`;
+            arrErr = M.minItems(field.label, field.minItems);
         else if (field.maxItems != null && items.length > field.maxItems)
-            arrErr = `At most ${field.maxItems} item(s)`;
+            arrErr = M.maxItems(field.label, field.maxItems);
         setError(name, arrErr);
         let ok = !arrErr;
         clearNamespacedErrors(name); // rebuild fresh per-item errors
@@ -227,8 +239,22 @@ export function createForm(config) {
                     ok = false;
         return ok;
     }
+    /** True when `field` depends on `name` (cascading). */
+    function dependsOnName(field, name) {
+        const dep = field.dependsOn;
+        return dep == null ? false : Array.isArray(dep) ? dep.includes(name) : dep === name;
+    }
     function setValue(name, v) {
-        values = { ...values, [name]: v };
+        let next = { ...values, [name]: v };
+        // Cascading: clear any fields that depend on this one so a stale child
+        // selection (e.g. a city under the old country) does not linger.
+        for (const f of flat()) {
+            if (dependsOnName(f, name) && next[f.name] != null) {
+                next = { ...next, [f.name]: null };
+                setError(f.name, null);
+            }
+        }
+        values = next;
         config.onChange?.(values);
         // Re-validate live once the field has been blurred at least once.
         if (touched[name])
@@ -270,6 +296,10 @@ export function createForm(config) {
         for (const f of flat())
             if (!isVisible(f.name))
                 delete payload[f.name];
+        // Inject computed (derived) values so the payload carries them.
+        for (const f of flat())
+            if (f.computed && isVisible(f.name))
+                payload[f.name] = f.computed(values);
         submitting = true;
         try {
             await config.onSubmit?.(payload);
@@ -335,6 +365,17 @@ export function createForm(config) {
         touched = nextTouched;
     }
     const isFieldDirty = (name) => !eq(values[name], baseline[name]);
+    /** Top-level field errors (visible fields only), for a form-level summary. */
+    function errorList() {
+        const out = [];
+        for (const f of flat()) {
+            const m = errors[f.name];
+            if (m && isVisible(f.name))
+                out.push({ name: f.name, label: f.label, message: m });
+        }
+        return out;
+    }
+    const firstErrorField = () => errorList()[0]?.name;
     return {
         get values() { return values; },
         get submitting() { return submitting; },
@@ -345,7 +386,7 @@ export function createForm(config) {
                     return true;
             return false;
         },
-        value: (name) => values[name],
+        value: (name) => { const f = fieldOf(name); return f?.computed ? f.computed(values) : values[name]; },
         error: (name) => errors[name],
         isTouched: (name) => !!touched[name],
         hasError: (name) => !!errors[name],
@@ -370,5 +411,9 @@ export function createForm(config) {
         submit,
         reset,
         setErrors,
+        errorList,
+        firstErrorField,
+        /** The resolved message strings (defaults merged with `config.messages`). */
+        messages: M,
     };
 }

package/dist/createMenu.svelte.js

@@ -1,4 +1,5 @@
 import { enabledIndices, wrapMove } from './list-nav';
+import { createTypeaheadBuffer, isTypeaheadKey } from './list-option';
 let uid = 0;
 export function createMenu(config) {
     const items = () => config.items();
@@ -7,6 +8,23 @@ export function createMenu(config) {
     // -1 = nothing focused yet (the first enabled item is the tab stop).
     let active = $state(-1);
     let openSub = $state(-1);
+    // Type-ahead: printable keys jump to the next item whose label starts with the
+    // accumulated buffer (WAI-ARIA menu behavior), wrapping past the active item.
+    const typeahead = createTypeaheadBuffer();
+    function typeaheadMatch(buffer) {
+        const b = buffer.trim().toLowerCase();
+        if (!b)
+            return -1;
+        const its = items();
+        const n = its.length;
+        for (let k = 1; k <= n; k++) {
+            const i = (active + k + n) % n;
+            const it = its[i];
+            if (it && !it.disabled && !it.separator && (it.label ?? '').toLowerCase().startsWith(b))
+                return i;
+        }
+        return -1;
+    }
     // Real (non-separator, non-disabled) item indices, for roving focus.
     const focusables = $derived(enabledIndices(items().length, (i) => {
         const it = items()[i];
@@ -108,6 +126,15 @@ export function createMenu(config) {
             case 'Tab':
                 config.onClose();
                 break;
+            default:
+                // Type-ahead: a bare printable key jumps to the matching item.
+                if (isTypeaheadKey(e)) {
+                    const idx = typeaheadMatch(typeahead.push(e.key));
+                    if (idx >= 0) {
+                        e.preventDefault();
+                        focus(idx);
+                    }
+                }
         }
     }
     function itemTabIndex(i) {

package/dist/createPopoverSelect.svelte.d.ts

@@ -18,6 +18,8 @@ export type PopoverSelectConfig = {
     itemCount: () => number;
     /** Whether item `i` is disabled (skipped by roving, not selectable). */
     disabled?: (index: number) => boolean;
+    /** Read-only: value shown, trigger focusable, but the panel will not open. */
+    readonly?: () => boolean;
     /** Commit the item at `index` (Enter or a click the component forwards). */
     onSelect: (index: number) => void;
     /** Notified whenever the open state changes. */
@@ -69,6 +71,7 @@ export declare function createPopoverSelect(config: PopoverSelectConfig): {
         'aria-haspopup': "listbox" | "grid" | "tree";
         'aria-expanded': boolean;
         'aria-controls': string | undefined;
+        'aria-readonly': true | undefined;
         onkeydown: (e: KeyboardEvent) => void;
     };
     /** Attributes for the element that OWNS focus + activedescendant (the panel,

package/dist/createPopoverSelect.svelte.js

@@ -25,6 +25,7 @@ export function createPopoverSelect(config) {
     let rect = $state({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 });
     const count = () => config.itemCount();
     const isDisabled = (i) => config.disabled?.(i) ?? false;
+    const readonly = () => config.readonly?.() ?? false;
     function enabledIndices() {
         return enabledIndicesOf(count(), isDisabled);
     }
@@ -39,6 +40,8 @@ export function createPopoverSelect(config) {
         config.onOpenChange?.(v);
     }
     function openPanel() {
+        if (readonly())
+            return;
         active = clampActive(config.initialActive?.() ?? 0);
         setOpen(true);
     }
@@ -47,6 +50,8 @@ export function createPopoverSelect(config) {
         config.getTrigger()?.focus();
     }
     function toggle() {
+        if (readonly())
+            return;
         open ? setOpen(false) : openPanel();
     }
     function move(delta) {
@@ -57,7 +62,7 @@ export function createPopoverSelect(config) {
     function first() { active = enabledIndices()[0] ?? 0; }
     function last() { active = enabledIndices().at(-1) ?? 0; }
     function selectActive() {
-        if (count() === 0 || isDisabled(active))
+        if (readonly() || count() === 0 || isDisabled(active))
             return;
         config.onSelect(active);
         if (config.closeOnSelect?.() ?? true)
@@ -95,6 +100,8 @@ export function createPopoverSelect(config) {
         };
     });
     function onTriggerKeydown(e) {
+        if (readonly())
+            return;
         if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();
             openPanel();
@@ -172,6 +179,7 @@ export function createPopoverSelect(config) {
             'aria-haspopup': haspopup,
             'aria-expanded': open,
             'aria-controls': open ? panelId : undefined,
+            'aria-readonly': readonly() || undefined,
             onkeydown: onTriggerKeydown,
         }),
         /** Attributes for the element that OWNS focus + activedescendant (the panel,

package/dist/createSlider.svelte.d.ts

@@ -1,24 +1,3 @@
-/**
- * createSlider - the HEADLESS core behind <SvSlider>, in the same spirit as
- * `createSvGrid` for the grid: a runes-based state machine (single + dual-thumb,
- * stepping, keyboard, drag state) that owns the value<->position math and the
- * ARIA wiring, exposed as **prop-getters** you spread onto YOUR OWN markup.
- *
- * The core never touches the DOM: the styled renderer measures the track
- * (`getBoundingClientRect`) and passes the rect + pointer position IN via
- * `pointerDown` / `setFromPointer`. The core turns that into a stepped value.
- *
- * ```svelte
- * <script lang="ts">
- *   import { createSlider } from '@svgrid/grid'
- *   let value = $state(50)
- *   const s = createSlider({ value: () => value, onChange: (v) => (value = v as number) })
- * </script>
- * <div bind:this={track} onpointerdown={(e) => s.pointerDown({ x: e.clientX, y: e.clientY }, track.getBoundingClientRect())}>
- *   <div {...s.thumbProps(0)} style:left={s.percentOf(s.hi) + '%'}></div>
- * </div>
- * ```
- */
 export type SliderValue = number | [number, number];
 export type SliderOrientation = 'horizontal' | 'vertical';
 export type SliderThumb = 'single' | 'lo' | 'hi';
@@ -39,6 +18,11 @@ export type SliderConfig = {
     ariaLabel?: () => string | undefined;
     /** Right-to-left: mirrors horizontal pointer + Left/Right key direction. */
     rtl?: () => boolean;
+    id?: () => string | undefined;
+    invalid?: () => boolean | undefined;
+    required?: () => boolean | undefined;
+    error?: () => string | undefined;
+    hint?: () => string | undefined;
 };
 export declare function createSlider(config: SliderConfig): {
     readonly value: SliderValue;
@@ -67,6 +51,9 @@ export declare function createSlider(config: SliderConfig): {
         'aria-label': string;
         'aria-orientation': SliderOrientation;
         'aria-disabled': true | undefined;
+        'aria-invalid': "true" | undefined;
+        'aria-required': "true" | undefined;
+        'aria-describedby': string | undefined;
         onkeydown: (e: KeyboardEvent) => void;
     };
 };

package/dist/createSlider.svelte.js

@@ -1,3 +1,25 @@
+/**
+ * createSlider - the HEADLESS core behind <SvSlider>, in the same spirit as
+ * `createSvGrid` for the grid: a runes-based state machine (single + dual-thumb,
+ * stepping, keyboard, drag state) that owns the value<->position math and the
+ * ARIA wiring, exposed as **prop-getters** you spread onto YOUR OWN markup.
+ *
+ * The core never touches the DOM: the styled renderer measures the track
+ * (`getBoundingClientRect`) and passes the rect + pointer position IN via
+ * `pointerDown` / `setFromPointer`. The core turns that into a stepped value.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createSlider } from '@svgrid/grid'
+ *   let value = $state(50)
+ *   const s = createSlider({ value: () => value, onChange: (v) => (value = v as number) })
+ * </script>
+ * <div bind:this={track} onpointerdown={(e) => s.pointerDown({ x: e.clientX, y: e.clientY }, track.getBoundingClientRect())}>
+ *   <div {...s.thumbProps(0)} style:left={s.percentOf(s.hi) + '%'}></div>
+ * </div>
+ * ```
+ */
+import { editorAria } from './editor-contract';
 export function createSlider(config) {
     const min = () => config.min?.() ?? 0;
     const max = () => config.max?.() ?? 100;
@@ -118,6 +140,15 @@ export function createSlider(config) {
             const vmin = which === 'hi' ? lo : min();
             const vmax = which === 'lo' ? hi : max();
             const label = which === 'lo' ? 'Minimum' : which === 'hi' ? 'Maximum' : (config.ariaLabel?.() ?? 'Value');
+            // Validation ARIA (invalid / required / describedby) from the editor
+            // contract; keep the thumb's own value-oriented aria-label.
+            const va = editorAria({
+                id: config.id?.(),
+                invalid: config.invalid?.(),
+                required: config.required?.(),
+                error: config.error?.(),
+                hint: config.hint?.(),
+            });
             return {
                 role: 'slider',
                 tabindex: disabled() ? -1 : 0,
@@ -127,6 +158,9 @@ export function createSlider(config) {
                 'aria-label': label,
                 'aria-orientation': (isVert() ? 'vertical' : 'horizontal'),
                 'aria-disabled': disabled() || undefined,
+                'aria-invalid': va['aria-invalid'],
+                'aria-required': va['aria-required'],
+                'aria-describedby': va['aria-describedby'],
                 onkeydown: (e) => onThumbKey(e, which),
             };
         },