@optionfactory/fml 8.0.0 → 8.0.2

package/dist/fml.mjs

@@ -3457,7 +3457,7 @@ class EvaluatingVisitor {
             case '<=':
                 return lhs <= rhs;
             default:
-                throw new Error('unknown cmp op ' + node.op);
+                throw new Error(`unknown cmp op ${node.op}`);
         }
     }
     [nodes.call](node) {
@@ -3468,7 +3468,7 @@ class EvaluatingVisitor {
         }
         const fn = module[fnRef.value];
         if (!fn) {
-            throw new Error(`Function "#${fnRef.module === null ? '' : fnRef.module + ':'}${fnRef.value}" not found`);
+            throw new Error(`Function "#${fnRef.module === null ? '' : `${fnRef.module}:`}${fnRef.value}" not found`);
         }
         const args = node.args.map((arg) => this.visit(arg));
         return fn.apply(this.#resolve_proxy(), args);
@@ -3504,14 +3504,14 @@ class EvaluatingVisitor {
         return cond ? cond : this.visit(node.ifFalse);
     }
     [nodes.access](node) {
-        let prev = undefined;
+        let prev ;
         let cur = this.visit(node.lhs);
         for (let i = 0; i !== node.rhs.length; ++i) {
             const rhs = node.rhs[i];
             if (rhs.ns && cur == null) {
                 return undefined;
             }
-            let value = undefined;
+            let value ;
             switch (rhs.type) {
                 case nodes.member: {
                     value = cur[rhs.rhs];
@@ -3552,7 +3552,7 @@ class EvaluatingVisitor {
                     case nodes.templated.ten:
                         return { type: nodes.dom.n, value: this.visit(node.value) };
                     default:
-                        throw new Error('unknown node type ' + node.type.toString());
+                        throw new Error(`unknown node type ${node.type.toString()}`);
                 }
             });
     }
@@ -3728,7 +3728,7 @@ class Attributes {
             .forEach((a) => {
                 const target = a.substring(prefix.length);
                 if (target === 'class') {
-                    const classes = from.getAttribute(prefix + 'class')?.split(/\s+/).filter((a) => a.length) ?? [];
+                    const classes = from.getAttribute(`${prefix}class`)?.split(/\s+/).filter((a) => a.length) ?? [];
                     to.classList.add(...classes);
                     return;
                 }
@@ -3820,8 +3820,7 @@ class Nodes {
      * @returns
      */
     static isParsed(el) {
-        //@ts-ignore
-        for (let c = el; c; c = c.parentNode) {
+        for (let c = /** @type {Node | null} */ (el); c; c = c.parentNode) {
             if (c.nextSibling) {
                 return true;
             }
@@ -3884,19 +3883,18 @@ class Nodes {
 }
 
 class NodeOperations {
-    #forRemoval;
-    constructor() {
-        this.#forRemoval = [];
-    }
+    #forRemoval = new Set();
     removed(node) {
-        return this.#forRemoval.includes(node);
+        return this.#forRemoval.has(node);
     }
     remove(node) {
         node.replaceChildren?.();
         Object.keys(node.dataset || {})
             .filter((k) => k.startsWith('tpl'))
-            .forEach((k) => delete node.dataset[k]);
-        this.#forRemoval.push(node);
+            .forEach((k) => {
+                delete node.dataset[k];
+            });
+        this.#forRemoval.add(node);
     }
     popData(node, key) {
         const v = node.dataset[key];
@@ -3914,9 +3912,10 @@ class NodeOperations {
         this.remove(ref);
     }
     cleanup() {
-        while (this.#forRemoval.length) {
-            this.#forRemoval.pop().remove();
+        for (const node of this.#forRemoval) {
+            node.remove();
         }
+        this.#forRemoval.clear();
     }
 }
 
@@ -3971,7 +3970,7 @@ class CommandsHandler {
     }
     static tplRemove(node, value, ops, modules, dataStack) {
         switch (value.toLowerCase()) {
-            case 'tag':
+            case 'tag': {
                 const fragment = new DocumentFragment();
                 while (node.firstChild) {
                     fragment.appendChild(node.firstChild);
@@ -3985,6 +3984,7 @@ class CommandsHandler {
                     ops.remove(node);
                 }
                 break;
+            }
             case 'body':
                 node.replaceChildren();
                 break;
@@ -4050,8 +4050,10 @@ class CommandsHandler {
     }
 }
 
-// Module-isolated string cache for dataset-to-attribute conversions
+// Module-isolated string cache for dataset-to-attribute conversions, bounded with
+// FIFO eviction like the expression ast cache
 const attributeCache = new Map();
+const ATTRIBUTE_CACHE_MAX_SIZE = 1000;
 
 /**
  * Converts a tpl camelCase dataset key into a kebab-case attribute name.
@@ -4062,6 +4064,9 @@ const attributeCache = new Map();
 function toAttr(dataSetKey) {
     let cached = attributeCache.get(dataSetKey);
     if (!cached) {
+        if (attributeCache.size >= ATTRIBUTE_CACHE_MAX_SIZE) {
+            attributeCache.delete(attributeCache.keys().next().value);
+        }
         cached = dataSetKey
             .substring(3)
             .split(/(?=[A-Z])/)
@@ -4196,9 +4201,10 @@ class Template {
      * @param {string} expression
      * @param {(typeof Expressions.MODE_EXPRESSION | typeof Expressions.MODE_TEMPLATED)?} [mode]
      * @param {...*} data
+     * @returns the evaluated expression result
      */
     evaluate(expression, mode, ...data) {
-        new ExpressionEvaluator(this.#modules, this.#dataStack).withOverlay(...data).evaluate(expression, mode);
+        return new ExpressionEvaluator(this.#modules, this.#dataStack).withOverlay(...data).evaluate(expression, mode);
     }
     /**
      * Returns an expression evaluator with bound modules and dataStack.
@@ -4343,8 +4349,8 @@ class RenderError extends Error {
         if (node.nodeType === Node.TEXT_NODE) {
             node.nodeValue = node.nodeValue.trim();
         }
-        for (var n = 0; n < node.childNodes.length; n++) {
-            var child = node.childNodes[n];
+        for (let n = 0; n < node.childNodes.length; n++) {
+            const child = node.childNodes[n];
             if (child.nodeType === Node.TEXT_NODE) {
                 child.nodeValue = child.nodeValue.trim();
                 if (child.nodeValue.length === 0) {
@@ -4363,8 +4369,7 @@ class UpgradeQueue {
     #q = new Map();
     constructor() {
         document.addEventListener('DOMContentLoaded', async () => {
-            const pending = Array.from(this.entries).map(([child, promise]) => promise);
-            await Promise.all(pending);
+            await this.settle();
             document.dispatchEvent(
                 new CustomEvent('ftl:ready', {
                     bubbles: false,
@@ -4373,16 +4378,39 @@ class UpgradeQueue {
             );
         });
     }
+    #finished = new Map();
     enqueue(el) {
         if (this.#q.has(el)) {
             //already upgrading, can happen when disconnecting an element
             //while it's already queued for upgrade (e.g.: ful-form)
             return;
         }
+        //settling waits on a signal that only ever resolves, so nothing here attaches a
+        //rejection handler to the upgrade itself: a component that fails is still
+        //reported the way it always was
+        const { promise: finished, resolve: markFinished } = /** @type {PromiseWithResolvers<void>} */ (
+            Promise.withResolvers()
+        );
         const promise = Nodes.waitParsed(el)
             .then(() => el.upgrade())
-            .finally(() => this.#q.delete(el));
+            .finally(() => {
+                this.#q.delete(el);
+                this.#finished.delete(el);
+                markFinished();
+            });
         this.#q.set(el, promise);
+        this.#finished.set(el, finished);
+    }
+    /**
+     * Waits for every queued upgrade to settle, including the ones enqueued while
+     * waiting: a component is only queued once its parent connects it, so a single pass
+     * would miss everything nested. A component that fails to upgrade does not hold the
+     * others back, readiness means the queue drained rather than that everything worked.
+     */
+    async settle() {
+        while (this.#finished.size !== 0) {
+            await Promise.all(Array.from(this.#finished.values()));
+        }
     }
     get entries() {
         return this.#q.entries();
@@ -4578,18 +4606,30 @@ class Templates {
     }
 }
 
-class Rendering {
-    static async waitFor(el) {
+/**
+ * Waits for the queued upgrades matching the filter, including the ones enqueued while
+ * waiting: a component is only queued once its parent connects it, so a single pass
+ * would miss everything nested.
+ * @param {(el: Element) => boolean} accept
+ */
+const settle = async (accept) => {
+    for (;;) {
         const pending = Array.from(registry.upgrades)
-            .filter(([child, promise]) => el.contains(child))
-            .map(([child, promise]) => promise);
+            .filter(([child]) => accept(child))
+            .map(([, promise]) => promise);
+        if (pending.length === 0) {
+            return;
+        }
         await Promise.all(pending);
     }
+};
+
+class Rendering {
+    static async waitFor(el) {
+        await settle((child) => el.contains(child));
+    }
     static async waitForChildren(el) {
-        const pending = Array.from(registry.upgrades)
-            .filter(([child, promise]) => el !== child && el.contains(child))
-            .map(([child, promise]) => promise);
-        await Promise.all(pending);
+        await settle((child) => el !== child && el.contains(child));
     }
 }
 
@@ -4631,7 +4671,7 @@ class ParsedElement extends HTMLElement {
     template(name) {
         const { modules, data } = registry.context();
         let t = this.#bits().TEMPLATES[name ?? 'default'].withData(data).withModules(modules);
-        for (let k of ['l10n', 'config']) {
+        for (const k of ['l10n', 'config']) {
             const v = this.constructor[k];
             if (v) {
                 t = t.withOverlay({ [k]: v });
@@ -4661,6 +4701,19 @@ class ParsedElement extends HTMLElement {
             return;
         }
         Reflect.set(this, 'disabled', disabled);
+        if (disabled) {
+            this.#unclaimFormDisabled();
+        }
+    }
+    //a disabled ancestor fieldset already matches the element through :disabled, and
+    //an attribute of its own would keep the element disabled once the fieldset is
+    //re-enabled, as formDisabledCallback(false) is only delivered on an actual state
+    //change. a claim of its own made while already disabled by ancestry is safe: the
+    //platform fires no callback for it, so it survives the fieldset being re-enabled
+    #unclaimFormDisabled() {
+        if (this.closest('fieldset:disabled')) {
+            this.removeAttribute('disabled');
+        }
     }
     async upgrade() {
         if (this.#parsed) {
@@ -4676,6 +4729,9 @@ class ParsedElement extends HTMLElement {
         );
         const disabled = this.#disabledBeforeParsed ?? false;
         await this.render({ slots, observed, disabled });
+        if (disabled) {
+            this.#unclaimFormDisabled();
+        }
     }
     render(c) {}
     reflect(fn) {
@@ -4772,13 +4828,22 @@ class Base64 {
 
         let vi = 0;
         let si = 0;
-        while (vi < str.length * 0.75) {
+        //every group yields three bytes, but a padded input stops short of the last
+        //one or two: writing them anyway would rely on typed arrays dropping writes
+        //past their length
+        while (vi < nbytes) {
             const v1 = d.indexOf(str.charAt(si++));
             const v2 = d.indexOf(str.charAt(si++));
             const v3 = d.indexOf(str.charAt(si++));
             const v4 = d.indexOf(str.charAt(si++));
             view[vi++] = (v1 << 2) | (v2 >> 4);
+            if (vi === nbytes) {
+                break;
+            }
             view[vi++] = ((v2 & 15) << 4) | (v3 >> 2);
+            if (vi === nbytes) {
+                break;
+            }
             view[vi++] = ((v3 & 3) << 6) | v4;
         }
 
@@ -4805,7 +4870,7 @@ class Hex {
         return Array.from(bytes)
             .map((b) => b.toString(16))
             .map((b) => (upper ? b.toUpperCase() : b))
-            .map((o) => o.padStart(2, 0))
+            .map((o) => o.padStart(2, '0'))
             .join('');
     }
 }
@@ -5135,6 +5200,26 @@ const unmarshal = async (response, type) => {
     }
 };
 
+/**
+ * Yields the entries of a headers or params initializer preserving nullish values:
+ * normalizing through `Headers`/`URLSearchParams` first would stringify them to
+ * "null"/"undefined" instead of removing the key.
+ * @param {any} source
+ * @returns {Iterable<[string, any]>}
+ */
+const rawEntries = (source) => {
+    if (source == null) {
+        return [];
+    }
+    if (typeof source === 'string') {
+        return new URLSearchParams(source);
+    }
+    if (typeof source[Symbol.iterator] === 'function') {
+        return source;
+    }
+    return Object.entries(source);
+};
+
 class HttpRequestBuilder {
     #client;
     #method;
@@ -5187,11 +5272,11 @@ class HttpRequestBuilder {
     }
     /**
      * Add all passed headers to the request, overriding existing ones if that key already exists. Null and undefined values cause the key to be removed.
-     * @param {HeadersInit} hs
+     * @param {HeadersInit|Record<string,string|null|undefined>} hs
      * @returns {HttpRequestBuilder} this builder
      */
     headers(hs) {
-        for (const [k, v] of new Headers(hs).entries()) {
+        for (const [k, v] of rawEntries(hs)) {
             if (v == null) {
                 this.#headers.delete(k);
             } else {
@@ -5216,11 +5301,11 @@ class HttpRequestBuilder {
     }
     /**
      * Add all query parameters to the request, overriding existing ones if that key already exists. Null and undefined values cause the key to be removed
-     * @param {URLSearchParams|Record<string,string>|string[][]|string} ps
+     * @param {URLSearchParams|Record<string,string|null|undefined>|string[][]|string} ps
      * @returns {HttpRequestBuilder} this builder
      */
     params(ps) {
-        for (const [k, v] of new URLSearchParams(ps).entries()) {
+        for (const [k, v] of rawEntries(ps)) {
             if (v == null) {
                 this.#params.delete(k);
             } else {
@@ -5236,8 +5321,10 @@ class HttpRequestBuilder {
      * @returns {HttpRequestBuilder} this builder
      */
     param(k, ...vs) {
+        //overriding, as header, headers and params all do: pass every value in one
+        //call to get a multi valued parameter
+        this.#params.delete(k);
         if (vs.length === 0 || vs[0] == null) {
-            this.#params.delete(k);
             return this;
         }
         for (const v of vs) {
@@ -5270,7 +5357,7 @@ class HttpRequestBuilder {
     /**
      * Sets the request body as a FormData configured using the callback.
      * `Content-Type: multipart/form-data` header is automatically added by fetch if not explicitly set.
-     * @param {function(HttpMultipartRequestCustomizer):void} callback
+     * @param {(c: HttpMultipartRequestCustomizer) => void} callback
      */
     multipart(callback) {
         const formData = new FormData();
@@ -5435,7 +5522,7 @@ class HttpMultipartRequestCustomizer {
      * @returns this builder
      */
     blobs(name, values) {
-        for (let v of values) {
+        for (const v of values) {
             this.#formData.append(name, v);
         }
         return this;
@@ -5470,7 +5557,16 @@ class LocalStorage extends Storage {
     }
     static load(k) {
         const got = localStorage.getItem(k);
-        return got === null ? undefined : JSON.parse(got);
+        if (got === null) {
+            return undefined;
+        }
+        try {
+            return JSON.parse(got);
+        } catch {
+            //not what save wrote: drop it, otherwise every later read fails the same way
+            localStorage.removeItem(k);
+            return undefined;
+        }
     }
     static remove(k) {
         localStorage.removeItem(k);
@@ -5488,7 +5584,16 @@ class SessionStorage extends Storage {
     }
     static load(k) {
         const got = sessionStorage.getItem(k);
-        return got === null ? undefined : JSON.parse(got);
+        if (got === null) {
+            return undefined;
+        }
+        try {
+            return JSON.parse(got);
+        } catch {
+            //not what save wrote: drop it, otherwise every later read fails the same way
+            sessionStorage.removeItem(k);
+            return undefined;
+        }
     }
     static remove(k) {
         sessionStorage.removeItem(k);
@@ -5510,7 +5615,7 @@ class VersionedLocalStorage {
             return undefined;
         }
         if (stored.revision !== revision) {
-            localStorage.removeItem(key);
+            LocalStorage.remove(key);
             return undefined;
         }
         return stored.data;
@@ -5527,7 +5632,7 @@ class VersionedSessionStorage {
             return undefined;
         }
         if (stored.revision !== revision) {
-            localStorage.removeItem(key);
+            SessionStorage.remove(key);
             return undefined;
         }
         return stored.data;
@@ -5662,7 +5767,7 @@ class Timing {
      */
     static debounce(timeoutMs, func, options) {
         const opts = options ?? Timing.DEBOUNCE_DEFAULT;
-        let tid = null;
+        let tid = /** @type {number | null} */ (null);
         let args = [];
         let previousTimestamp = 0;
 
@@ -5682,8 +5787,8 @@ class Timing {
             }
         };
 
-        const debounced = function () {
-            args = [...arguments];
+        const debounced = (...called) => {
+            args = called;
             previousTimestamp = performance.now();
             if (tid === null) {
                 tid = setTimeout(later, timeoutMs);
@@ -5692,7 +5797,11 @@ class Timing {
                 }
             }
         };
-        const abort = () => clearTimeout(tid);
+        const abort = () => {
+            clearTimeout(tid ?? undefined);
+            tid = null;
+            args = [];
+        };
         return [debounced, abort];
     }
     static THROTTLE_DEFAULT = 0;
@@ -5707,7 +5816,7 @@ class Timing {
      */
     static throttle(timeoutMs, func, options) {
         const opts = options ?? Timing.THROTTLE_DEFAULT;
-        let tid = null;
+        let tid = /** @type {number | null} */ (null);
         let args = [];
         let previousTimestamp = 0;
 
@@ -5719,13 +5828,13 @@ class Timing {
                 args = [];
             }
         };
-        const throttled = function () {
+        const throttled = (...called) => {
             const now = performance.now();
             if (!previousTimestamp && opts & Timing.THROTTLE_NO_LEADING) {
                 previousTimestamp = now;
             }
             const remaining = previousTimestamp === 0 ? 0 : timeoutMs - (now - previousTimestamp);
-            args = [...arguments];
+            args = called;
             if (remaining <= 0 || remaining > timeoutMs) {
                 if (tid !== null) {
                     clearTimeout(tid);
@@ -5740,7 +5849,11 @@ class Timing {
                 tid = setTimeout(later, remaining);
             }
         };
-        const abort = () => clearTimeout(tid);
+        const abort = () => {
+            clearTimeout(tid ?? undefined);
+            tid = null;
+            args = [];
+        };
         return [throttled, abort];
     }
 }
@@ -5754,7 +5867,7 @@ class Bindings {
      */
     static flatten(obj, prefix, stops) {
         return Object.keys(obj).reduce((acc, k) => {
-            const pre = prefix.length ? prefix + '.' + k : k;
+            const pre = prefix.length ? `${prefix}.${k}` : k;
             if (!stops.has(pre) && typeof obj[k] === 'object' && obj[k] !== null) {
                 Object.assign(acc, Bindings.flatten(obj[k], pre, stops));
             } else {
@@ -5772,7 +5885,7 @@ class Bindings {
     static providePath(result, path, value) {
         const keys = path.split('.').map((k) => (/^[0-9]+$/.test(k) ? +k : k));
         let current = result ?? {};
-        let previous = null;
+        let previous = /** @type {any} */ (null);
         for (let i = 0; ; ++i) {
             const ckey = keys[i];
             const pkey = keys[i - 1];
@@ -5805,12 +5918,12 @@ class Bindings {
             if (!el.checked) {
                 return undefined;
             }
-            return el.dataset['fulBindType'] === 'boolean' ? el.value === 'true' : el.value;
+            return el.dataset.fulBindType === 'boolean' ? el.value === 'true' : el.value;
         }
         if (el.getAttribute('type') === 'checkbox') {
             return el.checked;
         }
-        if (el.dataset['fulBindType'] === 'boolean') {
+        if (el.dataset.fulBindType === 'boolean') {
             return !el.value ? null : el.value === 'true';
         }
         if (el.tagName === 'INPUT' || el.tagName === 'SELECT' || el.tagName === 'TEXTAREA') {
@@ -5843,12 +5956,14 @@ class Bindings {
 
     /**
      *
-     * @param {Element  & {checked?: boolean} & {value?: any}} el
+     * @param {Element & {dataset?: any} & {checked?: boolean} & {value?: any}} el
      * @returns
      */
     static mutate(el, raw) {
         if (el.getAttribute('type') === 'radio') {
-            el.checked = el.getAttribute('value') === raw;
+            //values are matched as strings, as ful-radio-group does: extract decodes
+            //boolean radios, and payloads carry numbers where the attribute is text
+            el.checked = raw != null && el.getAttribute('value') === String(raw);
             return;
         }
         if (el.getAttribute('type') === 'checkbox') {
@@ -5872,7 +5987,9 @@ class Bindings {
     static errors(form, es, scrollOnError) {
         const fieldErrors = es.filter((e) => e.type === 'FIELD_ERROR' || e.type === 'INVALID_FORMAT');
         const globalErrors = es.filter((e) => e.type !== 'FIELD_ERROR' && e.type !== 'INVALID_FORMAT');
-        form.querySelectorAll(`[name]`).forEach((el) => el.setCustomValidity?.(''));
+        form.querySelectorAll(`[name]`).forEach((el) => {
+            el.setCustomValidity?.('');
+        });
         form.querySelectorAll('ful-errors').forEach((el) => {
             el.replaceChildren();
             el.setAttribute('hidden', '');
@@ -5880,12 +5997,12 @@ class Bindings {
         fieldErrors.forEach((e) => {
             const name = e.context.replace(/\[/g, '.').replace(/\]\./g, '.').replace(/\]/g, '');
             const parts = name.split('.');
-            for (let i = parts.length; i != 0; --i) {
+            for (let i = parts.length; i !== 0; --i) {
                 const prefix = parts.slice(0, i).join('.');
                 const suffix = parts.slice(i, parts.length).join('.');
-                form.querySelectorAll(`[name='${CSS.escape(prefix)}']`).forEach((input) =>
-                    input.setCustomValidity?.(e.reason, suffix),
-                );
+                form.querySelectorAll(`[name='${CSS.escape(prefix)}']`).forEach((input) => {
+                    input.setCustomValidity?.(e.reason, suffix);
+                });
             }
         });
         form.querySelectorAll('ful-errors').forEach((el) => {
@@ -5895,7 +6012,7 @@ class Bindings {
                 el.removeAttribute('hidden');
             }
         });
-        if (es.length == 0 || !scrollOnError) {
+        if (es.length === 0 || !scrollOnError) {
             return;
         }
         Array.from(form.querySelectorAll(`:invalid`))
@@ -5967,7 +6084,8 @@ class FormLoader {
 class Form extends ParsedElement {
     form;
     render() {
-        const form = (this.form = document.createElement('form'));
+        const form = document.createElement('form');
+        this.form = form;
         form.setAttribute('novalidate', '');
         Attributes.forward('form-', this, form);
         form.replaceChildren(...this.childNodes);
@@ -5990,50 +6108,53 @@ class Form extends ParsedElement {
      */
     async submit(submitter) {
         this.spinner(true);
+        //one try: building the loader and preparing the request are as much part of a
+        //submit as sending it, and a mapper that throws is how a caller reports a
+        //problem with the values
+        let values;
+        let request;
         try {
             const loader = registry.component(this.getAttribute('loader') ?? 'loaders:form').create(this);
-            const values = Bindings.extractFrom(this.form, submitter);
-            let request = await loader.prepare(values, this);
-            try {
-                const se = new CustomEvent('submit', {
+            values = Bindings.extractFrom(this.form, submitter);
+            request = await loader.prepare(values, this);
+            const se = new CustomEvent('submit', {
+                bubbles: true,
+                cancelable: true,
+                detail: { submitter, values, request },
+            });
+            if (!this.dispatchEvent(se)) {
+                return;
+            }
+            this.errors = [];
+            const sre = new CustomEvent('submit:requested', {
+                bubbles: true,
+                cancelable: false,
+                detail: { submitter, values: se.detail.values, request: se.detail.request },
+            });
+            let response = await AsyncEvents.fireAsync(this, sre, { mode: 'pipeline' });
+            request = sre.detail.request;
+
+            response = await loader.submit(request, this, response);
+            const mapped = await loader.transform(response, this);
+            this.dispatchEvent(
+                new CustomEvent('submit:success', {
                     bubbles: true,
-                    cancelable: true,
-                    detail: { submitter, values, request },
-                });
-                if (!this.dispatchEvent(se)) {
-                    return;
-                }
-                this.errors = [];
-                const sre = new CustomEvent('submit:requested', {
+                    cancelable: false,
+                    detail: { submitter, values, request, response: mapped },
+                }),
+            );
+        } catch (e) {
+            this.dispatchEvent(
+                new CustomEvent('submit:failure', {
                     bubbles: true,
                     cancelable: false,
-                    detail: { submitter, values: se.detail.values, request: se.detail.request },
-                });
-                let response = await AsyncEvents.fireAsync(this, sre, { mode: 'pipeline' });
-                request = sre.detail.request;
-
-                response = await loader.submit(request, this, response);
-                const mapped = await loader.transform(response, this);
-                this.dispatchEvent(
-                    new CustomEvent('submit:success', {
-                        bubbles: true,
-                        cancelable: false,
-                        detail: { submitter, values, request, response: mapped },
-                    }),
-                );
-            } catch (e) {
-                this.dispatchEvent(
-                    new CustomEvent('submit:failure', {
-                        bubbles: true,
-                        cancelable: false,
-                        detail: { submitter, values, request, exception: e },
-                    }),
-                );
-                if (e instanceof Failure) {
-                    this.errors = e.problems;
-                }
-                console.warn('failed to submit form', this, 'reason:', e);
+                    detail: { submitter, values, request, exception: e },
+                }),
+            );
+            if (e instanceof Failure) {
+                this.errors = e.problems;
             }
+            console.warn('failed to submit form', this, 'reason:', e);
         } finally {
             this.spinner(false);
         }
@@ -6041,7 +6162,20 @@ class Form extends ParsedElement {
     reset() {
         this.form.reset();
     }
+    #spinning = 0;
     spinner(spin) {
+        //submits can overlap: only the outermost one saves and restores the button states
+        if (spin) {
+            ++this.#spinning;
+            if (this.#spinning !== 1) {
+                return;
+            }
+        } else {
+            this.#spinning = Math.max(0, this.#spinning - 1);
+            if (this.#spinning !== 0) {
+                return;
+            }
+        }
         this.querySelectorAll('ful-spinner').forEach((el) => {
             const hel = /** @type HTMLElement */ (el);
             hel.hidden = !spin;
@@ -6072,7 +6206,7 @@ class Form extends ParsedElement {
 }
 
 class Input extends ParsedElement {
-    static observed = ['value', 'readonly:presence', 'required:presence'];
+    static observed = ['value', 'readonly:presence', 'required:presence', 'placeholder'];
     static slots = true;
     static template = `
         <div class="form-label">
@@ -6109,12 +6243,6 @@ class Input extends ParsedElement {
         this._input = fragment.querySelector('input,textarea');
 
         Attributes.forward('input-', this, this._input);
-        if (!skipObservedSetup) {
-            this.disabled = disabled;
-            this.readonly = observed.readonly;
-            this.required = observed.required;
-            this.value = observed.value;
-        }
         this._input.addEventListener('keydown', (evt) => {
             if (evt.key !== 'Enter' || this._type() === 'textarea') {
                 return;
@@ -6130,19 +6258,26 @@ class Input extends ParsedElement {
             form.requestSubmit(submitter);
         });
         this._input.addEventListener('input', (evt) => {
-            const re = this.getAttribute('mask');
-            if (!re) {
+            const mask = this.getAttribute('mask');
+            if (!mask) {
                 return;
             }
+            const strip = (v) => v.replace(new RegExp(mask, 'g'), '');
             const before = evt.target.value;
-            const after = before.replace(new RegExp(re, 'g'), '');
+            const after = strip(before);
             if (before === after) {
                 return;
             }
             const start = evt.target.selectionStart;
-            const offset = before.length - after.length;
             evt.target.value = after;
-            evt.target.setSelectionRange(start - offset, start - offset);
+            if (start === null) {
+                //email, number and the date types have no selection to restore
+                return;
+            }
+            //the caret keeps its place among the characters that survived, so only the
+            //ones stripped before it count
+            const caret = strip(before.slice(0, start)).length;
+            evt.target.setSelectionRange(caret, caret);
         });
         this._input.addEventListener('change', (evt) => {
             evt.stopPropagation();
@@ -6162,6 +6297,15 @@ class Input extends ParsedElement {
         this._input.ariaDescribedByElements = [this._fieldError];
         this._input.ariaLabelledByElements = [label];
         this.replaceChildren(fragment);
+        if (!skipObservedSetup) {
+            // biome-ignore lint/complexity/noUselessThisAlias: keeps checkJs from seeing these as class fields
+            const el = this;
+            el.disabled = disabled;
+            el.readonly = observed.readonly;
+            el.required = observed.required;
+            el.placeholder = observed.placeholder;
+            el.value = observed.value;
+        }
     }
     get value() {
         const uppercase = this.hasAttribute('uppercase');
@@ -6188,6 +6332,11 @@ class Input extends ParsedElement {
     }
     set disabled(d) {
         Attributes.toggle(this._input, 'disabled', d);
+        //also on the host: a form associated element only matches :disabled through its
+        //own attribute, and that is what keeps it out of the submitted values. no reflect
+        //is needed, disabled is deliberately not observed: the platform delivers it
+        //through formDisabledCallback, which also covers a disabled ancestor fieldset
+        Attributes.toggle(this, 'disabled', d);
     }
     get required() {
         return this._input.getAttribute('aria-required') === 'true';
@@ -6198,6 +6347,18 @@ class Input extends ParsedElement {
             Attributes.toggle(this, 'required', d);
         });
     }
+    get placeholder() {
+        const v = this._input.getAttribute('placeholder');
+        return v === ' ' ? null : v;
+    }
+    set placeholder(d) {
+        //without a placeholder :placeholder-shown never matches, and floating labels
+        //rely on it, so a blank one stands in for none
+        Attributes.set(this._input, 'placeholder', d ?? ' ');
+        this.reflect(() => {
+            Attributes.set(this, 'placeholder', d);
+        });
+    }
     focus(options) {
         this._input.focus(options);
     }
@@ -6217,23 +6378,23 @@ class Input extends ParsedElement {
 
 class LocalDate extends ParsedElement {
     render() {
-        const content = this.innerHTML.trim();
+        const content = this.textContent.trim();
         if (content === '') {
-            this.innerHTML = this.getAttribute('default') ?? '';
+            this.replaceChildren(this.getAttribute('default') ?? '');
             return;
         }
         const locale = this.getAttribute('locale') ?? Intl.DateTimeFormat().resolvedOptions().locale;
         const formatter = new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'numeric', day: 'numeric' });
         const [y, m, d] = content.split('-').map(Number);
-        this.innerHTML = formatter.format(new Date(y, m - 1, d));
+        this.replaceChildren(formatter.format(new Date(y, m - 1, d)));
     }
 }
 
 class Instant extends ParsedElement {
     render() {
-        const content = this.innerHTML.trim();
+        const content = this.textContent.trim();
         if (content === '') {
-            this.innerHTML = this.getAttribute('default') ?? '';
+            this.replaceChildren(this.getAttribute('default') ?? '');
             return;
         }
         const locale = this.getAttribute('locale') ?? Intl.DateTimeFormat().resolvedOptions().locale;
@@ -6246,7 +6407,7 @@ class Instant extends ParsedElement {
             second: 'numeric',
             hour12: false,
         });
-        this.innerHTML = format.format(new Date(Instant.isoToLocal(content)));
+        this.replaceChildren(format.format(new Date(Instant.isoToLocal(content))));
     }
     static isoToLocal(iso) {
         //this is so sad
@@ -6259,16 +6420,17 @@ class Instant extends ParsedElement {
 }
 
 class InputLocalDate extends Input {
-    static observed = ['value', 'readonly:presence', 'required:presence', 'min', 'max', 'step'];
+    static observed = ['value', 'readonly:presence', 'required:presence', 'placeholder', 'min', 'max', 'step'];
     _type() {
         return 'date';
     }
     render(conf) {
         const { observed } = conf;
         super.render(conf);
+        //step first: on a time input min and max are snapped to its grid
+        this.step = observed.step;
         this.min = observed.min;
         this.max = observed.max;
-        this.step = observed.step;
     }
     get min() {
         const v = this._input.min;
@@ -6314,13 +6476,14 @@ class InputLocalDate extends Input {
             case 'd':
                 r.setDate(r.getDate() + offset * sign);
                 break;
-            case 'm':
+            case 'm': {
                 const originalDay = r.getDate();
                 r.setMonth(r.getMonth() + offset * sign);
                 if (r.getDate() !== originalDay) {
                     r.setDate(0);
                 }
                 break;
+            }
             case 'y':
                 r.setFullYear(r.getFullYear() + offset * sign);
                 break;
@@ -6333,10 +6496,62 @@ class InputLocalTime extends InputLocalDate {
     _type() {
         return 'time';
     }
+    get min() {
+        const v = this._input.min;
+        return v === '' ? null : v;
+    }
+    set min(v) {
+        this._input.min = this.#fromNowOrOffset(v);
+    }
+    get max() {
+        const v = this._input.max;
+        return v === '' ? null : v;
+    }
+    set max(v) {
+        this._input.max = this.#fromNowOrOffset(v);
+    }
+    /**
+     * Resolves `now` and hour or minute offsets against the current time, wrapping
+     * around midnight. `m` is minutes here, unlike the date offsets of the parent where
+     * it is months: months mean nothing on a time. Anything else is passed through.
+     */
+    #fromNowOrOffset(v) {
+        if (!v) {
+            return '';
+        }
+        const resolved = new Date();
+        if (v !== 'now') {
+            const re = /^([+-])(\d+)([hm])$/;
+            const match = re.exec(v);
+            if (!match) {
+                return v;
+            }
+            const sign = match[1] === '-' ? -1 : 1;
+            const offset = +match[2] * sign;
+            if (match[3] === 'h') {
+                resolved.setHours(resolved.getHours() + offset);
+            } else {
+                resolved.setMinutes(resolved.getMinutes() + offset);
+            }
+        }
+        return InputLocalTime.#snapped(resolved, Number(this._input.step) || 60);
+    }
+    /**
+     * Truncates a time to the step grid: min anchors that grid, so a bound that is not
+     * on it makes every value on it invalid.
+     */
+    static #snapped(date, stepSeconds) {
+        const pad = (n) => String(n).padStart(2, '0');
+        const seconds = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds();
+        const snapped = Math.floor(seconds / stepSeconds) * stepSeconds;
+        const hh = pad(Math.floor(snapped / 3600));
+        const mm = pad(Math.floor((snapped % 3600) / 60));
+        return stepSeconds % 60 === 0 ? `${hh}:${mm}` : `${hh}:${mm}:${pad(snapped % 60)}`;
+    }
 }
 
 class InputInstant extends Input {
-    static observed = ['value', 'readonly:presence', 'required:presence', 'min', 'max', 'step'];
+    static observed = ['value', 'readonly:presence', 'required:presence', 'placeholder', 'min', 'max', 'step'];
     _type() {
         return 'datetime-local';
     }
@@ -6381,28 +6596,28 @@ class InputFile extends Input {
     static l10n = {
         en: {
             dropzonelabel: 'Click or drop your files here',
-            unaccepptablefiletype: 'Only files of type {0} are supported',
+            unacceptablefiletype: 'Only files of type {0} are supported',
             maxfilesizeexceeded: 'Maximum supported file size is {0}',
             maxtotalsizeexceeded: 'Maximum supported total file size is {0}',
             maxfilesexceeded: 'Maximum files count exceeded',
         },
         it: {
             dropzonelabel: 'Clicca o trascina i file qui',
-            unaccepptablefiletype: 'Solo i file di tipo {0} sono supportati',
+            unacceptablefiletype: 'Solo i file di tipo {0} sono supportati',
             maxfilesizeexceeded: 'La dimensione massima di un file è di {0}',
             maxtotalsizeexceeded: 'La dimensione massima complessiva dei file è di {0}',
             maxfilesexceeded: 'Numero massimo di file superato',
         },
         es: {
             dropzonelabel: 'Haz clic o arrastra tus archivos aquí',
-            unaccepptablefiletype: 'Solo se admiten archivos de tipo {0}',
+            unacceptablefiletype: 'Solo se admiten archivos de tipo {0}',
             maxfilesizeexceeded: 'El tamaño máximo de archivo admitido es {0}',
             maxtotalsizeexceeded: 'El tamaño total máximo admitido es {0}',
             maxfilesexceeded: 'Se ha superado el número máximo de archivos',
         },
         fr: {
             dropzonelabel: 'Cliquez ou déposez vos fichiers ici',
-            unaccepptablefiletype: 'Seuls les fichiers de type {0} sont pris en charge',
+            unacceptablefiletype: 'Seuls les fichiers de type {0} sont pris en charge',
             maxfilesizeexceeded: 'La taille maximale de fichier prise en charge est {0}',
             maxtotalsizeexceeded: 'La taille totale maximale prise en charge est {0}',
             maxfilesexceeded: 'Nombre maximal de fichiers dépassé',
@@ -6412,6 +6627,7 @@ class InputFile extends Input {
         'value',
         'readonly:presence',
         'required:presence',
+        'placeholder',
         'accept:csv',
         'multiple:presence',
         'itemlist:presence',
@@ -6461,7 +6677,7 @@ class InputFile extends Input {
     };
     render(conf) {
         const { observed } = conf;
-        super.render(conf);
+        super.render({ ...conf, skipObservedSetup: true });
         this.#items = this.querySelector('ful-item-list');
         this.#dropzone = this.querySelector('[data-ref=dropzone]');
         this.#warnings = this.querySelector('ful-field-warnings');
@@ -6472,6 +6688,12 @@ class InputFile extends Input {
         this.maxfiles = observed.maxfiles;
         this.maxfilesize = observed.maxfilesize;
         this.maxtotalsize = observed.maxtotalsize;
+
+        this.disabled = conf.disabled;
+        this.readonly = observed.readonly;
+        this.required = observed.required;
+        this.placeholder = observed.placeholder;
+        this.value = observed.value;
         this.#warnings.addEventListener('animationend', (e) => {
             e.target.remove();
         });
@@ -6479,11 +6701,17 @@ class InputFile extends Input {
             if (!e.target.closest('button')) {
                 return;
             }
-            const fileName = e.target.closest('ful-item').dataset.name;
+            const idx = [...this.#items.children].indexOf(e.target.closest('ful-item'));
+            if (idx === -1) {
+                return;
+            }
             const dt = new DataTransfer();
-            [...this.files].filter((f) => f.name !== fileName).forEach((f) => dt.items.add(f));
+            [...this.files]
+                .filter((f, i) => i !== idx)
+                .forEach((f) => {
+                    dt.items.add(f);
+                });
             this.files = dt.files;
-            this.#update();
         });
         this.#dropzone.addEventListener('click', (e) => {
             this.querySelector('input')?.click();
@@ -6494,10 +6722,15 @@ class InputFile extends Input {
         });
         this.#dropzone.addEventListener('drop', (e) => {
             e.preventDefault();
+            const dropped = [...e.dataTransfer.items].filter((i) => i.kind === 'file');
+            if (dropped.length === 0) {
+                return;
+            }
             const dt = new DataTransfer();
-            [...e.dataTransfer.items].filter((i) => i.kind === 'file').forEach((i) => dt.items.add(i.getAsFile()));
+            dropped.forEach((i) => {
+                dt.items.add(i.getAsFile());
+            });
             this.files = dt.files;
-            this.#update();
         });
         this._input.addEventListener('change', (e) => {
             this.#update();
@@ -6512,6 +6745,7 @@ class InputFile extends Input {
     }
     #update() {
         this.setCustomValidity();
+        this.#warnings.replaceChildren();
         this.#ensureAcceptable();
         this.#ensureFileSizes();
         this.#ensureTotalSize();
@@ -6522,7 +6756,7 @@ class InputFile extends Input {
             .renderTo(this.#items);
     }
     warning(key, args) {
-        this.template('warning').withOverlay({ key, args }).renderTo(this.#warnings);
+        this.template('warning').withOverlay({ key, args }).appendTo(this.#warnings);
     }
     #ensureAcceptable() {
         if (!this.#accept.length) {
@@ -6535,10 +6769,14 @@ class InputFile extends Input {
         if (unacceptable.length === 0) {
             return;
         }
-        this.warning('unaccepptablefiletype', this.#accept.join(', '));
+        this.warning('unacceptablefiletype', this.#accept.join(', '));
         const dt = new DataTransfer();
-        [...this.files].filter((f) => !unacceptable.includes(f)).forEach((f) => dt.items.add(f));
-        this.files = dt.files;
+        [...this.files]
+            .filter((f) => !unacceptable.includes(f))
+            .forEach((f) => {
+                dt.items.add(f);
+            });
+        this._input.files = dt.files;
     }
     #ensureFilesCount() {
         if (this.#maxfiles === null) {
@@ -6548,8 +6786,7 @@ class InputFile extends Input {
             return;
         }
         this.warning('maxfilesexceeded');
-        const dt = new DataTransfer();
-        this.files = dt.files;
+        this._input.files = new DataTransfer().files;
     }
 
     #ensureFileSizes() {
@@ -6562,8 +6799,12 @@ class InputFile extends Input {
         }
         this.warning('maxfilesizeexceeded', this.#formatByteSize(this.#maxfilesize));
         const dt = new DataTransfer();
-        [...this.files].filter((f) => !oversized.includes(f)).forEach((f) => dt.items.add(f));
-        this.files = dt.files;
+        [...this.files]
+            .filter((f) => !oversized.includes(f))
+            .forEach((f) => {
+                dt.items.add(f);
+            });
+        this._input.files = dt.files;
     }
     #ensureTotalSize() {
         if (this.#maxtotalsize === null) {
@@ -6574,7 +6815,7 @@ class InputFile extends Input {
             return;
         }
         this.warning('maxtotalsizeexceeded', this.#formatByteSize(this.#maxtotalsize));
-        this.files = new DataTransfer().files;
+        this._input.files = new DataTransfer().files;
     }
     get accept() {
         return this.#accept;
@@ -6600,6 +6841,7 @@ class InputFile extends Input {
     }
     set files(vs) {
         this._input.files = vs;
+        this.#update();
     }
     get file() {
         return this.files[0] ?? null;
@@ -6620,7 +6862,6 @@ class InputFile extends Input {
             return;
         }
         this.files = new DataTransfer().files;
-        this.#update();
     }
     get totalsize() {
         return Array.from(this.files).reduce((a, f) => a + f.size, 0);
@@ -6787,7 +7028,7 @@ class SelectLoader {
         const http = registry.component('http-client');
         const responseMapper = SelectLoader.#responseMapperFrom(el);
 
-        if ('chunked' == el.getAttribute('mode')) {
+        if ('chunked' === el.getAttribute('mode')) {
             return new PartialRemoteLoader({
                 http,
                 url: el.getAttribute('src'),
@@ -6863,8 +7104,14 @@ class Dropdown extends ParsedElement {
         });
         this.replaceChildren(fragment);
     }
+    #selected() {
+        return this.#menu?.querySelector('[selected]') ?? this.#menu?.firstElementChild ?? null;
+    }
     acceptSelection() {
-        const selected = this.#menu.querySelector('[selected]') ?? this.#menu.firstElementChild;
+        const selected = this.#selected();
+        if (!selected) {
+            return;
+        }
         this.#change(selected);
     }
     update(values) {
@@ -6900,6 +7147,9 @@ class Dropdown extends ParsedElement {
         try {
             const data = await loader();
             this.update(data);
+        } catch (e) {
+            this.hide();
+            throw e;
         } finally {
             this.#spinner.setAttribute('hidden', '');
             this.#menu.removeAttribute('hidden');
@@ -6907,9 +7157,9 @@ class Dropdown extends ParsedElement {
     }
     async moveOrShow(forward, loader) {
         if (this.shown) {
-            const selected = this.#menu.querySelector('[selected]') ?? this.#menu.firstElementChild;
-            const candidate = selected[`${forward ? 'next' : 'previous'}ElementSibling`];
-            if (candidate) {
+            const selected = this.#selected();
+            const candidate = selected?.[`${forward ? 'next' : 'previous'}ElementSibling`];
+            if (selected && candidate) {
                 selected.removeAttribute('selected');
                 candidate.setAttribute('selected', '');
                 candidate.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
@@ -6962,6 +7212,7 @@ class Select extends ParsedElement {
     #multiple;
     #fieldError;
     #values = new Map();
+    #token = 0;
     constructor() {
         super();
         this.internals = this.attachInternals();
@@ -6974,7 +7225,11 @@ class Select extends ParsedElement {
             .create(this, { options: slots.options });
 
         this.#multiple = this.hasAttribute('multiple');
-        await this.#loader.prefetch?.();
+        try {
+            await this.#loader.prefetch?.();
+        } catch (/** @type any */ e) {
+            console.warn('failed to prefetch select options', this, 'reason:', e);
+        }
         const fragment = this.template().withOverlay({ slots, name }).render();
         this.#input = fragment.querySelector('input');
         this.#items = fragment.querySelector('ful-item-list');
@@ -6993,11 +7248,9 @@ class Select extends ParsedElement {
         this.#fieldError = fragment.querySelector('ful-field-error');
         this.#input.ariaDescribedByElements = [this.#fieldError];
         this.#input.ariaLabelledByElements = [label];
-
-        const self = this;
         const [dload, abortdload] = Timing.throttle(400, () => {
-            self.#input.setAttribute('aria-expanded', 'true');
-            self.#ddmenu.show(() => self.#loader.load(self.#input.value));
+            this.#input.setAttribute('aria-expanded', 'true');
+            this.#ddmenu.show(() => this.#loader.load(this.#input.value));
         });
         this.addEventListener('click', (/** @type any */ e) => {
             if (e.target.matches('input')) {
@@ -7064,13 +7317,13 @@ class Select extends ParsedElement {
                 case 'ArrowUp': {
                     e.preventDefault();
                     this.#input.setAttribute('aria-expanded', 'true');
-                    this.#ddmenu.moveOrShow(false, () => self.#loader.load(self.#input.value));
+                    this.#ddmenu.moveOrShow(false, () => this.#loader.load(this.#input.value));
                     break;
                 }
                 case 'ArrowDown': {
                     e.preventDefault();
                     this.#input.setAttribute('aria-expanded', 'true');
-                    this.#ddmenu.moveOrShow(true, () => self.#loader.load(self.#input.value));
+                    this.#ddmenu.moveOrShow(true, () => this.#loader.load(this.#input.value));
                     break;
                 }
                 case 'Escape': {
@@ -7079,6 +7332,12 @@ class Select extends ParsedElement {
                     break;
                 }
                 case 'Enter': {
+                    if (!this.#ddmenu.shown) {
+                        //nothing to accept: submit the form as ful-input does. the inner
+                        //input carries form="" so it never submits one on its own
+                        this.#requestSubmit();
+                        return;
+                    }
                     e.preventDefault();
                     this.#input.setAttribute('aria-expanded', 'false');
                     this.#ddmenu.acceptSelection();
@@ -7127,6 +7386,16 @@ class Select extends ParsedElement {
     async withLoader(fn) {
         return await fn(this.#loader);
     }
+    #requestSubmit() {
+        const form = this.internals.form;
+        if (!form) {
+            return;
+        }
+        const candidates = /** @type [HTMLButtonElement|HTMLInputElement] */ (
+            Array.from(form.querySelectorAll('button:not(:disabled), input:not(:disabled)'))
+        );
+        form.requestSubmit(candidates.find((el) => el.type === 'submit'));
+    }
     #changed() {
         const selection = [...this.#values.entries()].map((e) => ({
             key: e[0],
@@ -7156,16 +7425,43 @@ class Select extends ParsedElement {
         this.template('items').withOverlay({ entries: this.#values.entries() }).renderTo(this.#items);
     }
     set value(vs) {
-        if (vs === null) {
-            this.#values = new Map();
-            this.#syncBadges();
+        //the csvm mapper yields [] for a missing multiple value, an empty string is
+        //left alone: it is a usable key for an <option value="">
+        const keys = vs == null ? [] : Array.isArray(vs) ? vs : [vs];
+        //the keys are known synchronously and are all `value` reads, so they are applied
+        //now: only the labels need the loader, until then a key stands in for its own
+        this.#values = new Map(keys.map((k) => [k, [k]]));
+        this.#syncBadges();
+        const token = ++this.#token;
+        if (keys.length === 0) {
             return;
         }
-        (async () => {
-            const entries = await (this.#multiple ? this.#loader.exact(...vs) : this.#loader.exact(vs));
-            this.#values = new Map(entries.map((e) => [e[0], e.slice(1)]));
-            this.#syncBadges();
-        })();
+        this.#resolve(keys, token);
+    }
+    /**
+     * Resolves the labels of the assigned keys. A failed lookup is left to reject so
+     * that it is reported like any other failure: the keys stay applied either way.
+     */
+    async #resolve(keys, token) {
+        const entries = await this.#loader.exact(...keys);
+        if (token !== this.#token) {
+            //a newer assignment has been made in the meantime
+            return;
+        }
+        //label the keys that are still selected: a removal made while the lookup was in
+        //flight must not be undone by it, and a key the loader does not know is dropped
+        const resolved = new Map(entries.map((e) => [e[0], e.slice(1)]));
+        for (const key of keys) {
+            if (!this.#values.has(key)) {
+                continue;
+            }
+            if (resolved.has(key)) {
+                this.#values.set(key, resolved.get(key));
+            } else {
+                this.#values.delete(key);
+            }
+        }
+        this.#syncBadges();
     }
     get value() {
         if (this.#multiple) {
@@ -7184,6 +7480,11 @@ class Select extends ParsedElement {
     }
     set disabled(d) {
         Attributes.toggle(this.#input, 'disabled', d);
+        //also on the host: a form associated element only matches :disabled through its
+        //own attribute, and that is what keeps it out of the submitted values. no reflect
+        //is needed, disabled is deliberately not observed: the platform delivers it
+        //through formDisabledCallback, which also covers a disabled ancestor fieldset
+        Attributes.toggle(this, 'disabled', d);
     }
     get readonly() {
         return this.#input.readOnly;
@@ -7289,7 +7590,9 @@ class RadioGroup extends ParsedElement {
             return [input, label];
         });
 
-        radioEls.forEach((el) => el.remove());
+        radioEls.forEach((el) => {
+            el.remove();
+        });
         this.template().withOverlay({ name, slots, inputsAndLabels }).renderTo(this);
         this.#fieldset = this.firstElementChild;
         this.disabled = disabled;
@@ -7333,6 +7636,11 @@ class RadioGroup extends ParsedElement {
     }
     set disabled(d) {
         Attributes.toggle(this.#fieldset, 'disabled', d);
+        //also on the host: a form associated element only matches :disabled through its
+        //own attribute, and that is what keeps it out of the submitted values. no reflect
+        //is needed, disabled is deliberately not observed: the platform delivers it
+        //through formDisabledCallback, which also covers a disabled ancestor fieldset
+        Attributes.toggle(this, 'disabled', d);
     }
     get required() {
         return this.#fieldset.getAttribute('aria-required') === 'true';
@@ -7382,7 +7690,7 @@ class Checkbox extends ParsedElement {
         this.internals.role = 'presentation';
     }
     render({ slots, observed, disabled }) {
-        const isSwitch = this.getAttribute('type') == 'switch';
+        const isSwitch = this.getAttribute('type') === 'switch';
         const klass = isSwitch ? 'form-check form-switch' : 'form-check';
         const fragment = this.template().withOverlay({ slots, klass, isSwitch }).render();
         this.#container = fragment.firstElementChild;
@@ -7446,6 +7754,11 @@ class Checkbox extends ParsedElement {
     }
     set disabled(d) {
         Attributes.toggle(this.#input, 'disabled', d);
+        //also on the host: a form associated element only matches :disabled through its
+        //own attribute, and that is what keeps it out of the submitted values. no reflect
+        //is needed, disabled is deliberately not observed: the platform delivers it
+        //through formDisabledCallback, which also covers a disabled ancestor fieldset
+        Attributes.toggle(this, 'disabled', d);
     }
     get required() {
         return this.#input.getAttribute('aria-required') === 'true';
@@ -7486,9 +7799,10 @@ class Spinner extends ParsedElement {
 class SortButton extends ParsedElement {
     static observed = ['order'];
     #order;
-    render() {
+    render({ observed }) {
         const sorter = this.getAttribute('sorter');
         const orders = ['asc', 'desc', null];
+        this.order = observed.order;
         this.addEventListener('click', () => {
             const nextOrder = orders[(orders.indexOf(this.order) + 1) % 3];
             this.dispatchEvent(
@@ -7578,10 +7892,12 @@ class Pagination extends ParsedElement {
     #total = 0;
     #current = 0;
     render({ observed }) {
-        this.update(observed.current ?? 0, observed.total ?? 0);
+        this.total = observed.total ?? 0;
+        this.current = observed.current ?? 0;
         this.addEventListener('click', (/** @type any */ evt) => {
             const el = evt.target.closest('a');
-            if (!el) {
+            if (!el || el.classList.contains('disabled')) {
+                //a disabled link leads nowhere: the page it would ask for does not exist
                 return;
             }
             this.dispatchEvent(
@@ -7597,25 +7913,20 @@ class Pagination extends ParsedElement {
     }
     update(current, total) {
         const maxRender = Number(this.getAttribute('pages') ?? '5');
-        const prev = { index: Math.max(0, current - 1), enabled: current > 0 };
+        const hasPrev = current > 0;
+        const hasNext = current + 1 < total;
+        //a disabled arrow carries no page: there is nothing valid for it to point at
+        const prev = { index: hasPrev ? current - 1 : null, enabled: hasPrev };
         const curr = { index: current, label: current + 1 };
-        const next = { index: Math.min(total, current + 1), enabled: current + 1 < total };
-        const pages = [
-            {
-                index: current,
-                label: current + 1,
-            },
-        ];
-        for (let mid = current, offset = 1; offset !== maxRender && pages.length != maxRender; ++offset) {
-            const p = mid - offset;
-            if (p >= 0) {
-                pages.unshift({ index: p, label: p + 1 });
-            }
-            const n = mid + offset;
-            if (n < total) {
-                pages.push({ index: n, label: n + 1 });
-            }
-        }
+        const next = { index: hasNext ? current + 1 : null, enabled: hasNext };
+        //the window holds at most maxRender pages, centered on the current one and slid
+        //back towards the end so it stays full on the last pages
+        const rendered = Math.max(1, Math.min(maxRender, total));
+        const first = Math.max(0, Math.min(current - Math.floor((rendered - 1) / 2), total - rendered));
+        const pages = Array.from({ length: rendered }, (_, offset) => ({
+            index: first + offset,
+            label: first + offset + 1,
+        }));
         this.template().withOverlay({ total, prev, curr, next, pages }).renderTo(this);
     }
     get total() {
@@ -7642,9 +7953,10 @@ class Pagination extends ParsedElement {
 
 class TableSchemaParser {
     static parse(nodeOrFragment, template) {
-        const schema = Nodes.queryChildren(nodeOrFragment, 'schema');
+        //nodeOrFragment is undefined when the slot is missing altogether
+        const schema = nodeOrFragment ? Nodes.queryChildren(nodeOrFragment, 'schema') : null;
         if (!schema) {
-            throw new Error(`missing expected <schema> in ${nodeOrFragment}`);
+            throw new Error('missing expected <schema>: ful-table needs a <template slot="schema"> holding one');
         }
         const headersTr = document.createElement('tr');
         const rowsTr = document.createElement('tr');
@@ -7863,9 +8175,10 @@ class Table extends ParsedElement {
         this.#noAutoload = table.querySelector(':scope > tbody[data-ref=initial]');
         this.#feedback = table.querySelector(':scope > tbody[data-ref=feedback]');
         this.#paginator = Nodes.queryChildren(fragment, 'ful-pagination');
-        this.#sorters = table.querySelectorAll(':scope > thead ful-sorter') ?? [];
         this.replaceChildren(fragment);
-        schema.headersTemplate.renderTo(this.querySelector('thead'));
+        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'));
@@ -7900,11 +8213,16 @@ class Table extends ParsedElement {
         this.addEventListener('sort-requested', async (/** @type any */ e) => {
             const sortRequest = e.detail.value.order ? e.detail.value : null;
             await this.load(this.#latestRequest.pageRequest, sortRequest, this.#latestRequest.filterRequest);
-            this.#sorters.forEach((s) => (s.order = null));
+            this.#sorters.forEach((s) => {
+                s.order = null;
+            });
             e.target.order = e.detail.value.order;
         });
         if (this.hasAttribute('autoload')) {
-            await this.reload();
+            //not awaited: the first load must not hold up the upgrade, and a loader that
+            //fails or never answers must not keep ftl:ready from firing for the page.
+            //load renders its own error state and lets the failure reject, so it is reported
+            this.reload();
         }
     }
 
@@ -7917,7 +8235,7 @@ class Table extends ParsedElement {
     }
     async load(pageRequest, sortRequest, filterRequest) {
         this.#body.replaceChildren();
-        this.#loading.removeAttribute('hidden', '');
+        this.#loading.removeAttribute('hidden');
         this.#feedback.setAttribute('hidden', '');
         this.#noAutoload.setAttribute('hidden', '');
         try {
@@ -7926,7 +8244,7 @@ class Table extends ParsedElement {
             this.#update(pageRequest, sortRequest, filterRequest, pageResponse);
         } catch (/** @type any */ error) {
             this.#loading.setAttribute('hidden', '');
-            this.#feedback.removeAttribute('hidden', '');
+            this.#feedback.removeAttribute('hidden');
             if (!error.problems) {
                 this.#feedback.querySelector('[data-ref=feedback-error]').textContent = error;
             } else {
@@ -7968,7 +8286,7 @@ class Table extends ParsedElement {
 }
 
 class InstantFilter extends Input {
-    static observed = ['value:json', 'readonly:presence', 'required:presence'];
+    static observed = ['value:json', 'readonly:presence', 'required:presence', 'placeholder'];
     static template = `
         <div class="form-label">
             <label>{{{{ slots.default }}}}</label>
@@ -8002,10 +8320,16 @@ class InstantFilter extends Input {
         this.#operator = this.querySelector('[data-ref=operator]');
         this.#value1 = this.querySelector('[data-ref=value1]');
         this.#value2 = this.querySelector('[data-ref=value2]');
+        //Input.render only re-dispatches changes coming from the first operand
+        this.#value2.addEventListener('change', (evt) => {
+            evt.stopPropagation();
+            this.#notifyChange();
+        });
 
         this.disabled = conf.disabled;
         this.readonly = conf.observed.readonly;
         this.required = conf.observed.required;
+        this.placeholder = conf.observed.placeholder;
         this.value = conf.observed.value;
 
         this.addEventListener('click', (evt) => {
@@ -8015,9 +8339,13 @@ class InstantFilter extends Input {
             }
             const btn = /** @type HTMLButtonElement */ (target.closest('ul')?.previousElementSibling);
             const value = /** @type String */ (target.getAttribute('value'));
+            const previous = btn.getAttribute('value');
             Attributes.toggle(this.#value2, 'hidden', value !== 'BETWEEN');
             btn.setAttribute('value', value);
             btn.innerHTML = target.innerHTML;
+            if (previous !== value) {
+                this.#notifyChange();
+            }
         });
     }
 
@@ -8033,14 +8361,40 @@ class InstantFilter extends Input {
             return;
         }
         const [operator, ...values] = v;
-        this.#operator.setAttribute('value', operator);
+        this.#showOperator(operator);
         this.#value1.value = values[0] ? Instant.isoToLocal(values[0]) : values[0];
         this.#value2.value = values[1] ? Instant.isoToLocal(values[1]) : values[1];
     }
+    #showOperator(operator) {
+        this.#operator.setAttribute('value', operator);
+        const items = Array.from(this.#operator.nextElementSibling?.querySelectorAll('li > a[value]') ?? []);
+        const item = items.find((a) => a.getAttribute('value') === operator);
+        if (item) {
+            this.#operator.innerHTML = item.innerHTML;
+        }
+        Attributes.toggle(this.#value2, 'hidden', operator !== 'BETWEEN');
+    }
+    #notifyChange() {
+        this.dispatchEvent(
+            new CustomEvent('change', {
+                bubbles: true,
+                cancelable: false,
+                detail: {
+                    value: this.value,
+                },
+            }),
+        );
+    }
+    get readonly() {
+        return super.readonly;
+    }
     set readonly(v) {
         this.#value2.readOnly = v;
         super.readonly = v;
     }
+    get disabled() {
+        return super.disabled;
+    }
     set disabled(d) {
         Attributes.toggle(this.#value2, 'disabled', d);
         super.disabled = d;
@@ -8048,7 +8402,7 @@ class InstantFilter extends Input {
 }
 
 class LocalDateFilter extends Input {
-    static observed = ['value:json', 'readonly:presence', 'required:presence'];
+    static observed = ['value:json', 'readonly:presence', 'required:presence', 'placeholder'];
     static template = `
         <div class="form-label">
             <label>{{{{ slots.default }}}}</label>
@@ -8083,10 +8437,16 @@ class LocalDateFilter extends Input {
         this.#operator = this.querySelector('[data-ref=operator]');
         this.#value1 = this.querySelector('[data-ref=value1]');
         this.#value2 = this.querySelector('[data-ref=value2]');
+        //Input.render only re-dispatches changes coming from the first operand
+        this.#value2.addEventListener('change', (evt) => {
+            evt.stopPropagation();
+            this.#notifyChange();
+        });
 
         this.disabled = conf.disabled;
         this.readonly = conf.observed.readonly;
         this.required = conf.observed.required;
+        this.placeholder = conf.observed.placeholder;
         this.value = conf.observed.value;
 
         this.addEventListener('click', (evt) => {
@@ -8096,14 +8456,18 @@ class LocalDateFilter extends Input {
             }
             const btn = /** @type HTMLButtonElement */ (target.closest('ul')?.previousElementSibling);
             const value = /** @type String */ (target.getAttribute('value'));
+            const previous = btn.getAttribute('value');
             Attributes.toggle(this.#value2, 'hidden', value !== 'BETWEEN');
             btn.setAttribute('value', value);
             btn.innerHTML = target.innerHTML;
+            if (previous !== value) {
+                this.#notifyChange();
+            }
         });
     }
     get value() {
         const operator = this.#operator.getAttribute('value');
-        const values = operator == 'BETWEEN' ? [this.#value1.value, this.#value2.value] : [this.#value1.value];
+        const values = operator === 'BETWEEN' ? [this.#value1.value, this.#value2.value] : [this.#value1.value];
         return values.some((v) => v === '') ? undefined : [operator, ...values];
     }
     set value(v) {
@@ -8113,14 +8477,40 @@ class LocalDateFilter extends Input {
             return;
         }
         const [operator, ...values] = v;
-        this.#operator.setAttribute('value', operator);
+        this.#showOperator(operator);
         this.#value1.value = values[0];
         this.#value2.value = values[1];
     }
+    #showOperator(operator) {
+        this.#operator.setAttribute('value', operator);
+        const items = Array.from(this.#operator.nextElementSibling?.querySelectorAll('li > a[value]') ?? []);
+        const item = items.find((a) => a.getAttribute('value') === operator);
+        if (item) {
+            this.#operator.innerHTML = item.innerHTML;
+        }
+        Attributes.toggle(this.#value2, 'hidden', operator !== 'BETWEEN');
+    }
+    #notifyChange() {
+        this.dispatchEvent(
+            new CustomEvent('change', {
+                bubbles: true,
+                cancelable: false,
+                detail: {
+                    value: this.value,
+                },
+            }),
+        );
+    }
+    get readonly() {
+        return super.readonly;
+    }
     set readonly(v) {
         this.#value2.readOnly = v;
         super.readonly = v;
     }
+    get disabled() {
+        return super.disabled;
+    }
     set disabled(d) {
         Attributes.toggle(this.#value2, 'disabled', d);
         super.disabled = d;
@@ -8128,7 +8518,7 @@ class LocalDateFilter extends Input {
 }
 
 class TextFilter extends Input {
-    static observed = ['value:json', 'readonly:presence', 'required:presence'];
+    static observed = ['value:json', 'readonly:presence', 'required:presence', 'placeholder'];
     static template = `
         <div class="form-label">
             <label>{{{{ slots.default }}}}</label>
@@ -8152,6 +8542,8 @@ class TextFilter extends Input {
     `;
     #operator;
     #value;
+    //the sensitivity has no control of its own: it is carried through from whoever set the value
+    #sensitivity = 'IGNORE_CASE';
     render(conf) {
         super.render({ ...conf, skipObservedSetup: true });
 
@@ -8161,6 +8553,7 @@ class TextFilter extends Input {
         this.disabled = conf.disabled;
         this.readonly = conf.observed.readonly;
         this.required = conf.observed.required;
+        this.placeholder = conf.observed.placeholder;
         this.value = conf.observed.value;
 
         this.addEventListener('click', (evt) => {
@@ -8170,13 +8563,17 @@ class TextFilter extends Input {
             }
             const btn = /** @type HTMLButtonElement */ (target.closest('ul')?.previousElementSibling);
             const value = /** @type String */ (target.getAttribute('value'));
+            const previous = btn.getAttribute('value');
             btn.setAttribute('value', value);
             btn.innerHTML = target.innerHTML;
+            if (previous !== value) {
+                this.#notifyChange();
+            }
         });
     }
     get value() {
         const operator = this.#operator.getAttribute('value');
-        return this.#value.value === '' ? undefined : [operator, 'IGNORE_CASE', this.#value.value];
+        return this.#value.value === '' ? undefined : [operator, this.#sensitivity, this.#value.value];
     }
     set value(v) {
         if (v == null) {
@@ -8184,15 +8581,35 @@ class TextFilter extends Input {
             return;
         }
         const [operator, sensitivity, value] = v;
-        this.#operator.setAttribute('value', operator);
+        this.#showOperator(operator);
+        this.#sensitivity = sensitivity ?? 'IGNORE_CASE';
         this.#value.value = value;
     }
+    #showOperator(operator) {
+        this.#operator.setAttribute('value', operator);
+        const items = Array.from(this.#operator.nextElementSibling?.querySelectorAll('li > a[value]') ?? []);
+        const item = items.find((a) => a.getAttribute('value') === operator);
+        if (item) {
+            this.#operator.innerHTML = item.innerHTML;
+        }
+    }
+    #notifyChange() {
+        this.dispatchEvent(
+            new CustomEvent('change', {
+                bubbles: true,
+                cancelable: false,
+                detail: {
+                    value: this.value,
+                },
+            }),
+        );
+    }
 }
 
 class LocalizationModule {
     static t(k, ...args) {
-        //@ts-ignore
-        const format = this.l10n?.[this.language]?.[k] ?? this.l10n?.['en']?.[k] ?? k;
+        //@ts-expect-error l10n and language come from the element class and the data stack
+        const format = this.l10n?.[this.language]?.[k] ?? this.l10n?.en?.[k] ?? k;
         if (args.length === 0) {
             return format;
         }
@@ -8275,9 +8692,11 @@ var ful = /*#__PURE__*/Object.freeze({
 });
 
 if (typeof window !== 'undefined') {
+    // biome-ignore-start lint/complexity/useLiteralKeys: checkJs rejects unknown properties on Window
     window['ftl'] = ftl;
     window['httpc'] = httpc;
     window['ful'] = ful;
+    // biome-ignore-end lint/complexity/useLiteralKeys: checkJs rejects unknown properties on Window
 }
 
 export { AsyncEvents, Attributes, Base64, Bindings, Checkbox, Dropdown, ExpressionEvaluator, Expressions, Failure, Form, FormLoader, Fragments, Hex, HttpClient, HttpClientError, Input, InputFile, InputInstant, InputLocalDate, InputLocalTime, Instant, InstantFilter, LightSlots, LocalDate, LocalDateFilter, LocalStorage, LocalizationModule, MediaType, Nodes, Pagination, ParsedElement, Plugin, RadioGroup, Registry, RenderError, Rendering, Select, SelectLoader, SessionStorage, SortButton, Spinner, Table, TableSchemaParser, Template, Templates, TextFilter, Timing, VersionedLocalStorage, VersionedSessionStorage, registry };