@optionfactory/fml 9.0.0-rc13 → 9.0.0-rc14

package/dist/ful.mjs

@@ -560,30 +560,62 @@ class Bindings {
     }
 
     static mutateIn(form, values) {
-        const names = Array.from(form.elements)
-            .map((el) => el.getAttribute('name'))
-            .filter((n) => n);
-        for (const [flattenedKey, value] of Object.entries(Bindings.flatten(values, '', new Set(names)))) {
-            for (const el of form.querySelectorAll(`[name='${CSS.escape(flattenedKey)}']`)) {
+        const named = Bindings.#named(form);
+        for (const [flattenedKey, value] of Object.entries(Bindings.flatten(values, '', new Set(named.keys())))) {
+            for (const el of named.get(flattenedKey) ?? []) {
                 Bindings.mutate(el, value);
             }
         }
     }
 
+    /**
+     * The form's own named controls, by name: `form.elements`, the platform's
+     * association list, so a field in the subtree that belongs to another form
+     * (a nested form built by script, a `form` attribute pointing elsewhere) is
+     * not the caller's to touch, where a subtree query would have reached it.
+     */
+    static #named(form) {
+        const named = new Map();
+        for (const el of form.elements) {
+            const name = el.getAttribute('name');
+            if (!name) {
+                continue;
+            }
+            const bucket = named.get(name);
+            if (bucket) {
+                bucket.push(el);
+            } else {
+                named.set(name, [el]);
+            }
+        }
+        return named;
+    }
+
     static errors(form, es, scrollOnError) {
         //focus management announces the error of the field it lands on through
         //aria-describedby: a live region on top of that would read everything twice,
-        //so the polite announcement exists only when nothing takes the focus
-        form.querySelectorAll('ful-field-error').forEach((el) => {
-            el.setAttribute('aria-live', scrollOnError ? 'off' : 'polite');
-        });
+        //so the polite announcement exists only when nothing takes the focus.
+        //The regions and the banner belong to the form whose subtree holds them
+        //nearest: a nested form's are not this form's to touch
+        const ofForm = (el) => el.closest('form') === form;
+        Array.from(form.querySelectorAll('ful-field-error'))
+            .filter(ofForm)
+            .forEach((el) => {
+                el.setAttribute('aria-live', scrollOnError ? 'off' : 'polite');
+            });
         const pinned = (e) => (e.type === 'FIELD_ERROR' || e.type === 'INVALID_FORMAT') && e.context;
         const fieldErrors = es.filter(pinned);
         const globalErrors = es.filter((e) => !pinned(e));
-        form.querySelectorAll(`[name]`).forEach((el) => {
-            el.setCustomValidity?.('');
-        });
+        const named = Bindings.#named(form);
+        for (const targets of named.values()) {
+            targets.forEach((el) => {
+                el.setCustomValidity?.('');
+            });
+        }
         form.querySelectorAll('ful-errors').forEach((el) => {
+            if (!ofForm(el)) {
+                return;
+            }
             el.setAttribute('role', 'alert');
             el.replaceChildren();
             el.setAttribute('hidden', '');
@@ -594,7 +626,7 @@ class Bindings {
             const parts = name.split('.');
             for (let i = parts.length; i !== 0; --i) {
                 const prefix = parts.slice(0, i).join('.');
-                const targets = form.querySelectorAll(`[name='${CSS.escape(prefix)}']`);
+                const targets = named.get(prefix) ?? [];
                 if (targets.length === 0) {
                     continue;
                 }
@@ -614,6 +646,9 @@ class Bindings {
         });
         const bannered = [...globalErrors, ...unmatched];
         form.querySelectorAll('ful-errors').forEach((el) => {
+            if (!ofForm(el)) {
+                return;
+            }
             const hel = /** @type HTMLElement} */ (el);
             if (bannered.length === 0) {
                 hel.innerText = '';
@@ -628,7 +663,8 @@ class Bindings {
         if (es.length === 0 || !scrollOnError) {
             return;
         }
-        Array.from(form.querySelectorAll(`:invalid`))
+        Array.from(form.elements)
+            .filter((el) => el.matches(':invalid'))
             .sort((a, b) => a.getBoundingClientRect().y - b.getBoundingClientRect().y)[0]
             ?.focus();
     }
@@ -669,6 +705,7 @@ class Field extends ParsedElement {
     /** the role the element internals carry, 'presentation' unless the control is its own */
     static ROLE = 'presentation';
     #control;
+    #pendingFocus = null;
     #described;
     #descriptions = [];
     #errorId = null;
@@ -750,12 +787,17 @@ class Field extends ParsedElement {
             //only where the platform cannot: a control still associated with the
             //form, an author's own input in a slot among them, submits on its own
             //and would otherwise submit twice
-            if (target.form === this.internals.form || !Field.#submitsOnEnter(target)) {
+            if (target.form === this.form || !Field.#submitsOnEnter(target)) {
                 return;
             }
             this._requestSubmit();
         });
         this.replaceChildren(fragment);
+        if (this.#pendingFocus !== null) {
+            const options = this.#pendingFocus;
+            this.#pendingFocus = null;
+            control.focus(options);
+        }
     }
     /**
      * The platform's own rule for which control Enter submits from, measured on
@@ -823,7 +865,11 @@ class Field extends ParsedElement {
         }
     }
     focus(options) {
-        this.#control?.focus(options);
+        if (this.#control) {
+            this.#control.focus(options);
+            return;
+        }
+        this.#pendingFocus = options ?? {};
     }
     /**
      * Clears or reports one validation problem: the text lands on the field's
@@ -850,9 +896,13 @@ class Field extends ParsedElement {
         this.internals.setValidity({ customError: true }, ' ');
         this.#fieldError.innerText = error;
     }
+    /** The form the platform associated the field with, null outside one: a native control's own `form`. */
+    get form() {
+        return this.internals.form;
+    }
     /** Submits the associated form through its first submitter, as Enter on a native control would. */
     _requestSubmit() {
-        const form = this.internals.form;
+        const form = this.form;
         if (!form) {
             return;
         }
@@ -1210,6 +1260,11 @@ class Form extends ParsedElement {
         );
         if (this.declared('clear-invalid-on-change')) {
             this.addEventListener('change', (/** @type any */ evt) => {
+                //a form-associated custom element carries no `form` property of
+                //its own: the owner reads through the internals it attached
+                if ((evt.target.form ?? evt.target.internals?.form) !== this.form) {
+                    return;
+                }
                 evt.target.setCustomValidity?.('');
             });
         }
@@ -1275,8 +1330,9 @@ class Form extends ParsedElement {
             );
             if (e instanceof Failure) {
                 this.errors = e.problems;
+            } else {
+                console.warn('failed to submit form', this, 'reason:', e);
             }
-            console.warn('failed to submit form', this, 'reason:', e);
         } finally {
             this.#submitting = false;
             this.spinner(false);
@@ -1326,6 +1382,9 @@ class Form extends ParsedElement {
         //same way, and a form that only dimmed its button said it to no one
         Attributes.set(this, 'aria-busy', spin ? 'true' : null);
         this.querySelectorAll('ful-spinner').forEach((el) => {
+            if (el.closest('form') !== this.form) {
+                return;
+            }
             const hel = /** @type HTMLElement */ (el);
             if (spin) {
                 this.#announce(hel);
@@ -1336,7 +1395,7 @@ class Form extends ParsedElement {
         });
         this.querySelectorAll('input,button').forEach((el) => {
             const hel = /** @type HTMLButtonElement|HTMLInputElement */ (el);
-            if (hel.type !== 'submit' && hel.type !== 'reset') {
+            if (hel.form !== this.form || (hel.type !== 'submit' && hel.type !== 'reset')) {
                 return;
             }
             if (spin) {
@@ -2177,11 +2236,18 @@ const place = (popover, anchored) => {
     popover.style.bottom = 'auto';
     popover.style.margin = '0';
     if (stretch) {
-        const width = Math.min(box.width, vw - 2 * PAD);
-        popover.style.width = `${width}px`;
+        popover.style.removeProperty('width');
+        popover.style.removeProperty('min-width');
+        popover.style.removeProperty('max-width');
+        const cap = Math.min(parseFloat(computed.maxWidth) || vw, vw - 2 * PAD);
+        popover.style.minWidth = `${Math.min(box.width, vw - 2 * PAD)}px`;
+        popover.style.maxWidth = `${cap}px`;
+        const width = popover.getBoundingClientRect().width;
         popover.style.left = `${clamp(box.left, PAD, vw - width - PAD)}px`;
         const height = popover.getBoundingClientRect().height;
-        popover.style.top = `${clamp(box.bottom + gap.top, PAD, vh - height - PAD)}px`;
+        const below = box.bottom + gap.top;
+        const top = below + height <= vh - PAD ? below : box.top - gap.bottom - height;
+        popover.style.top = `${clamp(top, PAD, vh - height - PAD)}px`;
         return;
     }
     //a popover wraps against the spot it lands on: the width is measured
@@ -2226,7 +2292,9 @@ const unplace = (popover) => {
         'bottom',
         'margin',
         'max-width',
+        'min-width',
         'width',
+        'visibility',
         '--ful-note-callout-inline',
         '--ful-note-callout-block',
     ]) {
@@ -2234,6 +2302,16 @@ const unplace = (popover) => {
     }
 };
 
+const showOncePlaced = (popover, anchored) => {
+    popover.style.visibility = 'hidden';
+    requestAnimationFrame(() => {
+        if (popover.matches(':popover-open')) {
+            place(popover, anchored);
+        }
+        popover.style.removeProperty('visibility');
+    });
+};
+
 const reflow = () => {
     frame = 0;
     for (const [popover, anchored] of open) {
@@ -2284,8 +2362,10 @@ class Anchors {
      *   the popover, giving toggle and light dismiss with no script of your own
      * @param {boolean} [options.expanded] keeps the invoker's `aria-expanded` in
      *   step with the popover
-     * @param {boolean} [options.stretch] widens the popover to its invoker, which
-     *   is what a combobox dropdown wants
+     * @param {boolean} [options.stretch] widens the popover to at least its
+     *   invoker's width, capped by its own `max-width`, which is what a combobox
+     *   dropdown wants; it flips above the invoker where the viewport leaves no
+     *   room below
      * @param {boolean} [options.handPlace] places here on every platform rather
      *   than only as a fallback, which a popover asks for when it needs to know
      *   where its invoker ended up: the tooltip's note points a callout at it, and
@@ -2332,10 +2412,8 @@ class Anchors {
         }
         const anchored = { invoker, stretch };
         popover.addEventListener('beforetoggle', (/** @type any */ evt) => {
-            //placed before the showing, refined once laid out: the platform's
-            //centered or corner spot never paints
             if (evt.newState === 'open') {
-                place(popover, anchored);
+                showOncePlaced(popover, anchored);
             }
         });
         popover.addEventListener('toggle', (/** @type any */ evt) => {
@@ -2353,6 +2431,57 @@ class Anchors {
             window.addEventListener('resize', schedule);
         }
     }
+    /**
+     * Shows and places a popover beside an anchor, once: the popover shared by
+     * many invokers, each open handing over its own anchor, and an anchor that
+     * is a rectangle rather than an element, one read out of an iframe being
+     * the case a paired invoker could not cover. No pairing, no reflow
+     * following, no close wiring: closing is the caller's, or the platform's
+     * for a light-dismissing popover.
+     *
+     * The placement is the menus' own geometry, below the anchor and
+     * start-aligned, clamped into the viewport; `flip` moves it above the
+     * anchor where the viewport leaves no room below, as the css
+     * `position-try-fallbacks` the paired popovers declare. A popover not
+     * already open is shown before it is placed, so the first position anybody
+     * sees is the right one.
+     *
+     * @param {HTMLElement} popover the `[popover]` element to show, or an
+     *   already-shown element to place
+     * @param {Element|DOMRect} anchor the element, or the rectangle, to place
+     *   beside
+     * @param {object} [options]
+     * @param {boolean} [options.flip] place above the anchor where no room is
+     *   left below
+     * @param {number} [options.gap] the distance from the anchor, in pixels
+     * @returns {HTMLElement} the popover
+     */
+    static show(popover, anchor, { flip = false, gap = 0 } = {}) {
+        const placeShown = () => {
+            const box = anchor instanceof Element ? anchor.getBoundingClientRect() : anchor;
+            const viewport = document.documentElement;
+            const here = popover.getBoundingClientRect();
+            const below = box.bottom + gap;
+            const above = box.top - gap - here.height;
+            const top = flip && below + here.height > viewport.clientHeight - PAD && above >= PAD ? above : below;
+            popover.style.right = 'auto';
+            popover.style.bottom = 'auto';
+            popover.style.margin = '0';
+            popover.style.left = `${clamp(box.left, PAD, Math.max(PAD, viewport.clientWidth - here.width - PAD))}px`;
+            popover.style.top = `${clamp(top, PAD, Math.max(PAD, viewport.clientHeight - here.height - PAD))}px`;
+        };
+        if (popover.matches(':popover-open') || typeof popover.showPopover !== 'function') {
+            placeShown();
+            return popover;
+        }
+        popover.style.visibility = 'hidden';
+        popover.showPopover();
+        requestAnimationFrame(() => {
+            placeShown();
+            popover.style.removeProperty('visibility');
+        });
+        return popover;
+    }
 }
 
 /**
@@ -2649,12 +2778,19 @@ class Dropdown extends ParsedElement {
                 this.hide();
                 return;
             }
+            if (li.hasAttribute('aria-disabled')) {
+                return;
+            }
             this.#change(li);
         });
         this.replaceChildren(fragment);
     }
     #selected() {
-        return this.#menu?.querySelector('[selected]') ?? this.#menu?.firstElementChild ?? null;
+        return (
+            this.#menu?.querySelector('[selected]:not([aria-disabled])') ??
+            this.#menu?.querySelector('li:not([aria-disabled])') ??
+            null
+        );
     }
     #highlight(li) {
         if (!li) {
@@ -2686,11 +2822,20 @@ class Dropdown extends ParsedElement {
         const data = values.map((entry, index) => ({ index, ...entry }));
         this.#optionstemplate.withOverlay(data).renderTo(this.#menu);
         for (const [index, li] of [...this.#menu.children].entries()) {
-            const picked = keys.some((r) => r == values[index]?.key);
+            const entry = values[index];
+            const picked = keys.some((r) => r == entry?.key);
             li.toggleAttribute('picked', picked);
             //what is picked is what aria-selected means for a listbox: a tint alone
             //says it to whoever can see it and to no one else
             li.setAttribute('aria-selected', picked ? 'true' : 'false');
+            //metadata.disabled refuses the entry, metadata.reason saying why
+            const disabled = !!entry?.metadata?.disabled;
+            li.toggleAttribute('aria-disabled', disabled);
+            if (disabled && entry.metadata.reason) {
+                li.setAttribute('title', String(entry.metadata.reason));
+            } else {
+                li.removeAttribute('title');
+            }
         }
         this.#empty.toggleAttribute('hidden', values.length !== 0);
         this.#menu.toggleAttribute('hidden', values.length === 0);
@@ -2764,15 +2909,25 @@ class Dropdown extends ParsedElement {
         if (this.shown) {
             const selected = this.#selected();
             const candidate = selected?.[`${forward ? 'next' : 'previous'}ElementSibling`];
-            if (selected && candidate) {
-                this.#highlight(candidate);
+            const target = candidate ? this.#walk(candidate, forward) : null;
+            if (selected && target) {
+                this.#highlight(target);
             }
             return;
         }
         await this.show(loader, keys);
     }
+    #walk(from, forward) {
+        for (let li = from; li; li = li[`${forward ? 'next' : 'previous'}ElementSibling`]) {
+            if (!li.hasAttribute('aria-disabled')) {
+                return li;
+            }
+        }
+        return null;
+    }
     jump(first) {
-        const target = first ? this.#menu.firstElementChild : this.#menu.lastElementChild;
+        const edge = first ? this.#menu.firstElementChild : this.#menu.lastElementChild;
+        const target = this.#walk(edge, first);
         if (target) {
             this.#highlight(target);
         }
@@ -2782,9 +2937,14 @@ class Dropdown extends ParsedElement {
         if (!selected) {
             return;
         }
-        const lis = Array.from(this.#menu.children);
-        const step = this.#page();
-        const target = lis[Math.max(0, Math.min(lis.length - 1, lis.indexOf(selected) + (forward ? step : -step)))];
+        let target = selected;
+        for (let i = 0; i !== this.#page(); ++i) {
+            const next = this.#walk(target[`${forward ? 'next' : 'previous'}ElementSibling`], forward);
+            if (!next) {
+                break;
+            }
+            target = next;
+        }
         this.#highlight(target);
     }
     #page() {
@@ -2820,6 +2980,12 @@ class Select extends Field {
     //`set value` normalizes a list of one to a single key, and the getter answers a
     //scalar for a single select, so nothing downstream has to know which it was
     static observed = ['multiple:presence', 'item-list:presence', 'value:csv'];
+    unmarshal(attr, str) {
+        if (attr === 'value' && str === '' && !this.hasAttribute('multiple')) {
+            return [''];
+        }
+        return super.unmarshal(attr, str);
+    }
     static slots = true;
     //a manual popover: the combobox keeps the focus on its input and owns
     //the whole lifecycle (typing, arrows, blur, Escape, Tab), so no light
@@ -3913,7 +4079,7 @@ class Table extends ParsedElement {
                 <tbody data-ref="empty" hidden>
                     <tr>
                         <td data-tpl-colspan="schema.length">
-                            <ful-empty data-tpl-if="slots.empty">{{{{ slots.empty }}}}</ful-empty>
+                            <ful-empty data-tpl-if="slots.empty" data-ref="empty-authors"></ful-empty>
                             <ful-empty data-tpl-if="!slots.empty">
                                 <ful-icon data-tpl-if="config.emptyIcon" data-tpl-name="config.emptyIcon" aria-hidden="true"></ful-icon>
                                 {{ #l10n:t('table.no-data') }}
@@ -3956,6 +4122,8 @@ class Table extends ParsedElement {
     #loading;
     #noAutoload;
     #empty;
+    #emptyAuthors;
+    #emptyTemplate;
     #feedback;
     #paginator;
     #sorters;
@@ -4007,6 +4175,9 @@ class Table extends ParsedElement {
         this.#loading = table.querySelector(':scope > tbody[data-ref=loading]');
         this.#noAutoload = table.querySelector(':scope > tbody[data-ref=initial]');
         this.#empty = table.querySelector(':scope > tbody[data-ref=empty]');
+        this.#emptyAuthors = this.#empty.querySelector('ful-empty[data-ref=empty-authors]');
+        this.#emptyTemplate =
+            slots.empty && !Fragments.isBlank(slots.empty) ? Templates.fromFragment(slots.empty) : null;
         this.#feedback = table.querySelector(':scope > tbody[data-ref=feedback]');
         this.#paginator = Nodes.queryChildren(fragment, 'ful-pagination');
         this.replaceChildren(fragment);
@@ -4178,6 +4349,15 @@ class Table extends ParsedElement {
                 .render(),
         );
         this.#empty.toggleAttribute('hidden', pageResponse.data.length !== 0);
+        if (this.#emptyTemplate && pageResponse.data.length === 0) {
+            //rendered per load, the rows' own scope: the empty state can say
+            //whether nothing was ever there or the filters matched nothing
+            this.#emptyAuthors.replaceChildren(
+                this.#emptyTemplate
+                    .withOverlay({ schema: this.#schema, pageRequest, filterRequest, pageResponse })
+                    .render(),
+            );
+        }
         //one move, one repaint: the page and the count are the same state
         this.#paginator.update({ current: pageRequest.page, total: pages });
     }
@@ -4268,6 +4448,13 @@ class ChoiceButton {
     get pinned() {
         return this.#allowed.length < 2;
     }
+    /**
+     * The host's fixed claim: the button and its chrome leave while the value
+     * keeps answering, which is what a fixed operator asks of its glyph.
+     */
+    set fixed(fixed) {
+        this.#button.toggleAttribute('hidden', !!fixed);
+    }
     get value() {
         return this.#button.getAttribute('value');
     }
@@ -4451,6 +4638,7 @@ const asCriterion = (label, operator, operands) => {
  */
 class CompareFilter extends Input {
     static observed = ['value:json', 'operators:csv'];
+    static attributes = ['operator'];
     static OPERATORS = COMPARE_OPERATORS;
     static DEFAULT_OPERATOR = 'EQ';
     static template = `
@@ -4501,11 +4689,38 @@ class CompareFilter extends Input {
         if (this._operator.value === null) {
             this._showDefaultOperator();
         }
+        this.#fixOperator();
         //the second operand mirrors the claims like the first one does, and the
         //freeze reaches the operator and sensitivity buttons, whose popovers an
         //input's readOnly cannot touch
         return { ...pieces, freeze: this._container, also: [this._value2] };
     }
+    /**
+     * The singular `operator` fixes the operator for the element's life: not a
+     * choice, so no menu and no button, every tuple carrying it. The plural is
+     * the menu's whitelist; declaring both is a confused page and says so,
+     * the singular winning, and an unknown name warns and pins the default.
+     */
+    #fixOperator() {
+        const fixed = this.declared('operator');
+        if (fixed === null) {
+            return;
+        }
+        if (this.hasAttribute('operators')) {
+            console.warn(`${this.localName}: operator fixes what operators offers a menu for, the plural is ignored`, this);
+        }
+        const vocabulary = this._vocabulary();
+        /** @type {string|null} */
+        let preferred = null;
+        if (vocabulary.includes(fixed)) {
+            preferred = fixed;
+        } else {
+            console.warn(`${this.localName}: '${fixed}' is not one of its operators, the default is pinned instead`, this);
+            preferred = this._defaultOperator();
+        }
+        this._operator.allowed = [preferred];
+        this._operator.fixed = true;
+    }
     _showDefaultOperator() {
         const preferred = this._defaultOperator();
         const allowed = this._operator.allowed;
@@ -4542,6 +4757,9 @@ class CompareFilter extends Input {
         return this._operator ? this._operator.allowed : this._declaredOperators;
     }
     set operators(declared) {
+        if (this.declared('operator') !== null) {
+            return;
+        }
         if (!this._operator) {
             this._declaredOperators = ChoiceButton.narrow(declared, this._vocabulary());
             return;
@@ -4645,6 +4863,7 @@ class NumberFilter extends CompareFilter {
 /** The compare filter over text, carrying a case sensitivity beside the operator. */
 class TextFilter extends CompareFilter {
     static observed = ['sensitivities:csv'];
+    static attributes = ['sensitivity'];
     static template = `
         <label>{{{{ slots.default }}}}</label>
         {{{{ slots.info }}}}
@@ -4688,8 +4907,28 @@ class TextFilter extends CompareFilter {
         );
         this._sensitivityButton.allowed = null;
         this._sensitivityButton.value = SENSITIVITIES[0];
+        this.#fixSensitivity();
         return pieces;
     }
+    #fixSensitivity() {
+        const fixed = this.declared('sensitivity');
+        if (fixed === null) {
+            return;
+        }
+        if (this.hasAttribute('sensitivities')) {
+            console.warn('ful-filter-text: sensitivity fixes what sensitivities offers a menu for, the plural is ignored', this);
+        }
+        /** @type {string|null} */
+        let preferred = null;
+        if (SENSITIVITIES.includes(fixed)) {
+            preferred = fixed;
+        } else {
+            console.warn(`ful-filter-text: '${fixed}' is not one of its sensitivities, the default is pinned instead`, this);
+            preferred = 'IGNORE_CASE';
+        }
+        this._sensitivityButton.allowed = [preferred];
+        this._sensitivityButton.fixed = true;
+    }
     _choices() {
         return [...super._choices(), this._sensitivityButton].filter((c) => c);
     }
@@ -4701,6 +4940,9 @@ class TextFilter extends CompareFilter {
         return this._sensitivityButton ? this._sensitivityButton.allowed : this._declaredSensitivities;
     }
     set sensitivities(declared) {
+        if (this.declared('sensitivity') !== null) {
+            return;
+        }
         if (!this._sensitivityButton) {
             this._declaredSensitivities = ChoiceButton.narrow(declared, SENSITIVITIES);
             return;
@@ -4830,6 +5072,15 @@ class BooleanFilter extends Field {
         this._operator.value = this._operator.pinned ? this._operator.allowed[0] : v[0];
         this._value.value = v[1] ?? '';
     }
+    formResetCallback() {
+        super.formResetCallback();
+        if (!this.hasAttribute('value')) {
+            const allowed = this._operator.allowed;
+            this._operator.value = allowed.includes(BooleanFilter.DEFAULT_OPERATOR)
+                ? BooleanFilter.DEFAULT_OPERATOR
+                : allowed[0];
+        }
+    }
     /** @returns {FilterCriterion|null} */
     get criterion() {
         const token = this._value.value;
@@ -5126,6 +5377,15 @@ class Dialog extends ParsedElement {
         this.#body = fragment.querySelector('[data-ref=body]');
         this.#loading = fragment.querySelector('[data-ref=loading]');
         this.#error = fragment.querySelector('[data-ref=error]');
+        //a dialog is a named surface: a reader announces the heading on opening,
+        //which it cannot do unless the heading names the dialog. The name travels
+        //as a reference rather than as aria-label text, so it stays the heading's
+        //own however it is reworded
+        const heading = fragment.querySelector('h2');
+        if (heading) {
+            heading.id ||= Attributes.uid('ful-dialog-title');
+            this.#dialog.setAttribute('aria-labelledby', heading.id);
+        }
         this.#dialog.addEventListener('close', () => {
             const outcome = this.#outcome();
             this.dispatchEvent(new CustomEvent('close', { detail: outcome }));
@@ -5293,6 +5553,69 @@ class Dialog extends ParsedElement {
         this.#loading?.setAttribute('hidden', '');
         this.#body?.removeAttribute('hidden');
     }
+    /**
+     * Asks a question in a dialog of the page's own, resolving with its outcome
+     * and removing the element afterwards: the element stays the author's when
+     * the question lives in the page, while a question asked from a button had
+     * to build, render, show, answer and clean up by hand.
+     *
+     * The body is text or a node: a string is never read as markup, an
+     * `innerHTML` sink being a thing the library does not carry. Each button is
+     * a `[result, label, className?]` tuple, rendered as its answer.
+     * @param {string} header
+     * @param {string|Node} body
+     * @param {[string, string, string?][]} [buttons]
+     * @returns {Promise<DialogOutcome>}
+     */
+    static async ask(header, body, buttons = []) {
+        const dialog = document.createElement('ful-dialog');
+        dialog.setAttribute('header', header);
+        if (typeof body === 'string') {
+            dialog.textContent = body;
+        } else if (body) {
+            dialog.append(body);
+        }
+        //buttons are slotted only when there are any: the acknowledge button
+        //is the answer of a question asked without choices of its own
+        if (buttons.length > 0) {
+            const choices = document.createElement('template');
+            choices.setAttribute('slot', 'buttons');
+            for (const [result, label, className] of buttons) {
+                const button = document.createElement('button');
+                button.type = 'button';
+                button.dataset.result = result;
+                if (className) {
+                    button.className = className;
+                }
+                button.textContent = label;
+                choices.content.append(button);
+            }
+            dialog.append(choices);
+        }
+        document.body.append(dialog);
+        try {
+            await Rendering.waitFor(dialog);
+            return await /** @type {Dialog} */ (dialog).ask();
+        } finally {
+            dialog.remove();
+        }
+    }
+    /**
+     * Asks a yes/no question, resolving with the confirm button's answer:
+     * the cancel button, the close button and Escape all answer false, a
+     * dismissal being the negative.
+     * @param {string} header
+     * @param {string|Node} body
+     * @param {{ confirm?: string, cancel?: string }} [labels] overriding the localized defaults
+     * @returns {Promise<boolean>}
+     */
+    static async confirm(header, body, labels = {}) {
+        const outcome = await Dialog.ask(header, body, [
+            ['cancel', labels.cancel ?? Localization.of().t('dialog.cancel')],
+            ['confirm', labels.confirm ?? Localization.of().t('dialog.confirm'), 'ful-button'],
+        ]);
+        return !outcome.dismissed && outcome.result === 'confirm';
+    }
 }
 
 /**
@@ -5305,7 +5628,7 @@ class Dialog extends ParsedElement {
  * it.
  */
 class Drawer extends ParsedElement {
-    static attributes = ['title', 'placement', 'close-on-submit:presence'];
+    static attributes = ['header', 'placement', 'close-on-submit:presence'];
     static slots = true;
     static template = `
         <dialog data-ref="dialog" class="ful-drawer">
@@ -5330,12 +5653,23 @@ class Drawer extends ParsedElement {
     //a save answering with no body at all is still a save
     /** @type {{ dismissed: boolean, response: any }|null} */
     #answer = null;
+    #closing = false;
+    #slideOutEnded = (/** @type AnimationEvent */ e) => {
+        if (e.target === this.#dialog) {
+            this.#closeNow();
+        }
+    };
     render({ slots }) {
         const fragment = this.template()
-            .withOverlay({ slots, title: this.declared('title') ?? '' })
+            .withOverlay({ slots, title: this.declared('header') ?? '' })
             .render();
         this.#dialog = fragment.querySelector('[data-ref=dialog]');
         this.#title = fragment.querySelector('[data-ref=title]');
+        //a named surface, like a dialog: the heading announces the drawer on
+        //opening only where it names it, and the reference survives every
+        //textContent update() writes into the heading
+        this.#title.id ||= Attributes.uid('ful-drawer-title');
+        this.#dialog.setAttribute('aria-labelledby', this.#title.id);
         this.#loading = fragment.querySelector('[data-ref=loading]');
         this.#error = fragment.querySelector('[data-ref=error]');
         this.#content = fragment.querySelector('[data-ref=content]');
@@ -5353,6 +5687,10 @@ class Drawer extends ParsedElement {
                 this.close();
             }
         });
+        this.#dialog.addEventListener('cancel', (e) => {
+            e.preventDefault();
+            this.close();
+        });
         this.#dialog.addEventListener('close', () => {
             this.dispatchEvent(
                 new CustomEvent('close', { detail: this.#answer ?? { dismissed: true, response: null } }),
@@ -5376,23 +5714,23 @@ class Drawer extends ParsedElement {
         this.replaceChildren(fragment);
         wireTargets();
     }
-    get title() {
+    get header() {
         return this.#title.textContent;
     }
-    set title(v) {
+    set header(v) {
         this.#title.textContent = v ?? '';
     }
     /**
-     * Opens the drawer under the given title and waits for the callback: a
+     * Opens the drawer under the given header and waits for the callback: a
      * resolved value paints the content section (which is returned), a
      * rejection paints the problems and travels to the caller, and an update
      * superseded by a newer one paints nothing.
      */
-    async update(title, cb) {
+    async update(header, cb) {
         //the claim detaches any update still in flight: its outcome belongs to
         //an abandoned opening and must neither be painted nor own the drawer
         const claim = this.#updates.take();
-        this.title = title;
+        this.header = header;
         this.#content.replaceChildren();
         this.#restChrome();
         this.#loading.removeAttribute('hidden');
@@ -5438,10 +5776,33 @@ class Drawer extends ParsedElement {
         this.#requests.request(this, this.#content, null, null)?.catch(() => undefined);
     }
     close() {
+        if (this.#closing || !this.#dialog.open) {
+            return;
+        }
+        if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            this.#dialog.close();
+            return;
+        }
+        this.#dialog.setAttribute('closing', '');
+        if (this.#dialog.getAnimations().length === 0) {
+            this.#closeNow();
+            return;
+        }
+        this.#closing = true;
+        this.#dialog.addEventListener('animationend', this.#slideOutEnded);
+    }
+    #closeNow() {
+        this.#stopSlidingOut();
         this.#dialog.close();
     }
+    #stopSlidingOut() {
+        this.#closing = false;
+        this.#dialog.removeEventListener('animationend', this.#slideOutEnded);
+        this.#dialog.removeAttribute('closing');
+    }
     /** Shows the modal, answering whether this call is the one that opened it. */
     #show() {
+        this.#stopSlidingOut();
         if (this.#dialog.open) {
             return false;
         }
@@ -5488,6 +5849,9 @@ class Toasts extends ParsedElement {
         if (!listenerWired) {
             listenerWired = true;
             document.addEventListener('show-toast', (/** @type any */ e) => {
+                if (!e.detail) {
+                    return;
+                }
                 for (const region of REGIONS) {
                     region.show(e.detail.message, e.detail);
                 }
@@ -5499,8 +5863,13 @@ class Toasts extends ParsedElement {
      * Appends a toast carrying the message (a Failure shows its problems'
      * reasons, one per line), severity picking the theme and the announcement,
      * the toast retiring through its own timer or its dismiss button.
+     *
+     * The timer holds while the toast is hovered or holds the focus, so an
+     * actionable toast waits for its reader: `action` is `{ label, onClick }`,
+     * a button beside the message whose click answers and retires. The same
+     * options travel in the `show-toast` event's detail.
      * @param {any} message
-     * @param {any} [options] severity and timeout
+     * @param {any} [options] severity, timeout and action
      * @returns {HTMLElement}
      */
     show(message, options = {}) {
@@ -5517,14 +5886,13 @@ class Toasts extends ParsedElement {
         icon.setAttribute('name', 'x-lg');
         icon.setAttribute('aria-hidden', 'true');
         dismiss.append(icon);
-        item.append(body, dismiss);
-        item.addEventListener('animationend', () => {
-            if (item.classList.contains('ful-toast-out')) {
-                item.remove();
-            }
-        });
+        item.append(body);
+        let remaining = options.timeout ?? this.#timeout;
+        let startedAt = performance.now();
+        let timer = 0;
         const retire = () => {
-            //the toast may hold the focus, on its own dismiss button: handing it
+            clearTimeout(timer);
+            //the toast may hold the focus, on its own buttons: handing it
             //back to the region keeps the reader somewhere rather than on <body>
             if (item.contains(document.activeElement)) {
                 /** @type HTMLElement */ (this).focus();
@@ -5538,9 +5906,49 @@ class Toasts extends ParsedElement {
                 item.remove();
             }
         };
+        if (options.action?.label) {
+            const action = document.createElement('button');
+            action.type = 'button';
+            action.className = 'ful-toast-action';
+            action.textContent = String(options.action.label);
+            action.addEventListener('click', () => {
+                options.action.onClick?.();
+                retire();
+            });
+            item.append(action);
+        }
+        item.append(dismiss);
+        item.addEventListener('animationend', () => {
+            if (item.classList.contains('ful-toast-out')) {
+                item.remove();
+            }
+        });
+        //the pointer and the focus hold independently: a count rather than a
+        //flag, so the pointer leaving while the focus stays keeps the hold
+        let holds = 0;
+        const hold = () => {
+            if (holds === 0) {
+                clearTimeout(timer);
+                remaining = Math.max(0, remaining - (performance.now() - startedAt));
+            }
+            ++holds;
+        };
+        const release = () => {
+            if (holds === 0) {
+                return;
+            }
+            if (--holds === 0) {
+                startedAt = performance.now();
+                timer = setTimeout(retire, remaining);
+            }
+        };
+        item.addEventListener('mouseenter', hold);
+        item.addEventListener('mouseleave', release);
+        item.addEventListener('focusin', hold);
+        item.addEventListener('focusout', release);
         dismiss.addEventListener('click', retire);
         this.append(item);
-        setTimeout(retire, options.timeout ?? this.#timeout);
+        timer = setTimeout(retire, remaining);
         return item;
     }
 }
@@ -5651,7 +6059,7 @@ class Tabs extends ParsedElement {
         this.#active = index;
         this.reflectTo('active', index);
         if (this.rendered && index !== previous) {
-            this.dispatchEvent(new CustomEvent('change', { detail: { active: index, previous } }));
+            this.dispatchEvent(new CustomEvent('tabs:change', { detail: { active: index, previous } }));
         }
         if (this.#panels.length > 0 && (index !== previous || !this.rendered)) {
             //the activation is the reader's own gesture: the chrome reports a
@@ -5872,6 +6280,8 @@ var en = {
     'info.tooltip': 'More information',
     'dialog.acknowledge': 'Got it',
     'dialog.close': 'Close',
+    'dialog.confirm': 'Confirm',
+    'dialog.cancel': 'Cancel',
     'drawer.close': 'Close',
     'spinner.loading': 'Loading…',
     'toast.region': 'Notifications',
@@ -5914,6 +6324,8 @@ var it = {
     'info.tooltip': 'Maggiori informazioni',
     'dialog.acknowledge': 'Ho capito',
     'dialog.close': 'Chiudi',
+    'dialog.confirm': 'Conferma',
+    'dialog.cancel': 'Annulla',
     'drawer.close': 'Chiudi',
     'spinner.loading': 'Caricamento…',
     'toast.region': 'Notifiche',
@@ -5956,6 +6368,8 @@ var es = {
     'info.tooltip': 'Más información',
     'dialog.acknowledge': 'Entendido',
     'dialog.close': 'Cerrar',
+    'dialog.confirm': 'Confirmar',
+    'dialog.cancel': 'Cancelar',
     'drawer.close': 'Cerrar',
     'spinner.loading': 'Cargando…',
     'toast.region': 'Notificaciones',
@@ -6001,6 +6415,8 @@ var fr = {
     'info.tooltip': 'Plus d’informations',
     'dialog.acknowledge': 'J’ai compris',
     'dialog.close': 'Fermer',
+    'dialog.confirm': 'Confirmer',
+    'dialog.cancel': 'Annuler',
     'drawer.close': 'Fermer',
     'spinner.loading': 'Chargement…',
     'toast.region': 'Notifications',
@@ -6041,7 +6457,7 @@ class Plugin {
         const httpClient =
             this.#httpClient ?? HttpClient.builder().withCsrfToken().withRedirectOnUnauthorized('/').build();
         //the fallback chain is baked here: en, the active language, the consumer's own strings
-        const language = this.#language.split('-')[0];
+        const language = this.#language.split('-')[0].toLowerCase();
         const l10n = { ...BUILTIN.en, ...BUILTIN[language], ...this.#translations };
         registry
             .defineModule('l10n', Localization)