@optionfactory/fml 9.0.0-rc27 → 9.0.0-rc29

package/dist/ful.iife.js

@@ -691,7 +691,9 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          * alone and a composite field named for a prefix catches the problems of its
          * subtree. Each control of that name gets `setCustomValidity(reason, rest)`,
          * `rest` being the remainder of the path (`''` on an exact match) that a
-         * composite can use to route the problem to an inner control.
+         * composite can use to route the problem to an inner control. Several
+         * problems reaching one control with the same `rest` are joined one per
+         * line into a single call.
          *
          * A control counts only when it can show a problem, through a
          * `setCustomValidity` of its own: a form-associated element that has none is
@@ -706,7 +708,8 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          * Each `ful-field-error` of the form gets `aria-live="off"` when
          * `scrollOnError` is set, since focusing the field announces its error, and
          * `aria-live="polite"` otherwise. With `scrollOnError` and at least one
-         * problem, the topmost `:invalid` control is focused.
+         * problem, the topmost `:invalid` control is focused; a `<fieldset>`
+         * matching `:invalid` for the controls it holds is not a candidate.
          *
          * A banner or `ful-field-error` belongs to the nearest enclosing form, so
          * those of a nested form are left alone.
@@ -731,6 +734,8 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 });
             }
             const unmatched = [];
+            /** @type {Map<any, Map<string, string[]>>} */
+            const pins = new Map();
             fieldErrors.forEach((e) => {
                 const name = /** @type {string} */ (e.context).replace(/\[/g, '.').replace(/\]\./g, '.').replace(/\]/g, '');
                 const parts = name.split('.');
@@ -742,12 +747,19 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                     }
                     const context = parts.slice(i).join('.');
                     targets.forEach((input) => {
-                        input.setCustomValidity?.(e.reason, context);
+                        const contexts = pins.get(input) ?? new Map();
+                        contexts.set(context, [...(contexts.get(context) ?? []), e.reason]);
+                        pins.set(input, contexts);
                     });
                     return;
                 }
                 unmatched.push(e);
             });
