@jungherz-de/glasskit-elements 1.9.0 → 1.11.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.6.2-lightgrey?style=flat-square" alt="Changelog"></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="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.6/glasskit.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.11/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.6/glasskit.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.11/glasskit.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
 </head>
 <body>
@@ -192,6 +192,21 @@ const current = html.getAttribute('data-theme');
 html.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark');
 ```
 
+### Icons
+
+Pass an icon as a **direct child**, not wrapped:
+
+```html
+<glk-button><svg viewBox="0 0 24 24">…</svg>Save</glk-button>
+<glk-list-item title="Download"><svg slot="leading" viewBox="0 0 24 24">…</svg></glk-list-item>
+```
+
+> **Requires GlassKit CSS >= 1.10.0.** The icon rules are descendant selectors, and a
+> slotted icon stays in the light DOM — before 1.10.0 they never matched it, so button
+> icons filled their container and list icons collapsed to 0×0. Wrapping the icon in a
+> `<span slot="…">` still does not work: `::slotted()` cannot reach inside an assigned
+> node. Size it yourself if you must wrap it.
+
 ### Branding
 
 Override GlassKit's `--gl-*` tokens anywhere in the document. Every `<glk-*>` element

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

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
+import { G as GlkElement } from './shared/base-C0B1hgOt.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-C4ZYKLPu.js';
+import { G as GlkElement } from './shared/base-C0B1hgOt.js';
 
 class GlkAccordion extends GlkElement {
   render() {

package/dist/components/glk-avatar.js

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

package/dist/components/glk-badge.js

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

package/dist/components/glk-button.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
+import { G as GlkElement } from './shared/base-C0B1hgOt.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-C4ZYKLPu.js';
+import { G as GlkElement } from './shared/base-C0B1hgOt.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-C4ZYKLPu.js';
+import { a as GlkFormElement } from './shared/base-C0B1hgOt.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-C4ZYKLPu.js';
+import { G as GlkElement } from './shared/base-C0B1hgOt.js';
 
 class GlkDivider extends GlkElement {
   render() {

package/dist/components/glk-input.js

@@ -1,4 +1,4 @@
-import { a as GlkFormElement } from './shared/base-C4ZYKLPu.js';
+import { a as GlkFormElement } from './shared/base-C0B1hgOt.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-C4ZYKLPu.js';
+import { G as GlkElement } from './shared/base-C0B1hgOt.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-C4ZYKLPu.js';
+import { G as GlkElement } from './shared/base-C0B1hgOt.js';
 
 class GlkList extends GlkElement {
   static get observedAttributes() {

package/dist/components/glk-modal.js

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

package/dist/components/glk-nav.js

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

package/dist/components/glk-pill.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
+import { G as GlkElement } from './shared/base-C0B1hgOt.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-C4ZYKLPu.js';
+import { G as GlkElement } from './shared/base-C0B1hgOt.js';
 
 const PLACEMENTS = ['top', 'bottom', 'start', 'end'];
 

package/dist/components/glk-progress.js

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

package/dist/components/glk-radio.js

@@ -1,4 +1,31 @@
-import { a as GlkFormElement } from './shared/base-C4ZYKLPu.js';
+import { a as GlkFormElement } from './shared/base-C0B1hgOt.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() {
@@ -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/dist/components/glk-range.js

@@ -1,4 +1,4 @@
-import { a as GlkFormElement } from './shared/base-C4ZYKLPu.js';
+import { a as GlkFormElement } from './shared/base-C0B1hgOt.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-C4ZYKLPu.js';
+import { a as GlkFormElement } from './shared/base-C0B1hgOt.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,4 +1,4 @@
-import { a as GlkFormElement } from './shared/base-C4ZYKLPu.js';
+import { a as GlkFormElement } from './shared/base-C0B1hgOt.js';
 
 class GlkSelect extends GlkFormElement {
   static get observedAttributes() {

package/dist/components/glk-status.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
+import { G as GlkElement } from './shared/base-C0B1hgOt.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-C4ZYKLPu.js';
+import { G as GlkElement } from './shared/base-C0B1hgOt.js';
 
 const VARIANTS = ['accent', 'success', 'error'];
 

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

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

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

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

package/dist/components/glk-textarea.js

@@ -1,4 +1,4 @@
-import { a as GlkFormElement } from './shared/base-C4ZYKLPu.js';
+import { a as GlkFormElement } from './shared/base-C0B1hgOt.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-C4ZYKLPu.js';
+import { G as GlkElement } from './shared/base-C0B1hgOt.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-C4ZYKLPu.js';
+import { G as GlkElement } from './shared/base-C0B1hgOt.js';
 
 const VARIANTS = ['success', 'error', 'warning'];
 

package/dist/components/glk-toggle.js

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