@svgrid/grid 1.2.34 → 2.0.0

package/dist/createPopoverSelect.svelte.js

@@ -0,0 +1,196 @@
+/**
+ * createPopoverSelect - the shared HEADLESS engine behind the kit's dropdown
+ * selects (SvMultiSelect, SvTreeSelect, SvGridSelect and any future one). It
+ * owns the parts every anchored-panel select repeats: open/close state, the
+ * `anchoredRect` positioning (reposition on scroll/resize), outside/Escape
+ * dismissal via the shared layer stack, a roving `active` index over the visible
+ * items, the WAI-ARIA combobox wiring (`aria-expanded` / `aria-controls` /
+ * `aria-activedescendant` + stable option ids), and focus management (focus
+ * moves into the panel on open, back to the trigger on close).
+ *
+ * The component owns its own `bind:this` refs and item rendering; it passes the
+ * refs in as getters and spreads the returned prop-getters onto its trigger,
+ * panel and items. Runes-based, like `createListbox`.
+ */
+import { anchoredRect } from './popover';
+import { createDismissableLayer } from './a11y/dismissable';
+let uidSeq = 0;
+export function createPopoverSelect(config) {
+    const id = `${config.idPrefix ?? 'sv-pop'}-${uidSeq++}`;
+    const panelId = `${id}-panel`;
+    const optionId = (i) => `${id}-opt-${i}`;
+    let open = $state(false);
+    let active = $state(0);
+    let rect = $state({ top: 0, left: 0, width: 0, openUpward: false });
+    const count = () => config.itemCount();
+    const isDisabled = (i) => config.disabled?.(i) ?? false;
+    function enabledIndices() {
+        const out = [];
+        const n = count();
+        for (let i = 0; i < n; i++)
+            if (!isDisabled(i))
+                out.push(i);
+        return out;
+    }
+    function clampActive(i) {
+        const n = count();
+        return n <= 0 ? 0 : Math.max(0, Math.min(i, n - 1));
+    }
+    function setOpen(v) {
+        if (v === open)
+            return;
+        open = v;
+        config.onOpenChange?.(v);
+    }
+    function openPanel() {
+        active = clampActive(config.initialActive?.() ?? 0);
+        setOpen(true);
+    }
+    function closePanel() {
+        setOpen(false);
+        config.getTrigger()?.focus();
+    }
+    function toggle() {
+        open ? setOpen(false) : openPanel();
+    }
+    function move(delta) {
+        const list = enabledIndices();
+        if (!list.length)
+            return;
+        const pos = list.indexOf(active);
+        active = list[(pos + delta + list.length) % list.length] ?? list[0];
+    }
+    function first() { active = enabledIndices()[0] ?? 0; }
+    function last() { active = enabledIndices().at(-1) ?? 0; }
+    function selectActive() {
+        if (count() === 0 || isDisabled(active))
+            return;
+        config.onSelect(active);
+        if (config.closeOnSelect?.() ?? true)
+            closePanel();
+    }
+    function updatePos() {
+        const t = config.getTrigger();
+        if (!t)
+            return;
+        rect = anchoredRect(t.getBoundingClientRect(), {
+            estimatedHeight: config.estimatedHeight?.() ?? 280,
+            minWidth: config.minWidth?.() ?? 200,
+        });
+    }
+    // While open: position, focus into the panel, reposition on scroll/resize, and
+    // register a dismissable layer (Escape / outside-click, top-of-stack first).
+    $effect(() => {
+        if (!open)
+            return;
+        updatePos();
+        const initial = config.getInitialFocus?.() ?? config.getPanel();
+        queueMicrotask(() => initial?.focus());
+        const rp = () => updatePos();
+        window.addEventListener('scroll', rp, true);
+        window.addEventListener('resize', rp);
+        const layer = createDismissableLayer({
+            element: () => [config.getTrigger(), config.getPanel()],
+            onDismiss: () => setOpen(false),
+        });
+        layer.activate();
+        return () => {
+            window.removeEventListener('scroll', rp, true);
+            window.removeEventListener('resize', rp);
+            layer.release();
+        };
+    });
+    function onTriggerKeydown(e) {
+        if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            openPanel();
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            openPanel();
+            last();
+        }
+        else if (e.key === 'Escape') {
+            setOpen(false);
+        }
+    }
+    function onPanelKeydown(e) {
+        if (config.onExtraKey?.(e, active))
+            return;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                move(1);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                move(-1);
+                break;
+            case 'Home':
+                e.preventDefault();
+                first();
+                break;
+            case 'End':
+                e.preventDefault();
+                last();
+                break;
+            case 'Enter':
+                e.preventDefault();
+                selectActive();
+                break;
+            case 'Escape':
+                e.preventDefault();
+                closePanel();
+                break;
+            case 'Tab':
+                setOpen(false);
+                break;
+        }
+    }
+    /** The current active-descendant id (for the focused element), or undefined. */
+    const activeDescendant = () => (open && count() > 0 ? optionId(active) : undefined);
+    return {
+        get open() { return open; },
+        set open(v) { setOpen(v); },
+        get active() { return active; },
+        set active(i) { active = clampActive(i); },
+        get rect() { return rect; },
+        /** Stable id of the panel element (for aria-controls / labelling). */
+        panelId,
+        /** Stable id of the option at `i` (for aria-activedescendant + item id). */
+        optionId,
+        activeDescendant,
+        openPanel,
+        closePanel,
+        toggle,
+        move,
+        first,
+        last,
+        selectActive,
+        updatePos,
+        onPanelKeydown,
+        /** True when item `i` is the roving-active one. */
+        isActive: (i) => i === active,
+        /** Spread onto the trigger button. */
+        triggerProps: () => ({
+            'aria-haspopup': 'listbox',
+            'aria-expanded': open,
+            'aria-controls': open ? panelId : undefined,
+            onkeydown: onTriggerKeydown,
+        }),
+        /** Attributes for the element that OWNS focus + activedescendant (the panel,
+         *  or a search input). Pass the ARIA role the panel should expose. */
+        focusOwnerProps: (role = 'listbox') => ({
+            role,
+            'aria-activedescendant': activeDescendant(),
+            onkeydown: onPanelKeydown,
+        }),
+        /** Spread onto the item element at `i`. */
+        itemProps: (i) => ({
+            id: optionId(i),
+            'data-active': i === active ? '' : undefined,
+            onpointermove: () => { if (!isDisabled(i))
+                active = i; },
+        }),
+    };
+}

