@jungherz-de/glasskit-elements 1.10.0 → 1.12.0

package/src/components/feedback/glk-modal.js

@@ -5,6 +5,8 @@ class GlkModal extends GlkElement {
     return ['open', 'title'];
   }
 
+  static get observesLightDom() { return true; }
+
   render() {
     this._overlay = this.createElement('div', ['glass-modal-overlay'], { part: 'overlay' });
 
@@ -28,7 +30,7 @@ class GlkModal extends GlkElement {
     modal.appendChild(this._footer);
 
     // Defer footer population — children may not be parsed yet
-    requestAnimationFrame(() => this._populateFooter());
+    requestAnimationFrame(() => this.projectLightDom());
 
     this._overlay.appendChild(modal);
     this._wrapper.appendChild(this._overlay);
@@ -38,18 +40,23 @@ class GlkModal extends GlkElement {
     }
   }
 
-  _populateFooter() {
+  projectLightDom() {
+    const buttons = [...this.querySelectorAll('[slot="actions"] button')];
+    const signature = buttons.map(b => b.outerHTML).join('');
+    if (signature === this._footerSignature) return;
+    this._footerSignature = signature;
+
     this._footer.innerHTML = '';
-    const actionsSlot = this.querySelector('[slot="actions"]');
-    if (actionsSlot) {
-      const buttons = actionsSlot.querySelectorAll('button');
-      buttons.forEach(btn => {
-        const clone = btn.cloneNode(true);
-        // Forward click events to the original button
-        clone.addEventListener('click', () => btn.click());
-        this._footer.appendChild(clone);
+    buttons.forEach((btn, i) => {
+      const clone = btn.cloneNode(true);
+      // Look the original up again at click time instead of closing over it: a
+      // framework that re-renders replaces the node, and a captured reference
+      // would then forward the click to a button no longer in the document.
+      clone.addEventListener('click', () => {
+        this.querySelectorAll('[slot="actions"] button')[i]?.click();
       });
-    }
+      this._footer.appendChild(clone);
+    });
   }
 
   setupEvents() {

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

@@ -1,5 +1,32 @@
 import { GlkFormElement } from '../../base.js';
 
+// ── Grouping ──
+// Every <glk-radio> keeps its <input type="radio"> in its own shadow root, and
+// native radio grouping works per tree — it does not reach across shadow
+// boundaries. Two <glk-radio name="x"> would therefore both stay checked. So
+// the group is kept here instead, following the native definition as closely
+// as we can: same `name`, same containing tree, same form owner.
+
+const ARROW_KEYS = {
+  ArrowDown:  1, ArrowRight:  1,
+  ArrowUp:   -1, ArrowLeft:  -1
+};
+
+/** Form owner, also for a peer that has not been upgraded yet. */
+function ownerForm(el) {
+  return (el.form !== undefined ? el.form : el.closest('form')) ?? null;
+}
+
+/** Only the selected radio is a tab stop; arrow keys move within the group. */
+function syncGroupTabIndex(group) {
+  const enabled = group.filter(el => !el.disabled);
+  if (!enabled.length) return;
+  const focusable = enabled.find(el => el.checked) || enabled[0];
+  for (const el of group) {
+    if (el._input) el._input.tabIndex = el === focusable ? 0 : -1;
+  }
+}
+
 class GlkRadio extends GlkFormElement {
   static get observedAttributes() {
     return ['checked', 'disabled', 'label', 'name', 'value'];
@@ -35,22 +62,67 @@ class GlkRadio extends GlkFormElement {
     this._defaultChecked = this.getBoolAttr('checked');
     this._wrapper.appendChild(label);
     this._syncFormValue();
+
+    // Elements upgrade in document order, so the last `checked` one in the
+    // markup wins the group — the same outcome native radios produce.
+    if (this._input.checked) this._uncheckPeers();
+    syncGroupTabIndex(this._group());
   }
 
   setupEvents() {
-    this._onChange = () => {
-      this._syncing = true;
-      this.setBoolAttr('checked', this._input.checked);
-      this._syncing = false;
-      this._syncFormValue();
-      this.emit('glk-change', { checked: this._input.checked, value: this._input.value });
-      this.dispatchEvent(new Event('change', { bubbles: true }));
+    this._onChange = () => this._applyChange();
+
+    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);
+      if (group.length < 2) return;
+      e.preventDefault();
+      const next = group[(group.indexOf(this) + dir + group.length) % group.length];
+      next._input.focus();
+      next._input.checked = true;
+      next._applyChange();
     };
+
     this._input.addEventListener('change', this._onChange);
+    this._input.addEventListener('keydown', this._onKeyDown);
   }
 
   teardownEvents() {
     this._input?.removeEventListener('change', this._onChange);
+    this._input?.removeEventListener('keydown', this._onKeyDown);
+  }
+
+  /** Shared by user change and arrow-key selection, so both look identical. */
+  _applyChange() {
+    if (this._input.checked) this._uncheckPeers();
+    this._syncing = true;
+    this.setBoolAttr('checked', this._input.checked);
+    this._syncing = false;
+    this._syncFormValue();
+    syncGroupTabIndex(this._group());
+    this.emit('glk-change', { checked: this._input.checked, value: this._input.value });
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+  }
+
+  /**
+   * The radio group per the HTML definition: same name, same tree, same form
+   * owner — in document order, this element included.
+   */
+  _group() {
+    const name = this.getAttribute('name');
+    const root = this.getRootNode();
+    if (!name || typeof root?.querySelectorAll !== 'function') return [this];
+    const form = ownerForm(this);
+    return [...root.querySelectorAll('glk-radio')].filter(
+      el => el.getAttribute('name') === name && ownerForm(el) === form
+    );
+  }
+
+  _uncheckPeers() {
+    for (const el of this._group()) {
+      if (el !== this && el.checked) el.checked = false;
+    }
   }
 
   onAttributeChanged(name) {
@@ -59,16 +131,20 @@ class GlkRadio extends GlkFormElement {
     switch (name) {
       case 'checked':
         this._input.checked = this.getBoolAttr('checked');
+        if (this._input.checked) this._uncheckPeers();
         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;
       case 'name':
         this._input.setAttribute('name', this.getAttribute('name') || '');
+        syncGroupTabIndex(this._group());
         break;
       case 'value':
         this._input.setAttribute('value', this.getAttribute('value') || '');
@@ -86,13 +162,18 @@ class GlkRadio extends GlkFormElement {
     this._input.checked = this._defaultChecked;
     this.setBoolAttr('checked', this._defaultChecked);
     this._syncFormValue();
+    syncGroupTabIndex(this._group());
   }
 
   get checked() { return this._input?.checked ?? false; }
   set checked(v) {
     if (this._input) this._input.checked = v;
+    // Also covers the case where the attribute is already present, so
+    // setBoolAttr stays silent and onAttributeChanged never runs.
+    if (v) this._uncheckPeers();
     this.setBoolAttr('checked', v);
     this._syncFormValue();
+    syncGroupTabIndex(this._group());
   }
 
   get disabled() { return this.getBoolAttr('disabled'); }

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

@@ -5,6 +5,8 @@ class GlkSelect extends GlkFormElement {
     return ['label', 'disabled', 'name', 'value', 'required'];
   }
 
+  static get observesLightDom() { return true; }
+
   render() {
     const group = this.createElement('div', ['glass-input-group']);
 
@@ -25,12 +27,29 @@ class GlkSelect extends GlkFormElement {
     this._wrapper.appendChild(group);
 
     // Defer option copying — children may not be parsed yet in connectedCallback
-    requestAnimationFrame(() => {
-      this._moveOptions();
-      const value = this.getAttribute('value');
-      if (value) this._select.value = value;
-      this._syncFormValue();
-    });
+    requestAnimationFrame(() => this.projectLightDom());
+  }
+
+  projectLightDom() {
+    // The options are pure data — the clones carry no listeners — so skipping an
+    // unchanged rebuild is safe, and it keeps an open dropdown from snapping shut
+    // on light-DOM churn elsewhere.
+    const signature = [...this.querySelectorAll('option')].map(o => o.outerHTML).join('');
+    if (signature === this._optionSignature) return;
+    this._optionSignature = signature;
+
+    // innerHTML = '' below drops the selection, so remember it first. A
+    // selectedIndex of -1 means "nothing is selected", which is not the same as
+    // an option whose value happens to be the empty string.
+    const previous = this._select.selectedIndex >= 0 ? this._select.value : null;
+
+    this._moveOptions();
+
+    // Keep the live selection when it survived the rebuild; otherwise fall back
+    // to the value attribute. Without this the selection jumps back to the first
+    // entry every time the list is updated.
+    if (!this._applyValue(previous)) this._applyValue(this.getAttribute('value'));
+    this._syncFormValue();
   }
 
   _moveOptions() {
@@ -41,6 +60,18 @@ class GlkSelect extends GlkFormElement {
     });
   }
 
+  /**
+   * Selects `value` if an option carries it, and reports whether it did. The
+   * empty string is a value like any other — "" is a real option in plenty of
+   * forms ("detect automatically", "enter your own below").
+   */
+  _applyValue(value) {
+    if (value === null) return false;
+    if (![...this._select.options].some(o => o.value === value)) return false;
+    this._select.value = value;
+    return true;
+  }
+
   setupEvents() {
     this._onChange = () => {
       this._syncFormValue();
@@ -67,7 +98,7 @@ class GlkSelect extends GlkFormElement {
         this._select.setAttribute('name', this.getAttribute('name') || '');
         break;
       case 'value':
-        this._select.value = this.getAttribute('value') || '';
+        this._applyValue(this.getAttribute('value'));
         this._syncFormValue();
         break;
     }

package/src/components/navigation/glk-tab-item.js

@@ -5,6 +5,8 @@ class GlkTabItem extends GlkElement {
     return ['label', 'active', 'badge'];
   }
 
+  static get observesLightDom() { return true; }
+
   render() {
     this._btn = this.createElement('button', ['glass-tab-bar__item']);
     if (this.getBoolAttr('active')) this._btn.classList.add('is-active');
@@ -30,23 +32,32 @@ class GlkTabItem extends GlkElement {
     this._wrapper.appendChild(this._btn);
 
     // Defer icon cloning — children may not be parsed yet
-    requestAnimationFrame(() => this._cloneIcon());
+    requestAnimationFrame(() => this.projectLightDom());
   }
 
-  _cloneIcon() {
+  projectLightDom() {
     const svg = this.querySelector('svg');
-    if (svg) {
-      const clone = svg.cloneNode(true);
-      // Remove inline attributes that would override GlassKit styles
-      clone.removeAttribute('width');
-      clone.removeAttribute('height');
-      clone.removeAttribute('stroke');
-      clone.removeAttribute('stroke-width');
-      clone.removeAttribute('stroke-linecap');
-      clone.removeAttribute('stroke-linejoin');
-      clone.removeAttribute('fill');
-      this._iconEl.insertBefore(clone, this._iconEl.firstChild);
-    }
+    const signature = svg ? svg.outerHTML : '';
+    if (signature === this._iconSignature) return;
+    this._iconSignature = signature;
+
+    // Drop the previous clone by hand: the icon container also holds the badge,
+    // and inserting without removing would stack a second icon on every update.
+    this._iconClone?.remove();
+    this._iconClone = null;
+    if (!svg) return;
+
+    const clone = svg.cloneNode(true);
+    // Remove inline attributes that would override GlassKit styles
+    clone.removeAttribute('width');
+    clone.removeAttribute('height');
+    clone.removeAttribute('stroke');
+    clone.removeAttribute('stroke-width');
+    clone.removeAttribute('stroke-linecap');
+    clone.removeAttribute('stroke-linejoin');
+    clone.removeAttribute('fill');
+    this._iconEl.insertBefore(clone, this._iconEl.firstChild);
+    this._iconClone = clone;
   }
 
   setupEvents() {