@optionfactory/fml 8.0.0 → 8.0.1

package/dist/ful.iife.js

@@ -7,7 +7,16 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         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);
@@ -25,7 +34,16 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         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);
@@ -47,7 +65,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 return undefined;
             }
             if (stored.revision !== revision) {
-                localStorage.removeItem(key);
+                LocalStorage.remove(key);
                 return undefined;
             }
             return stored.data;
@@ -64,7 +82,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 return undefined;
             }
             if (stored.revision !== revision) {
-                localStorage.removeItem(key);
+                SessionStorage.remove(key);
                 return undefined;
             }
             return stored.data;
@@ -199,7 +217,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          */
         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;
 
@@ -219,8 +237,8 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 }
             };
 
-            const debounced = function () {
-                args = [...arguments];
+            const debounced = (...called) => {
+                args = called;
                 previousTimestamp = performance.now();
                 if (tid === null) {
                     tid = setTimeout(later, timeoutMs);
@@ -229,7 +247,11 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                     }
                 }
             };
-            const abort = () => clearTimeout(tid);
+            const abort = () => {
+                clearTimeout(tid ?? undefined);
+                tid = null;
+                args = [];
+            };
             return [debounced, abort];
         }
         static THROTTLE_DEFAULT = 0;
@@ -244,7 +266,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          */
         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;
 
@@ -256,13 +278,13 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                     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);
@@ -277,7 +299,11 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                     tid = setTimeout(later, remaining);
                 }
             };
-            const abort = () => clearTimeout(tid);
+            const abort = () => {
+                clearTimeout(tid ?? undefined);
+                tid = null;
+                args = [];
+            };
             return [throttled, abort];
         }
     }
@@ -291,7 +317,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          */
         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 {
@@ -309,7 +335,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         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];
@@ -342,12 +368,12 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 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') {
@@ -380,12 +406,14 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
 
         /**
          *
-         * @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') {
@@ -409,7 +437,9 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         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', '');
@@ -417,12 +447,12 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             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) => {
@@ -432,7 +462,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                     el.removeAttribute('hidden');
                 }
             });
-            if (es.length == 0 || !scrollOnError) {
+            if (es.length === 0 || !scrollOnError) {
                 return;
             }
             Array.from(form.querySelectorAll(`:invalid`))
@@ -504,7 +534,8 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
     class Form extends index_mjs.ParsedElement {
         form;
         render() {
-            const form = (this.form = document.createElement('form'));
+            const form = document.createElement('form');
+            this.form = form;
             form.setAttribute('novalidate', '');
             index_mjs.Attributes.forward('form-', this, form);
             form.replaceChildren(...this.childNodes);
@@ -527,50 +558,53 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
          */
         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 = index_mjs.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 index_mjs$1.Failure) {
-                        this.errors = e.problems;
-                    }
-                    console.warn('failed to submit form', this, 'reason:', e);
+                        detail: { submitter, values, request, exception: e },
+                    }),
+                );
+                if (e instanceof index_mjs$1.Failure) {
+                    this.errors = e.problems;
                 }
+                console.warn('failed to submit form', this, 'reason:', e);
             } finally {
                 this.spinner(false);
             }
@@ -578,7 +612,20 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         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;
@@ -609,7 +656,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
     }
 
     class Input extends index_mjs.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">
@@ -646,12 +693,6 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             this._input = fragment.querySelector('input,textarea');
 
             index_mjs.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;
@@ -667,19 +708,26 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 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();
@@ -699,6 +747,15 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             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');
@@ -725,6 +782,11 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         set disabled(d) {
             index_mjs.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
+            index_mjs.Attributes.toggle(this, 'disabled', d);
         }
         get required() {
             return this._input.getAttribute('aria-required') === 'true';
@@ -735,6 +797,18 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 index_mjs.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
+            index_mjs.Attributes.set(this._input, 'placeholder', d ?? ' ');
+            this.reflect(() => {
+                index_mjs.Attributes.set(this, 'placeholder', d);
+            });
+        }
         focus(options) {
             this._input.focus(options);
         }
@@ -754,23 +828,23 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
 
     class LocalDate extends index_mjs.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 index_mjs.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;
@@ -783,7 +857,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 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
@@ -796,16 +870,17 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
     }
 
     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;
@@ -851,13 +926,14 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 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;
@@ -870,10 +946,62 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         _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';
         }
@@ -918,28 +1046,28 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         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é',
@@ -949,6 +1077,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             'value',
             'readonly:presence',
             'required:presence',
+            'placeholder',
             'accept:csv',
             'multiple:presence',
             'itemlist:presence',
@@ -998,7 +1127,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         };
         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');
@@ -1009,6 +1138,12 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             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();
             });
@@ -1016,11 +1151,17 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 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();
@@ -1031,10 +1172,15 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             });
             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();
@@ -1049,6 +1195,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         #update() {
             this.setCustomValidity();
+            this.#warnings.replaceChildren();
             this.#ensureAcceptable();
             this.#ensureFileSizes();
             this.#ensureTotalSize();
@@ -1059,7 +1206,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 .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) {
@@ -1072,10 +1219,14 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             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) {
@@ -1085,8 +1236,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 return;
             }
             this.warning('maxfilesexceeded');
-            const dt = new DataTransfer();
-            this.files = dt.files;
+            this._input.files = new DataTransfer().files;
         }
 
         #ensureFileSizes() {
