@optionfactory/fml 8.0.2 → 8.0.3

package/dist/fml.iife.js

@@ -4697,27 +4697,30 @@ var fml = (function (exports) {
             }
             this[attr] = this.unmarshal(attr, newValue);
         }
-        #disabledBeforeParsed = null;
-        formDisabledCallback(disabled) {
-            if (!this.#parsed) {
-                this.#disabledBeforeParsed = disabled;
-                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');
-            }
-        }
+        /**
+         * The disabled protocol follows the semantics of a native form control:
+         *
+         * - the `disabled` attribute on the host is the field's own claim, and nothing
+         *   but its author ever writes or removes it, in markup or through the property.
+         *   The framework never claims on the form's behalf, so there is nothing to
+         *   unclaim and nothing to lose: a field declared disabled inside a disabled
+         *   `<fieldset>` stays disabled when the fieldset comes back, exactly like a
+         *   native input keeps its attribute.
+         * - the effective state is the claim OR a disabled fieldset ancestry, which the
+         *   platform maintains on its own: `:disabled` matches both, a disabled field is
+         *   left out of the submitted values, and the inner native controls are reached
+         *   by the ancestry as descendants of the fieldset.
+         * - the `disabled` property reflects the claim only, like a native input's: a
+         *   field disabled by its ancestry reads `false` while `matches(':disabled')`
+         *   tells the effective state. Un-claiming inside a disabled fieldset cannot
+         *   enable the field.
+         * - the inner controls mirror the claim and nothing else: the ancestry state is
+         *   never written anywhere, so it can never go stale, and the browser composes
+         *   the two on its own when it disables and re-enables a fieldset's descendants.
+         *
+         * Because of this, formDisabledCallback carries nothing the framework needs to
+         * apply, and the protocol does not define it.
+         */
         async upgrade() {
             if (this.#parsed) {
                 return;
@@ -4730,11 +4733,9 @@ var fml = (function (exports) {
                     this.unmarshal(attribute, this.getAttribute(attribute)),
                 ]),
             );
-            const disabled = this.#disabledBeforeParsed ?? false;
-            await this.render({ slots, observed, disabled });
-            if (disabled) {
-                this.#unclaimFormDisabled();
-            }
+            //the declared claim is what render receives: the ancestry state is not
+            //passed around, it is already where it needs to be
+            await this.render({ slots, observed, disabled: this.hasAttribute('disabled') });
         }
         render(c) {}
         reflect(fn) {
@@ -6331,15 +6332,17 @@ var fml = (function (exports) {
             });
         }
         get disabled() {
-            return this._input.hasAttribute('disabled');
+            //the claim only, like a native input: the effective state, claim or disabled
+            //ancestry, is what :disabled matches
+            return this.hasAttribute('disabled');
         }
         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
+            //the claim belongs to the author alone, nothing else ever writes it
             Attributes.toggle(this, 'disabled', d);
