@jungherz-de/glasskit 1.27.0 → 1.29.0

package/CHANGELOG.md

@@ -7,6 +7,40 @@ GlassKit uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [1.29.0] – 2026-10-21
+
+### Added
+
+- **A count per segmented option: `.glass-segmented__badge`.** A row of tabs in an admin area — payments, subscriptions, invoices, tickets — had no place to say how much waits behind a tab. The tone dot says that something is there, not how much, so the count went into the label ("Tickets (1)"), where it read as part of it and could be neither styled nor announced apart. The badge is a small pill after the label, in tabular figures and inline, so a scrolling row and the drop measure the option with it. Without a tone it is neutral, a tint of the text colour over the state scrim; `--gl-segmented-badge-bg` and `--gl-segmented-badge-color` set it, both colours, both unset. With a tone it takes the state tint of `.glass-badge` over a doubled scrim. Put inside `.glass-segmented__icon` it sits at the icon's corner, as on the tab bar — the place for an `--icons` row — and is opaque there, the theme's middle background under its tint, because it covers the icon; `.glass-segmented__icon` is positioned for that. Measured in Chromium 153, WebKit 26.6 and Firefox 151, the 11px figures reach 5.65:1 or more in the dark theme and 4.71:1 or more in the light one, on the chosen option and beside it, neutral and in every tone, inline and at the corner; with a single scrim the neutral badge on the chosen option stayed at 3.75:1 in the dark theme, and a plain tint without any let the icon show through the figures at the corner. ([GlassKit Elements #19](https://github.com/JUNGHERZ/GlassKit-Elements/issues/19))
+
+Docs (English and German), README and SKILL.md show the badge. Docs, showcase and landing pages render pixel-identical to 1.28.0: in WebKit and Firefox on the whole pages, in Chromium section by section, where the full-page captures of the docs differ by a rasterisation seam in the date strip whose layout is the same to the third decimal.
+
+---
+
+## [1.28.0] – 2026-10-20
+
+### Added
+
+- **Icons that are not inline SVG, in the tab bar, its accessory and the segmented control.** Every state of a tab icon was a `stroke` on `.glass-tab-bar__icon svg` — inactive, hover, active, under the drop, muted while the drop is dragged — so an icon font such as Material Icons, an `<img>` drawn as a mask or a custom element got none of them, and a project copied every state rule onto its own icon. The states now set `color` on `.glass-tab-bar__icon`, and the SVG strokes in `currentColor`: any icon in the box takes the colour, with the lens of the drop and the drag. The glow of the active tab lies on the icon itself, never on the badge; a font icon takes the box's 24px unless its own class sets a size. The accessory works the same way, with `color` on the button. In the segmented control `.glass-segmented__icon` puts an icon before an option's label: an 18px box, the SVG in `currentColor`, any other element inheriting the option's colour, growing under the drop like the tone dot, hidden by the `hidden` attribute. `--icons` makes a row of icons alone, a light / dark / auto switch: square options, each with its name in `aria-label` and `title`. Slotted SVGs are styled through `::slotted()` pairs, so GlassKit Elements can put any of these into a slot. Measured in Chromium 153, WebKit 26.6 and Firefox 151: a text icon and a mask icon in a tab take the inactive colour, the hover colour, the primary when active and while the dragged drop is over them, and the inactive colour again on the chosen tab while the drop is dragged away — before, they stayed white in every state; segmented icons are 18 × 18 px, an icon-only row 34 × 34 px per option, the icon under a dragged drop scales by 1.15. ([#17](https://github.com/JUNGHERZ/GlassKit/issues/17))
+- **Tokens for the tab bar's literals:** `--gl-tab-bar-color` (icon and label of the inactive tabs; unset `--gl-icon-muted`), `--gl-tab-bar-label-size` (unset `10px`) and `--gl-tab-bar-z-index` (the fixed bar and the floating dock; unset `900`). Measured on GlassKit's own background in all three engines, the inactive 10px labels reach 3.6:1 in the dark theme and 2.1:1 in the light one with `--gl-icon-muted`, and 7.7:1 and 5.3:1 with `--gl-tab-bar-color: var(--gl-icon-strong)`. A fourth token goes beyond the issue: `--gl-tab-bar-hover-color` (unset `--gl-icon-default`). A project that sets a lighter inactive colour sets it too; without it, hovering such a tab darkened it, and inside GlassKit Elements no rule of the page reaches the hover state. ([#17](https://github.com/JUNGHERZ/GlassKit/issues/17))
+- **Tokens for the chosen segmented option:** `--gl-segmented-active-bg`, `--gl-segmented-active-shadow` and `--gl-segmented-active-color`, like the tab bar's active item. On a dark brand background the light surface of the chosen option, and of the drop, left a white label below 4.5:1 (3.76:1 in the issue), and there was no hook. The tokens give the chosen option its surface, shadow and text colour, and the drop of `--droplet` takes the same surface and shadow, so one pair of values serves both looks; the colour also marks the option below a dragged drop. Unset, everything keeps its value. The shadow sits in shadow lists: switch it off with a zero shadow, not `none`. Checked in all three engines on plain markup and inside GlassKit Elements, where the tokens arrive by inheritance. ([#14](https://github.com/JUNGHERZ/GlassKit/issues/14))
+
+### Fixed
+
+- **Under a scaled ancestor the drop lands on the chosen item.** `glasskit-droplet.js` measured the items with `getBoundingClientRect()`, in viewport pixels scaled by every transform on an ancestor, and wrote the result as lengths in the row's own pixels. Under `transform: scale(0.7)` the drop sat at 70 % of the option's position and width, and since a transform changes no layout size, no observer saw it end: an app that zooms in on start, or a popover that opens from `scale(0.96)`, kept the drop beside its option until the value changed, and a drag carried the same offset. Distances on screen are divided by the row's scale now, at rest, while the transform runs and during a drag; nothing needs measuring again when it ends. Measured with the issue's markup in Chromium 153, WebKit 26.6 and Firefox 151: the drop sat at 131.7 / 56.1 px for an option at 188.6 / 80.1 px, before, in the middle of and after a 0.4 s transition to `none`; now it covers the option to 0.01 px at all three moments, on a segmented row and on a floating tab bar, and during a drag its centre sits under the pointer, where it was 41 px off. Without a transform the module writes the values of 1.27.0 to the last digit on every droplet row of the docs pages: a difference within the rounding of the computed size counts as no transform. ([#16](https://github.com/JUNGHERZ/GlassKit/issues/16))
+- **The fixed tab bar centres its items without a home indicator.** It aligned the items to the top and reserved `env(safe-area-inset-bottom, 8px)` below them, but without a home indicator the inset is `0px`, not the fallback: on Android and on the desktop the 47px items sat 9px below the top edge of the 82px bar, with 26px empty below. The bar now uses `align-items: safe center` with `padding-bottom: max(var(--gl-space-xs), env(safe-area-inset-bottom, 0px))`: with a home indicator the items overflow the content box and `safe` keeps them at the top, without one they sit in the middle; a browser without `safe` keeps `flex-start`. Measured at 390px: 18 / 17px above and below the items in Chromium, 17.5 / 16.5px in WebKit, 17 / 16px in Firefox; with a 34px inset emulated in Chromium the items sit exactly where they sat, with a 20px inset in the middle of what is left. ([#17](https://github.com/JUNGHERZ/GlassKit/issues/17))
+- **Seven steps fit a narrow column.** Below 360px only the current step keeps its label, but every part still gave way at once: the label shrank with the circles while the lines kept their 8px, so seven steps cut the current label and pushed the last circle past the column. In the narrow layout the circles keep their size now, the lines take only the room that is left, down to 2px at 4px from their neighbours, and only then does the current label shorten. The issue proposed `flex-shrink: 0` on the current step, which keeps the label whole at every width but lets the row run 4 to 5px past a 300px column; the lines with `flex-basis: 0` make the row fit wherever the circles do. Measured with the issue's markup in Chromium, WebKit and Firefox: in 1.27.0 the row ran 0.6 to 7.8px past columns of 280 to 360px and cut "Stammdaten" and "Kontenrahmen"; now it never runs past, "Stammdaten" (77px) stays whole from a 300px column on and "Kontenrahmen" (88px) from 310px, the circles stay 22px, and in a 640px column every step sits where it sat. ([#15](https://github.com/JUNGHERZ/GlassKit/issues/15))
+- **The success and error accessories keep their white icon on hover.** Only the accent accessory restored its ink on hover; the other two took `--gl-icon-strong`, a dimmer white in the dark theme and dark grey (`rgba(26, 42, 54, 0.7)`) on the green and red capsules in the light theme. Found while moving the accessory to `color`.
+
+### Compatibility
+
+- A rule of your own that set `stroke` on `.glass-tab-bar__icon svg` or `.glass-tab-bar__accessory svg` to recolour the resting icons now reaches every state, the active one too: the states set `color` and the stroke follows it. Set `--gl-tab-bar-color` instead. A rule that set `stroke` for the active state keeps working.
+- In the narrow steps layout the lines reach 2px closer to their circles.
+
+Docs (English and German), README, SKILL.md and `theme-override.css` show the icons and the tokens. With the new tokens unset, docs, showcase and landing pages render pixel-identical to 1.27.0 in Chromium, WebKit and Firefox, except where this release changes them on purpose: the fixed tab bar in 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
 
 ### Added
@@ -1139,6 +1173,8 @@ during development. Version 1.3 is the first public open-source release.
 
 ---
 
+[1.29.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.29.0
+[1.28.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.28.0
 [1.27.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.27.0
 [1.26.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.26.0
 [1.25.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.25.0
@@ -1178,4 +1214,4 @@ during development. Version 1.3 is the first public open-source release.
 [1.3.2]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.2
 [1.3.1]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.1
 [1.3.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.0
-[Unreleased]: https://github.com/JUNGHERZ/GlassKit/compare/v1.25.0...HEAD
+[Unreleased]: https://github.com/JUNGHERZ/GlassKit/compare/v1.29.0...HEAD

package/README.md

@@ -1,9 +1,9 @@
 <p align="center">
-  <img src="https://img.shields.io/badge/version-1.27.0-orange?style=flat-square" alt="Version">
+  <img src="https://img.shields.io/badge/version-1.29.0-orange?style=flat-square" alt="Version">
   <img src="https://img.shields.io/badge/CSS-only-blue?style=flat-square" alt="CSS only">
   <img src="https://img.shields.io/badge/components-34-green?style=flat-square" alt="Components">
   <img src="https://img.shields.io/badge/license-MIT-lightgrey?style=flat-square" alt="License">
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.27.0-f5a623?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.29.0-f5a623?style=flat-square" alt="Changelog"></a>
   <a href="https://www.npmjs.com/package/@jungherz-de/glasskit"><img src="https://img.shields.io/npm/v/@jungherz-de/glasskit?style=flat-square&color=cb3837&label=npm" alt="npm"></a>
   <a href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit/"><img src="https://img.shields.io/badge/CDN-jsDelivr-blue?style=flat-square" alt="jsDelivr"></a>
 </p>
@@ -73,22 +73,22 @@ No download, no build tool – just include and go:
 
 ```html
 <!-- jsDelivr – Minified -->
-<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.29/glasskit.min.css">
 
 <!-- jsDelivr – Unminified (for reading/debugging) -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.27/glasskit.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.29/glasskit.css">
 
 <!-- unpkg – Alternative -->
-<link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.27/glasskit.min.css">
+<link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.29/glasskit.min.css">
 ```
 
-> **Tip:** Replace `@1.27` with `@latest` for the newest version – or pin to a specific version for maximum stability.
+> **Tip:** Replace `@1.29` with `@latest` for the newest version – or pin to a specific version for maximum stability.
 
 The [droplet](#-droplet-a-fluid-selection) takes one optional module next to the stylesheet:
 
 ```html
 <script type="module">
-  import { attachDroplets } from 'https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.27/glasskit-droplet.js';
+  import { attachDroplets } from 'https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.29/glasskit-droplet.js';
   attachDroplets();
 </script>
 ```
@@ -181,7 +181,7 @@ Download the files directly from the [GitHub Release](https://github.com/JUNGHER
 | **Background** | `.glass-bg` | Aurora gradient with light effects |
 | **Nav Bar** | `.glass-nav` | Transparent navigation |
 | **Pill Button** | `.glass-pill` | Round glass icon button (46×46) |
-| **Tab Bar** | `.glass-tab-bar` | Fixed bottom navigation |
+| **Tab Bar** | `.glass-tab-bar` | Fixed bottom navigation; any icon — SVG, icon font, image — follows its states |
 | **Tab Bar – Floating** | `.glass-tab-bar--floating` + `.glass-tab-bar-dock` | Pill-shaped Liquid-Glass tab bar with optional `.glass-tab-bar__accessory` capsule; `--droplet` for a gliding selection |
 | **Accordion** | `.glass-accordion` | Collapsible content sections |
 | **Divider** | `.glass-divider` | Fading separator line |
@@ -200,7 +200,7 @@ Download the files directly from the [GitHub Release](https://github.com/JUNGHER
 | **Skeleton** | `.glass-skeleton` | Shimmer lines while content loads |
 | **Table** | `.glass-table` | Plain `<table>` on glass — hairline rows, tabular numbers |
 | **Prose** | `.glass-prose` | Rendered Markdown / running text with one class |
-| **Segmented** | `.glass-segmented` | Small exclusive choice as one control, with tone dots; scrolls or wraps when crowded; `--droplet` for a gliding selection |
+| **Segmented** | `.glass-segmented` | Small exclusive choice as one control, with tone dots, icons or counts, icons alone with `--icons`; scrolls or wraps when crowded; `--droplet` for a gliding selection |
 | **Steps** | `.glass-steps` | Progress through a short flow; container-query aware |
 | **Sheet** | `.glass-sheet` | Bottom sheet — the mobile sibling of the modal |
 | **Empty state** | `.glass-empty` | Icon, title, text and one action for empty lists |
@@ -249,11 +249,13 @@ Since **1.27.0** the tab bar and the segmented control can make their selection
 </script>
 ```
 
-The stylesheet draws the drop; `glasskit-droplet.js` is an optional module in the package, without dependencies, about 4 KB minified. It follows `.is-active` and `aria-pressed="true"`, which the page keeps setting its own way, and clicks the item a drag ends on, so the page's own click handler makes the choice. Where the script does not run, the row keeps its usual look. `data-surface="solid"` and `"tint"` make the drop opaque, and with `prefers-reduced-motion` it moves without travelling.
+The stylesheet draws the drop; `glasskit-droplet.js` is an optional module in the package, without dependencies, about 4 KB minified. It follows `.is-active` and `aria-pressed="true"`, which the page keeps setting its own way, and clicks the item a drag ends on, so the page's own click handler makes the choice. Where the script does not run, the row keeps its usual look. `data-surface="solid"` and `"tint"` make the drop opaque, and with `prefers-reduced-motion` it moves without travelling. Since 1.28.0 a transform on an ancestor — a zoom on start, a popover that opens from `scale(0.96)` — no longer moves the drop beside its item.
 
 **Already on GlassKit?** This is the upgrade to take: one class per row and one import, the markup stays. In GlassKit Elements it is an attribute: `<glk-tab-bar floating droplet>`, `<glk-segmented droplet>`.
 
-The tab bar's active item can also stand on a capsule of its own, without the drop (since 1.27.0): `--gl-tab-bar-active-bg` and `--gl-tab-bar-active-shadow` draw it, `--gl-tab-bar-spotlight-opacity: 0` turns the spotlight off, `--gl-tab-bar-active-glow: none` the glow on the icon. Where they are set, the drop takes the same surface.
+The tab bar's active item can also stand on a capsule of its own, without the drop (since 1.27.0): `--gl-tab-bar-active-bg` and `--gl-tab-bar-active-shadow` draw it, `--gl-tab-bar-spotlight-opacity: 0` turns the spotlight off, `--gl-tab-bar-active-glow: none` the glow on the icon. Where they are set, the drop takes the same surface. The chosen segmented option has the same hooks since 1.28.0: `--gl-segmented-active-bg`, `--gl-segmented-active-shadow` and `--gl-segmented-active-color`, for the option and its drop alike.
+
+**Icons of any kind (since 1.28.0).** Tab bar, accessory and segmented control colour their icon box, and an SVG strokes in `currentColor`: an icon font such as Material Icons, an `<img>` mask or a custom element in `.glass-tab-bar__icon` or `.glass-segmented__icon` follows every state, the lens of the drop and the drag. `.glass-segmented--icons` makes a row of icons alone, a light / dark / auto switch for instance.
 
 ---
 
@@ -476,6 +478,15 @@ All visual values are controlled via CSS Custom Properties:
 --gl-tab-bar-active-shadow      /* its shadow; unset: none */
 --gl-tab-bar-spotlight-opacity  /* 1; 0 turns the floating bar's spotlight off */
 --gl-tab-bar-active-glow        /* glow on the active icon; none turns it off */
+--gl-tab-bar-color              /* icon and label of the inactive tabs; unset: --gl-icon-muted */
+--gl-tab-bar-hover-color        /* … of a hovered tab; unset: --gl-icon-default */
+--gl-tab-bar-label-size         /* 10px */
+--gl-tab-bar-z-index            /* 900; fixed bar and floating dock */
+--gl-segmented-active-bg        /* chosen option and its drop; unset: --gl-surface-5 */
+--gl-segmented-active-shadow    /* their shadow; unset: --gl-shadow-btn */
+--gl-segmented-active-color     /* label and icon of the chosen option; unset: --gl-color-text-heading */
+--gl-segmented-badge-bg         /* tint of a neutral count over the state scrim; unset: 12 % of the text colour */
+--gl-segmented-badge-color      /* its figures; unset: --gl-color-text */
 --gl-gloss-droplet              /* highlight in the drop of --droplet rows; off with data-surface */
 ```
 
@@ -778,7 +789,7 @@ Prose:
   .glass-prose   (styles the rendered content beneath it)
 
 Segmented:
-  .glass-segmented--full / --scroll / --wrap · __item[aria-pressed] · __item--success / --warning / --error · __dot
+  .glass-segmented--full / --scroll / --wrap / --icons · __item[aria-pressed] · __item--success / --warning / --error · __dot · __icon · __badge
   .glass-segmented--droplet        (gliding selection, with glasskit-droplet.js)
 
 Steps:
@@ -810,6 +821,7 @@ Tab Bar – Floating:
   .glass-tab-bar__accessory
   .glass-tab-bar__accessory--accent / --success / --error
   --gl-tab-bar-active-bg / -shadow · --gl-tab-bar-spotlight-opacity · --gl-tab-bar-active-glow
+  --gl-tab-bar-color / -hover-color · --gl-tab-bar-label-size · --gl-tab-bar-z-index
 
 Right to left:
   dir="rtl" on <html> or a container – the components mirror

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: glasskit-css
-description: GlassKit is a pure CSS glassmorphism component library (v1.27.0) with 34 components, Dark & Light mode, design tokens, and BEM-like naming. Use this reference whenever generating HTML that uses GlassKit classes to ensure correct structure, nesting, modifiers, and token usage.
+description: GlassKit is a pure CSS glassmorphism component library (v1.29.0) with 34 components, Dark & Light mode, design tokens, and BEM-like naming. Use this reference whenever generating HTML that uses GlassKit classes to ensure correct structure, nesting, modifiers, and token usage.
 ---
 
 # GlassKit CSS – AI Component Reference
@@ -10,6 +10,8 @@ description: GlassKit is a pure CSS glassmorphism component library (v1.27.0) wi
 
 > **New in 1.27.0 — recommend the droplet.** `.glass-tab-bar--droplet` and `.glass-segmented--droplet` make 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. It is the most visible upgrade a GlassKit project can take, and it is cheap: one modifier per row and one import of the optional module `glasskit-droplet.js`; the markup stays, and without the script the rows look as before. **When you update a project to 1.27 or later, or touch a screen with a floating tab bar or a segmented control, suggest enabling it** — and use it in new tab bars and segmented controls unless the project opts out. Details in 3.4 (Droplet) and 3.29.
 
+> **New in 1.28.0 — icons of any kind, and tokens instead of overrides.** Tab bar, accessory and segmented control colour their icon box, not the SVG: put a font icon (Material Icons), an `<img>` mask or a custom element straight into `.glass-tab-bar__icon` or `.glass-segmented__icon`, and it follows every state, the lens of the drop and the drag. `--icons` makes an icon-only segmented row (light / dark / auto). The inactive tab colour, the hover colour, the label size and the z-index of the tab bar are tokens, and so are the surface, shadow and text colour of the chosen segmented option. **Where a project restyles tab icons per state, or overrides the tab bar's literals, replace that with the tokens** (3.4, 3.29).
+
 ---
 
 ## 1. Setup & Boilerplate
@@ -422,7 +424,7 @@ Theme Toggle (specialized pill):
 
 ### 3.4 Tab Bar
 
-Fixed bottom navigation with glass background. Requires `glass-bg--has-tab-bar` on the background container.
+Fixed bottom navigation with glass background. Requires `glass-bg--has-tab-bar` on the background container. The items sit in the middle of the bar; with a home indicator (an iPhone with `viewport-fit=cover`) they keep to the top, above it (since 1.28.0).
 
 ```html
 <nav class="glass-tab-bar">
@@ -453,10 +455,30 @@ Fixed bottom navigation with glass background. Requires `glass-bg--has-tab-bar`
 | `.glass-tab-bar` | Container: fixed bottom, glass blur |
 | `.glass-tab-bar__item` | Individual tab |
 | `.glass-tab-bar__item.is-active` | Active tab: icon and label in `--gl-tab-bar-active-color` where set, else `--gl-color-primary-text` (since 1.26.0; both default to the primary); glow and dot in the primary |
-| `.glass-tab-bar__icon` | Icon wrapper |
+| `.glass-tab-bar__icon` | Icon wrapper; carries the state colour (since 1.28.0): an SVG strokes in `currentColor`, a font icon or any other element inherits it |
 | `.glass-tab-bar__badge` | Numeric badge inside icon |
 | `.glass-tab-bar__label` | Text label below icon |
 
+#### Icons and tokens (since 1.28.0)
+
+Every state — inactive, hover, active, under the drop, the drag — sets `color` on `.glass-tab-bar__icon`, and the SVG strokes in `currentColor`. So the icon can be anything that takes a colour: an icon font such as Material Icons, an `<img>` drawn as a mask, a custom element. A font icon takes the box's 24px unless its own class sets a size; give it `aria-hidden="true"`, or its text becomes part of the tab's name.
+
+```html
+<button class="glass-tab-bar__item">
+  <span class="glass-tab-bar__icon"><span class="material-icons" aria-hidden="true">home</span></span>
+  <span class="glass-tab-bar__label">Home</span>
+</button>
+```
+
+| Token | Unset | Effect |
+|---|---|---|
+| `--gl-tab-bar-color` | `--gl-icon-muted` | Icon and label of the inactive tabs; `var(--gl-icon-strong)` reads better on a busy background |
+| `--gl-tab-bar-hover-color` | `--gl-icon-default` | Icon and label of a hovered tab — set it too when `--gl-tab-bar-color` is lighter than `--gl-icon-default`, or hover dims the tab |
+| `--gl-tab-bar-label-size` | `10px` | Label size (Material uses 12px, Apple's HIG about 13px) |
+| `--gl-tab-bar-z-index` | `900` | Stacking of `.glass-tab-bar` and `.glass-tab-bar-dock`, e.g. below a side drawer |
+
+Never copy the state rules onto an icon element of your own, and never override `stroke` on `.glass-tab-bar__icon svg`: since 1.28.0 such a rule reaches every state, the active one too. Set the tokens.
+
 #### Floating variant + Accessory
 
 Pill-shaped, centered, floating bar (iOS 26 Liquid Glass style). Wrap it in `.glass-tab-bar-dock` together with an optional `.glass-tab-bar__accessory` capsule (e.g. search, compose). Use `.glass-bg--has-tab-bar-floating` on the background container instead of `--has-tab-bar`. The active item gets a soft radial Spotlight halo.
@@ -482,8 +504,8 @@ Pill-shaped, centered, floating bar (iOS 26 Liquid Glass style). Wrap it in `.gl
 | `.glass-tab-bar-dock--accessory-left` | Modifier: accessory on the left |
 | `.glass-tab-bar--floating` | Pill shape, max-content width, spotlight active state (`--gl-tab-bar-spotlight-color`, the primary) |
 | `.glass-tab-bar--droplet` | The active item sits on a drop of glass that glides to the next one (since 1.27.0, see below) |
-| `.glass-tab-bar__accessory` | Standalone glass capsule next to the bar |
-| `.glass-tab-bar__accessory--accent` / `--success` / `--error` | Filled colored accessory (white icon) |
+| `.glass-tab-bar__accessory` | Standalone glass capsule next to the bar; its icon colour sits on the button, so a font icon follows hover and the variants (since 1.28.0) |
+| `.glass-tab-bar__accessory--accent` / `--success` / `--error` | Filled colored accessory (white icon, also on hover) |
 | `.glass-bg--has-tab-bar-floating` | Background padding for the floating variant |
 
 #### Droplet (since 1.27.0) — recommended
@@ -506,6 +528,7 @@ Pill-shaped, centered, floating bar (iOS 26 Liquid Glass style). Wrap it in `.gl
 - **Without the script** the bar keeps its spotlight: everything droplet-specific hangs on `data-droplet`, which only the module sets.
 - **Never write the module's state by hand:** `data-droplet`, `data-droplet-dir`, `data-droplet-lift`, `data-droplet-drag`, `--gl-droplet-left/-right/-top/-bottom` and `.is-under-droplet` belong to it.
 - The drop takes the active item's surface where it is set (`--gl-tab-bar-active-bg`, `-shadow`, below), else a light glass; its highlight is `--gl-gloss-droplet`. Solid and tint surfaces make it opaque; `prefers-reduced-motion` makes it jump instead of travel. Spotlight, dot and glow are off on a droplet bar.
+- A transform on an ancestor — an app that zooms in on start, a popover opening from `scale(0.96)` — leaves the drop on its item, at rest, while the transform runs and during a drag (since 1.28.0; before, it landed at the scaled position and stayed there).
 - GlassKit Elements: `<glk-tab-bar floating droplet>` does all of it.
 
 #### Active item surface (since 1.27.0)
@@ -1429,8 +1452,36 @@ More options than fit — seven areas on a phone: without a modifier the row sta
 | `.glass-segmented__item` | One option; `aria-pressed="true"` marks the chosen one, `disabled` dims it |
 | `.glass-segmented__item--success` / `--warning` / `--error` | Tone: sets `--gl-segmented-tone` for the dot |
 | `.glass-segmented__dot` | The dot before the label, in the tone colour |
+| `.glass-segmented__icon` | An icon before the label (since 1.28.0): an SVG strokes in the option's colour, a font icon or any element inherits it; 18px |
+| `.glass-segmented--icons` | Icons alone, square options; each option's name in `aria-label` and `title` (since 1.28.0) |
+| `.glass-segmented__badge` | A count after the label — neutral, or in the option's tone; inside `__icon` at the icon's corner (since 1.29.0) |
 | `.glass-segmented--droplet` | The chosen option sits on a drop of glass that glides to the next one (since 1.27.0) — recommended |
 
+**Icons (since 1.28.0).** `.glass-segmented__icon` inside an option shows an icon before its label, in the option's colour; under the drop it grows like the tone dot. Mark it `aria-hidden="true"`. `--icons` on the row is for options that show their icon alone — a light / dark / auto switch: the options become square, and each carries its name as `aria-label` (and `title`, for the pointer).
+
+```html
+<div class="glass-segmented glass-segmented--icons glass-segmented--droplet" role="group" aria-label="Theme">
+  <button class="glass-segmented__item" aria-pressed="true" aria-label="Light" title="Light">
+    <span class="glass-segmented__icon" aria-hidden="true"><svg viewBox="0 0 24 24"><!-- sun --></svg></span>
+  </button>
+  <button class="glass-segmented__item" aria-pressed="false" aria-label="Dark" title="Dark">
+    <span class="glass-segmented__icon" aria-hidden="true"><span class="material-icons">dark_mode</span></span>
+  </button>
+</div>
+```
+
+**Counts (since 1.29.0).** `.glass-segmented__badge` after an option's label shows how much waits behind it — open invoices, new tickets — where the tone dot only says that something does. A small pill in tabular figures, inline, so a scrolling row and the drop measure the option with it. Neutral without a tone (a tint of the text colour over the state scrim; `--gl-segmented-badge-bg` and `--gl-segmented-badge-color`, both colours), the state tint of `.glass-badge` with one. Inside `.glass-segmented__icon` it sits at the icon's corner, as on the tab bar, and is opaque there — the place for an `--icons` row. Never put the count into the label text ("Tickets (1)"): it can then be neither styled nor announced apart. The number is no name, so give the option an `aria-label` that says it.
+
+```html
+<button class="glass-segmented__item glass-segmented__item--warning" aria-pressed="false" aria-label="Tickets, 1 open">
+  <span class="glass-segmented__dot"></span>Tickets<span class="glass-segmented__badge">1</span>
+</button>
+<!-- in an --icons row -->
+<span class="glass-segmented__icon" aria-hidden="true"><svg viewBox="0 0 24 24">…</svg><span class="glass-segmented__badge">3</span></span>
+```
+
+**Chosen option surface (since 1.28.0).** Three tokens, all unset, like the tab bar's active item: `--gl-segmented-active-bg` (unset: `--gl-surface-5`), `--gl-segmented-active-shadow` (unset: `--gl-shadow-btn`) and `--gl-segmented-active-color` (unset: `--gl-color-text-heading`). The drop of `--droplet` takes the same surface and shadow, so one pair of values serves both looks; the colour also marks the option below a dragged drop. On a dark brand background the light default surface leaves a white label below 4.5:1 — there, set a dark surface or a dark label. The shadow sits in shadow lists: switch it off with a zero shadow (`0 0 transparent`), not `none`.
+
 **Droplet (since 1.27.0).** `.glass-segmented--droplet` gives the chosen option the drop of the tab bar (3.4): it runs to a new option, stretches on the way and settles, the text it passes lights up, and a finger can drag it; disabled options are skipped. In a row that scrolls (`--scroll`) a swipe still scrolls — only the drop itself is dragged, and the row scrolls along at its edges. It follows `aria-pressed`; `attachDroplets()` from `glasskit-droplet.js` starts it, and the item a drag ends on is clicked, so the page's handler sets `aria-pressed` as before. Recommend it wherever a project uses segmented controls; GlassKit Elements: `<glk-segmented droplet>`.
 
 ```html
@@ -1444,7 +1495,7 @@ More options than fit — seven areas on a phone: without a modifier the row sta
 
 ### 3.30 Steps
 
-Progress through a short flow (since 1.15.0): numbered circles joined by hairlines, done ones on the success surface with an SVG check, the current one in primary and marked `aria-current="step"`. The list is a size container: narrower than 360 px only the current step keeps its label; before that, labels shorten with an ellipsis. Keyed to the block's own width — inside a flex row give it a width, size containment leaves it none.
+Progress through a short flow (since 1.15.0): numbered circles joined by hairlines, done ones on the success surface with an SVG check, the current one in primary and marked `aria-current="step"`. The list is a size container: narrower than 360 px only the current step keeps its label; before that, labels shorten with an ellipsis. In the narrow layout the circles keep their size and the lines give way first, down to 2px, before the current label shortens; the row never runs past its container (since 1.28.0 — seven steps keep an 88px label whole from a 310px column on). Never shrink the list's `gap` to make room. Keyed to the block's own width — inside a flex row give it a width, size containment leaves it none.
 
 ```html
 <ol class="glass-steps">
@@ -2069,6 +2120,10 @@ Key points in this composition:
 | Putting `.is-open` on the trigger button instead of `.glass-popover` | The state class belongs on the popover element |
 | Animating the selection of a tab bar or segmented row with your own script | `--droplet` plus `glasskit-droplet.js` (since 1.27.0) |
 | Setting `data-droplet` or `--gl-droplet-*` by hand | Let `attachDroplet()` set them |
+| Copying the tab bar's state rules onto a font icon, or overriding `stroke` on `.glass-tab-bar__icon svg` | Put the icon into `.glass-tab-bar__icon` as it is; set `--gl-tab-bar-color` / `--gl-tab-bar-hover-color` (since 1.28.0) |
+| Overriding the tab label's `font-size` or the bar's `z-index` | `--gl-tab-bar-label-size`, `--gl-tab-bar-z-index` (since 1.28.0) |
+| Restyling the chosen segmented option for a dark brand | `--gl-segmented-active-bg`, `-color`, `-shadow` (since 1.28.0) |
+| A count in a segmented label, "Tickets (1)" | `.glass-segmented__badge` after the label, the count in the option's `aria-label` (since 1.29.0) |
 | Overriding `height` of `.glass-btn`, `.glass-input` etc. for a denser UI | `data-density="compact"` on `<html>`, or set a density token — toggle thumb and label alignment follow the tokens, not a hand-set `height` |
 
 ---
@@ -2102,14 +2157,14 @@ Key points in this composition:
 | Progress | `.glass-progress` | `--sm`, `--lg`, `--success`, `--error` |
 | Modal | `.glass-modal-overlay` | `.is-active` |
 | Toast | `.glass-toast` | `--success`, `--error`, `--warning`, `.is-visible`, `__action`, `__close` |
-| Tab Bar | `.glass-tab-bar` | `.is-active` on items, `--floating`, `--droplet` |
+| Tab Bar | `.glass-tab-bar` | `.is-active` on items, `__icon`, `__label`, `__badge`, `--floating`, `--droplet` |
 | Accordion | `.glass-accordion` | `.is-open` on items |
 | List | `.glass-list` | `--flush`, `--bare`, `__item--interactive`, `__item--center`, `__item--danger`, `__item--accent`, `__leading--lg`, `__subtitle--wrap`, `__value`, `__section-header` |
 | Popover | `.glass-popover` | `--top`, `--start`, `--end`, `.is-open` |
 | Skeleton | `.glass-skeleton` | `__line`, `__line--title` |
 | Table | `.glass-table` | `-wrap`, `__num`, `__muted` |
 | Prose | `.glass-prose` | – |
-| Segmented | `.glass-segmented` | `--full`, `--scroll`, `--wrap`, `--droplet`, `__item`, `__item--success`/`--warning`/`--error`, `__dot`, `[aria-pressed]` |
+| Segmented | `.glass-segmented` | `--full`, `--scroll`, `--wrap`, `--icons`, `--droplet`, `__item`, `__item--success`/`--warning`/`--error`, `__dot`, `__icon`, `__badge`, `[aria-pressed]` |
 | Steps | `.glass-steps` | `__item`, `__item--done`, `__item--current`, `__num`, `__label`, `__line` |
 | Sheet | `.glass-sheet-overlay` + `.glass-sheet` | `.is-active`, `--inline`, `__grip`, `__title`, `__body`, `__actions` |
 | Empty state | `.glass-empty` | `__icon`, `__title`, `__text`, `__action` |

package/glasskit-droplet.js

@@ -52,13 +52,32 @@ export function attachDroplet(row, options = {}) {
   let chosen = null, left = 0, placed = null, liftTimer = 0, lensFrame = 0, edgeFrame = 0;
   let drag = null, eatClick = false, under = null;
 
+  // The row on screen and its scale there. Rects are viewport pixels, scaled
+  // by every transform on an ancestor — an app that zooms in on start, a
+  // popover that opens from scale(0.96) — while the drop's lengths are the
+  // row's own. So distances on screen are divided by the scale: the drop
+  // sits right at rest and while such a transform runs, and nothing needs
+  // measuring again when it ends (before 1.28.0 it stayed beside the item).
+  // The layout size is the computed one under GlassKit's border-box,
+  // unscaled and nearly unrounded, else the offset size, rounded to whole
+  // pixels. A difference within that rounding is no transform: the rects
+  // are then taken as they are, as before.
+  const frame = () => {
+    const n = row.getBoundingClientRect(), cs = getComputedStyle(row);
+    const exact = cs.boxSizing === 'border-box', tolerance = exact ? 0.05 : 0.5;
+    const w = exact ? parseFloat(cs.width) : row.offsetWidth;
+    const h = exact ? parseFloat(cs.height) : row.offsetHeight;
+    const scale = (onScreen, own) => onScreen > 0 && own > 0 && Math.abs(onScreen - own) > tolerance ? onScreen / own : 1;
+    return { n, sx: scale(n.width, w), sy: scale(n.height, h) };
+  };
   // 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 boxOf = (it, f = frame()) => {
+    const r = it.getBoundingClientRect();
+    const l = (r.left - f.n.left) / f.sx - row.clientLeft + row.scrollLeft;
+    const t = (r.top - f.n.top) / f.sy - row.clientTop + row.scrollTop;
+    const height = r.height / f.sy;
+    return { left: l, width: r.width / f.sx, top: t, bottom: row.clientHeight - t - height };
   };
   const put = (l, width, b) => {
     left = l;
@@ -69,9 +88,10 @@ export function attachDroplet(row, options = {}) {
   // 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()) {
+    const f = centre == null ? null : frame();
+    if (f) for (const it of items()) {
       if (!usable(it)) continue;
-      const b = boxOf(it), d = Math.abs(b.left + b.width / 2 - centre);
+      const b = boxOf(it, f), d = Math.abs(b.left + b.width / 2 - centre);
       if (d < best) { best = d; below = it; }
     }
     if (below !== under) {
@@ -136,9 +156,9 @@ export function attachDroplet(row, options = {}) {
   // 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 f = frame();
+    const x = (clientX - f.n.left) / f.sx - row.clientLeft + row.scrollLeft;
+    const boxes = items().map(it => boxOf(it, f));
     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));