@jungherz-de/glasskit-elements 1.26.0 → 1.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/glasskit-elements",
-  "version": "1.26.0",
+  "version": "1.28.0",
   "description": "Vanilla JavaScript Web Components wrapping the GlassKit CSS glassmorphism library",
   "license": "MIT",
   "homepage": "https://glasskit-elements.jungherz.com",
@@ -49,10 +49,10 @@
     "vanilla-js"
   ],
   "peerDependencies": {
-    "@jungherz-de/glasskit": ">=1.26.0"
+    "@jungherz-de/glasskit": ">=1.28.0"
   },
   "devDependencies": {
-    "@jungherz-de/glasskit": "^1.26.0",
+    "@jungherz-de/glasskit": "^1.28.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",
     "rollup": "^4.0.0"

package/src/base.js

@@ -209,8 +209,9 @@ export class GlkElement extends HTMLElement {
   /**
    * Opt in when the component copies light-DOM children into its shadow tree.
    * A MutationObserver then calls projectLightDom() again whenever those
-   * children change, so a framework that swaps them keeps the rendered element
-   * in step. Without it the copy is made once and silently goes stale.
+   * children change — their content and, since 1.28.0, their attributes — so
+   * a framework that swaps them or only binds `disabled` keeps the rendered
+   * element in step. Without it the copy is made once and silently goes stale.
    */
   static get observesLightDom() { return false; }
 
@@ -272,8 +273,13 @@ export class GlkElement extends HTMLElement {
 
     if (this.constructor.observesLightDom) {
       this._lightDomObserver ??= new MutationObserver(records => this.projectLightDom(records));
+      // Attributes too: the copies show them. Until 1.27.0 a modal action
+      // that started disabled stayed disabled in its copy after the page
+      // enabled it, and the dialog could not be confirmed. The elements'
+      // own projectLightDom() compare a signature first, so a change
+      // elsewhere in the content costs a string comparison.
       this._lightDomObserver.observe(this, {
-        childList: true, subtree: true, characterData: true
+        childList: true, subtree: true, characterData: true, attributes: true
       });
     }
   }

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

@@ -23,6 +23,33 @@ function reducedMotion() {
   return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
 }
 
+// The copies carry no inline handlers (onclick="…"): a click on a copy is
+// handed to its original, and until 1.28.0 such a handler ran twice.
+const isHandler = name => name.startsWith('on');
+
+function copyOf(node) {
+  const copy = node.cloneNode(true);
+  if (copy.nodeType === Node.ELEMENT_NODE) {
+    for (const el of [copy, ...copy.querySelectorAll('*')]) {
+      for (const { name } of [...el.attributes]) if (isHandler(name)) el.removeAttribute(name);
+    }
+  }
+  return copy;
+}
+
+/** Gives an action's copy the attributes and the content of its original. */
+function mirror(copy, original) {
+  for (const { name } of [...copy.attributes]) {
+    if (!original.hasAttribute(name)) copy.removeAttribute(name);
+  }
+  for (const { name, value } of original.attributes) {
+    if (!isHandler(name) && copy.getAttribute(name) !== value) copy.setAttribute(name, value);
+  }
+  if (copy.innerHTML !== original.innerHTML) {
+    copy.replaceChildren(...[...original.childNodes].map(copyOf));
+  }
+}
+
 class GlkModal extends GlkElement {
   static get observedAttributes() {
     return ['open', 'title'];
@@ -68,9 +95,18 @@ class GlkModal extends GlkElement {
     if (signature === this._footerSignature) return;
     this._footerSignature = signature;
 
+    // As many actions as copies: each copy takes its original's attributes
+    // and content in place, so the one that has the focus keeps it — a
+    // confirm button that the page enables, or relabels while it works.
+    const copies = [...this._footer.children];
+    if (copies.length === buttons.length) {
+      buttons.forEach((btn, i) => mirror(copies[i], btn));
+      return;
+    }
+
     this._footer.innerHTML = '';
     buttons.forEach((btn, i) => {
-      const clone = btn.cloneNode(true);
+      const clone = copyOf(btn);
       // 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.

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

@@ -1,5 +1,6 @@
 import { GlkFormElement } from '../../base.js';
 import { revealCentered } from '../../reveal.js';
+import { attachDroplet } from '@jungherz-de/glasskit/glasskit-droplet.js';
 
 // One button per option, the chosen one marked aria-pressed="true" — GlassKit
 // styles exactly that attribute. Came back from EhrenPfoten in 1.15.0.
@@ -9,9 +10,18 @@ import { revealCentered } from '../../reveal.js';
 //             do not fit — without it the row stays one line and runs past
 //             the edge), label (aria-label of the group), name (form field),
 //             disabled (the whole row; since 1.22.3, as is a disabled
-//             fieldset around it)
+//             fieldset around it), droplet (since 1.27.0: the chosen option
+//             sits on a drop of glass that glides to the next one and can be
+//             dragged — GlassKit's .glass-segmented--droplet), icon-only
+//             (since 1.28.0: the options show their icons alone, each label
+//             becomes the button's aria-label and title — GlassKit's
+//             .glass-segmented--icons)
 // Properties: value, options (array or JSON text), full, overflow, label,
-//             disabled
+//             disabled, droplet, iconOnly
+// Slots:      icon-<value> (since 1.28.0) — the icon of the option with that
+//             value: an <svg>, a font icon, an <img>. It sits in GlassKit's
+//             .glass-segmented__icon before the label and takes the option's
+//             colour; an option without one has no icon box.
 // Event:      glk-change { value } — only on a change made by the user
 // Part:       group
 //
@@ -40,7 +50,7 @@ function parseList(json) {
 }
 
 class GlkSegmented extends GlkFormElement {
-  static get observedAttributes() { return ['options', 'value', 'full', 'overflow', 'label']; }
+  static get observedAttributes() { return ['options', 'value', 'full', 'overflow', 'label', 'droplet', 'icon-only']; }
 
   // A row of buttons with one tab stop: delegated focus would land on the
   // first button, not the chosen one.
@@ -57,20 +67,39 @@ class GlkSegmented extends GlkFormElement {
 
   _build() {
     this._group.replaceChildren();
+    const iconOnly = this.iconOnly;
     for (const option of parseList(this.getAttribute('options'))) {
       const value = String(option.value ?? '');
+      const label = String(option.label ?? value);
       const button = this.createElement('button', ['glass-segmented__item'], { type: 'button', 'data-value': value });
       if (TONES.includes(option.tone)) {
         button.classList.add(`glass-segmented__item--${option.tone}`);
         button.appendChild(this.createElement('span', ['glass-segmented__dot']));
       }
-      button.appendChild(document.createTextNode(option.label ?? value));
+      // The label names the button; an icon font's text must not join it.
+      const icon = this.createElement('span', ['glass-segmented__icon'], { 'aria-hidden': 'true' });
+      icon.appendChild(this.createElement('slot', [], { name: `icon-${value}` }));
+      button.appendChild(icon);
+      if (iconOnly) {
+        button.setAttribute('aria-label', label);
+        button.title = label;
+      } else {
+        button.appendChild(document.createTextNode(label));
+      }
       this._group.appendChild(button);
     }
+    this._syncIcons();
     this.applyDisabled(this._actuallyDisabled);
     this._syncValue();
   }
 
+  /** An option shows its icon box only while an icon is slotted into it. */
+  _syncIcons() {
+    for (const slot of this._group.querySelectorAll('.glass-segmented__icon > slot')) {
+      slot.parentElement.hidden = slot.assignedElements().length === 0;
+    }
+  }
+
   /** The whole row is disabled, or an option by its own `disabled`. */
   applyDisabled(disabled) {
     const options = this.options;
@@ -91,6 +120,8 @@ class GlkSegmented extends GlkFormElement {
   _applyLayout() {
     const overflow = this.overflow;
     this._group.classList.toggle('glass-segmented--full', this.getBoolAttr('full'));
+    this._group.classList.toggle('glass-segmented--droplet', this.getBoolAttr('droplet'));
+    this._group.classList.toggle('glass-segmented--icons', this.iconOnly);
     for (const mode of OVERFLOWS) this._group.classList.toggle(`glass-segmented--${mode}`, overflow === mode);
     this._reveal('instant');
   }
@@ -117,15 +148,30 @@ class GlkSegmented extends GlkFormElement {
       this.emit('glk-change', { value });
     };
     this._onResize = () => { if (this._group.clientWidth !== this._revealedAt) this._reveal('instant'); };
+    this._onSlotChange = () => this._syncIcons();
     this._group.addEventListener('click', this._onClick);
+    this._group.addEventListener('slotchange', this._onSlotChange);
     this._resizeObserver = new ResizeObserver(this._onResize);
     this._resizeObserver.observe(this._group);
+    this._syncIcons();
+    this._applyDroplet();
   }
 
   teardownEvents() {
     this._group?.removeEventListener('click', this._onClick);
+    this._group?.removeEventListener('slotchange', this._onSlotChange);
     this._resizeObserver?.disconnect();
     this._resizeObserver = null;
+    this._droplet?.destroy();
+    this._droplet = null;
+  }
+
+  // The drop follows aria-pressed inside this shadow root by itself; a drag
+  // that ends on an option clicks it, the same path as a tap.
+  _applyDroplet() {
+    const on = this.getBoolAttr('droplet') && this.isConnected;
+    if (on && !this._droplet) this._droplet = attachDroplet(this._group);
+    else if (!on && this._droplet) { this._droplet.destroy(); this._droplet = null; }
   }
 
   onAttributeChanged(name) {
@@ -135,6 +181,8 @@ class GlkSegmented extends GlkFormElement {
       case 'options': this._build(); break;
       case 'full':
       case 'overflow': this._applyLayout(); break;
+      case 'droplet': this._applyLayout(); this._applyDroplet(); break;
+      case 'icon-only': this._build(); this._applyLayout(); break;
       case 'label': this._applyLabel(); break;
     }
   }
@@ -154,6 +202,12 @@ class GlkSegmented extends GlkFormElement {
   get full() { return this.getBoolAttr('full'); }
   set full(v) { this.setBoolAttr('full', v); }
 
+  get droplet() { return this.getBoolAttr('droplet'); }
+  set droplet(v) { this.setBoolAttr('droplet', v); }
+
+  get iconOnly() { return this.getBoolAttr('icon-only'); }
+  set iconOnly(v) { this.setBoolAttr('icon-only', v); }
+
   get overflow() {
     const v = this.getAttribute('overflow');
     return OVERFLOWS.includes(v) ? v : '';

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

@@ -1,8 +1,15 @@
 import { GlkElement } from '../../base.js';
+import { attachDroplet } from '@jungherz-de/glasskit/glasskit-droplet.js';
+
+// droplet (since 1.27.0): the active item sits on a drop of glass that glides
+// to the next one and can be dragged — GlassKit's .glass-tab-bar--droplet,
+// moved by its glasskit-droplet.js. The items live in shadow roots of their
+// own, so the bar hands its state down to them (see glk-tab-item _syncBar)
+// and tells the drop when the active item changed.
 
 class GlkTabBar extends GlkElement {
   static get observedAttributes() {
-    return ['static', 'floating'];
+    return ['static', 'floating', 'droplet'];
   }
 
   render() {
@@ -14,6 +21,7 @@ class GlkTabBar extends GlkElement {
     if (this.getBoolAttr('floating')) {
       nav.classList.add('glass-tab-bar--floating');
     }
+    nav.classList.toggle('glass-tab-bar--droplet', this.getBoolAttr('droplet'));
 
     if (this.getBoolAttr('static')) {
       this._applyStatic();
@@ -26,6 +34,10 @@ class GlkTabBar extends GlkElement {
       this._applyStatic();
     } else if (name === 'floating') {
       this._nav.classList.toggle('glass-tab-bar--floating', this.getBoolAttr('floating'));
+      this._syncItems();
+    } else if (name === 'droplet') {
+      this._nav.classList.toggle('glass-tab-bar--droplet', this.getBoolAttr('droplet'));
+      this._applyDroplet();
     }
   }
 
@@ -34,24 +46,79 @@ class GlkTabBar extends GlkElement {
     this._nav.style.borderRadius = '16px';
   }
 
-  setupEvents() {
-    // Listen for tab selection events from child glk-tab-item elements
-    this._onTabSelect = (e) => {
-      // Deactivate all other tabs
-      const items = this.querySelectorAll('glk-tab-item');
-      items.forEach(item => {
-        if (item !== e.target) {
-          item.removeAttribute('active');
-        }
-      });
-      this.emit('glk-tab-change', { tab: e.target });
+  _items() {
+    return [...this.children].filter(el => el.localName === 'glk-tab-item');
+  }
+
+  /** Hands the bar's floating and droplet state to every item's wrapper. */
+  _syncItems() {
+    const state = {
+      floating: this.getBoolAttr('floating'),
+      droplet: this.getBoolAttr('droplet'),
+      placed: Boolean(this._nav?.hasAttribute('data-droplet')),
+      drag: Boolean(this._nav?.hasAttribute('data-droplet-drag')),
     };
-    this.addEventListener('glk-tab-select', this._onTabSelect);
+    for (const item of this._items()) item._syncBar?.(state);
+  }
+
+  /** Called by an item that rendered or changed its active state. */
+  _itemChanged() {
+    this._syncItems();
+    this._droplet?.update();
+  }
+
+  _applyDroplet() {
+    const on = this.getBoolAttr('droplet') && this.isConnected;
+    if (on && !this._droplet) {
+      // The drop measures and marks the items' own buttons; picking one clicks
+      // it, which is what a tap does.
+      this._droplet = attachDroplet(this._nav, {
+        items: () => this._items().map(item => item._btn).filter(Boolean),
+      });
+    } else if (!on && this._droplet) {
+      this._droplet.destroy();
+      this._droplet = null;
+    }
+    this._syncItems();
+  }
+
+  /**
+   * Called by an item the user selected once its glk-tab-select went through
+   * uncancelled; the item is active already. Until 1.27.0 the bar did this
+   * while the event was still on its way, so a listener further up could not
+   * have kept the current tab.
+   */
+  _selected(tab) {
+    for (const item of this.querySelectorAll('glk-tab-item')) {
+      if (item !== tab) item.removeAttribute('active');
+    }
+    this.emit('glk-tab-change', { tab });
+  }
+
+  setupEvents() {
+    // The drop's state lives on the nav; the items carry it on their wrappers.
+    this._navObserver = new MutationObserver(() => this._syncItems());
+    this._navObserver.observe(this._nav, { attributes: true, attributeFilter: ['data-droplet', 'data-droplet-drag'] });
+    // Items added or removed.
+    this._itemObserver = new MutationObserver(() => this._itemChanged());
+    this._itemObserver.observe(this, { childList: true });
+    this._applyDroplet();
   }
 
   teardownEvents() {
-    this.removeEventListener('glk-tab-select', this._onTabSelect);
+    this._navObserver?.disconnect();
+    this._itemObserver?.disconnect();
+    this._droplet?.destroy();
+    this._droplet = null;
   }
+
+  // Properties as well (since 1.28.0): `bar.droplet = true` set an own
+  // property before and changed nothing.
+  get floating() { return this.getBoolAttr('floating'); }
+  set floating(v) { this.setBoolAttr('floating', v); }
+
+  get droplet() { return this.getBoolAttr('droplet'); }
+  set droplet(v) { this.setBoolAttr('droplet', v); }
 }
 
 customElements.define('glk-tab-bar', GlkTabBar);

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

@@ -1,5 +1,18 @@
 import { GlkElement } from '../../base.js';
 
+// The icon: an inline <svg> child is copied into the shadow root, where
+// GlassKit's rules reach it. Anything else — a font icon such as Material
+// Icons, an <img>, an element of the page's own — goes into slot="icon"
+// (since 1.28.0) and takes the state colour from GlassKit's icon box: active,
+// hover, the lens of the drop and the drag. With a slotted icon no SVG is
+// copied.
+//
+// glk-tab-select (cancelable since 1.28.0) comes before `active` changes:
+// preventDefault() keeps the current tab — for an item that opens a drawer
+// or a link — and the bar then neither moves `active` nor its drop, nor
+// emits glk-tab-change. A drag of the drop that ends on the item clicks it,
+// so it takes the same path.
+
 class GlkTabItem extends GlkElement {
   static get observedAttributes() {
     return ['label', 'active', 'badge'];
@@ -11,8 +24,10 @@ class GlkTabItem extends GlkElement {
     this._btn = this.createElement('button', ['glass-tab-bar__item']);
     if (this.getBoolAttr('active')) this._btn.classList.add('is-active');
 
-    // Icon — clone SVG from light DOM into shadow DOM so GlassKit CSS applies
+    // Icon — clone SVG from light DOM into shadow DOM so GlassKit CSS applies,
+    // or show what is slotted as icon
     this._iconEl = this.createElement('span', ['glass-tab-bar__icon']);
+    this._iconEl.appendChild(this.createElement('slot', [], { name: 'icon' }));
 
     // Label
     this._labelEl = this.createElement('span', ['glass-tab-bar__label']);
@@ -36,7 +51,8 @@ class GlkTabItem extends GlkElement {
   }
 
   projectLightDom() {
-    const svg = this.querySelector('svg');
+    // A slotted icon wins; only without one is an <svg> copied.
+    const svg = this.querySelector(':scope > [slot="icon"]') ? null : this.querySelector('svg');
     const signature = svg ? svg.outerHTML : '';
     if (signature === this._iconSignature) return;
     this._iconSignature = signature;
@@ -62,10 +78,32 @@ class GlkTabItem extends GlkElement {
 
   setupEvents() {
     this._onClick = () => {
+      if (!this.emit('glk-tab-select', null, { cancelable: true })) return;
       this.setAttribute('active', '');
-      this.emit('glk-tab-select');
+      this.closest('glk-tab-bar')?._selected?.(this);
     };
     this._btn.addEventListener('click', this._onClick);
+    this._tellBar();
+  }
+
+  /**
+   * The bar's look reaches the item through its wrapper. GlassKit's rules for
+   * floating and droplet items are descendant selectors of the bar's classes,
+   * and this button sits in a shadow root of its own, so <glk-tab-bar> hands
+   * its state down and the wrapper carries it. Before 1.27.0 the items of a
+   * floating bar kept the fixed bar's look: no spotlight, no pill, the dot.
+   */
+  _syncBar({ floating, droplet, placed, drag }) {
+    if (!this._wrapper) return;
+    this._wrapper.classList.toggle('glass-tab-bar--floating', floating);
+    this._wrapper.classList.toggle('glass-tab-bar--droplet', droplet);
+    this._wrapper.toggleAttribute('data-droplet', placed);
+    this._wrapper.toggleAttribute('data-droplet-drag', drag);
+  }
+
+  /** Tells the bar that this item rendered or changed its active state. */
+  _tellBar() {
+    this.closest('glk-tab-bar')?._itemChanged?.();
   }
 
   teardownEvents() {
@@ -77,6 +115,7 @@ class GlkTabItem extends GlkElement {
     switch (name) {
       case 'active':
         this._btn.classList.toggle('is-active', this.getBoolAttr('active'));
+        this._tellBar();
         break;
       case 'label':
         this._labelEl.textContent = this.getAttribute('label') || '';