@jungherz-de/glasskit-elements 1.25.0 → 1.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/glasskit-elements",
-  "version": "1.25.0",
+  "version": "1.27.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.25.0"
+    "@jungherz-de/glasskit": ">=1.27.0"
   },
   "devDependencies": {
-    "@jungherz-de/glasskit": "^1.25.0",
+    "@jungherz-de/glasskit": "^1.27.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",
     "rollup": "^4.0.0"

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,11 @@ 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)
 // Properties: value, options (array or JSON text), full, overflow, label,
-//             disabled
+//             disabled, droplet
 // Event:      glk-change { value } — only on a change made by the user
 // Part:       group
 //
@@ -40,7 +43,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']; }
 
   // A row of buttons with one tab stop: delegated focus would land on the
   // first button, not the chosen one.
@@ -91,6 +94,7 @@ 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'));
     for (const mode of OVERFLOWS) this._group.classList.toggle(`glass-segmented--${mode}`, overflow === mode);
     this._reveal('instant');
   }
@@ -120,12 +124,23 @@ class GlkSegmented extends GlkFormElement {
     this._group.addEventListener('click', this._onClick);
     this._resizeObserver = new ResizeObserver(this._onResize);
     this._resizeObserver.observe(this._group);
+    this._applyDroplet();
   }
 
   teardownEvents() {
     this._group?.removeEventListener('click', this._onClick);
     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 +150,7 @@ class GlkSegmented extends GlkFormElement {
       case 'options': this._build(); break;
       case 'full':
       case 'overflow': this._applyLayout(); break;
+      case 'droplet': this._applyLayout(); this._applyDroplet(); break;
       case 'label': this._applyLabel(); break;
     }
   }
@@ -154,6 +170,9 @@ 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 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,6 +46,42 @@ class GlkTabBar extends GlkElement {
     this._nav.style.borderRadius = '16px';
   }
 
+  _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')),
+    };
+    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();
+  }
+
   setupEvents() {
     // Listen for tab selection events from child glk-tab-item elements
     this._onTabSelect = (e) => {
@@ -47,10 +95,22 @@ class GlkTabBar extends GlkElement {
       this.emit('glk-tab-change', { tab: e.target });
     };
     this.addEventListener('glk-tab-select', this._onTabSelect);
+
+    // 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;
   }
 }
 

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

@@ -66,6 +66,27 @@ class GlkTabItem extends GlkElement {
       this.emit('glk-tab-select');
     };
     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 +98,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') || '';