@jungherz-de/glasskit-elements 1.22.2 → 1.22.3

package/dist/glasskit-elements.js

@@ -261,6 +261,7 @@ var GlassKitElements = (function (exports) {
         this._shadow.appendChild(this._wrapper);
 
         this.render();
+        if (this.constructor.formAssociated) this._syncDisabled();
       } else {
         // Back in the document. While it was out, the observer did not reach
         // it, so a theme or density switched in the meantime is caught up here
@@ -363,6 +364,28 @@ var GlassKitElements = (function (exports) {
      */
     refresh() { this.projectLightDom(); }
 
+    /**
+     * Form-associated elements only. Such an element is disabled by its own
+     * `disabled` attribute or by a <fieldset disabled> around it: the browser
+     * counts both — :disabled, left out of the form data — and calls
+     * formDisabledCallback() on every change, also when the element moves into
+     * or out of such a fieldset. The native controls sit in the shadow root,
+     * out of every fieldset's reach, so the state is handed on to them through
+     * applyDisabled(). Until 1.22.2 only the element's own attribute reached
+     * them: inside a disabled fieldset every field stayed usable, and a submit
+     * button sent the form.
+     */
+    get _actuallyDisabled() { return this.matches(':disabled'); }
+
+    formDisabledCallback() {
+      if (this._initialized) this._syncDisabled();
+    }
+
+    _syncDisabled() { this.applyDisabled(this._actuallyDisabled); }
+
+    /** Form-associated subclasses override to disable their native controls. */
+    applyDisabled(disabled) {}
+
     // ── Utility Methods ──
 
     /**
@@ -440,6 +463,17 @@ var GlassKitElements = (function (exports) {
       if (this._initialized) this.syncValidity();
     }
 
+    // Reflects the attribute, as on a native control: a disabled fieldset
+    // around the element disables it without changing this.
+    get disabled() { return this.getBoolAttr('disabled'); }
+    set disabled(v) { this.setBoolAttr('disabled', v); }
+
+    _syncDisabled() {
+      super._syncDisabled();
+      // A disabled field is barred from validation; enabled again, it counts.
+      this.syncValidity();
+    }
+
     get form() { return this._internals.form; }
     get validationMessage() { return this._internals.validationMessage; }
     get validity() { return this._internals.validity; }
@@ -1523,12 +1557,13 @@ var GlassKitElements = (function (exports) {
 
   class GlkButton extends GlkElement {
     static get observedAttributes() {
-      return ['variant', 'size', 'disabled', 'type', ...FORWARDED_ARIA];
+      return ['variant', 'size', 'type', ...FORWARDED_ARIA];
     }
 
     // The native button sits in the shadow root, outside every form. Form
     // association gives the element its form, so type="submit" and "reset"
-    // can act on it (see _activateForm).
+    // can act on it (see _activateForm), and a disabled fieldset around it
+    // disables it (since 1.22.3; before, it still sent the form).
     static formAssociated = true;
 
     constructor() {
@@ -1541,9 +1576,6 @@ var GlassKitElements = (function (exports) {
         type: this.getAttribute('type') || 'button'
       });
 
-      if (this.getBoolAttr('disabled')) {
-        this._btn.disabled = true;
-      }
       for (const attr of FORWARDED_ARIA) this._forward(attr);
 
       this._btn.appendChild(document.createElement('slot'));
@@ -1552,7 +1584,7 @@ var GlassKitElements = (function (exports) {
 
     setupEvents() {
       this._onClick = (e) => {
-        if (this.getBoolAttr('disabled')) {
+        if (this._actuallyDisabled) {
           e.preventDefault();
           e.stopPropagation();
           return;
@@ -1611,9 +1643,6 @@ var GlassKitElements = (function (exports) {
         case 'size':
           this._btn.className = this._computeClasses().join(' ');
           break;
-        case 'disabled':
-          this._btn.disabled = this.getBoolAttr('disabled');
-          break;
         case 'type':
           this._btn.setAttribute('type', this.getAttribute('type') || 'button');
           break;
@@ -1622,6 +1651,8 @@ var GlassKitElements = (function (exports) {
       }
     }
 
+    applyDisabled(disabled) { this._btn.disabled = disabled; }
+
     _forward(attr) {
       const value = this.getAttribute(attr);
       if (value === null) this._btn.removeAttribute(attr);
@@ -1690,7 +1721,7 @@ var GlassKitElements = (function (exports) {
 
   class GlkInput extends GlkFormElement {
     static get observedAttributes() {
-      return ['label', 'type', 'placeholder', 'error', 'hint', 'disabled', 'readonly', 'name', 'value', 'required', ...FORWARDED];
+      return ['label', 'type', 'placeholder', 'error', 'hint', 'readonly', 'name', 'value', 'required', ...FORWARDED];
     }
 
     static get hostStyles() { return affixSheet; }
@@ -1721,7 +1752,6 @@ var GlassKitElements = (function (exports) {
       this._pendingValue = undefined;
       if (value) this._input.value = value;
 
-      if (this.getBoolAttr('disabled')) this._input.disabled = true;
       if (this.getBoolAttr('readonly')) this._input.readOnly = true;
       if (this.getBoolAttr('required')) this._input.required = true;
       for (const attr of FORWARDED) this._forward(attr);
@@ -1811,9 +1841,6 @@ var GlassKitElements = (function (exports) {
           }
           this._applyDescription();
           break;
-        case 'disabled':
-          this._input.disabled = this.getBoolAttr('disabled');
-          break;
         case 'readonly':
           this._input.readOnly = this.getBoolAttr('readonly');
           break;
@@ -1832,6 +1859,8 @@ var GlassKitElements = (function (exports) {
       }
     }
 
+    applyDisabled(disabled) { this._input.disabled = disabled; }
+
     /** An affix shows, and makes room in the field, only while something is slotted. */
     _applyAffixes() {
       for (const affix of [this._prefix, this._suffix]) {
@@ -1897,9 +1926,6 @@ var GlassKitElements = (function (exports) {
       this._syncFormValue();
     }
 
-    get disabled() { return this.getBoolAttr('disabled'); }
-    set disabled(v) { this.setBoolAttr('disabled', v); }
-
     get readOnly() { return this.getBoolAttr('readonly'); }
     set readOnly(v) { this.setBoolAttr('readonly', v); }
 
@@ -1911,7 +1937,7 @@ var GlassKitElements = (function (exports) {
 
   class GlkTextarea extends GlkFormElement {
     static get observedAttributes() {
-      return ['label', 'placeholder', 'rows', 'disabled', 'readonly', 'name', 'value', 'required'];
+      return ['label', 'placeholder', 'rows', 'readonly', 'name', 'value', 'required'];
     }
 
     render() {
@@ -1936,7 +1962,6 @@ var GlassKitElements = (function (exports) {
       this._pendingValue = undefined;
       if (value) this._textarea.value = value;
 
-      if (this.getBoolAttr('disabled')) this._textarea.disabled = true;
       if (this.getBoolAttr('readonly')) this._textarea.readOnly = true;
       if (this.getBoolAttr('required')) this._textarea.required = true;
 
@@ -1972,9 +1997,6 @@ var GlassKitElements = (function (exports) {
         case 'rows':
           this._textarea.setAttribute('rows', this.getAttribute('rows') || '');
           break;
-        case 'disabled':
-          this._textarea.disabled = this.getBoolAttr('disabled');
-          break;
         case 'readonly':
           this._textarea.readOnly = this.getBoolAttr('readonly');
           break;
@@ -1991,6 +2013,8 @@ var GlassKitElements = (function (exports) {
       }
     }
 
+    applyDisabled(disabled) { this._textarea.disabled = disabled; }
+
     get _validityField() { return this._textarea; }
 
     _syncFormValue() {
@@ -2012,9 +2036,6 @@ var GlassKitElements = (function (exports) {
       this._syncFormValue();
     }
 
-    get disabled() { return this.getBoolAttr('disabled'); }
-    set disabled(v) { this.setBoolAttr('disabled', v); }
-
     get readOnly() { return this.getBoolAttr('readonly'); }
     set readOnly(v) { this.setBoolAttr('readonly', v); }
   }
@@ -2033,7 +2054,7 @@ var GlassKitElements = (function (exports) {
 
   class GlkSelect extends GlkFormElement {
     static get observedAttributes() {
-      return ['label', 'disabled', 'name', 'value', 'required'];
+      return ['label', 'name', 'value', 'required'];
     }
 
     static get observesLightDom() { return true; }
@@ -2052,7 +2073,6 @@ var GlassKitElements = (function (exports) {
       const name = this.getAttribute('name');
       if (name) this._select.setAttribute('name', name);
 
-      if (this.getBoolAttr('disabled')) this._select.disabled = true;
       if (this.getBoolAttr('required')) this._select.required = true;
 
       group.appendChild(this._labelEl);
@@ -2126,9 +2146,6 @@ var GlassKitElements = (function (exports) {
         case 'label':
           this._labelEl.textContent = this.getAttribute('label') || '';
           break;
-        case 'disabled':
-          this._select.disabled = this.getBoolAttr('disabled');
-          break;
         case 'name':
           this._select.setAttribute('name', this.getAttribute('name') || '');
           break;
@@ -2143,6 +2160,8 @@ var GlassKitElements = (function (exports) {
       }
     }
 
+    applyDisabled(disabled) { this._select.disabled = disabled; }
+
     get _validityField() { return this._select; }
 
     _syncFormValue() {
@@ -2168,9 +2187,6 @@ var GlassKitElements = (function (exports) {
       this._applyValue(this._wanted);
       this._syncFormValue();
     }
-
-    get disabled() { return this.getBoolAttr('disabled'); }
-    set disabled(v) { this.setBoolAttr('disabled', v); }
   }
 
   customElements.define('glk-select', GlkSelect);
@@ -2179,7 +2195,7 @@ var GlassKitElements = (function (exports) {
 
   class GlkSearch extends GlkFormElement {
     static get observedAttributes() {
-      return ['placeholder', 'name', 'value', 'disabled', 'label'];
+      return ['placeholder', 'name', 'value', 'label'];
     }
 
     render() {
@@ -2207,8 +2223,6 @@ var GlassKitElements = (function (exports) {
       this._pendingValue = undefined;
       if (value) this._input.value = value;
 
-      if (this.getBoolAttr('disabled')) this._input.disabled = true;
-
       container.appendChild(icon);
       container.appendChild(this._input);
 
@@ -2242,15 +2256,14 @@ var GlassKitElements = (function (exports) {
           this._input.value = this.getAttribute('value') || '';
           this._syncFormValue();
           break;
-        case 'disabled':
-          this._input.disabled = this.getBoolAttr('disabled');
-          break;
         case 'label':
           this._applyLabel();
           break;
       }
     }
 
+    applyDisabled(disabled) { this._input.disabled = disabled; }
+
     _applyLabel() {
       const label = this.getAttribute('label');
       if (label) this._input.setAttribute('aria-label', label);
@@ -2281,7 +2294,7 @@ var GlassKitElements = (function (exports) {
 
   class GlkToggle extends GlkFormElement {
     static get observedAttributes() {
-      return ['checked', 'disabled', 'label', 'name', 'value', 'required'];
+      return ['checked', 'label', 'name', 'value', 'required'];
     }
 
     static get hostStyles() { return checkControlSheet; }
@@ -2313,7 +2326,6 @@ var GlassKitElements = (function (exports) {
       label.appendChild(this._labelEl);
 
       if (this.getBoolAttr('checked')) this._input.checked = true;
-      if (this.getBoolAttr('disabled')) this._input.disabled = true;
       if (this.getBoolAttr('required')) this._input.required = true;
 
       this._defaultChecked = this.getBoolAttr('checked');
@@ -2348,9 +2360,6 @@ var GlassKitElements = (function (exports) {
           this._input.checked = this.getBoolAttr('checked');
           this._syncFormValue();
           break;
-        case 'disabled':
-          this._input.disabled = this.getBoolAttr('disabled');
-          break;
         case 'label':
           this._labelEl.textContent = this.getAttribute('label') || '';
           break;
@@ -2363,6 +2372,8 @@ var GlassKitElements = (function (exports) {
       }
     }
 
+    applyDisabled(disabled) { this._input.disabled = disabled; }
+
     get _validityField() { return this._input; }
 
     _syncFormValue() {
@@ -2391,9 +2402,6 @@ var GlassKitElements = (function (exports) {
       if (this._input) this._syncFormValue();
     }
 
-    get disabled() { return this.getBoolAttr('disabled'); }
-    set disabled(v) { this.setBoolAttr('disabled', v); }
-
     get name() { return this.getAttribute('name'); }
     set name(v) { this.setAttribute('name', v); }
 
@@ -2410,7 +2418,7 @@ var GlassKitElements = (function (exports) {
 
   class GlkCheckbox extends GlkFormElement {
     static get observedAttributes() {
-      return ['checked', 'disabled', 'label', 'name', 'value', 'required'];
+      return ['checked', 'label', 'name', 'value', 'required'];
     }
 
     static get hostStyles() { return checkControlSheet; }
@@ -2436,7 +2444,6 @@ var GlassKitElements = (function (exports) {
       label.appendChild(this._labelEl);
 
       if (this.getBoolAttr('checked')) this._input.checked = true;
-      if (this.getBoolAttr('disabled')) this._input.disabled = true;
       if (this.getBoolAttr('required')) this._input.required = true;
 
       this._defaultChecked = this.getBoolAttr('checked');
@@ -2470,9 +2477,6 @@ var GlassKitElements = (function (exports) {
           this._input.checked = this.getBoolAttr('checked');
           this._syncFormValue();
           break;
-        case 'disabled':
-          this._input.disabled = this.getBoolAttr('disabled');
-          break;
         case 'label':
           this._labelEl.textContent = this.getAttribute('label') || '';
           break;
@@ -2485,6 +2489,8 @@ var GlassKitElements = (function (exports) {
       }
     }
 
+    applyDisabled(disabled) { this._input.disabled = disabled; }
+
     get _validityField() { return this._input; }
 
     _syncFormValue() {
@@ -2506,9 +2512,6 @@ var GlassKitElements = (function (exports) {
       if (this._input) this._syncFormValue();
     }
 
-    get disabled() { return this.getBoolAttr('disabled'); }
-    set disabled(v) { this.setBoolAttr('disabled', v); }
-
     get name() { return this.getAttribute('name'); }
     set name(v) { this.setAttribute('name', v); }
 
@@ -2537,7 +2540,7 @@ var GlassKitElements = (function (exports) {
 
   /** Only the selected radio is a tab stop; arrow keys move within the group. */
   function syncGroupTabIndex(group) {
-    const enabled = group.filter(el => !el.disabled);
+    const enabled = group.filter(el => !el._actuallyDisabled);
     if (!enabled.length) return;
     const focusable = enabled.find(el => el.checked) || enabled[0];
     for (const el of group) {
@@ -2547,7 +2550,7 @@ var GlassKitElements = (function (exports) {
 
   class GlkRadio extends GlkFormElement {
     static get observedAttributes() {
-      return ['checked', 'disabled', 'label', 'name', 'value', 'required'];
+      return ['checked', 'label', 'name', 'value', 'required'];
     }
 
     static get hostStyles() { return checkControlSheet; }
@@ -2577,7 +2580,6 @@ var GlassKitElements = (function (exports) {
       label.appendChild(this._labelEl);
 
       if (this.getBoolAttr('checked')) this._input.checked = true;
-      if (this.getBoolAttr('disabled')) this._input.disabled = true;
 
       this._defaultChecked = this.getBoolAttr('checked');
       this._wrapper.appendChild(label);
@@ -2595,7 +2597,7 @@ var GlassKitElements = (function (exports) {
       this._onKeyDown = (e) => {
         const dir = ARROW_KEYS[e.key];
         if (!dir || e.ctrlKey || e.metaKey || e.altKey) return;
-        const group = this._group().filter(el => !el.disabled);
+        const group = this._group().filter(el => !el._actuallyDisabled);
         if (group.length < 2) return;
         e.preventDefault();
         const next = group[(group.indexOf(this) + dir + group.length) % group.length];
@@ -2677,10 +2679,6 @@ var GlassKitElements = (function (exports) {
           this._syncFormValue();
           syncGroupTabIndex(this._group());
           break;
-        case 'disabled':
-          this._input.disabled = this.getBoolAttr('disabled');
-          syncGroupTabIndex(this._group());
-          break;
         case 'label':
           this._labelEl.textContent = this.getAttribute('label') || '';
           break;
@@ -2695,6 +2693,11 @@ var GlassKitElements = (function (exports) {
       }
     }
 
+    applyDisabled(disabled) {
+      this._input.disabled = disabled;
+      syncGroupTabIndex(this._group());
+    }
+
     _syncFormValue() {
       const val = this.getAttribute('value') || '';
       this.setFormValue(this._input.checked ? val : null);
@@ -2719,9 +2722,6 @@ var GlassKitElements = (function (exports) {
       syncGroupTabIndex(this._group());
     }
 
-    get disabled() { return this.getBoolAttr('disabled'); }
-    set disabled(v) { this.setBoolAttr('disabled', v); }
-
     get name() { return this.getAttribute('name'); }
     set name(v) { this.setAttribute('name', v); }
 
@@ -2733,7 +2733,7 @@ var GlassKitElements = (function (exports) {
 
   class GlkRange extends GlkFormElement {
     static get observedAttributes() {
-      return ['label', 'min', 'max', 'value', 'step', 'name', 'disabled'];
+      return ['label', 'min', 'max', 'value', 'step', 'name'];
     }
 
     render() {
@@ -2764,8 +2764,6 @@ var GlassKitElements = (function (exports) {
       const name = this.getAttribute('name');
       if (name) this._input.setAttribute('name', name);
 
-      if (this.getBoolAttr('disabled')) this._input.disabled = true;
-
       // The reset value is the attribute's; a value set as a property before
       // render() has waited for it and comes on top.
       this._defaultValue = this._input.value;
@@ -2817,12 +2815,11 @@ var GlassKitElements = (function (exports) {
         case 'name':
           this._input.setAttribute('name', this.getAttribute('name') || '');
           break;
-        case 'disabled':
-          this._input.disabled = this.getBoolAttr('disabled');
-          break;
       }
     }
 
+    applyDisabled(disabled) { this._input.disabled = disabled; }
+
     _updateValueDisplay() {
       this._valueEl.textContent = `${this._input.value}%`;
     }
@@ -2857,8 +2854,11 @@ var GlassKitElements = (function (exports) {
   // Attributes: options (JSON [{value,label,tone?,disabled?}]), value, full,
   //             overflow ("scroll" | "wrap": what happens when the options
   //             do not fit — without it the row stays one line and runs past
-  //             the edge), label (aria-label of the group), name (form field)
-  // Properties: value, options (array or JSON text), full, overflow, label
+  //             the edge), label (aria-label of the group), name (form field),
+  //             disabled (the whole row; since 1.22.3, as is a disabled
+  //             fieldset around it)
+  // Properties: value, options (array or JSON text), full, overflow, label,
+  //             disabled
   // Event:      glk-change { value } — only on a change made by the user
   // Part:       group
   //
@@ -2911,13 +2911,21 @@ var GlassKitElements = (function (exports) {
           button.classList.add(`glass-segmented__item--${option.tone}`);
           button.appendChild(this.createElement('span', ['glass-segmented__dot']));
         }
-        if (option.disabled) button.disabled = true;
         button.appendChild(document.createTextNode(option.label ?? value));
         this._group.appendChild(button);
       }
+      this.applyDisabled(this._actuallyDisabled);
       this._syncValue();
     }
 
+    /** The whole row is disabled, or an option by its own `disabled`. */
+    applyDisabled(disabled) {
+      const options = this.options;
+      this._group.querySelectorAll('button[data-value]').forEach((button, i) => {
+        button.disabled = disabled || Boolean(options[i]?.disabled);
+      });
+    }
+
     _syncValue() {
       const value = this.value;
       for (const button of this._group.querySelectorAll('button[data-value]')) {
@@ -3020,8 +3028,9 @@ var GlassKitElements = (function (exports) {
   //             the page language, else the browser's), week-start (0 = Sunday … 6 = Saturday;
   //             default from the locale, Monday where the browser cannot say),
   //             label (aria-label of the day group), prev-label / next-label
-  //             (names of the nav buttons, English by default)
-  // Properties: month, value, marks, locale, label
+  //             (names of the nav buttons, English by default), disabled
+  //             (since 1.22.3, as is a disabled fieldset around it)
+  // Properties: month, value, marks, locale, label, disabled
   // Form:       associated — a surrounding <form> receives name=value, reset
   //             restores the initial value, like <glk-segmented>
   // Events:     glk-change { value } — on a pick by the user
@@ -3113,9 +3122,16 @@ var GlassKitElements = (function (exports) {
         day.append(num, dots);
         this._grid.appendChild(day);
       }
+      this.applyDisabled(this._actuallyDisabled);
       this._syncValue();
     }
 
+    // Disabled as a whole: the arrows and every day. The days of another month
+    // are built again, so _build() hands the state on to them too.
+    applyDisabled(disabled) {
+      for (const button of [this._prev, this._next, ...this._days()]) button.disabled = disabled;
+    }
+
     _days() { return [...this._grid.querySelectorAll('button[data-value]')]; }
     _dayFor(iso) { return this._grid.querySelector(`button[data-value="${iso}"]`); }