sygnal 5.3.7 → 6.0.0

package/dist/ui.esm.js

@@ -0,0 +1,727 @@
+import { sampleCombine, defineBehavior, xs, ABORT, dropRepeats, createElement, Collection, Transition } from 'sygnal';
+
+/*
+ * PLAN-5 2-U: helpers the sygnal/ui parts share. Everything from the core comes through
+ * '../index', which the 'sygnal/ui' build turns into the external 'sygnal' (one core per app).
+ */
+/** `v` as a quoted CSS string, for an attribute selector (`.tab[data-value="a b"]`) */
+const lit = (v) => '"' + String(v).replace(/["\\]/g, '\\$&') + '"';
+/**
+ * G-407: a part of an id: letters, digits and '-' as they are, anything else (whitespace, '_')
+ * as `_<code>_` (as the core's uidPart), so two values never make the same id ('a b' / 'a_b')
+ */
+const part = (v) => String(v).replace(/[^A-Za-z0-9-]/g, (c) => '_' + c.charCodeAt(0) + '_');
+/**
+ * The ids of one part's elements: `uid('<slice id>-<kind>-<value>')`. The slice id is the part's
+ * key in `uses` (keyed() below) unless an `id` option names it; uid() makes it unique per
+ * component instance. The slice id and the value are escaped (part()): no whitespace (aria-controls
+ * is a list of ids) and no collisions.
+ */
+const idsOf = (s, uid, fallback) => (kind, v) => {
+    const n = `${part(s?.id ?? fallback)}-${kind}${v == null ? '' : '-' + part(v)}`;
+    return uid ? uid(n) : n;
+};
+/**
+ * an ELEMENT target whose `m` command runs `run(element, options)` (a D102 spec command). G-425:
+ * `__sel` is the selector renderComponent's `t.commands('ELEMENT')` logs in its place
+ */
+const on = (sel, m, run) => ({ toString: () => '' + sel, __sel: sel, spec: { commands: { [m]: run } } });
+/**
+ * G-400: SYNC's trigger for a dialog / popover behavior: `false` when its element left the page
+ * while the state says open (removed while open: no close / toggle event comes), and on the
+ * first look when the state says open but the element isn't (a host made again on a state that
+ * was open)
+ */
+const gone = (DOM, STATE, sel, isOpen) => {
+    let first = true;
+    return DOM.select(sel).elements().compose(sampleCombine(STATE.stream)).filter(([e, s]) => {
+        const f = first;
+        first = false;
+        return !!s?.open && (!e?.length || (f && !isOpen(e[0])));
+    }).mapTo(false);
+};
+/**
+ * Writes the `uses` key into the slice's `id` (the prefix of the ids the attribute helpers make)
+ * when no `id` option set it. Runs after the behavior's own merge, on the copy of the host's
+ * initialState (or the sub-component default) that merge made. G-407: `id` is also a calculated
+ * field, so a host reducer that replaces the slice without it gets it back (the ids stay).
+ */
+const keyed = (b) => {
+    const merge = b.merge;
+    // G-423: renderToString gives a missing `id` the same key (extra/ssr.ts withUses)
+    b.keyed = 1;
+    b.merge = (c, k) => {
+        const id = b.options?.id ?? k;
+        b.calculated = { ...b.calculated, id: (s) => s.id ?? id };
+        merge(c, k);
+        for (const f of ['initialState', '_idle']) {
+            const o = c[f];
+            if (o && o[k] && o[k].id == null)
+                o[k] = { ...o[k], id: k };
+        }
+    };
+    return b;
+};
+const mod = (e) => e.altKey || e.ctrlKey || e.metaKey;
+/**
+ * Roving focus (WAI-ARIA APG): a keydown on one of `sel`'s elements becomes the `data-value` of
+ * the element to move to: `next` / `prev` keys step through them in DOM order (wrapping unless
+ * loop is false), Home / End go to the first / last. Disabled elements are skipped. The keys it
+ * handles have their default prevented (no page scroll); every other key passes through.
+ * Reads the elements of the host's own DOM (DOM.select(sel).elements()), so it needs a real
+ * DOM: on renderComponent's mock DOM, simulate the action with a value instead.
+ */
+const keyNav = (DOM, sel, next, prev, loop) => {
+    const keys = [...next, ...prev, 'Home', 'End'], s = DOM.select(sel);
+    const ours = (e) => !mod(e) && keys.includes(e.key);
+    return s.events('keydown', { preventDefault: ours })
+        .compose(sampleCombine(s.elements()))
+        .map(([e, els]) => {
+        if (!ours(e))
+            return;
+        const list = [...(els || [])].filter((el) => !el.disabled), n = list.length, k = e.key;
+        const i = list.findIndex((el) => el.contains(e.target));
+        const j = k == 'Home' ? 0 : k == 'End' ? n - 1 : i + (next.includes(k) ? 1 : -1);
+        const to = loop === false ? list[j] : list[(j + n) % n];
+        return to?.getAttribute('data-value');
+    })
+        .filter((v) => v != null);
+};
+
+/*
+ * PLAN-5 2-U (S-3, from spike 0-S3): Dialog, a behavior over a native <dialog>.
+ *
+ *   Settings.uses = { prefs: dialog({ dialog: '.prefs', trigger: '.open-prefs', close: '.close-prefs' }) }
+ *
+ * The host renders the <dialog> (aria-labelledby its heading) and its buttons. OPEN calls
+ * showModal() through ELEMENT: the browser traps the focus, makes the page inert, closes on
+ * Escape and returns the focus. `open` / `returnValue` follow the dialog's own close event,
+ * whichever way it closed (a close button, Escape, a form method="dialog", closedby="any"), and
+ * its toggle event when it opened without the model (commandfor="…" command="show-modal").
+ *
+ * Options: `dialog` (required; 3-W G-536: it must match only this dialog, not one nested in it,
+ * whose close / toggle / FAIL events it would take too), `trigger` and `close` (clicks dispatch OPEN / CLOSE), `modal`
+ * (true; false opens it with show()), `cancelable` (true; false keeps Escape from closing it:
+ * the cancel event is prevented, and OPEN sets closedby="none" (G-405: Chromium's CloseWatcher
+ * closes on a second Escape otherwise)), `returnFocus` (true: when the dialog closes and the
+ * focus was lost, which WebKit does after a mouse click, the element that opened it gets it
+ * (G-407: the clicked trigger, recorded by OPEN), else the trigger; a selector names another
+ * element; false: leave it to the browser. G-430: the opener is focused from the close event, so
+ * a dialog rendered only while open needs no command target).
+ * State: { open, returnValue }. Actions: OPEN, CLOSE (data: the returnValue), CLOSED (the close
+ * event's returnValue), TOGGLED (from the toggle event), CANCEL (Escape: a host entry can react;
+ * the cancel event, or with cancelable: false the Escape keydown in the dialog (G-429): closedby
+ * "none" stops the cancel event, and OPEN removes the attribute again when the dialog closes;
+ * G-457: not an Escape an element inside handled (defaultPrevented) or an IME one, and not for a
+ * non-modal dialog, which Escape doesn't cancel either way),
+ * SYNC (G-400: the dialog left the page while open: `open: false`; G-524: or OPEN's showModal()
+ * threw: no close event then).
+ * G-400: OPEN / CLOSE send commands that check the dialog itself (showModal only on a closed
+ * one, close only on an open one), so a state that is out of step can't block them.
+ */
+// G-579: an open popover Escape closes before the dialog: an auto or hint one (the `popover`
+// property: an engine without hint reads it as manual; the attribute where there is none). Not a
+// manual one (a Toaster region moved into the modal, D198; a tooltip): Escape cancels the dialog
+const first = (p) => { try {
+    return /^(auto|hint|)$/i.test(p.popover ?? p.getAttribute('popover')) && p.matches(':popover-open');
+}
+catch (_) {
+    return false;
+} };
+// G-429: Escape in this dialog (not in a dialog nested in it, nor with a popover open inside it
+// that Escape closes first, G-579). G-457: not one an element inside handled (a Zag combobox or
+// menu closing its list prevents it: the browser sends no cancel then either), nor one that ends
+// an IME composition (Safari sends keyCode 229 with isComposing false)
+const esc = (e) => e.key == 'Escape' && !e.defaultPrevented && !e.isComposing && e.keyCode != 229 &&
+    e.target?.closest?.('dialog') == e.ownerTarget && ![...(e.ownerTarget?.querySelectorAll?.('[popover]') ?? [])].some(first);
+// the focus went nowhere: body, a detached element, or inside a dialog that just closed
+const lost = () => {
+    const a = document.activeElement;
+    return !a || a == document.body || !a.isConnected || !!a.closest?.('dialog:not([open])');
+};
+// an ELEMENT target (D102 spec command): focus `sel` only when the focus was lost
+const refocus = (sel) => on(sel, 'focus', (el, o) => { lost() && el.focus(o); });
+// G-524: OPEN's showModal() threw (bubbles: the DOM driver listens at its root)
+const FAIL = 'sygnaldialogfail';
+const base$5 = /*#__PURE__*/ defineBehavior({
+    initialState: { open: false, returnValue: '' },
+    intent: ({ DOM, STATE }, { dialog: d, trigger, close, cancelable, modal }) => ({
+        ...(trigger && { OPEN: DOM.click(trigger) }),
+        ...(close && { CLOSE: DOM.click(close).mapTo('') }),
+        TOGGLED: DOM.toggle(d).map((e) => e.newState == 'open'),
+        CLOSED: DOM.close(d).map((e) => e.target?.returnValue ?? ''),
+        // G-429: with cancelable: false the dialog has closedby="none", so Escape fires no cancel
+        // event: CANCEL is the Escape keydown (the cancel event, which a browser without closedby
+        // still fires, is only prevented). G-457: a non-modal one (show()) gets no cancel event from
+        // Escape with cancelable: true either, so no CANCEL: only its cancel event, prevented
+        CANCEL: cancelable !== false
+            ? DOM.select(d).events('cancel')
+            : modal === false
+                ? DOM.select(d).events('cancel', { preventDefault: true })
+                : xs.merge(DOM.select(d).events('cancel', { preventDefault: true }).filter(() => false), DOM.select(d).events('keydown').filter(esc)),
+        // G-524: SYNC also when OPEN's showModal() threw (FAIL, below; true). 3-U G-533: only this
+        // behavior's dialog's own FAIL, not one bubbling from a dialog inside it (another behavior's)
+        SYNC: ((f) => STATE ? xs.merge(gone(DOM, STATE, d, (e) => e.open), f) : f)(DOM.select(d).events(FAIL).filter((e) => e.target === e.ownerTarget).mapTo(true)),
+    }),
+    model: {
+        OPEN: {
+            STATE: (s) => (s.open ? ABORT : { ...s, open: true, returnValue: '' }),
+            ELEMENT: (_s, d, _n, _p, o) => {
+                const m = o.modal === false ? 'show' : 'showModal', by = d?.ownerTarget;
+                return { [m]: on(o.dialog, m, (el) => {
+                        if (el.open)
+                            return;
+                        // G-407: who opened it: the clicked trigger, else the element with the focus
+                        const a = document.activeElement, op = by?.nodeType == 1 ? by : a != document.body ? a : null;
+                        const cb = o.cancelable === false && !el.hasAttribute('closedby');
+                        if (cb)
+                            el.setAttribute('closedby', 'none');
+                        // G-461: a showModal() that throws (a disconnected dialog, a popover open on it) leaves
+                        // no closedby and arms no listener (a later close would focus this opener). G-488: and
+                        // the state goes back to closed, so the next OPEN can open it; G-524: through SYNC (an
+                        // internal FAIL event), not a close event: the host's close listeners don't run for a
+                        // dialog that never opened, and no previous returnValue comes again. The error is the
+                        // command's (thrown once)
+                        try {
+                            el[m]();
+                        }
+                        catch (e) {
+                            cb && el.removeAttribute('closedby');
+                            el.dispatchEvent(new Event(FAIL, { bubbles: true }));
+                            throw e;
+                        }
+                        // on close: G-429 the closedby it set goes (it is the behavior's, not the host's); G-430
+                        // the element that opened it gets the focus back when it was lost, here rather than by a
+                        // command (a dialog the host renders only while open is gone by then), and nothing
+                        // keeps the opener after that. Capture: at the target it runs before the DOM driver's
+                        // listener, so before CLOSED (whose trigger fallback would take the focus first: a
+                        // browser-sent event runs the microtasks between listeners)
+                        el.addEventListener('close', () => {
+                            cb && el.removeAttribute('closedby');
+                            if ((o.returnFocus ?? true) === true && op?.isConnected && lost())
+                                op.focus();
+                        }, { once: true, capture: true });
+                    }) };
+            },
+        },
+        CLOSE: { ELEMENT: (_s, rv, _n, _p, o) => ({ close: on(o.dialog, 'close', (el, x) => { el.open && el.close(x.returnValue); }), returnValue: typeof rv == 'string' ? rv : '' }) },
+        TOGGLED: (s, open) => (open && !s.open ? { ...s, open, returnValue: '' } : ABORT),
+        CLOSED: {
+            STATE: (s, returnValue) => (!s.open && s.returnValue === returnValue ? ABORT : { ...s, open: false, returnValue }),
+            ELEMENT: (s, _d, _n, _p, o) => {
+                const f = o.returnFocus ?? true, sel = f === true ? o.trigger : f;
+                if (!s.open || !sel)
+                    return ABORT;
+                // true: the element that opened it (OPEN's close listener, G-430), else the trigger; a
+                // selector: that element (each only when the focus was lost)
+                return { focus: refocus(sel) };
+            },
+        },
+        CANCEL: () => ABORT,
+        // G-534: after a failed OPEN the returnValue is '' (also when OPEN's STATE aborted: the state
+        // was open while the element was closed)
+        SYNC: (s, failed) => (s.open ? { ...s, open: false, ...(failed === true && { returnValue: '' }) } : ABORT),
+    },
+});
+/** A native <dialog> as a behavior: `uses = { help: dialog({ dialog: '.help', trigger: '.open-help', close: '.close-help' }) }`. */
+const dialog = (options = {}) => base$5({ ...options, open: false, returnValue: '' });
+
+/*
+ * PLAN-5 2-U (S-3, from spike 0-S3): Popover, a behavior over the Popover API.
+ *
+ *   Filters.uses = { filters: popover({ popover: '.filters', close: '.filters-done' }) }
+ *   <button popovertarget={uid('filters')}>Filters</button>
+ *   <div className="filters" id={uid('filters')} popover="auto">…</div>
+ *
+ * The browser does the work: a `popovertarget` button opens and closes it, sets aria-expanded,
+ * light-dismisses it (a click outside, Escape) and returns the focus. The behavior mirrors
+ * `open` from the popover's toggle event and adds OPEN / CLOSE / TOGGLE for the model (ELEMENT
+ * showPopover / hidePopover / togglePopover). Open it from elsewhere with a host intent:
+ * `'filters.OPEN': DOM.click('.edit-filters')`. (No `trigger` option: a button that toggles an
+ * auto popover through the model reopens it, because the press outside light-dismisses it first;
+ * `popovertarget` buttons are exempt.)
+ *
+ * Options: `popover` (required), `close` (a button inside; its click dispatches CLOSE).
+ * State: { open }. Actions: OPEN, CLOSE, TOGGLE, TOGGLED (data: open, from the toggle event),
+ * SYNC (G-400: the popover left the page while open: `open: false`).
+ * G-400 / G-406: OPEN and CLOSE send commands that check the popover itself (`:popover-open`),
+ * not the state, which follows the asynchronous toggle event: OPEN then CLOSE in one tick ends
+ * closed, and a popover removed while open opens again.
+ */
+const isOpen = (el) => { try {
+    return el.matches(':popover-open');
+}
+catch (_) {
+    return false;
+} };
+const base$4 = /*#__PURE__*/ defineBehavior({
+    initialState: { open: false },
+    intent: ({ DOM, STATE }, { popover: p, close }) => ({
+        ...(close && { CLOSE: DOM.click(close) }),
+        TOGGLED: DOM.toggle(p).map((e) => e.newState == 'open'),
+        ...(STATE && { SYNC: gone(DOM, STATE, p, isOpen) }),
+    }),
+    model: {
+        OPEN: { ELEMENT: (_s, _d, _n, _p, o) => ({ showPopover: on(o.popover, 'showPopover', (el) => { isOpen(el) || el.showPopover(); }) }) },
+        CLOSE: { ELEMENT: (_s, _d, _n, _p, o) => ({ hidePopover: on(o.popover, 'hidePopover', (el) => { isOpen(el) && el.hidePopover(); }) }) },
+        TOGGLE: { ELEMENT: (_s, _d, _n, _p, o) => ({ togglePopover: o.popover }) },
+        TOGGLED: (s, open) => (s.open == open ? ABORT : { ...s, open }),
+        SYNC: (s) => (s.open ? { ...s, open: false } : ABORT),
+    },
+});
+/** A popover (Popover API) as a behavior: `uses = { filters: popover({ popover: '.filters' }) }`. */
+const popover = (options = {}) => base$4({ ...options, open: false });
+
+/*
+ * PLAN-5 2-U (S-3, from spike 0-S3): Tooltip, a manual popover placed by CSS anchor positioning,
+ * shown on hover / focus after a delay and hidden after a delay (D197 `timers`).
+ *
+ *   Toolbar.uses = { saveTip: tooltip({ trigger: '.save', tip: '.save-tip' }) }
+ *
+ * The host renders the trigger with aria-describedby (the tip's id) and `anchor-name`, and the
+ * tip with role="tooltip", popover="manual", `position-anchor` and `position-area` (styles; see
+ * the guide). No JavaScript positioning.
+ *
+ * Options: `trigger`, `tip` (required), `showDelay` (500 ms), `hideDelay` (100 ms).
+ * State: { open, pending: null | 'show' | 'hide', hover, focus }. Actions: ENTER / LEAVE (data
+ * 'hover' | 'focus': the pointer on the trigger or the tip (it stays open while hovered, WCAG
+ * 1.4.13), or the focus on the trigger), SHOW / HIDE (the timers), ESCAPE (hides it at once),
+ * TOGGLED. Timers (joined to the host's `timers`): '<key>.show' / '<key>.hide'; one whose state
+ * goes away is cancelled, so leaving before the delay never shows the tip. Needs
+ * makeTimerDriver() (tests: fake timers).
+ * G-403: the pointer and the focus are tracked apart (it hides once both have left: a mouse
+ * leaving doesn't hide a tip the keyboard focus still shows); touch pointer events are ignored
+ * (a tap focuses the trigger instead); the document keydown listener for Escape is there only
+ * while the tip is shown or about to be, so a page of tooltips has at most the open one's.
+ */
+const mouse = (e) => e?.pointerType != 'touch';
+const which = (k) => (k == 'focus' ? 'focus' : 'hover');
+const base$3 = /*#__PURE__*/ defineBehavior({
+    initialState: { open: false, pending: null, hover: false, focus: false },
+    timers: (s, o) => ({
+        show: s?.pending == 'show' && { after: o.showDelay ?? 500, action: 'SHOW' },
+        hide: s?.pending == 'hide' && { after: o.hideDelay ?? 100, action: 'HIDE' },
+    }),
+    intent: ({ DOM, STATE }, { trigger, tip }) => ({
+        ENTER: xs.merge(xs.merge(DOM.pointerenter(trigger), DOM.pointerenter(tip)).filter(mouse).mapTo('hover'), DOM.focus(trigger).mapTo('focus')),
+        LEAVE: xs.merge(xs.merge(DOM.pointerleave(trigger), DOM.pointerleave(tip)).filter(mouse).mapTo('hover'), DOM.blur(trigger).mapTo('focus')),
+        ESCAPE: (STATE ? STATE.stream.map((s) => !!(s?.open || s?.pending)).compose(dropRepeats()) : xs.of(true))
+            .map((on) => (on ? DOM.keydown('document').key().filter((k) => k == 'Escape') : xs.never()))
+            .flatten(),
+        TOGGLED: DOM.toggle(tip).map((e) => e.newState == 'open'),
+    }),
+    model: {
+        ENTER: (s, k) => {
+            const n = { ...s, [which(k)]: true }, pending = s.open ? null : 'show';
+            return s[which(k)] && s.pending == pending ? ABORT : { ...n, pending };
+        },
+        LEAVE: (s, k) => {
+            const n = { ...s, [which(k)]: false };
+            // still hovered or focused: as it was
+            const pending = n.hover || n.focus ? s.pending : s.open ? 'hide' : null;
+            return !s[which(k)] && s.pending == pending ? ABORT : { ...n, pending };
+        },
+        SHOW: {
+            STATE: (s) => ({ ...s, pending: null }),
+            ELEMENT: (s, _d, _n, _p, o) => (s.open ? ABORT : { showPopover: o.tip }),
+        },
+        HIDE: {
+            STATE: (s) => ({ ...s, pending: null }),
+            ELEMENT: (s, _d, _n, _p, o) => (s.open ? { hidePopover: o.tip } : ABORT),
+        },
+        ESCAPE: {
+            STATE: (s) => (s.open || s.pending ? { ...s, pending: null } : ABORT),
+            ELEMENT: (s, _d, _n, _p, o) => (s.open ? { hidePopover: o.tip } : ABORT),
+        },
+        TOGGLED: (s, open) => (s.open == open ? ABORT : { ...s, open }),
+    },
+});
+/** A tooltip as a behavior: `uses = { tip: tooltip({ trigger: '.save', tip: '.save-tip', showDelay: 500 }) }`. */
+const tooltip = (options = {}) => base$3({ ...options, open: false, pending: null, hover: false, focus: false });
+
+/*
+ * PLAN-5 2-U (S-4): Tabs, a behavior that wires the host's own markup (WAI-ARIA APG tabs).
+ *
+ *   Settings.uses = { tabs: tabs({ tab: '.tab', selected: 'general' }) }
+ *   const a = tabsAttrs(state.tabs, uid)
+ *   <div {...a.list} aria-label="Settings">
+ *     <button className="tab" {...a.tab('general')}>General</button> …
+ *   </div>
+ *   <section {...a.panel('general')}>…</section> …
+ *
+ * The host renders the tabs and panels; `tabsAttrs` gives each its attributes from the slice:
+ * roles, ids (from `uid`, so every instance has its own), aria-selected / aria-controls /
+ * aria-labelledby, the roving tabindex, `hidden` on the other panels, and the hooks
+ * `data-value` / `data-state` ('active' | 'inactive'). A click on a tab selects it; the arrow
+ * keys move the focus between the tabs (and select, unless `activation: 'manual'`), Home / End
+ * go to the first / last; disabled tabs are skipped.
+ *
+ * Options: `tab` (required: the tabs' selector), `selected` (the start; none: the first tab
+ * rendered), `orientation` ('horizontal' | 'vertical': which arrow keys), `activation`
+ * ('automatic' | 'manual'), `loop` (true), `id` (the ids' prefix; default: the key in `uses`).
+ * State: { id, selected, orientation }. Actions: SELECT (a value, or a click), MOVE (a value:
+ * focus it, and select it unless manual).
+ * G-397: `tabsAttrs(slice, uid, values)` with the tabs' values shows the first one selected when
+ * `selected` isn't among them (a removed tab); a host that removes tabs re-selects a neighbour
+ * and moves the focus to it in its own reducer (the guide's closable tabs).
+ */
+const base$2 = /*#__PURE__*/ defineBehavior({
+    initialState: { id: null, selected: null, orientation: 'horizontal' },
+    intent: ({ DOM }, { tab, orientation, loop }) => {
+        const v = orientation == 'vertical';
+        return {
+            SELECT: DOM.click(tab).data('value'),
+            MOVE: keyNav(DOM, tab, [v ? 'ArrowDown' : 'ArrowRight'], [v ? 'ArrowUp' : 'ArrowLeft'], loop),
+        };
+    },
+    model: {
+        SELECT: (s, v) => (v == null || String(v) === s.selected ? ABORT : { ...s, selected: String(v) }),
+        MOVE: {
+            STATE: (s, v, _n, _p, o) => (o.activation == 'manual' || v === s.selected ? ABORT : { ...s, selected: v }),
+            ELEMENT: (_s, v, _n, _p, o) => ({ focus: o.tab + '[data-value=' + lit(v) + ']' }),
+        },
+    },
+});
+/** Tabs as a behavior over the host's markup: `uses = { tabs: tabs({ tab: '.tab', selected: 'general' }) }`; render with `tabsAttrs`. */
+const tabs = (options = {}) => keyed(base$2({ ...options, ...(options.selected != null && { selected: String(options.selected) }) }));
+/**
+ * The attributes of a tab set, from its slice: `list` (the tablist), `tab(value)` and
+ * `panel(value)`. Spread them on the host's elements: `<button className="tab" {...a.tab('general')}>`.
+ * `values` (optional): the tabs' values in order (leave disabled ones out). With it, a `selected`
+ * that isn't one of them (its tab was removed) shows the first one selected (G-397); without it,
+ * the first tab rendered is selected only while nothing is.
+ */
+const tabsAttrs = (s, uid, values) => {
+    const id = idsOf(s, uid, 'tabs'), state = (b) => (b ? 'active' : 'inactive');
+    const vs = values && values.map(String);
+    let first = vs?.[0], sel = s?.selected == null ? null : String(s.selected);
+    if (vs && sel != null && !vs.includes(sel))
+        sel = null;
+    // no selection (or a removed one): the first value, or the first tab (or panel) rendered
+    const on = (v) => {
+        v = String(v);
+        if (sel != null)
+            return v === sel;
+        first ?? (first = v);
+        return v === first;
+    };
+    return {
+        list: { role: 'tablist', 'aria-orientation': s?.orientation || 'horizontal' },
+        tab: (v) => {
+            const b = on(v);
+            return { type: 'button', id: id('tab', v), role: 'tab', 'aria-selected': b, 'aria-controls': id('panel', v), tabindex: b ? '0' : '-1', 'data-value': String(v), 'data-state': state(b) };
+        },
+        panel: (v) => {
+            const b = on(v);
+            return { id: id('panel', v), role: 'tabpanel', 'aria-labelledby': id('tab', v), tabindex: '0', hidden: !b, 'data-state': state(b) };
+        },
+    };
+};
+
+/*
+ * PLAN-5 2-U (S-4): Accordion, a behavior that wires the host's own markup (WAI-ARIA APG
+ * accordion).
+ *
+ *   Faq.uses = { faq: accordion({ trigger: '.faq-trigger' }) }
+ *   const a = accordionAttrs(state.faq, uid)
+ *   <h3><button className="faq-trigger" {...a.trigger('ship')}>Shipping</button></h3>
+ *   <div {...a.panel('ship')}>…</div>
+ *
+ * `accordionAttrs` gives the triggers aria-expanded / aria-controls (and aria-disabled on the one
+ * open panel when it can't be collapsed), the panels role="region" / aria-labelledby / hidden,
+ * ids from `uid`, and the hooks `data-value` / `data-state` ('open' | 'closed'). A click on a
+ * trigger toggles its panel; Up / Down / Home / End move the focus between the triggers.
+ *
+ * Options: `trigger` (required), `multiple` (false: opening one closes the others),
+ * `collapsible` (true; false: the last open panel stays open), `expanded` (the start: a value or
+ * an array), `loop` (true), `id` (the ids' prefix; default: the key in `uses`).
+ * State: { id, expanded: string[], collapsible }. Actions: TOGGLE, EXPAND, COLLAPSE (a value, or
+ * a click), MOVE (a value: focus that trigger).
+ */
+const expand = (s, v, o) => {
+    v = String(v);
+    return s.expanded.includes(v) ? ABORT : { ...s, expanded: o.multiple ? [...s.expanded, v] : [v] };
+};
+const collapse = (s, v) => {
+    v = String(v);
+    return !s.expanded.includes(v) || (s.collapsible === false && s.expanded.length == 1) ? ABORT
+        : { ...s, expanded: s.expanded.filter((x) => x !== v) };
+};
+const base$1 = /*#__PURE__*/ defineBehavior({
+    initialState: { id: null, expanded: [], collapsible: true },
+    intent: ({ DOM }, { trigger, loop }) => ({
+        TOGGLE: DOM.click(trigger).data('value'),
+        MOVE: keyNav(DOM, trigger, ['ArrowDown'], ['ArrowUp'], loop),
+    }),
+    model: {
+        TOGGLE: (s, v, _n, _p, o) => (v == null ? ABORT : s.expanded.includes(String(v)) ? collapse(s, v) : expand(s, v, o)),
+        EXPAND: (s, v, _n, _p, o) => (v == null ? ABORT : expand(s, v, o)),
+        COLLAPSE: (s, v) => (v == null ? ABORT : collapse(s, v)),
+        MOVE: { ELEMENT: (_s, v, _n, _p, o) => ({ focus: o.trigger + '[data-value=' + lit(v) + ']' }) },
+    },
+});
+/** An accordion as a behavior over the host's markup: `uses = { faq: accordion({ trigger: '.faq-trigger' }) }`; render with `accordionAttrs`. */
+const accordion = (options = {}) => keyed(base$1({ ...options, ...(options.expanded != null && { expanded: [].concat(options.expanded).map(String) }) }));
+/** The attributes of an accordion, from its slice: `trigger(value)` and `panel(value)`. */
+const accordionAttrs = (s, uid) => {
+    const id = idsOf(s, uid, 'accordion'), ex = s?.expanded || [];
+    const on = (v) => ex.includes(String(v)), state = (v) => (on(v) ? 'open' : 'closed');
+    const only = s?.collapsible === false && ex.length == 1;
+    return {
+        trigger: (v) => ({
+            type: 'button', id: id('trigger', v), 'aria-expanded': on(v), 'aria-controls': id('panel', v),
+            'aria-disabled': only && on(v) ? true : undefined, 'data-value': String(v), 'data-state': state(v),
+        }),
+        panel: (v) => ({ id: id('panel', v), role: 'region', 'aria-labelledby': id('trigger', v), hidden: !on(v), 'data-state': state(v) }),
+    };
+};
+
+/*
+ * PLAN-5 2-U (S-4): Disclosure, a button that shows and hides a panel (WAI-ARIA APG disclosure).
+ *
+ *   Card.uses = { more: disclosure({ trigger: '.more-toggle' }) }
+ *   const a = disclosureAttrs(state.more, uid)
+ *   <button className="more-toggle" {...a.trigger}>Details</button>
+ *   <div {...a.panel}>…</div>
+ *
+ * Options: `trigger` (required), `open` (the start, false), `id` (the ids' prefix; default: the
+ * key in `uses`). State: { id, open }. Actions: TOGGLE (a click), OPEN, CLOSE.
+ */
+const base = /*#__PURE__*/ defineBehavior({
+    initialState: { id: null, open: false },
+    intent: ({ DOM }, { trigger }) => ({ TOGGLE: DOM.click(trigger) }),
+    model: {
+        TOGGLE: (s) => ({ ...s, open: !s.open }),
+        OPEN: (s) => (s.open ? ABORT : { ...s, open: true }),
+        CLOSE: (s) => (s.open ? { ...s, open: false } : ABORT),
+    },
+});
+/** A disclosure as a behavior over the host's markup: `uses = { more: disclosure({ trigger: '.more-toggle' }) }`; render with `disclosureAttrs`. */
+const disclosure = (options = {}) => keyed(base(options));
+/** The attributes of a disclosure, from its slice: `trigger` and `panel`. */
+const disclosureAttrs = (s, uid) => {
+    const id = idsOf(s, uid, 'disclosure'), open = !!s?.open, state = open ? 'open' : 'closed';
+    return {
+        trigger: { type: 'button', 'aria-expanded': open, 'aria-controls': id('panel'), 'data-state': state },
+        panel: { id: id('panel'), hidden: !open, 'data-state': state },
+    };
+};
+
+/*
+ * PLAN-5 2-U (T-1, D198, from spike 0-S4): the Toaster component.
+ *
+ *   anywhere:  SAVE: { EVENTS: event('TOAST', { text: 'Saved', kind: 'success' }) }
+ *   once:      <Toaster />            (main.js: run(App, { TIMER: makeTimerDriver() }))
+ *
+ * - TOAST adds { id, text, kind ('info' | 'success' | 'warning' | 'error'; default 'info'),
+ *   timeoutMs (default 5000; 0 = until dismissed) }. A string is the text. A TOAST with the `id`
+ *   of a shown toast replaces it in place and restarts its timer ('Saving…' → 'Saved').
+ *   TOAST_DISMISS removes the toast with that id (no id: all of them). G-398: ids compare as
+ *   strings (the Collection's keys); an automatic id is 't<n>', never one a shown toast has.
+ * - Each toast is a Collection item: its `timers` static auto-dismisses it (GS-7; fake-timer
+ *   testable), its Dismiss button removes it, Transition animates it (`transition` names the
+ *   classes, `duration` is how long a leaving toast stays: the leave animation's length).
+ * - Two persistent live regions: role="status" (polite) for every kind but errors, role="alert"
+ *   for errors. They are rendered while empty, so a toast added later is announced.
+ * - While the pointer or the focus is in the region, the timers stop (and start over when both
+ *   have left; G-399: `hover` and `focus` are tracked apart): `pauseOnHover={false}` turns this
+ *   off. A focused Dismiss button moves the focus to the next toast's (else the previous one's,
+ *   else where the focus came from) before its toast goes; a focused element removed any other
+ *   way gets a focusout sent (Chromium sends none), so the region never stays paused.
+ * - The region is a `popover="manual"` element (top layer, above the page), re-parented into the
+ *   topmost open modal <dialog> while one is open and back when it closes or is removed (a
+ *   MutationObserver in the region's hooks, D198): outside the modal it would be drawn but inert
+ *   (spike 0-S4). `__sygnalHome` keeps its events in this component (G-356). The region is the
+ *   only child of a wrapper (`.toaster-home`), so the moved element has no siblings to patch.
+ *   G-404: the dialogs of the region's own root (a shadow root) are looked at and observed too.
+ *   G-426: the focus is that root's activeElement (in a shadow root the document's is the host).
+ *
+ * Class hooks: .toaster-home, .toaster (+ `className`), .toaster-status, .toaster-alert,
+ * .toaster-list, .toast, .toast-text, .toast-dismiss. Data attributes: data-kind on .toast,
+ * data-paused on .toaster.
+ */
+// ── the region's placement (D198) ────────────────────────────────────
+// the open modal dialogs, in the order they became modal (the last one is on top)
+const order = [];
+const modal = (d) => { try {
+    return d.matches(':modal');
+}
+catch (_) {
+    return false;
+} };
+// G-404: the dialogs of the document and of the region's own root (a shadow root: sygnal/element)
+const topModal = (root) => {
+    const all = [...document.querySelectorAll('dialog')];
+    if (root !== document && root?.querySelectorAll)
+        all.push(...root.querySelectorAll('dialog'));
+    const open = all.filter(modal);
+    for (let i = order.length; i--;)
+        if (!open.includes(order[i]))
+            order.splice(i, 1);
+    for (const d of open)
+        if (!order.includes(d))
+            order.push(d);
+    return order[order.length - 1];
+};
+const show = (el) => { try {
+    el.matches(':popover-open') || el.showPopover();
+}
+catch (_) { } };
+// the element with the focus in `el`'s root
+const act = (el) => (el.getRootNode?.() || document).activeElement;
+// G-428: a focusout that leaves `t`: not to an element inside it, and with no relatedTarget not
+// while the focus is still inside (the window lost the focus: it comes back to the same element)
+const left = (t, e) => !(t && t.contains?.(e.relatedTarget || act(t)));
+// a toast on its way out (its Transition's leave classes)
+const leaving = (b) => /-leave-/.test(b.closest?.('.toast')?.className || '');
+const placement = {
+    insert: (v) => {
+        const el = v.elm, home = el.parentNode, root = el.getRootNode?.() || document;
+        el.__sygnalHome = home;
+        show(el);
+        // G-399: the focus in the region, and where it came from (where it goes back to). G-432: a
+        // focus from nowhere (the region's own refocus after a move, the browser's after a modal
+        // closed, the window focused again) keeps the last element it came from. G-458: but not one
+        // a press in the region gave: the user comes back from nowhere after a click on the page took
+        // the focus, and a mouse Dismiss would focus (and scroll to) an element left long ago. (A focus
+        // that comes back from another element names that one; a focus that left to a modal comes
+        // back from nowhere when it closes and keeps it: G-432)
+        // G-499: the press is its time, and counts for a focus within a second (a press released
+        // outside, a right-click or a touch scroll gets no focusin or click to clear it); a cancelled
+        // one (the browser took it for a scroll) at once
+        el.addEventListener('pointerdown', (e) => { el._p = e.timeStamp; });
+        el.addEventListener('pointercancel', () => { el._p = 0; });
+        el.addEventListener('focusin', (e) => {
+            if (!el.contains(e.relatedTarget)) {
+                el._f = 1;
+                el._from = e.relatedTarget || (el._p && e.timeStamp - el._p < 1e3 ? null : el._from);
+            }
+            el._p = 0;
+        });
+        el.addEventListener('focusout', (e) => { if (left(el, e))
+            el._f = 0; });
+        // a Dismiss button with the focus (keyboard; a click that focused it): the focus moves to the
+        // next toast's Dismiss button, else the previous one's, else back where it came from, before
+        // the button goes (a removed focused element gets no focusout in Chromium)
+        el.addEventListener('click', (e) => {
+            el._p = 0;
+            const b = e.target?.closest?.('.toast-dismiss');
+            // G-426: the root's activeElement (in a shadow root, the document's is the host)
+            if (!b || !b.contains(act(el)))
+                return;
+            const bs = [...el.querySelectorAll('.toast-dismiss')].filter((x) => x === b || !leaving(x)), i = bs.indexOf(b);
+            const to = bs[i + 1] || bs[i - 1] || (el._from?.isConnected && !el.contains(el._from) && el._from);
+            to ? to.focus() : b.blur();
+        });
+        if (typeof MutationObserver == 'undefined')
+            return;
+        const place = () => {
+            const to = topModal(root) || home;
+            if (el.parentNode !== to) {
+                // a move blurs a focused Dismiss button: give the focus back
+                const a = act(el), f = el.contains(a) && a;
+                to.appendChild(el);
+                f && f.focus();
+            }
+            // a moved popover is closed: show it again (on top of the dialog it is in)
+            show(el);
+        };
+        // `open` flips on showModal / close; a dialog removed while open takes the region with it
+        const mo = el._mo = new MutationObserver((rs) => {
+            // G-399: the focused element was removed (a toast dismissed some other way): no focusout
+            // in Chromium, so the region would stay paused; send one
+            if (el._f && !el.contains(act(el))) {
+                el._f = 0;
+                el.dispatchEvent(new FocusEvent('focusout', { bubbles: true }));
+            }
+            if (home.isConnected && (!el.isConnected || (el.parentNode !== home && !modal(el.parentNode)) || rs.some((r) => r.type == 'attributes')))
+                place();
+        });
+        const opts = { subtree: true, childList: true, attributes: true, attributeFilter: ['open'] };
+        mo.observe(document.body, opts);
+        // G-404: a region in a shadow root sees that root's dialogs open and close too
+        if (root !== document && root.nodeType == 11)
+            mo.observe(root, opts);
+        place();
+    },
+    // removed with its wrapper while in a dialog: take it out of the dialog too
+    destroy: (v) => {
+        const el = v.elm;
+        el._mo?.disconnect();
+        el.parentNode !== el.__sygnalHome && el.remove();
+    },
+};
+// ── one toast ──────────────────────────────────────────────────────
+// (statics through a /*#__PURE__*/ Object.assign, so every bundler drops an unused Toaster; a
+// componentName, so diagnostics and DevTools name them in minified builds too)
+const ToastItem = /*#__PURE__*/ Object.assign(function ToastItem({ state, dismissLabel, transition, duration }) {
+    return createElement(Transition, { name: transition, duration }, createElement('div', { className: 'toast', 'data-kind': state.kind }, createElement('span', { className: 'toast-text' }, state.text), createElement('button', { type: 'button', className: 'toast-dismiss', 'aria-label': dismissLabel + ': ' + state.text }, dismissLabel)));
+}, {
+    componentName: 'ToastItem',
+    intent: ({ DOM }) => ({ DISMISS: DOM.click('.toast-dismiss') }),
+    // a replaced toast (rev) gets a new timer name, so its timer starts over
+    timers: (s) => ({ ['expire' + (s?.rev || '')]: s?.timeoutMs > 0 && !s.paused && { after: s.timeoutMs, action: 'EXPIRE' } }),
+    model: { DISMISS: () => undefined, EXPIRE: () => undefined },
+});
+// ── the toaster ──────────────────────────────────────────────────────
+const polite = (t) => t.kind != 'error';
+const urgent = (t) => t.kind == 'error';
+// entering or leaving the region (not moving between its children)
+const crossing = (e) => !e.ownerTarget?.contains?.(e.relatedTarget);
+const paused = (s, p) => ({ ...s, paused: p, toasts: s.toasts.map((t) => ({ ...t, paused: p })) });
+// the pointer or the focus came in or left: paused while either is in (unless pauseOnHover={false})
+const pause = (s, k, on, p) => {
+    if (s[k] === on)
+        return ABORT;
+    const n = { ...s, [k]: on }, z = p.pauseOnHover !== false && !!(n.hover || n.focus);
+    return z === s.paused ? n : paused(n, z);
+};
+// ids compare as strings (the Collection's keys do: 7 and '7' are one toast)
+const same = (a, b) => '' + a === '' + b;
+/** Renders the toasts that `event('TOAST', { text, kind, timeoutMs })` sends from anywhere. Render it once: `<Toaster />`. */
+const Toaster = /*#__PURE__*/ Object.assign(function Toaster({ state, label = 'Notifications', dismissLabel = 'Dismiss', transition = 'toast', duration = 200, className }) {
+    const list = (filter) => createElement('div', { className: 'toaster-list' }, createElement(Collection, { of: ToastItem, from: 'toasts', filter, dismissLabel, transition, duration }));
+    return createElement('div', { className: 'toaster-home' }, createElement('section', {
+        className: className ? 'toaster ' + className : 'toaster', 'aria-label': label, attrs: { popover: 'manual' },
+        'data-paused': state.paused ? '' : undefined, hook: placement,
+    }, createElement('div', { className: 'toaster-status', role: 'status', 'aria-live': 'polite' }, list(polite)), createElement('div', { className: 'toaster-alert', role: 'alert' }, list(urgent))));
+}, {
+    componentName: 'Toaster',
+    isolatedState: true,
+    initialState: { toasts: [], next: 1, paused: false, hover: false, focus: false },
+    intent: ({ EVENTS, DOM }) => ({
+        TOAST: EVENTS.select('TOAST'),
+        DISMISS: EVENTS.select('TOAST_DISMISS'),
+        // G-399: the pointer and the focus apart (the timers stop while either is in the region)
+        HOVER: xs.merge(DOM.pointerover('.toaster').filter(crossing).mapTo(true), DOM.pointerout('.toaster').filter(crossing).mapTo(false)),
+        FOCUS: xs.merge(DOM.focusin('.toaster').filter(crossing).mapTo(true), DOM.focusout('.toaster').filter((e) => left(e.ownerTarget, e)).mapTo(false)),
+    }),
+    model: {
+        TOAST: (s, d) => {
+            const t = typeof d == 'string' ? { text: d } : d || {};
+            // G-398: an automatic id is 't<n>', one no shown toast has (a user's 2 or '2' never meets it)
+            const i = t.id == null ? -1 : s.toasts.findIndex((x) => same(x.id, t.id));
+            let n = s.next, id = t.id;
+            if (id == null) {
+                while (s.toasts.some((x) => same(x.id, 't' + n)))
+                    n++;
+                id = 't' + n++;
+            }
+            const toast = { ...t, id, kind: t.kind || 'info', timeoutMs: t.timeoutMs ?? 5000, paused: s.paused, rev: i < 0 ? 0 : s.toasts[i].rev + 1 };
+            return {
+                ...s,
+                next: n,
+                toasts: i < 0 ? [...s.toasts, toast] : s.toasts.map((x, j) => (j == i ? toast : x)),
+            };
+        },
+        DISMISS: (s, id) => {
+            const toasts = id == null ? [] : s.toasts.filter((x) => !same(x.id, id));
+            return toasts.length == s.toasts.length ? ABORT : { ...s, toasts };
+        },
+        HOVER: (s, on, _n, p) => pause(s, 'hover', on, p),
+        FOCUS: (s, on, _n, p) => pause(s, 'focus', on, p),
+    },
+});
+
+export { Toaster, accordion, accordionAttrs, dialog, disclosure, disclosureAttrs, popover, tabs, tabsAttrs, tooltip };
+//# sourceMappingURL=ui.esm.js.map