@optionfactory/fml 9.0.0-rc12 → 9.0.0-rc14

package/dist/fml.iife.js

@@ -5147,7 +5147,7 @@ var fml = (function (exports) {
          */
         static t(key, ...args) {
             const messages = this.l10n ?? {};
-            let message = messages[key];
+            let message = Object.hasOwn(messages, key) ? messages[key] : undefined;
             if (message === undefined) {
                 warnOnce(`missing message "${key}"`);
                 return key;
@@ -5170,7 +5170,7 @@ var fml = (function (exports) {
             if (args.length === 1 && isPlainObject(args[0])) {
                 const named = args[0];
                 return message.replace(PLACEHOLDER, (literal, name) => {
-                    if (!(name in named)) {
+                    if (!Object.hasOwn(named, name)) {
                         warnOnce(`message "${key}" wants {${name}}`);
                         return literal;
                     }
@@ -6789,30 +6789,62 @@ var fml = (function (exports) {
         }
 
         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', '');
@@ -6823,7 +6855,7 @@ var fml = (function (exports) {
                 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;
                     }
@@ -6843,6 +6875,9 @@ var fml = (function (exports) {
             });
             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 = '';
@@ -6857,7 +6892,8 @@ var fml = (function (exports) {
             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();
         }
@@ -6898,6 +6934,7 @@ var fml = (function (exports) {
         /** the role the element internals carry, 'presentation' unless the control is its own */
         static ROLE = 'presentation';
         #control;
+        #pendingFocus = null;
         #described;
         #descriptions = [];
         #errorId = null;
@@ -6979,12 +7016,17 @@ var fml = (function (exports) {
                 //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
@@ -7052,7 +7094,11 @@ var fml = (function (exports) {
             }
         }
         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
@@ -7079,9 +7125,13 @@ var fml = (function (exports) {
             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;
             }
@@ -7439,6 +7489,11 @@ var fml = (function (exports) {
             );
             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?.('');
                 });
             }
@@ -7504,8 +7559,9 @@ var fml = (function (exports) {
                 );
                 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);
@@ -7555,6 +7611,9 @@ var fml = (function (exports) {
             //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);
@@ -7565,7 +7624,7 @@ var fml = (function (exports) {
             });
             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) {
@@ -8406,11 +8465,18 @@ var fml = (function (exports) {
         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
@@ -8455,7 +8521,9 @@ var fml = (function (exports) {
             'bottom',
             'margin',
             'max-width',
+            'min-width',
             'width',
+            'visibility',
             '--ful-note-callout-inline',
             '--ful-note-callout-block',
         ]) {
@@ -8463,6 +8531,16 @@ var fml = (function (exports) {
         }
     };
 
+    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) {
@@ -8513,8 +8591,10 @@ var fml = (function (exports) {
          *   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
@@ -8531,7 +8611,18 @@ var fml = (function (exports) {
             if (invoke) {
                 //popovertarget needs a target that can be named
                 popover.id = popover.id || uid;
-                invoker.setAttribute('popovertarget', popover.id);
+                if (invoker.localName === 'button' || invoker.localName === 'input') {
+                    invoker.setAttribute('popovertarget', popover.id);
+                } else {
+                    invoker.addEventListener('click', () => popover.togglePopover());
+                    invoker.addEventListener('keydown', (/** @type any */ evt) => {
+                        if (evt.key !== 'Enter' && evt.key !== ' ') {
+                            return;
+                        }
+                        evt.preventDefault();
+                        popover.togglePopover();
+                    });
+                }
             }
             const anchor = `--${uid}`;
             invoker.style.anchorName = anchor;
@@ -8550,10 +8641,8 @@ var fml = (function (exports) {
             }
             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) => {
@@ -8571,6 +8660,57 @@ var fml = (function (exports) {
                 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;
+        }
     }
 
     /**
@@ -8867,12 +9007,19 @@ var fml = (function (exports) {
                     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) {
@@ -8904,11 +9051,20 @@ var fml = (function (exports) {
             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);
@@ -8982,15 +9138,25 @@ var fml = (function (exports) {
             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);
             }
@@ -9000,9 +9166,14 @@ var fml = (function (exports) {
             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() {
@@ -9038,6 +9209,12 @@ var fml = (function (exports) {
         //`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
@@ -9143,7 +9320,7 @@ var fml = (function (exports) {
                 //the select's: a tooltip marker slotted into `info`, a button a page
                 //put in an affix. Without this, reading the note beside a select
                 //also stole the focus and dropped the dropdown over the note
-                const elsewhere = e.target.closest('button, a[href], input, select, textarea');
+                const elsewhere = e.target.closest('button, [role="button"], a[href], input, select, textarea');
                 if (elsewhere && elsewhere !== this.#input) {
                     return;
                 }
@@ -10131,7 +10308,7 @@ var fml = (function (exports) {
                 <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') }}
@@ -10174,6 +10351,8 @@ var fml = (function (exports) {
         #loading;
         #noAutoload;
         #empty;
+        #emptyAuthors;
+        #emptyTemplate;
         #feedback;
         #paginator;
         #sorters;
@@ -10225,6 +10404,9 @@ var fml = (function (exports) {
             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);
@@ -10396,6 +10578,15 @@ var fml = (function (exports) {
                     .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 });
         }
@@ -10486,6 +10677,13 @@ var fml = (function (exports) {
         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');
         }
@@ -10669,6 +10867,7 @@ var fml = (function (exports) {
      */
     class CompareFilter extends Input {
         static observed = ['value:json', 'operators:csv'];
+        static attributes = ['operator'];
         static OPERATORS = COMPARE_OPERATORS;
         static DEFAULT_OPERATOR = 'EQ';
         static template = `
@@ -10719,11 +10918,38 @@ var fml = (function (exports) {
             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;
@@ -10760,6 +10986,9 @@ var fml = (function (exports) {
             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;
@@ -10863,6 +11092,7 @@ var fml = (function (exports) {
     /** 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 }}}}
@@ -10906,8 +11136,28 @@ var fml = (function (exports) {
             );
             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);
         }
@@ -10919,6 +11169,9 @@ var fml = (function (exports) {
             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;
@@ -11048,6 +11301,15 @@ var fml = (function (exports) {
             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;
@@ -11074,7 +11336,6 @@ var fml = (function (exports) {
      */
     class InFilter extends Select {
         static attributes = ['operator'];
-        /** the selection as the array the wire takes, whether one key was chosen or many */
         #keys() {
             const chosen = super.value;
             if (this.multiple) {
@@ -11095,8 +11356,6 @@ var fml = (function (exports) {
         set value(v) {
             const operator = this.declared('operator');
             let keys = v === null || v === undefined ? [] : Array.isArray(v) ? v : [v];
-            //what the getter answers has to be assignable back, and it carries the
-            //operator in front of the keys
             if (operator && keys[0] === operator) {
                 keys = keys.slice(1);
             }
@@ -11243,7 +11502,7 @@ var fml = (function (exports) {
             icon: 'info-circle-fill',
         };
         static template = `
-        <button type="button" class="ful-tip" data-ref="trigger" data-tpl-aria-label="#l10n:t('info.tooltip')"><ful-icon data-tpl-name="icon ?? config.icon" aria-hidden="true"></ful-icon></button>
+        <span role="button" tabindex="0" class="ful-tip" data-ref="trigger" data-tpl-aria-label="#l10n:t('info.tooltip')"><ful-icon data-tpl-name="icon ?? config.icon" aria-hidden="true"></ful-icon></span>
         <ful-note popover data-ref="content">{{{{ slots.default }}}}</ful-note>
     `;
         render({ slots }) {
@@ -11347,15 +11606,32 @@ var fml = (function (exports) {
             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 }));
                 this.#settle(outcome);
             });
+            let pressedOutside = false;
+            this.#dialog.addEventListener('mousedown', (/** @type any */ e) => {
+                pressedOutside = e.target === this.#dialog;
+            });
             this.#dialog.addEventListener('click', (/** @type any */ e) => {
                 const result = e.target.closest('button[data-result]')?.dataset.result;
                 if (result !== undefined) {
                     this.#dialog.close(result);
+                    return;
+                }
+                if (!requiresAnswer && pressedOutside && e.target === this.#dialog) {
+                    this.#dialog.close('');
                 }
             });
             //dismissal, not an answer: the waiters are settled with a dismissal, as
@@ -11506,6 +11782,69 @@ var fml = (function (exports) {
             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';
+        }
     }
 
     /**
@@ -11518,7 +11857,7 @@ var fml = (function (exports) {
      * 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">
@@ -11543,12 +11882,23 @@ var fml = (function (exports) {
         //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]');
@@ -11557,6 +11907,19 @@ var fml = (function (exports) {
                 this.#dialog.setAttribute('placement', placement);
             }
             fragment.querySelector('[data-ref=close]').addEventListener('click', () => this.close());
+            let pressedOutside = false;
+            this.#dialog.addEventListener('mousedown', (e) => {
+                pressedOutside = e.target === this.#dialog;
+            });
+            this.#dialog.addEventListener('click', (e) => {
+                if (pressedOutside && e.target === this.#dialog) {
+                    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 } }),
@@ -11580,23 +11943,23 @@ var fml = (function (exports) {
             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');
@@ -11642,10 +12005,33 @@ var fml = (function (exports) {
             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;
             }
@@ -11692,6 +12078,9 @@ var fml = (function (exports) {
             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);
                     }
@@ -11703,8 +12092,13 @@ var fml = (function (exports) {
          * 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 = {}) {
@@ -11721,14 +12115,13 @@ var fml = (function (exports) {
             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();
@@ -11742,9 +12135,49 @@ var fml = (function (exports) {
                     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;
         }
     }
@@ -11855,7 +12288,7 @@ var fml = (function (exports) {
             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
@@ -12076,6 +12509,8 @@ var fml = (function (exports) {
         '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',
@@ -12118,6 +12553,8 @@ var fml = (function (exports) {
         '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',
@@ -12160,6 +12597,8 @@ var fml = (function (exports) {
         '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',
@@ -12205,6 +12644,8 @@ var fml = (function (exports) {
         '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',
@@ -12245,7 +12686,7 @@ var fml = (function (exports) {
             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)