@optionfactory/fml 8.0.2 → 8.0.3

package/dist/ful.mjs

@@ -778,15 +778,17 @@ class Input extends ParsedElement {
         });
     }
     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';
@@ -1706,7 +1708,9 @@ class Select extends ParsedElement {
             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) {
@@ -1722,7 +1726,7 @@ class Select extends ParsedElement {
             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'));
@@ -1735,7 +1739,7 @@ class Select extends ParsedElement {
         });
         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);
@@ -1760,7 +1764,7 @@ class Select extends ParsedElement {
             this.#input.value = '';
         });
         this.#input.addEventListener('keydown', (e) => {
-            if (this.disabled || this.readonly) {
+            if (this.matches(':disabled') || this.readonly) {
                 return;
             }
             switch (e.code) {
@@ -1813,7 +1817,7 @@ class Select extends ParsedElement {
         });
         this.#input.addEventListener('input', (e) => {
             e.stopPropagation();
-            if (this.disabled || this.readonly) {
+            if (this.matches(':disabled') || this.readonly) {
                 return;
             }
             dload();
@@ -1823,7 +1827,7 @@ class Select extends ParsedElement {
             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();
@@ -1874,10 +1878,36 @@ class Select extends ParsedElement {
         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]]));
@@ -1900,7 +1930,8 @@ class Select extends ParsedElement {
         }
         //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;
@@ -1926,15 +1957,17 @@ class Select extends ParsedElement {
         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;
@@ -2082,15 +2115,17 @@ class RadioGroup extends ParsedElement {
         });
     }
     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';
@@ -2165,7 +2200,8 @@ class Checkbox extends ParsedElement {
         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;
@@ -2200,15 +2236,17 @@ class Checkbox extends ParsedElement {
         });
     }
     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';
@@ -2846,8 +2884,10 @@ class InstantFilter extends Input {
         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);
     }
 }
 
@@ -2962,8 +3002,10 @@ class LocalDateFilter extends Input {
         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);
     }
 }