@jungherz-de/glasskit-elements 1.11.0 → 1.13.0

package/README.md

@@ -5,7 +5,7 @@
   <a href="#"><img src="https://img.shields.io/badge/vanilla_JS-no_dependencies-44cc11?style=flat-square" alt="Vanilla JS"></a>
   <a href="#"><img src="https://img.shields.io/badge/components-29-7ec8e3?style=flat-square" alt="29 Components"></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue?style=flat-square" alt="MIT License"></a>
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.11.0-lightgrey?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.13.0-lightgrey?style=flat-square" alt="Changelog"></a>
   <a href="https://www.npmjs.com/package/@jungherz-de/glasskit-elements"><img src="https://img.shields.io/badge/npm-%40jungherz--de%2Fglasskit--elements-cb3837?style=flat-square&logo=npm" alt="npm"></a>
 </p>
 
@@ -66,7 +66,7 @@ It is the **app layer** of the GlassKit family — three layers, one design lang
 
 ```html
 <!-- 1. GlassKit CSS -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.11/glasskit.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.12/glasskit.min.css">
 
 <!-- 2. GlassKit Elements -->
 <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
@@ -99,7 +99,7 @@ import '@jungherz-de/glasskit-elements/components/glk-toggle.js';
 <!DOCTYPE html>
 <html data-theme="dark">
 <head>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.11/glasskit.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.12/glasskit.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
 </head>
 <body>
@@ -130,7 +130,7 @@ import '@jungherz-de/glasskit-elements/components/glk-toggle.js';
 | Component | Description | Key Attributes |
 |---|---|---|
 | `<glk-card>` | Glass-effect content card | `glow` |
-| `<glk-badge>` | Inline status badge | `variant` (primary, success, error) |
+| `<glk-badge>` | Inline status badge, or a filter chip with `interactive` | `variant` (primary, success, error), `interactive`, `selected` |
 | `<glk-avatar>` | Circular avatar | `size` (sm, lg), `src` |
 | `<glk-title>` | Styled heading | — |
 | `<glk-divider>` | Horizontal divider | — |

package/dist/components/glk-accordion-item.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-C0B1hgOt.js';
+import { G as GlkElement } from './shared/base-ClsXgLON.js';
 
 const CHEVRON_SVG = `<span class="glass-accordion__trigger-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg></span>`;
 

