@jungherz-de/glasskit-elements 1.12.0 → 1.14.0

package/src/components/content/glk-badge.js

@@ -5,18 +5,70 @@ 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/src/index.js

@@ -1,6 +1,12 @@
 // GlassKit Elements — Web Components for GlassKit CSS
 // https://github.com/JUNGHERZ/GlassKit
 
+// Base classes — so a project can build its own elements on the same
+// lifecycle, stylesheet adoption, theme sync and emit(). Also reachable as
+// GlassKitElements.GlkElement from the IIFE bundle, and via the stable
+// subpath '@jungherz-de/glasskit-elements/base.js' for per-component setups.
+export { GlkElement, GlkFormElement } from './base.js';
+
 // Navigation
 export { GlkNav } from './components/navigation/glk-nav.js';
 export { GlkPill } from './components/navigation/glk-pill.js';