@jungherz-de/glasskit-elements 1.26.0 → 1.28.0

package/CHANGELOG.md

@@ -7,6 +7,50 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.28.0] – 2026-10-20
+
+Versions stay aligned with GlassKit at 1.28.0, which this release is built against (peer dependency `>=1.28.0`).
+
+### Added
+
+- **Icons that are not inline SVG in `<glk-tab-item>`: `slot="icon"`.** The item copied the first `<svg>` of its light DOM into its shadow root and showed nothing else, so an app whose tab icons come from Material Icons, a ligature font, or from an element of its own could not use them. Anything slotted as `icon` now sits in GlassKit's `.glass-tab-bar__icon`, before the badge, and takes the state colour from it (GlassKit 1.28.0): inactive, hover, active, the lens of the drop and the drag; on a bar without droplet the active icon carries the glow. An `<svg>` without `slot` is copied as before; with a slotted icon nothing is copied. ([#17](https://github.com/JUNGHERZ/GlassKit-Elements/issues/17))
+- **Icons per option in `<glk-segmented>`: `slot="icon-<value>"`, and `icon-only`.** The options were text only. Each option now takes an icon from the slot named after its value — an `<svg>`, a font icon, an `<img>` — in GlassKit's `.glass-segmented__icon` before the label; an option without one has no icon box, and an icon added or removed later shows or hides it. The icon box is `aria-hidden`, so a font icon's text never joins the name. `icon-only` (property `iconOnly`) shows the icons alone, for a light / dark / auto switch: the row takes `.glass-segmented--icons`, and each label becomes the button's `aria-label` and `title`. ([#17](https://github.com/JUNGHERZ/GlassKit-Elements/issues/17))
+- **`droplet` and `floating` are properties of `<glk-tab-bar>`.** The README called `droplet` "also a property", but `GlkTabBar` had no accessor, so `bar.droplet = true` set an own property and changed nothing; `floating` had the same gap. ([#17](https://github.com/JUNGHERZ/GlassKit-Elements/issues/17))
+- **GlassKit 1.28.0's tokens reach the elements by inheritance:** `--gl-tab-bar-color`, `--gl-tab-bar-hover-color`, `--gl-tab-bar-label-size` and `--gl-tab-bar-z-index` for `<glk-tab-item>`, `<glk-tab-bar>` and `<glk-tab-dock>`; `--gl-segmented-active-bg`, `-shadow` and `-color` for the chosen option of `<glk-segmented>` and its drop. ([GlassKit #17](https://github.com/JUNGHERZ/GlassKit/issues/17), [GlassKit #14](https://github.com/JUNGHERZ/GlassKit/issues/14))
+
+### Changed
+
+- **`glk-tab-select` comes before `active` changes, and it is cancelable.** A bar item that opens a side drawer or an external link must not become active, but the item set `active` before it emitted `glk-tab-select`, and the bar, listening on its way up, removed `active` from the others and emitted `glk-tab-change` before a listener on the document had even seen the event: the page could only put `active` back, and on a droplet bar the drop ran to the item and back. Now `event.preventDefault()` keeps the current tab — no `active`, no `glk-tab-change`, and the drop stays. A drag that ends on such an item takes the same path, because the drop clicks the item, and the drop goes back. Uncancelled, the item becomes active and the bar emits `glk-tab-change` after `glk-tab-select`; in 1.27.0 a listener on the document received `glk-tab-change` first. ([#17](https://github.com/JUNGHERZ/GlassKit-Elements/issues/17))
+
+### Fixed
+
+- **The action buttons of `<glk-modal>` follow attribute changes.** The actions are copies of the buttons in `slot="actions"`, kept in step by the light-DOM observer — which watched content but not attributes. A confirm button that starts `disabled` stayed disabled in its copy after the page enabled it, a disabled copy forwards no click, and with a framework that binds only `disabled` (hybrids, lit, Vue) the dialog could never be confirmed. The observer of every element that copies light-DOM children now watches attributes too, so the copies of `<glk-select>`'s options and `<glk-tab-item>`'s SVG follow them as well. With as many actions as before, the copies change in place, so the one that has the focus keeps it while it is relabelled or disabled. Measured in Chromium 153, WebKit 26.6 and Firefox 151 with the issue's dialog: after typing DELETE the copy of Delete is enabled (in 1.27.0 it stayed disabled) and a click on it runs the original once; relabelled and marked `aria-busy` while focused, the copy stays the same node and keeps the focus; an option of `<glk-select>` disabled after connecting is disabled in the copy. ([#16](https://github.com/JUNGHERZ/GlassKit-Elements/issues/16))
+- **An inline `onclick` on a modal action runs once.** The copy carried the original's `onclick` attribute and ran it, then handed the click to the original, which ran it again: the issue's `alert('deleted')` would have shown twice. The copies carry no inline handlers now. Found while fixing the above. ([#16](https://github.com/JUNGHERZ/GlassKit-Elements/issues/16))
+- **From GlassKit 1.28.0:** under a scaled ancestor the drop of `<glk-tab-bar droplet>` and `<glk-segmented droplet>` lands on the chosen item, at rest, while the transform runs and during a drag ([GlassKit #16](https://github.com/JUNGHERZ/GlassKit/issues/16)); the items of the fixed `<glk-tab-bar>` sit in the middle without a home indicator ([GlassKit #17](https://github.com/JUNGHERZ/GlassKit/issues/17)); seven steps in `<glk-steps>` fit a narrow column, so a `::part(steps)` gap workaround can go ([GlassKit #15](https://github.com/JUNGHERZ/GlassKit/issues/15)).
+
+### Compatibility
+
+- A listener on `glk-tab-select` that read the item's `active` there sees the previous state now; `glk-tab-change` still comes after the change. The bar no longer listens for `glk-tab-select`: the item calls it once the event went through uncancelled, so a `glk-tab-select` dispatched by a page switches no tab.
+
+Measured in Chromium 153, WebKit 26.6 and Firefox 151: a slotted text icon, a custom element and a slotted SVG take the inactive colour, the hover colour, the primary when active and while the dragged drop is over them, and no SVG is copied next to them; `glk-tab-select` cancelled from a listener on the document leaves `active`, the drop and `glk-tab-change` alone on a tap and on a drag, where the drop returns to the current tab; segmented icons are 18 × 18 px, icon-only options 34 × 34 px with `aria-label` and `title`, the icon under a dragged drop scales by 1.15; `bar.droplet = false` removes the attribute, the class and the drop, `true` brings them back; the new GlassKit tokens arrive in every shadow root. Docs, showcase and landing pages render pixel-identical to 1.27.0, except the fixed tab bar of the docs, whose items moved to the middle, and the narrow steps, whose lines reach 2px closer to their circles.
+
+---
+
+## [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`).
@@ -881,7 +925,9 @@ Starting with this release, GlassKit Elements version numbers are aligned with G
 
 ---
 
-[Unreleased]: https://github.com/JUNGHERZ/GlassKit-Elements/compare/v1.25.0...HEAD
+[Unreleased]: https://github.com/JUNGHERZ/GlassKit-Elements/compare/v1.28.0...HEAD
+[1.28.0]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.28.0
+[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.28.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.28/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.28/glasskit.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
 </head>
 <body>
@@ -125,8 +126,8 @@ 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-item>` | Tab bar item | `label`, `active`, `badge` |
+| `<glk-tab-bar>` | Bottom tab bar navigation | `static`, `floating`, `droplet` |
+| `<glk-tab-item>` | Tab bar item; any icon in `slot="icon"`, a cancelable `glk-tab-select` | `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` |
 | `<glk-steps>` | Progress through a short flow | `steps`, `current`, `label` |
@@ -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, icons per option in `slot="icon-<value>"`; form-associated | `options` (JSON), `value`, `full`, `overflow` (scroll, wrap), `droplet`, `icon-only`, `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,48 @@ 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.
+
+### Icons of any kind, and a tab that keeps the current one
+
+Since 1.28.0 a tab item and each segmented option take icons that are not inline SVG — Material Icons, an `<img>`, an element of your own — and they follow every state, the drop's lens and the drag:
+
+```html
+<glk-tab-item label="Home" active>
+  <span slot="icon" class="material-icons" aria-hidden="true">home</span>
+</glk-tab-item>
+
+<glk-segmented droplet icon-only label="Theme" value="dark"
+  options='[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"},{"value":"auto","label":"Auto"}]'>
+  <svg slot="icon-light" viewBox="0 0 24 24">…</svg>
+  <span slot="icon-dark" class="material-icons">dark_mode</span>
+  <svg slot="icon-auto" viewBox="0 0 24 24">…</svg>
+</glk-segmented>
+```
+
+`glk-tab-select` is cancelable and comes before `active` changes: `event.preventDefault()` keeps the current tab — for an item that opens a drawer or a link — and the bar, its drop and `glk-tab-change` stay put. `droplet` and `floating` are properties of `<glk-tab-bar>` as well. The action buttons of `<glk-modal>` follow attribute changes of their originals, so a confirm button that starts `disabled` unlocks when the page or a framework enables it.
+
+> **Requires GlassKit CSS >= 1.28.0.** The icon colours come from GlassKit's icon boxes; its new tokens reach the elements by inheritance: `--gl-tab-bar-color`, `--gl-tab-bar-hover-color`, `--gl-tab-bar-label-size`, `--gl-tab-bar-z-index` for the tab bar, `--gl-segmented-active-bg`, `-shadow` and `-color` for the chosen option and its drop.
+
 ### 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.28.0) wrapping GlassKit CSS v1.28.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,10 @@ 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.
+
+> **New in 1.28.0 — icons of any kind, and a tab that keeps the current one.** `<glk-tab-item>` takes an icon that is not inline SVG in `slot="icon"` — Material Icons, an `<img>`, a custom element — and it follows every state; `<glk-segmented>` takes one per option in `slot="icon-<value>"` and shows them alone with `icon-only`. `glk-tab-select` is cancelable, for an item that opens a drawer or a link. **Where a project styles tab icons through `hostStyles`, or puts `active` back after `glk-tab-select`, replace that** (3.3, 3.25).
+
 ---
 
 ## 1. Setup & Boilerplate
@@ -176,6 +180,8 @@ Those copies are now kept in step by a `MutationObserver`, so swapping the child
 — by hand or through a framework — updates the rendered element. Before 1.12.0 the
 copy was made once on the first frame and then silently went stale.
 
+Since 1.28.0 the observer also watches the children's attributes. A framework that binds only `disabled` (hybrids, lit, Vue) used to leave the copy behind: a modal action that started disabled stayed disabled in its copy and never forwarded the click. `<glk-tab-item>` has `slot="icon"` since 1.28.0 for icons that are not inline SVG; with a slotted icon nothing is copied.
+
 If you ever need to force it, `element.refresh()` re-runs the copy immediately.
 There should be no reason to reach into `element.shadowRoot`.
 
@@ -363,16 +369,34 @@ 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, like `floating` (since 1.28.0: before, `bar.droplet = true` set an own property and changed nothing) |
 
 **`<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.
+Icon: an `<svg>` child is copied into the shadow root. Anything else — a font icon such as Material Icons, an `<img>`, a custom element — goes into `slot="icon"` (since 1.28.0) and takes the state colour from GlassKit's icon box: inactive, hover, active, the lens of the drop and the drag. Give a font icon `aria-hidden="true"`, or its text becomes part of the tab's name. With a slotted icon no SVG is copied.
+
+```html
+<glk-tab-item label="Home" active>
+  <span slot="icon" class="material-icons" aria-hidden="true">home</span>
+</glk-tab-item>
+```
+
+Events: `glk-tab-select` on the item, then `glk-tab-change` `{ tab }` on the bar. **`glk-tab-select` is cancelable (since 1.28.0)** and comes before `active` changes: `event.preventDefault()` keeps the current tab — for an item that opens a drawer or a link — so `active` stays, no `glk-tab-change` follows and the drop does not move. A drag of the drop that ends on such an item takes the same path, and the drop goes back. Before 1.28.0 the item was active already when the event arrived, and the bar had moved `active` and emitted `glk-tab-change` before a listener on the document could react.
+
+```js
+menuItem.addEventListener('glk-tab-select', (event) => {
+  event.preventDefault();   // stays on the current tab
+  openDrawer();
+});
+```
+
+GlassKit 1.28.0's tab bar tokens reach the items by inheritance: `--gl-tab-bar-color` (inactive icon and label), `--gl-tab-bar-hover-color`, `--gl-tab-bar-label-size`, `--gl-tab-bar-z-index` (the fixed bar and `<glk-tab-dock>`).
 
 #### Floating variant + Accessory (`<glk-tab-dock>` + `<glk-tab-accessory>`)
 
@@ -414,7 +438,22 @@ iOS 26 Liquid Glass-style floating tab bar. Wrap a `<glk-tab-bar floating>` in a
 | `variant` | String | `accent`, `success`, `error` — filled colored capsule with white icon |
 | `disabled` | Boolean | Disabled state |
 
-Default slot: icon SVG (22×22). Events: `glk-click` (suppressed when disabled).
+Default slot: icon SVG (22×22), or a font icon, which follows hover and the variants (GlassKit 1.28.0). 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.
 
 ---
 
@@ -886,6 +925,8 @@ Closes automatically on overlay click and <kbd>Escape</kbd>, with its fade, and
 
 While it is open, **everything outside is inert** — a `<glk-toast>` shown then is neither clickable nor announced. Give feedback inside the modal, or close it first.
 
+**The actions are copies** of the `<button>`s in `slot="actions"`; a click on one is handed to its original. Since 1.28.0 they follow every change of the originals, attributes included: a confirm button that starts `disabled` unlocks once the page or a framework enables it — no `refresh()` needed. With the same number of actions the copies change in place, so the focused one keeps the focus while it is relabelled or disabled. An inline `onclick` runs once per click, on the original; until 1.28.0 the copy carried it too and it ran twice.
+
 ---
 
 ### 3.20 `<glk-popover>`
@@ -1119,8 +1160,23 @@ 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 |
+| `icon-only` | Boolean | The options show their icons alone, square; each label becomes the button's `aria-label` and `title` (since 1.28.0) |
+
+Properties: `value`, `options` (array or JSON text), `full`, `overflow`, `label`, `disabled`, `droplet`, `iconOnly`. Slots: `icon-<value>` (since 1.28.0). 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`. Events: `glk-change` `{ value }` — only on a change made by the user, not on `.value = …`. Part: `group`.
+**Icons (since 1.28.0).** Each option takes its icon from the slot `icon-<value>` — an `<svg>`, a font icon, an `<img>`. It sits in GlassKit's `.glass-segmented__icon` before the label, in the option's colour, and grows under the drop; an option without one has no icon box, and an icon added or removed later shows or hides it. The icon box is `aria-hidden`, so a font icon's text never joins the name. `icon-only` is for a row of icons alone — a light / dark / auto switch:
+
+```html
+<glk-segmented droplet icon-only label="Theme" value="dark"
+  options='[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"},{"value":"auto","label":"Auto"}]'>
+  <svg slot="icon-light" viewBox="0 0 24 24"><!-- sun --></svg>
+  <span slot="icon-dark" class="material-icons">dark_mode</span>
+  <svg slot="icon-auto" viewBox="0 0 24 24"><!-- screen --></svg>
+</glk-segmented>
+```
+
+GlassKit 1.28.0's tokens for the chosen option reach the element by inheritance: `--gl-segmented-active-bg`, `--gl-segmented-active-shadow` and `--gl-segmented-active-color` — for a dark brand, on which the light surface leaves a white label below 4.5:1. The drop takes the same surface.
 
 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,11 +1187,17 @@ 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>`
 
-Progress through a short flow (since 1.15.0), purely presentational: the current step carries `aria-current="step"`, done steps show an SVG check. The narrowing in tight frames is the CSS block's container query (below 360 px only the current label stays) — the element knows nothing about it, so in a flex row give it a width.
+Progress through a short flow (since 1.15.0), purely presentational: the current step carries `aria-current="step"`, done steps show an SVG check. The narrowing in tight frames is the CSS block's container query (below 360 px only the current label stays) — the element knows nothing about it, so in a flex row give it a width. Since GlassKit 1.28.0 the lines give way there first, the circles keep their size and the row never runs past its frame; a `::part(steps) { gap: … }` workaround can go.
 
 ```html
 <glk-steps steps="Day,Slot,Dog,Confirm" current="2" label="Progress"></glk-steps>
@@ -1432,7 +1494,7 @@ Key points:
 |---|---|---|---|---|
 | `<glk-button>` | — | `disabled` | `glk-click` | — |
 | `<glk-pill>` | — | `disabled` | `glk-click` | — |
-| `<glk-tab-item>` | — | `active` | `glk-tab-select` | — |
+| `<glk-tab-item>` | — | `active` | `glk-tab-select` (cancelable since 1.28.0; `glk-tab-change` `{ tab }` follows on the bar) | — |
 | `<glk-tab-accessory>` | — | `disabled` | `glk-click` | — |
 | `<glk-input>` | `.value` | `value` | `glk-input`, `glk-change` (+ native `input`, `change`) | `{ value }` |
 | `<glk-textarea>` | `.value` | `value` | `glk-input`, `glk-change` | `{ value }` |
@@ -1501,14 +1563,14 @@ All `glk-*` events bubble and are `composed: true`, so they pierce shadow bounda
 |---|---|---|---|---|
 | `<glk-nav>` | Navigation | — | default | — |
 | `<glk-pill>` | Navigation | `label`, `disabled` | default (icon) | `glk-click` |
-| `<glk-tab-bar>` | Navigation | `static`, `floating` | default | — |
-| `<glk-tab-item>` | Navigation | `label`, `active`, `badge` | default (icon) | `glk-tab-select` |
+| `<glk-tab-bar>` | Navigation | `static`, `floating`, `droplet` | default | `glk-tab-change` |
+| `<glk-tab-item>` | Navigation | `label`, `active`, `badge` | `icon`; an unslotted `<svg>` is copied | `glk-tab-select` (cancelable) |
 | `<glk-tab-dock>` | Navigation | `accessory-left` | default | — |
 | `<glk-tab-accessory>` | Navigation | `label`, `variant`, `disabled` | default (icon) | `glk-click` |
 | `<glk-avatar>` | Content | `size`, `src` | default (initials) | — |
 | `<glk-badge>` | Content | `variant`, `interactive`, `selected` | default | `glk-click` (only when interactive) |
 | `<glk-empty>` | Content | `title`, `text` | default (icon), `action` | — |
-| `<glk-segmented>` | Forms | `options`, `value`, `full`, `overflow`, `label`, `name` | — | `glk-change` |
+| `<glk-segmented>` | Forms | `options`, `value`, `full`, `overflow`, `droplet`, `icon-only`, `label`, `name` | `icon-<value>` | `glk-change` |
 | `<glk-steps>` | Navigation | `steps`, `current`, `label` | — | — |
 | `<glk-sheet>` | Feedback | `open`, `inline`, `title` | default, `actions` | `glk-close` |
 | `<glk-date-strip>` | Navigation | `start`, `days`, `value`, `today`, `marks`, `locale`, `label` | — | `glk-change` |

package/dist/components/base.js

@@ -209,8 +209,9 @@ 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 @@ 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/dist/components/glk-modal.js

@@ -24,6 +24,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'];
@@ -69,9 +96,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/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-3vJVXB3u.js';
 import '@jungherz-de/glasskit/glasskit-styles.js';
 
 // One button per option, the chosen one marked aria-pressed="true" — GlassKit
@@ -10,9 +11,18 @@ 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), 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
 //
@@ -41,7 +51,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.
@@ -58,20 +68,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;
@@ -92,6 +121,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');
   }
@@ -118,15 +149,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) {
@@ -136,6 +182,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;
     }
   }
@@ -155,6 +203,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 : '';