package/dist/components/glk-accordion.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-C0B1hgOt.js';
+import { G as GlkElement } from './shared/base-ClsXgLON.js';
 
 class GlkAccordion extends GlkElement {
   render() {

package/dist/components/glk-avatar.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-C0B1hgOt.js';
+import { G as GlkElement } from './shared/base-ClsXgLON.js';
 
 const SIZES = ['sm', 'lg'];
 

package/dist/components/glk-badge.js

@@ -1,22 +1,74 @@
-import { G as GlkElement } from './shared/base-C0B1hgOt.js';
+import { G as GlkElement } from './shared/base-ClsXgLON.js';
 
 const VARIANTS = ['primary', 'success', 'error'];
 
 class GlkBadge extends GlkElement {
   static get displayInline() { return true; }
   static get observedAttributes() {
-    return ['variant'];
+    return ['variant', 'interactive', 'selected'];
   }
 
   render() {
-    this._badge = this.createElement('span', this._computeClasses());
-    this._badge.appendChild(document.createElement('slot'));
-    this._wrapper.appendChild(this._badge);
+    // One slot for the lifetime of the element — it moves between hosts when
+    // the badge turns into a chip and back, so the light-DOM children never
+    // have to be re-assigned.
+    this._slot = document.createElement('slot');
+    this._mount();
+  }
+
+  // A chip is a real <button>, so the keyboard, the focus ring and the
+  // aria-pressed announcement come for free; a plain badge stays a <span>.
+  // Toggling `interactive` therefore swaps the element, not just a class.
+  _mount() {
+    const interactive = this.getBoolAttr('interactive');
+    const el = this.createElement(interactive ? 'button' : 'span', this._computeClasses());
+    if (interactive) {
+      el.type = 'button';
+      el.setAttribute('aria-pressed', String(this.getBoolAttr('selected')));
+    }
+    el.appendChild(this._slot);
+
+    if (this._badge) {
+      this._badge.removeEventListener('click', this._onClick);
+      this._badge.replaceWith(el);
+    } else {
+      this._wrapper.appendChild(el);
+    }
+    this._badge = el;
+    // setupEvents() has not run yet on the very first mount; it attaches then.
+    if (this._onClick) el.addEventListener('click', this._onClick);
+  }
+
+  setupEvents() {
+    // Forward clicks as glk-click — only for chips, like glk-list-item.
+    this._onClick = () => {
+      if (this.getBoolAttr('interactive')) {
+        this.emit('glk-click');
+      }
+    };
+    this._badge.addEventListener('click', this._onClick);
+  }
+
+  teardownEvents() {
+    this._badge?.removeEventListener('click', this._onClick);
+    // Forget the handler, or a swap while disconnected would re-attach it and
+    // the next connect would add a second one — two glk-click per click.
+    this._onClick = null;
   }
 
   onAttributeChanged(name) {
-    if (name === 'variant' && this._badge) {
-      this._badge.className = this._computeClasses().join(' ');
+    if (!this._badge) return;
+    switch (name) {
+      case 'interactive':
+        this._mount();
+        break;
+      case 'variant':
+      case 'selected':
+        this._badge.className = this._computeClasses().join(' ');
+        if (this._badge.tagName === 'BUTTON') {
+          this._badge.setAttribute('aria-pressed', String(this.getBoolAttr('selected')));
+        }
+        break;
     }
   }
 
@@ -26,11 +78,19 @@ class GlkBadge extends GlkElement {
     if (variant && VARIANTS.includes(variant)) {
       classes.push(`glass-badge--${variant}`);
     }
+    if (this.getBoolAttr('interactive')) classes.push('glass-badge--interactive');
+    if (this.getBoolAttr('selected')) classes.push('glass-badge--selected');
     return classes;
   }
 
   get variant() { return this.getAttribute('variant'); }
   set variant(v) { this.setAttribute('variant', v); }
+
+  get interactive() { return this.getBoolAttr('interactive'); }
+  set interactive(v) { this.setBoolAttr('interactive', v); }
+
+  get selected() { return this.getBoolAttr('selected'); }
+  set selected(v) { this.setBoolAttr('selected', v); }
 }
 
 customElements.define('glk-badge', GlkBadge);

package/dist/components/glk-button.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-C0B1hgOt.js';
+import { G as GlkElement } from './shared/base-ClsXgLON.js';
 
 const VARIANTS = ['primary', 'secondary', 'tertiary'];
 const SIZES = ['sm', 'md', 'lg', 'auto'];

package/dist/components/glk-card.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-C0B1hgOt.js';
+import { G as GlkElement } from './shared/base-ClsXgLON.js';
 
 // <glk-card fill> stretches the visible card to the height of its grid or flex
 // cell. The host must become a grid for this: it is stretched by the outer

package/dist/components/glk-checkbox.js

@@ -1,4 +1,4 @@
-import { a as GlkFormElement } from './shared/base-C0B1hgOt.js';
+import { a as GlkFormElement } from './shared/base-ClsXgLON.js';
 
 const CHECKMARK_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
 

package/dist/components/glk-divider.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-C0B1hgOt.js';
+import { G as GlkElement } from './shared/base-ClsXgLON.js';
 
 class GlkDivider extends GlkElement {
   render() {

package/dist/components/glk-input.js

@@ -1,4 +1,4 @@
-import { a as GlkFormElement } from './shared/base-C0B1hgOt.js';
+import { a as GlkFormElement } from './shared/base-ClsXgLON.js';
 
 class GlkInput extends GlkFormElement {
   static get observedAttributes() {

package/dist/components/glk-list-item.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-C0B1hgOt.js';
+import { G as GlkElement } from './shared/base-ClsXgLON.js';
 
 // Module-level override sheet — shared by all instances.
 // Suppresses the auto-divider when glk-list marks this item as the

package/dist/components/glk-list.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-C0B1hgOt.js';
+import { G as GlkElement } from './shared/base-ClsXgLON.js';
 
 class GlkList extends GlkElement {
   static get observedAttributes() {

package/dist/components/glk-modal.js

@@ -1,10 +1,12 @@
-import { G as GlkElement } from './shared/base-C0B1hgOt.js';
+import { G as GlkElement } from './shared/base-ClsXgLON.js';
 
 class GlkModal extends GlkElement {
   static get observedAttributes() {
     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/dist/components/glk-nav.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-C0B1hgOt.js';
+import { G as GlkElement } from './shared/base-ClsXgLON.js';
 
 class GlkNav extends GlkElement {
   render() {

package/dist/components/glk-pill.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-C0B1hgOt.js';
+import { G as GlkElement } from './shared/base-ClsXgLON.js';
 
 class GlkPill extends GlkElement {
   static get observedAttributes() {

package/dist/components/glk-popover.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-C0B1hgOt.js';
+import { G as GlkElement } from './shared/base-ClsXgLON.js';
 
 const PLACEMENTS = ['top', 'bottom', 'start', 'end'];
 

package/dist/components/glk-progress.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-C0B1hgOt.js';
+import { G as GlkElement } from './shared/base-ClsXgLON.js';
 
 const VARIANTS = ['success', 'error'];
 const SIZES = ['sm', 'lg'];

package/dist/components/glk-radio.js

@@ -1,4 +1,4 @@
-import { a as GlkFormElement } from './shared/base-C0B1hgOt.js';
+import { a as GlkFormElement } from './shared/base-ClsXgLON.js';
 
 // ── Grouping ──
 // Every <glk-radio> keeps its <input type="radio"> in its own shadow root, and

package/dist/components/glk-range.js

@@ -1,4 +1,4 @@
-import { a as GlkFormElement } from './shared/base-C0B1hgOt.js';
+import { a as GlkFormElement } from './shared/base-ClsXgLON.js';
 
 class GlkRange extends GlkFormElement {
   static get observedAttributes() {

package/dist/components/glk-search.js

@@ -1,4 +1,4 @@
-import { a as GlkFormElement } from './shared/base-C0B1hgOt.js';
+import { a as GlkFormElement } from './shared/base-ClsXgLON.js';
 
 const SEARCH_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>`;
 

package/dist/components/glk-select.js

@@ -1,10 +1,12 @@
-import { a as GlkFormElement } from './shared/base-C0B1hgOt.js';
+import { a as GlkFormElement } from './shared/base-ClsXgLON.js';
 
 class GlkSelect extends GlkFormElement {
   static get observedAttributes() {
     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/dist/components/glk-status.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-C0B1hgOt.js';
+import { G as GlkElement } from './shared/base-ClsXgLON.js';
 
 class GlkStatus extends GlkElement {
   static get observedAttributes() {

package/dist/components/glk-tab-accessory.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-C0B1hgOt.js';
+import { G as GlkElement } from './shared/base-ClsXgLON.js';
 
 const VARIANTS = ['accent', 'success', 'error'];
 

package/dist/components/glk-tab-bar.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-C0B1hgOt.js';
+import { G as GlkElement } from './shared/base-ClsXgLON.js';
 
 class GlkTabBar extends GlkElement {
   static get observedAttributes() {

package/dist/components/glk-tab-dock.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-C0B1hgOt.js';
+import { G as GlkElement } from './shared/base-ClsXgLON.js';
 
 class GlkTabDock extends GlkElement {
   static get observedAttributes() {

package/dist/components/glk-tab-item.js

@@ -1,10 +1,12 @@
-import { G as GlkElement } from './shared/base-C0B1hgOt.js';
+import { G as GlkElement } from './shared/base-ClsXgLON.js';
 
 class GlkTabItem extends GlkElement {
   static get observedAttributes() {
     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() {

package/dist/components/glk-textarea.js

@@ -1,4 +1,4 @@
-import { a as GlkFormElement } from './shared/base-C0B1hgOt.js';
+import { a as GlkFormElement } from './shared/base-ClsXgLON.js';
 
 class GlkTextarea extends GlkFormElement {
   static get observedAttributes() {

package/dist/components/glk-title.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-C0B1hgOt.js';
+import { G as GlkElement } from './shared/base-ClsXgLON.js';
 
 class GlkTitle extends GlkElement {
   static get observedAttributes() {

package/dist/components/glk-toast.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-C0B1hgOt.js';
+import { G as GlkElement } from './shared/base-ClsXgLON.js';
 
 const VARIANTS = ['success', 'error', 'warning'];
 

package/dist/components/glk-toggle.js

@@ -1,4 +1,4 @@
-import { a as GlkFormElement } from './shared/base-C0B1hgOt.js';
+import { a as GlkFormElement } from './shared/base-ClsXgLON.js';
 
 class GlkToggle extends GlkFormElement {
   static get observedAttributes() {