@jungherz-de/glasskit 1.26.0 → 1.28.0

package/CHANGELOG.md

@@ -7,6 +7,41 @@ GlassKit uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [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
+
+- **Droplet: a fluid selection for the tab bar and the segmented control.** `.glass-tab-bar--droplet` and `.glass-segmented--droplet` set the chosen item on a drop of glass that floats a little above the row, as in iOS 26. On a change the drop runs to the new item like water on a pane: the leading edge goes first, the trailing one follows and overshoots, the drop 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 it is chosen, a disabled one skipped. In a segmented row that scrolls (`--scroll`) a swipe still scrolls: only the drop itself is dragged, and the row scrolls along at its edges. The stylesheet draws the drop, the row's `::before`. The motion comes from the new optional module `glasskit-droplet.js`, without dependencies and about 4 KB minified: `attachDroplets(root)` attaches every `--droplet` row below a root, `attachDroplet(row)` one, and returns `update()` and `destroy()`. 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 handler makes the choice. Without the module a row keeps its usual look, the tab bar its spotlight. The drop takes the active item's surface where a project set one (below); its highlight is the new `--gl-gloss-droplet`; `data-surface="solid"` and `"tint"` make it opaque; with `prefers-reduced-motion` it jumps. Measured in Chromium, WebKit and Firefox on both showcases: at rest and after a tap the drop covers the chosen item to 0.1 px; a drag picks the item below it and skips a disabled one; a drag held at the edge of a scrolling row scrolls it and picks an option beyond the first view; a swipe that starts beside the drop leaves it; and while the row scrolls the drop stays on its option. Docs, README, SKILL.md and both showcases (switch *Selection*) have it. ([#13](https://github.com/JUNGHERZ/GlassKit/issues/13))
+- **The active tab can stand on a capsule of its own.** `--gl-tab-bar-active-bg` and `--gl-tab-bar-active-shadow` draw a surface behind the active item, like the selected tab of iOS 26; `--gl-tab-bar-spotlight-opacity: 0` turns the floating bar's spotlight off and `--gl-tab-bar-active-glow: none` the glow on the icon, which reads as a blur on a light capsule. All four are unset. A project that needed the capsule had to put a sheet of its own into `<glk-tab-item>` through `hostStyles`. The capsule is rounded like the item: a pill on the floating bar, 12px on the fixed one, whose items now carry that radius, invisible without a surface. Checked in all three engines for plain markup and GlassKit Elements, fixed and floating, unset and set. ([#13](https://github.com/JUNGHERZ/GlassKit/issues/13))
+
+With the modifiers and tokens unset, docs, showcase and landing pages of GlassKit render pixel-identical to 1.26.0 in Chromium, WebKit and Firefox.
+
+---
+
 ## [1.26.0] – 2026-10-18
 
 ### Added
@@ -1128,6 +1163,8 @@ during development. Version 1.3 is the first public open-source release.
 
 ---
 
+[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
 [1.24.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.24.0
@@ -1166,4 +1203,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.28.0...HEAD

package/README.md

@@ -1,9 +1,9 @@
 <p align="center">
-  <img src="https://img.shields.io/badge/version-1.26.0-orange?style=flat-square" alt="Version">
+  <img src="https://img.shields.io/badge/version-1.28.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.26.0-f5a623?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.28.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>
@@ -56,6 +56,7 @@ GlassKit is the **CSS foundation** of a three-layer family: [GlassKit Elements](
 - 📱 **Mobile-first** – optimized for touch devices and `safe-area-inset`
 - 🔌 **Framework-agnostic** – works with React, Vue, Svelte, plain HTML, or any other stack
 - 🧩 **Shadow DOM ready** – Constructable Stylesheet for Web Components included
+- 💧 **Fluid selection** – an optional drop of glass that glides between the items of a tab bar or a segmented control (since 1.27.0)
 - 🪶 **Lightweight** – 51 KB raw / 39 KB minified / 6.5 KB gzipped, no external dependencies
 - 🎯 **BEM-like naming convention** – `glass-*` prefix, no conflicts with existing CSS
 - 🤖 **AI-ready** – ships with [`SKILL.md`](SKILL.md), a structured reference for LLMs & AI copilots
@@ -72,16 +73,25 @@ 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.26/glasskit.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.28/glasskit.min.css">
 
 <!-- jsDelivr – Unminified (for reading/debugging) -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.26/glasskit.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.28/glasskit.css">
 
 <!-- unpkg – Alternative -->
-<link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.26/glasskit.min.css">
+<link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.28/glasskit.min.css">
 ```
 
-> **Tip:** Replace `@1.26` with `@latest` for the newest version – or pin to a specific version for maximum stability.
+> **Tip:** Replace `@1.28` 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.28/glasskit-droplet.js';
+  attachDroplets();
+</script>
+```
 
 ### npm / yarn / pnpm
 
@@ -171,8 +181,8 @@ 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 – Floating** | `.glass-tab-bar--floating` + `.glass-tab-bar-dock` | Pill-shaped Liquid-Glass tab bar with optional `.glass-tab-bar__accessory` capsule |
+| **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 |
 
@@ -190,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 |
+| **Segmented** | `.glass-segmented` | Small exclusive choice as one control, with tone dots or icons, 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 |
@@ -225,6 +235,30 @@ Download the files directly from the [GitHub Release](https://github.com/JUNGHER
 
 ---
 
+## 💧 Droplet: a fluid selection
+
+Since **1.27.0** the tab bar and the segmented control can make their selection fluid, as iOS 26 does. Add `--droplet` and 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. In a segmented row that scrolls, a swipe still scrolls: only the drop itself is dragged, and the row scrolls along at its edges.
+
+```html
+<nav class="glass-tab-bar glass-tab-bar--floating glass-tab-bar--droplet">…</nav>
+<div class="glass-segmented glass-segmented--droplet" role="group">…</div>
+
+<script type="module">
+  import { attachDroplets } from '@jungherz-de/glasskit/glasskit-droplet.js';
+  attachDroplets();   // every --droplet row in the page; attachDroplet(row) for one
+</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. 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 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.
+
+---
+
 ## 🌗 Theming
 
 ### Dark / Light Mode
@@ -440,6 +474,18 @@ All visual values are controlled via CSS Custom Properties:
 --gl-textarea-field-sizing      /* fixed; content lets text areas grow with their text */
 --gl-input-picker-icon          /* none hides Chromium's picker button of date and time fields */
 --gl-tab-bar-active-color       /* icon and label of the active tab; unset: --gl-color-primary-text */
+--gl-tab-bar-active-bg          /* capsule behind the active tab; unset: none (also the drop's surface) */
+--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-gloss-droplet              /* highlight in the drop of --droplet rows; off with data-surface */
 ```
 
 The full token reference can be found in the [Documentation](docs.html).
@@ -574,6 +620,7 @@ glasskit/
 ├── glasskit.css            # Core library (all components + tokens)
 ├── glasskit.min.css        # Minified version (auto-generated on release)
 ├── glasskit-styles.js      # Constructable Stylesheet for Shadow DOM (auto-generated)
+├── glasskit-droplet.js     # Optional module: the motion of the --droplet rows
 ├── theme-override.css      # Template for custom themes
 ├── build-styles-js.mjs     # Build script for glasskit-styles.js
 ├── package.json            # npm package definition
@@ -740,7 +787,8 @@ 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
+  .glass-segmented--droplet        (gliding selection, with glasskit-droplet.js)
 
 Steps:
   .glass-steps__item--done / --current · __num · __label · __line
@@ -767,8 +815,11 @@ Background Modifiers:
 Tab Bar – Floating:
   .glass-tab-bar-dock
   .glass-tab-bar--floating
+  .glass-tab-bar--droplet          (gliding selection, with glasskit-droplet.js)
   .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.26.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.28.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
@@ -8,6 +8,10 @@ description: GlassKit is a pure CSS glassmorphism component library (v1.26.0) wi
 > **Purpose:** This document is an AI-optimized reference for generating correct GlassKit HTML markup.
 > It replaces the need to parse `docs.html` and provides copy-paste-ready structures, rules, and composition patterns.
 
+> **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
@@ -23,6 +27,12 @@ description: GlassKit is a pure CSS glassmorphism component library (v1.26.0) wi
 
 <!-- Optional: Load custom theme after base library -->
 <link rel="stylesheet" href="theme-override.css">
+
+<!-- Optional (since 1.27.0): the motion of the --droplet rows -->
+<script type="module">
+  import { attachDroplets } from 'https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@latest/glasskit-droplet.js';
+  attachDroplets();
+</script>
 ```
 
 ### Minimal Template
@@ -244,6 +254,7 @@ All four are `0px` under `data-surface="solid"`.
 | `--gl-gloss-modal` | `linear-gradient(90deg, …)` | The same on `.glass-modal` |
 | `--gl-gloss-progress` | `linear-gradient(to bottom, …)` | Sheen on the progress fill |
 | `--gl-range-thumb-border` | `2px solid rgba(255,255,255,0.5)` | Rim of the range thumb |
+| `--gl-gloss-droplet` | `radial-gradient(…), radial-gradient(…)` | Highlight and caustic glow in the drop of `--droplet` rows (since 1.27.0) |
 
 The same in both themes; `data-surface="solid"` sets them to `none` (the thumb's rim to `2px solid transparent`). They were literals before 1.24.0.
 
@@ -413,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">
@@ -444,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.
@@ -472,10 +503,47 @@ Pill-shaped, centered, floating bar (iOS 26 Liquid Glass style). Wrap it in `.gl
 | `.glass-tab-bar-dock` | Wrapper: fixed bottom-center, holds bar + accessory |
 | `.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__accessory` | Standalone glass capsule next to the bar |
-| `.glass-tab-bar__accessory--accent` / `--success` / `--error` | Filled colored accessory (white icon) |
+| `.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; 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
+
+`.glass-tab-bar--droplet` makes the selection fluid. The active item sits on a drop of glass that floats a little above the bar. On a change the drop runs to the new tab like water on a pane: the leading edge goes first, the trailing one follows, the drop runs flatter on the way and settles with a small wobble, and the icons it passes grow as under a lens. A finger can drag it along the bar; let go, and the tab below it is chosen. Recommend it for every floating tab bar — existing projects included, it is the upgrade of this release — and use it in new ones unless the project opts out.
+
+```html
+<nav class="glass-tab-bar glass-tab-bar--floating glass-tab-bar--droplet">
+  <button class="glass-tab-bar__item is-active">…</button>
+  <!-- more items -->
+</nav>
+
+<script type="module">
+  import { attachDroplets } from '@jungherz-de/glasskit/glasskit-droplet.js';
+  attachDroplets();   // every --droplet row in the page (or a shadow root: attachDroplets(root))
+</script>
+```
+
+- **The stylesheet draws the drop, the optional module moves it.** `glasskit-droplet.js` (no dependencies, ~4 KB minified) follows `.is-active`, which the page keeps setting its own way, and clicks the tab a drag ends on — the page's own click handler makes the choice. `attachDroplet(row)` attaches one row and returns `{ update(), destroy() }`; attaching twice returns the same handle.
+- **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)
+
+Tokens for a capsule behind the active item, like the selected tab of iOS 26 — all unset, so nothing changes until set:
+
+| Token | Unset | Effect |
+|---|---|---|
+| `--gl-tab-bar-active-bg` | `none` | Background of the active item (also the drop's surface) |
+| `--gl-tab-bar-active-shadow` | `none` | Its shadow (also the drop's at rest) |
+| `--gl-tab-bar-spotlight-opacity` | `1` | `0` turns the floating bar's spotlight off |
+| `--gl-tab-bar-active-glow` | the primary drop-shadow | `none` turns the glow on the active icon off, which reads as a blur on a light capsule |
+
+A nearly opaque white capsule (`rgba(255, 255, 255, 0.9)`) lets a dark brand primary stay the active colour in the dark theme. The capsule is the item's background, rounded like the item: a pill on the floating bar, 12px on the fixed one.
+
 ---
 
 ### 3.5 Title
@@ -1384,12 +1452,39 @@ 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--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>
+```
+
+**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
+<div class="glass-segmented glass-segmented--full glass-segmented--droplet" role="group" aria-label="Status">
+  <button class="glass-segmented__item" aria-pressed="true">Green</button>
+  <button class="glass-segmented__item" aria-pressed="false">Yellow</button>
+</div>
+```
 
 ---
 
 ### 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">
@@ -1623,6 +1718,7 @@ Flexbox row with gap.
 | `.is-active` | `.glass-modal-overlay`, `.glass-tab-bar__item` | Element is active/visible |
 | `.is-open` | `.glass-accordion__item`, `.glass-popover` | Accordion item expanded / popover visible |
 | `.is-visible` | `.glass-toast` | Toast is visible |
+| `.is-under-droplet` | `.glass-tab-bar__item`, `.glass-segmented__item` | The item below the drop of a `--droplet` row; set by `glasskit-droplet.js` only (since 1.27.0) |
 | `:checked` | Toggle, Checkbox, Radio (on the input) | Native checked state |
 | `:focus` | Input, Textarea, Select, Range | Focus ring |
 | `:disabled` | Input, Select, Textarea, Range (0.4); Button, Pill, Tab Bar Accessory, Modal action, list row, calendar arrow, Toggle, Checkbox, Radio (0.45) | Dimmed, not-allowed cursor, no hover (most since 1.21.2) |
@@ -1994,6 +2090,7 @@ Key points in this composition:
 8. **List dividers are automatic** – Never add a `<hr>` or divider element between `.glass-list__item`s. The divider is rendered via `::after` and respects `:has(.glass-list__leading)` for the inset.
 9. **Popover toggle naming** – Never name your popover toggle JS function `togglePopover`. It collides with the native `HTMLElement.togglePopover()` method. Use a prefix like `gkTogglePopover`.
 10. **`data-density`** – Like `data-theme`, on `<html>`: `compact` or absent. For a denser UI set the attribute or a density token, never `height` on the components.
+11. **Droplet needs its module** – `--droplet` on a tab bar or segmented row does nothing until `glasskit-droplet.js` attaches (`attachDroplets()`); recommend both together, and leave the `data-droplet*` attributes and `--gl-droplet-*` properties to the module.
 
 ### ❌ Common Mistakes
 
@@ -2010,6 +2107,11 @@ Key points in this composition:
 | Putting `glass-list` inside `glass-popover` without `--bare` | Add `.glass-list--bare` to strip the double glass surface |
 | JS function named `togglePopover()` | Rename to `gkTogglePopover()` or similar to avoid native API clash |
 | 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) |
 | 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` |
 
 ---
@@ -2043,14 +2145,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 |
+| 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`, `__item`, `__item--success`/`--warning`/`--error`, `__dot`, `[aria-pressed]` |
+| Segmented | `.glass-segmented` | `--full`, `--scroll`, `--wrap`, `--icons`, `--droplet`, `__item`, `__item--success`/`--warning`/`--error`, `__dot`, `__icon`, `[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` |