# Changelog All notable changes to **GlassKit** are documented in this file. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). GlassKit uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html). --- ## [1.38.0] – 2026-10-30 ### Added - **A dot without a count in the tab bar: `.glass-tab-bar__badge--dot`, and tokens for the badge.** An app that wants to say "something needs you here" at a tab could only show the pill with a character in it ("!"). The AppConfector Verwaltung shows a dot at its account tab for an open payment or a locked app, in all four placements of the bar. - The dot is 10px at the icon's corner, in the plain error red, with a 2px ring in the colour behind the bar that sets it off the icon. In the sidebar it stands at the row's end, as the count does. - It says nothing to a screen reader: the reason belongs in the item's name. - `--gl-tab-bar-badge-size` (16px, the dot 10px), `--gl-tab-bar-badge-top` (-4px, the dot -2px) and `--gl-tab-bar-badge-end` (-8px, the dot -3px) set the count and the dot alike. The sidebar keeps its place at the row's end. - `--gl-tab-bar-badge-ring-width` (none, the dot 2px) and `--gl-tab-bar-badge-ring-color` (`--gl-color-bg-mid`) set the ring, two tokens rather than one, so either can change alone. The ring is an outline: at 0px it is not drawn at all, so the count looks exactly as before. ([#29](https://github.com/JUNGHERZ/GlassKit/issues/29)) - **Labels hidden from a container query: `--gl-label-hidden: 1`.** Fields that stand under a shared head only while a table is wide enough need their labels hidden there and shown when it turns into a list. An attribute cannot follow a container or media query. - On a group, or on a container around fields, the token keeps each `.glass-label` as its field's name and takes it out of sight, with the rules of GlassKit Elements' `label-hidden`. - A query sets it, through style queries, which Chromium, WebKit and Firefox all have. - It reaches into the fields of GlassKit Elements. ([GlassKit Elements #62](https://github.com/JUNGHERZ/GlassKit-Elements/issues/62)) ### Compatibility - No theme token is new, so the no-JS light mirror of GlassKit Web needs nothing. Measured in Chromium 153, WebKit 26.6 and Firefox 151, 1.37.0 against 1.38.0, through GlassKit Elements 1.38.0: - **Dot:** - In the bottom bar, the rail and the top bar the dot is 10 × 10px, 2px above and 3px beyond the icon's corner, with a 2px ring in rgb(240, 244, 248) in light mode. In the sidebar it stands 16px from the row's end. - With `--gl-tab-bar-badge-size: 12px`, `-ring-width: 3px` and a green ring colour it is 12px with a 3px green ring. - The count stays 16px at -4/-8, without a ring. - **Labels:** with `--gl-label-hidden: 1` set in a container query from 560px on, the label of a field in a 700px container is 1 × 1px, in GlassKit markup and in ``. In a 400px container it stays 195 × 16px. - **Pages:** docs, showcase and landing pages render as in 1.37.0. A first draw of the ring as a 0px shadow layer tinted the anti-aliased edge of every count in WebKit and Firefox by about 45 pixels; as an outline nothing changes. --- ## [1.37.0] – 2026-10-29 ### Added - **An avatar's size as a token, and avatars that fit a list row: `--gl-avatar-size`, `--gl-avatar-font-size`.** A contact list shows a 40px avatar per row. The avatar knew 44px, 32px with `--sm` and 56px with `--lg`, so the 40px leading box of a `--lg` row cut a 44px one, and a 32px one looked lost in it. - `--gl-avatar-size` sets any size, on the avatar or a container around it, and `--gl-avatar-font-size` the initials' size with it. - In a list row's `__leading` an avatar takes the box's size: 28px, and 40px in `--lg`. The token on the avatar itself still decides. ([GlassKit Elements #58](https://github.com/JUNGHERZ/GlassKit-Elements/issues/58)) - **A placeholder for the select, in the placeholder colour.** The native pattern, a first option with an empty value, `disabled` and `hidden`, is chosen while nothing is, and `.glass-select` now says it in `--gl-placeholder`, as an input does. A first real option standing in for "nothing chosen" cannot be chosen, since picking the option already shown changes nothing. ([GlassKit Elements #59](https://github.com/JUNGHERZ/GlassKit-Elements/issues/59)) - **A character counter at the end of the label row: `.glass-input-group__counter`.** A meta description of 145 characters needs its count in view. In `__label-end` it reads "48/145" in the muted colour, and with `.is-over` past the limit in the error colour, since a value set by script may be longer. After a link in the same place it keeps its distance. ([GlassKit Elements #60](https://github.com/JUNGHERZ/GlassKit-Elements/issues/60)) ### Compatibility - No theme token is new, so the no-JS light mirror of GlassKit Web needs nothing. - An avatar in a list row's leading box is 28px, and 40px in `--lg`. Before, it kept its own size there: a 44px one overflowed the 28px box and was cut by the 40px one. Measured in Chromium 153, WebKit 26.6 and Firefox 151, 1.36.0 against 1.37.0, through GlassKit Elements 1.37.0: - **Avatar:** in a `--lg` leading box an avatar is 40px with 15px initials, whatever its size class (before: 44px cut to 40, or 32px). In a plain leading box it is 28px with 13px initials (before: 44px). With `--gl-avatar-size: 36px` on a container it is 36px. Outside lists the three sizes stay 44, 32 and 56px. - **Select:** with the placeholder option chosen, the field's text is in `--gl-placeholder`, rgba(26, 42, 54, 0.3) in light mode, and `required` reports `valueMissing`. - **Counter:** "10/10" at the end of the label row in the muted colour, "12/10" with `.is-over` in rgb(220, 53, 69), and after a link in the same place. - **Pages:** docs, showcase and landing pages render as in 1.36.0. --- ## [1.36.0] – 2026-10-29 ### Added - **Room below the sheet title, and tokens for the close button: `__subtitle`, `--gl-sheet-close-size`, `--gl-sheet-close-icon-size`, `--gl-sheet-close-icon-stroke`.** A detail sheet on a phone shows a chip, the title with a badge below it ("1× in your app") and the close button. A badge in `__trailing` stood beside the title and squeezed it: in a 390px sheet the title kept 92px. Boards also want a plain 44px close button with a 20px glyph, and nothing reached the glyph. - `__subtitle` stands below the title in `__heading`, small in the muted colour. - The tokens set the button (32px), its glyph (16px) and the glyph's stroke (2). ([GlassKit Elements #56](https://github.com/JUNGHERZ/GlassKit-Elements/issues/56)) - **A side sheet's top and bottom on their own: `--gl-sheet-side-inset-block-start` and `--gl-sheet-side-inset-block-end`.** Below a fixed top bar the panel has to start at 100px but keep 24px from the bottom and the side. With one inset it either covered the bar or stood 100px off at every edge. Both fall back to `--gl-sheet-side-inset`, which stays the side's and the way in. ([#27](https://github.com/JUNGHERZ/GlassKit/issues/27)) - **A wider leading box in a list row: `--gl-list-leading-width`.** A history row shows the time and a chip before its text, 84px. `__leading` is 28px wide, 40px with `--lg`, and `--lg` cut the rest off. The divider follows the token. ([#28](https://github.com/JUNGHERZ/GlassKit/issues/28)) ### Fixed - **An empty sheet head kept its 8px.** In a sheet without a title, places or close button, `__head` with `hidden` kept `display: flex` and its margin, so the content started 8px lower than in 1.34.0, in a sheet named only by its label too. `.glass-sheet__head[hidden]` takes no room now, as its places did already. ([#27](https://github.com/JUNGHERZ/GlassKit/issues/27)) - **The title of the chosen list row kept the text colour.** The row took the heading colour, or `--gl-list-item-selected-color`, but `.glass-list__title` set a colour of its own, so the token changed nothing on it. The title takes the row's colour now, as the comment of 1.34.0 already said. ([#28](https://github.com/JUNGHERZ/GlassKit/issues/28)) - **The status message kept the browser's paragraph margins.** `.glass-status p` set colour, size and line height but no margin. Wherever no reset of the page reached the `p`, the card was 82px high instead of 54px: in GlassKit's own showcase, and in the shadow root of ``. It has `margin: 0` now. ([GlassKit Elements #57](https://github.com/JUNGHERZ/GlassKit-Elements/issues/57)) ### Compatibility - No theme token is new, so the no-JS light mirror of GlassKit Web needs nothing. - In light mode the title of a chosen list row is a little darker, the heading colour; in dark mode both colours are the same. - A status card on a page without a reset of `p` is 28px lower. GlassKit's docs reset it already. Measured in Chromium 153, WebKit 26.6 and Firefox 151, plain markup, 1.35.1 against 1.36.0: - **Empty head:** the content of an inline sheet starts 29px below the panel's top instead of 37px, as in 1.34.0. - **Side sheet:** in a 1440 × 900 window, with `--gl-sheet-side-inset: 24px` and `--gl-sheet-side-inset-block-start: 100px`, the panel starts at 100px, below a bar that ends at 84px, and keeps 24px from the right and the bottom. With the side inset alone it keeps 24px at every edge. - **List:** the chosen row's title is rgb(15, 31, 42), the row's heading colour, instead of rgb(26, 42, 54). With the token set to red it is red. `--gl-list-leading-width: 84px` widens a `--lg` box from 40 to 84px, and the divider starts at 116px instead of 72px. - **Status:** without a reset of `p` the card is 54px high instead of 82px. - **Head:** with the close tokens at 44px, 20px and 1.8, the button is 44px, the glyph 20px and its stroke 1.8px. `__subtitle` stands 4px below the title. - **Pages:** dark docs render as in 1.35.1. In the light docs only the title of the chosen row in the list section differs. The showcase is 28px shorter at its status card, and the phone of the landing page shows the same showcase. --- ## [1.35.1] – 2026-10-29 ### Fixed - **The example "Markenakzent auf Glas" (brand accent on glass) in `theme-override.css` lacked its light rule.** It set `--gl-color-primary-text` and `--gl-color-primary-on-glass` for a dark brand accent on `:root, [data-theme="dark"]`, and `:root` also matches a page in the light theme. Uncommented, it gave light pages the near-white accent text of the dark theme. A `[data-theme="light"]` rule after the dark one now resets both tokens, as the example of 1.26.0, the README, SKILL.md and the docs do. ([GlassKit Elements #48](https://github.com/JUNGHERZ/GlassKit-Elements/issues/48), comment) Measured in Chromium 153, WebKit 26.6 and Firefox 151 with `--gl-color-primary: #0082BB` and the example uncommented. In the light theme both tokens are the primary, as without the example. In the dark theme a link reads 7.20:1 on the page and 6.70 to 6.79:1 on a card, and the primary action of a modal 9.86:1 or more. Only the commented example changed. `glasskit.css` differs from 1.35.0 in its version header alone, so the pages render as in 1.35.0. --- ## [1.35.0] – 2026-10-29 ### Added - **A sheet at a side, and one that leaves the page usable: `.glass-sheet-overlay--start` / `--end` and `--modeless`.** On a desktop two common layouts need the sheet at a side: a modal panel at the right edge (restoring a version), and a modeless side sheet beside a list whose chosen row stays in view. The sheet only rose from the bottom, and a `transform` set from outside also applied to the open state. - `--end` or `--start` on the overlay puts the panel at that side, with a card's corners and no grip. It is as high as the window less `--gl-sheet-side-inset` (16px) at both ends and that far from its edge, and `--gl-sheet-side-width` (440px) wide. - It slides in from that side, mirrored right to left, and its actions stand side by side at its foot. - `--modeless` has no scrim and no blur, and only the panel takes the pointer. Open that dialog with `show()`: the page stays usable, and a modal opened later lies above it. - `--gl-sheet-z-index` (1000) stacks the overlay. ([GlassKit Elements #44](https://github.com/JUNGHERZ/GlassKit-Elements/issues/44)) - **A head for the sheet: `__head` with `__eyebrow`, `__leading`, `__trailing` and `__close`.** Designs put a short line above the title ("RESTORE"), a 56px icon chip before it, a badge after it, and a × at the end. The sheet's head held only the title. - `__head` takes the title's place and spacing, and a title alone in it stands as it did without one. - `__close` is a round glass button, 32px with a 44px target. ([GlassKit Elements #43](https://github.com/JUNGHERZ/GlassKit-Elements/issues/43)) - **Room beside a list title and below its subtitle, and tokens for its type: `__title-row`, `__title-trailing`, `__extra`, `--gl-list-title-size`, `--gl-list-title-weight`, `--gl-list-subtitle-size`.** History rows show a badge "AI" beside the title and an "Undo" link below the subtitle, at 64px with a 13px subtitle. - `__title-trailing` moves under the title where the row is too narrow, and the title keeps its ellipsis. - In a `--center` row the title row stays centred. ([GlassKit Elements #42](https://github.com/JUNGHERZ/GlassKit-Elements/issues/42)) - **Tokens for the chosen list row: `--gl-list-item-selected-inset`, `-radius`, `-shadow`, `-color`, `-weight`.** The pill of 1.34.0 could only change its surface. Inset 0, radius 0 and shadow none make a flat tint over the whole row. ([GlassKit Elements #42](https://github.com/JUNGHERZ/GlassKit-Elements/issues/42)) - **A coloured logo as a segmented icon: `.glass-segmented__icon--color`.** The line icon's stroke reached a logo's shapes, which then came out outlined in the text colour. With `--color` the icon keeps its own fills and strokes; attributes on the `` itself lose to the slotted rule in all three engines, so the modifier is needed. ([GlassKit Elements #47](https://github.com/JUNGHERZ/GlassKit-Elements/issues/47)) - **`--gl-status-color`** for the message of a status line ([GlassKit Elements #45](https://github.com/JUNGHERZ/GlassKit-Elements/issues/45)), **`--gl-segmented-bg`** for the segmented track, and **`--gl-sheet-bg`** and **`--gl-modal-bg`** for the surfaces of sheet and modal ([GlassKit Elements #48](https://github.com/JUNGHERZ/GlassKit-Elements/issues/48)). - **`--gl-color-primary-on-glass`, the primary as text on the glass of a card, a modal or a sheet.** - A card is brighter than the page. GlassKit's own orange read 4.18:1 as a link on a card in dark mode, and a brand's accent less. - Links in `.glass-prose`, the range value, accent rows, the hovered accordion and the primary modal action take it there now. In dark mode it is the primary text with 40% white; in light mode, the primary text. - A link of the page's own on a card uses it as well. ([GlassKit Elements #48](https://github.com/JUNGHERZ/GlassKit-Elements/issues/48), comment) ### Changed - **Dark glass keeps its contrast.** In dark mode the glass of a modal or a sheet is brighter than the page, most at its top. White text on badges and segments there read 2.9 to 4.7:1, and a chosen badge in the lightened accent 1.9 to 3.3:1. In dark mode now: - The glow of modal and sheet starts at the card's middle glow (`--gl-dialog-glow-top`). - A segmented control on them lies in a well (`--gl-dialog-well`, black 10%), its chosen option one step darker (`--gl-dialog-raised`). - A tertiary button is one step darker (`--gl-dialog-control`). - Badges and tertiary buttons take no blur of their own. Chromium counted the dialog's glow twice beneath a nested backdrop filter, which is why it measured lower than WebKit and Firefox. - A chosen badge says its label in the text colour (`--gl-badge-selected-color`); border and tint show the selection. - A segmented control or badge whose tokens the page sets keeps them. Light mode is unchanged. ([GlassKit Elements #48](https://github.com/JUNGHERZ/GlassKit-Elements/issues/48)) ### Compatibility - Light mode renders as in 1.34.0. In dark mode modals, sheets, chosen badges and accent text on cards look as described above. - Six theme tokens are new in both theme blocks: `--gl-dialog-glow-top`, `--gl-dialog-well`, `--gl-dialog-raised`, `--gl-dialog-control` and `--gl-badge-selected-color` (unset in light mode), and `--gl-color-primary-on-glass` (the primary text in light mode). The no-JS light mirror of GlassKit Web needs these six lines from the light block; its `check:tokens` names them. - In plain markup `__title-row`, `__head` and the new places are optional: a list title or a sheet title without them stands as before. Measured in Chromium 153, WebKit 26.6 and Firefox 151, at the top of an 820px dark sheet over GlassKit's dark page, with the background taken from the pixels under each text: | Text | 1.34.0 | 1.35.0 | |---|---|---| | white on a badge | 2.87 to 4.65:1 | 6.00 to 6.79:1 | | a chosen badge, GlassKit's orange | 1.91 to 2.74:1 | 4.66 to 5.22:1 (white) | | a chosen badge, accent #0082BB | 2.27 to 3.29:1 | 5.67 to 6.37:1 (white) | | the chosen and an open segment | 3.40 to 3.84:1 | 5.45 to 7.70:1 | | a field's text (Chromium) | 3.89:1 | 5.47:1 | | a tertiary button | 2.98 to 4.00:1 | 4.69 to 5.35:1 | | a link on a card, GlassKit's orange | 4.18:1 | 5.54 to 5.61:1 | The side sheet measures 440px wide, 16px from the edge and both ends, and slides in from the right, or from the left right to left. Docs (English and German), README, SKILL.md and `theme-override.css` describe all of it. With the new stylesheet the light docs, showcase and landing pages render pixel-identical to 1.34.0 in all three engines, apart from the new examples. In dark mode only the chosen badges and the previews of modal and sheet differ as well. --- ## [1.34.0] – 2026-10-28 ### Added - **Tiles side by side: `.glass-list--grid`.** A grid of components — news, opening hours, a submenu to move them into — had no place in GlassKit: the list stacks rows, and a page drew tiles of its own. - `--grid` lays the items out as tiles: as many columns as fit at `--gl-list-tile-width` (140px), `--gl-list-tile-gap` (12px) apart, each at least `--gl-list-tile-min-height` (112px) high. - Every tile is a pane of glass of its own, with the surface, edge light and shadow the list has as a whole; the list itself has none. The icon stands at the top, title and subtitle at the foot, `__trailing` in the top end corner, a `.glass-sort__handle` in the bottom end corner. There are no dividers. - Hover, the focus ring and the chosen state work as on rows. A tile with more to say grows; its text never shrinks below its lines. - `.glass-list__item--tile` makes a row a tile where it cannot be a child of the grid, as in GlassKit Elements' ``, whose rows lie in shadow roots of their own. ([GlassKit Elements #40](https://github.com/JUNGHERZ/GlassKit-Elements/issues/40)) - **A chosen list row: `.glass-list__item.is-selected`.** A compact list beside an editor marks the entry that is open. The list had no such state, and the tree's `.is-selected` belongs to its rows. - It lays a pill of raised glass into the row, as the chosen tree row and the active row of a sidebar have: `--gl-list-item-selected-bg` (unset `--gl-surface-4`), `--gl-inset-strong`, `--gl-shadow-btn`, the title semibold and the icon in the accent. - A chosen tile is raised glass as a whole. - Hover and press leave it as it is, and the keyboard ring stays around the row. - `aria-current="true"` on the row tells assistive technology which entry it is (`aria-selected` in a listbox). - While the row is a drop target of a drag, the pill makes way for the line or the tint. ([GlassKit Elements #39](https://github.com/JUNGHERZ/GlassKit-Elements/issues/39)) - **Where the dividers start: `--gl-list-item-divider-inset`.** A sortable list of components shows the grip first: grip, icon, title, actions. The divider started after a 28px icon, under the icon, and a project moved it through a stylesheet adopted into every item. - The token sets the start for rows laid out otherwise, on the list or one row. - A row whose first child is a `.glass-sort__handle` lets the line run from its padding, since the grip's width is the page's. Set the token to where the text begins, 90px for an 18px grip and a 28px icon. ([GlassKit Elements #38](https://github.com/JUNGHERZ/GlassKit-Elements/issues/38)) - **An upright drop line for items side by side: `.is-sort-inline`.** With `.is-sort-before` or `.is-sort-after`, the line stands at the target's start or end edge, for tiles in a grid. Between the tiles of a `--grid` it stands in the middle of the gap. ([GlassKit Elements #40](https://github.com/JUNGHERZ/GlassKit-Elements/issues/40)) - **A larger icon field in the tree: `--gl-tree-icon-size`.** A tree of components shows each entry's chip in the icon field, a tinted square of 28px with the component's symbol, as list rows do. The field was 18 by 18px with no token, and a 28px chip came out 18 by 28px. The token (18px) sizes the field and its SVG. ([#26](https://github.com/JUNGHERZ/GlassKit/issues/26)) ### Fixed - **The tint of a drop target shows over the hover and the chosen state.** `.is-sort-inside` and `.is-sort-refused` weighed less than `.glass-list__item--interactive:hover` and `.glass-tree__row.is-selected`. An interactive row under the pointer, which a drop target always is, settled at the hover surface, and a chosen tree row kept its own, so only the ring showed. In 1.33.0 such a row ended at `rgba(255, 255, 255, 0.6)` in all three engines; now it shows the tint. ### Compatibility - Nothing changes for a project that sets none of the new classes and tokens, with one exception: a row whose first child is a `.glass-sort__handle` now runs its divider from its padding instead of from 60px. - No theme token changed, so the no-JS mirror of GlassKit Web has nothing to update. Measured in Chromium 153, WebKit 26.6 and Firefox 151: - **Tree:** the issue's 28px chip comes out 28 by 28px with `--gl-tree-icon-size: 28px`. The row stays 36px high, and the default field stays 18px. - **Lists:** the dividers start at 60px after an icon, at 20px with the grip first, and at 90px with the token. - **Chosen row:** a pill 8px in from the sides and 3px from the ends, with 12px corners, unchanged on hover. The focus ring stays on top. - **Tiles:** the line stands 2px wide in the middle of a 12px gap. Docs (English and German), README, SKILL.md and `theme-override.css` describe the tiles, the chosen row, the divider's start, the upright line and the tree's icon size. With the new stylesheet the existing docs, showcase and landing pages render pixel-identical to 1.33.0 in all three engines. Only the new sections of the docs differ: the chosen row and the grip-first list under List, the tiles under Sorting. --- ## [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 - **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' `` 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' ``. ([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' `` 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 `
    `. - 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' `` 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' `` 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 `` 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 - **The sheet's overlay can be a native ``, in the top layer.** `.glass-sheet-overlay` was made for a fixed `div` with `z-index: 1000`, so whether an open sheet covered the page depended on stacking contexts and on compositing: on an iPhone a fixed tab bar with a `backdrop-filter`, sliding in and out with a transform, now and then landed above it, and the page behind it stayed within reach. As `` opened with `showModal()`, as the modal's has been since 1.20.0, the overlay lies in the top layer, above every fixed or transformed element of the page whatever its `z-index`; the page behind it is inert for the pointer, the keyboard and screen readers, and Escape arrives as the dialog's `cancel` event. `dialog.glass-sheet-overlay` undoes the dialog's own box — the size limits, margin, padding, border, colour and outline of the user agent — and its backdrop, and keeps its overflow hidden, so the panel rising from below the edge does not make the overlay scroll. Show with `showModal()`, then `.is-active` on the next frame; hide by removing `.is-active` and calling `close()` after the panel's `transitionend`. A `div` overlay works as before. GlassKit Elements' `` uses the dialog from 1.30.0 on. Measured in Chromium 153, WebKit 26.6 and Firefox 151: the open dialog matches `:modal` and covers the viewport, and an open sheet renders pixel-identical to the `div` of 1.29.1, light and dark, 390 and 800px wide. ([GlassKit Elements #21](https://github.com/JUNGHERZ/GlassKit-Elements/issues/21)) ### Fixed - **An open accordion item takes the height of its content, however long.** `.glass-accordion__content` slid its `max-height` from 0 to 500px under `overflow: hidden`, so an item ended at 500px and cut off everything below, a "show more" row at its end included, and `` in GlassKit Elements had no part through which a page could lift the cap. The content is now a grid of one row that slides from `0fr` to `1fr`: the row is as high as the body, whatever that is, and follows content that grows while the item is open. Both tracks start at 0, the row so that the body's padding cannot hold a closed item open, the column so that a long word or a URL cannot make the body wider than the item. The slide keeps pace with the content now; with the cap it ran over 500px whatever the height, so a short item was fully open after 150 of 350 ms and a long one began to close only after a pause. Under `prefers-reduced-motion` the item opens and closes without sliding, which it did not before. The issue proposed measuring the content in script, `max-height` from `scrollHeight`; the grid does that in the stylesheet, for plain markup and GlassKit Elements alike. Measured with the issue's 40 rows of 30px in Chromium 153, WebKit 26.6 and Firefox 151: 1,220 of 1,220px visible, before 500; a closed item 0px high; 150 ms into opening, an item of 42px stands at 28px, before already at 42; 150 ms into closing, one of 192px at 61 to 71px, before still at 166 to 191; five rows added while it is open show at once; a long URL in the body lies exactly as in 1.29.1. ([GlassKit Elements #20](https://github.com/JUNGHERZ/GlassKit-Elements/issues/20)) - **A modal with nothing to focus no longer rings the screen.** `showModal()` then focuses the dialog itself, and Chromium and WebKit drew its focus ring along the edges of the viewport, which the dialog covers. `dialog.glass-modal-overlay` sets no outline now, nor does the sheet's dialog; Tab still goes to the first control. Found while comparing the sheet's dialog with the `div` it replaces. Docs (English and German), README and SKILL.md describe the accordion's height and the sheet's dialog. With the new stylesheet, docs, showcase and landing pages render pixel-identical to 1.29.1: in WebKit and Firefox on the whole pages, in Chromium section by section, where the full-page captures of the docs differ by rasterisation in sections this release does not touch (badge, buttons, toggle, date strip). --- ## [1.29.1] – 2026-10-21 ### Fixed - **`.glass-list--flush` reaches both edges of its container.** It pulled the list out with negative margins of `--gl-space-lg` on both sides, but `.glass-list` kept `width: 100%`: with a fixed width the right margin does nothing, so the list only moved to the start — in a 600px card it ended 4px from the left inner edge and 44px from the right. In a flex column that centres its items it did not reach out at all, and right to left it moved the other way. The list is now as wide as its container's content plus the padding on both sides, an explicit width, so a flex or grid container that does not stretch its items gives the same result as a block. The second point of the issue: the inset was 20px while a card pads 24px, so even a list that stretched stopped short. The inset is now `--gl-list-flush-inset`; `.glass-card` and `.glass-modal__body` set it from the token of their own padding, `--gl-space-xl`, and elsewhere it stays 20px (`--gl-space-lg`), as documented, unless a container sets it. Being a custom property, it also reaches a list inside the shadow roots of GlassKit Elements. Measured in Chromium 153, WebKit 26.6 and Firefox 151: in a card, a modal body, a sheet, a page with 20px padding, a centring flex column, a grid cell and right to left, the list ends 0.0px from both inner edges; GlassKit Elements' `` in ``, `` and `` the same. ([#18](https://github.com/JUNGHERZ/GlassKit/issues/18)) No page used `--flush`, so docs, showcase and landing pages render pixel-identical to 1.29.0 in WebKit and Firefox; the docs show a flush list in a card now (English and German), and README and SKILL.md name `--gl-list-flush-inset`. --- ## [1.29.0] – 2026-10-21 ### Added - **A count per segmented option: `.glass-segmented__badge`.** A row of tabs in an admin area — payments, subscriptions, invoices, tickets — had no place to say how much waits behind a tab. The tone dot says that something is there, not how much, so the count went into the label ("Tickets (1)"), where it read as part of it and could be neither styled nor announced apart. The badge is a small pill after the label, in tabular figures and inline, so a scrolling row and the drop measure the option with it. Without a tone it is neutral, a tint of the text colour over the state scrim; `--gl-segmented-badge-bg` and `--gl-segmented-badge-color` set it, both colours, both unset. With a tone it takes the state tint of `.glass-badge` over a doubled scrim. Put inside `.glass-segmented__icon` it sits at the icon's corner, as on the tab bar — the place for an `--icons` row — and is opaque there, the theme's middle background under its tint, because it covers the icon; `.glass-segmented__icon` is positioned for that. Measured in Chromium 153, WebKit 26.6 and Firefox 151, the 11px figures reach 5.65:1 or more in the dark theme and 4.71:1 or more in the light one, on the chosen option and beside it, neutral and in every tone, inline and at the corner; with a single scrim the neutral badge on the chosen option stayed at 3.75:1 in the dark theme, and a plain tint without any let the icon show through the figures at the corner. ([GlassKit Elements #19](https://github.com/JUNGHERZ/GlassKit-Elements/issues/19)) Docs (English and German), README and SKILL.md show the badge. Docs, showcase and landing pages render pixel-identical to 1.28.0: in WebKit and Firefox on the whole pages, in Chromium section by section, where the full-page captures of the docs differ by a rasterisation seam in the date strip whose layout is the same to the third decimal. --- ## [1.28.0] – 2026-10-20 ### Added - **Icons that are not inline SVG, in the tab bar, its accessory and the segmented control.** Every state of a tab icon was a `stroke` on `.glass-tab-bar__icon svg` — inactive, hover, active, under the drop, muted while the drop is dragged — so an icon font such as Material Icons, an `` 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 `` 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 - **`--gl-color-primary-text`, the primary as text.** The primary did two jobs: as a fill under white text — buttons, the checked toggle, the current step, the chosen day — and as text straight on the page or the glass: links in `.glass-prose`, the icon and label of the active tab, `.glass-modal__action--primary`, `.glass-list__item--accent`, `.glass-range-value`, the accordion trigger on hover and the chevron of an open item. A brand that darkens its primary in the dark theme so that white button text passes 4.5:1 got text too dark to read, and could not lighten it without changing every button. These eight rules take `--gl-color-primary-text` now, declared in both themes as `var(--gl-color-primary)`, so nothing changes until a project sets it. Measured on GlassKit's own dark background with `#c25028` as primary at 390 px, with `color-mix(in srgb, var(--gl-color-primary) 18%, #ffffff)` in the dark theme: a link on the page goes from 2.00:1 to 7.37:1, a link on a glass card from 1.37:1 to 5.05:1, the value of a range on a card from 1.78:1 to 6.55:1, the label of the active floating tab from 2.24:1 to 8.28:1. An accent row of a list on a card, the lightest place, goes from 1.06:1 to 3.47:1; white reaches 4.41:1 there. Docs, README, SKILL.md and `theme-override.css` show the recipe, with the light rule after the dark one, because `:root` matches a page in the light theme too. ([#12](https://github.com/JUNGHERZ/GlassKit/issues/12)) - **`--gl-tab-bar-active-color`** colours the icon and label of the active tab alone, where it is set; unset, they take `--gl-color-primary-text`. The spotlight of the floating bar lightens the active item more than any other surface, so a brand may need a lighter tone there than in running text. Glow and dot stay in the primary, the spotlight in `--gl-tab-bar-spotlight-color`. ([#12](https://github.com/JUNGHERZ/GlassKit/issues/12)) With the tokens unset, docs, showcase and landing pages of GlassKit and GlassKit Elements render pixel-identical to 1.25.0 in Chromium, WebKit and Firefox. Both tokens reach the shadow roots of GlassKit Elements by inheritance, with and without `glasskit.css` on the page. Checked in all three engines for plain markup and for the elements, in both themes, at the top of the page and in a nested `data-theme="light"` scope, which keeps the light primary. --- ## [1.25.0] – 2026-10-16 ### Added - **Tint surfaces: `data-surface="tint"`.** The solid preset mixes each surface over `--gl-color-bg-mid`, which fits a page whose background is the theme's middle colour. On a page with a background of its own — a brand colour, a photo, a pattern — an opaque surface stood out as a foreign block. The tint preset makes the surfaces in the flow of the page see-through tints of the text colour (`--gl-surface-1` … `-5` at 4, 6, 9, 12 and 16 %, the card glow likewise), nothing blurred: a field on a card stays as see-through as the card, and its contrast follows the text. What lies over other content keeps the solid values — modal, sheet, popover, toast and the tab bars, with the fields and rows inside them — and so do the milk surfaces, because a see-through secondary button would lose its dark text on a dark page. The solid values are kept as `--gl-solid-surface-1` … `-5` and `--gl-solid-card-glow-*` and follow `--gl-color-bg-mid`, so a brand sets that to its own colour. The solid preset is built on them now and renders pixel-identical to 1.24.0. Measured in Chromium, WebKit and Firefox, in both themes: of 19 elements rendered over red and over blue — plain and GlassKit Elements, one nested `data-theme` scope among them — the ones in the flow show the page through, while the panels, the secondary button and a field inside a popover do not; ``'s panel is opaque inside its shadow root; nothing is blurred. The showcase switch has a third option. ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11)) - **`--gl-blur-overlay`, a blur behind dialogs that the presets leave alone.** `.glass-modal-overlay` and `.glass-sheet-overlay` blur with it where it is set, else with `--gl-blur-soft` as before, which the surface presets set to `0`. A blurred dimmer suits a page without glass as well. ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11)) - **Toggle track tokens:** `--gl-toggle-track-bg` and `--gl-toggle-track-bg-checked`; unset, `--gl-surface-2` and the primary gradient. ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11)) - **Radio tokens:** `--gl-radio-bg`, `--gl-radio-bg-checked`, `--gl-radio-border`, `--gl-radio-border-checked`, `--gl-radio-dot-size` and `--gl-radio-dot-color`; unset, today's values. A ring in the text colour that turns the accent colour takes six declarations, shown in the docs. ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11)) - **`--gl-textarea-field-sizing`:** `content` lets text areas grow with their text where `field-sizing` is supported. It is off by default because it ignores `rows`: a text area with `rows="8"` would shrink from 214 to 120 px. ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11)) - **`--gl-input-picker-icon`:** `none` hides Chromium's picker button of date and time fields, and the arrow of a datalist, for a field whose prefix is the picker. Unset, every browser keeps its own (`revert`). ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11)) ### Fixed - **An empty `.glass-label` takes no room.** It kept the input group's 8px gap above its field. ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11)) - **A long value or placeholder in `.glass-input` ends in an ellipsis** while the field is not being edited, instead of being cut off. ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11)) - **A read-only or disabled text area has no resize handle.** ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11)) With the presets and the new tokens unset, docs, showcase and landing pages of GlassKit and GlassKit Elements render pixel-identical to 1.24.0 in Chromium and WebKit. --- ## [1.24.0] – 2026-10-14 ### Added - **Solid surfaces: `data-surface="solid"`.** GlassKit had one look, glass. An app that needed opaque surfaces — admin screens, forms on a plain background, designs without glass — built that variant itself and had to check it on every release, since a new literal could slip past it. The preset on ``, next to `data-theme` and `data-density`, makes every surface opaque and turns blur and gloss off. Each surface (`--gl-surface-1` … `-5`, the milk surfaces, the card glow) takes the colour the glass shows over the theme's middle background, `--gl-color-bg-mid`, so the surfaces keep their order and a re-branded background carries over. `--gl-blur*` are `0px`; the `--gl-inset-*` shine, the gloss, the white glow in `--gl-shadow-glow` and the see-through toggle thumb are gone. Borders, drop shadows, the tints of badges and chips and the dimming overlay stay. A theme scope inside the page — an element with its own `data-theme` — stays solid. The preset is tokens only, so a project tunes it like a theme, and `build-styles-js.mjs` puts both of its blocks into `tokensCss`, so it also reaches pages that load only GlassKit Elements. Measured in Chromium, WebKit and Firefox, in both themes: 40 components, plain and as GlassKit Elements, each rendered once over red and once over blue, show the same pixels inside (with glass, all 40 differ), and every `backdrop-filter` computes to `blur(0px)`. The docs have a preview, the showcase a Glass / Solid switch. ([#9](https://github.com/JUNGHERZ/GlassKit/issues/9)) - **The gloss is made of tokens.** `--gl-gloss-card` (the highlight along the top edge of the glow card), `--gl-gloss-modal` (the same on the modal), `--gl-gloss-progress` (the sheen on the progress fill) and `--gl-range-thumb-border` (the rim of the range thumb) were literals that no skin could reach. Their defaults are the old values. ([#9](https://github.com/JUNGHERZ/GlassKit/issues/9)) With the attribute unset, the stylesheet renders pixel-identical to 1.23.0, measured on the docs, showcase and landing pages of GlassKit and GlassKit Elements in Chromium and WebKit. --- ## [1.23.0] – 2026-10-14 ### Added - **List text can wrap, decided once for a whole app.** The title and subtitle of a list row keep to one line, cut with an ellipsis, and `--wrap` clamps the subtitle at three lines. Nothing could change that: on a phone, where a row beside an icon and a badge leaves a column of 120 to 200 px, names, legal terms and explanations lost their end, and inside GlassKit Elements' `` a project could not reach the rules at all. Three tokens decide it now, on `:root` for the whole app or on one list or one row: `--gl-list-title-white-space` and `--gl-list-subtitle-white-space` (`nowrap` unless set, `normal` wraps) and `--gl-list-subtitle-lines` (the clamp of `--wrap`, `3` unless set, `none` shows every line). A centred row follows the title token. The tokens are inherited, so they reach the shadow root of `` like the colours do. Unset, every row renders as before. Measured in Chromium, WebKit and Firefox at a 360 px viewport, in a card with a 28 px icon and a badge: with the three tokens set, no title or subtitle is cut any more — a long title takes two lines, a sentence as subtitle five, with and without `--wrap` — and `` gives the same numbers as plain markup. ([#10](https://github.com/JUNGHERZ/GlassKit/issues/10)) ### Fixed - **A word wider than the column breaks in a list row.** In a `--wrap` subtitle an e-mail address, which has no break opportunity, ran past the column and was clipped without an ellipsis: 310 px of text in a 198 px column. Title and subtitle carry `overflow-wrap: anywhere` now, so such a word breaks where it has to, while text still breaks at spaces. Breaks at syllables stay the page's choice: `hyphens` is inherited into the shadow roots as well and follows the page's `lang` — set on the list, WebKit and Firefox break "Tierver-waltung" at a syllable. ([#10](https://github.com/JUNGHERZ/GlassKit/issues/10)) - **An empty `--wrap` subtitle takes no room.** `display: -webkit-box` beat the `hidden` attribute, so a `` without a subtitle kept an empty line in its content, and its title sat 1 px off centre. ([#10](https://github.com/JUNGHERZ/GlassKit/issues/10)) Docs, showcase and landing pages of GlassKit and GlassKit Elements render pixel-identical to 1.22.2 and 1.22.3 in Chromium and WebKit. --- ## [1.22.2] – 2026-10-08 ### Fixed - **In an input affix, only what can be used takes the click.** `.glass-input-wrap__prefix` and `__suffix` let clicks through to the field and gave them back to a fixed list, `button, a[href], input, select, [tabindex]`. A disabled button in that list kept the click from the field, and a form-associated custom element such as GlassKit Elements' `` was not in it, so it could not be clicked at all. The rule is `:is(:enabled, a[href], [tabindex]):not(:disabled)` now: enabled controls, form-associated custom elements and `