@jungherz-de/glasskit-elements 1.27.0 → 1.28.0

package/CHANGELOG.md

@@ -7,6 +7,35 @@ 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`).
@@ -896,7 +925,8 @@ 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

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.27.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>
 
@@ -67,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.27/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>
@@ -105,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.27/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>
@@ -127,7 +127,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`, `droplet` |
-| `<glk-tab-item>` | Tab bar item | `label`, `active`, `badge` |
+| `<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` |
@@ -165,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), `droplet`, `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` |
 
@@ -238,6 +238,27 @@ The chosen item sits on a drop of glass that floats a little above the row. A ta
 
 > **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.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.
+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
@@ -10,6 +10,8 @@ description: GlassKit Elements is a vanilla-JS Web Components library (v1.27.0)
 
 > **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
@@ -178,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`.
 
@@ -365,7 +369,7 @@ 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 |
+| `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>`**
 
@@ -375,7 +379,24 @@ Fixed bottom navigation. Requires `.glass-bg--has-tab-bar` on the outer backgrou
 | `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>`)
 
@@ -417,7 +438,7 @@ 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
 
@@ -904,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>`
@@ -1138,8 +1161,22 @@ A small, exclusive choice as one control (since 1.15.0) — traffic light, morni
 | `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`.
+
+**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>
+```
 
-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`.
+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:
 
@@ -1160,7 +1197,7 @@ The attribute is `overflow`, not `scroll`: `scroll` is a method of every element
 
 ### 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>
