@optionfactory/fml 9.0.0-rc1 → 9.0.0-rc11

package/dist/fml.iife.js

@@ -6462,6 +6462,48 @@ var fml = (function (exports) {
         }
     }
 
+    /**
+     * The protocol by which content standing inside a field becomes part of the
+     * accessible description of that field's control.
+     *
+     * A field owns its control's `aria-describedby`: it is the only thing that
+     * knows which element the description belongs on, and it already writes the
+     * entry for its own error region. Content the author slotted into the field
+     * cannot write that attribute itself without becoming a second owner of it, and
+     * it cannot be wired by the field either, because a slotted custom element
+     * renders after the field has mounted and has nothing to point at when the
+     * field looks.
+     *
+     * So the content asks, once it has something to offer. `describable(el)`
+     * answers the nearest ancestor that accepts a description, and the caller hands
+     * its element to that ancestor's `describedBy`, which answers whether it was
+     * taken. Nothing here names a field or a tooltip: the relation is expressed as
+     * a capability, so the two ends need not import each other, which matters
+     * because the library's own arrow runs from the forms to the disclosures.
+     *
+     * The lookup lives here rather than at its one call site so the protocol has a
+     * name, a place to be documented and a single definition to change.
+     */
+
+    /**
+     * @typedef {{ describedBy(el: HTMLElement): boolean }} Describable
+     */
+
+    /**
+     * The nearest ancestor of `el` that accepts elements into the description of
+     * whatever it considers its control, or null when nothing in the ancestry does.
+     * @param {Element} el
+     * @returns {(Element & Describable) | null}
+     */
+    const describable = (el) => {
+        for (let at = el.parentElement; at; at = at.parentElement) {
+            if (typeof (/** @type {any} */ (at).describedBy) === 'function') {
+                return /** @type {any} */ (at);
+            }
+        }
+        return null;
+    };
+
     /**
      * Sleeping, debouncing and throttling. Debounce and throttle both return the
      * wrapped function together with a cancel function.
@@ -6856,6 +6898,9 @@ var fml = (function (exports) {
         /** the role the element internals carry, 'presentation' unless the control is its own */
         static ROLE = 'presentation';
         #control;
+        #described;
+        #descriptions = [];
+        #errorId = null;
         #fieldError;
         #claims;
         #announces;
@@ -6907,15 +6952,18 @@ var fml = (function (exports) {
                     true,
                 );
             }
-            //the error region describes the control, or the host where there is no
+            //the description lands on the control, or on the host where there is no
             //single control to describe (a radio group's legend names its fieldset)
+            this.#described = described ?? control;
             if (error) {
-                (described ?? control).ariaDescribedByElements = [error];
+                //named for what it is, the generic id being for whoever brings no name
+                error.id = error.id || Attributes.uid('ful-field-error');
+                this.#errorId = error.id;
             }
+            //anything handed over before the field had a target lands here
+            this.#describe();
             if (label) {
-                control.ariaLabelledByElements = [label];
-                //a label that does not natively target the control still focuses it
-                label.addEventListener('click', () => this.focus());
+                Field.#name(this, label, control);
             }
             //the platform's implicit submission, stood in for where the field's own
             //protocol took it away: the inner controls carry form="", so Enter in one
@@ -6948,6 +6996,61 @@ var fml = (function (exports) {
         static #submitsOnEnter(el) {
             return el instanceof HTMLInputElement && !['file', 'button', 'submit', 'reset', 'image'].includes(el.type);
         }
+        /**
+         * Adds an element to the accessible description of the field's control and
+         * answers whether the field took it.
+         *
+         * A field takes one whenever it is offered, before its own render as
+         * readily as after: content slotted into a field is a custom element of its
+         * own and may upgrade on either side of the field it stands in, which
+         * happens in both directions in practice, a tooltip beating an async select
+         * to its render while losing to a plain input. A description handed over
+         * early waits here and is written the moment the field has somewhere to
+         * write it, so the caller never has to know the order.
+         *
+         * The reference lands on the element handed over rather than on a wrapper
+         * around it: a hidden element is included in a description only where it is
+         * named directly, and content that reaches the description through a
+         * wrapper is skipped while it is hidden. A popover closed until someone
+         * opens it is exactly that, so the caller passes the popover itself.
+         *
+         * An attribute rather than `ariaDescribedByElements`: the property reflects
+         * to nothing, so the description would live in the accessibility tree alone
+         * and vanish entirely on a browser without aria element reflection.
+         *
+         * This is the field's half of the description protocol; `describable` in
+         * `ful/descriptions.mjs` is the half the content uses to find the field.
+         * @param {HTMLElement} el
+         * @returns {boolean}
+         */
+        describedBy(el) {
+            if (!el) {
+                return false;
+            }
+            if (!el.id) {
+                el.id = Attributes.uid('ful-described');
+            }
+            if (!this.#descriptions.includes(el.id)) {
+                this.#descriptions.push(el.id);
+            }
+            this.#describe();
+            return true;
+        }
+        /**
+         * Writes the description the field has collected, the error region last:
+         * the standing explanations are what the field always says, the problem is
+         * the news. The field owns the attribute outright rather than appending to
+         * whatever is there, so the order does not depend on who arrived when.
+         */
+        #describe() {
+            if (!this.#described) {
+                return;
+            }
+            const ids = [...this.#descriptions, this.#errorId].filter((id) => id);
+            if (ids.length) {
+                this.#described.setAttribute('aria-describedby', ids.join(' '));
+            }
+        }
         focus(options) {
             this.#control?.focus(options);
         }
@@ -7004,6 +7107,49 @@ var fml = (function (exports) {
                 }),
             );
         }
