@jungherz-de/glasskit 1.32.0 → 1.33.0

package/CHANGELOG.md

@@ -7,6 +7,39 @@ GlassKit uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [1.33.0] – 2026-10-28
+
+### Added
+
+- **Tokens for the tab bar's icons, corners and active label.** A compact top bar drawn like `.glass-segmented` (18px icons, a 12px segment) or a rail of rounded squares had to wrap its icons in boxes of its own and change the global `--gl-radius-full` on the bar. The drop and the spotlight take that token too.
+  - `--gl-tab-bar-icon-size` (24px) sizes the icon's box and its SVG.
+  - `--gl-tab-bar-item-radius` rounds the floating items and the drop, unset a capsule as before.
+  - `--gl-tab-bar-active-weight` sets the active label's weight, unset the medium of every label.
+
+  Measured in Chromium 153, WebKit 26.6 and Firefox 151 with the issue's top bar: 18px icons and SVGs, a 12px drop, a 600 active label beside 500 for the others. ([#25](https://github.com/JUNGHERZ/GlassKit/issues/25))
+- **A rail with its labels under the icons, a floating rail at an edge, and places before and after the items.** A desktop rail that names its items, a mark and the accessory above them, and an own pane of glass inset from the edge took a wrapper, overrides of the items' size and the global radius.
+  - `.glass-tab-bar--labels` with `--rail` keeps the label under the icon, as on the floating bar. The items fill the rail's width, `--gl-tab-bar-rail-width`, at least `--gl-tab-bar-rail-item-height` (62px) high, with the corners of a button. `--gl-tab-bar-item-radius` sets their corners and the drop's alike.
+  - `--floating` with `--vertical` and `--start` or `--end` makes a rail of its own glass at that edge. It is as high as the viewport less `--gl-tab-bar-floating-inset` (16px) at both ends, that far from its edge and clear of the safe areas, with a card's corners (`--gl-tab-bar-rail-radius`, 24px). In the flow, without an edge, a floating rail is such a pane as well, as high as its container; only the upright pill of the vertical dock stays a capsule.
+  - `__leading` holds a mark or the accessory above the items, and `__trailing` a foot such as the account at the far end. In a row they sit before and after the items.
+  - `__accessory-item` with `__accessory-label` sets the accessory's name under it.
+
+  Measured in all three engines through GlassKit Elements with the issue's design: a 96px rail 16px from the start edge and the ends, as high as a 760px viewport less 32px, with 24px corners. The items are 78 by 62px with 16px corners, and the labels stand under their icons, a long one cut with an ellipsis. The mark and the accessory with its name sit at the top, the account at the bottom, and the drop runs along y. Right to left the rail stands at the right edge. ([GlassKit Elements #32](https://github.com/JUNGHERZ/GlassKit-Elements/issues/32))
+- **A place at the end of a field's label row: `.glass-input-group--label-end`**, for "Forgot password?" on the line of the label "Password". The `__label-end` element comes after the field in the markup, so the keyboard reaches it after the field, which reads best in a sign-in form; the modifier draws it on the label's line, at its end. Measured in all three engines with an input, a textarea and a select: the link on the label's line, its end at the field's end, above the field, and Tab from the field to the link. Safari reaches links with Tab only with its preference or Option+Tab, as anywhere. ([GlassKit Elements #33](https://github.com/JUNGHERZ/GlassKit-Elements/issues/33))
+- **A chip to choose with: `.glass-badge--md`.** An interactive badge was 25 to 26px high, a filter chip's size, below the room a choice in a form needs. `--md` is `--gl-badge-md-height` (36px) high, in the small text of a form. Interactive, it takes taps 4px above and below its edges, 44px in all, the target every control keeps. Measured in all three engines: 36px, a tap 3.5px above or below the edge goes to the chip, 4.5px below goes past it. ([GlassKit Elements #34](https://github.com/JUNGHERZ/GlassKit-Elements/issues/34))
+
+### Changed
+
+- **The tab bar's items move their colours, the press and the shadow, not their box.** Items, icons and labels transitioned `all` for 250ms. A bar that changed its layout (upright, floating, a rail) let padding, width and height glide, and an item measured 250ms later was 60 instead of 62px. They now transition `color`, `background-color`, `box-shadow`, `opacity` and `transform`. Measured in all three engines: an item switched from a row to a labeled rail has its 62px in the next frame. ([#25](https://github.com/JUNGHERZ/GlassKit/issues/25))
+
+### Compatibility
+
+- Nothing changes for a project that sets none of the new tokens and classes. One exception: a tab bar item that changes its size no longer glides into it.
+- No theme token changed, so the no-JS mirror of GlassKit Web has nothing to update.
+
+Docs (English and German), README, SKILL.md and `theme-override.css` describe the tokens, the labeled and floating rail, the places before and after the items, the label row's end and the chip. With the new stylesheet the existing docs, showcase and landing pages render pixel-identical to 1.32.0: in WebKit and Firefox on whole pages, in Chromium section by section, where full-page captures differ by rasterisation.
+
+---
+
 ## [1.32.0] – 2026-10-27
 
 ### Added
@@ -1324,6 +1357,7 @@ during development. Version 1.3 is the first public open-source release.
 
 ---
 
+[1.33.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.33.0
 [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
@@ -1369,4 +1403,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.32.0...HEAD
+[Unreleased]: https://github.com/JUNGHERZ/GlassKit/compare/v1.33.0...HEAD

package/README.md

@@ -1,9 +1,9 @@
 <p align="center">
-  <img src="https://img.shields.io/badge/version-1.32.0-orange?style=flat-square" alt="Version">
+  <img src="https://img.shields.io/badge/version-1.33.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-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.32.0-f5a623?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.33.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>
@@ -74,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.32/glasskit.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.33/glasskit.min.css">
 
 <!-- jsDelivr – Unminified (for reading/debugging) -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.32/glasskit.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.33/glasskit.css">
 
 <!-- unpkg – Alternative -->
-<link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.32/glasskit.min.css">
+<link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.33/glasskit.min.css">
 ```
 
-> **Tip:** Replace `@1.32` with `@latest` for the newest version – or pin to a specific version for maximum stability.
+> **Tip:** Replace `@1.33` 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.32/glasskit-droplet.js';
+  import { attachDroplets } from 'https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.33/glasskit-droplet.js';
   attachDroplets();
 </script>
 ```
@@ -182,8 +182,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; 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 |
+| **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`, with `--labels` the label under the icon) or a top bar (`--top`); places before and after the items (`__leading`, `__trailing`) |
+| **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`, a rail of its own glass with `--vertical --rail` (fixed at a side with `--start` / `--end`); `--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 |
@@ -195,7 +195,7 @@ Download the files directly from the [GitHub Release](https://github.com/JUNGHER
 | **Title** | `.glass-title` | Page title with text shadow |
 | **Card** | `.glass-card` | Glass container for content |
 | **Card (Glow)** | `.glass-card--glow` | Card with light-to-milky gradient |
-| **Badge** | `.glass-badge` | Tags, labels & filter chips |
+| **Badge** | `.glass-badge` | Tags, labels & filter chips; `--md` for 36px choice chips with a 44px tap target |
 | **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 |
@@ -226,7 +226,7 @@ Download the files directly from the [GitHub Release](https://github.com/JUNGHER
 
 | Component | Class | Description |
 |---|---|---|
-| **Input** | `.glass-input` | Text field with glass background |
+| **Input** | `.glass-input` | Text field with glass background; a link at the end of the label row with `.glass-input-group--label-end` |
 | **Textarea** | `.glass-textarea` | Multi-line input |
 | **Select** | `.glass-select` | Dropdown with custom chevron |
 | **Search** | `.glass-search` | Input with search icon |
@@ -298,6 +298,26 @@ Since **1.32.0** the tab bar is not bound to the bottom edge. The items stay the
 
 `--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"`.
 
+Since **1.33.0** a rail can name its items and stand as a pane of its own glass. `--labels` next to `--rail` keeps the label under the icon; with `--floating` the rail is a pane of its own glass, as high as its container with the corners of a card, and with `--start` or `--end` as well it stands at that edge, full height less `--gl-tab-bar-floating-inset` (16px) at both ends and that far from the edge, clear of the safe areas. `__leading` and `__trailing` hold a mark, the accessory (`__accessory-item`, its name under it) and a foot such as the account inside the bar:
+
+```html
+<nav class="glass-tab-bar glass-tab-bar--floating glass-tab-bar--vertical glass-tab-bar--start
+            glass-tab-bar--rail glass-tab-bar--labels glass-tab-bar--droplet"
+     aria-label="Main" style="--gl-tab-bar-rail-width: 96px">
+  <div class="glass-tab-bar__leading">
+    <img src="mark.svg" alt="" width="40" height="40">
+    <div class="glass-tab-bar__accessory-item">
+      <button class="glass-tab-bar__accessory glass-tab-bar__accessory--accent" aria-label="Assistant">…</button>
+      <span class="glass-tab-bar__accessory-label" aria-hidden="true">Assistant</span>
+    </div>
+  </div>
+  <a class="glass-tab-bar__item is-active" href="/">…</a>
+  <div class="glass-tab-bar__trailing">…</div>
+</nav>
+```
+
+Three tokens shape the items without touching global ones: `--gl-tab-bar-icon-size` (24px), `--gl-tab-bar-item-radius` (the drop and the floating items, a capsule unless set; 16px in a rail with labels) and `--gl-tab-bar-active-weight` — a compact top bar like a segmented control takes 18px, 12px and semibold. The items transition only colour, surface, shadow, opacity and the press, so a bar that changes its layout takes its new size at once.
+
 ---
 
 ## 🌗 Theming
@@ -545,6 +565,13 @@ All visual values are controlled via CSS Custom Properties:
 --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-tab-bar-icon-size          /* 24px; the icon box and its SVG */
+--gl-tab-bar-item-radius        /* the floating items and the drop; unset a capsule, 16px in a rail with labels */
+--gl-tab-bar-active-weight      /* the active label's weight; unset medium */
+--gl-tab-bar-rail-item-height   /* 62px; least height of an item in a rail with labels */
+--gl-tab-bar-floating-inset     /* 16px; a floating rail's distance from its edge and the ends */
+--gl-tab-bar-rail-radius        /* a floating rail's corners; unset --gl-radius-card */
+--gl-badge-md-height            /* 36px; a choice chip (.glass-badge--md) */
 --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 */
@@ -835,6 +862,7 @@ Progress Modifiers:
 Badge Modifiers:
   .glass-badge--primary / --success / --warning / --error
   .glass-badge--interactive / --selected   (chips)
+  .glass-badge--md                         (choice chip, 36px; --gl-badge-md-height)
 
 Avatar Modifiers:
   .glass-avatar--sm / --lg
@@ -855,6 +883,7 @@ Select:
 Input affixes:
   .glass-input-wrap > __prefix / __suffix · --prefix / --suffix
   --gl-input-prefix-size / --gl-input-suffix-size   (room in the field, 18px unless set)
+  .glass-input-group--label-end > __label-end   (a link at the end of the label row, written after the field)
 
 List Modifiers:
   .glass-list--flush / --bare
@@ -931,13 +960,18 @@ 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-tab-bar-icon-size · --gl-tab-bar-item-radius · --gl-tab-bar-active-weight
   --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--vertical         (sidebar) · --start / --end (fixed to a side) · --rail (icons alone) · --labels (with --rail: the label under the icon)
+  .glass-tab-bar--floating + --vertical + --rail   (a rail of its own glass; with --start / --end fixed at a side)
+  .glass-tab-bar__leading / __trailing   (a mark, the accessory, a foot inside the bar)
+  .glass-tab-bar__accessory-item > __accessory-label   (the accessory with its name under it)
   .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
+  --gl-tab-bar-rail-width / --gl-tab-bar-badge-room / --gl-tab-bar-rail-item-height
+  --gl-tab-bar-floating-inset / --gl-tab-bar-rail-radius
 
 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.32.0) with 38 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.33.0) with 38 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
@@ -14,6 +14,8 @@ description: GlassKit is a pure CSS glassmorphism component library (v1.32.0) wi
 
 > **New in 1.32.0 — one navigation for every edge, four components, and AA on the accent fills.** The tab bar leaves the bottom edge: `--vertical` makes it a sidebar, `--start` or `--end` fixes it to that side of the viewport — where the thumb rests on a phone held open, or a foldable that moved its system controls to a side — `--rail` shrinks it to icons, `--top` lays it out for the top of a page, and the floating bar stands upright in `.glass-tab-bar-dock--vertical`. In a column the drop runs along y, and its timing is tokens (`--gl-droplet-*`). New: the tooltip, the menu, the tree and the breadcrumbs (3.36–3.39), the states of a drag that reorders a list or a tree (3.40), and for the table a sort button, a sticky header, a row action column, an empty row and a card layout (3.27). Popover, tooltip and menu open in the top layer with the `popover` attribute. `--gl-btn-primary-bg` and `--gl-color-primary-fill` darken the accent fills for white text without touching the brand colour, and the radio's dot follows `--gl-color-on-primary`. **Where a project builds its own sidebar, tooltip, menu, tree or breadcrumbs, overrides the drop's transitions, or darkens `--gl-color-primary` for white button text, replace that** (3.4, 3.7, 3.25, section 2).
 
+> **New in 1.33.0 — a rail that names its items, and tokens for the tab bar's details.** `--rail` with `--labels` keeps the label under the icon, and `--floating` with `--vertical` and `--start` or `--end` makes the rail a pane of its own glass at that edge, full height and inset from it; `__leading` and `__trailing` hold a mark, the accessory (`__accessory-item` with its name under it) and a foot inside the bar. `--gl-tab-bar-icon-size`, `--gl-tab-bar-item-radius` and `--gl-tab-bar-active-weight` replace overrides of global tokens, and the items transition only colour, surface, shadow, opacity and the press. Also new: `.glass-input-group--label-end` for a link such as "Forgot password?" at the end of the label row, and `.glass-badge--md`, a 36px choice chip with a 44px tap target.
+
 ---
 
 ## 1. Setup & Boilerplate
@@ -505,10 +507,14 @@ Every state — inactive, hover, active, under the drop, the drag — sets `colo
 | `--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-icon-size` | `24px` | Size of the icon box and of an SVG in it (since 1.33.0); a compact top bar takes the segmented control's 18px |
+| `--gl-tab-bar-active-weight` | `--gl-font-weight-medium` | Weight of the active tab's label (since 1.33.0), e.g. `var(--gl-font-weight-semibold)` |
 | `--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.
 
+**Transitions (since 1.33.0).** The items move only what a state changes — `color`, `background-color`, `box-shadow`, `opacity`, `transform` — not `all`. A bar that switches its layout (upright, floating, a rail) takes its new size at once; with `all`, padding, width and height glided for 250ms and an item measured meanwhile was not yet its size. Do not put `transition: all` back on the items.
+
 #### 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.
@@ -610,6 +616,8 @@ Tokens for a capsule behind the active item, like the selected tab of iOS 26 —
 
 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.
 
+`--gl-tab-bar-item-radius` (since 1.33.0) rounds the floating items and the drop together — unset a capsule (`--gl-radius-full`); in a rail with labels unset 16px. Set it on the bar instead of `--gl-radius-full`, which every pill and badge shares: 18px for the rounded squares of a rail, 12px for a compact top bar that looks like a segmented control.
+
 #### Sidebar, rail, top bar and side dock (since 1.32.0)
 
 One navigation in more places than the bottom edge. The items stay the same — icon, label, badge, `.is-active`, the drop — and only the bar's modifiers change, so a page switches between the layouts (a media query in script, a setting per device) without rendering the items again.
@@ -667,6 +675,51 @@ One navigation in more places than the bottom edge. The items stay the same —
 - **Every bar, the bottom one too,** shows a focus ring on the item that has the keyboard focus — the active item under the drop included — and an item may be an `<a>` (no underline, the bar's colours).
 - The drop runs along y in a column (see Droplet above); `--vertical` with `--droplet` needs nothing else.
 
+#### Rail with labels, floating rail, leading and trailing places (since 1.33.0)
+
+A desktop rail that names its items: `--labels` next to `--rail` keeps the label under the icon. With `--floating` the rail is a pane of its own glass, as high as its container with the corners of a card; with `--start` or `--end` as well, it stands at that edge of the viewport, full height less `--gl-tab-bar-floating-inset` at both ends and that far from its edge, clear of the safe areas, with the corners of a card. `__leading` and `__trailing` are places inside the bar: above the items in a column (a mark, the accessory) and at its far end (a foot such as the account); before and after the items in a row.
+
+```html
+<nav class="glass-tab-bar glass-tab-bar--floating glass-tab-bar--vertical glass-tab-bar--start
+            glass-tab-bar--rail glass-tab-bar--labels glass-tab-bar--droplet"
+     aria-label="Main" style="--gl-tab-bar-rail-width: 96px; --gl-tab-bar-label-size: 12px">
+  <div class="glass-tab-bar__leading">
+    <img src="mark.svg" alt="" width="40" height="40">
+    <div class="glass-tab-bar__accessory-item">
+      <button class="glass-tab-bar__accessory glass-tab-bar__accessory--accent" aria-label="Assistant"><svg viewBox="0 0 24 24"><!-- Icon --></svg></button>
+      <span class="glass-tab-bar__accessory-label" aria-hidden="true">Assistant</span>
+    </div>
+  </div>
+  <a class="glass-tab-bar__item is-active" href="/" aria-current="page">
+    <span class="glass-tab-bar__icon"><svg viewBox="0 0 24 24"><!-- Icon --></svg></span>
+    <span class="glass-tab-bar__label">App</span>
+  </a>
+  <!-- more items -->
+  <div class="glass-tab-bar__trailing"><!-- the account --></div>
+</nav>
+<main style="padding-inline-start: calc(96px + 2 * 16px)">…</main>
+```
+
+| Class | Description |
+|---|---|
+| `.glass-tab-bar--labels` | With `--rail`: the label under the icon at `--gl-tab-bar-label-size`; the items fill the rail's width (`--gl-tab-bar-rail-width`) and are at least `--gl-tab-bar-rail-item-height` (62px) high, rounded by `--gl-tab-bar-item-radius` (unset 16px), and so is the drop; a long label ends in an ellipsis; no tooltips needed |
+| `--floating` + `--vertical` + `--rail` | A rail of its own glass, docked or not: as high as its container, corners `--gl-tab-bar-rail-radius` (unset `--gl-radius-card`), padding `--gl-space-sm` / `--gl-space-xs`. With `--start` / `--end` as well, fixed at that edge: `top` / `bottom` and the side `--gl-tab-bar-floating-inset` (16px) plus the safe area; mirrored right to left |
+| `.glass-tab-bar__leading` / `__trailing` | Places inside the bar before and after the items: in a column above them and at the far end (`margin-block-start: auto`), in a row before and after them; hide an empty one with `hidden` |
+| `.glass-tab-bar__accessory-item` | The accessory over its name, `.glass-tab-bar__accessory-label` — the name is the button's `aria-label` too, so the visible one is `aria-hidden`; let a click on it press the button |
+
+| Token | Unset | Effect |
+|---|---|---|
+| `--gl-tab-bar-rail-width` | `72px` | Width of the rail (a labelled one usually 96px) |
+| `--gl-tab-bar-rail-item-height` | `62px` | Least height of an item in a rail with labels |
+| `--gl-tab-bar-item-radius` | a capsule; `16px` in a rail with labels | Corners of the floating items, the labelled rail's items and the drop |
+| `--gl-tab-bar-floating-inset` | `16px` | Distance of a floating rail at an edge from that edge and from the viewport's ends |
+| `--gl-tab-bar-rail-radius` | `--gl-radius-card` | Corners of a floating rail, docked or not |
+
+- **The page keeps the rail's side free**, its width plus the inset on both sides: `padding-inline-start: calc(var(--rail-width) + 2 * 16px)`.
+- **In the flow** (no `--start` / `--end`) a floating rail is the same pane: as high as its container (a grid column), with `--gl-tab-bar-rail-radius` corners and room around its items. Only the compact upright pill without `--rail` — the one in `.glass-tab-bar-dock--vertical` — stays a capsule.
+- **A compact top bar** looks like a segmented control with `--gl-tab-bar-icon-size: 18px`, `--gl-tab-bar-item-radius: 12px` and `--gl-tab-bar-active-weight: var(--gl-font-weight-semibold)` on `.glass-tab-bar--top`.
+- GlassKit Elements: `<glk-tab-bar floating orientation="vertical" dock="start" rail="labels">`, the mark and `<glk-tab-accessory show-label>` in `slot="leading"`, the foot in `slot="trailing"`.
+
 ---
 
 ### 3.5 Title
@@ -784,6 +837,7 @@ Tags and labels.
 | `.glass-badge--error` | Red |
 | `.glass-badge--interactive` | Pressable chip — cursor, hover tint, focus ring, press feedback |
 | `.glass-badge--selected` | The chip that is on |
+| `.glass-badge--md` | A chip to choose with (since 1.33.0): `--gl-badge-md-height` (36px) high, in the small text of a form; with `--interactive` a tap target of 44px |
 
 **Chips (since 1.12.0).** A badge doubles as a filter chip. Use a real `<button>` and carry the state in `aria-pressed`, so the row is operable by keyboard and announced as a toggle — the classes only paint it.
 
@@ -794,6 +848,13 @@ Tags and labels.
         aria-pressed="false">Applied</button>
 ```
 
+**Choice chips (since 1.33.0).** `--md` sizes a chip for a choice in a form — a row of sectors in a sign-up — 36px high (`--gl-badge-md-height`) in `--gl-font-size-sm`. Interactive, it takes taps 4px above and below its edges, 44px in all, the target every other control keeps; leave at least 8px between the lines of a wrapping row so the targets meet without overlapping. Never bend `--gl-space-2xs` or `--gl-font-size-xs` to make chips taller.
+
+```html
+<button class="glass-badge glass-badge--md glass-badge--interactive glass-badge--selected" aria-pressed="true">Café &amp; bakery</button>
+<button class="glass-badge glass-badge--md glass-badge--interactive" aria-pressed="false">Restaurant</button>
+```
+
 `--selected` deepens the color the badge already carries rather than overruling it, so `glass-badge--success glass-badge--selected` stays green. Each variant points `--gl-badge-accent` at its own color; set that variable on a single badge to give one chip a color of its own. Both states paint through a full-bleed inset shadow instead of `background`, so they layer over a variant's gradient without wiping it.
 
 Since 1.7.0 each variant is built from tokens rather than fixed `rgba()` literals —
@@ -1028,6 +1089,8 @@ Date and time fields (`type="date"`, `time`, `datetime-local`, `month`) take the
 | `.glass-input-wrap` | Box around the input that holds a prefix and/or suffix (since 1.22.0) |
 | `.glass-input-wrap__prefix` / `__suffix` | Icon, currency, unit or button at the field's start / end (logical: they swap sides under `dir="rtl"`) |
 | `.glass-input-wrap--prefix` / `--suffix` | Makes room in the field; also automatic where `:has()` is supported |
+| `.glass-input-group--label-end` | The group draws `__label-end` on the label's line, at its end (since 1.33.0) |
+| `.glass-input-group__label-end` | A link such as "Forgot password?", written **after** the field so the keyboard reaches it after the field |
 
 **Prefix and suffix (since 1.22.0).** The affixes lie on the field, centred; its padding grows by `--gl-input-prefix-size` / `--gl-input-suffix-size` (18px — an icon — unless set; set it for a wider unit). A click on text, an icon or a disabled control reaches the field; enabled controls, links and elements with `tabindex` take their own, form-associated custom elements such as `<glk-button>` included (since 1.22.2 — before, a disabled button took the click and a `<glk-button>` got none). They take it even inside a container locked with `pointer-events: none`: lock it with `inert`, or disable them. `<glk-input>` in GlassKit Elements has `prefix` / `suffix` slots on this and measures the width itself.
 
@@ -1043,6 +1106,16 @@ Date and time fields (`type="date"`, `time`, `datetime-local`, `month`) take the
 
 **Long values, empty labels, picker icon (since 1.25.0).** A value or placeholder too long for the field ends in an ellipsis while the field is not being edited, and a `.glass-label` without text takes no room (`:empty`; it used to keep the group's 8px gap). Date and time fields keep the browser's own picker button; `--gl-input-picker-icon: none` hides it in Chromium (WebKit and Firefox draw none to hide) — for a field whose prefix is the picker; call `showPicker()` from it then. It also hides the arrow of a field with a `<datalist>`.
 
+**At the end of the label row (since 1.33.0).** A link on the line of the label, such as "Forgot password?" beside "Password": write `.glass-input-group__label-end` after the field and add `--label-end` to the group. The group becomes a grid that draws the link at the end of the label's line, in the label's small text; in the tab order it stays after the field — e-mail, password, "Forgot password?", sign in, the order that reads best in a sign-in form. It works the same around a `.glass-textarea` or `.glass-select`. Never position the link absolutely over the label row. In GlassKit Elements: `slot="label-end"` on `<glk-input>`, `<glk-textarea>` and `<glk-select>`.
+
+```html
+<div class="glass-input-group glass-input-group--label-end">
+  <label class="glass-label" for="password">Password</label>
+  <input class="glass-input" id="password" type="password">
+  <a class="glass-input-group__label-end" href="/reset">Forgot password?</a>
+</div>
+```
+
 ---
 
 ### 3.15 Textarea
@@ -2598,6 +2671,10 @@ Key points:
 | The native `title` attribute as the tooltip of an icon button | `.glass-tooltip` (3.36) — `title` shows neither on keyboard focus nor on touch |
 | Commands behind a button as plain buttons in a popover, without menu roles | `.glass-menu` with `role="menu"` / `menuitem` (3.37), the keyboard from `<glk-menu>` |
 | `›` or `/` typed between breadcrumbs | Leave them out — `.glass-breadcrumbs__item` draws the chevron, hidden from screen readers and mirrored right to left |
+| `--gl-radius-full` changed on the tab bar to round its drop and items | `--gl-tab-bar-item-radius` (since 1.33.0); the global token shapes every pill and badge |
+| A wrapper around a floating vertical bar that draws the rail's glass, with the mark and the accessory as its siblings | `--floating --vertical --start` with `--rail --labels`, the mark and `__accessory-item` in `__leading` (since 1.33.0) |
+| `--gl-space-2xs` / `--gl-font-size-xs` raised on a chip to make it taller | `.glass-badge--md` (since 1.33.0) |
+| A "Forgot password?" link positioned absolutely over the label row | `.glass-input-group--label-end` with `__label-end` after the field (since 1.33.0) |
 | `position: sticky` on `th` inside `.glass-table-wrap` | `.glass-table-wrap--sticky` + `.glass-table--sticky` (since 1.32.0) — a wrap that scrolls sideways is a scroll container in both directions |
 | `.glass-popover` without `[popover]` inside a card or a scrolling box that clips | Open it in the top layer with the `popover` attribute (since 1.32.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` |
@@ -2615,12 +2692,12 @@ Key points:
 | Title | `.glass-title` | – |
 | Card | `.glass-card` | `--glow` |
 | Button | `.glass-btn` | `--primary`, `--secondary`, `--tertiary`, `--sm`, `--lg`, `--auto`, `:disabled` |
-| Badge | `.glass-badge` | `--primary`, `--success`, `--warning`, `--error`, `--interactive`, `--selected` |
+| Badge | `.glass-badge` | `--primary`, `--success`, `--warning`, `--error`, `--interactive`, `--selected`, `--md` |
 | Avatar | `.glass-avatar` | `--sm`, `--lg` |
 | Divider | `.glass-divider` | – |
 | Status | `.glass-status` | – |
 | Input | `.glass-input` | `--error`, `:disabled`; `.glass-input-wrap` with `__prefix` / `__suffix`, `--prefix` / `--suffix` |
-| Input Group | `.glass-input-group` | – |
+| Input Group | `.glass-input-group` | `--label-end` with `__label-end` |
 | Label | `.glass-label` | – |
 | Hint | `.glass-hint` | `--error` |
 | Textarea | `.glass-textarea` | `:disabled` |
@@ -2633,7 +2710,7 @@ Key points:
 | 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, `__icon`, `__label`, `__badge`, `--floating`, `--droplet`, `--vertical`, `--start`, `--end`, `--rail`, `--top`; `.glass-tab-bar-dock--vertical`, `-dock--start` / `--end` |
+| Tab Bar | `.glass-tab-bar` | `.is-active` on items, `__icon`, `__label`, `__badge`, `__leading`, `__trailing`, `__accessory-item`, `__accessory-label`, `--floating`, `--droplet`, `--vertical`, `--start`, `--end`, `--rail`, `--labels`, `--top`; `.glass-tab-bar-dock--vertical`, `-dock--start` / `--end` |
 | 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`, `.is-flash` on items |
 | Popover | `.glass-popover` | `--top`, `--start`, `--end`, `.is-open`, `[popover]`, `[data-side]` |