+            //the inner control carries the claim as a native input would: a disabled
+            //fieldset ancestry is left to the browser, which reaches the inner control
+            //as a descendant of the fieldset and re-enables it on its own
+            Attributes.toggle(this._input, 'disabled', d);
         }
         get required() {
             return this._input.getAttribute('aria-required') === 'true';
@@ -7259,7 +7262,9 @@ var fml = (function (exports) {
                 if (e.target.matches('input')) {
                     return;
                 }
-                if (this.disabled || this.readonly) {
+                //badges and other chrome are not form controls, the guard must ask the
+                //effective state
+                if (this.matches(':disabled') || this.readonly) {
                     return;
                 }
                 if (this.#ddmenu.shown) {
@@ -7275,7 +7280,7 @@ var fml = (function (exports) {
                 if (!e.target.closest('button')) {
                     return;
                 }
-                if (this.disabled || this.readonly) {
+                if (this.matches(':disabled') || this.readonly) {
                     return;
                 }
                 const idx = [...this.#items.children].indexOf(e.target.closest('ful-item'));
@@ -7288,7 +7293,7 @@ var fml = (function (exports) {
             });
             this.#badges.addEventListener('click', (e) => {
                 e.stopPropagation();
-                if (this.disabled || this.readonly) {
+                if (this.matches(':disabled') || this.readonly) {
                     return;
                 }
                 const idx = [...this.#badges.children].indexOf(e.target);
@@ -7313,7 +7318,7 @@ var fml = (function (exports) {
                 this.#input.value = '';
             });
             this.#input.addEventListener('keydown', (e) => {
-                if (this.disabled || this.readonly) {
+                if (this.matches(':disabled') || this.readonly) {
                     return;
                 }
                 switch (e.code) {
@@ -7366,7 +7371,7 @@ var fml = (function (exports) {
             });
             this.#input.addEventListener('input', (e) => {
                 e.stopPropagation();
-                if (this.disabled || this.readonly) {
+                if (this.matches(':disabled') || this.readonly) {
                     return;
                 }
                 dload();
@@ -7376,7 +7381,7 @@ var fml = (function (exports) {
                 if (!this.#multiple) {
                     this.#values.clear();
                 }
-                this.#values.set(e.detail.data[0], e.detail.data.slice(1));
+                this.#values.set(this.#coerceKey(e.detail.data[0]), e.detail.data.slice(1));
                 this.#changed();
                 this.#syncBadges();
                 this.#input.focus();
@@ -7427,10 +7432,36 @@ var fml = (function (exports) {
             this.#items.replaceChildren();
             this.template('items').withOverlay({ entries: this.#values.entries() }).renderTo(this.#items);
         }
+        /**
+         * Coerces a key to the type declared by `k-type`. Keys reach the element from
+         * both worlds: the `value` attribute is text, a loader returns whatever its
+         * endpoint carries. One canonical type keeps the internal Map, which compares
+         * keys strictly, consistent. A key that does not decode is left as it is.
+         */
+        #coerceKey(k) {
+            switch (this.getAttribute('k-type')) {
+                case 'number': {
+                    const n = k === '' ? Number.NaN : Number(k);
+                    return Number.isNaN(n) ? k : n;
+                }
+                case 'boolean': {
+                    if (k === true || k === 'true') {
+                        return true;
+                    }
+                    if (k === false || k === 'false') {
+                        return false;
+                    }
+                    return k;
+                }
+                default:
+                    return String(k);
+            }
+        }
+
         set value(vs) {
             //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];
+            const keys = (vs == null ? [] : Array.isArray(vs) ? vs : [vs]).map((k) => this.#coerceKey(k));
             //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]]));
@@ -7453,7 +7484,8 @@ var fml = (function (exports) {
             }
             //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)]));
+            //the loader keys are coerced too, so they line up with the assigned ones
+            const resolved = new Map(entries.map((e) => [this.#coerceKey(e[0]), e.slice(1)]));
             for (const key of keys) {
                 if (!this.#values.has(key)) {
                     continue;
@@ -7479,15 +7511,17 @@ var fml = (function (exports) {
             return [...this.#values.entries()][0] ?? null;
         }
         get disabled() {
-            return this.#input.hasAttribute('disabled');
+            //the claim only, like a native input: the effective state, claim or disabled
+            //ancestry, is what :disabled matches
+            return this.hasAttribute('disabled');
         }
         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
+            //the claim belongs to the author alone, nothing else ever writes it
             Attributes.toggle(this, 'disabled', d);
+            //the inner control carries the claim as a native input would: a disabled
+            //fieldset ancestry is left to the browser, which reaches the inner control
+            //as a descendant of the fieldset and re-enables it on its own
+            Attributes.toggle(this.#input, 'disabled', d);
         }
         get readonly() {
             return this.#input.readOnly;
@@ -7635,15 +7669,17 @@ var fml = (function (exports) {
             });
         }
         get disabled() {
-            return this.#fieldset.hasAttribute('disabled');
+            //the claim only, like a native input: the effective state, claim or disabled
+            //ancestry, is what :disabled matches
+            return this.hasAttribute('disabled');
         }
         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
+            //the claim belongs to the author alone, nothing else ever writes it
             Attributes.toggle(this, 'disabled', d);
+            //the group disables through its own fieldset, which carries the claim like
+            //a native input would: a disabled outer ancestry is left to the browser,
+            //which reaches the radios as descendants and re-enables them on its own
+            this.#fieldset.disabled = d;
         }
         get required() {
             return this.#fieldset.getAttribute('aria-required') === 'true';
@@ -7718,7 +7754,8 @@ var fml = (function (exports) {
             const label = fragment.querySelector('label');
             label.addEventListener('click', () => {
                 this.focus();
-                if (this.disabled || this.readonly) {
+                //a label is not a form control, the guard must ask the effective state
+                if (this.matches(':disabled') || this.readonly) {
                     return;
                 }
                 this.value = !this.value;
@@ -7753,15 +7790,17 @@ var fml = (function (exports) {
             });
         }
         get disabled() {
-            return this.#input.hasAttribute('disabled');
+            //the claim only, like a native input: the effective state, claim or disabled
+            //ancestry, is what :disabled matches
+            return this.hasAttribute('disabled');
         }
         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
+            //the claim belongs to the author alone, nothing else ever writes it
             Attributes.toggle(this, 'disabled', d);
+            //the inner control carries the claim as a native input would: a disabled
+            //fieldset ancestry is left to the browser, which reaches the inner control
+            //as a descendant of the fieldset and re-enables it on its own
+            Attributes.toggle(this.#input, 'disabled', d);
         }
         get required() {
             return this.#input.getAttribute('aria-required') === 'true';
@@ -8399,8 +8438,10 @@ var fml = (function (exports) {
             return super.disabled;
         }
         set disabled(d) {
-            Attributes.toggle(this.#value2, 'disabled', d);
+            //the claim and the first operand are the base's, the second operand mirrors
+            //the claim like the first one does
             super.disabled = d;
+            Attributes.toggle(this.#value2, 'disabled', d);
         }
     }
 
@@ -8515,8 +8556,10 @@ var fml = (function (exports) {
             return super.disabled;
         }
         set disabled(d) {
-            Attributes.toggle(this.#value2, 'disabled', d);
+            //the claim and the first operand are the base's, the second operand mirrors
+            //the claim like the first one does
             super.disabled = d;
+            Attributes.toggle(this.#value2, 'disabled', d);
         }
     }