@jungherz-de/glasskit 1.35.0 → 1.36.0

package/CHANGELOG.md

@@ -7,6 +7,52 @@ GlassKit uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [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
+
+- **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
@@ -1468,6 +1514,8 @@ during development. Version 1.3 is the first public open-source release.
 
 ---
 
+[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
 [1.33.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.33.0

package/README.md

@@ -1,9 +1,9 @@
 <p align="center">
-  <img src="https://img.shields.io/badge/version-1.35.0-orange?style=flat-square" alt="Version">
+  <img src="https://img.shields.io/badge/version-1.36.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.0-f5a623?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.36.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.36/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.36/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.36/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.36` 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.36/glasskit-droplet.js';
   attachDroplets();
 </script>
 ```
@@ -588,9 +588,12 @@ 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-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 +952,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.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.36.0) with 38 components, Dark & Light mode, design tokens, and BEM-like naming. Use this reference whenever generating HTML that uses GlassKit classes to ensure correct structure, nesting, modifiers, and token usage.
 ---
 
 # GlassKit CSS – AI Component Reference
@@ -14,6 +14,8 @@ description: GlassKit is a pure CSS glassmorphism component library (v1.35.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.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.**
@@ -918,7 +920,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) |
 
 ---
 
@@ -1469,8 +1471,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 +1487,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 +1834,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) |