+            for (const [input, contexts] of pins) {
+                for (const [context, reasons] of contexts) {
+                    input.setCustomValidity(reasons.join('\n'), context);
+                }
+            }
             const bannered = [...globalErrors, ...unmatched];
             form.querySelectorAll('ful-errors').forEach((el) => {
                 if (!ofForm(el)) {
@@ -767,7 +779,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 return;
             }
             /** @type {HTMLElement[]} */ (Array.from(form.elements))
-                .filter((el) => el.matches(':invalid'))
+                .filter((el) => el.localName !== 'fieldset' && el.matches(':invalid'))
                 .sort((a, b) => a.getBoundingClientRect().y - b.getBoundingClientRect().y)[0]
                 ?.focus();
         }
@@ -786,9 +798,12 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
      *
      * The claim setters, the validity protocol and the aria wiring all act on the
      * pieces, so a field with no native control returns a focusable piece of its
-     * own chrome as the control. The claim getters and `focus()` are the only
-     * members that tolerate a not yet rendered element; the other members need the
-     * pieces and so work only after the render.
+     * own chrome as the control. The claims, `value` and `focus()` are the
+     * members that tolerate a not yet rendered element: before the render the
+     * `value` getter answers what the rendered field would answer from its current
+     * declared state, and a value written then is held and applied by the render
+     * (see `_holdValue`). The other members need the pieces and so work only after
+     * the render.
      *
      * The inner controls carry `form=""`, so the host is the only element the form
      * sees. Enter pressed in an inner `<input>` of any type but `file`, `button`,
@@ -824,6 +839,8 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         #claims;
         #announces;
         #also = [];
+        /** @type {{ value: any } | null} the value written before the render, which the render applies */
+        #held = null;
         /** Sets the internals' role from the subclass's `static ROLE`. */
         constructor() {
             super();
@@ -1057,11 +1074,47 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         _interactive() {
             return !this.matches(':disabled') && !this.readonly;
         }
+        /**
+         * Upgrades as `ParsedElement.upgrade` does, then writes the value held by
+         * `_holdValue`, if any, through the `value` setter: the value written
+         * before the render wins over the declared one.
+         * @returns {Promise<void>} rejecting with what the render threw
+         */
+        async upgrade() {
+            await super.upgrade();
+            if (this.#held === null) {
+                return;
+            }
+            const { value } = this.#held;
+            this.#held = null;
+            this.value = value;
+        }
+        /**
+         * Keeps a value written before the field has its control, for a subclass's
+         * `value` setter to call in place of writing it: the upgrade writes it
+         * through the setter once the field has rendered, over the declared one.
+         * The `value` attribute is left alone, so a reset still restores it.
+         * @param {any} value
+         */
+        _holdValue(value) {
+            this.#held = { value };
+        }
+        /**
+         * The value a subclass's `value` getter shapes before the field has its
+         * control: the one `_holdValue` kept, else the declared `value` attribute
+         * read through its mapper.
+         * @returns {any}
+         */
+        _heldValue() {
+            return this.#held === null ? this.declared('value') : this.#held.value;
+        }
         /**
          * The field's value, `null` when empty. Every concrete field overrides the
          * pair with its own semantics; the form extraction, `values =` assignment,
          * the `change` detail and `formResetCallback` all go through it. The base
-         * pair reads `undefined` and ignores writes.
+         * pair reads `undefined` and ignores writes. A concrete field answers and
+         * takes its value before the render too, through `_heldValue` and
+         * `_holdValue`.
          * @type {any}
          */
         get value() {
@@ -1430,6 +1483,18 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             this.addEventListener('input', (evt) => this.#touch(evt.target));
             this.addEventListener('change', (evt) => this.#touch(evt.target));
             this.addEventListener('focusin', (evt) => this.#focus(evt.target));
+            this.form.addEventListener('reset', (evt) => {
+                if (evt.target !== this.form) {
+                    return;
+                }
+                for (const name of new Set([...this.#saved.keys(), ...this.#snapshot().keys()])) {
+                    this.#edits.set(name, ++this.#sequence);
+                }
+                // the controls are restored only after the event, so the state is read at the next frame
+                if (this.#frame === 0) {
+                    this.#frame = requestAnimationFrame(() => this.#refresh());
+                }
+            });
             index_mjs.Rendering.waitForChildren(this)
                 .catch(() => undefined)
                 .then(() => this.commit());
@@ -1447,7 +1512,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         #submitting = false;
         /**
-         * Runs the submit pipeline, with the spinner up for its whole length:
+         * Runs the submit pipeline, with the spinner up until its outcome:
          *
          * 1. builds the loader: the component the `loader` attribute names
          *    (`loaders:form` by default), called as `create(form)`
@@ -1464,8 +1529,8 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          * 6. has the loader `submit` the request and `transform` the response
          * 7. under `track-changes`, commits the values extracted at step 2 (see
          *    `commit`): an edit made while the submit was in flight stays unsaved
-         * 8. fires `submit:success` with `{ submitter, values, request, response }`,
-         *    `response` being the transformed one
+         * 8. releases the spinner and fires `submit:success` with `{ submitter,
+         *    values, request, response }`, `response` being the transformed one
          *
          * Anything thrown from step 1 on, a missing loader or a throwing mapper
          * included, fires `submit:failure` with `{ submitter, values, request,
@@ -1474,6 +1539,11 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          * `console.warn`. The `values` of both outcome events are the extracted
          * ones, not a replacement a `submit` listener put on its detail.
          *
+         * The form settles before either outcome event (0016): its listeners see
+         * the spinner released and the buttons no longer held off, the problems of
+         * a `Failure` already shown, and the submit no longer in flight, so one
+         * of them may submit again.
+         *
          * A call while a submit is in flight returns at once, doing nothing.
          * @param {HTMLElement} [submitter] the button that submitted, if any; it is
          * the only button whose name and value are submitted
@@ -1489,6 +1559,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             this.spinner(true);
             let values;
             let request;
+            let outcome;
             try {
                 const loader = this.component(this.declared('loader') ?? 'loaders:form').create(this);
                 values = Bindings.extractFrom(this.form, submitter);
@@ -1516,32 +1587,28 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 if (submitted) {
                     this.#commitFrom(submitted.saved, submitted.upTo);
                 }
-                this.dispatchEvent(
-                    new CustomEvent('submit:success', {
-                        bubbles: true,
-                        cancelable: false,
-                        detail: { submitter, values, request, response: mapped },
-                    }),
-                );
-                return true;
+                outcome = new CustomEvent('submit:success', {
+                    bubbles: true,
+                    cancelable: false,
+                    detail: { submitter, values, request, response: mapped },
+                });
             } catch (e) {
-                this.dispatchEvent(
-                    new CustomEvent('submit:failure', {
-                        bubbles: true,
-                        cancelable: false,
-                        detail: { submitter, values, request, exception: e },
-                    }),
-                );
+                outcome = new CustomEvent('submit:failure', {
+                    bubbles: true,
+                    cancelable: false,
+                    detail: { submitter, values, request, exception: e },
+                });
                 if (e instanceof index_mjs$1.Failure) {
                     this.errors = e.problems;
                 } else {
                     console.warn('failed to submit form', this, 'reason:', e);
                 }
-                return false;
             } finally {
                 this.#submitting = false;
                 this.spinner(false);
             }
+            this.dispatchEvent(outcome);
+            return outcome.type === 'submit:success';
         }
         /**
          * Saves the unsaved edits, for a page action that would lose them, such as
@@ -1560,18 +1627,15 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         /**
          * Resets the native form, each field returning to its default value. Under
-         * `track-changes` every control counts as edited: the form is dirty if the
-         * defaults differ from what was last committed.
+         * `track-changes` a reset, this one or a native reset button's, counts
+         * every control as edited: the form is dirty if the defaults differ from
+         * what was last committed.
          */
         reset() {
             this.form.reset();
-            if (!this.#tracking) {
-                return;
-            }
-            for (const name of new Set([...this.#saved.keys(), ...this.#snapshot().keys()])) {
-                this.#edits.set(name, ++this.#sequence);
+            if (this.#tracking) {
+                this.#refresh();
             }
-            this.#refresh();
         }
         /** name → the serialized values the last commit recorded */
         #saved = new Map();
@@ -1996,6 +2060,12 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         _input;
         /** @type {(HTMLInputElement|HTMLTextAreaElement)[]} */
         #controls = [];
+        /**
+         * The serialized value a date or time control last reported, or held when
+         * focused or written.
+         * @type {string|null}
+         */
+        #committed = null;
         /**
          * The type the field renders, which a subclass overrides to wrap another
          * native type. The base answers the declared `type`, else `number` under
@@ -2075,20 +2145,18 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 });
                 return;
             }
-            /** @type {string|null} */
-            let committed = null;
             let typed = false;
             const commit = () => {
                 typed = false;
                 const now = JSON.stringify(this.value);
-                if (now === committed) {
+                if (now === this.#committed) {
                     return;
                 }
-                committed = now;
+                this.#committed = now;
                 this._notifyChange();
             };
             control.addEventListener('focus', () => {
-                committed = JSON.stringify(this.value);
+                this.#committed = JSON.stringify(this.value);
             });
             control.addEventListener('keydown', (/** @type any */ evt) => {
                 if (evt.key === 'Enter' && !evt.isComposing) {
@@ -2112,14 +2180,18 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          * `v-type="number"`, where text that does not decode is answered as it is.
          * Writing `null`, `undefined` or `''` empties the control; anything else is
          * written as its string, replacing whatever was being typed, as a native
-         * control's value does. Answers a `string`, a `number` or `null`; typed
-         * `any` because subclasses answer other values.
+         * control's value does, and is not an edit: a date or time control that
+         * has the focus reports no `change` for it when it is left. Answers a
+         * `string`, a `number` or `null`; typed `any` because subclasses answer
+         * other values. Before the render the same shaping reads the value last
+         * written, or the `value` attribute, as its text, and a write is held for
+         * the render to apply.
          * @type {any}
          */
         get value() {
             const uppercase = this.declared('uppercase');
             const trim = this.declared('trim');
-            const v = this._input.value;
+            const v = this._input ? this._input.value : `${this._heldValue() ?? ''}`;
             const uppercased = uppercase ? v.toUpperCase() : v;
             const trimmed = trim ? uppercased.trim() : uppercased;
             if (trimmed === '') {
@@ -2133,7 +2205,12 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             return normalized;
         }
         set value(value) {
+            if (!this._input) {
+                this._holdValue(value);
+                return;
+            }
             this._input.value = value === '' || value === undefined || value === null ? '' : `${value}`;
+            this.#committed = JSON.stringify(this.value);
         }
         /**
          * The control's placeholder, `null` when there is none. The control always
@@ -2156,6 +2233,20 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
 
     const blankAsNull = (v) => (v === '' ? null : v);
 
+    /**
+     * The local midnight of the yyyy-mm-dd date a text names, taking a year below
+     * 100 as it is and refusing a day its month does not have.
+     * @param {string} text
+     * @returns {Date} an invalid date when the text names no date
+     */
+    const localMidnight = (text) => {
+        const [y, m, d] = text.split('-').map(Number);
+        const date = new Date(0);
+        date.setFullYear(y, m - 1, d);
+        date.setHours(0, 0, 0, 0);
+        return date.getFullYear() === y && date.getMonth() === m - 1 && date.getDate() === d ? date : new Date(Number.NaN);
+    };
+
     /**
      * Formats the yyyy-mm-dd date in its content as a numeric date, in the locale
      * its `locale` attribute names, else the page's, else the platform default.
@@ -2165,10 +2256,8 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
     class LocalDate extends index_mjs.ParsedElement {
         static attributes = ['locale', 'default'];
         render() {
-            const content = this.textContent.trim();
-            const [y, m, d] = content.split('-').map(Number);
-            const parsed = content === '' ? null : new Date(y, m - 1, d);
-            if (parsed === null || Number.isNaN(parsed.getTime())) {
+            const parsed = localMidnight(this.textContent.trim());
+            if (Number.isNaN(parsed.getTime())) {
                 this.replaceChildren(this.declared('default') ?? '');
                 return;
             }
@@ -2207,7 +2296,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             );
         }
         static #parse(v) {
-            return /^\d{4}-\d{2}-\d{2}$/.test(v) ? new Date(`${v}T00:00:00`) : new Date(v);
+            return /^\d{4}-\d{2}-\d{2}$/.test(v) ? localMidnight(v) : new Date(v);
         }
         /**
          * Converts an ISO instant to the `yyyy-mm-ddThh:mm:ss.sss` wall clock time
@@ -2394,14 +2483,24 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             return 'datetime-local';
         }
         /**
-         * The entered time as a UTC ISO instant.
+         * The entered time as a UTC ISO instant. Before the render it answers the
+         * value last written, or the `value` attribute, as the rendered field
+         * would, and a write is held for the render to apply.
          * @returns {string|null} null when empty or when the input holds text that does not parse
          */
         get value() {
+            if (!this._input) {
+                const held = this._heldValue();
+                return Instant.localToIso(held ? Instant.isoToLocal(held) : '');
+            }
             return Instant.localToIso(this._input.value);
         }
         /** @param {string|null|undefined} v an ISO instant; a falsy value empties the input */
         set value(v) {
+            if (!this._input) {
+                this._holdValue(v);
+                return;
+            }
             super.value = v ? Instant.isoToLocal(v) : '';
         }
         /**
@@ -2581,9 +2680,14 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 this.files = InputFile.list(files);
                 this._notifyChange();
             });
-            this._input.addEventListener('change', (e) => {
-                this.#update();
-            });
+            // capture runs before the base listener notifying change, so the event carries the constrained files
+            this._input.addEventListener(
+                'change',
+                () => {
+                    this.#update();
+                },
+                { capture: true },
+            );
             return { ...pieces, freeze: this.#group };
         }
         #update() {
@@ -2690,7 +2794,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          * @returns {boolean}
          */
         get multiple() {
-            return this._input.multiple;
+            return this._input ? this._input.multiple : this.declared('multiple');
         }
         /** @param {boolean} v */
         set multiple(v) {
@@ -2698,11 +2802,11 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             this.reflectTo('multiple', v);
         }
         /**
-         * The selected files, after the constraints.
+         * The selected files, after the constraints; none before the render.
          * @returns {FileList}
          */
         get files() {
-            return this._input.files;
+            return this._input ? this._input.files : InputFile.list();
         }
         /**
          * Replaces the selection and runs the constraints over it, refreshing the
@@ -2729,7 +2833,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         /**
          * The names of the selected files: an array when `multiple`, otherwise the
-         * one name or null.
+         * one name or null. Before the render no file is selected yet.
          * @returns {string[]|string|null}
          */
         get value() {
@@ -2738,11 +2842,12 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         /**
          * Empties the selection for a falsy value and ignores any other, since a
-         * file name cannot select a file.
+         * file name cannot select a file. Before the render there is nothing to
+         * empty, so it does nothing.
          * @param {any} v
          */
         set value(v) {
-            if (v) {
+            if (v || !this._input) {
                 return;
             }
             this.files = InputFile.list();
@@ -3026,7 +3131,8 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          *   which light dismiss then closes with no script of your own. The popover
          *   is given the generated id when it has none. A `button` or `input`
          *   invoker gets a `popovertarget` naming it; any other element toggles it
-         *   on click and on the Enter and Space keys
+         *   on click and on the Enter and Space keys; a click on it while the
+         *   popover is open closes the popover rather than opening it again
          * @param {boolean} [options.expanded] sets the invoker's `aria-expanded` to
          *   `false` at once and keeps it in step with the popover's `toggle` events
          * @param {boolean} [options.stretch] in the script placement, sizes the
@@ -3050,7 +3156,21 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 if (invoker.localName === 'button' || invoker.localName === 'input') {
                     invoker.setAttribute('popovertarget', popover.id);
                 } else {
-                    invoker.addEventListener('click', () => popover.togglePopover());
+                    let pressedOpen = false;
+                    invoker.addEventListener(
+                        'pointerdown',
+                        () => {
+                            pressedOpen = popover.matches(':popover-open');
+                        },
+                        true,
+                    );
+                    invoker.addEventListener('click', () => {
+                        const dismissed = pressedOpen && !popover.matches(':popover-open');
+                        pressedOpen = false;
+                        if (!dismissed) {
+                            popover.togglePopover();
+                        }
+                    });
                     invoker.addEventListener('keydown', (/** @type any */ evt) => {
                         if (evt.key !== 'Enter' && evt.key !== ' ') {
                             return;
@@ -3152,7 +3272,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
      * @typedef {{ request(method: string, url: string): any }} SelectHttpClient
      */
 
-    const byKeys = (entries, keys) => entries.filter(({ key }) => keys.some((r) => r == key));
+    const byKeys = (entries, keys) => entries.filter(({ key }) => keys.some((r) => String(r) === String(key)));
     const byLabel = (entries, needle) =>
         entries.filter(({ label }) => (label ?? '').toLowerCase().includes(needle?.toLowerCase() ?? ''));
 
@@ -3197,7 +3317,8 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             await this.#ensureFetched();
         }
         /**
-         * The entries whose key loosely equals one of the keys, in vocabulary order.
+         * The entries whose key reads as the same text as one of the keys, in
+         * vocabulary order.
          * @param {...any} keys
          * @returns {Promise<SelectEntry[]>}
          * @throws when the fetch fails, or when an invalidation supersedes it
@@ -3339,7 +3460,8 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          */
         async invalidate() {}
         /**
-         * The entries whose key loosely equals one of the keys, in vocabulary order.
+         * The entries whose key reads as the same text as one of the keys, in
+         * vocabulary order.
          * @param {...any} keys
          * @returns {SelectEntry[]}
          */
@@ -3558,11 +3680,10 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             this.replaceChildren(fragment);
         }
         #selected() {
-            return (
-                this.#menu?.querySelector('[selected]:not([aria-disabled="true"])') ??
-                this.#menu?.querySelector('li:not([aria-disabled="true"])') ??
-                null
-            );
+            if (!this.#menu || this.#menu.hidden) {
+                return null;
+            }
+            return this.#menu.querySelector('li[selected]') ?? this.#menu.querySelector('li:not([aria-disabled="true"])');
         }
         #highlight(li) {
             if (!li) {
@@ -3581,11 +3702,13 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         /**
          * Picks the highlighted row, or the first enabled one when none is: hides
-         * the dropdown and dispatches `change`. Does nothing when no row is enabled.
+         * the dropdown and dispatches `change`. Does nothing when the highlighted
+         * row is disabled, when no row is enabled, or while a search is loading
+         * and the rows are hidden.
          */
         acceptSelection() {
             const selected = this.#selected();
-            if (!selected) {
+            if (!selected || selected.matches('[aria-disabled="true"]')) {
                 return;
             }
             this.#change(selected);
@@ -3594,7 +3717,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          * Renders the entries as rows and highlights the first one whose key is
          * picked, else the row the template marked `selected`, else the first
          * enabled row. A row is marked `picked` and
-         * `aria-selected="true"` when its key loosely equals one of the keys, and
+         * `aria-selected="true"` when its key reads as the same text as one of the keys, and
          * `aria-disabled="true"` when its `metadata.disabled` is truthy, titled with
          * `metadata.reason`. No entries shows the empty state instead of the menu.
          * @param {SelectEntry[]} values
@@ -3610,7 +3733,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             this.#optionstemplate.withOverlay(data).renderTo(this.#menu);
             for (const [index, li] of [...this.#menu.children].entries()) {
                 const entry = values[index];
-                const picked = keys.some((r) => r == entry?.key);
+                const picked = keys.some((r) => String(r) === String(entry?.key));
                 li.toggleAttribute('picked', picked);
                 li.setAttribute('aria-selected', picked ? 'true' : 'false');
                 const disabled = !!entry?.metadata?.disabled;
@@ -3627,8 +3750,13 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             }
             this.#empty.toggleAttribute('hidden', values.length !== 0);
             this.#menu.toggleAttribute('hidden', values.length === 0);
-            const current = values.findIndex(({ key }) => keys.some((r) => r == key));
-            this.#highlight(current >= 0 ? this.#menu.children[current] : this.#selected());
+            const current = values.findIndex(({ key }) => keys.some((r) => String(r) === String(key)));
+            this.#highlight(
+                current >= 0
+                    ? this.#menu.children[current]
+                    : (this.#menu.querySelector('li[selected]:not([aria-disabled="true"])') ??
+                          this.#menu.querySelector('li:not([aria-disabled="true"])')),
+            );
         }
         #change(target) {
             const index = target.getAttribute('value');
@@ -3702,7 +3830,8 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         /**
          * Moves the highlight to the next or previous enabled row when the dropdown
-         * is shown, staying put at the edge, and shows it otherwise.
+         * is shown, staying put at the edge and while a search is loading, and
+         * shows it otherwise.
          * @param {boolean} forward
          * @param {() => SelectEntry[]|Promise<SelectEntry[]>} loader used only to show
          * @param {any[]} [keys] the keys currently selected, used only to show
@@ -3730,10 +3859,14 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             return null;
         }
         /**
-         * Highlights the first enabled row, or the last one.
+         * Highlights the first enabled row, or the last one. Does nothing while a
+         * search is loading and the rows are hidden.
          * @param {boolean} first
          */
         jump(first) {
+            if (this.#menu.hidden) {
+                return;
+            }
             const edge = first ? this.#menu.firstElementChild : this.#menu.lastElementChild;
             const target = this.#walk(edge, first);
             if (target) {
@@ -3743,6 +3876,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         /**
          * Moves the highlight by as many enabled rows as the menu shows at once,
          * one when that cannot be measured, stopping at the last enabled row.
+         * Does nothing while a search is loading.
          * @param {boolean} forward
          */
         page(forward) {
@@ -3867,6 +4001,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         #control;
         #ddmenu;
         #input;
+        #label;
         #items;
         #itemstemplate;
         #multiple;
@@ -3891,6 +4026,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             });
             const fragment = this.template().withOverlay({ slots, name }).render();
             this.#input = fragment.querySelector('ful-control > input');
+            this.#label = fragment.querySelector('label');
             this.#items = fragment.querySelector('ful-item-list');
             this.#itemstemplate =
                 slots.items && !index_mjs.Fragments.isBlank(slots.items) ? index_mjs.Templates.fromFragment(slots.items) : null;
@@ -3922,16 +4058,18 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 fragment,
                 control: this.#input,
                 error: fragment.querySelector('ful-field-error'),
-                label: fragment.querySelector('label'),
+                label: this.#label,
             };
         }
         /**
          * Pointer interaction: the element toggles the dropdown, the item list's
-         * remove buttons and the control's badges drop their entry.
+         * remove buttons and the control's badges drop their entry. A click on the
+         * label is left to the click the browser forwards to the input, which
+         * toggles once.
          */
         #wireChrome() {
             this.addEventListener('click', (/** @type any */ e) => {
-                if (!this._interactive()) {
+                if (!this._interactive() || this.#label.contains(e.target)) {
                     return;
                 }
                 const elsewhere = e.target.closest('button, [role="button"], a[href], input, select, textarea');
@@ -3939,6 +4077,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                     return;
                 }
                 if (this.#ddmenu.shown) {
+                    this.#abortdload();
                     this.#close();
                     return;
                 }
@@ -4021,6 +4160,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         #wireSelection() {
             this.#ddmenu.addEventListener('change', (e) => {
                 e.stopPropagation();
+                this.#abortdload();
                 if (!this._interactive()) {
                     this.#close();
                     return;
@@ -4055,21 +4195,25 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          * another control needs when that control changes. A key the loader no
          * longer knows is dropped from the selection, so a value invalidated by the
          * change does not survive it, and one it still knows keeps its place with a
-         * fresh label. The badges and items follow, and no `change` is dispatched.
+         * fresh label. The badges and items follow, an open dropdown runs its
+         * search again, and no `change` is dispatched.
          *
          * Where the vocabulary lives at a different address, write `src` or call
          * `reconfigure`, which build the loader for the new url and reload.
          * @returns {Promise<void>}
-         * @throws what the loader's invalidate, prefetch or key lookup throws
+         * @throws what the loader's invalidate, prefetch, key lookup or search
+         * throws
          */
         async reload() {
             await this.#loader.invalidate?.();
             await this.#loader.prefetch?.();
             const keys = [...this.#values.keys()];
-            if (keys.length === 0) {
-                return;
+            if (keys.length !== 0) {
+                await this.#resolve(keys, this.#assignments.take());
+            }
+            if (this.#ddmenu.shown) {
+                await this.#open();
             }
-            await this.#resolve(keys, this.#assignments.take());
         }
         /**
          * The url the loader asks for the vocabulary, reflected as the `src`
@@ -4260,6 +4404,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                         return;
                     }
                     e.preventDefault();
+                    this.#abortdload();
                     this.#editing = false;
                     this.#display();
                     this.#ddmenu.acceptSelection();
@@ -4284,6 +4429,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 if (forward && !this.#ddmenu.shown) {
                     this.#open();
                 } else if (!forward && this.#ddmenu.shown) {
+                    this.#abortdload();
                     this.#close();
                 }
                 return;
@@ -4380,27 +4526,30 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         /**
          * Selects the keys, coerced by `k-type`: a key, an array of keys, or null or
-         * undefined for none. The empty string is a key like any other. The keys
-         * are applied at once, each labeled by itself until the loader's `exact`
+         * undefined for none. The empty string is a key like any other, and a
+         * single select keeps only the first key. The keys are applied at once, each labeled by itself until the loader's `exact`
          * answers; a key it does not answer is then dropped, a key removed in the
          * meantime stays removed, and a later assignment wins over the late answer.
          * A failed lookup keeps the keys and surfaces as an unhandled rejection.
          * No `change` is dispatched. A key containing a
          * comma, which the value attribute cannot carry, is kept and warned about
-         * once per element.
+         * once per element. Before the render the write is held for the render to
+         * apply, over the `value` attribute, which it leaves alone.
          * @param {any} vs
          */
         set value(vs) {
-            const keys = (vs == null ? [] : Array.isArray(vs) ? vs : [vs]).map((k) => this.#coerceKey(k));
+            if (!this.#control) {
+                this._holdValue(vs);
+                return;
+            }
+            const given = (vs == null ? [] : Array.isArray(vs) ? vs : [vs]).map((k) => this.#coerceKey(k));
+            const keys = this.#multiple ? given : given.slice(0, 1);
             if (!this.#warnedComma && keys.some((k) => typeof k === 'string' && k.includes(','))) {
                 this.#warnedComma = true;
                 console.warn('a ful-select key cannot contain a comma: it is unexpressible in the value attribute', this);
             }
             this.#values = new Map(keys.map((k) => [k, { key: k, label: k, metadata: undefined }]));
             const claim = this.#assignments.take();
-            if (!this.#control) {
-                return;
-            }
             this.#syncBadges();
             if (keys.length === 0) {
                 return;
@@ -4427,10 +4576,17 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         /**
          * The selected keys, in selection order, for a multiple select; the one
-         * key, or null, for a single one.
+         * key, or null, for a single one. Before the render it answers the keys
+         * last written, or the `value` attribute, coerced and cut to one key as the
+         * rendered select would.
          * @returns {any}
          */
         get value() {
+            if (!this.#control) {
+                const held = this._heldValue();
+                const keys = [held ?? []].flat().map((k) => this.#coerceKey(k));
+                return this.multiple ? keys : (keys[0] ?? null);
+            }
             if (this.#multiple) {
                 return [...this.#values.keys()];
             }
@@ -4449,20 +4605,60 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             }
             return selection[0] ?? null;
         }
+        /**
+         * The field's disabled claim; turning it on while the dropdown is open
+         * closes it and drops a pending search.
+         * @type {boolean}
+         */
+        get disabled() {
+            return super.disabled;
+        }
+        set disabled(v) {
+            super.disabled = v;
+            if (v && this.#ddmenu?.shown) {
+                this.#abortdload();
+                this.#close();
+            }
+        }
+        /**
+         * The field's readonly claim; turning it on while the dropdown is open
+         * closes it and drops a pending search.
+         * @type {boolean}
+         */
+        get readonly() {
+            return super.readonly;
+        }
+        set readonly(v) {
+            super.readonly = v;
+            if (v && this.#ddmenu?.shown) {
+                this.#abortdload();
+                this.#close();
+            }
+        }
         #useItemList;
         /**
          * Whether the select holds several keys: `value` and `entry` answer arrays,
          * the input stays empty and the selection shows as removable badges in the
-         * control.
+         * control. Before the render it answers the `multiple` attribute.
          * @returns {boolean}
          */
         get multiple() {
-            return this.#multiple;
+            return this.#multiple ?? this.declared('multiple');
         }
-        /** @param {boolean} v */
+        /**
+         * Turning it off keeps only the first selected key; either way the badges,
+         * the items and the input follow at once.
+         * @param {boolean} v
+         */
         set multiple(v) {
             this.#multiple = v;
             this.reflectTo('multiple', v);
+            if (!v) {
+                this.#values = new Map([...this.#values].slice(0, 1));
+            }
+            if (this.#control) {
+                this.#syncBadges();
+            }
         }
         /**
          * Whether the selection shows as the `items` list below the control instead
@@ -4484,10 +4680,10 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
      * a radio input carrying its attributes, labelled by its content; every
      * `input-*` attribute on the group is forwarded onto each radio as well. The
      * default slot is the `<legend>`, and `header` and `footer` slots frame the
-     * list. The radios share a name of their own (derived from `name`, or minted
-     * when there is none) and carry `form=""`, so the group is the only element
-     * the form sees. A radio's native `change` is stopped and republished as the
-     * group's own.
+     * list. The radios share a name of their own, minted afresh for each group
+     * (from `name` when there is one) so that same-named groups stay apart, and
+     * carry `form=""`, so the group is the only element the form sees. A radio's
+     * native `change` is stopped and republished as the group's own.
      *
      * The host carries the `radiogroup` role, `aria-readonly`, `aria-required`,
      * `aria-invalid` and the description. The disabled and readonly claims act on
@@ -4532,7 +4728,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          * `announces` pieces
          */
         _build({ slots }) {
-            const name = this.declared('name') ?? index_mjs.Attributes.uid('ful-radiogroup');
+            const name = index_mjs.Attributes.uid(this.declared('name') ?? 'ful-radiogroup');
             const radioEls = Array.from(slots.default.querySelectorAll('ful-radio'));
             const inputsAndLabels = radioEls.map((el) => {
                 const input = document.createElement('input');
@@ -4570,15 +4766,31 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          * The value of the checked radio, `null` when none is. Under
          * `type="boolean"` it answers `true` for a radio whose value is `true` and
          * `false` for any other. Writing a value checks the radio carrying it, and
-         * writing `null` or a value no radio carries clears the selection.
+         * writing `null` or a value no radio carries clears the selection. Before
+         * the render it answers the value last written, or the `value` attribute,
+         * when a `ful-radio` carries it, and a write is held for the render to
+         * apply.
          * @type {string | boolean | null}
          */
         get value() {
+            if (!this.#fieldset) {
+                const held = this._heldValue();
+                const radio = held === null ? null : this.querySelector(`ful-radio[value="${CSS.escape(String(held))}"]`);
+                const key = radio?.getAttribute('value') ?? null;
+                if (key === null || this.declared('type') !== 'boolean') {
+                    return key;
+                }
+                return key === 'true';
+            }
             /** @type {HTMLInputElement|null} */
             const checked = this.querySelector('input[type=radio]:checked');
             return checked ? (this.#booleanType ? checked.value === 'true' : checked.value) : null;
         }
         set value(value) {
+            if (!this.#fieldset) {
+                this._holdValue(value);
+                return;
+            }
             const radios = this.querySelectorAll(`input[type=radio]`);
             const clear = () => {
                 radios.forEach((el) => {
@@ -4648,13 +4860,19 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         /**
          * Whether the box is checked. The `value` attribute is read with the `bool`
-         * mapper, where only the text `true` means checked.
+         * mapper, where only the text `true` means checked. Before the render it
+         * answers the value last written, or the `value` attribute, and a write is
+         * held for the render to apply.
          * @type {boolean}
          */
         get value() {
-            return this.#input.checked;
+            return this.#input ? this.#input.checked : Boolean(this._heldValue());
         }
         set value(value) {
+            if (!this.#input) {
+                this._holdValue(value);
+                return;
+            }
             this.#input.checked = value;
         }
     }
@@ -5004,8 +5222,9 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          */
         async load(pageRequest, sortRequest, filterRequest) {
             const rows = this.#sorted(sortRequest);
-            const begin = pageRequest.page * pageRequest.size;
-            const end = begin + pageRequest.size;
+            const size = Number(pageRequest.size);
+            const begin = pageRequest.page * size;
+            const end = begin + size;
             const page = rows.slice(begin, end);
             const totalElements = rows.length;
             return {
@@ -5138,12 +5357,17 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
      * for it. Without it the table shows an initial panel until `load`,
      * `reload` or `resetWithFilter` is called.
      *
-     * Inside the table a `page:requested` loads that page with the current size,
+     * Inside the table, and not inside a `ful-table` nested in it, a
+     * `page:requested` loads that page with the current size,
      * sort and filters; a `sort:requested` loads the current page with the new
      * sort (none for a `null` order) and, once that load is the one showing, sets
      * the order of the sorter that asked and clears the others; a `submit:success`
      * of the filter form loads the first page with the submitted request as the
-     * filters. The loads these start, and the autoload, are not awaited by
+     * filters. The first load goes through the filter form too: `reload`, and so
+     * `autoload`, submits it (see `reload`), so a `submit` listener rewriting
+     * `detail.request` shapes every load alike. The filters a page, a sort or a size change carries are those of
+     * the last load asked for, whether it is still running, loaded or failed, so
+     * they are the ones the filter form shows. The loads these start, and the autoload, are not awaited by
      * anything: a failure shows the error panel and its rejection is unhandled.
      */
     class Table extends index_mjs.ParsedElement {
@@ -5230,6 +5454,14 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         #latestRequest = { pageRequest: { page: 0, size: 10 }, sortRequest: null, filterRequest: {} };
         /** whether a load has been asked for, by autoload or by a caller */
         #loadRequested = false;
+        /** the filters of the last load asked for, which page, sort and size changes carry */
+        #requestedFilters = {};
+        /** @type {any} the `ful-form` wrapping the `filters` slot, if any */
+        #filters = null;
+        /** whether a load has shown its rows, after which `reload` repeats it */
+        #loaded = false;
+        /** @type {Promise<void>|null} the load the last `submit:success` of the filter form started */
+        #filterLoad = null;
         #loads = new Claims();
         /** @type {{ src: string|null, method: string|null }} */
         #builtFrom = { src: null, method: null };
@@ -5251,19 +5483,21 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          *
          * The reload is not awaited: a failure shows the error panel and its
          * rejection is unhandled.
-         * @param {number|null|undefined} value absent or null is the default of
-         * ten, so removing the attribute restores it
+         * @param {number|string|null|undefined} value a number or a string of
+         * one, such as a select's value; absent or null is the default of ten,
+         * so removing the attribute restores it, and a value that is not a
+         * number is ignored
          */
         set pageSize(value) {
-            const size = value ?? 10;
-            if (size === this.#latestRequest.pageRequest.size) {
+            const size = Number(value ?? 10);
+            if (Number.isNaN(size) || size === this.#latestRequest.pageRequest.size) {
                 return;
             }
             this.#latestRequest = { ...this.#latestRequest, pageRequest: { page: 0, size } };
             if (!this.#loadRequested) {
                 return;
             }
-            this.reload();
+            this.load(this.#latestRequest.pageRequest, this.#latestRequest.sortRequest, this.#requestedFilters);
         }
         /**
          * The url the loader asks for rows, reflected as the `src` attribute.
@@ -5383,15 +5617,24 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 sortRequest: schema.sort,
                 filterRequest: maybeForm?.values ?? {},
             };
+            this.#requestedFilters = this.#latestRequest.filterRequest;
+            this.#filters = maybeForm;
             maybeForm?.addEventListener('submit:success', async (evt) => {
-                await this.#loadPage(0, evt.detail.request);
+                this.#filterLoad = this.#loadPage(0, evt.detail.request);
+                await this.#filterLoad;
             });
             this.addEventListener('page:requested', async (/** @type any */ e) => {
-                await this.#loadPage(e.detail.value, this.#latestRequest.filterRequest);
+                if (e.target.closest('ful-table') !== this) {
+                    return;
+                }
+                await this.#loadPage(e.detail.value, this.#requestedFilters);
             });
             this.addEventListener('sort:requested', async (/** @type any */ e) => {
+                if (e.target.closest('ful-table') !== this) {
+                    return;
+                }
                 const sortRequest = e.detail.value.order ? e.detail.value : null;
-                await this.load(this.#latestRequest.pageRequest, sortRequest, this.#latestRequest.filterRequest);
+                await this.load(this.#latestRequest.pageRequest, sortRequest, this.#requestedFilters);
                 if (this.#latestRequest.sortRequest !== sortRequest) {
                     return;
                 }
@@ -5407,12 +5650,23 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
 
         /**
          * Loads the last request that loaded, or, before any has, the first page
-         * with the declared size and sort and the values of the filters slot. A
-         * size written through `pageSize` since then replaces the page with the
-         * first one at that size.
+         * with the declared size and sort. A size written through `pageSize` since
+         * then replaces the page with the first one at that size.
+         *
+         * Before any load has loaded, a table with a `filters` slot submits its
+         * filter form instead, so the first request goes through the same
+         * `submit` listeners as the later ones, and the load its `submit:success`
+         * starts is the one awaited. A filter submit that is cancelled, fails or
+         * is dropped for one in flight loads nothing, and the promise resolves.
          * @returns {Promise<void>} as `load`
          */
         async reload() {
+            if (this.#filters && !this.#loaded) {
+                if (await this.#filters.submit()) {
+                    await this.#filterLoad;
+                }
+                return;
+            }
             return await this.load(
                 this.#latestRequest.pageRequest,
                 this.#latestRequest.sortRequest,
@@ -5420,7 +5674,9 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             );
         }
         /**
-         * Asks the loader for a page and shows it.
+         * Asks the loader for a page and shows it. Its filters are, from now on,
+         * the ones a page, a sort or a size change carries, even while it runs
+         * or once it failed.
          *
          * While the load runs the table carries `aria-busy="true"`, and the rows
          * already shown stay; the spinner panel shows only when there are none.
@@ -5428,7 +5684,8 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          * panel shows for an answer with no rows (the `empty` slot rendered with
          * `schema`, `pageRequest`, `filterRequest` and `pageResponse` in scope),
          * the request becomes the one
-         * `reload` repeats, `aria-busy` is removed and `load:success` is
+         * `reload` repeats; once the elements of the rows and of the empty panel
+         * have rendered, `aria-busy` is removed and `load:success` is
          * dispatched (bubbling, not cancelable) with `detail` set to
          * `{ pageRequest, sortRequest, filterRequest, response }`. A page beyond
          * the last one the answer reports is not shown: the last page is loaded
@@ -5442,7 +5699,9 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          * returned promise rejects with the same error.
          *
          * A load started after this one supersedes it: when this one's answer or
-         * failure arrives it changes nothing, dispatches nothing and resolves.
+         * failure arrives it changes nothing, dispatches nothing and resolves;
+         * superseded while its rows render, it leaves them to the newer load and
+         * dispatches nothing.
          * @param {TablePageRequest} pageRequest
          * @param {TableSortRequest|null} sortRequest
          * @param {Record<string, any>} filterRequest
@@ -5451,6 +5710,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          */
         async load(pageRequest, sortRequest, filterRequest) {
             this.#loadRequested = true;
+            this.#requestedFilters = filterRequest;
             const claim = this.#loads.take();
             this.#loading.toggleAttribute('hidden', this.#body.childElementCount > 0);
             this.#feedback.setAttribute('hidden', '');
@@ -5466,7 +5726,16 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 lastPage = Math.max(0, Math.ceil(pageResponse.size / pageRequest.size) - 1);
                 if (pageRequest.page <= lastPage) {
                     this.#latestRequest = { pageRequest, sortRequest, filterRequest };
+                    this.#loaded = true;
                     this.#update(pageRequest, sortRequest, filterRequest, pageResponse);
+                    // a row element whose render fails leaves the rows shown: it does not fail the load
+                    await Promise.all([
+                        index_mjs.Rendering.waitForChildren(this.#body),
+                        index_mjs.Rendering.waitForChildren(this.#empty),
+                    ]).catch(() => undefined);
+                    if (claim.stale) {
+                        return;
+                    }
                     this.removeAttribute('aria-busy');
                     this.dispatchEvent(
                         new CustomEvent('load:success', {
@@ -6066,7 +6335,8 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          * The operators the menu offers, narrowed to the vocabulary: an empty list,
          * or one where no name is known, offers all of it. A single operator pins
          * the button, and an assigned tuple then carries that operator whatever it
-         * names. An assignment made before the upgrade is held narrowed and
+         * names. When the operator shown leaves the list, the first listed one is
+         * shown. An assignment made before the upgrade is held narrowed and
          * answered back until the render, when the `operators` attribute is applied
          * over it, an absent attribute meaning the whole vocabulary. Assignments are
          * ignored while the `operator` attribute fixes the operator.
@@ -6085,27 +6355,61 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 return;
             }
             this._operator.allowed = declared;
-            this._syncBetween();
+            if (this._operator.value !== null) {
+                this._showOperator(this._operator.preferring(this._operator.value));
+            }
         }
         /**
          * The filter's tuple, `[operator, operand]` or `[operator, from, to]` for
          * BETWEEN, each operand converted by `_serialize` (an ISO instant for the
          * instant filter). Null while any operand the operator uses is empty.
+         * Before the render it answers the tuple last written, or the `value`
+         * attribute, as the rendered filter would show it.
          * @returns {any[]|null}
          */
         get value() {
+            if (!this._operator) {
+                return this._shownTuple(this._heldValue());
+            }
             return this._tuple();
         }
         /**
-         * Shows a tuple: the operator it names, unless a pinned or fixed operator
-         * replaces it, and its operands, an operand missing from a shorter tuple
+         * Shows a tuple: the operator it names, or the first allowed one where the
+         * whitelist, a pin or a fixed operator does not allow it, and its operands, an operand missing from a shorter tuple
          * leaving its input empty. Null or undefined empties both operands and
-         * keeps the operator.
+         * keeps the operator. Before the render the tuple is held for the render
+         * to apply, over the `value` attribute, which it leaves alone.
          * @param {any[]|null|undefined} v
          */
         set value(v) {
+            if (!this._operator) {
+                this._holdValue(v);
+                return;
+            }
             this._applyTuple(v);
         }
+        /**
+         * The tuple `_tuple` answers once `_applyTuple(v)` has shown `v`, read
+         * from the declared `operator` and `operators` in place of the menu.
+         * @param {any[]|null|undefined} v
+         * @returns {any[]|null}
+         */
+        _shownTuple(v) {
+            if (v == null) {
+                return null;
+            }
+            const [declared, ...values] = v;
+            const fixed = this.declared('operator');
+            const known = this._vocabulary().includes(fixed);
+            const allowed =
+                fixed === null
+                    ? ChoiceButton.narrow(this.declared('operators'), this._vocabulary())
+                    : [known ? fixed : this._defaultOperator()];
+            const operator = allowed.includes(declared) ? declared : allowed[0];
+            const shown = [values[0], values[1]].map((o) => `${o ? this._deserialize(o) : (o ?? '')}`);
+            const operands = operator === 'BETWEEN' ? shown : shown.slice(0, 1);
+            return operands.some((o) => o === '') ? null : [operator, ...operands.map((o) => this._serialize(o))];
+        }
         _tuple() {
             const operator = this._operator.value;
             const values = this.#operands();
@@ -6118,8 +6422,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 return;
             }
             const [declared, ...values] = v;
-            const operator = this._operator.pinned ? this._operator.allowed[0] : declared;
-            this._showOperator(operator);
+            this._showOperator(this._operator.preferring(declared));
             this._value1.value = values[0] ? this._deserialize(values[0]) : (values[0] ?? '');
             this._value2.value = values[1] ? this._deserialize(values[1]) : (values[1] ?? '');
         }
@@ -6136,10 +6439,13 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          * them rather than as serialized: a date filter describes what is in its
          * control, not the ISO string it sends. Null while every one of those
          * operands is empty, so a BETWEEN with one bound answers that bound while
-         * its value is still null.
+         * its value is still null, and before the filter has rendered.
          * @returns {FilterCriterion|null}
          */
         get criterion() {
+            if (!this._operator) {
+                return null;
+            }
             return asCriterion(labelTextOf(this), this._operator.value, this.#operands());
         }
         #operands() {
@@ -6299,10 +6605,26 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         /**
          * The tuple with the sensitivity after the operator, `[operator,
-         * sensitivity, ...operands]`. Null while any operand the operator uses is empty.
+         * sensitivity, ...operands]`. Null while any operand the operator uses is
+         * empty. Before the render it answers the tuple last written, or the
+         * `value` attribute, as the rendered filter would show it.
          * @returns {any[]|null}
          */
         get value() {
+            if (!this._sensitivityButton) {
+                const held = this._heldValue();
+                const tuple = held == null ? null : this._shownTuple([held[0], ...held.slice(2)]);
+                if (tuple === null) {
+                    return null;
+                }
+                const fixed = this.declared('sensitivity');
+                const allowed =
+                    fixed === null
+                        ? ChoiceButton.narrow(this.declared('sensitivities'), SENSITIVITIES)
+                        : [SENSITIVITIES.includes(fixed) ? fixed : 'IGNORE_CASE'];
+                const kept = allowed.includes(held[1]) ? held[1] : 'IGNORE_CASE';
+                return [tuple[0], allowed.includes(kept) ? kept : allowed[0], ...tuple.slice(1)];
+            }
             const tuple = this._tuple();
             return tuple == null ? null : [tuple[0], this._sensitivity, ...tuple.slice(1)];
         }
@@ -6310,10 +6632,15 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          * Shows a tuple as the compare filter does, reading the sensitivity at
          * index 1. A sensitivity the whitelist does not allow leaves the current
          * one in place. Null or undefined empties the operands and keeps the
-         * operator and the sensitivity.
+         * operator and the sensitivity. Before the render the tuple is held, as
+         * on the compare filters.
          * @param {any[]|null|undefined} v
          */
         set value(v) {
+            if (!this._sensitivityButton) {
+                this._holdValue(v);
+                return;
+            }
             if (v == null) {
                 this._applyTuple(v);
                 return;
@@ -6418,7 +6745,8 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         /**
          * The operators the menu offers, narrowed to EQ and NEQ: an empty list, or
          * one where no name is known, offers both, and a single one pins the
-         * button. Held before the upgrade and replaced by the `operators` attribute
+         * button. When the operator shown leaves the list, the first listed one is
+         * shown. Held before the upgrade and replaced by the `operators` attribute
          * at the render, as on the compare filters.
          * @returns {string[]|undefined} undefined before the upgrade when nothing was assigned
          */
@@ -6432,30 +6760,49 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 return;
             }
             this._operator.allowed = declared;
+            if (this._operator.value !== null) {
+                this._operator.value = this._operator.preferring(this._operator.value);
+            }
         }
         /** @returns {string[]} */
         _vocabulary() {
             return BooleanFilter.OPERATORS;
         }
         /**
-         * `[operator, token]`, the token being 'true' or 'false'; null while the value menu is on any.
+         * `[operator, token]`, the token being 'true' or 'false'; null while the
+         * value menu is on any. Before the render it answers the tuple last
+         * written, or the `value` attribute, as the rendered filter would show it.
          * @returns {string[]|null}
          */
         get value() {
+            if (!this._value) {
+                const held = this._heldValue();
+                const token = `${held?.[1] ?? ''}`;
+                if (token === '') {
+                    return null;
+                }
+                const allowed = ChoiceButton.narrow(this.declared('operators'), this._vocabulary());
+                return [allowed.includes(held[0]) ? held[0] : allowed[0], token];
+            }
             return this._value.value === '' ? null : [this._operator.value, this._value.value];
         }
         /**
-         * Shows a tuple: its operator, unless a pinned operator replaces it, and its
-         * token, a missing token meaning any. Null or undefined sets the value menu
-         * back to any and keeps the operator.
+         * Shows a tuple: its operator, or the first allowed one where the whitelist
+         * does not allow it, and its token, a missing token meaning any. Null or undefined sets the value menu
+         * back to any and keeps the operator. Before the render the tuple is held,
+         * as on the compare filters.
          * @param {any[]|null|undefined} v
          */
         set value(v) {
+            if (!this._value) {
+                this._holdValue(v);
+                return;
+            }
             if (v == null) {
                 this._value.value = '';
                 return;
             }
-            this._operator.value = this._operator.pinned ? this._operator.allowed[0] : v[0];
+            this._operator.value = this._operator.preferring(v[0]);
             this._value.value = v[1] ?? '';
         }
         /**
@@ -6470,10 +6817,13 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         /**
          * The operator and the localized word the value menu shows, not the token.
-         * Null while the value menu is on any.
+         * Null while the value menu is on any, and before the filter has rendered.
          * @returns {FilterCriterion|null}
          */
         get criterion() {
+            if (!this._value) {
+                return null;
+            }
             const token = this._value.value;
             return asCriterion(labelTextOf(this), this._operator.value, [token === '' ? '' : booleanValueLabel(token)]);
         }
@@ -6515,7 +6865,8 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          * The chosen keys as an array, a single choice included, led by the
          * declared `operator` when there is one. Null while nothing is chosen, so
          * that a table drops the filter instead of sending an empty set that
-         * matches nothing.
+         * matches nothing. Before the render it answers the keys the select answers
+         * then.
          * @returns {any[]|null}
          */
         get value() {
@@ -6530,7 +6881,8 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          * Selects the keys of an array or a single bare key; a leading element equal
          * to the declared `operator` is dropped first, so the filter takes back what
          * it answered. A single select takes the first key. Null or undefined clears
-         * the selection.
+         * the selection. Before the render the keys are held, as the select holds
+         * them.
          * @param {any} v
          */
         set value(v) {
@@ -6543,7 +6895,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         /**
          * The declared operator, or null, and the labels of the chosen entries. Null
-         * while nothing is chosen.
+         * while nothing is chosen, as before the filter has rendered.
          * @returns {FilterCriterion|null}
          */
         get criterion() {
@@ -6839,7 +7191,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          */
         onSubmitted(answer) {
             this.#section.addEventListener('submit:success', (/** @type any */ e) => {
-                if (e.target !== index_mjs.Nodes.queryChildren(this.#section, 'ful-form')) {
+                if (e.target.localName !== 'ful-form' || e.target.parentElement !== this.#section) {
                     return;
                 }
                 answer(e.detail.response);
@@ -7002,10 +7354,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             <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>
+            <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;
@@ -7035,9 +7384,9 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 this.#settle(outcome);
             });
             this.#dialog.addEventListener('click', (/** @type any */ e) => {
-                const result = e.target.closest('button[data-result]')?.dataset.result;
-                if (result !== undefined) {
-                    this.#dialog.close(result);
+                const button = e.target.closest('button[data-result]');
+                if (button && button.closest('dialog') === this.#dialog) {
+                    this.#dialog.close(button.dataset.result);
                 }
             });
             if (!requiresAnswer) {
@@ -7108,7 +7457,8 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          * the body and `first` true only on the first answered request), so a
          * listener can fill the body. A failed request is painted into the body
          * and does not reject. On a dialog already open nothing is shown or
-         * requested, and the call waits for the same ending as the calls before it.
+         * requested, and the call waits for the same ending as the calls before it;
+         * one the page moved while open, which is no longer modal, opens anew.
          * @returns {Promise<DialogOutcome>} resolving on close, or on removal from
          * the document with a dismissal
          */
@@ -7190,6 +7540,10 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         /** @returns {boolean} whether this call is the one that opened the modal */
         #show() {
+            //a move in the page takes an open modal out of the top layer; close() would queue a close event answering the next opening
+            if (this.#dialog.open && !this.#dialog.matches(':modal')) {
+                this.#dialog.removeAttribute('open');
+            }
             if (this.#dialog.open) {
                 return false;
             }
@@ -7387,9 +7741,9 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 this.dismiss('escape');
             });
             this.#dialog.addEventListener('click', (/** @type any */ e) => {
-                const result = e.target.closest('button[data-result]')?.dataset.result;
-                if (result !== undefined) {
-                    this.close(result);
+                const button = e.target.closest('button[data-result]');
+                if (button && button.closest('dialog') === this.#dialog) {
+                    this.close(button.dataset.result);
                 }
             });
             this.#dialog.addEventListener('close', () => {
@@ -7486,9 +7840,11 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          * the content section and `first` true only on the first answered request),
          * so a listener can fill the content. A failed request is painted into the
          * content section and does not reject. On a drawer already open nothing is
-         * shown or requested, except that one sliding out stops and stays open, and
-         * the call waits for the same ending as the calls before it, which is how
-         * a caller learns the outcome of the opening an `update()` made.
+         * shown or requested, except that one sliding out stops and stays open,
+         * forgetting the result it was closing with, and the call waits for the
+         * same ending as the calls before it, which is how a caller learns the
+         * outcome of the opening an `update()` made. One the page moved while open,
+         * which is no longer modal, opens anew.
          * @returns {Promise<{ dismissed: boolean, result: string|null, response: any }>} resolving on
          * close, or on removal from the document with a dismissal
          */
@@ -7569,7 +7925,14 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         /** @returns {boolean} whether this call is the one that opened the modal */
         #show() {
+            if (this.#closing) {
+                this.#answer = null;
+            }
             this.#stopSlidingOut();
+            //a move in the page takes an open modal out of the top layer; close() would queue a close event answering the next opening
+            if (this.#dialog.open && !this.#dialog.matches(':modal')) {
+                this.#dialog.removeAttribute('open');
+            }
             if (this.#dialog.open) {
                 return false;
             }
@@ -7608,6 +7971,21 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         #invoker = null;
         /** @type {HTMLElement|null} */
         #pressed = null;
+        #notePress = (/** @type PointerEvent */ evt) => {
+            const target = /** @type Node */ (evt.target);
+            this.#pressed = this.matches(':popover-open') && this.#invoker?.contains(target) ? this.#invoker : null;
+        };
+        /** Upgrades the menu, and has a shared one that came back follow the presses on its invoker again. */
+        connectedCallback() {
+            super.connectedCallback();
+            if (this.rendered && !this.declared('for')) {
+                document.addEventListener('pointerdown', this.#notePress, true);
+            }
+        }
+        /** Stops a shared menu following the presses while it is out of the document. */
+        disconnectedCallback() {
+            document.removeEventListener('pointerdown', this.#notePress, true);
+        }
         /**
          * Gives the menu the `menu` role and an empty `popover` attribute unless
          * it already has one, and marks the items. With `for`, read here once, it
@@ -7693,14 +8071,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             return this.#mark().filter((item) => !item.hasAttribute('disabled') && !item.hasAttribute('hidden'));
         }
         #wireShared() {
-            document.addEventListener(
-                'pointerdown',
-                (evt) => {
-                    const target = /** @type Node */ (evt.target);
-                    this.#pressed = this.matches(':popover-open') && this.#invoker?.contains(target) ? this.#invoker : null;
-                },
-                true,
-            );
+            document.addEventListener('pointerdown', this.#notePress, true);
             this.addEventListener('toggle', (/** @type any */ evt) => {
                 if (evt.newState === 'closed') {
                     this.#invoker?.setAttribute('aria-expanded', 'false');
@@ -8028,17 +8399,21 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         #showScrollButtons() {
             const list = this.#tablist;
             const overflow = list.scrollWidth - list.clientWidth;
-            this.#scrollStart.hidden = list.scrollLeft <= 1;
-            this.#scrollEnd.hidden = list.scrollLeft >= overflow - 1;
+            const scrolled = Math.abs(list.scrollLeft);
+            this.#scrollStart.hidden = scrolled <= 1;
+            this.#scrollEnd.hidden = scrolled >= overflow - 1;
             this.#scrollStart.style.blockSize = this.#scrollEnd.style.blockSize = `${list.clientHeight}px`;
         }
         /**
-         * The part of the tablist that no scroll button covers.
-         * @returns {{ start: number, end: number }}
+         * The part of the tablist that no scroll button covers, in viewport
+         * coordinates, the start button being on the right under rtl.
+         * @returns {{ left: number, right: number }}
          */
         #visibleRange() {
             const view = this.#tablist.getBoundingClientRect();
-            return { start: view.left + this.#scrollStart.offsetWidth, end: view.right - this.#scrollEnd.offsetWidth };
+            const rtl = getComputedStyle(this.#tablist).direction === 'rtl';
+            const [onLeft, onRight] = rtl ? [this.#scrollEnd, this.#scrollStart] : [this.#scrollStart, this.#scrollEnd];
+            return { left: view.left + onLeft.offsetWidth, right: view.right - onRight.offsetWidth };
         }
         /**
          * Scrolls the tablist so that the first tab cut by the side the direction
@@ -8047,11 +8422,12 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          * @returns {void}
          */
         #scrollByOneTab(direction) {
-            const { start, end } = this.#visibleRange();
-            const target =
-                direction > 0
-                    ? this.#tabs.find((tab) => tab.getBoundingClientRect().right > end + 1)
-                    : this.#tabs.findLast((tab) => tab.getBoundingClientRect().left < start - 1);
+            const { left, right } = this.#visibleRange();
+            const rightwards = direction > 0 !== (getComputedStyle(this.#tablist).direction === 'rtl');
+            const cut = rightwards
+                ? (/** @type HTMLElement */ tab) => tab.getBoundingClientRect().right > right + 1
+                : (/** @type HTMLElement */ tab) => tab.getBoundingClientRect().left < left - 1;
+            const target = direction > 0 ? this.#tabs.find(cut) : this.#tabs.findLast(cut);
             this.#bringIntoView(target, matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth');
         }
         /**
@@ -8065,11 +8441,12 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             if (!tab) {
                 return;
             }
-            const { start, end } = this.#visibleRange();
+            const { left, right } = this.#visibleRange();
             const box = tab.getBoundingClientRect();
-            const delta = box.right > end ? Math.ceil(box.right - end) : box.left < start ? Math.floor(box.left - start) : 0;
-            if (delta !== 0) {
-                this.#tablist.scrollBy({ left: delta, behavior });
+            if (box.right > right) {
+                this.#tablist.scrollBy({ left: Math.ceil(box.right - right), behavior });
+            } else if (box.left < left) {
+                this.#tablist.scrollBy({ left: Math.floor(box.left - left), behavior });
             }
         }
         /**
@@ -8296,14 +8673,15 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          * @returns {Promise<any[] | undefined> | undefined} a promise resolving to
          * the answers once they are delivered, or to undefined when nobody
          * listened; undefined when the section is already current, and undefined
-         * with a warning when no section carries `ref`
+         * with a warning when no section carries `ref` or the one carrying it has
+         * no step paired with it
          * @throws what the entered section's delivery rejected with, as the rejection
          * of the returned promise, after its error is painted in the section
          */
         move(ref) {
             const index = this.#sections.findIndex((s) => s.getAttribute('data-step') === ref);
-            if (index === -1) {
-                console.warn(`ful-wizard: no section carries data-step="${ref}"`);
+            if (index === -1 || index >= this.#steps.length) {
+                console.warn(`ful-wizard: no section paired with a step carries data-step="${ref}"`);
                 return undefined;
             }
             return this.#move(index);
@@ -8316,17 +8694,14 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          * @returns {Promise<any[] | undefined> | undefined} a promise resolving to
          * the answers, or to undefined when nobody listened or the delivery failed
          * (its error painted in the section); undefined, with a warning, when `ref`
-         * names no section
+         * names no section or one with no step paired with it
          */
         refresh(ref) {
-            const section =
+            const index =
                 ref instanceof Element
-                    ? ref
-                    : typeof ref === 'string'
-                      ? this.#sections.find((s) => s.getAttribute('data-step') === ref)
-                      : undefined;
-            const index = this.#sections.indexOf(section);
-            if (index === -1) {
+                    ? this.#sections.indexOf(ref)
+                    : this.#sections.findIndex((s) => s.getAttribute('data-step') === ref);
+            if (index === -1 || index >= this.#steps.length) {
                 console.warn(`ful-wizard: no section answers to "${ref}"`);
                 return undefined;
             }