+        /** The html elements a label's `for` may point at, `input[type=hidden]` excepted. */
+        static #LABELABLE = new Set(['BUTTON', 'INPUT', 'METER', 'OUTPUT', 'PROGRESS', 'SELECT', 'TEXTAREA']);
+        /**
+         * Names the control from the field's label, natively wherever the platform
+         * allows it.
+         *
+         * `for` and `id` are the form the dom itself carries, so the association is
+         * there for anything reading the markup rather than the accessibility tree:
+         * an audit tool, the browser's autofill, a translation pass. It also makes
+         * the label's click reach the control the way it does in a plain form, which
+         * is focus for a text control and activation for a checkbox, so the field
+         * needs no handler of its own.
+         *
+         * A control the platform will not let a label target, a composite carrying
+         * `role="radiogroup"` among them, takes `aria-labelledby` instead. That is an
+         * attribute too, so the association is equally visible; what it does not carry
+         * is the label's click, which is why the handler stays on that path only.
+         *
+         * Neither branch uses `ariaLabelledByElements`. The property reflects to no
+         * attribute, so the name lived in the accessibility tree alone: nothing reading
+         * the dom saw it, and on a browser without aria element reflection the
+         * assignment is a silent expando and the field has no name at all.
+         * @param {any} field
+         * @param {HTMLElement} label
+         * @param {any} control
+         */
+        static #name(field, label, control) {
+            const labelable =
+                Field.#LABELABLE.has(control.tagName) && control.getAttribute('type') !== 'hidden';
+            if (!labelable) {
+                if (!label.id) {
+                    label.id = Attributes.uid('ful-label');
+                }
+                control.setAttribute('aria-labelledby', label.id);
+                //aria-labelledby carries the name but not the label's click
+                label.addEventListener('click', () => field.focus());
+                return;
+            }
+            if (!control.id) {
+                control.id = Attributes.uid('ful-control');
+            }
+            label.setAttribute('for', control.id);
+        }
         /**
          * Whether the field's chrome should answer a gesture. Badges, dropzones,
          * menus and labels are not form controls, so their handlers must ask the
@@ -7141,8 +7287,9 @@ var fml = (function (exports) {
          *   three claims reach it
          * - `error` is the field's live region
          * - `label`, when given, names the control and focuses it on click
-         * - `described` moves the error's description off the control and onto
-         *   another element, the host where no single control can carry it
+         * - `described` moves the description off the control and onto another
+         *   element, the host where no single control can carry it: the error
+         *   region and anything `describedBy` is later handed both land there
          * - `claims` moves the three claims onto a wrapper the field disables as a
          *   whole, leaving focus and aria on the control
          * - `announces` is the element whose role carries `aria-readonly` and
@@ -7254,6 +7401,7 @@ var fml = (function (exports) {
             'response-mapper',
             'clear-invalid-on-change:presence',
             'scroll-on-error:presence',
+            'autocomplete',
         ];
         form;
         render() {
@@ -7264,6 +7412,10 @@ var fml = (function (exports) {
             //internals messages custom elements have no default UI for
             form.setAttribute('novalidate', '');
             Attributes.forward('form-', this, form);
+            //the fields read it off whichever of the two they reach first, which depends
+            //on whether they upgraded before or after this render: they cannot read it
+            //off their own control, which carries form="" and so has no form owner
+            Attributes.set(form, 'autocomplete', this.declared('autocomplete'));
             form.replaceChildren(...this.childNodes);
             form.addEventListener('submit', async (e) => {
                 e.preventDefault();
@@ -7468,6 +7620,38 @@ var fml = (function (exports) {
      * `reject="[^0-9]"` both leave the digits. Keeping is the one worth reaching for,
      * the rejecting spelling of an allowed set being a double negative.
      */
