@jungherz-de/glasskit 1.35.1 → 1.37.0

package/CHANGELOG.md

@@ -7,6 +7,65 @@ GlassKit uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [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 `<glk-status>`. 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
@@ -1480,6 +1539,8 @@ during development. Version 1.3 is the first public open-source release.
 
 ---
 
+[1.37.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.37.0
+[1.36.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.36.0
 [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

package/README.md

@@ -1,9 +1,9 @@
 <p align="center">
-  <img src="https://img.shields.io/badge/version-1.35.1-orange?style=flat-square" alt="Version">
+  <img src="https://img.shields.io/badge/version-1.37.0-orange?style=flat-square" alt="Version">
   <img src="https://img.shields.io/badge/CSS-only-blue?style=flat-square" alt="CSS only">
   <img src="https://img.shields.io/badge/components-38-green?style=flat-square" alt="Components">
   <img src="https://img.shields.io/badge/license-MIT-lightgrey?style=flat-square" alt="License">
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.35.1-f5a623?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.37.0-f5a623?style=flat-square" alt="Changelog"></a>
   <a href="https://www.npmjs.com/package/@jungherz-de/glasskit"><img src="https://img.shields.io/npm/v/@jungherz-de/glasskit?style=flat-square&color=cb3837&label=npm" alt="npm"></a>
   <a href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit/"><img src="https://img.shields.io/badge/CDN-jsDelivr-blue?style=flat-square" alt="jsDelivr"></a>
 </p>
@@ -74,22 +74,22 @@ No download, no build tool – just include and go:
 
 ```html
 <!-- jsDelivr – Minified -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.35/glasskit.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.37/glasskit.min.css">
 
 <!-- jsDelivr – Unminified (for reading/debugging) -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.35/glasskit.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.37/glasskit.css">
 
 <!-- unpkg – Alternative -->
-<link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.35/glasskit.min.css">
+<link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.37/glasskit.min.css">
 ```
 
-> **Tip:** Replace `@1.35` with `@latest` for the newest version – or pin to a specific version for maximum stability.
+> **Tip:** Replace `@1.37` 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.35/glasskit-droplet.js';
+  import { attachDroplets } from 'https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.37/glasskit-droplet.js';
   attachDroplets();
 </script>
 ```
@@ -588,9 +588,13 @@ All visual values are controlled via CSS Custom Properties:
 --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-leading-width         /* 28px, 40px with --lg: the leading box, for a time and a chip */
+--gl-avatar-size / --gl-avatar-font-size   /* an avatar's size and its initials; in a list's leading box 28px, 40px with --lg */
 --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-sheet-side-inset-block-start / -block-end   /* its top and bottom on their own; unset the side inset */
+--gl-sheet-close-size / --gl-sheet-close-icon-size / --gl-sheet-close-icon-stroke   /* 32px, 16px, 2: the sheet's close button */
 --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 */
@@ -949,7 +953,7 @@ 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__head > __leading / __heading (__eyebrow + __title + __subtitle) / __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)
 

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: glasskit-css
-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.
+description: GlassKit is a pure CSS glassmorphism component library (v1.37.0) with 38 components, Dark & Light mode, design tokens, and BEM-like naming. Use this reference whenever generating HTML that uses GlassKit classes to ensure correct structure, nesting, modifiers, and token usage.
 ---
 
 # GlassKit CSS – AI Component Reference
@@ -14,6 +14,10 @@ description: GlassKit is a pure CSS glassmorphism component library (v1.35.1) 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.37.0 — avatars that fit a list row, a placeholder for the select, a character counter.** `--gl-avatar-size` and `--gl-avatar-font-size` size `.glass-avatar` (3.9), and in a list row's `__leading` an avatar takes the box's size, 28px, 40px in `--lg` — a contact list (3.24). A first `<option value="" disabled hidden>` in a `.glass-select` shows in the placeholder colour (3.16). `.glass-input-group__counter` counts characters at the end of the label row, `.is-over` past `maxlength` (3.14).
+
+> **New in 1.36.0 — a sheet head with room below the title, tokens for its close button, insets per edge; a wider list icon box.** `.glass-sheet__subtitle` stands below the title in `__heading` (a badge there leaves the title its width), `--gl-sheet-close-size`, `--gl-sheet-close-icon-size` and `--gl-sheet-close-icon-stroke` resize the × (32px, 16px, 2), `--gl-sheet-side-inset-block-start`/`-block-end` set a side sheet's top and bottom on their own, and an empty `__head` with `hidden` takes no room (3.31). `--gl-list-leading-width` widens `__leading` for a time and a chip, the divider follows, and the chosen row's title takes the row's colour, so `--gl-list-item-selected-color` reaches it (3.24). `.glass-status p` has no margin of its own (3.11).
+
 > **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.**
@@ -889,6 +893,12 @@ Glass circles in three sizes. For initials, icons, or images.
 | `.glass-avatar--sm` | Small |
 | `.glass-avatar--lg` | Large |
 
+Sizes: 44px, `--sm` 32px, `--lg` 56px. **`--gl-avatar-size` (since 1.37.0)** sets any other size, on the avatar or a container around it, and `--gl-avatar-font-size` the initials' size with it. In the `__leading` box of a list row an avatar takes the box's size: 28px, and 40px in `--lg` — a contact list. Before, a 44px avatar was cut by the 40px box and a 32px one looked lost in it. A token on the avatar itself still decides.
+
+```html
+<span class="glass-list__leading glass-list__leading--lg"><span class="glass-avatar">LH</span></span>   <!-- 40px -->
+```
+
 ---
 
 ### 3.10 Divider
@@ -918,7 +928,7 @@ Info/notice card with icon and text.
 
 | Class | Description |
 |---|---|
-| `.glass-status` | Container with subtle glass surface; `--gl-status-color` sets the message's colour (since 1.35.0) |
+| `.glass-status` | Container with subtle glass surface; `--gl-status-color` sets the message's colour (since 1.35.0). The `p` has no margin of its own (since 1.36.0; the browser's 1em made the card 82px instead of 54px without a page reset) |
 
 ---
 
@@ -1097,6 +1107,7 @@ Date and time fields (`type="date"`, `time`, `datetime-local`, `month`) take the
 | `.glass-input-wrap--prefix` / `--suffix` | Makes room in the field; also automatic where `:has()` is supported |
 | `.glass-input-group--label-end` | The group draws `__label-end` on the label's line, at its end (since 1.33.0) |
 | `.glass-input-group__label-end` | A link such as "Forgot password?", written **after** the field so the keyboard reaches it after the field |
+| `.glass-input-group__counter` | A character counter in that place, "48/145", muted; `.is-over` past the limit in the error colour (since 1.37.0) |
 
 **Prefix and suffix (since 1.22.0).** The affixes lie on the field, centred; its padding grows by `--gl-input-prefix-size` / `--gl-input-suffix-size` (18px — an icon — unless set; set it for a wider unit). A click on text, an icon or a disabled control reaches the field; enabled controls, links and elements with `tabindex` take their own, form-associated custom elements such as `<glk-button>` included (since 1.22.2 — before, a disabled button took the click and a `<glk-button>` got none). They take it even inside a container locked with `pointer-events: none`: lock it with `inert`, or disable them. `<glk-input>` in GlassKit Elements has `prefix` / `suffix` slots on this and measures the width itself.
 
@@ -1122,6 +1133,16 @@ Date and time fields (`type="date"`, `time`, `datetime-local`, `month`) take the
 </div>
 ```
 
+**A character counter (since 1.37.0).** `.glass-input-group__counter` in that place counts the value's characters, "48/145" with `maxlength`, in the muted colour, and with `.is-over` past the limit in the error colour — a value set by script may be longer, `maxlength` only stops typing. Update it on `input`, and tie it to the field with `aria-describedby` so a screen reader reads it with the field. After a link in the same place it keeps its distance. In GlassKit Elements: `counter` on `<glk-input>` and `<glk-textarea>`.
+
+```html
+<div class="glass-input-group glass-input-group--label-end">
+  <label class="glass-label" for="meta">Meta description</label>
+  <textarea class="glass-textarea" id="meta" maxlength="145" aria-describedby="meta-count"></textarea>
+  <span class="glass-input-group__label-end glass-input-group__counter" id="meta-count">0/145</span>
+</div>
+```
+
 ---
 
 ### 3.15 Textarea
@@ -1158,6 +1179,15 @@ Dropdown with glass styling and custom chevron.
 
 The chevron is the token `--gl-select-chevron` — an SVG `url(…)` in each theme's muted text colour (since 1.20.0; before, it stayed white in the light theme). Override it with your own `url(…)`. Right to left, chevron and padding move to the left.
 
+**A placeholder (since 1.37.0)** is the native pattern: a first option with an empty value, `disabled` and `hidden`, `selected` while nothing is chosen. It cannot be picked, `required` keeps the form from submitting while it shows, and the field says it in the placeholder colour (`--gl-placeholder`), as an input does. **Do not** use a first real option such as "Please select…" for "nothing chosen": picking the option already shown changes nothing, so it cannot be chosen. In GlassKit Elements: `placeholder` on `<glk-select>`.
+
+```html
+<select class="glass-select" required>
+  <option value="" disabled hidden selected>Choose a kind…</option>
+  <option value="facebook">Facebook</option>
+</select>
+```
+
 ---
 
 ### 3.17 Search
@@ -1469,8 +1499,8 @@ iOS-style grouped settings list. Items can carry a leading icon, a title with op
 | `.glass-list__item--center` | Centered single-text variant with ellipsis truncation |
 | `.glass-list__item--danger` | Red text for destructive actions |
 | `.glass-list__item--accent` | Primary-colored text for accent actions |
-| `.glass-list__leading` | Leading slot (28×28, holds an icon SVG) |
-| `.glass-list__leading--lg` | Large leading slot (40×40, rounded square, supports `<img>`) |
+| `.glass-list__leading` | Leading slot (28×28, holds an icon SVG); `--gl-list-leading-width` widens it (since 1.36.0) |
+| `.glass-list__leading--lg` | Large leading slot (40×40, rounded square, supports `<img>`); the same token widens it |
 | `.glass-list__content` | Flexible middle slot — takes remaining width, enables truncation |
 | `.glass-list__title` | Primary text (medium weight, one line with ellipsis unless `--gl-list-title-white-space` lets it wrap) |
 | `.glass-list__subtitle` | Secondary text (small, muted, one line with ellipsis unless `--gl-list-subtitle-white-space` lets it wrap) |
@@ -1485,7 +1515,8 @@ iOS-style grouped settings list. Items can carry a leading icon, a title with op
 **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.
+- **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. Since 1.36.0 the title takes the row's colour, so `-color` reaches it (before, it kept the text colour).
+- **A wider leading box (since 1.36.0):** `--gl-list-leading-width` (28px, 40px with `--lg`) widens `__leading` for a time and a chip before the text, e.g. `84px` with `--lg`; the divider follows. It takes a length; for anything else set `--gl-list-item-divider-inset` too.
 - **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`.
@@ -1831,8 +1862,8 @@ 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__head` > `__leading`, `__heading` (`__eyebrow` + `__title` + `__subtitle`), `__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. Since 1.36.0 `__subtitle` holds a badge or a line below the title, `--gl-sheet-close-size`, `--gl-sheet-close-icon-size` and `--gl-sheet-close-icon-stroke` (32px, 16px, 2) resize the × and its glyph, and `__head[hidden]` takes no room (it kept 8px) |
+| `.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. `--gl-sheet-side-inset-block-start` and `-block-end` (since 1.36.0) set top and bottom on their own, below a fixed bar |
 | `.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) |