@optionfactory/fml 9.0.0-rc30 → 9.0.0-rc31

package/dist/fml.iife.js

@@ -2850,6 +2850,8 @@ var fml = (function (exports) {
         return undefined;
     };
 
+    const BOUND = Symbol('BOUND');
+
     /**
      * Evaluates a parsed expression against a scope. One instance per evaluation:
      * it holds the modules and the data stack that names resolve against, and keeps
@@ -2858,9 +2860,11 @@ var fml = (function (exports) {
     class EvaluatingVisitor {
         #modules;
         #dataStack;
-        constructor(modules, dataStack) {
+        #bound;
+        constructor(modules, dataStack, bound) {
             this.#modules = modules;
             this.#dataStack = dataStack;
+            this.#bound = bound ?? dataStack.length;
         }
         #resolve(prop) {
             return resolveInStack(this.#dataStack, prop);
@@ -2884,8 +2888,9 @@ var fml = (function (exports) {
         #cached_resolve_proxy;
         #resolve_proxy() {
             if (!this.#cached_resolve_proxy) {
+                const bound = (name) => resolveInStack(this.#dataStack.slice(0, this.#bound), name);
                 this.#cached_resolve_proxy = new Proxy(this.#dataStack, {
-                    get: (target, prop) => this.#resolve(prop),
+                    get: (target, prop) => (prop === BOUND ? bound : this.#resolve(prop)),
                 });
             }
             return this.#cached_resolve_proxy;
@@ -3038,6 +3043,16 @@ var fml = (function (exports) {
          * `{{{ }}}` (html) or `{{{{ }}}}` (node) interpolation, in order.
          */
         static MODE_TEMPLATED = Symbol('MODE_TEMPLATED');
+        /**
+         * The key under which the receiver of a module function answers a lookup
+         * against the bound data alone: `this[Expressions.BOUND](name)` resolves
+         * the name in the layers the scope was created with (a registry's data,
+         * the data handed to a Template factory) and never in an overlay pushed
+         * afterwards, by `data-tpl-each`, `data-tpl-with` or `withOverlay`. It is
+         * how a module reads what the page configured without the rendered data
+         * being able to supply or replace it. No name on the data stack reaches it.
+         */
+        static BOUND = BOUND;
 
         static #astCache = new BoundedCache(1000);
 
@@ -3062,10 +3077,11 @@ var fml = (function (exports) {
          * @param {any[]} dataStack innermost overlay last
          * @param {any} ast what `parse` answered
          * @param {(typeof Expressions.MODE_EXPRESSION | typeof Expressions.MODE_TEMPLATED)?} [mode] the mode it was parsed in
+         * @param {number} [bound] how many layers, from the outermost, are the bound data; all of them when omitted
          * @returns {any} the value, or the list of parts in MODE_TEMPLATED
          */
-        static evaluate(modules, dataStack, ast, mode) {
-            return new EvaluatingVisitor(modules, dataStack).visitRoot(ast, mode === Expressions.MODE_TEMPLATED);
+        static evaluate(modules, dataStack, ast, mode, bound) {
+            return new EvaluatingVisitor(modules, dataStack, bound).visitRoot(ast, mode === Expressions.MODE_TEMPLATED);
         }
         /**
          * Parses and evaluates an expression.
@@ -3073,10 +3089,11 @@ var fml = (function (exports) {
          * @param {any[]} dataStack innermost overlay last
          * @param {string} expression
          * @param {(typeof Expressions.MODE_EXPRESSION | typeof Expressions.MODE_TEMPLATED)?} [mode] MODE_EXPRESSION when omitted
+         * @param {number} [bound] how many layers, from the outermost, are the bound data; all of them when omitted
          * @returns {any} the value, or the list of parts in MODE_TEMPLATED
          */
-        static interpret(modules, dataStack, expression, mode) {
-            return Expressions.evaluate(modules, dataStack, Expressions.parse(expression, mode), mode);
+        static interpret(modules, dataStack, expression, mode, bound) {
+            return Expressions.evaluate(modules, dataStack, Expressions.parse(expression, mode), mode, bound);
         }
     }
 
@@ -3085,17 +3102,24 @@ var fml = (function (exports) {
      * that a bare identifier resolves against, as a single value. Adding an overlay
      * returns a new evaluator instead of modifying this one, so a template can add
      * data for one subtree without affecting the rest of the render.
+     *
+     * The layers an evaluator is created with are its bound data; the overlays
+     * pushed afterwards are not. A bare identifier resolves against both, while a
+     * module function can ask for the bound data alone through `Expressions.BOUND`.
      */
     class ExpressionEvaluator {
         #modules;
         #dataStack;
+        #bound;
         /**
          * @param {{ [k: string]: any } | null | undefined} modules
          * @param {any[]} dataStack innermost overlay last
+         * @param {number} [bound] how many layers, from the outermost, are the bound data; all of them when omitted
          */
-        constructor(modules, dataStack) {
+        constructor(modules, dataStack, bound) {
             this.#modules = modules;
             this.#dataStack = dataStack;
+            this.#bound = bound ?? dataStack.length;
         }
         /**
          * A new evaluator with one more module: `#name:fn()` resolves into it, and an
@@ -3106,11 +3130,11 @@ var fml = (function (exports) {
          */
         withModule(name, value) {
             const module = name ? { [name]: value } : value;
-            return new ExpressionEvaluator({ ...this.#modules, ...module }, this.#dataStack);
+            return new ExpressionEvaluator({ ...this.#modules, ...module }, this.#dataStack, this.#bound);
         }
         /**
          * A new evaluator with the data pushed as the innermost overlays, the last
-         * one winning a shared name.
+         * one winning a shared name. The bound data stays what it was.
          * @param {...any} data
          * @returns {ExpressionEvaluator}
          */
@@ -3118,6 +3142,7 @@ var fml = (function (exports) {
             return new ExpressionEvaluator(
                 this.#modules,
                 data.length === 0 ? this.#dataStack : [...this.#dataStack, ...data],
+                this.#bound,
             );
         }
         /**
@@ -3135,7 +3160,13 @@ var fml = (function (exports) {
          * @returns {any}
          */
         evaluateExpression(expression) {
-            return Expressions.interpret(this.#modules, this.#dataStack, expression, Expressions.MODE_EXPRESSION);
+            return Expressions.interpret(
+                this.#modules,
+                this.#dataStack,
+                expression,
+                Expressions.MODE_EXPRESSION,
+                this.#bound,
+            );
         }
         /**
          * Evaluates a templated text, the `{{ }}` form, against this scope.
@@ -3143,7 +3174,7 @@ var fml = (function (exports) {
          * @returns {{ type: symbol, value: any }[]} its parts, as MODE_TEMPLATED describes
          */
         evaluateTemplated(text) {
-            return Expressions.interpret(this.#modules, this.#dataStack, text, Expressions.MODE_TEMPLATED);
+            return Expressions.interpret(this.#modules, this.#dataStack, text, Expressions.MODE_TEMPLATED, this.#bound);
         }
     }
 
@@ -4039,14 +4070,22 @@ var fml = (function (exports) {
         #ready = new Promise((resolve) => {
             this.#readyResolve = resolve;
         });
+        #configured = /** @type {PromiseWithResolvers<void>} */ (Promise.withResolvers());
         constructor() {
-            Nodes.waitDomContentLoaded(document).then(() => {
+            Promise.all([Nodes.waitDomContentLoaded(document), this.#configured.promise]).then(() => {
                 this.#start();
             });
         }
         ready() {
             return this.#ready;
         }
+        /**
+         * Marks the registry as configured: until then nothing is defined, so an
+         * empty queue says nothing about the page and readiness is held back.
+         */
+        configured() {
+            this.#configured.resolve();
+        }
         async #start() {
             await this.settled();
             document.dispatchEvent(
@@ -4089,7 +4128,10 @@ var fml = (function (exports) {
          * @returns {Promise<void>}
          */
         settled() {
-            return this.#drain(() => true, (entry) => entry.finished);
+            return this.#drain(
+                () => true,
+                (entry) => entry.finished,
+            );
         }
         /**
          * Waits for the accepted upgrades, the ones enqueued meanwhile included,
@@ -4343,7 +4385,9 @@ var fml = (function (exports) {
         }
         /**
          * Defines every element deferred so far; from then on, defineElement takes
-         * effect immediately.
+         * effect immediately. Readiness waits for the first call: a page that
+         * configures late (translations fetched first) gets its ftl:ready once the
+         * elements this defines have upgraded, not at DOMContentLoaded.
          * @returns {Registry} this registry
          */
         configure() {
@@ -4352,6 +4396,7 @@ var fml = (function (exports) {
                 delete this.#tagToClass[tag];
             }
             this.#configured = true;
+            this.#upgradeQueue.configured();
             return this;
         }
         /**
@@ -4383,9 +4428,11 @@ var fml = (function (exports) {
         /**
          * Waits for this registry's readiness: resolves right after its ftl:ready
          * event is dispatched on the document, and immediately when that already
-         * happened. Never rejects: a failed upgrade counts as settled, and its
-         * rejection is left unhandled so it still reaches the console and the
-         * page's error reporting.
+         * happened. The event is dispatched once DOMContentLoaded has passed,
+         * configure() has been called and the queue has drained, so a registry
+         * that is never configured is never ready. Never rejects: a failed
+         * upgrade counts as settled, and its rejection is left unhandled so it
+         * still reaches the console and the page's error reporting.
          * @returns {Promise<void>}
          */
         ready() {
@@ -4729,12 +4776,27 @@ var fml = (function (exports) {
      */
 
     /**
-     * The receiver contract of the module functions: bound to a proxy over the
-     * data stack when called from a template, or to a plain object by Localization.of().
+     * The receiver contract of the module functions: a plain object carrying the
+     * translations and the locale, as Localization.of() binds them, or the proxy
+     * over the data stack a template calls them with.
      *
      * @typedef {{ l10n?: Messages, locale?: string }} Receiver
      */
 
+    /**
+     * The translations or the locale of a receiver. From a template they are read
+     * from the bound data alone (the registry's overlays, or the data handed to
+     * the Template factory): the rows and responses a render pushes on top are
+     * what arrives later, and must not supply or replace the page's own messages.
+     * @param {any} receiver
+     * @param {'l10n' | 'locale'} name
+     * @returns {any}
+     */
+    const configured = (receiver, name) => {
+        const bound = receiver[Expressions.BOUND];
+        return typeof bound === 'function' ? bound(name) : receiver[name];
+    };
+
     const PLACEHOLDER = /\{(\w+)\}/g;
     const POSITIONAL = /\{(\d+)\}/g;
     /** @param {any} v @returns {v is Record<string, string>} */
@@ -4769,7 +4831,9 @@ var fml = (function (exports) {
      * The translations as a template module: `#l10n:t()` for messages, plus date,
      * number and bytes formatting in the page's locale. The template form and the
      * imperative `of()` facade both resolve through the registry's scope, so they
-     * always produce the same result for the same key.
+     * always produce the same result for the same key. A template reads `l10n`
+     * and `locale` from its bound data only, the most recent layer winning: an
+     * overlay pushed while rendering (a row, a response) never reaches them.
      */
     class Localization {
         /**
@@ -4788,7 +4852,7 @@ var fml = (function (exports) {
          * @returns {string} the message, or the key itself when the translations do not carry it
          */
         static t(key, ...args) {
-            const messages = this.l10n ?? {};
+            const messages = configured(this, 'l10n') ?? {};
             let message = Object.hasOwn(messages, key) ? messages[key] : undefined;
             if (message === undefined) {
                 warnOnce(`missing message "${key}"`);
@@ -4800,7 +4864,7 @@ var fml = (function (exports) {
                     warnOnce(`plural message "${key}" needs a numeric {count}`);
                     message = message.other;
                 } else {
-                    const locale = this.locale ?? navigator?.language ?? 'en';
+                    const locale = configured(this, 'locale') ?? navigator?.language ?? 'en';
                     const category = formatter(Intl.PluralRules, locale).select(named.count);
                     message = message[category] ?? message.other;
                 }
@@ -4840,7 +4904,7 @@ var fml = (function (exports) {
          * @returns {string}
          */
         static date(value, options) {
-            return formatter(Intl.DateTimeFormat, this.locale, options).format(value);
+            return formatter(Intl.DateTimeFormat, configured(this, 'locale'), options).format(value);
         }
 
         /**
@@ -4852,7 +4916,7 @@ var fml = (function (exports) {
          * @returns {string}
          */
         static number(value, options) {
-            return formatter(Intl.NumberFormat, this.locale, options).format(value);
+            return formatter(Intl.NumberFormat, configured(this, 'locale'), options).format(value);
         }
 
         /**
@@ -4865,7 +4929,7 @@ var fml = (function (exports) {
          * @returns {string}
          */
         static bytes(value) {
-            const format = formatter(Intl.NumberFormat, this.locale, { maximumFractionDigits: 2 }).format;
+            const format = formatter(Intl.NumberFormat, configured(this, 'locale'), { maximumFractionDigits: 2 }).format;
             if (value >= 1024 * 1024 * 1024) {
                 return `${format(value / 1024 / 1024 / 1024)}GiB`;
             }
@@ -6681,12 +6745,13 @@ var fml = (function (exports) {
      *
      * 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 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.
+     * own chrome as the control. The claims, `value`, `focus()` and
+     * `setCustomValidity` 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, a value written then is
+     * held and applied by the render (see `_holdValue`), and a problem reported
+     * then is shown by it. 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`,
@@ -6724,6 +6789,8 @@ var fml = (function (exports) {
         #also = [];
         /** @type {{ value: any } | null} the value written before the render, which the render applies */
         #held = null;
+        /** @type {{ error: string, context?: string } | null} the problem reported before the render, which the render shows */
+        #reported = null;
         /** Sets the internals' role from the subclass's `static ROLE`. */
         constructor() {
             super();
@@ -6788,6 +6855,11 @@ var fml = (function (exports) {
                 this.#pendingFocus = null;
                 control.focus(options);
             }
+            if (this.#reported !== null) {
+                const { error, context } = this.#reported;
+                this.#reported = null;
+                this.setCustomValidity(error, context);
+            }
         }
         /**
          * @param {EventTarget} el
@@ -6867,11 +6939,17 @@ var fml = (function (exports) {
          * field owning a whole subtree overrides this to route the message to the
          * inner control the path names.
          *
-         * Needs the render: before it there is no error region to write to.
+         * Before the render there is no error region to write to: a message is
+         * kept (the last one wins) and shown once the field has rendered, and a
+         * clear drops the one kept. A field whose render failed shows nothing.
          * @param {string} [error] the message, empty or missing to clear
          * @param {string} [context] the path below this field's name, '' on an exact match
          */
         setCustomValidity(error, context) {
+            if (!this.#fieldError) {
+                this.#reported = error ? { error, context } : null;
+                return;
+            }
             Attributes.set(this.#announces ?? this.#control, 'aria-invalid', error ? 'true' : null);
             if (!error) {
                 this.internals.setValidity({});
@@ -7082,11 +7160,16 @@ var fml = (function (exports) {
         /**
          * Calls `_build(conf)` and wires the pieces it answers. When `_build`
          * returns a promise the pieces are wired once it settles; a field that
-         * builds synchronously renders synchronously.
+         * builds synchronously renders synchronously. A default slot holding
+         * nothing but whitespace is emptied first, so the label it becomes is
+         * `:empty` and takes no row.
          * @param {{ slots: Record<string, DocumentFragment> | undefined }} conf
          * @returns {void | Promise<void>}
          */
         render(conf) {
+            if (conf.slots?.default && Fragments.isBlank(conf.slots.default)) {
+                conf.slots.default.replaceChildren();
+            }
             const built = /** @type {any} */ (this._build(conf));
             if (built instanceof Promise) {
                 return built.then((pieces) => this.#wire(pieces));
@@ -8426,7 +8509,8 @@ var fml = (function (exports) {
      * size and count limits it declares.
      *
      * The `dropzone` and `item-list` attributes show the dropzone and the list of
-     * chosen files. A `dropzone` slot replaces the default dropzone's content, and
+     * chosen files, and `no-input` takes the picker control out of sight, leaving
+     * it to the keyboard and to assistive technology. A `dropzone` slot replaces the default dropzone's content, and
      * an `items` slot holding a template replaces the stock item, rendered with the
      * same `files` overlay so that it reads the File objects it lists. Clicking the
      * dropzone opens the picker, and the host carries a `dragover` attribute while
@@ -8469,6 +8553,7 @@ var fml = (function (exports) {
             'multiple:presence',
             'item-list:presence',
             'dropzone:presence',
+            'no-input:presence',
             'max-files:number',
             'max-file-size:number',
             'max-total-size:number',
@@ -8720,7 +8805,7 @@ var fml = (function (exports) {
          * @returns {string[]|string|null}
          */
         get value() {
-            const names = Array.from(this._input.files).map((f) => f.name);
+            const names = Array.from(this.files).map((f) => f.name);
             return this.multiple ? names : (names[0] ?? null);
         }
         /**
@@ -8743,7 +8828,7 @@ var fml = (function (exports) {
          * The size of the selected files together, in bytes.
          * @returns {number}
          */
-        get totalsize() {
+        get totalSize() {
             return Array.from(this.files).reduce((a, f) => a + f.size, 0);
         }
         #maxFiles;
@@ -8818,6 +8903,23 @@ var fml = (function (exports) {
             this.#useDropzone = v;
             this.reflectTo('dropzone', v);
         }
+        #noInput;
+        /**
+         * Whether the picker control is taken out of sight, the dropzone and the
+         * item list carrying the field alone; the stylesheet hides it from the
+         * reflected `no-input` attribute. The control stays in the tab order and
+         * keeps the label, the description and the error, and the dropzone shows
+         * the focus ring while it holds the focus.
+         * @returns {boolean}
+         */
+        get noInput() {
+            return this.#noInput;
+        }
+        /** @param {boolean} v */
+        set noInput(v) {
+            this.#noInput = v;
+            this.reflectTo('no-input', v);
+        }
     }
 
     /** the viewport's breathing room when clamping, in pixels */
@@ -10581,9 +10683,7 @@ var fml = (function (exports) {
         static ROLE = 'radiogroup';
         static template = `
         <fieldset>
-            <legend>
-                {{{{ slots.default }}}}
-            </legend>
+            <legend>{{{{ slots.default }}}}</legend>
             <header data-tpl-if="slots.header">
                 {{{{ slots.header }}}}
             </header>
@@ -10631,6 +10731,9 @@ var fml = (function (exports) {
             radioEls.forEach((el) => {
                 el.remove();
             });
+            if (Fragments.isBlank(slots.default)) {
+                slots.default.replaceChildren();
+            }
             const fragment = this.template().withOverlay({ name, slots, inputsAndLabels }).render();
             this.#fieldset = /** @type HTMLElement */ (fragment.firstElementChild);
             this.#firstRadio = fragment.querySelector('input[type=radio]');
@@ -10786,6 +10889,10 @@ var fml = (function (exports) {
      * current `order` in the cycle `asc`, `desc`, `null`. The button does not
      * change its own `order`: whoever handles the event sets it, which `ful-table`
      * does once the sorted page has loaded.
+     *
+     * The stylesheet draws an up arrow for `asc` and a down arrow for `desc`. An
+     * unsorted button shows the up arrow dimmed, `asc` being the order its first
+     * activation asks for.
      */
     class SortButton extends ParsedElement {
         static attributes = ['sorter'];
@@ -11362,18 +11469,19 @@ var fml = (function (exports) {
          * writing the size is not a request to start loading, which is what
          * `autoload` and `reload()` are for. A write that does not change the size
          * does nothing. A write made before the render is replaced by the declared
-         * `page-size` when the table renders.
+         * `page-size` when the table renders, or by ten when that is not a number
+         * above zero.
          *
          * The reload is not awaited: a failure shows the error panel and its
          * rejection is unhandled.
          * @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
+         * finite number above zero is ignored
          */
         set pageSize(value) {
             const size = Number(value ?? 10);
-            if (Number.isNaN(size) || size === this.#latestRequest.pageRequest.size) {
+            if (!Number.isFinite(size) || size <= 0 || size === this.#latestRequest.pageRequest.size) {
                 return;
             }
             this.#latestRequest = { ...this.#latestRequest, pageRequest: { page: 0, size } };
@@ -11492,10 +11600,11 @@ var fml = (function (exports) {
             await Rendering.waitForChildren(this);
 
             const maybeForm = /** @type any */ (Nodes.queryChildren(this, 'ful-form'));
+            const declaredSize = this.declared('page-size');
             this.#latestRequest = {
                 pageRequest: {
                     page: 0,
-                    size: this.declared('page-size') ?? 10,
+                    size: Number.isFinite(declaredSize) && declaredSize > 0 ? declaredSize : 10,
                 },
                 sortRequest: schema.sort,
                 filterRequest: maybeForm?.values ?? {},
@@ -11579,7 +11688,10 @@ var fml = (function (exports) {
          * `aria-busy` is removed, `load:failure` is dispatched (bubbling, not
          * cancelable) with `detail` set to
          * `{ pageRequest, sortRequest, filterRequest, exception }`, and the
-         * returned promise rejects with the same error.
+         * returned promise rejects with the same error. An answer the table cannot
+         * page fails the same way, with an error saying so: one whose `size` is
+         * not a number, as a response of another shape read without a
+         * `response-mapper` is, or a page size of zero.
          *
          * A load started after this one supersedes it: when this one's answer or
          * failure arrives it changes nothing, dispatches nothing and resolves;
@@ -11607,6 +11719,11 @@ var fml = (function (exports) {
                     return;
                 }
                 lastPage = Math.max(0, Math.ceil(pageResponse.size / pageRequest.size) - 1);
+                if (!Number.isFinite(lastPage)) {
+                    throw new Error(
+                        `ful-table cannot page the loader's answer: it needs { data, size }, size being the total number of rows, and got a size of ${pageResponse.size} for pages of ${pageRequest.size}. A response of another shape needs a response-mapper`,
+                    );
+                }
                 if (pageRequest.page <= lastPage) {
                     this.#latestRequest = { pageRequest, sortRequest, filterRequest };
                     this.#loaded = true;
@@ -12872,8 +12989,10 @@ var fml = (function (exports) {
      * failure's problems, one per line, or its message when it carries none.
      */
     class SectionRequests {
-        /** @type {WeakSet<Element>} */
+        /** @type {WeakSet<Element>} the sections a first delivery succeeded for */
         #entered = new WeakSet();
+        /** @type {WeakSet<Element>} the sections whose first delivery is in flight */
+        #entering = new WeakSet();
         /** @type {WeakMap<Element, Claims>} */
         #claims = new WeakMap();
 
@@ -12882,9 +13001,12 @@ var fml = (function (exports) {
          * is given, then `section:requested:<name>` when a name is given, each
          * bubbling from `host` with the same detail `{ name, section, index, first }`,
          * and awaits every answer attached to any of them. `first` is true until a
-         * request for the section is answered by at least one listener, so a request
-         * nobody listened to does not spend it. A request with answers removes the
-         * error a previous failure painted before it waits.
+         * delivery of the section succeeds: a request nobody listened to does not
+         * spend it, and neither does one whose answers failed, so the next request
+         * is a first one again. While a first delivery is in flight a newer request
+         * for the same section carries `first` false, so the content is not
+         * delivered twice. A request with answers removes the error a previous
+         * failure painted before it waits.
          * @param {Element} host the component the events are dispatched on
          * @param {Element} section the element the answers deliver into
          * @param {string|null} name the section's `data-step`, when it has one
@@ -12895,7 +13017,7 @@ var fml = (function (exports) {
          * problems in the section unless a newer request superseded this one
          */
         async request(host, section, name, index) {
-            const first = !this.#entered.has(section);
+            const first = !this.#entered.has(section) && !this.#entering.has(section);
             const detail = { name, section, index, first };
             const types = [
                 'section:requested',
@@ -12913,7 +13035,9 @@ var fml = (function (exports) {
             if (promises.length === 0) {
                 return undefined;
             }
-            this.#entered.add(section);
+            if (first) {
+                this.#entering.add(section);
+            }
             let claims = this.#claims.get(section);
             if (!claims) {
                 claims = new Claims();
@@ -12929,13 +13053,20 @@ var fml = (function (exports) {
                 }
             });
             try {
-                return await Promise.all(promises);
+                const answers = await Promise.all(promises);
+                if (first) {
+                    this.#entered.add(section);
+                }
+                return answers;
             } catch (cause) {
                 if (owned()) {
                     this.#paintError(section, cause);
                 }
                 throw cause;
             } finally {
+                if (first) {
+                    this.#entering.delete(section);
+                }
                 cancelAnimationFrame(frame);
                 if (owned()) {
                     section.toggleAttribute('loading', false);
@@ -13052,15 +13183,27 @@ var fml = (function (exports) {
         /**
          * Calls `dismiss` when a press and its release both land on the backdrop,
          * so a selection dragged out of the panel and released outside does not.
+         * The backdrop is where the pointer is outside the dialog's rectangle: a
+         * part of the panel no child covers, the room around the error section
+         * for one, is the panel.
          * @param {() => void} dismiss
          */
         onBackdrop(dismiss) {
+            const onBackdrop = (/** @type MouseEvent */ e) => {
+                if (e.target !== this.#dialog) {
+                    return false;
+                }
+                const panel = this.#dialog.getBoundingClientRect();
+                return (
+                    e.clientX < panel.left || e.clientX > panel.right || e.clientY < panel.top || e.clientY > panel.bottom
+                );
+            };
             let pressedOutside = false;
             this.#dialog.addEventListener('mousedown', (e) => {
-                pressedOutside = e.target === this.#dialog;
+                pressedOutside = onBackdrop(e);
             });
             this.#dialog.addEventListener('click', (e) => {
-                if (pressedOutside && e.target === this.#dialog) {
+                if (pressedOutside && onBackdrop(e)) {
                     dismiss();
                 }
             });
@@ -13337,7 +13480,7 @@ var fml = (function (exports) {
          * opening, hides the error and loading sections, and dispatches
          * `section:requested` on the element (bubbling, with
          * `detail: { section, first, name: null, index: null }`, `section` being
-         * the body and `first` true only on the first answered request), so a
+         * the body and `first` true until a delivery succeeds), 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;
@@ -13589,11 +13732,7 @@ var fml = (function (exports) {
         #answer = null;
         #resolvers = [];
         #closing = false;
-        #slideOutEnded = (/** @type AnimationEvent */ e) => {
-            if (e.target === this.#dialog) {
-                this.#closeNow();
-            }
-        };
+        #slides = new Claims();
         /**
          * @param {{ slots: Record<string, DocumentFragment> }} c
          */
@@ -13720,7 +13859,7 @@ var fml = (function (exports) {
          * opening, hides the error and loading sections, and dispatches
          * `section:requested` on the element (bubbling, with
          * `detail: { section, first, name: null, index: null }`, `section` being
-         * the content section and `first` true only on the first answered request),
+         * the content section and `first` true until a delivery succeeds),
          * 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,
@@ -13771,11 +13910,13 @@ var fml = (function (exports) {
         /**
          * Slides the drawer out and closes it when the animation ends, setting the
          * `closing` attribute on the native dialog meanwhile; the `close` event is
-         * dispatched then, after this call has returned. Where the user prefers
-         * reduced motion, or no animation runs, it closes at once. A non-empty
-         * result answers as the button carrying that `data-result` would; no
-         * result, or an empty one, is a dismissal. Does nothing on a drawer that is
-         * closed or already sliding out.
+         * dispatched then, after this call has returned. An animation the page
+         * cancels, by hiding the drawer or an ancestor of it, closes it as one
+         * that ended does. Where the user prefers reduced motion, or no animation
+         * runs, it closes at once. A non-empty result answers as the button
+         * carrying that `data-result` would; no result, or an empty one, is a
+         * dismissal. Does nothing on a drawer that is closed or already sliding
+         * out.
          * @param {string} [result]
          */
         close(result) {
@@ -13790,12 +13931,18 @@ var fml = (function (exports) {
                 return;
             }
             this.#dialog.setAttribute('closing', '');
-            if (this.#dialog.getAnimations().length === 0) {
+            const animations = this.#dialog.getAnimations();
+            if (animations.length === 0) {
                 this.#closeNow();
                 return;
             }
             this.#closing = true;
-            this.#dialog.addEventListener('animationend', this.#slideOutEnded);
+            const slide = this.#slides.take();
+            Promise.allSettled(animations.map((animation) => animation.finished)).then(() => {
+                if (!slide.stale) {
+                    this.#closeNow();
+                }
+            });
         }
         #closeNow() {
             this.#stopSlidingOut();
@@ -13803,7 +13950,7 @@ var fml = (function (exports) {
         }
         #stopSlidingOut() {
             this.#closing = false;
-            this.#dialog.removeEventListener('animationend', this.#slideOutEnded);
+            this.#slides.invalidate();
             this.#dialog.removeAttribute('closing');
         }
         /** @returns {boolean} whether this call is the one that opened the modal */
@@ -14348,7 +14495,7 @@ var fml = (function (exports) {
         }
         /**
          * Fires the section requests again for a panel, whether it is visible or
-         * not, with `first` false once an earlier request was answered.
+         * not, with `first` false once an earlier delivery succeeded.
          * @param {number | Element} ref the panel's index, or the panel itself
          * @returns {Promise<any[] | undefined> | undefined} a promise resolving to
          * the answers, or to undefined when nobody listened or the delivery
@@ -14571,7 +14718,7 @@ var fml = (function (exports) {
         }
         /**
          * Fires the section requests again for a section, whether it is current or
-         * not, with `first` false once an earlier request was answered.
+         * not, with `first` false once an earlier delivery succeeded.
          * @param {string | Element} ref the section's `data-step`, or the section
          * itself
          * @returns {Promise<any[] | undefined> | undefined} a promise resolving to
@@ -14850,8 +14997,11 @@ var fml = (function (exports) {
         /**
          * @param {{ language?: string, translations?: Record<string, any>, httpClient?: HttpClient }} [options]
          * `language` is fixed for the page: a full BCP-47 tag or a primary subtag,
-         * defaulting to `navigator.language`, then to 'en'. Its primary subtag,
-         * lowercased, picks the built-in translations (en, it, es, fr); the messages
+         * defaulting to `navigator.language`, then to 'en', an empty one included.
+         * It is canonicalized (`IT-it` and `it_IT` both read `it-IT`), and one that
+         * is no language tag at all throws here, rather than at the first message
+         * or number formatted in it. Its primary subtag picks the built-in
+         * translations (en, it, es, fr); the messages
          * are the english ones, overridden by that language's, overridden by
          * `translations`, so a language without built-in translations reads in
          * english. `translations` is a flat map of keys to messages: reword built-in
@@ -14859,9 +15009,18 @@ var fml = (function (exports) {
          * `httpClient` is the client every ful component fetches through, registered
          * as the `http-client` component; without one, `configure` builds a client
          * that sends the csrf token and navigates to '/' on a 401 response.
+         * @throws {RangeError} when `language` is not a language tag
          */
         constructor(options = {}) {
-            this.#language = options.language ?? navigator?.language ?? 'en';
+            const language = options.language || navigator?.language || 'en';
+            try {
+                // unicode locale identifiers separate subtags with an underscore too, Intl takes the dash alone
+                this.#language = Intl.getCanonicalLocales(String(language).replaceAll('_', '-'))[0];
+            } catch {
+                throw new RangeError(
+                    `Plugin: language '${language}' is not a language tag: pass a BCP-47 tag such as 'it' or 'it-IT', or leave it out for the browser's language`,
+                );
+            }
             this.#translations = options.translations ?? {};
             this.#httpClient = options.httpClient ?? null;
         }
@@ -14870,7 +15029,7 @@ var fml = (function (exports) {
          * Defines on `registry` the `l10n` module, the `http-client` component,
          * every `ful-*` element, the `loaders:select`, `loaders:form` and
          * `loaders:table` components, and an overlay publishing `l10n` (the merged
-         * messages) and `locale` (the `language` as given) to every template.
+         * messages) and `locale` (the `language`, canonicalized) to every template.
          * @param {{ defineModule(name: string, module: any): any, defineComponent(name: string, component: any): any, defineElement(tag: string, klass: CustomElementConstructor): any, defineOverlay(...data: any[]): any }} registry
          * the ftl `Registry`, each of those methods answering the registry itself
          * @returns {void}
@@ -14878,7 +15037,7 @@ var fml = (function (exports) {
         configure(registry) {
             const httpClient =
                 this.#httpClient ?? HttpClient.builder().withCsrfToken().withRedirectOnUnauthorized('/').build();
-            const language = this.#language.split('-')[0].toLowerCase();
+            const language = this.#language.split('-')[0];
             const l10n = { ...BUILTIN.en, ...BUILTIN[language], ...this.#translations };
             registry
                 .defineModule('l10n', Localization)
@@ -14961,7 +15120,6 @@ var fml = (function (exports) {
         SortButton: SortButton,
         Table: Table,
         TableLoader: TableLoader,
-        TableSchemaParser: TableSchemaParser,
         Tabs: Tabs,
         TextFilter: TextFilter,
         Timing: Timing,
@@ -15040,7 +15198,6 @@ var fml = (function (exports) {
     exports.SortButton = SortButton;
     exports.Table = Table;
     exports.TableLoader = TableLoader;
-    exports.TableSchemaParser = TableSchemaParser;
     exports.Tabs = Tabs;
     exports.Template = Template;
     exports.Templates = Templates;