@jungherz-de/glasskit-elements 1.19.2 → 1.21.0

package/dist/components/glk-modal.js

@@ -1,6 +1,29 @@
 import { GlkElement } from './base.js';
 import '@jungherz-de/glasskit/glasskit-styles.js';
 
+// Since 1.20.0 the overlay is a native <dialog>, opened with showModal(). The
+// browser then does what a modal needs: the dialog lies in the top layer, the
+// page behind it is inert — for the pointer, the keyboard and screen readers
+// alike — focus moves in on opening and goes back to where it came from on
+// closing, and the content is out of reach while the modal is closed.
+// GlassKit (1.20.0) styles dialog.glass-modal-overlay for this.
+//
+// The element keeps the fade: the dialog opens before .is-active is set and
+// closes only after the overlay has faded (safety net 400 ms; at once under
+// prefers-reduced-motion). Escape arrives as the dialog's cancel event and
+// takes the same path as a click on the dimmed area.
+//
+// Which element gets the focus on opening, the browsers decide differently:
+// Chrome takes the first field of the content, Safari the first action. An
+// element marked autofocus — in the content or among the actions — settles
+// it in both.
+
+const CLOSE_FALLBACK_MS = 400;
+
+function reducedMotion() {
+  return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
 class GlkModal extends GlkElement {
   static get observedAttributes() {
     return ['open', 'title'];
@@ -9,13 +32,13 @@ class GlkModal extends GlkElement {
   static get observesLightDom() { return true; }
 
   render() {
-    this._overlay = this.createElement('div', ['glass-modal-overlay'], { part: 'overlay' });
+    this._overlay = this.createElement('dialog', ['glass-modal-overlay'], { part: 'overlay' });
 
     const modal = this.createElement('div', ['glass-modal'], { part: 'modal' });
 
-    // Header
+    // Header — the title names the dialog
     const header = this.createElement('div', ['glass-modal__header'], { part: 'header' });
-    this._titleEl = this.createElement('h2', ['glass-modal__title']);
+    this._titleEl = this.createElement('h2', ['glass-modal__title'], { id: 'title' });
     this.takeTitle();
     this._applyTitle();
     header.appendChild(this._titleEl);
@@ -36,10 +59,8 @@ class GlkModal extends GlkElement {
 
     this._overlay.appendChild(modal);
     this._wrapper.appendChild(this._overlay);
-
-    if (this.getBoolAttr('open')) {
-      this._overlay.classList.add('is-active');
-    }
+    // `open` is applied in setupEvents, which also runs when a moved element
+    // comes back.
   }
 
   projectLightDom() {
@@ -64,33 +85,49 @@ class GlkModal extends GlkElement {
   setupEvents() {
     // Close on overlay click (outside modal)
     this._onOverlayClick = (e) => {
-      if (e.target === this._overlay) {
-        this.removeAttribute('open');
-        this.emit('glk-close');
-      }
+      if (e.target === this._overlay) this._dismiss();
     };
     this._overlay.addEventListener('click', this._onOverlayClick);
 
-    // Close on Escape
-    this._onKeydown = (e) => {
-      if (e.key === 'Escape' && this.getBoolAttr('open')) {
-        this.removeAttribute('open');
-        this.emit('glk-close');
-      }
+    // Escape: the dialog would close at once; it fades out like a click outside.
+    this._onCancel = (e) => {
+      e.preventDefault();
+      this._dismiss();
     };
-    document.addEventListener('keydown', this._onKeydown);
+    this._overlay.addEventListener('cancel', this._onCancel);
+
+    // The browser may also close the dialog by itself — Chrome does on a
+    // second Escape without user activation in between, skipping cancel.
+    this._onClose = () => {
+      if (this._overlay.open) return;       // a late event from an earlier close
+      this._overlay.classList.remove('is-active');
+      if (this.open) this._dismiss();
+    };
+    this._overlay.addEventListener('close', this._onClose);
+
+    if (this.open) this._show();
   }
 
   teardownEvents() {
     this._overlay?.removeEventListener('click', this._onOverlayClick);
-    document.removeEventListener('keydown', this._onKeydown);
+    this._overlay?.removeEventListener('cancel', this._onCancel);
+    this._overlay?.removeEventListener('close', this._onClose);
+    // Taken out of the document, the dialog leaves the top layer but stays
+    // open — shown in place, not modal. Closed now, it opens as a modal again
+    // when the element comes back.
+    clearTimeout(this._closeTimer);
+    this._overlay?.removeEventListener('transitionend', this._onFaded);
+    this._overlay?.classList.remove('is-active');
+    if (this._overlay?.open) this._overlay.close();
   }
 
   onAttributeChanged(name, _old, value) {
     if (!this._overlay) return;
     switch (name) {
       case 'open':
-        this._overlay.classList.toggle('is-active', this.getBoolAttr('open'));
+        if (!this.isConnected) return;      // setupEvents applies it on connect
+        if (this.open) this._show();
+        else this._hide();
         break;
       case 'title':
         if (this.takeTitle(value)) this._applyTitle();
@@ -98,11 +135,52 @@ class GlkModal extends GlkElement {
     }
   }
 
+  _show() {
+    const dialog = this._overlay;
+    clearTimeout(this._closeTimer);
+    dialog.removeEventListener('transitionend', this._onFaded);
+    if (!dialog.open) {
+      dialog.showModal();
+      // The actions are copies in the shadow root; the originals are not shown.
+      (this._footer.querySelector('[autofocus]') || this.querySelector('[autofocus]'))?.focus();
+    }
+    void dialog.offsetHeight; // reflow, so the fade starts from the closed state
+    requestAnimationFrame(() => {
+      if (this.open) dialog.classList.add('is-active');
+    });
+  }
+
+  _hide() {
+    const dialog = this._overlay;
+    dialog.classList.remove('is-active');
+    this._onFaded = (event) => {
+      if (event && event.target !== dialog) return;   // the panel's own transition
+      clearTimeout(this._closeTimer);
+      dialog.removeEventListener('transitionend', this._onFaded);
+      if (!this.open && dialog.open) dialog.close();
+    };
+    if (!dialog.open || reducedMotion()) {
+      this._onFaded();
+      return;
+    }
+    dialog.addEventListener('transitionend', this._onFaded);
+    this._closeTimer = setTimeout(this._onFaded, CLOSE_FALLBACK_MS);
+  }
+
+  /** Closed by the user — a click outside, Escape. */
+  _dismiss() {
+    this.removeAttribute('open');
+    this.emit('glk-close');
+  }
+
   show() { this.setAttribute('open', ''); }
   close() { this.removeAttribute('open'); }
 
   _applyTitle() {
-    if (this._titleEl) this._titleEl.textContent = this._title || '';
+    if (!this._titleEl) return;
+    this._titleEl.textContent = this._title || '';
+    if (this._title) this._overlay.setAttribute('aria-labelledby', 'title');
+    else this._overlay.removeAttribute('aria-labelledby');
   }
 
   // `title` is the heading, never a tooltip — see GlkElement.takeTitle().

package/dist/components/glk-pill.js

@@ -1,9 +1,13 @@
 import { GlkElement } from './base.js';
 import '@jungherz-de/glasskit/glasskit-styles.js';
 
+// Handed down to the native button, which is what assistive technology reads —
+// <glk-popover> sets aria-expanded on its trigger.
+const FORWARDED_ARIA = ['aria-expanded', 'aria-haspopup', 'aria-pressed'];
+
 class GlkPill extends GlkElement {
   static get observedAttributes() {
-    return ['label', 'disabled'];
+    return ['label', 'disabled', ...FORWARDED_ARIA];
   }
 
   render() {
@@ -13,6 +17,7 @@ class GlkPill extends GlkElement {
 
     const ariaLabel = this.getAttribute('label');
     if (ariaLabel) this._btn.setAttribute('aria-label', ariaLabel);
+    for (const attr of FORWARDED_ARIA) this._forward(attr);
 
     // Slotted content (SVG icons, text)
     this._btn.appendChild(document.createElement('slot'));
@@ -41,8 +46,16 @@ class GlkPill extends GlkElement {
       case 'disabled':
         this._btn.disabled = this.getBoolAttr('disabled');
         break;
+      default:
+        if (FORWARDED_ARIA.includes(name)) this._forward(name);
     }
   }
+
+  _forward(attr) {
+    const value = this.getAttribute(attr);
+    if (value === null) this._btn.removeAttribute(attr);
+    else this._btn.setAttribute(attr, value);
+  }
 }
 
 customElements.define('glk-pill', GlkPill);

package/dist/components/glk-popover.js

@@ -11,9 +11,9 @@ class GlkPopover extends GlkElement {
   render() {
     this._anchor = this.createElement('div', ['glass-popover-anchor']);
 
-    const triggerSlot = document.createElement('slot');
-    triggerSlot.setAttribute('name', 'trigger');
-    this._anchor.appendChild(triggerSlot);
+    this._triggerSlot = document.createElement('slot');
+    this._triggerSlot.setAttribute('name', 'trigger');
+    this._anchor.appendChild(this._triggerSlot);
 
     this._popover = this.createElement('div', ['glass-popover']);
     this._applyPlacement();
@@ -37,7 +37,23 @@ class GlkPopover extends GlkElement {
     }
   }
 
+  /**
+   * The trigger says whether the popover is open. It lives in the light DOM,
+   * so aria-expanded goes on it directly; <glk-button> and <glk-pill> hand
+   * it on to their native button. Runs again when the trigger is swapped.
+   */
+  _applyExpanded() {
+    const open = String(this.getBoolAttr('open'));
+    for (const trigger of this._triggerSlot.assignedElements()) {
+      trigger.setAttribute('aria-expanded', open);
+    }
+  }
+
   setupEvents() {
+    this._onSlotChange = () => this._applyExpanded();
+    this._triggerSlot.addEventListener('slotchange', this._onSlotChange);
+    this._applyExpanded();
+
     // Toggle when the slotted trigger is clicked.
     this._onTriggerClick = (e) => {
       const path = e.composedPath();
@@ -69,6 +85,7 @@ class GlkPopover extends GlkElement {
   }
 
   teardownEvents() {
+    this._triggerSlot?.removeEventListener('slotchange', this._onSlotChange);
     this.removeEventListener('click', this._onTriggerClick);
     document.removeEventListener('click', this._onDocClick);
     document.removeEventListener('keydown', this._onKeydown);
@@ -80,6 +97,7 @@ class GlkPopover extends GlkElement {
       case 'open': {
         const isOpen = this.getBoolAttr('open');
         this._popover.classList.toggle('is-open', isOpen);
+        this._applyExpanded();
         this.emit(isOpen ? 'glk-open' : 'glk-close');
         break;
       }

package/dist/components/glk-radio.js

@@ -1,4 +1,4 @@
-import { GlkFormElement } from './base.js';
+import { GlkFormElement, checkControlSheet, forwardHostClicks } from './base.js';
 import '@jungherz-de/glasskit/glasskit-styles.js';
 
 // ── Grouping ──
@@ -30,9 +30,11 @@ function syncGroupTabIndex(group) {
 
 class GlkRadio extends GlkFormElement {
   static get observedAttributes() {
-    return ['checked', 'disabled', 'label', 'name', 'value'];
+    return ['checked', 'disabled', 'label', 'name', 'value', 'required'];
   }
 
+  static get hostStyles() { return checkControlSheet; }
+
   render() {
     const label = this.createElement('label', ['glass-radio']);
 
@@ -87,11 +89,13 @@ class GlkRadio extends GlkFormElement {
 
     this._input.addEventListener('change', this._onChange);
     this._input.addEventListener('keydown', this._onKeyDown);
+    this._unforwardClicks = forwardHostClicks(this, () => this._input);
   }
 
   teardownEvents() {
     this._input?.removeEventListener('change', this._onChange);
     this._input?.removeEventListener('keydown', this._onKeyDown);
+    this._unforwardClicks?.();
   }
 
   /** Shared by user change and arrow-key selection, so both look identical. */
@@ -126,6 +130,26 @@ class GlkRadio extends GlkFormElement {
     }
   }
 
+  get _validityField() { return this._input; }
+
+  /**
+   * Radios are missing a value as a group: one required radio makes the
+   * whole group required, and any checked one satisfies it. Each input here
+   * sits alone in its shadow root, so the group's verdict is worked out across
+   * the elements and handed to every member. The inner input carries
+   * `required` only while the group lacks a value — that way it produces the
+   * browser's own message for it.
+   */
+  syncValidity() {
+    const group = this._group();
+    const missing = group.some(el => el.hasAttribute('required')) && !group.some(el => el.checked);
+    for (const el of group) {
+      if (!el._input) continue;            // not rendered yet; syncs when it is
+      el._input.required = missing;
+      super.syncValidity.call(el);
+    }
+  }
+
   onAttributeChanged(name) {
     if (this._syncing) return;
     if (!this._input) return;

package/dist/components/glk-range.js

@@ -11,7 +11,8 @@ class GlkRange extends GlkFormElement {
 
     const header = this.createElement('div', ['glass-range-header']);
 
-    this._labelEl = this.createElement('label', []);
+    // Tied to the slider by an id that only has to be unique in this shadow root.
+    this._labelEl = this.createElement('label', [], { for: 'field' });
     this._labelEl.textContent = this.getAttribute('label') || '';
 
     this._valueEl = this.createElement('span', ['glass-range-value']);
@@ -20,6 +21,7 @@ class GlkRange extends GlkFormElement {
     header.appendChild(this._valueEl);
 
     this._input = this.createElement('input', ['glass-range'], {
+      id: 'field',
       type: 'range',
       min: this.getAttribute('min') || '0',
       max: this.getAttribute('max') || '100',

package/dist/components/glk-search.js

@@ -5,7 +5,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'];
+    return ['placeholder', 'name', 'value', 'disabled', 'label'];
   }
 
   render() {
@@ -21,6 +21,10 @@ class GlkSearch extends GlkFormElement {
     const placeholder = this.getAttribute('placeholder');
     if (placeholder) this._input.setAttribute('placeholder', placeholder);
 
+    // The search field has no visible label; `label` names it for assistive
+    // technology. Without it the placeholder is all a screen reader can say.
+    this._applyLabel();
+
     const name = this.getAttribute('name');
     if (name) this._input.setAttribute('name', name);
 
@@ -65,9 +69,18 @@ class GlkSearch extends GlkFormElement {
       case 'disabled':
         this._input.disabled = this.getBoolAttr('disabled');
         break;
+      case 'label':
+        this._applyLabel();
+        break;
     }
   }
 
+  _applyLabel() {
+    const label = this.getAttribute('label');
+    if (label) this._input.setAttribute('aria-label', label);
+    else this._input.removeAttribute('aria-label');
+  }
+
   _syncFormValue() {
     this.setFormValue(this._input.value);
   }

package/dist/components/glk-segmented.js

@@ -40,6 +40,10 @@ function parseList(json) {
 class GlkSegmented extends GlkFormElement {
   static get observedAttributes() { return ['options', 'value', 'full', 'overflow', 'label']; }
 
+  // A row of buttons with one tab stop: delegated focus would land on the
+  // first button, not the chosen one.
+  static get delegatesFocus() { return false; }
+
   render() {
     this._group = this.createElement('div', ['glass-segmented'], { role: 'group', part: 'group' });
     this._wrapper.appendChild(this._group);

package/dist/components/glk-select.js

@@ -11,10 +11,11 @@ class GlkSelect extends GlkFormElement {
   render() {
     const group = this.createElement('div', ['glass-input-group']);
 
-    this._labelEl = this.createElement('label', ['glass-label']);
+    // Tied to the field by an id that only has to be unique in this shadow root.
+    this._labelEl = this.createElement('label', ['glass-label'], { for: 'field' });
     this._labelEl.textContent = this.getAttribute('label') || '';
 
-    this._select = this.createElement('select', ['glass-select']);
+    this._select = this.createElement('select', ['glass-select'], { id: 'field' });
 
     const name = this.getAttribute('name');
     if (name) this._select.setAttribute('name', name);
@@ -102,9 +103,14 @@ class GlkSelect extends GlkFormElement {
         this._applyValue(this.getAttribute('value'));
         this._syncFormValue();
         break;
+      case 'required':
+        this._select.required = this.getBoolAttr('required');
+        break;
     }
   }
 
+  get _validityField() { return this._select; }
+
   _syncFormValue() {
     this.setFormValue(this._select.value);
   }

package/dist/components/glk-textarea.js

@@ -9,10 +9,11 @@ class GlkTextarea extends GlkFormElement {
   render() {
     const group = this.createElement('div', ['glass-input-group']);
 
-    this._labelEl = this.createElement('label', ['glass-label']);
+    // Tied to the field by an id that only has to be unique in this shadow root.
+    this._labelEl = this.createElement('label', ['glass-label'], { for: 'field' });
     this._labelEl.textContent = this.getAttribute('label') || '';
 
-    this._textarea = this.createElement('textarea', ['glass-textarea']);
+    this._textarea = this.createElement('textarea', ['glass-textarea'], { id: 'field' });
     const placeholder = this.getAttribute('placeholder');
     if (placeholder) this._textarea.setAttribute('placeholder', placeholder);
 
@@ -70,9 +71,14 @@ class GlkTextarea extends GlkFormElement {
         this._textarea.value = this.getAttribute('value') || '';
         this._syncFormValue();
         break;
+      case 'required':
+        this._textarea.required = this.getBoolAttr('required');
+        break;
     }
   }
 
+  get _validityField() { return this._textarea; }
+
   _syncFormValue() {
     this.setFormValue(this._textarea.value);
   }

package/dist/components/glk-toggle.js

@@ -1,16 +1,23 @@
-import { GlkFormElement } from './base.js';
+import { GlkFormElement, checkControlSheet, forwardHostClicks } from './base.js';
 import '@jungherz-de/glasskit/glasskit-styles.js';
 
 class GlkToggle extends GlkFormElement {
   static get observedAttributes() {
-    return ['checked', 'disabled', 'label', 'name', 'value'];
+    return ['checked', 'disabled', 'label', 'name', 'value', 'required'];
   }
 
+  static get hostStyles() { return checkControlSheet; }
+
   render() {
     const label = this.createElement('label', ['glass-toggle']);
 
+    // The native checkbox is the switch: role, checked state and name (from
+    // the label around it) all sit on one control. The host has no role of
+    // its own — it used to carry role="switch" as well, and screen readers met
+    // a switch with a checkbox inside.
     this._input = this.createElement('input', ['glass-toggle__input'], {
-      type: 'checkbox'
+      type: 'checkbox',
+      role: 'switch'
     });
 
     const name = this.getAttribute('name');
@@ -29,14 +36,12 @@ class GlkToggle extends GlkFormElement {
 
     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');
     this._wrapper.appendChild(label);
 
     this._syncFormValue();
-    this.setAttribute('role', 'switch');
-    this.setAttribute('aria-checked', String(this._input.checked));
-    if (this.getBoolAttr('disabled')) this.setAttribute('aria-disabled', 'true');
   }
 
   setupEvents() {
@@ -44,16 +49,17 @@ class GlkToggle extends GlkFormElement {
       this._syncing = true;
       this.setBoolAttr('checked', this._input.checked);
       this._syncing = false;
-      this.setAttribute('aria-checked', String(this._input.checked));
       this._syncFormValue();
       this.emit('glk-change', { checked: this._input.checked });
       this.dispatchEvent(new Event('change', { bubbles: true }));
     };
     this._input.addEventListener('change', this._onChange);
+    this._unforwardClicks = forwardHostClicks(this, () => this._input);
   }
 
   teardownEvents() {
     this._input?.removeEventListener('change', this._onChange);
+    this._unforwardClicks?.();
   }
 
   onAttributeChanged(name) {
@@ -62,12 +68,10 @@ class GlkToggle extends GlkFormElement {
     switch (name) {
       case 'checked':
         this._input.checked = this.getBoolAttr('checked');
-        this.setAttribute('aria-checked', String(this._input.checked));
         this._syncFormValue();
         break;
       case 'disabled':
         this._input.disabled = this.getBoolAttr('disabled');
-        this.setAttribute('aria-disabled', String(this.getBoolAttr('disabled')));
         break;
       case 'label':
         this._labelEl.textContent = this.getAttribute('label') || '';
@@ -75,9 +79,14 @@ class GlkToggle extends GlkFormElement {
       case 'name':
         this._input.setAttribute('name', this.getAttribute('name') || '');
         break;
+      case 'required':
+        this._input.required = this.getBoolAttr('required');
+        break;
     }
   }
 
+  get _validityField() { return this._input; }
+
   _syncFormValue() {
     const val = this.getAttribute('value') || 'on';
     this.setFormValue(this._input.checked ? val : null);
@@ -86,7 +95,6 @@ class GlkToggle extends GlkFormElement {
   resetValue() {
     this._input.checked = this._defaultChecked;
     this.setBoolAttr('checked', this._defaultChecked);
-    this.setAttribute('aria-checked', String(this._defaultChecked));
     this._syncFormValue();
   }
 
@@ -101,7 +109,6 @@ class GlkToggle extends GlkFormElement {
   set checked(v) {
     if (this._input) this._input.checked = v;
     this.setBoolAttr('checked', v);
-    this.setAttribute('aria-checked', String(v));
     this._syncFormValue();
   }