@jungherz-de/glasskit-elements 1.22.1 → 1.22.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/glasskit-elements",
-  "version": "1.22.1",
+  "version": "1.22.3",
   "description": "Vanilla JavaScript Web Components wrapping the GlassKit CSS glassmorphism library",
   "license": "MIT",
   "homepage": "https://glasskit-elements.jungherz.com",
@@ -49,10 +49,10 @@
     "vanilla-js"
   ],
   "peerDependencies": {
-    "@jungherz-de/glasskit": ">=1.22.1"
+    "@jungherz-de/glasskit": ">=1.22.2"
   },
   "devDependencies": {
-    "@jungherz-de/glasskit": "^1.22.1",
+    "@jungherz-de/glasskit": "^1.22.2",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",
     "rollup": "^4.0.0"

package/src/base.js

@@ -238,6 +238,7 @@ export class GlkElement extends HTMLElement {
       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
@@ -340,6 +341,28 @@ export class GlkElement extends HTMLElement {
    */
   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 ──
 
   /**
@@ -417,6 +440,17 @@ export class GlkFormElement extends GlkElement {
     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; }

package/src/components/buttons/glk-button.js

@@ -10,12 +10,13 @@ const FORWARDED_ARIA = ['aria-expanded', 'aria-haspopup', 'aria-pressed'];
 
 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() {
@@ -28,9 +29,6 @@ class GlkButton extends GlkElement {
       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'));
@@ -39,7 +37,7 @@ class GlkButton extends GlkElement {
 
   setupEvents() {
     this._onClick = (e) => {
-      if (this.getBoolAttr('disabled')) {
+      if (this._actuallyDisabled) {
         e.preventDefault();
         e.stopPropagation();
         return;
@@ -98,9 +96,6 @@ class GlkButton extends GlkElement {
       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;
@@ -109,6 +104,8 @@ class GlkButton extends GlkElement {
     }
   }
 
+  applyDisabled(disabled) { this._btn.disabled = disabled; }
+
   _forward(attr) {
     const value = this.getAttribute(attr);
     if (value === null) this._btn.removeAttribute(attr);

package/src/components/forms/glk-calendar.js

@@ -10,8 +10,9 @@ import { isoDate, parseIso, addDays, parseJsonObject, resolveLocale, formatters,
 //             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
@@ -103,9 +104,16 @@ class GlkCalendar extends GlkFormElement {
       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}"]`); }
 

package/src/components/forms/glk-checkbox.js

@@ -4,7 +4,7 @@ const CHECKMARK_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor
 
 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; }
@@ -30,7 +30,6 @@ class GlkCheckbox extends GlkFormElement {
     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');
@@ -64,9 +63,6 @@ class GlkCheckbox extends GlkFormElement {
         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;
@@ -79,6 +75,8 @@ class GlkCheckbox extends GlkFormElement {
     }
   }
 
+  applyDisabled(disabled) { this._input.disabled = disabled; }
+
   get _validityField() { return this._input; }
 
   _syncFormValue() {
@@ -100,9 +98,6 @@ class GlkCheckbox extends GlkFormElement {
     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); }
 

package/src/components/forms/glk-input.js

@@ -9,19 +9,30 @@ const FORWARDED = ['min', 'max', 'step', 'minlength', 'maxlength', 'pattern', 'a
 // Prefix and suffix (since 1.22.0): two slots inside the field's box, on
 // GlassKit's .glass-input-wrap. An affix shows only while something is
 // slotted into it, and its width is measured, so the text keeps clear of a
-// unit of any length. GlassKit lets clicks through an affix to the field;
-// slotted elements take them here instead — a button or a link inside
-// works — and a click on slotted text or an icon still lands in the field,
-// because the shadow root delegates focus to it.
+// unit of any length. As in GlassKit, a click on text, an icon or a disabled
+// control goes through to the field, and what can be used takes its own: an
+// enabled control (<glk-button>, <glk-select> … are form-associated, so they
+// count), a link, an element with tabindex. GlassKit's own rule cannot reach
+// slotted elements, hence this one. ::slotted() sees the slotted element,
+// not what is inside it: a button wrapped in a slotted <span> needs
+// pointer-events: auto from the page. Until 1.22.1 every slotted element took
+// the pointer — a unit caught the click meant for the field, a disabled
+// button took it and moved the focus into the field, read-only and locked
+// or not. Simple selectors only inside ::slotted(), so that no browser drops
+// the rule.
 const affixSheet = new CSSStyleSheet();
 affixSheet.replaceSync(`
-  .glass-input-wrap__prefix ::slotted(*),
-  .glass-input-wrap__suffix ::slotted(*) { pointer-events: auto; }
+  .glass-input-wrap__prefix ::slotted(:enabled),
+  .glass-input-wrap__prefix ::slotted(a[href]),
+  .glass-input-wrap__prefix ::slotted([tabindex]:not(:disabled)),
+  .glass-input-wrap__suffix ::slotted(:enabled),
+  .glass-input-wrap__suffix ::slotted(a[href]),
+  .glass-input-wrap__suffix ::slotted([tabindex]:not(:disabled)) { pointer-events: auto; }
 `);
 
 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; }
@@ -52,7 +63,6 @@ class GlkInput extends GlkFormElement {
     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);
@@ -142,9 +152,6 @@ class GlkInput extends GlkFormElement {
         }
         this._applyDescription();
         break;
-      case 'disabled':
-        this._input.disabled = this.getBoolAttr('disabled');
-        break;
       case 'readonly':
         this._input.readOnly = this.getBoolAttr('readonly');
         break;
@@ -163,6 +170,8 @@ class GlkInput extends GlkFormElement {
     }
   }
 
+  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]) {
@@ -228,9 +237,6 @@ class GlkInput extends GlkFormElement {
     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); }
 

package/src/components/forms/glk-radio.js

@@ -19,7 +19,7 @@ function ownerForm(el) {
 
 /** 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) {
@@ -29,7 +29,7 @@ function syncGroupTabIndex(group) {
 
 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; }
@@ -59,7 +59,6 @@ class GlkRadio extends GlkFormElement {
     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);
@@ -77,7 +76,7 @@ class GlkRadio extends GlkFormElement {
     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];
@@ -159,10 +158,6 @@ class GlkRadio extends GlkFormElement {
         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;
@@ -177,6 +172,11 @@ class GlkRadio extends GlkFormElement {
     }
   }
 
+  applyDisabled(disabled) {
+    this._input.disabled = disabled;
+    syncGroupTabIndex(this._group());
+  }
+
   _syncFormValue() {
     const val = this.getAttribute('value') || '';
     this.setFormValue(this._input.checked ? val : null);
@@ -201,9 +201,6 @@ class GlkRadio extends GlkFormElement {
     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); }
 

package/src/components/forms/glk-range.js

@@ -2,7 +2,7 @@ import { GlkFormElement } from '../../base.js';
 
 class GlkRange extends GlkFormElement {
   static get observedAttributes() {
-    return ['label', 'min', 'max', 'value', 'step', 'name', 'disabled'];
+    return ['label', 'min', 'max', 'value', 'step', 'name'];
   }
 
   render() {
@@ -33,8 +33,6 @@ class GlkRange extends GlkFormElement {
     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;
@@ -86,12 +84,11 @@ class GlkRange extends GlkFormElement {
       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}%`;
   }

package/src/components/forms/glk-search.js

@@ -4,7 +4,7 @@ const SEARCH_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" s
 
 class GlkSearch extends GlkFormElement {
   static get observedAttributes() {
-    return ['placeholder', 'name', 'value', 'disabled', 'label'];
+    return ['placeholder', 'name', 'value', 'label'];
   }
 
   render() {
@@ -32,8 +32,6 @@ class GlkSearch extends GlkFormElement {
     this._pendingValue = undefined;
     if (value) this._input.value = value;
 
-    if (this.getBoolAttr('disabled')) this._input.disabled = true;
-
     container.appendChild(icon);
     container.appendChild(this._input);
 
@@ -67,15 +65,14 @@ class GlkSearch extends GlkFormElement {
         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);

package/src/components/forms/glk-segmented.js

@@ -7,8 +7,11 @@ import { revealCentered } from '../../reveal.js';
 // 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
 //
@@ -61,13 +64,21 @@ class GlkSegmented extends GlkFormElement {
         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]')) {

package/src/components/forms/glk-select.js

@@ -12,7 +12,7 @@ import { GlkFormElement } from '../../base.js';
 
 class GlkSelect extends GlkFormElement {
   static get observedAttributes() {
-    return ['label', 'disabled', 'name', 'value', 'required'];
+    return ['label', 'name', 'value', 'required'];
   }
 
   static get observesLightDom() { return true; }
@@ -31,7 +31,6 @@ class GlkSelect extends GlkFormElement {
     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);
@@ -105,9 +104,6 @@ class GlkSelect extends GlkFormElement {
       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;
@@ -122,6 +118,8 @@ class GlkSelect extends GlkFormElement {
     }
   }
 
+  applyDisabled(disabled) { this._select.disabled = disabled; }
+
   get _validityField() { return this._select; }
 
   _syncFormValue() {
@@ -147,9 +145,6 @@ class GlkSelect extends GlkFormElement {
     this._applyValue(this._wanted);
     this._syncFormValue();
   }
-
-  get disabled() { return this.getBoolAttr('disabled'); }
-  set disabled(v) { this.setBoolAttr('disabled', v); }
 }
 
 customElements.define('glk-select', GlkSelect);

package/src/components/forms/glk-textarea.js

@@ -2,7 +2,7 @@ import { GlkFormElement } from '../../base.js';
 
 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() {
@@ -27,7 +27,6 @@ class GlkTextarea extends GlkFormElement {
     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;
 
@@ -63,9 +62,6 @@ class GlkTextarea extends GlkFormElement {
       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;
@@ -82,6 +78,8 @@ class GlkTextarea extends GlkFormElement {
     }
   }
 
+  applyDisabled(disabled) { this._textarea.disabled = disabled; }
+
   get _validityField() { return this._textarea; }
 
   _syncFormValue() {
@@ -103,9 +101,6 @@ class GlkTextarea extends GlkFormElement {
     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); }
 }

package/src/components/forms/glk-toggle.js

@@ -2,7 +2,7 @@ import { GlkFormElement, checkControlSheet, forwardHostClicks } from '../../base
 
 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; }
@@ -34,7 +34,6 @@ class GlkToggle extends GlkFormElement {
     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');
@@ -69,9 +68,6 @@ class GlkToggle extends GlkFormElement {
         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;
@@ -84,6 +80,8 @@ class GlkToggle extends GlkFormElement {
     }
   }
 
+  applyDisabled(disabled) { this._input.disabled = disabled; }
+
   get _validityField() { return this._input; }
 
   _syncFormValue() {
@@ -112,9 +110,6 @@ class GlkToggle extends GlkFormElement {
     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); }