@jungherz-de/glasskit 1.30.0 → 1.32.0

package/CHANGELOG.md

@@ -7,6 +7,132 @@ GlassKit uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [1.32.0] – 2026-10-27
+
+### Added
+
+- **The tab bar beyond the bottom edge: a sidebar, an icon rail, a bar docked at a side, a top bar.** `.glass-tab-bar` was a row fixed to the bottom of the viewport. A sidebar on the desktop, a rail of icons in a narrower window or a bar in the header meant a second navigation in the project's own markup, kept in step with the bar by hand. On phones whose system moves its own controls to a side, an unfolded iPhone Duo for one, the thumb rests at that edge and a bottom bar is out of reach. The items stay the same in every layout (icon, label, badge, active state, drop), and modifiers change only the bar:
+  - `--vertical` makes it a column for a sidebar. The page's layout places it, and it is as high as its container. Each item is a row: the icon before the label at body size, the badge at the row's end. The active row stands on a surface of its own, `--gl-tab-bar-active-bg`, unset `--gl-surface-3`.
+  - With `--start` or `--end` the column is fixed to that edge of the viewport instead, at full height and clear of the edge's safe area. Start and end follow the writing direction.
+  - `--rail` shows the icons alone, `--gl-tab-bar-rail-width` wide (72px). The label is hidden from view but stays the item's name, and the badge goes back to the icon's corner.
+  - `--top` puts a horizontal bar into the flow, for a sticky header: its border is at the bottom, there is no room for the home indicator, and from 640px the icon sits beside the label.
+  - `.glass-tab-bar-dock--vertical` stands the floating bar upright at the end edge, or the start edge with `--start`. The accessory goes below the items, or above them with `--accessory-left`.
+
+  Every bar's items now show a focus ring on keyboard focus, which they lacked, including the active item under the drop. An item may be a link, `a.glass-tab-bar__item`, so a view can open in a new tab. A long label in a sidebar row ends before the badge, `--gl-tab-bar-badge-room` (32px) from the row's end, and in the top bar the label keeps clear of the badge at the icon's corner. Without `:dir()`, the upright dock finds its edge through logical properties; only the safe area of that side needs `:dir()`. Measured in Chromium 153, WebKit 26.6 and Firefox 151 through GlassKit Elements:
+  - A sidebar fills its grid row, and a rail is 72px wide with 48px items.
+  - A rail docked at the end runs the full height at the right edge, or at the left edge right to left. The upright dock at the start sits at the left edge, or at the right edge right to left.
+  - The top bar keeps its border at the bottom and puts the icon beside the label at 1100px.
+
+  ([GlassKit Elements #25](https://github.com/JUNGHERZ/GlassKit-Elements/issues/25))
+- **The drop's motion is tokens, and it runs along y in a column.** Durations and curves were literals in the stylesheet and in `glasskit-droplet.js`. A product that keeps its UI motion within about 240ms ease-out could not shorten the one motion that springs on for 850ms. In a column the drop jumped, because the script measured only `left` and `right` and dragged only along x. The motion now reads tokens, unset today's values, in the stylesheet and the script alike:
+
+  | Token | Moves | Unset |
+  |---|---|---|
+  | `--gl-droplet-duration`, `--gl-droplet-easing` | the leading edge | 0.3s, `cubic-bezier(.3, 1.2, .5, 1)` |
+  | `--gl-droplet-trail-duration`, `-trail-delay`, `-trail-easing` | the trailing edge | 0.5s, 40ms, `cubic-bezier(.5, 1.5, .45, .92)` |
+  | `--gl-droplet-lift` | the squash while travelling | 0.86 (1 squashes nothing) |
+  | `--gl-droplet-lift-duration` | how long the squash holds | 280ms |
+  | `--gl-droplet-settle-duration`, `-settle-easing` | the spring back | 0.55s, `cubic-bezier(.34, 1.8, .5, 1)` |
+  | `--gl-droplet-lens-duration`, `-lens-easing` | the item under the drop | 0.4s, `cubic-bezier(.34, 1.6, .5, 1)` |
+
+  The script follows the drop for as long as the tokens say: the trail's delay and duration, or the leading edge's if that is longer, plus 80ms, which is 620ms as before. The issue proposed waiting for the last `transitionend`. A duration of 0 ends no transition, so the tokens are the safer clock.
+
+  In a column the script reads the axis from `aria-orientation="vertical"` or the row's flex direction. It sets `data-droplet-axis="y"` and the directions `down` and `up`, and the drop runs along `top` and `bottom` on the same tokens. Its centre picks the item under the lens, a drag follows the pointer along y and scrolls at the top and bottom edges, and the row hands sideways swipes to the page (`touch-action: pan-x`). A drop in a horizontal bar at the top of a page, static or floating, worked before and is kept in the docs.
+
+  Measured with the issue's journey in all three engines, from a tap to the last frame in which a value changed:
+  - Unset, the drop moves as in 1.31.0. In a top bar the leading edge settles after 303 to 316ms, the trailing edge after 551 to 560ms and the spring after 842 to 847ms. A sidebar and a plain column run the same journey along y, with `bottom` at 297 to 308ms, `top` at 540 to 553ms and the spring at 841 to 851ms.
+  - With the issue's 240ms ease-out and one line more, `--gl-droplet-lift-duration: 0ms`, every edge stops after 242 to 254ms in the top bar, the sidebar and the column alike, and the shadow settles within 40ms. Without that line, the lift's deeper shadow still fades back until about 600ms.
+
+  ([#23](https://github.com/JUNGHERZ/GlassKit/issues/23))
+- **A fill of its own for white text on the accent: `--gl-btn-primary-bg` and `--gl-color-primary-fill`.** White text on the primary button, the chosen day of `.glass-calendar` and `.glass-date-strip` and the current step's number reads 2.03 to 3.77:1 on the default orange. The same token also draws focus rings, borders and the accent as text, so it could not be darkened for the fill alone. `--gl-btn-primary-bg` replaces the whole background of `.glass-btn--primary`, with today's gradient as the fallback, as the toggle and the radio already allow. `--gl-color-primary-fill` fills the chosen days and the current step, unset `--gl-color-primary`.
+
+  With `color-mix(in srgb, var(--gl-color-primary) 75%, #000)` as the fill in the light theme and 65% in the dark one, measured in all three engines, white reads:
+  - 4.53:1 on the chosen days and the current step
+  - 4.53 to 4.99:1 (light) and 4.53 to 5.82:1 (dark) on a button gradient from these mixes
+
+  The docs show the other way as well, a dark ink: the 17% ink, and as an opt-in `contrast-color()` behind `@supports`, which resolves to black on the default orange in Chromium 153, WebKit 26.6 and Firefox 151. That gives 7.82 / 6.67 / 5.56:1 (light) and 10.36 / 7.06 / 5.85:1 (dark) on the three stops of the gradient. ([#24](https://github.com/JUNGHERZ/GlassKit/issues/24))
+- **`.glass-tooltip`**: a short name or hint for a control on hover and focus, such as an icon-only button, a rail item or a row action. It is small text on the popover's glass with its edge light, tinted far enough to read over anything: 6.31:1 or more in both themes, white under a dark tooltip included, in all three engines. It is at most `--gl-tooltip-max-width` (240px) wide. `--gl-tooltip-bg` and `--gl-tooltip-color` recolour it. With the `popover` attribute it sits in the top layer and fades in and out, without fading under `prefers-reduced-motion`. GlassKit Elements' `<glk-tooltip>` places it, shows and hides it and names the control. ([GlassKit Elements #29](https://github.com/JUNGHERZ/GlassKit-Elements/issues/29))
+- **`.glass-menu`**: a list of actions behind a button, on the popover's glass with the card's corners, the focused item rounded concentrically within them, and in the top layer like the tooltip.
+  - Items are buttons with `role="menuitem"`, or `menuitemcheckbox` and `menuitemradio`, whose `aria-checked` (or `.is-checked`) shows the check mark.
+  - Each item can have an icon before its label and a hint such as a shortcut at its end.
+  - `--danger` takes the error colour for destructive actions. `aria-disabled="true"` leaves an item announced but inert.
+  - `__separator` and `__group-label` divide the list.
+
+  The keyboard of the WAI-ARIA menu button is GlassKit Elements' `<glk-menu>`. ([GlassKit Elements #30](https://github.com/JUNGHERZ/GlassKit-Elements/issues/30))
+- **`.glass-tree`**: levels that open and close, such as the structure of an app or menus with submenus. Each item is a row: a twisty that turns when the item opens (mirrored right to left), an icon, the label, and something at the end. Rows are indented by `--gl-tree-indent` (20px) per level, read from `--gl-tree-level`, at least `--gl-tree-row-height` (36px) high, with the children in a `__group` below. The states are:
+  - `.is-selected`, on raised glass like the active row of a sidebar, and `.is-expanded`
+  - `.is-leaf`, which has no twisty
+  - `.is-loading`, whose twisty becomes a small spinner while children load
+  - `.is-error`, whose twisty becomes a "!" in the error colour when they could not load
+  - `.is-disabled`
+
+  In plain markup the focused `[role="treeitem"]` shows its focus on its row instead of the browser's outline around it and its children. GlassKit Elements' `<glk-tree>` brings the roles and the keyboard of the WAI-ARIA tree view. ([GlassKit Elements #26](https://github.com/JUNGHERZ/GlassKit-Elements/issues/26))
+- **`.glass-breadcrumbs`**: the path through nested levels, as a `<nav>` around an `<ol>`.
+  - Crumbs are links or buttons. The current level is plain text with `aria-current="page"`.
+  - The separators are drawn by CSS, so assistive technology does not read them, and they mirror right to left.
+  - A crumb longer than `--gl-breadcrumbs-crumb-width` (200px) ends in an ellipsis.
+  - `__overflow` stands for the middle levels where the path does not fit. Its item, `__item--overflow`, keeps its width where the path still does not fit.
+  - `.is-drop-target` and `.is-drop-refused` show a crumb under a dragged item.
+
+  ([GlassKit Elements #27](https://github.com/JUNGHERZ/GlassKit-Elements/issues/27))
+- **The states of a drag that reorders a list or a tree.**
+  - The dragged item stays in place, faded (`.is-sort-source`), while a raised copy, `.glass-sort__ghost`, follows the pointer in the top layer.
+  - A line shows where the item lands before or after another (`.is-sort-before`, `.is-sort-after`), indented to the level it lands on.
+  - An item that takes it inside lights up (`.is-sort-inside`), and one that refuses it shows the error colour (`.is-sort-refused`).
+  - `.glass-sort__handle` holds a drag handle that starts a drag at once, even by touch.
+
+  `--gl-sort-duration` (180ms) and `--gl-sort-easing` (ease-out) time the glide of GlassKit Elements' sortable lists and trees. ([GlassKit Elements #28](https://github.com/JUNGHERZ/GlassKit-Elements/issues/28))
+- **`.is-flash` on a tree row or a list item**: a 1.2s flash for an item that changed elsewhere, on another device or by an undo, so the eye finds it among the others. `--gl-flash-color` tints it, unset 30% of the primary, and there is no flash under `prefers-reduced-motion`. GlassKit Elements' `highlight()` sets it. ([GlassKit Elements #26](https://github.com/JUNGHERZ/GlassKit-Elements/issues/26))
+- **More for `.glass-table`: sorting, a sticky header, row actions, an empty state, cards on narrow screens.**
+  - A header cell can hold a `__sort` button, whose arrow follows `aria-sort` on the `th`.
+  - A sticky header with sideways scrolling did not combine before: a wrap with `overflow-x: auto` scrolls on both axes, so a sticky header stuck to the wrap, which never scrolled vertically. `.glass-table-wrap--sticky` now makes the wrap the scroller in both directions, at most `--gl-table-max-height` (60vh) high, and `--sticky` keeps the header cells at its top on `--gl-table-header-bg`, with the line below them as an inset shadow, which a collapsed border would leave behind. Of the two ways the issue offered, this is the first; the second would keep the header in step with the body's `scrollLeft` while the page scrolls.
+  - `__actions` cells stay at the row's end while the table scrolls sideways, on a surface of their own once it does (`--scrolls`).
+  - `.glass-table-frame` shades an edge where more columns wait, and `__empty` holds an empty state.
+  - `--list` makes each row a card, with the column's name before each value. The names come from `data-label` and are shown as generated content without alternative text, so a screen reader, which still has the hidden header, does not hear a column twice.
+  - `--gl-table-cell-padding` and `--gl-table-header-padding` set the room in the cells.
+
+  GlassKit Elements' `<glk-table>` brings it all to a native table. ([GlassKit Elements #31](https://github.com/JUNGHERZ/GlassKit-Elements/issues/31))
+- **`.glass-popover` in the top layer.** With the `popover` attribute, the panel is shown with `showPopover()` and placed by script at fixed coordinates. A box with `overflow: hidden` around it no longer cuts it off, and closed it takes no room, where before it still widened the page by its box. The fade keeps it in the top layer until it ends, and a popover without the attribute works as before. GlassKit Elements' `<glk-popover>` does this, flipped and shifted at the viewport's edges. ([GlassKit Elements #29](https://github.com/JUNGHERZ/GlassKit-Elements/issues/29))
+
+### Changed
+
+- **The radio's dot follows the ink on the primary.** `.glass-radio__dot` was white unless `--gl-radio-dot-color` was set. With a dark ink in `--gl-color-on-primary`, the checkbox tick turned dark and the radio dot stayed white on the same orange. It now falls back to `--gl-color-on-primary`, and white only after that. ([#24](https://github.com/JUNGHERZ/GlassKit/issues/24))
+- **The weekday on the chosen day of `.glass-date-strip` is as strong as the number.** At `opacity: .75` it stayed at 3.28:1 even on the fill above, where the number reaches 4.53:1, and now it reaches 4.53:1 as well. On the default orange it reads a little brighter. ([#24](https://github.com/JUNGHERZ/GlassKit/issues/24))
+- **An interactive list row shows a ring on keyboard focus**, inside the row, since the list clips what lies outside it. The tint alone was too faint to find the focus. ([GlassKit Elements #28](https://github.com/JUNGHERZ/GlassKit-Elements/issues/28))
+
+### Compatibility
+
+- Nothing changes for a project that sets none of the new tokens or classes, apart from three things:
+  - Keyboard focus is visible on tab bar items and on interactive list rows.
+  - The weekday on a chosen date strip day is fully opaque.
+  - The radio dot is dark where a project has set a dark `--gl-color-on-primary`, which is the point. `--gl-radio-dot-color: #fff` keeps it white.
+- Products that copy GlassKit's tokens, such as the no-JS mirror of GlassKit Web, have nothing to update: no existing token changed its value.
+
+Docs (English and German), README, SKILL.md and `theme-override.css` describe the new components, the tab bar's layouts, the drop's tokens and axis, the fill tokens and the dark ink. The showcases show the menu, the tooltip, the breadcrumbs, the tree and a sidebar. With the new stylesheet and script, the existing docs, showcase and landing pages render pixel-identical to 1.31.0, apart from the weekday on the chosen date strip day: in WebKit and Firefox on whole pages, in Chromium section by section, where full-page captures differ by rasterisation.
+
+---
+
+## [1.31.0] – 2026-10-25
+
+### Added
+
+- **Hooks of the button's own: `--gl-btn-radius`.** `.glass-btn` took its corners from `--gl-radius-btn`, which `.glass-list`, `.glass-status`, `.glass-toast`, `.glass-accordion__item` and `.glass-segmented` share, so a project that wanted pill-shaped buttons turned lists, toasts and the segmented control into capsules as well; the height had a hook of its own, the radius none. `--gl-btn-radius` rounds the buttons alone, unset `--gl-radius-btn`; `--sm` reads `--gl-btn-radius-sm`, then `--gl-btn-radius`, and keeps its 12px while neither is set. The issue proposed the small size falling back to `--gl-radius-sm` directly; through `--gl-btn-radius` one value shapes every size, which an app builder that lets each app choose the shape of its buttons needs. Measured in Chromium 153, WebKit 26.6 and Firefox 151 with the issue's page: with `--gl-btn-radius: 9999px` on `:root` the buttons are round, while the list, the segmented control, the status card, the toast and the accordion item stay at 16px; `--gl-btn-radius-sm: 4px` changes the small buttons alone. ([#20](https://github.com/JUNGHERZ/GlassKit/issues/20))
+- **Room beside the label for every button: `--gl-btn-padding-x`.** Only `--auto` had a horizontal padding, 24px; every other button kept the browser's, 6px in Chromium and WebKit and 4px in Firefox. A small button whose width came from its text — in a row of actions, in an empty state, a GlassKit Elements `<glk-button size="sm">` in a flex row — touched the text with its edges, pill-shaped ones even more visibly. Every button now has `padding-inline: var(--gl-btn-padding-x, 24px)`, the padding of `--auto`, and `--sm` reads `--gl-btn-padding-x-sm` first. The vertical padding stays as it was, so a full-width button keeps its label where it was and an `--auto` button its width to the tenth of a pixel. The issue proposed 0 as the default with values of their own for `--sm` and `--auto`; one value for every size keeps `--sm --auto` buttons — the image picker's, the empty state's — as they were, and a small button in a row now looks like one of them. Measured with the issue's page: the text of the small button starts 25px from its edge, before 7px (Firefox 5px). ([#22](https://github.com/JUNGHERZ/GlassKit/issues/22))
+- **A colour of the count's own in the segmented control: `.glass-segmented__badge--primary`, `--success`, `--warning`, `--error`**, and tokens for its size and hairline. The count could be coloured only through the option's tone, which also puts the dot before the label, or through its three colour tokens; its height (16px), its font size (11px) and the missing hairline were fixed. So a red count of new calls on an "Open" option without a dot, or a count as large as a `.glass-badge`, could not be had. The four classes give the count the look of the badge variants — the state tint over a doubled scrim, a hairline in the state colour, the readable text colour — without the dot; where the option has a tone too, the count's own colour wins. `--gl-segmented-badge-height` (16px, also its least width), `--gl-segmented-badge-font-size` (11px) and `--gl-segmented-badge-border` (a colour, drawn inside the neutral count, unset none) size and outline it. Measured in all three engines, the four colours reach 4.71:1 or more in both themes, inline, under the drop and at the icon's corner, on the chosen option and beside it; the new `--primary` 4.79:1 in the light theme and 5.10:1 in the dark one. ([#21](https://github.com/JUNGHERZ/GlassKit/issues/21))
+
+### Changed
+
+- **Muted text, card text and icons reach WCAG AA by default.** In the light theme `--gl-color-text-muted` read 3.41:1 on the page and 3.47:1 on glass, `--gl-card-text-color` 4.00:1 and `--gl-icon-muted` 2.05:1 — below the 4.5:1 text needs and the 3:1 of icons that carry a meaning; in the dark theme muted text read 4.45:1 on glass. Light: muted text 55 → 68 %, card text 60 → 68 %, icons muted 35 → 55 %, default 50 → 65 %, strong 70 → 80 % (the card icon and the tertiary icon follow the default), so the three steps keep their order; dark: muted text 60 → 65 %. The select's chevron follows the muted text in both. Measured with the issue's page in Chromium 153, WebKit 26.6 and Firefox 151: in the light theme muted text 4.97:1 on the page and 5.09:1 on glass, card text 5.09:1, icons 3.41, 4.54 and 7.23:1; in the dark theme muted text 5.88:1 and 4.92:1. Two points of the issue were decided otherwise. `--gl-color-primary-text` stays the primary: GlassKit's light orange reads 2.43:1 as text, but a fixed mix with black would darken every brand alike and a darker one far more than it needs, a pink at 4.33:1 to 8.79:1; docs, README and SKILL.md show the recipe for a light theme that keeps the orange (`--gl-color-primary-on-surface`, 5.8:1). White on the primary button stays part of the look, as decided in 1.7.0 (2.68:1 light, 2.03:1 dark on the lightest stop of the gradient); the docs now show the dark ink as well, 4.6:1 or more on every stop. ([#19](https://github.com/JUNGHERZ/GlassKit/issues/19))
+
+### Compatibility
+
+- Small buttons that take their width from their text grow by 36px: in the docs and the showcase of GlassKit Elements "Small" from 51 to 87px and "Book" from 48 to 84px, and a row of three that fit the showcase's narrow column in one line now breaks into two. Plain markup changes only where a container shrinks a `.glass-btn` without `--auto` to its text. `--gl-btn-padding-x-sm` or `--gl-btn-padding-x` set another value.
+- The light theme reads firmer: muted text, card text and icons are darker; in the dark theme muted text is a little brighter. A page that copies GlassKit's light tokens — the no-JS `prefers-color-scheme` mirror of GlassKit Web — updates its copies of these seven tokens and the chevron.
+
+Docs (English and German), README, SKILL.md and `theme-override.css` describe the hooks, the colours of the count and the contrast. With the raised tokens and the chevron set back to their 1.30.0 values, docs, showcase and landing pages render pixel-identical to 1.30.0 in Chromium 153, WebKit 26.6 and Firefox 151 — in Chromium section by section, where full-page captures differ by rasterisation — apart from the new docs example of the coloured count.
+
+---
+
 ## [1.30.0] – 2026-10-22
 
 ### Added
@@ -1198,6 +1324,8 @@ during development. Version 1.3 is the first public open-source release.
 
 ---
 
+[1.32.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.32.0
+[1.31.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.31.0
 [1.30.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.30.0
 [1.29.1]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.29.1
 [1.29.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.29.0
@@ -1241,4 +1369,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.30.0...HEAD
+[Unreleased]: https://github.com/JUNGHERZ/GlassKit/compare/v1.32.0...HEAD

package/README.md

@@ -1,9 +1,9 @@
 <p align="center">
-  <img src="https://img.shields.io/badge/version-1.30.0-orange?style=flat-square" alt="Version">
+  <img src="https://img.shields.io/badge/version-1.32.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/components-38-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.30.0-f5a623?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.32.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>
@@ -16,7 +16,7 @@
 
 <p align="center">
   <strong>A modern glassmorphism CSS component library.</strong><br>
-  34 Components · Dark & Light Mode · No Dependencies · Design Tokens
+  38 Components · Dark & Light Mode · No Dependencies · Design Tokens
 </p>
 
 <p align="center">
@@ -57,7 +57,8 @@ GlassKit is the **CSS foundation** of a three-layer family: [GlassKit Elements](
 - 🔌 **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
+- 🧭 **Navigation at every edge** – one tab bar as bottom bar, top bar, sidebar or icon rail, or docked at a side where the thumb rests on a phone held open (since 1.32.0)
+- 🪶 **Lightweight** – 186 KB raw / 115 KB minified / 16.7 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
 
@@ -73,22 +74,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.30/glasskit.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.32/glasskit.min.css">
 
 <!-- jsDelivr – Unminified (for reading/debugging) -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.30/glasskit.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.32/glasskit.css">
 
 <!-- unpkg – Alternative -->
-<link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.30/glasskit.min.css">
+<link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.32/glasskit.min.css">
 ```
 
-> **Tip:** Replace `@1.30` with `@latest` for the newest version – or pin to a specific version for maximum stability.
+> **Tip:** Replace `@1.32` 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.30/glasskit-droplet.js';
+  import { attachDroplets } from 'https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.32/glasskit-droplet.js';
   attachDroplets();
 </script>
 ```
@@ -181,8 +182,9 @@ 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; 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 |
+| **Tab Bar** | `.glass-tab-bar` | Fixed bottom navigation; any icon — SVG, icon font, image — follows its states. The same bar as a sidebar (`--vertical`), fixed to a side edge (`--start` / `--end`), an icon rail (`--rail`) or a top bar (`--top`) |
+| **Tab Bar – Floating** | `.glass-tab-bar--floating` + `.glass-tab-bar-dock` | Pill-shaped Liquid-Glass tab bar with optional `.glass-tab-bar__accessory` capsule, upright at a side with `.glass-tab-bar-dock--vertical`; `--droplet` for a gliding selection |
+| **Breadcrumbs** | `.glass-breadcrumbs` | The path through nested levels: CSS separators, a "…" for folded levels, crumbs as drop targets |
 | **Accordion** | `.glass-accordion` | Collapsible content sections |
 | **Divider** | `.glass-divider` | Fading separator line |
 
@@ -197,8 +199,10 @@ Download the files directly from the [GitHub Release](https://github.com/JUNGHER
 | **Avatar** | `.glass-avatar` | Glass circle (sm/md/lg) |
 | **Status** | `.glass-status` | Notice card with icon |
 | **List** | `.glass-list` | iOS-style grouped settings list with auto dividers |
+| **Tree** | `.glass-tree` | Levels that open and close: twisty, icon, label and a trailing slot per row; children loading or failed to load; a flash for a changed item |
+| **Sorting** | `.is-sort-*` + `.glass-sort__ghost` | The states of a drag that reorders a list or a tree: source, drop line, inside, refused, a grip |
 | **Skeleton** | `.glass-skeleton` | Shimmer lines while content loads |
-| **Table** | `.glass-table` | Plain `<table>` on glass — hairline rows, tabular numbers |
+| **Table** | `.glass-table` | Plain `<table>` on glass — hairline rows, tabular numbers; sort buttons, a sticky header, a row action column, an empty row, cards for narrow places |
 | **Prose** | `.glass-prose` | Rendered Markdown / running text with one class |
 | **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 |
@@ -214,7 +218,9 @@ Download the files directly from the [GitHub Release](https://github.com/JUNGHER
 | **Button (Tertiary)** | `.glass-btn--tertiary` | Subtle glass – tertiary action |
 | **Modal** | `.glass-modal` | Centered dialog with blur overlay |
 | **Toast** | `.glass-toast` | Temporary notification, optionally with one action and a close button |
-| **Popover** | `.glass-popover` | Anchored dropdown / menu with fade & scale animation |
+| **Popover** | `.glass-popover` | Anchored dropdown / menu with fade & scale animation; in the top layer with the `popover` attribute |
+| **Tooltip** | `.glass-tooltip` | A short name or hint for a control, on hover and focus, in the top layer |
+| **Menu** | `.glass-menu` | Actions behind a button: icons, shortcuts, check marks, separators, a destructive item |
 
 ### Form Elements
 
@@ -257,6 +263,41 @@ The tab bar's active item can also stand on a capsule of its own, without the dr
 
 **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.
 
+**Timing and direction (since 1.32.0).** The drop's motion is tokens, unset today's values and read by the stylesheet and the module alike: `--gl-droplet-duration` and `-easing` for the leading edge, `-trail-duration`, `-trail-delay` and `-trail-easing` for the trailing one, `-lift` (`0.86`; `1` runs it without squashing) and `-lift-duration`, `-settle-duration` and `-settle-easing` for the spring back, `-lens-duration` and `-lens-easing` for the item below the drop. A product whose UI motion stays within about 240ms ease-out:
+
+```css
+:root {
+  --gl-droplet-duration: 240ms;       --gl-droplet-easing: ease-out;
+  --gl-droplet-trail-duration: 240ms; --gl-droplet-trail-delay: 0ms; --gl-droplet-trail-easing: ease-out;
+  --gl-droplet-lift: 1;               --gl-droplet-lift-duration: 0ms; --gl-droplet-settle-duration: 0ms;
+  --gl-droplet-lens-duration: 240ms;  --gl-droplet-lens-easing: ease-out;
+}
+```
+
+Every edge then stops after about 250ms. Keep `--gl-droplet-lift-duration: 0ms` in it: without it the lift's deeper shadow still fades back until about 600ms.
+
+In a column — a sidebar, see below — the drop runs along y: the module takes the axis from the row's `flex-direction` or `aria-orientation="vertical"`, and a finger drags it up and down.
+
+---
+
+## 🧭 One navigation, every edge
+
+Since **1.32.0** the tab bar is not bound to the bottom edge. The items stay the same — icon, label, badge, the active item, the drop — and modifiers on the bar choose the layout, so a page switches between them without rendering the items again:
+
+```html
+<nav class="glass-tab-bar glass-tab-bar--vertical" aria-label="Main">…</nav>                      <!-- sidebar in a grid column -->
+<nav class="glass-tab-bar glass-tab-bar--vertical glass-tab-bar--end" aria-label="Main">…</nav>   <!-- fixed to the end edge -->
+<nav class="glass-tab-bar glass-tab-bar--vertical glass-tab-bar--rail" aria-label="Main">…</nav>  <!-- icons alone -->
+<nav class="glass-tab-bar glass-tab-bar--top" aria-label="Main">…</nav>                           <!-- top of a page -->
+
+<div class="glass-tab-bar-dock glass-tab-bar-dock--vertical glass-tab-bar-dock--start">           <!-- floating, upright -->
+  <nav class="glass-tab-bar glass-tab-bar--floating glass-tab-bar--vertical glass-tab-bar--droplet">…</nav>
+  <button class="glass-tab-bar__accessory glass-tab-bar__accessory--accent" aria-label="Compose">…</button>
+</div>
+```
+
+`--vertical` is a column as high as its container, the icon before the label, the badge at the row's end — a long label ends `--gl-tab-bar-badge-room` (32px) before it. `--start` and `--end` fix it to that edge of the viewport, clear of the edge's safe area — where the thumb rests when a phone is held open, or a foldable has moved its own controls to a side; start and end follow the writing direction. `--rail` shows the icons alone, `--gl-tab-bar-rail-width` (72px) wide, the labels hidden from view but still the items' names. `--top` lays the bar out for a sticky header, with the icon beside the label from 640px, clear of the badge. Every bar shows a focus ring for the keyboard now, the active item under the drop too, and an item may be a link. In GlassKit Elements: `<glk-tab-bar orientation="vertical" dock="end" rail>`, `placement="top"`.
+
 ---
 
 ## 🌗 Theming
@@ -322,6 +363,20 @@ a later declaration if you want to bend one.
 
 `--gl-tab-bar-active-color` colours the icon and label of the active tab alone, for a spotlight that needs a lighter tone still; unset, they take `--gl-color-primary-text`.
 
+**Contrast (since 1.31.0).** Muted text, card text and icons reach WCAG AA by default in both themes — text 4.5:1, icons with a meaning 3:1, on the page and on glass. The primary as text keeps the primary: GlassKit's light orange reads 2.43:1 as text, but a fixed mix would darken every brand alike, so a light theme that keeps the orange sets `[data-theme="light"] { --gl-color-primary-text: var(--gl-color-primary-on-surface); }` (5.8:1). White on the primary button stays part of the look; `--gl-color-on-primary: color-mix(in srgb, var(--gl-color-primary) 17%, #000)` switches it to a dark ink with 4.6:1 or more.
+
+**Accent fills with white text (since 1.32.0).** To keep white on the primary button, the chosen day and the current step, darken the fills alone — not `--gl-color-primary`, which also draws focus rings, borders and the accent as text. `--gl-btn-primary-bg` replaces the button's background, `--gl-color-primary-fill` colours the flat fills; both are unset. On GlassKit's orange white reaches 4.5:1 from 75 % of the primary mixed with black in the light theme and from 65 % in the dark one:
+
+```css
+:root, [data-theme="dark"] { --gl-color-primary-fill: color-mix(in srgb, var(--gl-color-primary) 65%, #000); }
+[data-theme="light"]       { --gl-color-primary-fill: color-mix(in srgb, var(--gl-color-primary) 75%, #000); }
+:root, [data-theme="dark"], [data-theme="light"] {
+  --gl-btn-primary-bg: linear-gradient(135deg, var(--gl-color-primary-fill), color-mix(in srgb, var(--gl-color-primary-dark) 80%, #000));
+}
+```
+
+White reads 4.53:1 on the fill and at least that along the gradient, and on the chosen day of the date strip the weekday is now as strong as the number. The radio's dot follows `--gl-color-on-primary` now, like the checkbox tick, so the dark ink reaches it as well. Where the brand colour is set at run time, `contrast-color(var(--gl-color-primary))` behind `@supports (color: contrast-color(red))` picks black or white by itself — black on GlassKit's orange, 5.5:1 or more on every stop of the button.
+
 The `theme-override.css` template comes with **4 example themes**:
 - 🔵 Ocean Blue
 - 🟢 Emerald Green
@@ -422,6 +477,7 @@ All visual values are controlled via CSS Custom Properties:
 /* Colors */
 --gl-color-primary        /* Primary color */
 --gl-color-primary-text   /* text and line icons in the primary; defaults to it */
+--gl-color-primary-fill   /* flat accent fills that carry text: chosen day, current step; defaults to the primary */
 --gl-color-text           /* Text color */
 --gl-color-text-muted     /* Secondary text */
 
@@ -459,6 +515,11 @@ All visual values are controlled via CSS Custom Properties:
 
 /* Component hooks */
 --gl-modal-max-width      /* 340px */
+--gl-btn-primary-bg        /* the primary button's whole background; unset: the gradient of the primary */
+--gl-btn-radius            /* buttons alone; unset: --gl-radius-btn, shared with lists, toasts, the segmented control */
+--gl-btn-radius-sm         /* --sm; unset: --gl-btn-radius, then --gl-radius-sm */
+--gl-btn-padding-x         /* room beside the label; unset: 24px */
+--gl-btn-padding-x-sm      /* --sm; unset: --gl-btn-padding-x */
 --gl-select-chevron       /* url(…) per theme */
 --gl-toast-top            /* distance of the toast from the top */
 --gl-input-prefix-size    /* room for an input prefix, 18px */
@@ -470,7 +531,7 @@ All visual values are controlled via CSS Custom Properties:
 --gl-toggle-track-bg            /* toggle track when off; unset: --gl-surface-2 (…-checked: the primary gradient) */
 --gl-radio-bg, --gl-radio-bg-checked, --gl-radio-border, --gl-radio-border-checked
 --gl-radio-dot-size             /* 10px */
---gl-radio-dot-color            /* white */
+--gl-radio-dot-color            /* unset: --gl-color-on-primary (white), so it follows a dark ink */
 --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 */
@@ -482,11 +543,31 @@ All visual values are controlled via CSS Custom Properties:
 --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-tab-bar-rail-width         /* 72px; the icon rail */
+--gl-tab-bar-badge-room         /* 32px; where a sidebar row's label ends before its badge */
+--gl-flash-color                /* the flash of a changed list item or tree row; unset: the primary at 30 % */
+--gl-droplet-duration, -easing, -trail-duration, -trail-delay, -trail-easing   /* the drop's journey */
+--gl-droplet-lift, -lift-duration, -settle-duration, -settle-easing           /* its squash and spring back */
+--gl-droplet-lens-duration, -lens-easing                                      /* the item below it growing */
+--gl-tooltip-max-width          /* 240px */
+--gl-tooltip-bg, --gl-tooltip-color   /* unset: the theme's dark background, the text colour */
+--gl-tooltip-offset             /* 8px; the distance GlassKit Elements keeps from the control */
+--gl-tree-indent                /* 20px per level */
+--gl-tree-row-height            /* 36px */
+--gl-breadcrumbs-crumb-width    /* 200px; a longer crumb ends in an ellipsis */
+--gl-sort-duration, --gl-sort-easing  /* 180ms, ease-out: rows making room while a list is sorted */
+--gl-table-cell-padding         /* 9px 10px */
+--gl-table-header-padding       /* 8px 10px */
+--gl-table-max-height           /* 60vh; the wrap with a sticky header */
+--gl-table-header-bg            /* the sticky header's surface */
 --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-segmented-badge-height     /* 16px, also its least width */
+--gl-segmented-badge-font-size  /* 11px */
+--gl-segmented-badge-border     /* hairline inside a neutral count; unset: none */
 --gl-list-flush-inset           /* how far a --flush list reaches out; set by the card and the modal body, else 20px */
 --gl-gloss-droplet              /* highlight in the drop of --droplet rows; off with data-surface */
 ```
@@ -642,7 +723,7 @@ glasskit/
 
 The full documentation with **live previews**, **copy-paste code blocks**, and **class reference tables** is available in `docs.html`:
 
-- Sidebar navigation to all 34 components
+- Sidebar navigation to all 38 components
 - Live previews on a real glassmorphism background
 - Design token reference
 - Theming guide
@@ -684,10 +765,10 @@ GlassKit ships with an **AI-optimized component reference** in [`SKILL.md`](SKIL
 
 ### What it provides
 
-- **Copy-paste-ready HTML** for all 34 components with exact nesting rules
+- **Copy-paste-ready HTML** for all 38 components with exact nesting rules
 - **Complete design token tables** (colors, surfaces, blur, radii, spacing, shadows, typography)
 - **State class reference** – which class goes where (`is-active`, `is-open`, `is-visible`, `:checked`)
-- **6 composition patterns** – full page layouts (Login, Dashboard, Form, Modal, Settings, Progress)
+- **8 composition patterns** – full page layouts (Login, Dashboard, Form, Modal, Settings, iOS Settings, Progress, Back office)
 - **Common mistakes & corrections** – prevents the most frequent AI-generated errors
 - **Quick reference table** – all components with their modifiers at a glance
 
@@ -714,7 +795,8 @@ A few refinements arrive later and fall back quietly where they are missing:
 
 - The first-line alignment of toggle, checkbox and radio uses the `lh` unit (Firefox 120); without it the control sits at the top of its label.
 - List rows without a leading icon move their divider in with `:has()` (Firefox 121); without it the divider keeps the icon inset.
-- Right to left, the pairs that must move together — select chevron and padding, toggle thumb and travel, progress gradient — sit under `:dir(rtl)` (Chrome 120); without it they stay left to right.
+- Right to left, the pairs that must move together — select chevron and padding, toggle thumb and travel, progress gradient — sit under `:dir(rtl)` (Chrome 120); without it they stay left to right. A side bar and the upright dock (since 1.32.0) find their edge by the writing direction everywhere; only the padding for the safe area of the physical side waits for `:dir()`.
+- The top-layer variants of popover, tooltip and menu (`[popover]`, since 1.32.0) need the Popover API (Chrome 114, Safari 17, Firefox 125); the anchored `.glass-popover` with `.is-open` works everywhere. `contrast-color()` for the ink is an opt-in behind `@supports`.
 
 > **Note:** In browsers without `backdrop-filter` support, elements will be rendered with the defined background colors – the UI remains usable, just without the blur effect.
 
@@ -730,16 +812,18 @@ Page Attributes (on <html>):
 Interactive States:
   .is-active          → Tab Bar item, Modal Overlay
   .is-open            → Accordion item, Popover
+  :popover-open       → Popover, Tooltip, Menu with [popover] (top layer)
   .is-visible         → Toast
   :checked            → Toggle, Checkbox, Radio
   :focus              → Input, Textarea, Select, Range
   :disabled           → Input, Select, Textarea, Range, Toggle, Checkbox, Radio,
                         Button, Pill, Tab Bar Accessory, Modal action, list row
-  [aria-disabled]     → a.glass-btn and the other buttons (link still navigates)
+  [aria-disabled]     → a.glass-btn and the other buttons (link still navigates), menu items
 
 Button Modifiers:
   .glass-btn--primary / --secondary / --tertiary
   .glass-btn--sm / --lg / --auto
+  --gl-btn-primary-bg              (the primary's whole background, for white text with AA)
 
 Card Modifiers:
   .glass-card--glow
@@ -775,22 +859,44 @@ Input affixes:
 List Modifiers:
   .glass-list--flush / --bare
   .glass-list__item--interactive / --center
+  .glass-list__item.is-flash       (a changed item flashes; --gl-flash-color)
   --gl-list-title-white-space / --gl-list-subtitle-white-space / --gl-list-subtitle-lines   (wrapping, app-wide)
 
 Popover Modifiers:
   .glass-popover--top / --start / --end
+  .glass-popover[popover]          (top layer, placed by script; [data-side="top"] above its control)
+
+Tooltip:
+  .glass-tooltip[popover]          (role="tooltip", top layer)
+  --gl-tooltip-max-width / --gl-tooltip-bg / --gl-tooltip-color
+
+Menu:
+  .glass-menu[popover] · __item / __item--danger / [aria-checked] / [aria-disabled] · __check / __icon / __label / __trailing · __separator · __group-label
+
+Tree:
+  .glass-tree · __row.is-expanded / .is-selected / .is-leaf / .is-loading / .is-error / .is-disabled / .is-flash · __twisty / __icon / __label / __trailing · __group
+  --gl-tree-level (per row) / --gl-tree-indent / --gl-tree-row-height
+
+Breadcrumbs:
+  .glass-breadcrumbs · __list / __item / __item--overflow · __crumb / __current / __overflow · .is-drop-target / .is-drop-refused
+
+Sorting:
+  .is-sort-source / -before / -after / -inside / -refused · .glass-sort__ghost · .glass-sort__handle
+  --gl-sort-duration / --gl-sort-easing
 
 Skeleton:
   .glass-skeleton__line / __line--title
 
 Table:
   .glass-table-wrap · .glass-table__num / __muted
+  .glass-table__sort / __sort-icon · th[aria-sort] · .glass-table__actions · .glass-table__empty
+  .glass-table-wrap--sticky + .glass-table--sticky · .glass-table--scrolls · .glass-table--list · .glass-table-frame[data-more-start / data-more-end]
 
 Prose:
   .glass-prose   (styles the rendered content beneath it)
 
 Segmented:
-  .glass-segmented--full / --scroll / --wrap / --icons · __item[aria-pressed] · __item--success / --warning / --error · __dot · __icon · __badge
+  .glass-segmented--full / --scroll / --wrap / --icons · __item[aria-pressed] · __item--success / --warning / --error · __dot · __icon · __badge (--primary / --success / --warning / --error)
   .glass-segmented--droplet        (gliding selection, with glasskit-droplet.js)
 
 Steps:
@@ -808,6 +914,7 @@ Date strip:
 
 Calendar:
   .glass-calendar__nav · __wd · __day[aria-pressed] / --today / --other / [aria-disabled] · __marks · __mark--primary / --success / --warning / --error
+  --gl-color-primary-fill          (the chosen day's fill, also in the date strip and the current step's number)
 
 Image picker:
   .glass-image-picker__preview / --round · __label / __hint / __actions
@@ -824,6 +931,13 @@ Tab Bar – Floating:
   .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
+  --gl-droplet-duration / -easing / -trail-duration / -trail-delay / -trail-easing / -lift / -lift-duration / -settle-duration / -settle-easing / -lens-duration / -lens-easing
+
+Tab Bar – Layouts:
+  .glass-tab-bar--vertical         (sidebar) · --start / --end (fixed to a side) · --rail (icons alone)
+  .glass-tab-bar--top              (top of a page)
+  .glass-tab-bar-dock--vertical / --start / --end   (the floating bar upright at a side)
+  --gl-tab-bar-rail-width / --gl-tab-bar-badge-room
 
 Right to left:
   dir="rtl" on <html> or a container – the components mirror