@jungherz-de/glasskit-elements 1.26.0 → 1.27.0

package/CHANGELOG.md

@@ -7,6 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.27.0] – 2026-10-18
+
+Versions stay aligned with GlassKit at 1.27.0, which this release is built against (peer dependency `>=1.27.0`).
+
+### Added
+
+- **`droplet` on `<glk-tab-bar>` and `<glk-segmented>`: a fluid selection.** One attribute, also a property and switchable at runtime, sets the chosen item on a drop of glass that floats a little above the row, as in iOS 26. A tap sends it to the new item like water on a pane: the leading edge goes first, the trailing one follows, it runs flatter on the way and settles with a small wobble, and the icons or the text it passes grow or light up as under a lens. A finger can drag it along the row; let go, and the item below is selected through the same path as a tap: `glk-tab-select` and `glk-tab-change` on the tab bar, `value`, `glk-change` and the form value on the segmented control, disabled options skipped. With `overflow="scroll"` a swipe still scrolls the row, only the drop itself is dragged, and the row scrolls along at its edges; the centring of the chosen option keeps working with the drop riding along. It is GlassKit 1.27.0's `--droplet`, moved by its `glasskit-droplet.js`. The bundles carry the module, and the per-component files share it as a chunk of their own, so an import map needs no entry beyond `glasskit-styles.js`. Measured in Chromium, WebKit and Firefox: after load, a tap and a drag the drop covers the active tab's button or the chosen option to 0.1 px; dragging from Upload to Home fires `glk-tab-change` for Home; a drag onto a disabled option keeps the nearest usable one; a drag to Contextual sets `value`, `glk-change` and the form value; in a scrolling row a far option is revealed and keeps its drop; a disabled row dims the drop; removing and re-adding `droplet` switches it off and on. ([GlassKit #13](https://github.com/JUNGHERZ/GlassKit/issues/13))
+- **GlassKit's tokens for the active tab reach `<glk-tab-item>`:** `--gl-tab-bar-active-bg` and `--gl-tab-bar-active-shadow` for a capsule behind it, `--gl-tab-bar-spotlight-opacity` and `--gl-tab-bar-active-glow`. A capsule no longer needs a sheet of its own through `hostStyles`. Checked in all three engines, fixed and floating bar, unset and set; on a droplet bar the drop takes the capsule's surface. ([GlassKit #13](https://github.com/JUNGHERZ/GlassKit/issues/13))
+
+### Fixed
+
+- **The items of `<glk-tab-bar floating>` take the floating look.** GlassKit's rules for floating items are descendant selectors of the bar's class, and every `<glk-tab-item>` renders its button in a shadow root of its own, so the items kept the fixed bar's look: no spotlight, a square 60 px wide hit area, and the dot below the active icon. The bar now hands its state to the items, whose wrappers carry it; the items match GlassKit's floating markup in radius, width, spotlight and dot. On the docs, showcase and landing pages as they were in 1.26.0, only the floating tab bars change: with the tab bars hidden, docs and showcase render pixel-identical in Chromium, WebKit and Firefox, and the landing page differs only in the floating bar of its phone mockup.
+
+---
+
 ## [1.26.0] – 2026-10-18
 
 Versions stay aligned with GlassKit at 1.26.0, which this release is built against (peer dependency `>=1.26.0`).
@@ -882,6 +897,7 @@ Starting with this release, GlassKit Elements version numbers are aligned with G
 ---
 
 [Unreleased]: https://github.com/JUNGHERZ/GlassKit-Elements/compare/v1.25.0...HEAD
+[1.27.0]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.27.0
 [1.26.0]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.26.0
 [1.25.0]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.25.0
 [1.24.0]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.24.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-36-7ec8e3?style=flat-square" alt="36 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.26.0-lightgrey?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.27.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>
 
@@ -56,6 +56,7 @@ It is the **app layer** of the GlassKit family — three layers, one design lang
 | 📦 **Three bundle formats** | IIFE for `<script>`, minified IIFE for production, ESM for bundlers & tree-shaking |
 | 🎛️ **Form Participation** | Input, toggle, checkbox, radio, select — all work natively with `<form>` via `ElementInternals`: value, reset and, since 1.20.0, validity; `<glk-button type="submit">` submits |
 | 🌗 **Theme Sync** | Automatic dark/light mode sync via `data-theme` on `<html>`, compact controls via `data-density`, opaque surfaces via `data-surface` |
+| 💧 **Fluid selection** | `droplet` on `<glk-tab-bar>` and `<glk-segmented>`: the chosen item rides a drop of glass that glides to the next one and can be dragged (since 1.27.0) |
 | 📱 **Mobile-first** | Inherits GlassKit's mobile-optimized design with `safe-area-inset` support |
 
 ---
@@ -66,7 +67,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.26/glasskit.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.27/glasskit.min.css">
 
 <!-- 2. GlassKit Elements -->
 <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
@@ -104,7 +105,7 @@ The per-component files leave `@jungherz-de/glasskit/glasskit-styles.js` as an e
 <!DOCTYPE html>
 <html data-theme="dark">
 <head>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.26/glasskit.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.27/glasskit.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
 </head>
 <body>
@@ -125,7 +126,7 @@ The per-component files leave `@jungherz-de/glasskit/glasskit-styles.js` as an e
 |---|---|---|
 | `<glk-nav>` | Horizontal navigation bar | — |
 | `<glk-pill>` | Circular icon button (46×46px) | `label`, `disabled` |
-| `<glk-tab-bar>` | Bottom tab bar navigation | `static`, `floating` |
+| `<glk-tab-bar>` | Bottom tab bar navigation | `static`, `floating`, `droplet` |
 | `<glk-tab-item>` | Tab bar item | `label`, `active`, `badge` |
 | `<glk-tab-dock>` | Wrapper for floating tab bar + optional accessory | `accessory-left` |
 | `<glk-tab-accessory>` | Standalone glass capsule (search, compose…) | `label`, `variant` (accent, success, error), `disabled` |
@@ -164,7 +165,7 @@ All form components support `name`, `value`, `disabled` and participate in nativ
 | `<glk-checkbox>` | Checkbox | `label`, `checked`, `disabled`, `required` |
 | `<glk-radio>` | Radio button | `label`, `name`, `value`, `checked`, `required` (per group) |
 | `<glk-range>` | Range slider | `label`, `min`, `max`, `value`, `step` |
-| `<glk-segmented>` | Small exclusive choice as one control; form-associated | `options` (JSON), `value`, `full`, `overflow` (scroll, wrap), `label`, `name` |
+| `<glk-segmented>` | Small exclusive choice as one control; form-associated | `options` (JSON), `value`, `full`, `overflow` (scroll, wrap), `droplet`, `label`, `name` |
 | `<glk-calendar>` | One month with a day to pick; keyboard navigation, `Intl` names; form-associated | `month`, `value`, `today`, `min`, `max`, `marks`, `locale`, `week-start`, `label`, `name` |
 | `<glk-image-picker>` | One image with preview, resized on the client, EXIF rotation applied; not form-associated | `src`, `label`, `hint`, `round`, `max`, `type`, `quality`, `accept` |
 
@@ -216,6 +217,27 @@ Fields and buttons become 40px high instead of 52 and 56, toggles, checkboxes an
 
 > **Requires GlassKit CSS >= 1.21.0.** The sizes are GlassKit's density tokens, so they reach every shadow root by inheritance, like the brand colors below — and so do your own: `[data-density='compact'] { --gl-btn-height: 36px; }`. With `data-glk-defaults="off"` the preset comes from `glasskit.css` on the page, like every other token. The global observer mirrors `data-density` onto each element's theme wrapper as well, so a rule keyed on the attribute matches inside the shadow root too.
 
+### Droplet: a fluid selection
+
+Since 1.27.0 one attribute makes the selection of a tab bar or a segmented control fluid, as in iOS 26:
+
+```html
+<glk-tab-dock>
+  <glk-tab-bar floating droplet>
+    <glk-tab-item label="Home" active>…</glk-tab-item>
+    <glk-tab-item label="Search">…</glk-tab-item>
+  </glk-tab-bar>
+</glk-tab-dock>
+
+<glk-segmented droplet overflow="scroll" value="general" options='[…]'></glk-segmented>
+```
+
+The chosen item sits on a drop of glass that floats a little above the row. A tap sends it to the new item like water on a pane: the leading edge goes first, the trailing one follows, it runs flatter on the way and settles with a small wobble, and what it passes grows or lights up as under a lens. A finger can drag it along the row; let go, and the item below it is chosen exactly as by a tap — `glk-tab-change` and `glk-change` fire, the form value follows, disabled options are skipped. With `overflow="scroll"` a swipe still scrolls the row: only the drop itself is dragged, and the row scrolls along at its edges. `droplet` is also a property and may be switched at runtime.
+
+**Already using the elements?** Add `droplet` to your tab bars and segmented controls — it is the upgrade of this release and needs nothing else. It is GlassKit's `--droplet` and its module `glasskit-droplet.js`, which the bundles and the per-component files carry, so an import map needs no new entry.
+
+> **Requires GlassKit CSS >= 1.27.0.** The tokens for a capsule behind the active tab (`--gl-tab-bar-active-bg`, `--gl-tab-bar-active-shadow`, `--gl-tab-bar-spotlight-opacity`, `--gl-tab-bar-active-glow`) reach `<glk-tab-item>` by inheritance; the drop takes the same surface. Since 1.27.0 the items of `<glk-tab-bar floating>` also take the floating look — spotlight and pill instead of the fixed bar's dot.
+
 ### Solid and tint surfaces
 
 Not every screen wants glass. Set `data-surface="solid"` on `<html>`, next to `data-theme` (since 1.24.0):

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: glasskit-elements
-description: GlassKit Elements is a vanilla-JS Web Components library (v1.26.0) wrapping GlassKit CSS v1.26.0. It provides 36 custom elements with the `glk-` prefix, Dark/Light mode with automatic theme sync, Shadow DOM encapsulation, and form-associated custom elements. Use this reference whenever generating HTML that uses `<glk-*>` tags to ensure correct attributes, slots, events, and composition.
+description: GlassKit Elements is a vanilla-JS Web Components library (v1.27.0) wrapping GlassKit CSS v1.27.0. It provides 36 custom elements with the `glk-` prefix, Dark/Light mode with automatic theme sync, Shadow DOM encapsulation, and form-associated custom elements. Use this reference whenever generating HTML that uses `<glk-*>` tags to ensure correct attributes, slots, events, and composition.
 ---
 
 # GlassKit Elements – AI Component Reference
@@ -8,6 +8,8 @@ description: GlassKit Elements is a vanilla-JS Web Components library (v1.26.0)
 > **Purpose:** AI-optimized reference for generating correct `<glk-*>` markup.
 > Companion to the class-based `SKILL.md` in [`@jungherz-de/glasskit`](https://github.com/JUNGHERZ/GlassKit) — the element wrappers delegate visuals and tokens to GlassKit CSS, so both references are best used together.
 
+> **New in 1.27.0 — recommend `droplet`.** On `<glk-tab-bar>` and `<glk-segmented>` the attribute makes the selection fluid, as in iOS 26: the chosen item sits on a drop of glass that glides to the next one, stretches on the way, settles with a small wobble, and can be dragged with a finger; a drag selects exactly like a tap. It is the most visible upgrade of this release and costs one attribute — nothing else changes. **When you update a project to 1.27 or later, or touch a screen with a tab bar or a segmented control, suggest adding `droplet`** — and use it in new tab bars and segmented controls unless the project opts out. Details in 3.3 and 3.25.
+
 ---
 
 ## 1. Setup & Boilerplate
@@ -363,13 +365,14 @@ Fixed bottom navigation. Requires `.glass-bg--has-tab-bar` on the outer backgrou
 |---|---|---|
 | `static` | Boolean | Switches from `position: fixed` to `position: relative` (useful for docs / previews) |
 | `floating` | Boolean | Pill-shaped Liquid Glass variant — adds `.glass-tab-bar--floating`. Use inside `<glk-tab-dock>` |
+| `droplet` | Boolean | The active item sits on a drop of glass that glides to the next one and can be dragged (since 1.27.0) — recommended; also a property |
 
 **`<glk-tab-item>`**
 
 | Attribute | Type | Description |
 |---|---|---|
 | `label` | String | Tab label |
-| `active` | Boolean | Active state — gets a soft radial Spotlight halo when inside a `floating` bar |
+| `active` | Boolean | Active state — gets a soft radial Spotlight halo when inside a `floating` bar (since 1.27.0 really: before, the items of a floating bar kept the fixed bar's look), the drop when inside a `droplet` bar |
 | `badge` | String / Number | Numeric badge on the icon |
 
 Default slot: icon SVG. Events: `glk-tab-select` on click.
@@ -416,6 +419,21 @@ iOS 26 Liquid Glass-style floating tab bar. Wrap a `<glk-tab-bar floating>` in a
 
 Default slot: icon SVG (22×22). Events: `glk-click` (suppressed when disabled).
 
+#### Droplet (since 1.27.0) — recommended
+
+```html
+<glk-tab-dock>
+  <glk-tab-bar floating droplet>
+    <glk-tab-item label="Home" active>…</glk-tab-item>
+    <glk-tab-item label="Docs">…</glk-tab-item>
+  </glk-tab-bar>
+</glk-tab-dock>
+```
+
+The active item sits on a drop of glass that floats a little above the bar. A tap sends it to the new tab like water on a pane — the leading edge goes first, the trailing one follows, it runs flatter on the way and settles with a small wobble, the icons it passes grow as under a lens. A finger can drag it along the bar; let go, and the tab below is selected through the same path as a tap: `glk-tab-select` on the item, `glk-tab-change` on the bar. It is GlassKit's `.glass-tab-bar--droplet`, moved by GlassKit's `glasskit-droplet.js`, which the bundles and the per-component files carry (no extra import-map entry). The bar hands its state to the items' shadow roots. Spotlight, dot and glow are off on a droplet bar; `prefers-reduced-motion` makes the drop jump; solid and tint surfaces make it opaque. Works on the fixed bar too, but suits the floating one.
+
+**Active tab surface (GlassKit 1.27.0).** `--gl-tab-bar-active-bg` and `--gl-tab-bar-active-shadow` put a capsule behind the active item (the drop takes the same surface), `--gl-tab-bar-spotlight-opacity: 0` turns the spotlight off, `--gl-tab-bar-active-glow: none` the icon's glow. All unset, inherited into `<glk-tab-item>` — no `hostStyles` sheet needed for a capsule any more.
+
 ---
 
 ### 3.4 `<glk-avatar>`
@@ -1119,8 +1137,9 @@ A small, exclusive choice as one control (since 1.15.0) — traffic light, morni
 | `label` | String | `aria-label` of the group (no default — set it) |
 | `name` | String | Form field name |
 | `disabled` | Boolean | The whole row (since 1.22.3); a `<fieldset disabled>` around it disables it too |
+| `droplet` | Boolean | The chosen option sits on a drop of glass that glides to the next one and can be dragged (since 1.27.0) — recommended |
 
-Properties: `value`, `options` (array or JSON text), `full`, `overflow`, `label`, `disabled`. Events: `glk-change` `{ value }` — only on a change made by the user, not on `.value = …`. Part: `group`.
+Properties: `value`, `options` (array or JSON text), `full`, `overflow`, `label`, `disabled`, `droplet`. Events: `glk-change` `{ value }` — only on a change made by the user, not on `.value = …`. Part: `group`.
 
 With `overflow="scroll"` the chosen option is centred in the row after the first layout, on every value change and when the row's width changes — the row scrolls, never the page. Seven areas on a phone:
 
@@ -1131,6 +1150,12 @@ With `overflow="scroll"` the chosen option is centred in the row after the first
 
 The attribute is `overflow`, not `scroll`: `scroll` is a method of every element, and a framework that sets a property whenever the element has one (hybrids, Vue, React 19) would overwrite that method instead of setting the attribute.
 
+**Droplet (since 1.27.0) — recommended.** `<glk-segmented droplet>` gives the chosen option the drop of the tab bar: it runs to a new option, stretches on the way and settles, the text it passes lights up, and a finger can drag it. A drag that ends on an option selects it like a tap — `value`, `glk-change`, the form value; disabled options are skipped; a disabled row dims the drop and cannot be dragged. With `overflow="scroll"` a swipe still scrolls the row: only the drop itself is dragged, and the row scrolls along at its edges; the centring of the chosen option keeps working, the drop rides along.
+
+```html
+<glk-segmented droplet full overflow="scroll" label="Area" value="a" options='[…]'></glk-segmented>
+```
+
 ---
 
 ### 3.26 `<glk-steps>`

package/dist/components/glk-segmented.js

@@ -1,5 +1,6 @@
 import { GlkFormElement } from './base.js';
 import { r as revealCentered } from './shared/reveal-CjjzoxTa.js';
+import { a as attachDroplet } from './shared/glasskit-droplet-C3k1mxn4.js';
 import '@jungherz-de/glasskit/glasskit-styles.js';
 
 // One button per option, the chosen one marked aria-pressed="true" — GlassKit
@@ -10,9 +11,11 @@ import '@jungherz-de/glasskit/glasskit-styles.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
 //
@@ -41,7 +44,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.
@@ -92,6 +95,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');
   }
@@ -121,12 +125,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) {
@@ -136,6 +151,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;
     }
   }
@@ -155,6 +171,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/dist/components/glk-tab-bar.js

@@ -1,9 +1,16 @@
 import { GlkElement } from './base.js';
+import { a as attachDroplet } from './shared/glasskit-droplet-C3k1mxn4.js';
 import '@jungherz-de/glasskit/glasskit-styles.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() {
@@ -15,6 +22,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();
@@ -27,6 +35,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();
     }
   }
 
@@ -35,6 +47,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) => {
@@ -48,10 +96,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/dist/components/glk-tab-item.js

@@ -67,6 +67,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() {
@@ -78,6 +99,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') || '';

package/dist/components/shared/glasskit-droplet-C3k1mxn4.js

@@ -0,0 +1,217 @@
+// ============================================================
+// GlassKit – Droplet
+//
+// The motion behind .glass-tab-bar--droplet and .glass-segmented--droplet.
+// The stylesheet draws the drop of glass; this module puts it on the chosen
+// item, lets it run to a new one, and lets a finger drag it along the row.
+// Optional and dependency-free: without it a --droplet row keeps its usual
+// look, the tab bar its spotlight and the segmented row its raised option.
+//
+//   import { attachDroplets } from '@jungherz-de/glasskit/glasskit-droplet.js';
+//   attachDroplets();                    // every --droplet row in the page
+//
+//   import { attachDroplet } from '@jungherz-de/glasskit/glasskit-droplet.js';
+//   const drop = attachDroplet(row);     // one row; drop.update(), drop.destroy()
+//
+// The chosen item is the tab with .is-active or the option with
+// aria-pressed="true". The page keeps setting them its own way and the drop
+// follows. Dragged onto another item, the drop clicks it, so the page's own
+// click handler makes the choice. In a row that scrolls sideways a swipe
+// still scrolls: only the drop itself is dragged, and the row scrolls along
+// at its edges.
+//
+// It writes what glasskit.css reads: data-droplet on the row, the chosen
+// item's box as --gl-droplet-left, -right, -top and -bottom, data-droplet-dir
+// and data-droplet-lift while the drop travels, data-droplet-drag while a
+// finger holds it, and .is-under-droplet on the item below it.
+//
+// Options of attachDroplet, for rows whose items live elsewhere (GlassKit
+// Elements uses them): items() returns the items, isChosen(item) tells the
+// chosen one, choose(item) picks one, lens(item, on) marks the item below
+// the drop. Without a MutationObserver reaching the items, call update()
+// after the choice changed.
+// ============================================================
+
+const ITEMS = '.glass-tab-bar__item, .glass-segmented__item';
+const attached = new WeakMap();
+
+function attachDroplet(row, options = {}) {
+  if (attached.has(row)) return attached.get(row);
+
+  const items = options.items || (() => [...row.querySelectorAll(ITEMS)]);
+  const isChosen = options.isChosen
+    || (it => it.classList.contains('is-active') || it.getAttribute('aria-pressed') === 'true');
+  const choose = options.choose || (it => it.click());
+  const mark = options.lens || ((it, on) => it.classList.toggle('is-under-droplet', on));
+  const usable = it => !it.disabled && it.getAttribute('aria-disabled') !== 'true';
+  const scrolls = () => row.scrollWidth > row.clientWidth + 1;
+  const motion = matchMedia('(prefers-reduced-motion: no-preference)');
+  const set = (k, px) => row.style.setProperty(`--gl-droplet-${k}`, `${px}px`);
+
+  let chosen = null, left = 0, placed = null, liftTimer = 0, lensFrame = 0, edgeFrame = 0;
+  let drag = null, eatClick = false, under = null;
+
+  // An item's box in the row's padding box; in a row that scrolls, in its
+  // scrolled content, where the drop scrolls along with the items.
+  const boxOf = it => {
+    const n = row.getBoundingClientRect(), r = it.getBoundingClientRect();
+    const l = r.left - n.left - row.clientLeft + row.scrollLeft;
+    const t = r.top - n.top - row.clientTop + row.scrollTop;
+    return { left: l, width: r.width, top: t, bottom: row.clientHeight - t - r.height };
+  };
+  const put = (l, width, b) => {
+    left = l;
+    set('left', l); set('right', row.clientWidth - l - width);
+    set('top', b.top); set('bottom', b.bottom);
+  };
+
+  // The usable item nearest a point of the row lights up as under a lens.
+  const lens = centre => {
+    let below = null, best = Infinity;
+    if (centre != null) for (const it of items()) {
+      if (!usable(it)) continue;
+      const b = boxOf(it), d = Math.abs(b.left + b.width / 2 - centre);
+      if (d < best) { best = d; below = it; }
+    }
+    if (below !== under) {
+      if (under) mark(under, false);
+      if (below) mark(below, true);
+      under = below;
+    }
+    return below;
+  };
+  // While the drop travels, the lens follows its centre.
+  const follow = () => {
+    cancelAnimationFrame(lensFrame);
+    const start = performance.now();
+    const step = now => {
+      if (now - start > 620) { lens(null); return; }
+      const cs = getComputedStyle(row, '::before');
+      const l = parseFloat(cs.left), r = parseFloat(cs.right);
+      lens(l + (row.clientWidth - l - r) / 2);
+      lensFrame = requestAnimationFrame(step);
+    };
+    lensFrame = requestAnimationFrame(step);
+  };
+
+  const place = (it, travel) => {
+    const b = boxOf(it);
+    row.dataset.droplet = '';
+    if (travel && motion.matches && Math.abs(b.left - left) > 1) {
+      row.dataset.dropletDir = b.left > left ? 'right' : 'left';
+      row.dataset.dropletLift = '';
+      clearTimeout(liftTimer);
+      liftTimer = setTimeout(() => { delete row.dataset.dropletLift; }, 280);
+      follow();
+    } else {
+      delete row.dataset.dropletDir;
+    }
+    put(b.left, b.width, b);
+    placed = { ...b, rowWidth: row.clientWidth, rowHeight: row.clientHeight };
+    chosen = it;
+  };
+
+  // Follow the choice. Nothing chosen, no drop. A new item is watched for
+  // its size too; a size that changed moves the drop without a journey.
+  const update = () => {
+    for (const it of items()) if (!watched.has(it)) { watched.add(it); ro.observe(it); }
+    const it = items().find(isChosen);
+    if (!it) {
+      if (chosen) { chosen = null; placed = null; delete row.dataset.droplet; }
+      return;
+    }
+    if (it !== chosen) place(it, chosen !== null && row.dataset.droplet !== undefined);
+  };
+  const ro = new ResizeObserver(() => {
+    if (!chosen || drag?.moved) return;
+    const b = { ...boxOf(chosen), rowWidth: row.clientWidth, rowHeight: row.clientHeight };
+    if (!placed || Object.keys(b).some(k => Math.abs(b[k] - placed[k]) > 0.5)) place(chosen, false);
+  });
+  const watched = new Set();
+  ro.observe(row);
+  const mo = new MutationObserver(update);
+  mo.observe(row, { subtree: true, childList: true, attributes: true, attributeFilter: ['class', 'aria-pressed'] });
+
+  // Dragging: past 8px the drop slides under the finger and grows into a
+  // lens; let go, the item below it is chosen and the drop settles on it.
+  const at = clientX => {
+    const n = row.getBoundingClientRect();
+    const x = clientX - n.left - row.clientLeft + row.scrollLeft;
+    const boxes = items().map(boxOf);
+    const min = Math.min(...boxes.map(b => b.left));
+    const max = Math.max(...boxes.map(b => b.left + b.width)) - drag.width;
+    return Math.min(max, Math.max(min, x - drag.width / 2));
+  };
+  const track = () => {
+    const l = at(drag.clientX);
+    put(l, drag.width, boxOf(chosen));
+    drag.below = lens(l + drag.width / 2);
+    cancelAnimationFrame(edgeFrame);
+    if (!scrolls()) return;
+    const n = row.getBoundingClientRect(), zone = 32;
+    const v = drag.clientX < n.left + zone ? -1 : drag.clientX > n.right - zone ? 1 : 0;
+    if (v) edgeFrame = requestAnimationFrame(() => { row.scrollLeft += v * 6; if (drag?.moved) track(); });
+  };
+  const down = e => {
+    if (!chosen || drag || !usable(chosen) || (e.pointerType === 'mouse' && e.button !== 0)) return;
+    if (scrolls() && !e.composedPath().includes(chosen)) return;
+    drag = { id: e.pointerId, x: e.clientX, clientX: e.clientX, width: boxOf(chosen).width, moved: false, below: null };
+  };
+  const move = e => {
+    if (!drag || e.pointerId !== drag.id) return;
+    drag.clientX = e.clientX;
+    if (!drag.moved) {
+      if (Math.abs(e.clientX - drag.x) < 8) return;
+      drag.moved = true;
+      row.setPointerCapture(e.pointerId);
+      delete row.dataset.dropletDir;
+      row.dataset.dropletDrag = '';
+    }
+    track();
+  };
+  const up = e => {
+    if (!drag || e.pointerId !== drag.id) return;
+    const d = drag;
+    drag = null;
+    cancelAnimationFrame(edgeFrame);
+    if (!d.moved) return;                         // a tap: the item's own click does it
+    delete row.dataset.dropletDrag;
+    lens(null);
+    const target = d.below || chosen;
+    if (e.type === 'pointerup' && target !== chosen) choose(target);
+    // Settle where the choice is, unless it already set the drop on its way.
+    const next = items().find(isChosen) || chosen;
+    if (next !== chosen || row.dataset.dropletDir === undefined) place(next, true);
+    eatClick = true;                              // the click the drag ends in
+    setTimeout(() => { eatClick = false; }, 400);
+  };
+  const click = e => { if (eatClick) { eatClick = false; e.stopPropagation(); e.preventDefault(); } };
+  row.addEventListener('pointerdown', down);
+  row.addEventListener('pointermove', move);
+  row.addEventListener('pointerup', up);
+  row.addEventListener('pointercancel', up);
+  row.addEventListener('click', click, true);
+
+  update();
+
+  const handle = {
+    update,
+    destroy() {
+      mo.disconnect(); ro.disconnect();
+      clearTimeout(liftTimer); cancelAnimationFrame(lensFrame); cancelAnimationFrame(edgeFrame);
+      row.removeEventListener('pointerdown', down);
+      row.removeEventListener('pointermove', move);
+      row.removeEventListener('pointerup', up);
+      row.removeEventListener('pointercancel', up);
+      row.removeEventListener('click', click, true);
+      lens(null);
+      for (const k of ['droplet', 'dropletDir', 'dropletLift', 'dropletDrag']) delete row.dataset[k];
+      for (const k of ['left', 'right', 'top', 'bottom']) row.style.removeProperty(`--gl-droplet-${k}`);
+      attached.delete(row);
+    },
+  };
+  attached.set(row, handle);
+  return handle;
+}
+
+export { attachDroplet as a };