+    /**
+     * The autofill token a field inherits from the form around it.
+     *
+     * A control is rendered with `form=""` so that the host is the only thing that
+     * submits, which also leaves it without a form owner, and the platform resolves
+     * `autocomplete` through the form owner. So a form declaring it reaches nothing
+     * on its own and the field reads the setting off the form element instead.
+     *
+     * The `form` a `ful-form` renders answers here, the host copying its token onto
+     * it, and a plain `form` around ful fields answers too: the platform meant the
+     * same thing by it, and its inheritance is broken here for the same reason. An
+     * ancestor always upgrades before its descendants, so the rendered form is in
+     * place by the time a field of its own builds.
+     */
+    const inheritedAutocomplete = (el) => el.closest('form')?.getAttribute('autocomplete') ?? null;
+
+    /** Rendering a text input is what costs these the native min/max/step enforcement. */
+    const INPUT_MODES = { numeric: 'numeric', decimal: 'decimal' };
+
+    const signed = (v, digits) => (v.startsWith('-') ? '-' : '') + digits(v);
+
+    const NUMERIC_FILTERS = {
+        numeric: (v) => signed(v, (t) => t.replace(/\D/g, '')),
+        //one separator, the first: the rest are a slip while typing, not a value
+        decimal: (v) =>
+            signed(v, (t) => {
+                const kept = t.replace(/[^\d.,]/g, '');
+                const at = kept.search(/[.,]/);
+                return at === -1 ? kept : kept.slice(0, at + 1) + kept.slice(at + 1).replace(/[.,]/g, '');
+            }),
+    };
+
     const warnedBoth = new WeakSet();
     const filterOf = (el) => {
         const keep = el.declared('keep');
@@ -7487,7 +7671,7 @@ var fml = (function (exports) {
             const re = compiled('reject', reject);
             return re && ((v) => v.replace(re, ''));
         }
-        return null;
+        return NUMERIC_FILTERS[el._type()] ?? null;
     };
 
     /** A labelled text input over any native type or textarea; the temporal inputs are its subclasses. */
@@ -7495,7 +7679,15 @@ var fml = (function (exports) {
         static observed = ['placeholder'];
         //configuration: the control is built from them and the value getter reads them,
         //but none of them is meant to change once the element is up
-        static attributes = ['type', 'v-type', 'keep', 'reject', 'uppercase:presence', 'trim:presence'];
+        static attributes = [
+            'type',
+            'v-type',
+            'keep',
+            'reject',
+            'uppercase:presence',
+            'trim:presence',
+            'autocomplete',
+        ];
         static slots = true;
         static template = `
         <label>{{{{ slots.default }}}}</label>
@@ -7515,10 +7707,26 @@ var fml = (function (exports) {
             return this.declared('type') ?? (this.declared('v-type') === 'number' ? 'number' : 'text');
         }
         _build({ slots }) {
-            const type = this._type();
+            const declared = this._type();
+            const mode = INPUT_MODES[declared];
+            //a numeric widget is a text input: the type names the keyboard, not the
+            //control, so the rendered markup stays valid html
+            const type = mode ? 'text' : declared;
             const fragment = this.template().withOverlay({ type, slots }).render();
             this._input = fragment.querySelector('input,textarea');
-
+            if (mode) {
+                //before the passthrough, which stays the last word
+                Attributes.set(this._input, 'inputmode', mode);
+            }
+
+            //the browser reads autocomplete off the control it is classifying, so the
+            //field's own token, or the form's where it declares none, is put there.
+            //Set before the passthrough, which stays the last word
+            Attributes.set(
+                this._input,
+                'autocomplete',
+                this.declared('autocomplete') ?? inheritedAutocomplete(this),
+            );
             Attributes.forward('input-', this, this._input);
             this._input.addEventListener('input', (evt) => {
                 const strip = filterOf(this);
@@ -7561,13 +7769,15 @@ var fml = (function (exports) {
             if (trimmed === '') {
                 return null;
             }
+            //the wire carries a dot wherever the comma is what the keyboard shows
+            const normalized = this._type() === 'decimal' ? trimmed.replaceAll(',', '.') : trimmed;
             if (this.declared('v-type') === 'number') {
                 //typed values are an explicit opt in, as the select's k-type: blank
                 //stays null, and a value that does not decode is kept as it is
-                const n = Number(trimmed);
-                return Number.isNaN(n) ? trimmed : n;
+                const n = Number(normalized);
+                return Number.isNaN(n) ? normalized : n;
             }
-            return trimmed;
+            return normalized;
         }
         set value(value) {
             this._input.value = value === '' || value === undefined ? null : value;
@@ -8156,8 +8366,14 @@ var fml = (function (exports) {
         const box = invoker.getBoundingClientRect();
         const here = popover.getBoundingClientRect();
         //against the padding box, which is what a percentage inset resolves against
-        popover.style.setProperty('--ful-note-callout-inline', `${box.left + box.width / 2 - here.left - popover.clientLeft}px`);
-        popover.style.setProperty('--ful-note-callout-block', `${box.top + box.height / 2 - here.top - popover.clientTop}px`);
+        popover.style.setProperty(
+            '--ful-note-callout-inline',
+            `${box.left + box.width / 2 - here.left - popover.clientLeft}px`,
+        );
+        popover.style.setProperty(
+            '--ful-note-callout-block',
+            `${box.top + box.height / 2 - here.top - popover.clientTop}px`,
+        );
     };
 
     const place = (popover, anchored) => {
@@ -8261,67 +8477,93 @@ var fml = (function (exports) {
     };
 
     /**
-     * Wires an invoker/popover pair ful anchors through css: where the
-     * platform lacks anchor positioning the popover is placed beside its
-     * invoker whenever it opens, stretched to the invoker's width when
-     * asked, and cleaned up when it closes. Where the css works the call
-     * is a no-op.
-     *
-     * `handPlace` takes the placement here on every platform, which a popover
-     * asks for when it needs to know where its invoker ended up: the note's
-     * callout points at the invoker, and a pseudo-element cannot read an anchor
-     * that is not inside its own containing block, so the note is measured rather
-     * than placed by the css. Its stylesheet declares no position-area to match.
+     * CSS anchor positioning for a popover and the invoker it belongs to, with the
+     * hand-placed fallback for the platforms that do not have it.
      */
-    const wireAnchoredPopover = (
-        invoker,
-        popover,
-        { prefix = 'ful-anchor', invoke = false, expanded = false, stretch = false, handPlace = false } = {},
-    ) => {
-        const uid = Attributes.uid(prefix);
-        if (invoke) {
-            //popovertarget needs a target that can be named
-            popover.id = popover.id || uid;
-            invoker.setAttribute('popovertarget', popover.id);
-        }
-        const anchor = `--${uid}`;
-        invoker.style.anchorName = anchor;
-        popover.style.positionAnchor = anchor;
-        if (expanded) {
-            invoker.setAttribute('aria-expanded', 'false');
+    class Anchors {
+        /**
+         * Anchors a popover to its invoker.
+         *
+         * The invoker is given an `anchor-name` and the popover a `position-anchor`
+         * pointing at it, which is what a stylesheet needs to place the popover
+         * itself: the library's own menus say `top: anchor(bottom); left:
+         * anchor(left)`. **Writing that css is the caller's half of this.** Without
+         * it the popover lands wherever the user agent puts a popover, which is not
+         * beside the invoker.
+         *
+         * Where the platform has no anchor positioning the popover is placed here
+         * instead, beside the invoker whenever it opens, clamped into the viewport,
+         * following it on scroll and resize, and cleaned up on close. That placement
+         * draws the geometry the css above describes, so the two agree.
+         *
+         * @param {HTMLElement} invoker the element the popover belongs to
+         * @param {HTMLElement} popover the `[popover]` element to place
+         * @param {object} [options]
+         * @param {string} [options.prefix] prefixes the generated anchor name and id,
+         *   so the dom says which component a name belongs to
+         * @param {boolean} [options.invoke] points the invoker's `popovertarget` at
+         *   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.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
+         *   a pseudo-element cannot read an anchor outside its own containing block.
+         *   Such a popover declares no anchor placement in css, there being none to
+         *   agree with
+         */
+        static wire(
+            invoker,
+            popover,
+            { prefix = 'ful-anchor', invoke = false, expanded = false, stretch = false, handPlace = false } = {},
+        ) {
+            const uid = Attributes.uid(prefix);
+            if (invoke) {
+                //popovertarget needs a target that can be named
+                popover.id = popover.id || uid;
+                invoker.setAttribute('popovertarget', popover.id);
+            }
+            const anchor = `--${uid}`;
+            invoker.style.anchorName = anchor;
+            popover.style.positionAnchor = anchor;
+            if (expanded) {
+                invoker.setAttribute('aria-expanded', 'false');
+                popover.addEventListener('toggle', (/** @type any */ evt) => {
+                    invoker.setAttribute('aria-expanded', evt.newState === 'open' ? 'true' : 'false');
+                });
+            }
+            //the naming above is what the stylesheet reads, so it happens either way:
+            //only the hand placement below is the fallback, and only for a popover that
+            //did not ask to be placed here whatever the platform offers
+            if (!handPlace && platformAnchors()) {
+                return;
+            }
+            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);
+                }
+            });
             popover.addEventListener('toggle', (/** @type any */ evt) => {
-                invoker.setAttribute('aria-expanded', evt.newState === 'open' ? 'true' : 'false');
+                if (evt.newState === 'open') {
+                    open.set(popover, anchored);
+                    place(popover, anchored);
+                } else {
+                    open.delete(popover);
+                    unplace(popover);
+                }
             });
-        }
-        //the naming above is what the stylesheet reads, so it happens either way:
-        //only the hand placement below is the fallback, and only for a popover that
-        //did not ask to be placed here whatever the platform offers
-        if (!handPlace && platformAnchors()) {
-            return;
-        }
-        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);
-            }
-        });
-        popover.addEventListener('toggle', (/** @type any */ evt) => {
-            if (evt.newState === 'open') {
-                open.set(popover, anchored);
-                place(popover, anchored);
-            } else {
-                open.delete(popover);
-                unplace(popover);
+            if (!reflowWired) {
+                reflowWired = true;
+                document.addEventListener('scroll', schedule, true);
+                window.addEventListener('resize', schedule);
             }
-        });
-        if (!reflowWired) {
-            reflowWired = true;
-            document.addEventListener('scroll', schedule, true);
-            window.addEventListener('resize', schedule);
         }
-    };
+    }
 
     /**
      * Fetches a select's whole vocabulary from a url and serves every later read
@@ -8527,10 +8769,27 @@ var fml = (function (exports) {
                 method: el.declared('method') ?? 'POST',
                 mode: el.declared('mode'),
                 prefetch: el.declared('preload'),
-                revision: el.declared('revision'),
+                revision: SelectLoader.#revisionFrom(el),
                 responseMapper: SelectLoader.#responseMapperFrom(el),
             });
         }
+        static #revisionFrom(el) {
+            const declared = el.declared('revision');
+            if (declared !== '') {
+                return declared;
+            }
+            const configured = el.component('revision');
+            if (configured === undefined || configured === null) {
+                //not caching while the markup says to cache is the quiet failure
+                //this branch exists to make loud
+                console.warn(
+                    "a valueless revision asks the registry for one, and no 'revision' component is defined: the vocabulary will not be cached",
+                    el,
+                );
+                return null;
+            }
+            return typeof configured === 'function' ? configured() : configured;
+        }
         static #responseMapperFrom(el) {
             if (el.declared('k-expr') && el.declared('l-expr')) {
                 return (response) => {
@@ -8563,7 +8822,7 @@ var fml = (function (exports) {
         static slots = true;
         static template = `
         <ful-spinner class="centered" role="status" hidden><span class="ful-sr-only">{{ #l10n:t('spinner.loading') }}</span></ful-spinner>
-        <p data-ref="empty" aria-live="polite" hidden>{{ #l10n:t('dropdown.empty') }}</p>
+        <ful-empty data-ref="empty" aria-live="polite" hidden>{{ #l10n:t('dropdown.empty') }}</ful-empty>
         <menu tabindex="-1" role="listbox" hidden></menu>
     `;
         static templates = {
@@ -8585,7 +8844,7 @@ var fml = (function (exports) {
                 ? this.template('options')
                 : Templates.fromFragment(slots.default);
             this.#spinner = fragment.querySelector('ful-spinner');
-            this.#empty = fragment.querySelector('p[data-ref=empty]');
+            this.#empty = fragment.querySelector('[data-ref=empty]');
             this.#menu = fragment.querySelector('menu');
             //the listbox is named so a combobox can point aria-controls and
             //aria-activedescendant at it: a reference to an unnamed element resolves
@@ -8850,7 +9109,7 @@ var fml = (function (exports) {
             });
             //each pair carries its own anchor: two selects on a page must not share one
             const group = fragment.querySelector('ful-control-group');
-            wireAnchoredPopover(group, this.#ddmenu, { prefix: 'ful-select', stretch: true });
+            Anchors.wire(group, this.#ddmenu, { prefix: 'ful-select', stretch: true });
             [this.#dload, this.#abortdload] = Timing.throttle(400, () => this.#open());
             this.#wireChrome();
             this.#wireChips();
@@ -8872,6 +9131,14 @@ var fml = (function (exports) {
                 if (!this._interactive()) {
                     return;
                 }
+                //a click on another control inside the select is that control's, not
+                //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');
+                if (elsewhere && elsewhere !== this.#input) {
+                    return;
+                }
                 if (this.#ddmenu.shown) {
                     this.#close();
                     return;
@@ -8937,7 +9204,7 @@ var fml = (function (exports) {
                     return;
                 }
                 this.#abortdload();
-                this.#close();
+                this.#close(true);
             });
             this.#input.addEventListener('keydown', (e) => {
                 if (!this._interactive()) {
@@ -8970,7 +9237,6 @@ var fml = (function (exports) {
                 this.#editing = false;
                 this.#values.set(this.#coerceKey(e.detail.entry.key), e.detail.entry);
                 this.#changed();
-                this.#syncBadges();
                 this.#input.focus();
                 this.#ddmenu.hide();
                 if (!this.#multiple) {
@@ -9027,7 +9293,6 @@ var fml = (function (exports) {
             }
             this.#values.delete(key);
             this.#changed();
-            this.#syncBadges();
         }
         #chipKeydown(e, badge) {
             switch (e.code) {
@@ -9123,7 +9388,7 @@ var fml = (function (exports) {
                 }
                 case 'Tab': {
                     this.#abortdload();
-                    this.#close();
+                    this.#close(true);
                     break;
                 }
             }
@@ -9139,12 +9404,25 @@ var fml = (function (exports) {
                 }
                 return;
             }
-            this.#browse();
-            this.#ddmenu.moveOrShow(forward, () => this.#loader.load(this.#input.value), [...this.#values.keys()]);
+            this.#ddmenu.moveOrShow(forward, () => this.#loader.load(this.#query()), [...this.#values.keys()]);
         }
-        #close() {
+        /**
+         * @param commit whether the user is leaving the field, which only a blur or
+         * a Tab is: Escape cancels, and closing the list or a claim landing leaves
+         * the edit in progress
+         */
+        #close(commit = false) {
             this.#ddmenu.hide();
+            //emptying the box and leaving is a clear: redisplaying the label would
+            //discard the edit without a word. A multiple select keeps its box empty
+            //by design, so only a single one can mean it
+            const cleared =
+                commit && this.#editing && !this.#multiple && this.#input.value === '' && this.#values.size !== 0;
             this.#editing = false;
+            if (cleared) {
+                this.#values.clear();
+                this.#changed();
+            }
             this.#display();
         }
         /**
@@ -9153,14 +9431,15 @@ var fml = (function (exports) {
          * highlighted.
          */
         #open() {
-            this.#browse();
-            return this.#ddmenu.show(() => this.#loader.load(this.#input.value), [...this.#values.keys()]);
+            return this.#ddmenu.show(() => this.#loader.load(this.#query()), [...this.#values.keys()]);
         }
-        #browse() {
-            if (this.#editing) {
-                return;
-            }
-            this.#input.value = '';
+        /**
+         * Browsing is the whole vocabulary, not the label already chosen, and the
+         * label stays on screen while it happens: a select showing nothing reads as
+         * an empty one.
+         */
+        #query() {
+            return this.#editing ? this.#input.value : '';
         }
         #display() {
             const entry = this.#values.values().next().value;
@@ -9171,6 +9450,9 @@ var fml = (function (exports) {
             return [...this.#values.values()];
         }
         #changed() {
+            //settled before the event: a listener reading the control during it has to
+            //see the selection that caused it
+            this.#syncBadges();
             //the detail carries the keys the value property answers with, as every
             //other field's does, and the labeled selection beside them
             this._notifyChange({ entry: this.entry });
@@ -9440,16 +9722,10 @@ var fml = (function (exports) {
                 evt.stopPropagation();
                 this._notifyChange();
             });
+            //the base points the label at the input with for/id, so the click toggles
+            //the way it does in a plain form: the input's own change listener above
+            //carries the notification, and readonly is refused by the freeze below
             const label = fragment.querySelector('label');
-            //the label neither wraps the input nor targets it, so the toggle is the
-            //field's; the base adds the focus
-            label.addEventListener('click', () => {
-                if (!this._interactive()) {
-                    return;
-                }
-                this.value = !this.value;
-                this._notifyChange();
-            });
             //a checkbox has no editable text to preserve, so readonly freezes the
             //whole choice, label click included: the container is the frozen piece
             return {
@@ -9823,6 +10099,7 @@ var fml = (function (exports) {
         static slots = true;
         static config = {
             searchIcon: 'search',
+            emptyIcon: 'inbox',
         };
         static template = `
         <ful-form data-tpl-if="slots.filters">
@@ -9836,10 +10113,21 @@ var fml = (function (exports) {
                 <tbody data-ref="initial">
                     <tr>
                         <td data-tpl-colspan="schema.length">
-                            <div>
-                                <p data-tpl-if="config.searchIcon"><ful-icon data-tpl-name="config.searchIcon" aria-hidden="true"></ful-icon></p>
+                            <ful-empty>
+                                <ful-icon data-tpl-if="config.searchIcon" data-tpl-name="config.searchIcon" aria-hidden="true"></ful-icon>
                                 {{ #l10n:t('table.initial') }}
-                            </div>
+                            </ful-empty>
+                        </td>
+                    </tr>
+                </tbody>
+                <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">
+                                <ful-icon data-tpl-if="config.emptyIcon" data-tpl-name="config.emptyIcon" aria-hidden="true"></ful-icon>
+                                {{ #l10n:t('table.no-data') }}
+                            </ful-empty>
                         </td>
                     </tr>
                 </tbody>
@@ -9869,11 +10157,6 @@ var fml = (function (exports) {
     `;
         static templates = {
             row: `
-            <tr data-tpl-if="pageResponse.data.length == 0">
-                <td data-tpl-colspan="schema.length">
-                    {{ #l10n:t('table.no-data') }}
-                </td>
-            </tr>
             {{{{ schema.rowsTemplate.withOverlay({'rows': pageResponse.data}).render() }}}}
         `,
         };
@@ -9882,6 +10165,7 @@ var fml = (function (exports) {
         #body;
         #loading;
         #noAutoload;
+        #empty;
         #feedback;
         #paginator;
         #sorters;
@@ -9932,6 +10216,7 @@ var fml = (function (exports) {
             this.#body = table.querySelector(':scope > tbody');
             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.#feedback = table.querySelector(':scope > tbody[data-ref=feedback]');
             this.#paginator = Nodes.queryChildren(fragment, 'ful-pagination');
             this.replaceChildren(fragment);
@@ -10013,10 +10298,16 @@ var fml = (function (exports) {
             //started is stale, and neither renders nor updates the request a later
             //reload replays, whichever order the responses arrive in
             const claim = this.#loads.take();
-            this.#body.replaceChildren();
-            this.#loading.removeAttribute('hidden');
+            //the rows stay while the table revalidates. Emptying the body and raising
+            //the spinner row in its place collapsed the table to one tall row and
+            //expanded it again on every sort, page and reload: two layout jumps for
+            //what is the same table with newer rows in it. The spinner is for the load
+            //with nothing to show yet, the first one and the one after a failure; the
+            //rest announce themselves through aria-busy, which the stylesheet reads
+            this.#loading.toggleAttribute('hidden', this.#body.childElementCount > 0);
             this.#feedback.setAttribute('hidden', '');
             this.#noAutoload.setAttribute('hidden', '');
+            this.#empty.setAttribute('hidden', '');
             this.setAttribute('aria-busy', 'true');
             try {
                 const pageResponse = await this.#loader.load(pageRequest, sortRequest, filterRequest);
@@ -10025,6 +10316,16 @@ var fml = (function (exports) {
                 }
                 this.#latestRequest = { pageRequest, sortRequest, filterRequest };
                 this.#update(pageRequest, sortRequest, filterRequest, pageResponse);
+                //settled before the event: a listener counting what loaded has to
+                //see the table as it now is
+                this.removeAttribute('aria-busy');
+                this.dispatchEvent(
+                    new CustomEvent('load:success', {
+                        bubbles: true,
+                        cancelable: false,
+                        detail: { pageRequest, sortRequest, filterRequest, response: pageResponse },
+                    }),
+                );
             } catch (/** @type any */ error) {
                 if (claim.stale) {
                     //the newer load owns the table and its outcome: a superseded
@@ -10032,17 +10333,24 @@ var fml = (function (exports) {
                     return;
                 }
                 this.#loading.setAttribute('hidden', '');
+                //the rows the failed load was replacing go with it: what the table
+                //holds is no longer what the request asked for, and leaving them
+                //under the error would say the opposite
+                this.#body.replaceChildren();
                 this.#feedback.removeAttribute('hidden');
                 this.#feedback.querySelector('[data-ref=feedback-error]').textContent = Failure.problemsText(
                     error,
                     `${error}`,
                 );
+                this.removeAttribute('aria-busy');
+                this.dispatchEvent(
+                    new CustomEvent('load:failure', {
+                        bubbles: true,
+                        cancelable: false,
+                        detail: { pageRequest, sortRequest, filterRequest, exception: error },
+                    }),
+                );
                 throw error;
-            } finally {
-                //a superseded load owns nothing, the newer one's busy state included
-                if (!claim.stale) {
-                    this.removeAttribute('aria-busy');
-                }
             }
         }
         /** Hands the loader to the callback, for runtime reconfigurations. */
@@ -10079,6 +10387,7 @@ var fml = (function (exports) {
                     })
                     .render(),
             );
+            this.#empty.toggleAttribute('hidden', pageResponse.data.length !== 0);
             //one move, one repaint: the page and the count are the same state
             this.#paginator.update({ current: pageRequest.page, total: pages });
         }
@@ -10178,6 +10487,20 @@ var fml = (function (exports) {
             //menu is where the localized words live
             this.#button.textContent = this.#display(choice);
             Attributes.set(this.#button, 'aria-label', this.#labelFor(choice));
+            this.#mark();
+        }
+        /**
+         * Marks the item the button currently holds, which is what a menu of one
+         * choice among several owes the reader: the glyph on the button says which
+         * one it is only to somebody who already knows the glyphs. The items are
+         * `menuitemradio`, so the state is `aria-checked` rather than the
+         * `aria-selected` a listbox would use, and the stylesheet draws it off that.
+         */
+        #mark() {
+            const current = this.value;
+            for (const item of this.#items()) {
+                item.setAttribute('aria-checked', String(item.getAttribute('value') === current));
+            }
         }
         /** The host's disabled claim, composed with the pin: lifting one cannot lift the other. */
         set claimed(claimed) {
@@ -10190,7 +10513,9 @@ var fml = (function (exports) {
                     const li = document.createElement('li');
                     li.setAttribute('role', 'none');
                     const a = document.createElement('a');
-                    a.setAttribute('role', 'menuitem');
+                    //one choice among several, which is what a radio item is: the
+                    //state belongs on the item, not on the button alone
+                    a.setAttribute('role', 'menuitemradio');
                     a.setAttribute('tabindex', '-1');
                     a.setAttribute('value', choice);
                     const word = this.#labelFor(choice);
@@ -10208,6 +10533,7 @@ var fml = (function (exports) {
                     return li;
                 }),
             );
+            this.#mark();
         }
         #sync() {
             const pinned = this.pinned;
@@ -10228,7 +10554,7 @@ var fml = (function (exports) {
         #wire() {
             const button = this.#button;
             const menu = this.#menu;
-            wireAnchoredPopover(button, menu, { prefix: 'ful-filter-menu', invoke: true, expanded: true });
+            Anchors.wire(button, menu, { prefix: 'ful-filter-menu', invoke: true, expanded: true });
             menu.addEventListener('toggle', (/** @type any */ evt) => {
                 if (evt.newState !== 'open') {
                     //give the invoker back the focus the menu had borrowed, without
@@ -10315,6 +10641,19 @@ var fml = (function (exports) {
     const sensitivityLabel = (sensitivity) => t(`filters.sensitivity.${sensitivity}`);
     const booleanValueLabel = (token) => t(token === '' ? 'filters.boolean.any' : `filters.boolean.${token}`);
 
+    /**
+     * The operands are the words the reader chose, not the keys the wire carries.
+     * @typedef {{ label: string|null, operator: string|null, operands: string[] }} FilterCriterion
+     */
+
+    const labelTextOf = (filter) => filter.querySelector(':scope > label')?.textContent.trim() || null;
+
+    /** @returns {FilterCriterion|null} */
+    const asCriterion = (label, operator, operands) => {
+        const shown = operands.filter((o) => o !== null && o !== undefined && `${o}` !== '');
+        return shown.length === 0 ? null : { label, operator, operands: shown.map((o) => `${o}`) };
+    };
+
     /**
      * The shared shape of every operator-and-operands filter: an operator menu, one
      * or two operands of the type the subclass declares, and a tuple that mirrors
@@ -10454,6 +10793,18 @@ var fml = (function (exports) {
         _syncBetween() {
             this._value2.toggleAttribute('hidden', this._operator.value !== 'BETWEEN');
         }
+        /**
+         * The operands as shown rather than as serialized: a date filter describes
+         * what is in its control, not the iso string it sends.
+         * @returns {FilterCriterion|null}
+         */
+        get criterion() {
+            const operands =
+                this._operator.value === 'BETWEEN'
+                    ? [this._value1.value, this._value2.value]
+                    : [this._value1.value];
+            return asCriterion(labelTextOf(this), this._operator.value, operands);
+        }
         get disabled() {
             return super.disabled;
         }
@@ -10689,6 +11040,13 @@ var fml = (function (exports) {
             this._operator.value = this._operator.pinned ? this._operator.allowed[0] : v[0];
             this._value.value = v[1] ?? '';
         }
+        /** @returns {FilterCriterion|null} */
+        get criterion() {
+            const token = this._value.value;
+            return asCriterion(labelTextOf(this), this._operator.value, [
+                token === '' ? '' : booleanValueLabel(token),
+            ]);
+        }
         get disabled() {
             return super.disabled;
         }
@@ -10701,6 +11059,37 @@ var fml = (function (exports) {
         }
     }
 
+    /**
+     * Set membership over a select's vocabulary, answering for both of data-jpa's
+     * set annotations: InEnum and InList take the same bare array of values and no
+     * operator, differing only in what the server converts them to.
+     */
+    class InFilter extends Select {
+        async upgrade() {
+            //the snapshot is taken inside super.upgrade(), so an attribute this
+            //element does not let an author turn off has to be written before it
+            this.toggleAttribute('multiple', true);
+            await super.upgrade();
+        }
+        get value() {
+            const keys = super.value;
+            //an empty set is no filter: the table drops a falsy value, where an
+            //empty array would travel and match nothing
+            return keys.length === 0 ? null : keys;
+        }
+        set value(v) {
+            super.value = v ?? [];
+        }
+        /** @returns {FilterCriterion|null} */
+        get criterion() {
+            return asCriterion(
+                labelTextOf(this),
+                null,
+                (super.entry ?? []).map((e) => e.label),
+            );
+        }
+    }
+
     /**
      * The async section machinery shared by ful-tabs, ful-wizard, ful-dialog and
      * ful-drawer: every activation of a section fires the section:requested family
@@ -10809,64 +11198,137 @@ var fml = (function (exports) {
         });
     };
 
-    /** An info icon button toggling a popover with a short explanation. */
+    /**
+     * An info icon button toggling a popover with a short explanation.
+     *
+     * The marker is the page's `config.icon`, and the `icon` attribute names a
+     * `ful-icon` for the tooltip that means something other than plain information:
+     * a caveat, a warning, a setting. A name the library does not paint is the
+     * page's own, declared as `ful-icon[name='...'] { mask-image: ... }`.
+     *
+     * `describes` is for the tooltip standing in a field: the note becomes part of
+     * the accessible description of that field's control, so it is announced on
+     * reaching the field rather than only on opening the marker, and the marker
+     * leaves the tab order, so a form of hinted fields costs no extra keystrokes to
+     * walk. The marker stays clickable, and stays a tab stop wherever the note was
+     * not taken, a tooltip claiming `describes` outside a field among them: the
+     * stop only goes where something else delivers the content.
+     */
     class Tooltip extends ParsedElement {
         static slots = true;
-        static attributes = ['placement'];
+        static attributes = ['placement', 'icon', 'describes:presence'];
         static config = {
             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="config.icon" aria-hidden="true"></ful-icon></button>
+        <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>
         <ful-note popover data-ref="content">{{{{ slots.default }}}}</ful-note>
     `;
         render({ slots }) {
-            const fragment = this.template().withOverlay({ slots }).render();
+            const fragment = this.template().withOverlay({ slots, icon: this.declared('icon') }).render();
             const trigger = fragment.querySelector('[data-ref=trigger]');
             const content = fragment.querySelector('[data-ref=content]');
             //placed here rather than by the anchor css: the note draws a callout that
             //has to point at the trigger wherever the viewport left room for the note,
             //which is a measurement the stylesheet cannot make for a pseudo-element
-            wireAnchoredPopover(trigger, content, { prefix: 'ful-tooltip', invoke: true, expanded: true, handPlace: true });
-            const placement = this.declared('placement');
-            if (placement) {
-                content.setAttribute('placement', placement);
-            }
+            Anchors.wire(trigger, content, { prefix: 'ful-tooltip', invoke: true, expanded: true, handPlace: true });
+            //above the marker by default: a note opening downwards covers the control
+            //the marker explains, the marker riding the field's label
+            content.setAttribute('placement', this.declared('placement') ?? 'top');
             this.replaceChildren(fragment);
+            if (this.declared('describes')) {
+                Tooltip.#describe(this, trigger, content);
+            }
+        }
+        /**
+         * Offers the note to the field the tooltip stands in, and takes the trigger
+         * out of the tab order only where the offer was accepted: a note nothing
+         * carries is reachable by the keyboard through the marker alone, so
+         * dropping the stop there would leave it reachable by nothing at all.
+         *
+         * The offer goes through the description protocol rather than naming a
+         * field, the library's own arrow running from the forms to the disclosures.
+         */
+        static #describe(tooltip, trigger, content) {
+            if (!describable(tooltip)?.describedBy(content)) {
+                console.warn('a ful-tooltip declares describes but stands in nothing that takes a description', tooltip);
+                return;
+            }
+            trigger.tabIndex = -1;
         }
     }
 
-    /** A modal dialog on the native platform, open()/ask() resolving with the closer's data-result. */
+    /**
+     * A modal dialog on the native platform, open()/ask() resolving with the
+     * closer's data-result.
+     *
+     * The header carries a close button, as the drawer's does: Escape dismisses a
+     * modal on its own, but nothing says so, and a dialog whose only exit is a key
+     * you have to know about leaves a pointer with nowhere to go. It answers the way
+     * Escape does, with null.
+     *
+     * `requires-answer` is for the dialog that must be answered: the close button is not
+     * rendered and Escape is refused, so the only way out is a button that carries a
+     * result. It has to be both, a close button withheld while Escape still worked
+     * being decoration rather than a rule.
+     *
+     * The chrome is reachable by class as well as by tag, so a plain `<dialog
+     * class="ful-dialog">` written by a page gets the same look whatever its
+     * structure: the tag form matches a direct child, and `ful-dialog-header`,
+     * `ful-dialog-body` and `ful-dialog-footer` match at any depth, which is what a
+     * dialog whose content is wrapped in a form needs.
+     */
+    /**
+     * How a dialog ended: `dismissed` tells a cancel from an answer, `result` carries
+     * the `data-result` of the button that closed it and `response` what a submit
+     * answered with, the one that did not happen being null.
+     * @typedef {{ dismissed: boolean, result: string|null, response: any }} DialogOutcome
+     */
+
     class Dialog extends ParsedElement {
-        static attributes = ['header'];
+        static attributes = ['header', 'requires-answer:presence', 'close-on-submit:presence'];
         static slots = true;
         static template = `
         <dialog data-ref="dialog" class="ful-dialog">
-            <header data-tpl-if="header"><h2>{{ header }}</h2></header>
-            <div data-ref="body">{{{{ slots.default }}}}</div>
-            <footer>
-                <button type="button" data-ref="acknowledge" data-result="acknowledged" data-tpl-if="!slots.buttons" data-tpl-aria-label="#l10n:t('dialog.acknowledge')">{{ #l10n:t('dialog.acknowledge') }}</button>
+            <header data-tpl-if="header || slots.header || !requiresAnswer" class="ful-dialog-header">
+                {{{{ slots.header }}}}
+                <h2 data-tpl-if="header">{{ header }}</h2>
+                <button data-tpl-if="!requiresAnswer" type="button" data-ref="close" data-tpl-aria-label="#l10n:t('dialog.close')"><ful-icon name="x-lg" aria-hidden="true"></ful-icon></button>
+            </header>
+            <section data-ref="loading" hidden><ful-spinner class="centered" role="status"><span class="ful-sr-only">{{ #l10n:t('spinner.loading') }}</span></ful-spinner></section>
+            <section data-ref="error" role="alert" hidden></section>
+            <div data-ref="body" class="ful-dialog-body">{{{{ slots.default }}}}</div>
+            <footer class="ful-dialog-footer">
+                <button type="button" data-ref="acknowledge" data-result="acknowledged" data-tpl-if="!slots.buttons && !closeOnSubmit" data-tpl-aria-label="#l10n:t('dialog.acknowledge')">{{ #l10n:t('dialog.acknowledge') }}</button>
                 {{{{ slots.buttons }}}}
             </footer>
         </dialog>
     `;
         #dialog;
         #body;
+        #loading;
+        #error;
         #requests = new SectionRequests();
+        #updates = new Claims();
         #resolvers = [];
+        //the answer a submit closed the dialog with, which the return value cannot
+        //carry: it is a string, and a response is whatever the server sent
+        /** @type {DialogOutcome|null} */
+        #answer = null;
         render({ slots }) {
+            const requiresAnswer = this.declared('requires-answer');
+            const closeOnSubmit = this.declared('close-on-submit');
             const fragment = this.template()
-                .withOverlay({ slots, header: this.declared('header') ?? '' })
+                .withOverlay({ slots, header: this.declared('header') ?? '', requiresAnswer, closeOnSubmit })
                 .render();
             this.#dialog = fragment.querySelector('[data-ref=dialog]');
             this.#body = fragment.querySelector('[data-ref=body]');
+            this.#loading = fragment.querySelector('[data-ref=loading]');
+            this.#error = fragment.querySelector('[data-ref=error]');
             this.#dialog.addEventListener('close', () => {
-                this.dispatchEvent(
-                    new CustomEvent('close', {
-                        detail: { result: this.#dialog.returnValue === '' ? null : this.#dialog.returnValue },
-                    }),
-                );
-                this.#settle();
+                const outcome = this.#outcome();
+                this.dispatchEvent(new CustomEvent('close', { detail: outcome }));
+                this.#settle(outcome);
             });
             this.#dialog.addEventListener('click', (/** @type any */ e) => {
                 const result = e.target.closest('button[data-result]')?.dataset.result;
@@ -10874,42 +11336,128 @@ var fml = (function (exports) {
                     this.#dialog.close(result);
                 }
             });
+            //dismissal, not an answer: the waiters are settled with a dismissal, as
+            //Escape does. Optional because a subclass overriding the template owns
+            //what it renders
+            fragment
+                .querySelector('[data-ref=close]')
+                ?.addEventListener('click', () => this.#dialog.close(''));
+            if (closeOnSubmit) {
+                //delegated on the body rather than bound to the form, so a body
+                //delivered later by update() is covered by the same listener. The
+                //form must be the body's own: a ful-table wraps its filters in a
+                //ful-form of its own, and a search in a table the dialog holds is
+                //not the dialog being answered
+                this.#body.addEventListener('submit:success', (/** @type any */ e) => {
+                    if (e.target !== Nodes.queryChildren(this.#body, 'ful-form')) {
+                        return;
+                    }
+                    this.#answer = { dismissed: false, result: null, response: e.detail.response };
+                    this.#dialog.close('submitted');
+                });
+            }
+            if (requiresAnswer) {
+                //the platform's own dismissal, refused where the dialog must be
+                //answered: cancel fires for Escape and for a close request the
+                //browser makes on its own, and preventing it leaves the dialog open
+                this.#dialog.addEventListener('cancel', (/** @type any */ e) => e.preventDefault());
+            }
             this.replaceChildren(fragment);
             wireTargets();
         }
-        //answers every waiter with the dialog's own answer: null while still open
-        //or closed without a result, which is also the unanswered answer a dialog
-        //leaving the document owes its waiters instead of hanging them
-        #settle() {
+        /**
+         * How the dialog ended, in one shape for every way it can end: `dismissed`
+         * alone tells a cancel from an answer, so a submit answering with no body at
+         * all (a 204) is still an answer, where a bare `null` could not say which it
+         * was. `result` carries the `data-result` of the button that closed it and
+         * `response` what a submit answered with; the one that did not happen is null.
+         */
+        #outcome() {
+            if (this.#answer) {
+                return this.#answer;
+            }
+            //a render that threw adopted no dialog, and a removal still owes its
+            //waiters an answer: reading through it would raise a second, unrelated
+            //failure over the one already reported
+            const result = this.#dialog?.returnValue ?? '';
+            return result === ''
+                ? { dismissed: true, result: null, response: null }
+                : { dismissed: false, result, response: null };
+        }
+        //answers every waiter with the dialog's own answer: a dismissal while still
+        //open or closed without a result, which is also the unanswered answer a
+        //dialog leaving the document owes its waiters instead of hanging them
+        #settle(outcome) {
             const resolvers = this.#resolvers;
             this.#resolvers = [];
             for (const resolve of resolvers) {
-                resolve(this.#dialog.returnValue === '' ? null : this.#dialog.returnValue);
+                resolve(outcome);
             }
         }
         disconnectedCallback() {
-            this.#settle();
+            this.#settle(this.#outcome());
         }
         open() {
             return this.ask();
         }
         ask() {
-            if (!this.#dialog.open) {
-                this.#dialog.returnValue = '';
-                this.#dialog.showModal();
+            if (this.#show()) {
+                this.#restChrome();
                 this.#request();
             }
             return new Promise((resolve) => {
                 this.#resolvers.push(resolve);
             });
         }
+        /**
+         * Opens the dialog and waits for the callback, as `ful-drawer`'s does: a
+         * resolved value paints the body (which is returned), a rejection paints the
+         * problems and travels to the caller, and an update superseded by a newer one
+         * paints nothing. The title is the `header` attribute, configuration like the
+         * rest of the dialog's chrome, so what update() owns is the body alone.
+         */
+        async update(cb) {
+            //the claim detaches any update still in flight: its outcome belongs to
+            //an abandoned opening and must neither be painted nor own the dialog
+            const claim = this.#updates.take();
+            this.#body.replaceChildren();
+            this.#restChrome();
+            this.#loading?.removeAttribute('hidden');
+            this.#body.setAttribute('hidden', '');
+            //update owns its own open-answer-deliver cycle, so it shows the dialog
+            //without going through ask(): a user reopen during the wait is a real
+            //open and goes through ask()
+            this.#show();
+            try {
+                const delivered = await cb();
+                if (claim.stale) {
+                    return this.#body;
+                }
+                this.#body.replaceChildren(delivered);
+                this.#loading?.setAttribute('hidden', '');
+                this.#body.removeAttribute('hidden');
+                return this.#body;
+            } catch (/** @type any */ e) {
+                if (!claim.stale) {
+                    //revealed before it is filled, so the live region announces the
+                    //change rather than being revealed already holding it
+                    this.#error?.removeAttribute('hidden');
+                    if (this.#error) {
+                        this.#error.textContent = Failure.problemsText(e);
+                    }
+                    this.#loading?.setAttribute('hidden', '');
+                    this.#body.setAttribute('hidden', '');
+                }
+                throw e;
+            }
+        }
         #request() {
             this.#requests.request(this, this.#body, null, null)?.catch(() => undefined);
         }
         /**
          * Re-fires section:requested on the body, open or closed: the explicit
          * request for a body that wants refreshing. A failed refresh paints its
-         * problems, nothing rejects: there is no caller to reject towards.
+         * problems, nothing rejects: update() stays the rejecting call.
          */
         refresh() {
             return this.#requests.request(this, this.#body, null, null)?.then(undefined, () => undefined);
@@ -10917,15 +11465,43 @@ var fml = (function (exports) {
         close(result) {
             this.#dialog.close(result ?? '');
         }
+        /** Shows the modal, answering whether this call is the one that opened it. */
+        #show() {
+            if (this.#dialog.open) {
+                return false;
+            }
+            //an opening owes nothing to the one before it: the platform keeps
+            //returnValue across a close with no result, and the answer a submit
+            //left is just as stale
+            this.#dialog.returnValue = '';
+            this.#answer = null;
+            this.#dialog.showModal();
+            return true;
+        }
+        #restChrome() {
+            this.#error?.replaceChildren();
+            this.#error?.setAttribute('hidden', '');
+            this.#loading?.setAttribute('hidden', '');
+            this.#body?.removeAttribute('hidden');
+        }
     }
 
-    /** A side panel drawer on the native dialog platform, update() owning its open-deliver cycle. */
+    /**
+     * A side panel drawer on the native dialog platform, update() owning its
+     * open-deliver cycle.
+     *
+     * The `header` slot is content beside the title, before it: an icon, a badge, a
+     * status. It sits outside the heading rather than in it because `update()` sets
+     * the title through `textContent`, which would take anything nested there with
+     * it.
+     */
     class Drawer extends ParsedElement {
-        static attributes = ['title', 'placement'];
+        static attributes = ['title', 'placement', 'close-on-submit:presence'];
         static slots = true;
         static template = `
         <dialog data-ref="dialog" class="ful-drawer">
             <header>
+                {{{{ slots.header }}}}
                 <h2 data-ref="title">{{ title }}</h2>
                 <button type="button" data-ref="close" data-tpl-aria-label="#l10n:t('drawer.close')"><ful-icon name="x-lg" aria-hidden="true"></ful-icon></button>
             </header>
@@ -10941,6 +11517,10 @@ var fml = (function (exports) {
         #content;
         #requests = new SectionRequests();
         #updates = new Claims();
+        //what a submit closed the drawer with, told from a close of any other kind:
+        //a save answering with no body at all is still a save
+        /** @type {{ dismissed: boolean, response: any }|null} */
+        #answer = null;
         render({ slots }) {
             const fragment = this.template()
                 .withOverlay({ slots, title: this.declared('title') ?? '' })
@@ -10956,8 +11536,25 @@ var fml = (function (exports) {
             }
             fragment.querySelector('[data-ref=close]').addEventListener('click', () => this.close());
             this.#dialog.addEventListener('close', () => {
-                this.dispatchEvent(new CustomEvent('close'));
+                this.dispatchEvent(
+                    new CustomEvent('close', { detail: this.#answer ?? { dismissed: true, response: null } }),
+                );
             });
+            if (this.declared('close-on-submit')) {
+                //delegated on the content section rather than bound to the form: a
+                //drawer's form usually arrives with an update() rather than with the
+                //page, and the section outlives every delivery. The form must be the
+                //content's own, a ful-table wrapping its filters in a ful-form of its
+                //own and a search in a table the drawer holds not being the drawer
+                //finishing
+                this.#content.addEventListener('submit:success', (/** @type any */ e) => {
+                    if (e.target !== Nodes.queryChildren(this.#content, 'ful-form')) {
+                        return;
+                    }
+                    this.#answer = { dismissed: false, response: e.detail.response };
+                    this.close();
+                });
+            }
             this.replaceChildren(fragment);
             wireTargets();
         }
@@ -11030,6 +11627,9 @@ var fml = (function (exports) {
             if (this.#dialog.open) {
                 return false;
             }
+            //an opening owes nothing to the one before it: the answer a submit left
+            //belongs to the drawer that closed on it
+            this.#answer = null;
             this.#dialog.showModal();
             return true;
         }
@@ -11453,6 +12053,7 @@ var fml = (function (exports) {
         'filters.boolean.false': 'No',
         'info.tooltip': 'More information',
         'dialog.acknowledge': 'Got it',
+        'dialog.close': 'Close',
         'drawer.close': 'Close',
         'spinner.loading': 'Loading…',
         'toast.region': 'Notifications',
@@ -11494,6 +12095,7 @@ var fml = (function (exports) {
         'filters.boolean.false': 'No',
         'info.tooltip': 'Maggiori informazioni',
         'dialog.acknowledge': 'Ho capito',
+        'dialog.close': 'Chiudi',
         'drawer.close': 'Chiudi',
         'spinner.loading': 'Caricamento…',
         'toast.region': 'Notifiche',
@@ -11535,6 +12137,7 @@ var fml = (function (exports) {
         'filters.boolean.false': 'No',
         'info.tooltip': 'Más información',
         'dialog.acknowledge': 'Entendido',
+        'dialog.close': 'Cerrar',
         'drawer.close': 'Cerrar',
         'spinner.loading': 'Cargando…',
         'toast.region': 'Notificaciones',
@@ -11579,6 +12182,7 @@ var fml = (function (exports) {
         'filters.boolean.false': 'Non',
         'info.tooltip': 'Plus d’informations',
         'dialog.acknowledge': 'J’ai compris',
+        'dialog.close': 'Fermer',
         'drawer.close': 'Fermer',
         'spinner.loading': 'Chargement…',
         'toast.region': 'Notifications',
@@ -11649,6 +12253,7 @@ var fml = (function (exports) {
                 .defineElement('ful-filter-number', NumberFilter)
                 .defineElement('ful-filter-boolean', BooleanFilter)
                 .defineElement('ful-filter-text', TextFilter)
+                .defineElement('ful-filter-in', InFilter)
                 .defineElement('ful-select', Select)
                 .defineElement('ful-dropdown', Dropdown)
                 .defineComponent('loaders:select', SelectLoader)
@@ -11668,6 +12273,7 @@ var fml = (function (exports) {
     var ful = /*#__PURE__*/Object.freeze({
         __proto__: null,
         Accordion: Accordion,
+        Anchors: Anchors,
         AsyncEvents: AsyncEvents,
         Bindings: Bindings,
         BooleanFilter: BooleanFilter,
@@ -11680,6 +12286,7 @@ var fml = (function (exports) {
         Field: Field,
         Form: Form,
         FormLoader: FormLoader,
+        InFilter: InFilter,
         Input: Input,
         InputFile: InputFile,
         InputInstant: InputInstant,
@@ -11708,7 +12315,8 @@ var fml = (function (exports) {
         Tooltip: Tooltip,
         VersionedLocalStorage: VersionedLocalStorage,
         VersionedSessionStorage: VersionedSessionStorage,
-        Wizard: Wizard
+        Wizard: Wizard,
+        describable: describable
     });
 
     if (typeof window !== 'undefined') {
@@ -11720,6 +12328,7 @@ var fml = (function (exports) {
     }
 
     exports.Accordion = Accordion;
+    exports.Anchors = Anchors;
     exports.AsyncEvents = AsyncEvents;
     exports.Attributes = Attributes;
     exports.Base64 = Base64;
@@ -11746,6 +12355,7 @@ var fml = (function (exports) {
     exports.HttpInterceptorChain = HttpInterceptorChain;
     exports.HttpMultipartRequestCustomizer = HttpMultipartRequestCustomizer;
     exports.HttpRequestBuilder = HttpRequestBuilder;
+    exports.InFilter = InFilter;
     exports.Input = Input;
     exports.InputFile = InputFile;
     exports.InputInstant = InputInstant;
@@ -11785,6 +12395,7 @@ var fml = (function (exports) {
     exports.VersionedLocalStorage = VersionedLocalStorage;
     exports.VersionedSessionStorage = VersionedSessionStorage;
     exports.Wizard = Wizard;
+    exports.describable = describable;
     exports.registry = registry;
 
     return exports;