package/dist/createRadioGroup.svelte.d.ts

@@ -31,6 +31,11 @@ export type RadioGroupConfig = {
     onChange?: (value: string | number) => void;
     disabled?: () => boolean;
     ariaLabel?: () => string | undefined;
+    id?: () => string | undefined;
+    invalid?: () => boolean;
+    required?: () => boolean;
+    error?: () => string | undefined;
+    hint?: () => string | undefined;
 };
 export type RadioProps = {
     type: 'button';
@@ -44,7 +49,11 @@ export type RadioProps = {
 };
 export type RadioGroupProps = {
     role: 'radiogroup';
+    id: string | undefined;
     'aria-label': string | undefined;
+    'aria-invalid': 'true' | undefined;
+    'aria-required': 'true' | undefined;
+    'aria-describedby': string | undefined;
     'aria-disabled': boolean;
     onkeydown: (e: KeyboardEvent) => void;
 };

package/dist/createRadioGroup.svelte.js

@@ -1,3 +1,4 @@
+import { editorAria } from './editor-contract';
 export function createRadioGroup(config) {
     const opts = () => config.options();
     const disabled = () => config.disabled?.() ?? false;
@@ -43,6 +44,14 @@ export function createRadioGroup(config) {
         pickIndex(target);
         container.querySelectorAll('[role="radio"]')[target]?.focus();
     }
+    const ariaState = () => ({
+        id: config.id?.(),
+        invalid: config.invalid?.(),
+        required: config.required?.(),
+        error: config.error?.(),
+        hint: config.hint?.(),
+        ariaLabel: config.ariaLabel?.(),
+    });
     return {
         get value() { return config.value(); },
         get disabled() { return disabled(); },
@@ -51,8 +60,9 @@ export function createRadioGroup(config) {
         onKeydown,
         groupProps: () => ({
             role: 'radiogroup',
-            'aria-label': config.ariaLabel?.(),
+            id: config.id?.(),
             'aria-disabled': disabled(),
+            ...editorAria(ariaState()),
             onkeydown: onKeydown,
         }),
         radioProps: (option) => {

package/dist/createRating.svelte.d.ts

@@ -27,11 +27,22 @@ export type RatingConfig = {
     readonly?: () => boolean;
     disabled?: () => boolean;
     ariaLabel?: () => string | undefined;
+    /** Accessible label for a star given its 1-based position (localizable). */
+    starLabel?: (position: number) => string | undefined;
+    id?: () => string | undefined;
+    invalid?: () => boolean;
+    required?: () => boolean;
+    error?: () => string | undefined;
+    hint?: () => string | undefined;
 };
 export type RatingRootProps = {
     role: 'slider';
+    id: string | undefined;
     tabindex: number;
     'aria-label': string;
+    'aria-invalid': 'true' | undefined;
+    'aria-required': 'true' | undefined;
+    'aria-describedby': string | undefined;
     'aria-valuenow': number;
     'aria-valuemin': number;
     'aria-valuemax': number;

package/dist/createRating.svelte.js

@@ -1,3 +1,4 @@
+import { editorAria } from './editor-contract';
 export function createRating(config) {
     const max = () => config.max?.() ?? 5;
     const allowHalf = () => config.allowHalf?.() ?? false;
@@ -50,6 +51,14 @@ export function createRating(config) {
             config.onChange?.(max());
         }
     }
+    const ariaState = () => ({
+        id: config.id?.(),
+        invalid: config.invalid?.(),
+        required: config.required?.(),
+        error: config.error?.(),
+        hint: config.hint?.(),
+        ariaLabel: config.ariaLabel?.(),
+    });
     return {
         get value() { return config.value(); },
         get preview() { return preview; },
@@ -61,7 +70,9 @@ export function createRating(config) {
         onKeydown,
         rootProps: () => ({
             role: 'slider',
+            id: config.id?.(),
             tabindex: interactive() ? 0 : -1,
+            ...editorAria(ariaState()),
             'aria-label': config.ariaLabel?.() ?? 'Rating',
             'aria-valuenow': config.value(),
             'aria-valuemin': 0,
@@ -74,7 +85,7 @@ export function createRating(config) {
             type: 'button',
             tabindex: -1,
             disabled: !interactive(),
-            'aria-label': `${index + 1} star${index ? 's' : ''}`,
+            'aria-label': config.starLabel?.(index + 1) ?? `${index + 1} star${index ? 's' : ''}`,
             'data-fill': fillOf(index),
             onpointermove: (e) => { if (interactive())
                 hover = valueAt(e, index); },

package/dist/createSlider.svelte.d.ts

@@ -37,6 +37,8 @@ export type SliderConfig = {
     orientation?: () => SliderOrientation;
     disabled?: () => boolean;
     ariaLabel?: () => string | undefined;
+    /** Right-to-left: mirrors horizontal pointer + Left/Right key direction. */
+    rtl?: () => boolean;
 };
 export declare function createSlider(config: SliderConfig): {
     readonly value: SliderValue;

package/dist/createSlider.svelte.js

@@ -5,6 +5,7 @@ export function createSlider(config) {
     const range = () => config.range?.() ?? false;
     const isVert = () => (config.orientation?.() ?? 'horizontal') === 'vertical';
     const disabled = () => config.disabled?.() ?? false;
+    const rtl = () => config.rtl?.() ?? false;
     const lo = $derived(range() ? config.value()[0] : min());
     const hi = $derived(range() ? config.value()[1] : config.value());
     function clampStep(v) {
@@ -16,9 +17,10 @@ export function createSlider(config) {
     let dragging = $state(null);
     /** Turn a pointer position (client coords) + measured track rect into a value. */
     function valueFromPointer(pos, rect) {
+        const horiz = (pos.x - rect.left) / rect.width;
         const frac = isVert()
             ? 1 - (pos.y - rect.top) / rect.height
-            : (pos.x - rect.left) / rect.width;
+            : rtl() ? 1 - horiz : horiz;
         return clampStep(min() + Math.min(1, Math.max(0, frac)) * (max() - min()));
     }
     const emitSingle = (v) => config.onChange?.(v);
@@ -64,11 +66,20 @@ export function createSlider(config) {
         if (disabled())
             return;
         const cur = which === 'lo' ? lo : hi;
+        // Under horizontal RTL, Left increases and Right decreases (Up/Down keep
+        // their natural up=more direction regardless of text direction).
+        const rtlH = rtl() && !isVert();
+        const inc = clampStep(cur + stepSize());
+        const dec = clampStep(cur - stepSize());
         let next = cur;
-        if (e.key === 'ArrowRight' || e.key === 'ArrowUp')
-            next = clampStep(cur + stepSize());
-        else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown')
-            next = clampStep(cur - stepSize());
+        if (e.key === 'ArrowUp')
+            next = inc;
+        else if (e.key === 'ArrowDown')
+            next = dec;
+        else if (e.key === 'ArrowRight')
+            next = rtlH ? dec : inc;
+        else if (e.key === 'ArrowLeft')
+            next = rtlH ? inc : dec;
         else if (e.key === 'Home')
             next = min();
         else if (e.key === 'End')

package/dist/createSplitter.svelte.d.ts

@@ -0,0 +1,67 @@
+/**
+ * createSplitter - the HEADLESS core behind <SvSplitter>: a two-pane resizable
+ * split with a draggable separator (WAI-ARIA `separator`), keyboard resize and
+ * clamping, exposed as **prop-getters** you spread onto YOUR OWN markup. The core
+ * never touches the DOM - the renderer measures the container rect and passes the
+ * pointer position + rect IN via `setFromPointer` (same split as createSlider).
+ * Parity: Smart `smart-splitter`.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createSplitter } from '@svgrid/grid'
+ *   let frac = $state(0.5)
+ *   const sp = createSplitter({ fraction: () => frac, onChange: (f) => (frac = f) })
+ * </script>
+ * <div class="row" bind:this={row}>
+ *   <div style:flex-basis={sp.percent + '%'}>A</div>
+ *   <div {...sp.separatorProps()} onpointerdown={...}></div>
+ *   <div style:flex="1">B</div>
+ * </div>
+ * ```
+ */
+export type SplitterOrientation = 'horizontal' | 'vertical';
+export type SplitterPoint = {
+    x: number;
+    y: number;
+};
+/** Reactive inputs are passed as getters so the core tracks live prop changes. */
+export type SplitterConfig = {
+    /** Size of the FIRST pane as a fraction of the container (0..1). */
+    fraction: () => number;
+    onChange?: (fraction: number) => void;
+    /** Split direction: `horizontal` = a vertical gutter between left/right panes. */
+    orientation?: () => SplitterOrientation;
+    /** Min / max fraction for the first pane (0..1). */
+    min?: () => number;
+    max?: () => number;
+    /** Keyboard step as a fraction (default 0.02 = 2%). */
+    step?: () => number;
+    disabled?: () => boolean;
+    dir?: () => 'ltr' | 'rtl' | 'auto' | undefined;
+    ariaLabel?: () => string | undefined;
+};
+export declare function createSplitter(config: SplitterConfig): {
+    /** Clamped fraction (0..1) of the first pane. */
+    readonly fraction: number;
+    /** Clamped size of the first pane as a percentage (0..100). */
+    readonly percent: number;
+    /** Whether the separator is being dragged. */
+    readonly dragging: boolean;
+    pointerDown: () => void;
+    setFromPointer: (pos: SplitterPoint, rect: DOMRect) => void;
+    endDrag: () => void;
+    nudge: (delta: number) => void;
+    /** Spread onto the draggable separator element. */
+    separatorProps: () => {
+        role: "separator";
+        tabindex: number;
+        'aria-orientation': "horizontal" | "vertical";
+        'aria-valuemin': number;
+        'aria-valuemax': number;
+        'aria-valuenow': number;
+        'aria-label': string;
+        'aria-disabled': true | undefined;
+        onkeydown: (e: KeyboardEvent) => void;
+    };
+};
+export type Splitter = ReturnType<typeof createSplitter>;

package/dist/createSplitter.svelte.js

@@ -0,0 +1,99 @@
+export function createSplitter(config) {
+    const isVert = () => (config.orientation?.() ?? 'horizontal') === 'vertical';
+    const min = () => config.min?.() ?? 0.1;
+    const max = () => config.max?.() ?? 0.9;
+    const step = () => config.step?.() ?? 0.02;
+    const disabled = () => config.disabled?.() ?? false;
+    const rtl = () => config.dir?.() === 'rtl';
+    const clamp = (f) => Math.min(max(), Math.max(min(), f));
+    const fraction = $derived(clamp(config.fraction()));
+    const percent = $derived(Math.round(fraction * 1000) / 10);
+    let dragging = $state(false);
+    function fromPointer(pos, rect) {
+        const raw = isVert()
+            ? (pos.y - rect.top) / rect.height
+            : (pos.x - rect.left) / rect.width;
+        // Horizontal RTL: the first pane sits on the right, so invert.
+        const f = !isVert() && rtl() ? 1 - raw : raw;
+        return clamp(f);
+    }
+    function pointerDown() { if (!disabled())
+        dragging = true; }
+    function setFromPointer(pos, rect) {
+        if (!dragging || disabled())
+            return;
+        config.onChange?.(fromPointer(pos, rect));
+    }
+    function endDrag() { dragging = false; }
+    function nudge(delta) {
+        if (disabled())
+            return;
+        config.onChange?.(clamp(fraction + delta));
+    }
+    function onKeydown(e) {
+        if (disabled())
+            return;
+        const horiz = !isVert();
+        const rtlH = horiz && rtl();
+        const inc = () => nudge(step());
+        const dec = () => nudge(-step());
+        switch (e.key) {
+            case 'ArrowRight':
+                if (horiz) {
+                    e.preventDefault();
+                    rtlH ? dec() : inc();
+                }
+                break;
+            case 'ArrowLeft':
+                if (horiz) {
+                    e.preventDefault();
+                    rtlH ? inc() : dec();
+                }
+                break;
+            case 'ArrowDown':
+                if (!horiz) {
+                    e.preventDefault();
+                    inc();
+                }
+                break;
+            case 'ArrowUp':
+                if (!horiz) {
+                    e.preventDefault();
+                    dec();
+                }
+                break;
+            case 'Home':
+                e.preventDefault();
+                config.onChange?.(min());
+                break;
+            case 'End':
+                e.preventDefault();
+                config.onChange?.(max());
+                break;
+        }
+    }
+    return {
+        /** Clamped fraction (0..1) of the first pane. */
+        get fraction() { return fraction; },
+        /** Clamped size of the first pane as a percentage (0..100). */
+        get percent() { return percent; },
+        /** Whether the separator is being dragged. */
+        get dragging() { return dragging; },
+        pointerDown,
+        setFromPointer,
+        endDrag,
+        nudge,
+        /** Spread onto the draggable separator element. */
+        separatorProps: () => ({
+            role: 'separator',
+            tabindex: disabled() ? -1 : 0,
+            'aria-orientation': (isVert() ? 'horizontal' : 'vertical'),
+            'aria-valuemin': Math.round(min() * 100),
+            'aria-valuemax': Math.round(max() * 100),
+            'aria-valuenow': Math.round(fraction * 100),
+            'aria-label': config.ariaLabel?.() ?? 'Resize panes',
+            'aria-disabled': disabled() || undefined,
+            onkeydown: onKeydown,
+        }),
+    };
+}

package/dist/createSwitch.svelte.d.ts

@@ -1,29 +1,22 @@
-/**
- * createSwitch - the HEADLESS core behind <SvSwitchButton>: a controlled on/off
- * switch (ARIA `switch`) with full keyboard (Space/Enter toggle, ArrowRight on,
- * ArrowLeft off), exposed as **prop-getters** you spread onto YOUR OWN markup.
- *
- * ```svelte
- * <script lang="ts">
- *   import { createSwitch } from '@svgrid/grid'
- *   let on = $state(false)
- *   const sw = createSwitch({ checked: () => on, onChange: (v) => (on = v) })
- * </script>
- * <button {...sw.switchProps()}><span class="thumb"></span></button>
- * ```
- *
- * The styled <SvSwitchButton> is just one renderer over this core.
- */
 export type SwitchConfig = {
     checked: () => 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 SwitchProps = {
     type: 'button';
     role: 'switch';
+    id: string | undefined;
     'aria-checked': boolean;
+    'aria-invalid': 'true' | undefined;
+    'aria-required': 'true' | undefined;
+    'aria-describedby': string | undefined;
     'aria-label': string | undefined;
     disabled: boolean;
     'data-checked': '' | undefined;

package/dist/createSwitch.svelte.js

@@ -1,3 +1,20 @@
+/**
+ * createSwitch - the HEADLESS core behind <SvSwitchButton>: a controlled on/off
+ * switch (ARIA `switch`) with full keyboard (Space/Enter toggle, ArrowRight on,
+ * ArrowLeft off), exposed as **prop-getters** you spread onto YOUR OWN markup.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createSwitch } from '@svgrid/grid'
+ *   let on = $state(false)
+ *   const sw = createSwitch({ checked: () => on, onChange: (v) => (on = v) })
+ * </script>
+ * <button {...sw.switchProps()}><span class="thumb"></span></button>
+ * ```
+ *
+ * The styled <SvSwitchButton> is just one renderer over this core.
+ */
+import { editorAria } from './editor-contract';
 export function createSwitch(config) {
     const checked = () => config.checked();
     const disabled = () => config.disabled?.() ?? false;
@@ -22,6 +39,15 @@ export function createSwitch(config) {
                 config.onChange?.(false);
         }
     }
+    // The validation/label ARIA is derived from the editor contract state.
+    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 disabled() { return disabled(); },
@@ -30,10 +56,11 @@ export function createSwitch(config) {
         switchProps: () => ({
             type: 'button',
             role: 'switch',
+            id: config.id?.(),
             'aria-checked': checked(),
-            'aria-label': config.ariaLabel?.(),
             disabled: disabled(),
             'data-checked': checked() ? '' : undefined,
+            ...editorAria(ariaState()),
             onclick: toggle,
             onkeydown: onKeydown,
         }),

package/dist/createTabs.svelte.d.ts

@@ -23,10 +23,12 @@
  * a render concern, so the component watches `focusTick`/`focusId` and calls
  * `.focus()` itself; the core only decides *which* tab should take focus.
  */
+import type { EditorDir } from './editor-contract';
 export type TabItem = {
     id: string;
     label: string;
     disabled?: boolean;
+    closable?: boolean;
 };
 export type TabsOrientation = 'horizontal' | 'vertical';
 export type TabsActivation = 'automatic' | 'manual';
@@ -35,8 +37,12 @@ export type TabsConfig = {
     tabs: () => ReadonlyArray<TabItem>;
     value: () => string | undefined;
     onChange?: (id: string) => void;
+    /** Fired when a closable tab is closed (Delete key, or the renderer's x). */
+    onClose?: (id: string) => void;
     orientation?: () => TabsOrientation;
     activation?: () => TabsActivation;
+    /** Text direction; under `'rtl'` horizontal Left/Right arrows flip. */
+    dir?: () => EditorDir | undefined;
     ariaLabel?: () => string | undefined;
 };
 export declare function createTabs(config: TabsConfig): {
@@ -48,6 +54,7 @@ export declare function createTabs(config: TabsConfig): {
     readonly focusTick: number;
     isActive: (tid: string) => boolean;
     select: (tid: string) => void;
+    close: (tid: string) => void;
     onKeydown: (e: KeyboardEvent) => void;
     /** Spread onto the tablist container element. */
     tablistProps: () => {