@optionfactory/fml 8.0.0 → 8.0.2

package/dist/fml.iife.js

@@ -3460,7 +3460,7 @@ var fml = (function (exports) {
                 case '<=':
                     return lhs <= rhs;
                 default:
-                    throw new Error('unknown cmp op ' + node.op);
+                    throw new Error(`unknown cmp op ${node.op}`);
             }
         }
         [nodes.call](node) {
@@ -3471,7 +3471,7 @@ var fml = (function (exports) {
             }
             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);
@@ -3507,14 +3507,14 @@ var fml = (function (exports) {
             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];
@@ -3555,7 +3555,7 @@ var fml = (function (exports) {
                         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()}`);
                     }
                 });
         }
@@ -3731,7 +3731,7 @@ var fml = (function (exports) {
                 .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;
                     }
@@ -3823,8 +3823,7 @@ var fml = (function (exports) {
          * @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;
                 }
@@ -3887,19 +3886,18 @@ var fml = (function (exports) {
     }
 
     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];
@@ -3917,9 +3915,10 @@ var fml = (function (exports) {
             this.remove(ref);
         }
         cleanup() {
-            while (this.#forRemoval.length) {
-                this.#forRemoval.pop().remove();
+            for (const node of this.#forRemoval) {
+                node.remove();
             }
+            this.#forRemoval.clear();
         }
     }
 
@@ -3974,7 +3973,7 @@ var fml = (function (exports) {
         }
         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);
@@ -3988,6 +3987,7 @@ var fml = (function (exports) {
                         ops.remove(node);
                     }
                     break;
+                }
                 case 'body':
                     node.replaceChildren();
                     break;
@@ -4053,8 +4053,10 @@ var fml = (function (exports) {
         }
     }
 
-    // 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.
@@ -4065,6 +4067,9 @@ var fml = (function (exports) {
     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])/)
@@ -4199,9 +4204,10 @@ var fml = (function (exports) {
          * @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.
@@ -4346,8 +4352,8 @@ var fml = (function (exports) {
             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) {
@@ -4366,8 +4372,7 @@ var fml = (function (exports) {
         #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,
@@ -4376,16 +4381,39 @@ var fml = (function (exports) {
                 );
             });
         }
+        #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();
@@ -4581,18 +4609,30 @@ var fml = (function (exports) {
         }
     }
 
-    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));
         }
     }
 
@@ -4634,7 +4674,7 @@ var fml = (function (exports) {
         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 });
@@ -4664,6 +4704,19 @@ var fml = (function (exports) {
                 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) {
@@ -4679,6 +4732,9 @@ var fml = (function (exports) {
             );
             const disabled = this.#disabledBeforeParsed ?? false;
             await this.render({ slots, observed, disabled });
+            if (disabled) {
+                this.#unclaimFormDisabled();
+            }
         }
         render(c) {}
         reflect(fn) {
@@ -4775,13 +4831,22 @@ var fml = (function (exports) {
 
             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;
             }
 
@@ -4808,7 +4873,7 @@ var fml = (function (exports) {
             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('');
         }
     }
@@ -5138,6 +5203,26 @@ var fml = (function (exports) {
         }
     };
 
+    /**
+     * 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;
@@ -5190,11 +5275,11 @@ var fml = (function (exports) {
         }
         /**
          * 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 {
@@ -5219,11 +5304,11 @@ var fml = (function (exports) {
         }
         /**
          * 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 {
@@ -5239,8 +5324,10 @@ var fml = (function (exports) {
          * @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) {
@@ -5273,7 +5360,7 @@ var fml = (function (exports) {
         /**
          * 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();
@@ -5438,7 +5525,7 @@ var fml = (function (exports) {
          * @returns this builder
          */
         blobs(name, values) {
-            for (let v of values) {
+            for (const v of values) {
                 this.#formData.append(name, v);
             }
             return this;
@@ -5473,7 +5560,16 @@ var fml = (function (exports) {
         }
         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);
@@ -5491,7 +5587,16 @@ var fml = (function (exports) {
         }
         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);
@@ -5513,7 +5618,7 @@ var fml = (function (exports) {
                 return undefined;
             }
             if (stored.revision !== revision) {
-                localStorage.removeItem(key);
+                LocalStorage.remove(key);
                 return undefined;
             }
             return stored.data;
@@ -5530,7 +5635,7 @@ var fml = (function (exports) {
                 return undefined;
             }
             if (stored.revision !== revision) {
-                localStorage.removeItem(key);
+                SessionStorage.remove(key);
                 return undefined;
             }
             return stored.data;
@@ -5665,7 +5770,7 @@ var fml = (function (exports) {
          */
         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;
 
@@ -5685,8 +5790,8 @@ var fml = (function (exports) {
                 }
             };
 
-            const debounced = function () {
-                args = [...arguments];
+            const debounced = (...called) => {
+                args = called;
                 previousTimestamp = performance.now();
                 if (tid === null) {
                     tid = setTimeout(later, timeoutMs);
@@ -5695,7 +5800,11 @@ var fml = (function (exports) {
                     }
                 }
             };
-            const abort = () => clearTimeout(tid);
+            const abort = () => {
+                clearTimeout(tid ?? undefined);
+                tid = null;
+                args = [];
+            };
             return [debounced, abort];
         }
         static THROTTLE_DEFAULT = 0;
@@ -5710,7 +5819,7 @@ var fml = (function (exports) {
          */
         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;
 
@@ -5722,13 +5831,13 @@ var fml = (function (exports) {
                     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);
@@ -5743,7 +5852,11 @@ var fml = (function (exports) {
                     tid = setTimeout(later, remaining);
                 }
             };
-            const abort = () => clearTimeout(tid);
+            const abort = () => {
+                clearTimeout(tid ?? undefined);
+                tid = null;
+                args = [];
+            };
             return [throttled, abort];
         }
     }
@@ -5757,7 +5870,7 @@ var fml = (function (exports) {
          */
         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 {
@@ -5775,7 +5888,7 @@ var fml = (function (exports) {
         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];
@@ -5808,12 +5921,12 @@ var fml = (function (exports) {
                 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') {
@@ -5846,12 +5959,14 @@ var fml = (function (exports) {
 
         /**
          *
-         * @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') {
@@ -5875,7 +5990,9 @@ var fml = (function (exports) {
         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', '');
@@ -5883,12 +6000,12 @@ var fml = (function (exports) {
             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) => {
@@ -5898,7 +6015,7 @@ var fml = (function (exports) {
                     el.removeAttribute('hidden');
                 }
             });
-            if (es.length == 0 || !scrollOnError) {
+            if (es.length === 0 || !scrollOnError) {
                 return;
             }
             Array.from(form.querySelectorAll(`:invalid`))
@@ -5970,7 +6087,8 @@ var fml = (function (exports) {
     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);
@@ -5993,50 +6111,53 @@ var fml = (function (exports) {
          */
         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);
             }
@@ -6044,7 +6165,20 @@ var fml = (function (exports) {
         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;
@@ -6075,7 +6209,7 @@ var fml = (function (exports) {
     }
 
     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">
@@ -6112,12 +6246,6 @@ var fml = (function (exports) {
             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;
@@ -6133,19 +6261,26 @@ var fml = (function (exports) {
                 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();
@@ -6165,6 +6300,15 @@ var fml = (function (exports) {
             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');
@@ -6191,6 +6335,11 @@ var fml = (function (exports) {
         }
         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';
@@ -6201,6 +6350,18 @@ var fml = (function (exports) {
                 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);
         }
@@ -6220,23 +6381,23 @@ var fml = (function (exports) {
 
     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;
@@ -6249,7 +6410,7 @@ var fml = (function (exports) {
                 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
@@ -6262,16 +6423,17 @@ var fml = (function (exports) {
     }
 
     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;
@@ -6317,13 +6479,14 @@ var fml = (function (exports) {
                 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;
@@ -6336,10 +6499,62 @@ var fml = (function (exports) {
         _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';
         }
@@ -6384,28 +6599,28 @@ var fml = (function (exports) {
         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é',
@@ -6415,6 +6630,7 @@ var fml = (function (exports) {
             'value',
             'readonly:presence',
             'required:presence',
+            'placeholder',
             'accept:csv',
             'multiple:presence',
             'itemlist:presence',
@@ -6464,7 +6680,7 @@ var fml = (function (exports) {
         };
         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');
@@ -6475,6 +6691,12 @@ var fml = (function (exports) {
             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();
             });
@@ -6482,11 +6704,17 @@ var fml = (function (exports) {
                 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();
@@ -6497,10 +6725,15 @@ var fml = (function (exports) {
             });
             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();
@@ -6515,6 +6748,7 @@ var fml = (function (exports) {
         }
         #update() {
             this.setCustomValidity();
+            this.#warnings.replaceChildren();
             this.#ensureAcceptable();
             this.#ensureFileSizes();
             this.#ensureTotalSize();
@@ -6525,7 +6759,7 @@ var fml = (function (exports) {
                 .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) {
@@ -6538,10 +6772,14 @@ var fml = (function (exports) {
             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) {
@@ -6551,8 +6789,7 @@ var fml = (function (exports) {
                 return;
             }
             this.warning('maxfilesexceeded');
-            const dt = new DataTransfer();
-            this.files = dt.files;
+            this._input.files = new DataTransfer().files;
         }
 
         #ensureFileSizes() {
@@ -6565,8 +6802,12 @@ var fml = (function (exports) {
             }
             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) {
@@ -6577,7 +6818,7 @@ var fml = (function (exports) {
                 return;
             }
             this.warning('maxtotalsizeexceeded', this.#formatByteSize(this.#maxtotalsize));
-            this.files = new DataTransfer().files;
+            this._input.files = new DataTransfer().files;
         }
         get accept() {
             return this.#accept;
@@ -6603,6 +6844,7 @@ var fml = (function (exports) {
         }
         set files(vs) {
             this._input.files = vs;
+            this.#update();
         }
         get file() {
             return this.files[0] ?? null;
@@ -6623,7 +6865,6 @@ var fml = (function (exports) {
                 return;
             }
             this.files = new DataTransfer().files;
-            this.#update();
         }
         get totalsize() {
             return Array.from(this.files).reduce((a, f) => a + f.size, 0);
@@ -6790,7 +7031,7 @@ var fml = (function (exports) {
             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'),
@@ -6866,8 +7107,14 @@ var fml = (function (exports) {
             });
             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) {
@@ -6903,6 +7150,9 @@ var fml = (function (exports) {
             try {
                 const data = await loader();
                 this.update(data);
+            } catch (e) {
+                this.hide();
+                throw e;
             } finally {
                 this.#spinner.setAttribute('hidden', '');
                 this.#menu.removeAttribute('hidden');
@@ -6910,9 +7160,9 @@ var fml = (function (exports) {
         }
         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' });
@@ -6965,6 +7215,7 @@ var fml = (function (exports) {
         #multiple;
         #fieldError;
         #values = new Map();
+        #token = 0;
         constructor() {
             super();
             this.internals = this.attachInternals();
@@ -6977,7 +7228,11 @@ var fml = (function (exports) {
                 .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');
@@ -6996,11 +7251,9 @@ var fml = (function (exports) {
             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')) {
@@ -7067,13 +7320,13 @@ var fml = (function (exports) {
                     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': {
@@ -7082,6 +7335,12 @@ var fml = (function (exports) {
                         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();
@@ -7130,6 +7389,16 @@ var fml = (function (exports) {
         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],
@@ -7159,16 +7428,43 @@ var fml = (function (exports) {
             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) {
@@ -7187,6 +7483,11 @@ var fml = (function (exports) {
         }
         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;
@@ -7292,7 +7593,9 @@ var fml = (function (exports) {
                 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;
@@ -7336,6 +7639,11 @@ var fml = (function (exports) {
         }
         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';
@@ -7385,7 +7693,7 @@ var fml = (function (exports) {
             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;
@@ -7449,6 +7757,11 @@ var fml = (function (exports) {
         }
         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';
@@ -7489,9 +7802,10 @@ var fml = (function (exports) {
     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(
@@ -7581,10 +7895,12 @@ var fml = (function (exports) {
         #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(
@@ -7600,25 +7916,20 @@ var fml = (function (exports) {
         }
         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() {
@@ -7645,9 +7956,10 @@ var fml = (function (exports) {
 
     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');
@@ -7866,9 +8178,10 @@ var fml = (function (exports) {
             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'));
@@ -7903,11 +8216,16 @@ var fml = (function (exports) {
             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();
             }
         }
 
@@ -7920,7 +8238,7 @@ var fml = (function (exports) {
         }
         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 {
@@ -7929,7 +8247,7 @@ var fml = (function (exports) {
                 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 {
@@ -7971,7 +8289,7 @@ var fml = (function (exports) {
     }
 
     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>
@@ -8005,10 +8323,16 @@ var fml = (function (exports) {
             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) => {
@@ -8018,9 +8342,13 @@ var fml = (function (exports) {
                 }
                 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();
+                }
             });
         }
 
@@ -8036,14 +8364,40 @@ var fml = (function (exports) {
                 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;
@@ -8051,7 +8405,7 @@ var fml = (function (exports) {
     }
 
     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>
@@ -8086,10 +8440,16 @@ var fml = (function (exports) {
             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) => {
@@ -8099,14 +8459,18 @@ var fml = (function (exports) {
                 }
                 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) {
@@ -8116,14 +8480,40 @@ var fml = (function (exports) {
                 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;
@@ -8131,7 +8521,7 @@ var fml = (function (exports) {
     }
 
     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>
@@ -8155,6 +8545,8 @@ var fml = (function (exports) {
     `;
         #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 });
 
@@ -8164,6 +8556,7 @@ var fml = (function (exports) {
             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) => {
@@ -8173,13 +8566,17 @@ var fml = (function (exports) {
                 }
                 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) {
@@ -8187,15 +8584,35 @@ var fml = (function (exports) {
                 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;
             }
@@ -8278,9 +8695,11 @@ var fml = (function (exports) {
     });
 
     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
     }
 
     exports.AsyncEvents = AsyncEvents;