@@ -1457,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 }` |
@@ -1526,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,6 +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 { 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
@@ -13,9 +13,16 @@ import '@jungherz-de/glasskit/glasskit-styles.js';
 //             disabled (the whole row; since 1.22.3, as is a disabled
 //             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)
+//             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, droplet
+//             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
 //
@@ -44,7 +51,7 @@ function parseList(json) {
 }
 
 class GlkSegmented extends GlkFormElement {
-  static get observedAttributes() { return ['options', 'value', 'full', 'overflow', 'label', 'droplet']; }
+  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.
@@ -61,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;
@@ -96,6 +122,7 @@ class GlkSegmented extends GlkFormElement {
     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');
   }
@@ -122,14 +149,18 @@ 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();
@@ -152,6 +183,7 @@ class GlkSegmented extends GlkFormElement {
       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;
     }
   }
@@ -174,6 +206,9 @@ class GlkSegmented extends GlkFormElement {
   get droplet() { return this.getBoolAttr('droplet'); }
   set droplet(v) { this.setBoolAttr('droplet', v); }
 
+  get iconOnly() { return this.getBoolAttr('icon-only'); }
+  set iconOnly(v) { this.setBoolAttr('icon-only', v); }
+
   get overflow() {
     const v = this.getAttribute('overflow');
     return OVERFLOWS.includes(v) ? v : '';

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

@@ -1,5 +1,5 @@
 import { GlkElement } from './base.js';
-import { a as attachDroplet } from './shared/glasskit-droplet-C3k1mxn4.js';
+import { a as attachDroplet } from './shared/glasskit-droplet-3vJVXB3u.js';
 import '@jungherz-de/glasskit/glasskit-styles.js';
 
 // droplet (since 1.27.0): the active item sits on a drop of glass that glides
@@ -83,20 +83,20 @@ class GlkTabBar extends GlkElement {
     this._syncItems();
   }
 
-  setupEvents() {
-    // Listen for tab selection events from child glk-tab-item elements
-    this._onTabSelect = (e) => {
-      // Deactivate all other tabs
-      const items = this.querySelectorAll('glk-tab-item');
-      items.forEach(item => {
-        if (item !== e.target) {
-          item.removeAttribute('active');
-        }
-      });
-      this.emit('glk-tab-change', { tab: e.target });
-    };
-    this.addEventListener('glk-tab-select', this._onTabSelect);
+  /**
+   * Called by an item the user selected once its glk-tab-select went through
+   * uncancelled; the item is active already. Until 1.27.0 the bar did this
+   * while the event was still on its way, so a listener further up could not
+   * have kept the current tab.
+   */
+  _selected(tab) {
+    for (const item of this.querySelectorAll('glk-tab-item')) {
+      if (item !== tab) item.removeAttribute('active');
+    }
+    this.emit('glk-tab-change', { tab });
+  }
 
+  setupEvents() {
     // The drop's state lives on the nav; the items carry it on their wrappers.
     this._navObserver = new MutationObserver(() => this._syncItems());
     this._navObserver.observe(this._nav, { attributes: true, attributeFilter: ['data-droplet', 'data-droplet-drag'] });
@@ -107,12 +107,19 @@ class GlkTabBar extends GlkElement {
   }
 
   teardownEvents() {
-    this.removeEventListener('glk-tab-select', this._onTabSelect);
     this._navObserver?.disconnect();
     this._itemObserver?.disconnect();
     this._droplet?.destroy();
     this._droplet = null;
   }
+
+  // Properties as well (since 1.28.0): `bar.droplet = true` set an own
+  // property before and changed nothing.
+  get floating() { return this.getBoolAttr('floating'); }
+  set floating(v) { this.setBoolAttr('floating', v); }
+
+  get droplet() { return this.getBoolAttr('droplet'); }
+  set droplet(v) { this.setBoolAttr('droplet', v); }
 }
 
 customElements.define('glk-tab-bar', GlkTabBar);

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

@@ -1,6 +1,19 @@
 import { GlkElement } from './base.js';
 import '@jungherz-de/glasskit/glasskit-styles.js';
 
+// The icon: an inline <svg> child is copied into the shadow root, where
+// GlassKit's rules reach it. Anything else — a font icon such as Material
+// Icons, an <img>, an element of the page's own — goes into slot="icon"
+// (since 1.28.0) and takes the state colour from GlassKit's icon box: active,
+// hover, the lens of the drop and the drag. With a slotted icon no SVG is
+// copied.
+//
+// glk-tab-select (cancelable since 1.28.0) comes before `active` changes:
+// preventDefault() keeps the current tab — for an item that opens a drawer
+// or a link — and the bar then neither moves `active` nor its drop, nor
+// emits glk-tab-change. A drag of the drop that ends on the item clicks it,
+// so it takes the same path.
+
 class GlkTabItem extends GlkElement {
   static get observedAttributes() {
     return ['label', 'active', 'badge'];
@@ -12,8 +25,10 @@ class GlkTabItem extends GlkElement {
     this._btn = this.createElement('button', ['glass-tab-bar__item']);
     if (this.getBoolAttr('active')) this._btn.classList.add('is-active');
 
-    // Icon — clone SVG from light DOM into shadow DOM so GlassKit CSS applies
+    // Icon — clone SVG from light DOM into shadow DOM so GlassKit CSS applies,
+    // or show what is slotted as icon
     this._iconEl = this.createElement('span', ['glass-tab-bar__icon']);
+    this._iconEl.appendChild(this.createElement('slot', [], { name: 'icon' }));
 
     // Label
     this._labelEl = this.createElement('span', ['glass-tab-bar__label']);
@@ -37,7 +52,8 @@ class GlkTabItem extends GlkElement {
   }
 
   projectLightDom() {
-    const svg = this.querySelector('svg');
+    // A slotted icon wins; only without one is an <svg> copied.
+    const svg = this.querySelector(':scope > [slot="icon"]') ? null : this.querySelector('svg');
     const signature = svg ? svg.outerHTML : '';
     if (signature === this._iconSignature) return;
     this._iconSignature = signature;
@@ -63,8 +79,9 @@ class GlkTabItem extends GlkElement {
 
   setupEvents() {
     this._onClick = () => {
+      if (!this.emit('glk-tab-select', null, { cancelable: true })) return;
       this.setAttribute('active', '');
-      this.emit('glk-tab-select');
+      this.closest('glk-tab-bar')?._selected?.(this);
     };
     this._btn.addEventListener('click', this._onClick);
     this._tellBar();