@optionfactory/fml 9.0.0-rc30 → 9.0.0-rc32

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]');
@@ -10772,6 +10875,10 @@ var fml = (function (exports) {
      * @typedef {{ data: any[], size: number }} TablePageResponse the rows of the
      * requested page and the total number of rows across every page
      */
+    /**
+     * @typedef {{ count: Element, appending: Element, failure: Element, error: Element }} TableStatus the pieces
+     * of the status bar `paging="infinite"` and `paging="virtual"` show in place of the pager
+     */
     /**
      * @typedef {{ load(pageRequest: TablePageRequest, sortRequest: TableSortRequest|null, filterRequest: Record<string, any>): Promise<TablePageResponse> }} TableRowLoader
      */
@@ -10786,6 +10893,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'];
@@ -11240,6 +11351,21 @@ var fml = (function (exports) {
      * for it. Without it the table shows an initial panel until `load`,
      * `reload` or `resetWithFilter` is called.
      *
+     * `paging="infinite"`, read once at the upgrade, replaces the pager with a
+     * status bar saying how many rows of how many are shown, with a reload
+     * button. A load still replaces the rows with one page, scrolling the rows
+     * back to the top; from then on, whenever a row of the last half page
+     * comes into view, the next page is asked with the same size, sort and
+     * filters and appended (see `load`). `reload`, a sort, a filter submit and a
+     * size change start over from the first page.
+     *
+     * `paging="virtual"` shows the same status bar, saying which rows of how many
+     * are in view, and keeps in the page only the page in view and one on either
+     * side of it, the others standing in as empty space sized on the height of
+     * the rows. The rows must scroll inside the table, as `ful-fill` makes them:
+     * a table whose rows the page scrolls appends as `paging="infinite"` does,
+     * and warns. See `load` and `reload`.
+     *
      * 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
@@ -11255,13 +11381,14 @@ var fml = (function (exports) {
      */
     class Table extends ParsedElement {
         /** Read once at the upgrade. */
-        static attributes = ['loader', 'autoload:presence'];
+        static attributes = ['loader', 'autoload:presence', 'paging'];
         /** These stay live after the upgrade: see `pageSize`, `src` and `method`. */
         static observed = ['page-size:number', 'src', 'method'];
         static slots = true;
         static config = {
             searchIcon: 'search',
             emptyIcon: 'inbox',
+            reloadIcon: 'arrow-clockwise',
         };
         static template = `
         <ful-form data-tpl-if="slots.filters">
@@ -11271,7 +11398,9 @@ var fml = (function (exports) {
             <table>
                 <caption data-tpl-if="slots.caption">{{{{ slots.caption }}}}</caption>
                 <thead></thead>
+                <tbody data-tpl-if="virtual" data-ref="before" aria-hidden="true"><tr><td data-tpl-colspan="schema.length"></td></tr></tbody>
                 <tbody></tbody>
+                <tbody data-tpl-if="virtual" data-ref="after" aria-hidden="true"><tr><td data-tpl-colspan="schema.length"></td></tr></tbody>
                 <tbody data-ref="initial">
                     <tr>
                         <td data-tpl-colspan="schema.length">
@@ -11315,7 +11444,16 @@ var fml = (function (exports) {
                 </tfoot>
             </table>
         </ful-table-wrapper>
-        <ful-pagination current="0" total="1"></ful-pagination>
+        <ful-pagination data-tpl-if="!scrolled" current="0" total="1"></ful-pagination>
+        <ful-table-status data-tpl-if="scrolled">
+            <span data-ref="count"></span>
+            <ful-spinner data-ref="appending" role="status" hidden><span class="ful-sr-only">{{ #l10n:t('spinner.loading') }}</span></ful-spinner>
+            <div data-ref="append-failure" role="alert" hidden>
+                <span>{{ #l10n:t('table.error') }} <span data-ref="append-error"></span></span>
+                <button type="button" data-ref="retry">{{ #l10n:t('table.retry') }}</button>
+            </div>
+            <button type="button" data-ref="reload" data-tpl-aria-label="#l10n:t('pagination.reload')"><ful-icon data-tpl-name="config.reloadIcon" aria-hidden="true"></ful-icon></button>
+        </ful-table-status>
     `;
         static templates = {
             row: `
@@ -11333,6 +11471,31 @@ var fml = (function (exports) {
         #feedback;
         #paginator;
         #sorters;
+        #wrapper;
+        /** @type {TableStatus|null} null under the pager */
+        #status = null;
+        /** @type {IntersectionObserver|null} */
+        #endWatch = null;
+        /** @type {Element[]} the rows whose coming into view appends the next page, none while no append is awaited */
+        #watched = [];
+        /** the page the next append asks for, the rows shown, the total the last answer reported and the rows it carried */
+        #appended = { next: 1, shown: 0, total: 0, last: 0 };
+        /** whether the table keeps a window of pages, `paging="virtual"` over rows that scroll inside it */
+        #virtual = false;
+        /** @type {{ before: HTMLElement, after: HTMLElement } | null} the cells standing in for the rows above and below the window */
+        #spacers = null;
+        /** @type {{ first: number, last: number, pages: Map<number, Element[]> } | null} the pages in the page, in order, null while no rows show */
+        #window = null;
+        /** the total number of rows the last answer reported */
+        #total = 0;
+        /** the height of a row the spacers are sized on, measured on the first rows a load shows; 0 until measured */
+        #rowHeight = 0;
+        /** @type {{ readonly stale: boolean } | null} the claim of the window shift in flight */
+        #shifting = null;
+        /** whether the last window shift failed: scrolling asks for nothing more until a retry or a load */
+        #windowFailed = false;
+        /** @type {ReturnType<typeof setTimeout>|undefined} */
+        #jump = undefined;
         /** @type {{ pageRequest: { page: number, size: number }, sortRequest: any, filterRequest: any }} */
         #latestRequest = { pageRequest: { page: 0, size: 10 }, sortRequest: null, filterRequest: {} };
         /** whether a load has been asked for, by autoload or by a caller */
@@ -11362,18 +11525,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 } };
@@ -11459,6 +11623,7 @@ var fml = (function (exports) {
             }
             this.#buildLoader();
             this.#latestRequest = { ...this.#latestRequest, pageRequest: { ...this.#latestRequest.pageRequest, page: 0 } };
+            this.#window = null;
             return true;
         }
         /**
@@ -11469,14 +11634,24 @@ var fml = (function (exports) {
         async render({ slots }) {
             const template = this.template();
             const schema = TableSchemaParser.parse(slots.schema, template);
-            const fragment = template.withOverlay({ slots, schema }).render();
+            const paging = this.declared('paging');
+            const fragment = template
+                .withOverlay({
+                    slots,
+                    schema,
+                    scrolled: paging === 'infinite' || paging === 'virtual',
+                    virtual: paging === 'virtual',
+                })
+                .render();
             const tableWrapper = /** @type HTMLTableElement */ (Nodes.queryChildren(fragment, 'ful-table-wrapper'));
             const table = /** @type HTMLTableElement */ (tableWrapper.querySelector('table'));
             Attributes.forward('table-', this, table);
             this.#buildLoader();
 
+            this.#wrapper = tableWrapper;
+            const status = Nodes.queryChildren(fragment, 'ful-table-status');
             this.#schema = schema;
-            this.#body = table.querySelector(':scope > tbody');
+            this.#body = table.querySelector(':scope > tbody:not([data-ref])');
             this.#loading = table.querySelector(':scope > tbody[data-ref=loading]');
             this.#noAutoload = table.querySelector(':scope > tbody[data-ref=initial]');
             this.#empty = table.querySelector(':scope > tbody[data-ref=empty]');
@@ -11486,16 +11661,67 @@ var fml = (function (exports) {
             this.#feedback = table.querySelector(':scope > tbody[data-ref=feedback]');
             this.#paginator = Nodes.queryChildren(fragment, 'ful-pagination');
             this.replaceChildren(fragment);
+            if (paging === 'virtual') {
+                const overflow = getComputedStyle(tableWrapper).overflowY;
+                this.#virtual = overflow === 'auto' || overflow === 'scroll';
+                if (!this.#virtual) {
+                    console.warn(
+                        'ful-table: paging="virtual" needs rows that scroll inside the table, as ful-fill makes them; this one appends its pages as paging="infinite" does',
+                    );
+                }
+            }
+            if (status) {
+                const piece = (/** @type string */ ref) =>
+                    /** @type Element */ (status.querySelector(`[data-ref=${ref}]`));
+                this.#status = {
+                    count: piece('count'),
+                    appending: piece('appending'),
+                    failure: piece('append-failure'),
+                    error: piece('append-error'),
+                };
+                piece('reload').addEventListener('click', () => this.reload());
+                piece('retry').addEventListener('click', () => {
+                    if (!this.#virtual) {
+                        this.#appendNext();
+                        return;
+                    }
+                    this.#windowFailed = false;
+                    this.#reconcile(true);
+                });
+            }
+            if (this.#virtual) {
+                this.#spacers = {
+                    before: /** @type HTMLElement */ (table.querySelector(':scope > tbody[data-ref=before] td')),
+                    after: /** @type HTMLElement */ (table.querySelector(':scope > tbody[data-ref=after] td')),
+                };
+                // scroll fires once per frame at most, so it needs no throttle of its own
+                tableWrapper.addEventListener(
+                    'scroll',
+                    () => {
+                        this.#countInView();
+                        this.#reconcile(false);
+                    },
+                    { passive: true },
+                );
+            } else if (status) {
+                this.#endWatch = new IntersectionObserver((entries) => {
+                    // an entry queued before the watch moved on to another row, or stopped, asks for nothing
+                    if (entries.some((e) => e.isIntersecting && this.#watched.includes(e.target))) {
+                        this.#appendNext();
+                    }
+                });
+            }
             const thead = /** @type HTMLTableSectionElement */ (this.querySelector('thead'));
             schema.headersTemplate.renderTo(thead);
             this.#sorters = thead.querySelectorAll('ful-sorter');
             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 ?? {},
@@ -11541,6 +11767,14 @@ var fml = (function (exports) {
          * `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.
+         *
+         * Under `paging="virtual"`, once rows show, it asks again for the pages in
+         * the page, with the same size, sort and filters, and shows them where
+         * they are, the scroll position and the widths of the columns kept; the
+         * table is busy and settles, fails and dispatches as a load does, one
+         * `load:success` per page. When the answers report fewer rows than the
+         * window starts at, it loads the first page instead. A `src` or `method`
+         * write still starts over from the first page.
          * @returns {Promise<void>} as `load`
          */
         async reload() {
@@ -11550,6 +11784,9 @@ var fml = (function (exports) {
                 }
                 return;
             }
+            if (this.#window) {
+                return await this.#reloadWindow();
+            }
             return await this.load(
                 this.#latestRequest.pageRequest,
                 this.#latestRequest.sortRequest,
@@ -11579,12 +11816,49 @@ 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;
          * superseded while its rows render, it leaves them to the newer load and
          * dispatches nothing.
+         *
+         * Under `paging="infinite"` the status bar takes the pager's place, and
+         * once the load has dispatched `load:success` the next page is awaited:
+         * when a row of the last half page comes into view, through
+         * whatever scrolls it, the following page is asked for with the same
+         * size, sort and filters and its rows are appended. An append runs
+         * without `aria-busy`, a spinner in the status bar standing in, and
+         * dispatches `load:success` or `load:failure` as a load does, its
+         * `pageRequest` naming the appended page. A failed append keeps the
+         * rows, shows the error in the status bar with a retry button and
+         * rejects to nobody, nothing awaiting it. Appending stops once the rows
+         * shown reach the total the last answer reported, or an answer carries
+         * no rows. A load supersedes an append in flight; `reload` repeats this
+         * load, not the pages appended to it.
+         *
+         * Under `paging="virtual"` the load shows its page as the window, scrolled
+         * to where it sits among the total, and measures two things on its rows:
+         * the height the empty space standing in for the other rows is sized on,
+         * and the width of the columns, which then stay as they are, in
+         * proportion, until the next load, so that the pages coming and going do
+         * not move them. From then on the window follows the scroll: the page in
+         * view and one on either side stay in the page and the others are dropped,
+         * the page holding the focus kept while it is within two pages of them. A
+         * page next to the window is asked for at once; a scroll landing farther
+         * waits for the scroll to rest. Window pages are asked for without
+         * `aria-busy`, a spinner in the status bar standing in, and dispatch
+         * `load:success` or `load:failure` per page as appends do; a failure keeps
+         * the rows and offers a retry. The row in view stays where it is as pages
+         * come and go above it: the table measures it before and after and
+         * corrects the scroll by whatever the browser's own scroll anchoring has
+         * not kept, which is all of it where the browser anchors no table rows
+         * (Firefox), has no scroll anchoring or the rows' container declares
+         * `overflow-anchor: none`, and nothing where it has. The table carries
+         * `aria-rowcount` and each row its `aria-rowindex`.
          * @param {TablePageRequest} pageRequest
          * @param {TableSortRequest|null} sortRequest
          * @param {Record<string, any>} filterRequest
@@ -11595,6 +11869,13 @@ var fml = (function (exports) {
             this.#loadRequested = true;
             this.#requestedFilters = filterRequest;
             const claim = this.#loads.take();
+            this.#watched = [];
+            this.#endWatch?.disconnect();
+            clearTimeout(this.#jump);
+            this.#shifting = null;
+            this.#windowFailed = false;
+            this.#status?.appending.setAttribute('hidden', '');
+            this.#status?.failure.setAttribute('hidden', '');
             this.#loading.toggleAttribute('hidden', this.#body.childElementCount > 0);
             this.#feedback.setAttribute('hidden', '');
             this.#noAutoload.setAttribute('hidden', '');
@@ -11607,6 +11888,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;
@@ -11619,6 +11905,9 @@ var fml = (function (exports) {
                     if (claim.stale) {
                         return;
                     }
+                    if (this.#virtual) {
+                        this.#settleWindow();
+                    }
                     this.removeAttribute('aria-busy');
                     this.dispatchEvent(
                         new CustomEvent('load:success', {
@@ -11627,24 +11916,15 @@ var fml = (function (exports) {
                             detail: { pageRequest, sortRequest, filterRequest, response: pageResponse },
                         }),
                     );
+                    this.#watchEnd(pageRequest.size);
+                    this.#reconcile(false);
                     return;
                 }
             } catch (/** @type any */ error) {
                 if (claim.stale) {
                     return;
                 }
-                this.#loading.setAttribute('hidden', '');
-                this.#body.replaceChildren();
-                this.#feedback.removeAttribute('hidden');
-                this.#feedback.querySelector('[data-ref=feedback-error]').textContent = Localization.of().failure(error);
-                this.removeAttribute('aria-busy');
-                this.dispatchEvent(
-                    new CustomEvent('load:failure', {
-                        bubbles: true,
-                        cancelable: false,
-                        detail: { pageRequest, sortRequest, filterRequest, exception: error },
-                    }),
-                );
+                this.#fail(error, { pageRequest, sortRequest, filterRequest });
                 throw error;
             }
             return await this.load({ page: lastPage, size: pageRequest.size }, sortRequest, filterRequest);
@@ -11675,19 +11955,471 @@ var fml = (function (exports) {
                 filterRequest,
             );
         }
-        #update(pageRequest, sortRequest, filterRequest, pageResponse) {
-            const pages = Math.ceil(pageResponse.size / pageRequest.size);
+        /**
+         * Watches the last half page of rows, so that any of them coming into
+         * view appends the next page, unless the rows shown already reach the
+         * total or the last answer carried none. A single row would be missed by
+         * a scroll jumping past it, to the end for instance.
+         * @param {number} size the rows a page asks for
+         */
+        #watchEnd(size) {
+            const { shown, total, last } = this.#appended;
+            if (!this.#endWatch || !(shown < total) || last === 0) {
+                return;
+            }
+            const rows = [...this.#body.children];
+            this.#watched = rows.slice(Math.max(0, rows.length - Math.ceil(size / 2)));
+            for (const row of this.#watched) {
+                this.#endWatch.observe(row);
+            }
+        }
+        async #appendNext() {
+            const status = /** @type TableStatus */ (this.#status);
+            this.#watched = [];
+            this.#endWatch?.disconnect();
+            const { sortRequest, filterRequest } = this.#latestRequest;
+            const pageRequest = { page: this.#appended.next, size: this.#latestRequest.pageRequest.size };
+            const claim = this.#loads.take();
+            status.failure.setAttribute('hidden', '');
+            status.appending.removeAttribute('hidden');
+            try {
+                const pageResponse = await this.#loader.load(pageRequest, sortRequest, filterRequest);
+                if (claim.stale) {
+                    return;
+                }
+                this.#body.append(
+                    this.template('row')
+                        .withOverlay({ schema: this.#schema, pageRequest, filterRequest, pageResponse })
+                        .render(),
+                );
+                this.#appended = {
+                    next: pageRequest.page + 1,
+                    shown: this.#appended.shown + pageResponse.data.length,
+                    total: pageResponse.size,
+                    last: pageResponse.data.length,
+                };
+                status.count.textContent = Localization.of().t('table.loaded', {
+                    loaded: this.#appended.shown,
+                    total: this.#appended.total,
+                });
+                await Rendering.waitForChildren(this.#body).catch(() => undefined);
+                if (claim.stale) {
+                    return;
+                }
+                status.appending.setAttribute('hidden', '');
+                this.dispatchEvent(
+                    new CustomEvent('load:success', {
+                        bubbles: true,
+                        cancelable: false,
+                        detail: { pageRequest, sortRequest, filterRequest, response: pageResponse },
+                    }),
+                );
+                this.#watchEnd(pageRequest.size);
+            } catch (/** @type any */ error) {
+                if (claim.stale) {
+                    return;
+                }
+                status.appending.setAttribute('hidden', '');
+                status.error.textContent = Localization.of().failure(error);
+                status.failure.removeAttribute('hidden');
+                this.dispatchEvent(
+                    new CustomEvent('load:failure', {
+                        bubbles: true,
+                        cancelable: false,
+                        detail: { pageRequest, sortRequest, filterRequest, exception: error },
+                    }),
+                );
+            }
+        }
+        /**
+         * Renders the rows of a page, numbering them with `aria-rowindex` under
+         * `paging="virtual"`, the header row being the first.
+         * @param {TablePageRequest} pageRequest
+         * @param {Record<string, any>} filterRequest
+         * @param {TablePageResponse} pageResponse
+         * @returns {Element[]}
+         */
+        #pageRows(pageRequest, filterRequest, pageResponse) {
+            const rows = [
+                ...this.template('row')
+                    .withOverlay({ schema: this.#schema, pageRequest, filterRequest, pageResponse })
+                    .render().children,
+            ];
+            if (this.#virtual) {
+                rows.forEach((row, i) => {
+                    row.setAttribute('aria-rowindex', String(pageRequest.page * pageRequest.size + i + 2));
+                });
+            }
+            return rows;
+        }
+        /**
+         * Shows a failed load: the rows go, the error panel shows and
+         * `load:failure` is dispatched.
+         * @param {any} error
+         * @param {{ pageRequest: TablePageRequest, sortRequest: TableSortRequest|null, filterRequest: Record<string, any> }} request
+         */
+        #fail(error, request) {
             this.#loading.setAttribute('hidden', '');
-            this.#body.replaceChildren(
-                this.template('row')
-                    .withOverlay({
-                        schema: this.#schema,
-                        pageRequest,
-                        filterRequest,
-                        pageResponse,
-                    })
-                    .render(),
+            this.#body.replaceChildren();
+            this.#window = null;
+            this.#fitSpacers();
+            this.#status?.count.replaceChildren();
+            this.#feedback.removeAttribute('hidden');
+            this.#feedback.querySelector('[data-ref=feedback-error]').textContent = Localization.of().failure(error);
+            this.removeAttribute('aria-busy');
+            this.dispatchEvent(
+                new CustomEvent('load:failure', {
+                    bubbles: true,
+                    cancelable: false,
+                    detail: { ...request, exception: error },
+                }),
             );
+        }
+        /** Counts the rows of a load just shown and moves the window where its page sits. */
+        #settleWindow() {
+            const table = /** @type HTMLTableElement */ (this.#body.parentElement);
+            table.setAttribute('aria-rowcount', String(this.#total + 1));
+            table.tHead?.rows[0]?.setAttribute('aria-rowindex', '1');
+            const status = /** @type TableStatus */ (this.#status);
+            const window = this.#window;
+            if (!window) {
+                this.#fitSpacers();
+                status.count.textContent = Localization.of().t('table.loaded', { loaded: 0, total: this.#total });
+                return;
+            }
+            const size = this.#latestRequest.pageRequest.size;
+            const from = window.first * size;
+            status.count.textContent = Localization.of().t('table.range', {
+                from: from + 1,
+                to: from + /** @type Element[] */ (window.pages.get(window.first)).length,
+                total: this.#total,
+            });
+            if (this.#measureRows()) {
+                this.#wrapper.scrollTop = from * this.#rowHeight;
+            }
+        }
+        /**
+         * Measures the height of a row and locks the widths of the columns, once
+         * per load, on the rows it shows, then sizes the spacers. A table that is not laid out, inside a
+         * closed disclosure for instance, measures nothing and is measured when
+         * its rows next scroll.
+         * @returns {boolean} whether the rows are measured
+         */
+        #measureRows() {
+            if (this.#rowHeight > 0) {
+                return true;
+            }
+            const count = this.#body.childElementCount;
+            const height = this.#body.getBoundingClientRect().height;
+            if (count === 0 || height === 0) {
+                return false;
+            }
+            this.#rowHeight = height / count;
+            this.#lockColumns();
+            this.#fitSpacers();
+            return true;
+        }
+        /**
+         * Fixes the widths of the columns, in proportion to the table, at those
+         * the rows in the page give them.
+         */
+        #lockColumns() {
+            const table = /** @type HTMLTableElement */ (this.#body.parentElement);
+            const widths = [...(table.tHead?.rows[0]?.cells ?? [])].map((cell) => cell.getBoundingClientRect().width);
+            const sum = widths.reduce((a, b) => a + b, 0);
+            const columns = document.createElement('colgroup');
+            columns.setAttribute('data-ref', 'widths');
+            for (const width of widths) {
+                const column = document.createElement('col');
+                column.style.width = `${(width / sum) * 100}%`;
+                columns.append(column);
+            }
+            table.insertBefore(columns, table.tHead);
+        }
+        #unlockColumns() {
+            this.#body.parentElement?.querySelector(':scope > colgroup[data-ref=widths]')?.remove();
+        }
+        /** Sizes the space standing in for the rows above and below the window. */
+        #fitSpacers() {
+            if (!this.#spacers) {
+                return;
+            }
+            const window = this.#window;
+            const size = this.#latestRequest.pageRequest.size;
+            const above = window ? window.first * size : 0;
+            const below = window ? Math.max(0, this.#total - (window.last + 1) * size) : 0;
+            this.#spacers.before.style.height = `${above * this.#rowHeight}px`;
+            this.#spacers.after.style.height = `${below * this.#rowHeight}px`;
+        }
+        /** Says in the status bar which rows are in view; nothing changes while none is. */
+        #countInView() {
+            const status = /** @type TableStatus */ (this.#status);
+            const size = this.#latestRequest.pageRequest.size;
+            const view = this.#wrapper.getBoundingClientRect();
+            const top = view.top + (this.#body.parentElement?.querySelector(':scope > thead')?.getBoundingClientRect().height ?? 0);
+            let from = 0;
+            let to = 0;
+            for (const [page, rows] of this.#window?.pages ?? []) {
+                rows.forEach((row, i) => {
+                    const rect = row.getBoundingClientRect();
+                    if (rect.bottom > top && rect.top < view.bottom) {
+                        from ||= page * size + i + 1;
+                        to = page * size + i + 1;
+                    }
+                });
+            }
+            if (from > 0) {
+                status.count.textContent = Localization.of().t('table.range', { from, to, total: this.#total });
+            }
+        }
+        /**
+         * The page at the middle of the view: found among the rows in the page,
+         * or estimated on the height of a row when the middle falls in the space
+         * standing in for others.
+         * @param {{ first: number, last: number, pages: Map<number, Element[]> }} window
+         * @returns {number}
+         */
+        #pageInView(window) {
+            const pageHeight = this.#latestRequest.pageRequest.size * this.#rowHeight;
+            const view = this.#wrapper.getBoundingClientRect();
+            const middle = view.top + view.height / 2;
+            const rows = this.#body.getBoundingClientRect();
+            if (middle < rows.top) {
+                return Math.max(0, window.first - Math.ceil((rows.top - middle) / pageHeight));
+            }
+            if (middle >= rows.bottom) {
+                return window.last + 1 + Math.floor((middle - rows.bottom) / pageHeight);
+            }
+            let found = window.first;
+            for (const [page, pageRows] of window.pages) {
+                if (pageRows.length > 0 && pageRows[0].getBoundingClientRect().top <= middle) {
+                    found = page;
+                }
+            }
+            return found;
+        }
+        /**
+         * Moves the window to the page in view and its neighbours. A window next
+         * to the current one moves at once; one farther away waits for the scroll
+         * to rest, unless `settled` says it has.
+         * @param {boolean} settled
+         */
+        #reconcile(settled) {
+            const window = this.#window;
+            const pageCount = Math.ceil(this.#total / this.#latestRequest.pageRequest.size);
+            if (
+                !window ||
+                this.#shifting ||
+                this.#windowFailed ||
+                this.hasAttribute('aria-busy') ||
+                !this.#wrapper.isConnected ||
+                !(pageCount > 0) ||
+                !this.#measureRows()
+            ) {
+                return;
+            }
+            const target = Math.min(pageCount - 1, this.#pageInView(window));
+            let first = Math.max(0, target - 1);
+            let last = Math.min(pageCount - 1, target + 1);
+            const focused = this.#body.contains(document.activeElement)
+                ? /** @type Element */ (document.activeElement).closest('tr')
+                : null;
+            const focusedPage = [...window.pages].find(([, rows]) => focused && rows.includes(focused))?.[0];
+            if (focusedPage !== undefined && Math.max(last, focusedPage) - Math.min(first, focusedPage) <= 4) {
+                first = Math.min(first, focusedPage);
+                last = Math.max(last, focusedPage);
+            }
+            if (first === window.first && last === window.last) {
+                return;
+            }
+            clearTimeout(this.#jump);
+            if (!settled && (last < window.first - 1 || first > window.last + 1)) {
+                this.#jump = setTimeout(() => this.#reconcile(true), 150);
+                return;
+            }
+            this.#shiftWindow(window, first, last);
+        }
+        /**
+         * Asks for the pages of the new window that are not in the page, drops
+         * the ones outside it and keeps the row in view where it is.
+         * @param {{ first: number, last: number, pages: Map<number, Element[]> }} window
+         * @param {number} first
+         * @param {number} last
+         */
+        async #shiftWindow(window, first, last) {
+            const status = /** @type TableStatus */ (this.#status);
+            const claim = this.#loads.hold();
+            this.#shifting = claim;
+            const { sortRequest, filterRequest } = this.#latestRequest;
+            const size = this.#latestRequest.pageRequest.size;
+            const wanted = Array.from({ length: last - first + 1 }, (_, i) => first + i);
+            const missing = wanted.filter((page) => !window.pages.has(page));
+            status.failure.setAttribute('hidden', '');
+            status.appending.removeAttribute('hidden');
+            try {
+                const answers = await Promise.all(
+                    missing.map(async (page) => {
+                        const pageRequest = { page, size };
+                        return { pageRequest, response: await this.#loader.load(pageRequest, sortRequest, filterRequest) };
+                    }),
+                );
+                if (claim.stale) {
+                    return;
+                }
+                const kept = wanted.filter((page) => window.pages.has(page));
+                const top = this.#wrapper.getBoundingClientRect().top;
+                const anchor = kept
+                    .flatMap((page) => window.pages.get(page) ?? [])
+                    .find((row) => row.getBoundingClientRect().bottom > top);
+                const anchorTop = anchor?.getBoundingClientRect().top ?? 0;
+                for (const [page, rows] of window.pages) {
+                    if (page < first || page > last) {
+                        for (const row of rows) {
+                            row.remove();
+                        }
+                    }
+                }
+                /** @type {Map<number, Element[]>} */
+                const pages = new Map();
+                for (const page of wanted) {
+                    const answer = answers.find((a) => a.pageRequest.page === page);
+                    pages.set(
+                        page,
+                        window.pages.get(page) ??
+                            (answer ? this.#pageRows(answer.pageRequest, filterRequest, answer.response) : []),
+                    );
+                }
+                if (kept.length === 0) {
+                    this.#body.replaceChildren(...[...pages.values()].flat());
+                } else {
+                    this.#body.prepend(...wanted.filter((page) => page < kept[0]).flatMap((page) => pages.get(page) ?? []));
+                    this.#body.append(
+                        ...wanted.filter((page) => page > /** @type number */ (kept.at(-1))).flatMap((page) => pages.get(page) ?? []),
+                    );
+                }
+                this.#window = { first, last, pages };
+                this.#total = answers.at(-1)?.response.size ?? this.#total;
+                this.#body.parentElement?.setAttribute('aria-rowcount', String(this.#total + 1));
+                this.#fitSpacers();
+                if (anchor) {
+                    this.#wrapper.scrollTop += anchor.getBoundingClientRect().top - anchorTop;
+                }
+                await Rendering.waitForChildren(this.#body).catch(() => undefined);
+                if (claim.stale) {
+                    return;
+                }
+                if (anchor) {
+                    // the elements in the new rows have rendered since, which can change their height
+                    this.#wrapper.scrollTop += anchor.getBoundingClientRect().top - anchorTop;
+                }
+                status.appending.setAttribute('hidden', '');
+                this.#countInView();
+                for (const { pageRequest, response } of answers) {
+                    this.dispatchEvent(
+                        new CustomEvent('load:success', {
+                            bubbles: true,
+                            cancelable: false,
+                            detail: { pageRequest, sortRequest, filterRequest, response },
+                        }),
+                    );
+                }
+            } catch (/** @type any */ error) {
+                if (claim.stale) {
+                    return;
+                }
+                this.#windowFailed = true;
+                status.appending.setAttribute('hidden', '');
+                status.error.textContent = Localization.of().failure(error);
+                status.failure.removeAttribute('hidden');
+                this.dispatchEvent(
+                    new CustomEvent('load:failure', {
+                        bubbles: true,
+                        cancelable: false,
+                        detail: { pageRequest: { page: missing[0], size }, sortRequest, filterRequest, exception: error },
+                    }),
+                );
+                return;
+            } finally {
+                if (this.#shifting === claim) {
+                    this.#shifting = null;
+                }
+            }
+            this.#reconcile(false);
+        }
+        /**
+         * Asks again for the pages of the window and shows them where they are.
+         * @returns {Promise<void>}
+         */
+        async #reloadWindow() {
+            const window = /** @type {{ first: number, last: number, pages: Map<number, Element[]> }} */ (this.#window);
+            const status = /** @type TableStatus */ (this.#status);
+            const { sortRequest, filterRequest } = this.#latestRequest;
+            const size = this.#latestRequest.pageRequest.size;
+            this.#requestedFilters = filterRequest;
+            const claim = this.#loads.take();
+            clearTimeout(this.#jump);
+            this.#shifting = null;
+            this.#windowFailed = false;
+            status.appending.setAttribute('hidden', '');
+            status.failure.setAttribute('hidden', '');
+            this.setAttribute('aria-busy', 'true');
+            const wanted = Array.from({ length: window.last - window.first + 1 }, (_, i) => window.first + i);
+            try {
+                const answers = await Promise.all(
+                    wanted.map(async (page) => {
+                        const pageRequest = { page, size };
+                        return { pageRequest, response: await this.#loader.load(pageRequest, sortRequest, filterRequest) };
+                    }),
+                );
+                if (claim.stale) {
+                    return;
+                }
+                const total = /** @type {{ response: TablePageResponse }} */ (answers.at(-1)).response.size;
+                const pageCount = Math.ceil(total / size);
+                if (!(window.first < pageCount)) {
+                    return await this.load({ page: 0, size }, sortRequest, filterRequest);
+                }
+                const shown = answers.filter((a) => a.pageRequest.page < pageCount);
+                const pages = new Map(
+                    shown.map((a) => [a.pageRequest.page, this.#pageRows(a.pageRequest, filterRequest, a.response)]),
+                );
+                this.#body.replaceChildren(...[...pages.values()].flat());
+                this.#window = { first: window.first, last: Math.min(window.last, pageCount - 1), pages };
+                this.#total = total;
+                this.#body.parentElement?.setAttribute('aria-rowcount', String(total + 1));
+                this.#fitSpacers();
+                await Rendering.waitForChildren(this.#body).catch(() => undefined);
+                if (claim.stale) {
+                    return;
+                }
+                this.removeAttribute('aria-busy');
+                this.#countInView();
+                for (const { pageRequest, response } of shown) {
+                    this.dispatchEvent(
+                        new CustomEvent('load:success', {
+                            bubbles: true,
+                            cancelable: false,
+                            detail: { pageRequest, sortRequest, filterRequest, response },
+                        }),
+                    );
+                }
+                this.#reconcile(false);
+            } catch (/** @type any */ error) {
+                if (claim.stale) {
+                    return;
+                }
+                this.#fail(error, { pageRequest: { page: window.first, size }, sortRequest, filterRequest });
+                throw error;
+            }
+        }
+        #update(pageRequest, sortRequest, filterRequest, pageResponse) {
+            this.#loading.setAttribute('hidden', '');
+            if (this.#virtual) {
+                this.#rowHeight = 0;
+                this.#unlockColumns();
+            }
+            const rows = this.#pageRows(pageRequest, filterRequest, pageResponse);
+            this.#body.replaceChildren(...rows);
             this.#empty.toggleAttribute('hidden', pageResponse.data.length !== 0);
             if (this.#emptyTemplate && pageResponse.data.length === 0) {
                 this.#emptyAuthors.replaceChildren(
@@ -11696,7 +12428,28 @@ var fml = (function (exports) {
                         .render(),
                 );
             }
-            this.#paginator.update({ current: pageRequest.page, total: pages });
+            if (this.#virtual) {
+                this.#wrapper.scrollTop = 0;
+                this.#total = pageResponse.size;
+                this.#window =
+                    rows.length > 0 ? { first: pageRequest.page, last: pageRequest.page, pages: new Map([[pageRequest.page, rows]]) } : null;
+                return;
+            }
+            if (this.#status) {
+                this.#wrapper.scrollTop = 0;
+                this.#appended = {
+                    next: pageRequest.page + 1,
+                    shown: pageResponse.data.length,
+                    total: pageResponse.size,
+                    last: pageResponse.data.length,
+                };
+                this.#status.count.textContent = Localization.of().t('table.loaded', {
+                    loaded: this.#appended.shown,
+                    total: this.#appended.total,
+                });
+                return;
+            }
+            this.#paginator.update({ current: pageRequest.page, total: Math.ceil(pageResponse.size / pageRequest.size) });
         }
     }
 
@@ -12872,8 +13625,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 +13637,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 +13653,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 +13671,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 +13689,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 +13819,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 +14116,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 +14368,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 +14495,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 +14546,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 +14567,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 +14586,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 +15131,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 +15354,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
@@ -14633,6 +15416,9 @@ var fml = (function (exports) {
         'table.initial': 'Start searching to see results.',
         'table.error': 'Error while loading data:',
         'table.no-data': 'No elements found.',
+        'table.loaded': 'Showing {loaded} of {total}',
+        'table.range': 'Rows {from}-{to} of {total}',
+        'table.retry': 'Retry',
         'dropdown.empty': 'No results',
         'select.remove': 'Remove',
         'files.dropzone-label': 'Click or drop your files here',
@@ -14684,6 +15470,9 @@ var fml = (function (exports) {
         'table.initial': 'Avvia la ricerca per visualizzare i risultati.',
         'table.error': 'Errore nel caricamento dei dati:',
         'table.no-data': 'Nessun elemento trovato.',
+        'table.loaded': 'Mostrati {loaded} di {total}',
+        'table.range': 'Righe {from}-{to} di {total}',
+        'table.retry': 'Riprova',
         'dropdown.empty': 'Nessun risultato',
         'select.remove': 'Rimuovi',
         'files.dropzone-label': 'Clicca o trascina i file qui',
@@ -14735,6 +15524,9 @@ var fml = (function (exports) {
         'table.initial': 'Inicia la búsqueda para ver los resultados.',
         'table.error': 'Error al cargar los datos:',
         'table.no-data': 'No se encontraron elementos.',
+        'table.loaded': 'Mostrando {loaded} de {total}',
+        'table.range': 'Filas {from}-{to} de {total}',
+        'table.retry': 'Reintentar',
         'dropdown.empty': 'Sin resultados',
         'select.remove': 'Eliminar',
         'files.dropzone-label': 'Haz clic o arrastra tus archivos aquí',
@@ -14789,6 +15581,9 @@ var fml = (function (exports) {
         'table.initial': 'Lancez la recherche pour voir les résultats.',
         'table.error': 'Erreur lors du chargement des données :',
         'table.no-data': 'Aucun élément trouvé.',
+        'table.loaded': 'Affichage de {loaded} sur {total}',
+        'table.range': 'Lignes {from} à {to} sur {total}',
+        'table.retry': 'Réessayer',
         'dropdown.empty': 'Aucun résultat',
         'select.remove': 'Retirer',
         'files.dropzone-label': 'Cliquez ou déposez vos fichiers ici',
@@ -14850,8 +15645,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 +15657,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 +15677,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 +15685,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 +15768,6 @@ var fml = (function (exports) {
         SortButton: SortButton,
         Table: Table,
         TableLoader: TableLoader,
-        TableSchemaParser: TableSchemaParser,
         Tabs: Tabs,
         TextFilter: TextFilter,
         Timing: Timing,
@@ -15040,7 +15846,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;