@jungherz-de/glasskit 1.34.0 → 1.35.1

package/CHANGELOG.md

@@ -7,6 +7,83 @@ GlassKit uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [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 `<svg>` 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
@@ -1403,6 +1480,8 @@ during development. Version 1.3 is the first public open-source release.
 
 ---
 
+[1.35.1]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.35.1
+[1.35.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.35.0
 [1.34.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.34.0
 [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

package/README.md

@@ -1,9 +1,9 @@
 <p align="center">
-  <img src="https://img.shields.io/badge/version-1.34.0-orange?style=flat-square" alt="Version">
+  <img src="https://img.shields.io/badge/version-1.35.1-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.34.0-f5a623?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.35.1-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.34/glasskit.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.35/glasskit.min.css">
 
 <!-- jsDelivr – Unminified (for reading/debugging) -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.34/glasskit.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.35/glasskit.css">
 
 <!-- unpkg – Alternative -->
-<link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.34/glasskit.min.css">
+<link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.35/glasskit.min.css">
 ```
 
-> **Tip:** Replace `@1.34` with `@latest` for the newest version – or pin to a specific version for maximum stability.
+> **Tip:** Replace `@1.35` 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.34/glasskit-droplet.js';
+  import { attachDroplets } from 'https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.35/glasskit-droplet.js';
   attachDroplets();
 </script>
 ```
@@ -497,6 +497,9 @@ All visual values are controlled via CSS Custom Properties:
 /* Colors */
 --gl-color-primary        /* Primary color */
 --gl-color-primary-text   /* text and line icons in the primary; defaults to it */
+--gl-color-primary-on-glass /* the primary as text on cards, modals and sheets; dark: 60 % primary text in white */
+--gl-dialog-glow-top / --gl-dialog-well / --gl-dialog-raised / --gl-dialog-control   /* dark glass of modal and sheet: glow start, segmented well, its chosen option, tertiary button */
+--gl-badge-selected-color /* a chosen badge's label; dark: the text colour */
 --gl-color-primary-fill   /* flat accent fills that carry text: chosen day, current step; defaults to the primary */
 --gl-color-text           /* Text color */
 --gl-color-text-muted     /* Secondary text */
@@ -584,6 +587,12 @@ All visual values are controlled via CSS Custom Properties:
 --gl-tree-icon-size             /* 18px; the icon field and its SVG — 28px for a tinted chip */
 --gl-list-item-divider-inset    /* where a list row's divider starts; unset after the icon, or at the padding */
 --gl-list-item-selected-bg      /* the pill of the chosen list row; unset --gl-surface-4 */
+--gl-list-item-selected-inset / -radius / -shadow / -color / -weight   /* the chosen row's pill and title; 0, 0, none: a flat tint */
+--gl-list-title-size / --gl-list-title-weight / --gl-list-subtitle-size   /* a row's type */
+--gl-sheet-bg / --gl-modal-bg   /* replace the surface of sheet and modal */
+--gl-sheet-side-width / --gl-sheet-side-inset / --gl-sheet-z-index   /* 440px, 16px, 1000: a sheet at a side */
+--gl-segmented-bg               /* the segmented track; unset --gl-surface-1 */
+--gl-status-color               /* the status message; unset muted text */
 --gl-breadcrumbs-crumb-width    /* 200px; a longer crumb ends in an ellipsis */
 --gl-sort-duration, --gl-sort-easing  /* 180ms, ease-out: rows making room while a list is sorted */
 --gl-table-cell-padding         /* 9px 10px */
@@ -866,6 +875,7 @@ Badge Modifiers:
   .glass-badge--primary / --success / --warning / --error
   .glass-badge--interactive / --selected   (chips)
   .glass-badge--md                         (choice chip, 36px; --gl-badge-md-height)
+  --gl-badge-selected-color                (a chosen chip's label; the text colour in dark mode)
 
 Avatar Modifiers:
   .glass-avatar--sm / --lg
@@ -893,6 +903,7 @@ List Modifiers:
   .glass-list__item--interactive / --center
   .glass-list__item.is-flash       (a changed item flashes; --gl-flash-color)
   .glass-list__item.is-selected    (the chosen row beside its detail, with aria-current; --gl-list-item-selected-bg)
+  .glass-list__title-row > __title + __title-trailing · __extra   (beside the title, below the subtitle)
   --gl-list-item-divider-inset     (where the dividers start; a row with its grip first runs them from its padding)
   --gl-list-title-white-space / --gl-list-subtitle-white-space / --gl-list-subtitle-lines   (wrapping, app-wide)
 
@@ -930,7 +941,7 @@ Prose:
   .glass-prose   (styles the rendered content beneath it)
 
 Segmented:
-  .glass-segmented--full / --scroll / --wrap / --icons · __item[aria-pressed] · __item--success / --warning / --error · __dot · __icon · __badge (--primary / --success / --warning / --error)
+  .glass-segmented--full / --scroll / --wrap / --icons · __item[aria-pressed] · __item--success / --warning / --error · __dot · __icon · __badge (--primary / --success / --warning / --error) · __icon--color (a logo keeps its colours)
   .glass-segmented--droplet        (gliding selection, with glasskit-droplet.js)
 
 Steps:
@@ -938,6 +949,8 @@ Steps:
 
 Sheet:
   .glass-sheet-overlay.is-active · .glass-sheet--inline · __grip / __title / __body / __actions
+  .glass-sheet__head > __leading / __heading (__eyebrow + __title) / __trailing / __close
+  .glass-sheet-overlay--start / --end · --modeless   (a panel at a side; modeless with show())
   dialog.glass-sheet-overlay       (a native <dialog>, opened with showModal(), since 1.30.0)
 
 Empty state:

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: glasskit-css
-description: GlassKit is a pure CSS glassmorphism component library (v1.34.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.35.1) 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.34.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.35.0 — sheets at a side and with a head, dark glass that keeps its contrast, room beside a list title.** `.glass-sheet-overlay--end`/`--start` put the sheet at a side as a full-height panel, `--modeless` leaves the page usable (open with `show()`); `__head` holds `__eyebrow`, `__leading`, `__trailing` and a round `__close` (3.31). In dark mode the glow of modal and sheet starts at the middle and controls on them get darker values — a segmented well, a tertiary button one step darker, no chip blur —, a chosen badge says its label in the text colour, and `--gl-color-primary-on-glass` lightens accent text on cards and dialogs: white on badges and segments at the top of a tall dark sheet went from 2.9–4.7:1 to 4.7–7.7:1 (3.31). Lists get `__title-row`/`__title-trailing`/`__extra` and tokens for title and subtitle type and the chosen row's pill (3.24); `.glass-segmented__icon--color` keeps a logo's colours (3.29); `--gl-status-color`, `--gl-sheet-bg`, `--gl-modal-bg`, `--gl-segmented-bg`. **Where a project restyles the sheet head, moves a sheet to the side through adopted styles, starts a dark glow lower, or sets its own on-glass link colour, replace that.**
+
 > **New in 1.34.0 — a chosen list row, a list that starts with the grip, tiles that sort.** `.glass-list__item.is-selected` marks the entry a list beside its detail shows — a pill of raised glass, as the chosen tree row — with `aria-current="true"` (3.24). `--gl-list-item-divider-inset` sets where the dividers start, and a row with its `.glass-sort__handle` first lets them run from its padding. `.is-sort-inline` stands the drop line upright for tiles side by side (3.40). `--gl-tree-icon-size` (18px) gives the tree a larger icon field, for a 28px chip (3.38). **Where a project paints a chosen row with its own styles, squeezes a chip into the tree's 18px icon, or moves the grip by adopted stylesheets, replace that.**
 
 > **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.
@@ -181,6 +183,8 @@ All are derived from the state color via `color-mix()`, so overriding
 | `--gl-color-error-on-surface` | Badge text on the error tint | lightened / darkened error |
 | `--gl-color-warning-on-surface` | Badge text on the warning tint (since 1.18.0) | lightened (dark) / darkened (light) warning |
 | `--gl-color-primary-text` | Text and line icons in the primary straight on the page or the glass: `.glass-prose` links, 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 (since 1.26.0) | `var(--gl-color-primary)` in both themes |
+| `--gl-color-primary-on-glass` | The primary as text on the glass of a card, a modal or a sheet (since 1.35.0): links in `.glass-prose`, the range value, accent rows, the primary modal action. Dark: `color-mix(in srgb, var(--gl-color-primary-text) 60%, #ffffff)` — GlassKit's orange went from 4.18:1 to 5.54:1 as a link on a card; light: the primary text. Use it for links and chips of your own on a card |
+| `--gl-dialog-glow-top`, `--gl-dialog-well`, `--gl-dialog-raised`, `--gl-dialog-control`, `--gl-badge-selected-color` | Dark glass (since 1.35.0, dark mode only): where the glow of modal and sheet starts (the card's mid glow), the segmented track on dialog glass (black 10 %), its chosen option (`--gl-surface-3`), a tertiary button there (`--gl-surface-1`), a chosen badge's label (the text colour). Unset in light mode |
 | `--gl-color-primary-surface` / `-border` | Badge fill / border | `color-mix(… primary 25% / 30%, transparent)` |
 | `--gl-color-success-surface` / `-border` | Badge fill / border | `color-mix(… success 15% / 30%, transparent)` |
 | `--gl-color-error-surface` / `-border` | Badge fill / border | `color-mix(… error 15% / 30%, transparent)` |
@@ -796,7 +800,7 @@ Full-width buttons (56px height) with three variants and size modifiers.
 | `.glass-btn` | Base (56px height, width: 100%) |
 | `.glass-btn--primary` | Color gradient (orange) |
 | `.glass-btn--secondary` | Milky white, dark text |
-| `.glass-btn--tertiary` | Subtle glass, more transparent |
+| `.glass-btn--tertiary` | Subtle glass, more transparent; on the glass of a modal or a sheet one step darker in dark mode and without a blur of its own (since 1.35.0) |
 | `.glass-btn--sm` | 44px height |
 | `.glass-btn--lg` | 64px height |
 | `.glass-btn--auto` | Width: auto instead of 100% |
@@ -838,7 +842,7 @@ Tags and labels.
 | `.glass-badge--warning` | Yellow — states that wait for someone (since 1.18.0) |
 | `.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--selected` | The chip that is on; in dark mode its label takes `--gl-badge-selected-color`, the text colour (since 1.35.0; the lightened accent read 2.2–3:1 on glass) — border and tint show the selection. On modal or sheet glass a badge takes no blur of its own |
 | `.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.
@@ -914,7 +918,7 @@ Info/notice card with icon and text.
 
 | Class | Description |
 |---|---|
-| `.glass-status` | Container with subtle glass surface |
+| `.glass-status` | Container with subtle glass surface; `--gl-status-color` sets the message's colour (since 1.35.0) |
 
 ---
 
@@ -950,7 +954,7 @@ Danger variant:
 | `.glass-modal-overlay` | Fullscreen container with blur |
 | `.glass-modal-overlay.is-active` | Visible + animated |
 | `dialog.glass-modal-overlay` | The overlay as a native `<dialog>`, opened with `showModal()` (since 1.20.0) |
-| `.glass-modal` | Dialog box, at most `--gl-modal-max-width` wide (340px unless set; since 1.20.0) |
+| `.glass-modal` | Dialog box, at most `--gl-modal-max-width` wide (340px unless set; since 1.20.0); `--gl-modal-bg` replaces its surface, and in dark mode its glow starts at `--gl-dialog-glow-top` (since 1.35.0, see 3.31) |
 | `.glass-modal__header` | Header area |
 | `.glass-modal__title` | Title (20px, bold) |
 | `.glass-modal__body` | Content area |
@@ -1473,12 +1477,15 @@ iOS-style grouped settings list. Items can carry a leading icon, a title with op
 | `.glass-list__subtitle--wrap` | Multi-line subtitle (up to 3 lines, clamped with ellipsis; `--gl-list-subtitle-lines` sets the limit) |
 | `.glass-list__trailing` | Trailing slot — chevron, value, button, badge |
 | `.glass-list__value` | Muted text inside `.glass-list__trailing` (e.g. file size) |
+| `.glass-list__title-row` | Holds `.glass-list__title` and `.glass-list__title-trailing` — a badge, a mark —, which moves under the title where the row is too narrow (since 1.35.0) |
+| `.glass-list__extra` | Below the subtitle: a link ("Undo"), a line of chips (since 1.35.0) |
 | `.glass-list__item.is-selected` | The chosen row of a list beside its detail (since 1.34.0): a pill of raised glass inside the row (`--gl-list-item-selected-bg`, unset `--gl-surface-4`), the title semibold, the icon in the accent. Put `aria-current="true"` on the row (`aria-selected` in a listbox). Hover and press leave it as it is; the keyboard ring stays around the row |
 | `.glass-list__item.is-flash` | A 1.2s flash for an item that changed elsewhere — on another device, by an undo — so the eye finds it; tinted by `--gl-flash-color` (unset: the primary at 30 %), none under `prefers-reduced-motion` (since 1.32.0). Take the class off on `animationend`; GlassKit Elements' `highlight()` sets it |
 
 **Notes:**
 - Dividers are auto-rendered via `::after`. The last item never has a divider.
 - Items **with** a `__leading` slot get an icon-aligned divider inset; items **without** one — or with a `__leading` that carries the `hidden` attribute (since 1.20.0) — get the standard padding inset (handled via `:has()`). Large leading (`--lg`) adjusts the divider inset automatically.
+- **Type and the chosen row (since 1.35.0):** `--gl-list-title-size`, `--gl-list-title-weight` and `--gl-list-subtitle-size` set a row's type, on the list or one row. `--gl-list-item-selected-inset` (3px `--gl-space-xs`), `-radius` (`--gl-radius-sm`), `-shadow`, `-color` (heading) and `-weight` (semibold) shape the chosen row; `0`, `0`, `none` make a flat tint over the whole row.
 - **Where the divider starts (since 1.34.0):** `--gl-list-item-divider-inset` overrides the start for rows laid out otherwise. A row whose first child is a `.glass-sort__handle` (the grip before the icon) lets the line run from its padding, since the grip's width is the page's — set the token to where the text begins, e.g. `90px` for an 18px grip and a 28px icon.
 - A `__leading` or `__trailing` with `hidden` takes no room (since 1.20.0; `display: flex` used to beat the attribute).
 - SVG icon convention: `24px` for leading (32px for `--lg`), `18px` for trailing, `stroke: currentColor`, `stroke-width: 2`.
@@ -1732,6 +1739,7 @@ More options than fit — seven areas on a phone: without a modifier the row sta
 | `.glass-segmented__item--success` / `--warning` / `--error` | Tone: sets `--gl-segmented-tone` for the dot |
 | `.glass-segmented__dot` | The dot before the label, in the tone colour |
 | `.glass-segmented__icon` | An icon before the label (since 1.28.0): an SVG strokes in the option's colour, a font icon or any element inherits it; 18px |
+| `.glass-segmented__icon--color` | A coloured logo keeps its own fills and strokes (since 1.35.0); without it an SVG strokes as a line icon, and a logo's shapes came out outlined |
 | `.glass-segmented--icons` | Icons alone, square options; each option's name in `aria-label` and `title` (since 1.28.0) |
 | `.glass-segmented__badge` | A count after the label — neutral, or in the option's tone; inside `__icon` at the icon's corner (since 1.29.0) |
 | `.glass-segmented__badge--primary` / `--success` / `--warning` / `--error` | The count in a colour of its own, whatever the option's tone, without the dot (since 1.31.0) |
@@ -1823,6 +1831,10 @@ Show: remove `hidden`, force a reflow (`void overlay.offsetHeight`), add `.is-ac
 | `.glass-sheet` | The panel: milky glass, top corners rounded, bottom safe-area padding |
 | `.glass-sheet--inline` | In the flow, no overlay, all corners rounded |
 | `.glass-sheet__grip`, `__title`, `__body`, `__actions` | Grip bar, heading, body, action column |
+| `.glass-sheet__head` > `__leading`, `__heading` (`__eyebrow` + `__title`), `__trailing`, `__close` | The head (since 1.35.0): a chip or mark before the title, a short line above it, a badge after it, a round 32px glass close button (44px target) at its end; a title alone in `__head` stands as before |
+| `.glass-sheet-overlay--start` / `--end` | The panel at that side (since 1.35.0): full height less `--gl-sheet-side-inset` (16px), `--gl-sheet-side-width` (440px), card corners, slides in from the side (mirrored in RTL), no grip, actions side by side |
+| `.glass-sheet-overlay--modeless` | No scrim, no blur, only the panel takes the pointer — open the dialog with `show()`; the page stays usable and later modals lie above it. `--gl-sheet-z-index` (1000) |
+| `--gl-sheet-bg` | Replaces the panel's surface (since 1.35.0). In dark mode the glow starts at `--gl-dialog-glow-top`, and controls on it take the dialog values (see the tokens in section 2) |
 
 ---