@@ -1099,8 +1249,12 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             }
             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) {
@@ -1111,7 +1265,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 return;
             }
             this.warning('maxtotalsizeexceeded', this.#formatByteSize(this.#maxtotalsize));
-            this.files = new DataTransfer().files;
+            this._input.files = new DataTransfer().files;
         }
         get accept() {
             return this.#accept;
@@ -1137,6 +1291,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         set files(vs) {
             this._input.files = vs;
+            this.#update();
         }
         get file() {
             return this.files[0] ?? null;
@@ -1157,7 +1312,6 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 return;
             }
             this.files = new DataTransfer().files;
-            this.#update();
         }
         get totalsize() {
             return Array.from(this.files).reduce((a, f) => a + f.size, 0);
@@ -1324,7 +1478,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             const http = index_mjs.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'),
@@ -1400,8 +1554,14 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             });
             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) {
@@ -1437,6 +1597,9 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             try {
                 const data = await loader();
                 this.update(data);
+            } catch (e) {
+                this.hide();
+                throw e;
             } finally {
                 this.#spinner.setAttribute('hidden', '');
                 this.#menu.removeAttribute('hidden');
@@ -1444,9 +1607,9 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         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' });
@@ -1499,6 +1662,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         #multiple;
         #fieldError;
         #values = new Map();
+        #token = 0;
         constructor() {
             super();
             this.internals = this.attachInternals();
@@ -1511,7 +1675,11 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 .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');
@@ -1530,11 +1698,9 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             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')) {
@@ -1601,13 +1767,13 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                     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': {
@@ -1616,6 +1782,12 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                         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();
@@ -1664,6 +1836,16 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         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],
@@ -1693,16 +1875,43 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             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) {
@@ -1721,6 +1930,11 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         set disabled(d) {
             index_mjs.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
+            index_mjs.Attributes.toggle(this, 'disabled', d);
         }
         get readonly() {
             return this.#input.readOnly;
@@ -1826,7 +2040,9 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 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;
@@ -1870,6 +2086,11 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         set disabled(d) {
             index_mjs.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
+            index_mjs.Attributes.toggle(this, 'disabled', d);
         }
         get required() {
             return this.#fieldset.getAttribute('aria-required') === 'true';
@@ -1919,7 +2140,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             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;
@@ -1983,6 +2204,11 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         set disabled(d) {
             index_mjs.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
+            index_mjs.Attributes.toggle(this, 'disabled', d);
         }
         get required() {
             return this.#input.getAttribute('aria-required') === 'true';
@@ -2023,9 +2249,10 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
     class SortButton extends index_mjs.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(
@@ -2115,10 +2342,12 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         #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(
@@ -2134,25 +2363,20 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         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() {
@@ -2179,9 +2403,10 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
 
     class TableSchemaParser {
         static parse(nodeOrFragment, template) {
-            const schema = index_mjs.Nodes.queryChildren(nodeOrFragment, 'schema');
+            //nodeOrFragment is undefined when the slot is missing altogether
+            const schema = nodeOrFragment ? index_mjs.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');
@@ -2400,9 +2625,10 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             this.#noAutoload = table.querySelector(':scope > tbody[data-ref=initial]');
             this.#feedback = table.querySelector(':scope > tbody[data-ref=feedback]');
             this.#paginator = index_mjs.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 index_mjs.Rendering.waitForChildren(this);
 
             const maybeForm = /** @type any */ (index_mjs.Nodes.queryChildren(this, 'ful-form'));
@@ -2437,11 +2663,16 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             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();
             }
         }
 
@@ -2454,7 +2685,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
         }
         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 {
@@ -2463,7 +2694,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 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 {
@@ -2505,7 +2736,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
     }
 
     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>
@@ -2539,10 +2770,16 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             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) => {
@@ -2552,9 +2789,13 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 }
                 const btn = /** @type HTMLButtonElement */ (target.closest('ul')?.previousElementSibling);
                 const value = /** @type String */ (target.getAttribute('value'));
+                const previous = btn.getAttribute('value');
                 index_mjs.Attributes.toggle(this.#value2, 'hidden', value !== 'BETWEEN');
                 btn.setAttribute('value', value);
                 btn.innerHTML = target.innerHTML;
+                if (previous !== value) {
+                    this.#notifyChange();
+                }
             });
         }
 
@@ -2570,14 +2811,40 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 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;
+            }
+            index_mjs.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) {
             index_mjs.Attributes.toggle(this.#value2, 'disabled', d);
             super.disabled = d;
@@ -2585,7 +2852,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
     }
 
     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>
@@ -2620,10 +2887,16 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             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) => {
@@ -2633,14 +2906,18 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 }
                 const btn = /** @type HTMLButtonElement */ (target.closest('ul')?.previousElementSibling);
                 const value = /** @type String */ (target.getAttribute('value'));
+                const previous = btn.getAttribute('value');
                 index_mjs.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) {
@@ -2650,14 +2927,40 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 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;
+            }
+            index_mjs.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) {
             index_mjs.Attributes.toggle(this.#value2, 'disabled', d);
             super.disabled = d;
@@ -2665,7 +2968,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
     }
 
     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>
@@ -2689,6 +2992,8 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
     `;
         #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 });
 
@@ -2698,6 +3003,7 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
             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) => {
@@ -2707,13 +3013,17 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 }
                 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) {
@@ -2721,15 +3031,35 @@ var ful = (function (exports, index_mjs, index_mjs$1) {
                 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;
             }