@jungherz-de/glasskit 1.29.1 → 1.31.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +39 -1
  2. package/README.md +18 -8
  3. package/SKILL.md +14 -5
  4. package/glasskit-styles.js +3 -3
  5. package/glasskit.css +108 -23
  6. package/glasskit.min.css +2 -2
  7. package/glasskit.min.css.map +1 -1
  8. package/package.json +1 -1
  9. package/theme-override.css +18 -0
package/CHANGELOG.md CHANGED
@@ -7,6 +7,42 @@ GlassKit uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
8
  ---
9
9
 
10
+ ## [1.31.0] – 2026-10-25
11
+
12
+ ### Added
13
+
14
+ - **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))
15
+ - **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 `<glk-button size="sm">` 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))
16
+ - **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))
17
+
18
+ ### Changed
19
+
20
+ - **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))
21
+
22
+ ### Compatibility
23
+
24
+ - 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.
25
+ - 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.
26
+
27
+ 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.
28
+
29
+ ---
30
+
31
+ ## [1.30.0] – 2026-10-22
32
+
33
+ ### Added
34
+
35
+ - **The sheet's overlay can be a native `<dialog>`, 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 `<dialog class="glass-sheet-overlay">` 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' `<glk-sheet>` 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))
36
+
37
+ ### Fixed
38
+
39
+ - **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 `<glk-accordion-item>` 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))
40
+ - **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.
41
+
42
+ 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).
43
+
44
+ ---
45
+
10
46
  ## [1.29.1] – 2026-10-21
11
47
 
12
48
  ### Fixed
@@ -1183,6 +1219,8 @@ during development. Version 1.3 is the first public open-source release.
1183
1219
 
1184
1220
  ---
1185
1221
 
1222
+ [1.31.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.31.0
1223
+ [1.30.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.30.0
1186
1224
  [1.29.1]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.29.1
1187
1225
  [1.29.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.29.0
1188
1226
  [1.28.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.28.0
@@ -1225,4 +1263,4 @@ during development. Version 1.3 is the first public open-source release.
1225
1263
  [1.3.2]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.2
1226
1264
  [1.3.1]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.1
1227
1265
  [1.3.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.0
1228
- [Unreleased]: https://github.com/JUNGHERZ/GlassKit/compare/v1.29.1...HEAD
1266
+ [Unreleased]: https://github.com/JUNGHERZ/GlassKit/compare/v1.31.0...HEAD
package/README.md CHANGED
@@ -1,9 +1,9 @@
1
1
  <p align="center">
2
- <img src="https://img.shields.io/badge/version-1.29.1-orange?style=flat-square" alt="Version">
2
+ <img src="https://img.shields.io/badge/version-1.31.0-orange?style=flat-square" alt="Version">
3
3
  <img src="https://img.shields.io/badge/CSS-only-blue?style=flat-square" alt="CSS only">
4
4
  <img src="https://img.shields.io/badge/components-34-green?style=flat-square" alt="Components">
5
5
  <img src="https://img.shields.io/badge/license-MIT-lightgrey?style=flat-square" alt="License">
6
- <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.29.1-f5a623?style=flat-square" alt="Changelog"></a>
6
+ <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.31.0-f5a623?style=flat-square" alt="Changelog"></a>
7
7
  <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>
8
8
  <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>
9
9
  </p>
@@ -73,22 +73,22 @@ No download, no build tool – just include and go:
73
73
 
74
74
  ```html
75
75
  <!-- jsDelivr – Minified -->
76
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.29/glasskit.min.css">
76
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.31/glasskit.min.css">
77
77
 
78
78
  <!-- jsDelivr – Unminified (for reading/debugging) -->
79
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.29/glasskit.css">
79
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.31/glasskit.css">
80
80
 
81
81
  <!-- unpkg – Alternative -->
82
- <link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.29/glasskit.min.css">
82
+ <link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.31/glasskit.min.css">
83
83
  ```
84
84
 
85
- > **Tip:** Replace `@1.29` with `@latest` for the newest version – or pin to a specific version for maximum stability.
85
+ > **Tip:** Replace `@1.31` with `@latest` for the newest version – or pin to a specific version for maximum stability.
86
86
 
87
87
  The [droplet](#-droplet-a-fluid-selection) takes one optional module next to the stylesheet:
88
88
 
89
89
  ```html
90
90
  <script type="module">
91
- import { attachDroplets } from 'https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.29/glasskit-droplet.js';
91
+ import { attachDroplets } from 'https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.31/glasskit-droplet.js';
92
92
  attachDroplets();
93
93
  </script>
94
94
  ```
@@ -322,6 +322,8 @@ a later declaration if you want to bend one.
322
322
 
323
323
  `--gl-tab-bar-active-color` colours the icon and label of the active tab alone, for a spotlight that needs a lighter tone still; unset, they take `--gl-color-primary-text`.
324
324
 
325
+ **Contrast (since 1.31.0).** Muted text, card text and icons reach WCAG AA by default in both themes — text 4.5:1, icons with a meaning 3:1, on the page and on glass. The primary as text keeps the primary: GlassKit's light orange reads 2.43:1 as text, but a fixed mix would darken every brand alike, so a light theme that keeps the orange sets `[data-theme="light"] { --gl-color-primary-text: var(--gl-color-primary-on-surface); }` (5.8:1). White on the primary button stays part of the look; `--gl-color-on-primary: color-mix(in srgb, var(--gl-color-primary) 17%, #000)` switches it to a dark ink with 4.6:1 or more.
326
+
325
327
  The `theme-override.css` template comes with **4 example themes**:
326
328
  - 🔵 Ocean Blue
327
329
  - 🟢 Emerald Green
@@ -459,6 +461,10 @@ All visual values are controlled via CSS Custom Properties:
459
461
 
460
462
  /* Component hooks */
461
463
  --gl-modal-max-width /* 340px */
464
+ --gl-btn-radius /* buttons alone; unset: --gl-radius-btn, shared with lists, toasts, the segmented control */
465
+ --gl-btn-radius-sm /* --sm; unset: --gl-btn-radius, then --gl-radius-sm */
466
+ --gl-btn-padding-x /* room beside the label; unset: 24px */
467
+ --gl-btn-padding-x-sm /* --sm; unset: --gl-btn-padding-x */
462
468
  --gl-select-chevron /* url(…) per theme */
463
469
  --gl-toast-top /* distance of the toast from the top */
464
470
  --gl-input-prefix-size /* room for an input prefix, 18px */
@@ -487,6 +493,9 @@ All visual values are controlled via CSS Custom Properties:
487
493
  --gl-segmented-active-color /* label and icon of the chosen option; unset: --gl-color-text-heading */
488
494
  --gl-segmented-badge-bg /* tint of a neutral count over the state scrim; unset: 12 % of the text colour */
489
495
  --gl-segmented-badge-color /* its figures; unset: --gl-color-text */
496
+ --gl-segmented-badge-height /* 16px, also its least width */
497
+ --gl-segmented-badge-font-size /* 11px */
498
+ --gl-segmented-badge-border /* hairline inside a neutral count; unset: none */
490
499
  --gl-list-flush-inset /* how far a --flush list reaches out; set by the card and the modal body, else 20px */
491
500
  --gl-gloss-droplet /* highlight in the drop of --droplet rows; off with data-surface */
492
501
  ```
@@ -790,7 +799,7 @@ Prose:
790
799
  .glass-prose (styles the rendered content beneath it)
791
800
 
792
801
  Segmented:
793
- .glass-segmented--full / --scroll / --wrap / --icons · __item[aria-pressed] · __item--success / --warning / --error · __dot · __icon · __badge
802
+ .glass-segmented--full / --scroll / --wrap / --icons · __item[aria-pressed] · __item--success / --warning / --error · __dot · __icon · __badge (--primary / --success / --warning / --error)
794
803
  .glass-segmented--droplet (gliding selection, with glasskit-droplet.js)
795
804
 
796
805
  Steps:
@@ -798,6 +807,7 @@ Steps:
798
807
 
799
808
  Sheet:
800
809
  .glass-sheet-overlay.is-active · .glass-sheet--inline · __grip / __title / __body / __actions
810
+ dialog.glass-sheet-overlay (a native <dialog>, opened with showModal(), since 1.30.0)
801
811
 
802
812
  Empty state:
803
813
  .glass-empty__icon / __title / __text / __action
package/SKILL.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: glasskit-css
3
- description: GlassKit is a pure CSS glassmorphism component library (v1.29.1) with 34 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.
3
+ description: GlassKit is a pure CSS glassmorphism component library (v1.31.0) with 34 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.
4
4
  ---
5
5
 
6
6
  # GlassKit CSS – AI Component Reference
@@ -148,7 +148,7 @@ All visual values are controlled via CSS Custom Properties. For custom theming,
148
148
  | `--gl-color-primary-dark` | `#d4692a` | `#c96a1e` | Gradient end value |
149
149
  | `--gl-color-primary-mid` | derived → `#e07a24` | derived → `#d97826` | Gradient midpoint, mixed from primary + primary-dark |
150
150
  | `--gl-color-text` | `#ffffff` | `#1a2a36` | Default text color |
151
- | `--gl-color-text-muted` | `rgba(255,255,255,0.60)` | `rgba(26,42,54,0.55)` | Secondary text |
151
+ | `--gl-color-text-muted` | `rgba(255,255,255,0.65)` | `rgba(26,42,54,0.68)` | Secondary text — 4.5:1 on the page and on glass since 1.31.0 (before 60 % / 55 %) |
152
152
  | `--gl-color-text-heading` | `#ffffff` | `#0f1f2a` | Headings |
153
153
  | `--gl-color-success` | `#34c759` | `#28a745` | Success |
154
154
  | `--gl-color-error` | `#ff3b30` | `#dc3545` | Error |
@@ -198,6 +198,8 @@ fully-translucent pre-1.7.0 chip.
198
198
  >
199
199
  > That reaches 4,62:1. Badges are unaffected — they already pass by default.
200
200
 
201
+ > **AA by default since 1.31.0** for muted text (`--gl-color-text-muted` 65 % dark / 68 % light), card text (68 % light) and icons (light: muted 55 %, default 65 %, strong 80 %) — text 4.5:1, icons with a meaning 3:1, on the page and on glass. Not for `--gl-color-primary-text`: the light orange reads 2.43:1 as text, but a fixed mix would darken every brand alike. Where a light theme keeps the orange, set `[data-theme="light"] { --gl-color-primary-text: var(--gl-color-primary-on-surface); }` (5.8:1). Never lower the muted tokens again for a lighter look; the inactive tab labels (10px, `--gl-icon-muted`) stay below 4.5:1 — `--gl-tab-bar-color` raises them.
202
+
201
203
  > **Do not put text in `--gl-color-success` / `--error` / `--primary` on a tinted
202
204
  > surface.** Those values are fills. Use the matching `-on-surface` token, which is what
203
205
  > `.glass-badge--*` does.
@@ -265,7 +267,7 @@ The same in both themes; `data-surface="solid"` sets them to `none` (the thumb's
265
267
  | `--gl-radius-xs` | `8px` | Small elements |
266
268
  | `--gl-radius-sm` | `12px` | Badges, small containers |
267
269
  | `--gl-radius-input` | `14px` | Inputs, textareas |
268
- | `--gl-radius-btn` | `16px` | Buttons |
270
+ | `--gl-radius-btn` | `16px` | Buttons (since 1.31.0 through `--gl-btn-radius`), lists, status card, toasts, accordion, segmented control |
269
271
  | `--gl-radius-card` | `24px` | Cards |
270
272
  | `--gl-radius-full` | `9999px` | Fully rounded |
271
273
  | `--gl-radius-pill` | `50%` | Circle shape |
@@ -630,6 +632,8 @@ Full-width buttons (56px height) with three variants and size modifiers.
630
632
 
631
633
  **Heights** are density tokens: `--gl-btn-height`, `-sm`, `-lg` — 56 / 44 / 64px, or 40 / 32 / 48px with `data-density="compact"` on `<html>` (since 1.21.0).
632
634
 
635
+ **Shape and room (since 1.31.0)** are button hooks: `--gl-btn-radius` (unset `--gl-radius-btn`, which lists, the status card, toasts, the accordion and the segmented control share — so `--gl-btn-radius: 9999px` gives pill buttons and nothing else changes; never set `--gl-radius-btn` for that) and `--gl-btn-padding-x`, the room beside the label (unset 24px; before, only `--auto` had it and every other button the browser's 6px, so a small button sized by its text touched it). `--sm` reads `--gl-btn-radius-sm` and `--gl-btn-padding-x-sm` first, then those, and keeps its 12px radius while none is set.
636
+
633
637
  **Icons:** Button SVGs need **no inline `fill`/`stroke` attributes** – GlassKit styles them automatically: outline style (`fill: none; stroke: currentColor; stroke-width: 2`, round caps/joins) as the default, `--secondary`/`--tertiary` use their icon tokens, `--primary` renders icons filled. For deliberately filled icons (e.g. brand logos like the GitHub mark) add `glass-icon--fill` to the `<svg>`.
634
638
 
635
639
  **Links as buttons:** `.glass-btn` also works on `<a>` elements – anchors render as `inline-flex` with `text-decoration: none`, so `--auto` shrink-wraps exactly like on a real `<button>`.
@@ -1171,7 +1175,7 @@ Collapsible content sections. Controlled via `is-open` on items.
1171
1175
  | `.glass-accordion__item.is-open` | Expanded item |
1172
1176
  | `.glass-accordion__trigger` | Clickable header button |
1173
1177
  | `.glass-accordion__trigger-icon` | Chevron icon (rotates on open) |
1174
- | `.glass-accordion__content` | Wrapper for animated height |
1178
+ | `.glass-accordion__content` | Wrapper for the animated height: a one-row grid from `0fr` to `1fr`, so an open item takes its content's height however long (since 1.30.0; before, it ended at 500px). Never add a `max-height` of your own |
1175
1179
  | `.glass-accordion__body` | Actual content |
1176
1180
 
1177
1181
  ---
@@ -1455,6 +1459,7 @@ More options than fit — seven areas on a phone: without a modifier the row sta
1455
1459
  | `.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 |
1456
1460
  | `.glass-segmented--icons` | Icons alone, square options; each option's name in `aria-label` and `title` (since 1.28.0) |
1457
1461
  | `.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) |
1462
+ | `.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) |
1458
1463
  | `.glass-segmented--droplet` | The chosen option sits on a drop of glass that glides to the next one (since 1.27.0) — recommended |
1459
1464
 
1460
1465
  **Icons (since 1.28.0).** `.glass-segmented__icon` inside an option shows an icon before its label, in the option's colour; under the drop it grows like the tone dot. Mark it `aria-hidden="true"`. `--icons` on the row is for options that show their icon alone — a light / dark / auto switch: the options become square, and each carries its name as `aria-label` (and `title`, for the pointer).
@@ -1470,7 +1475,7 @@ More options than fit — seven areas on a phone: without a modifier the row sta
1470
1475
  </div>
1471
1476
  ```
1472
1477
 
1473
- **Counts (since 1.29.0).** `.glass-segmented__badge` after an option's label shows how much waits behind it — open invoices, new tickets — where the tone dot only says that something does. A small pill in tabular figures, inline, so a scrolling row and the drop measure the option with it. Neutral without a tone (a tint of the text colour over the state scrim; `--gl-segmented-badge-bg` and `--gl-segmented-badge-color`, both colours), the state tint of `.glass-badge` with one. Inside `.glass-segmented__icon` it sits at the icon's corner, as on the tab bar, and is opaque there — the place for an `--icons` row. Never put the count into the label text ("Tickets (1)"): it can then be neither styled nor announced apart. The number is no name, so give the option an `aria-label` that says it.
1478
+ **Counts (since 1.29.0).** `.glass-segmented__badge` after an option's label shows how much waits behind it — open invoices, new tickets — where the tone dot only says that something does. A small pill in tabular figures, inline, so a scrolling row and the drop measure the option with it. Neutral without a tone (a tint of the text colour over the state scrim; `--gl-segmented-badge-bg` and `--gl-segmented-badge-color`, both colours), the state tint of `.glass-badge` with one. Inside `.glass-segmented__icon` it sits at the icon's corner, as on the tab bar, and is opaque there — the place for an `--icons` row. Never put the count into the label text ("Tickets (1)"): it can then be neither styled nor announced apart. The number is no name, so give the option an `aria-label` that says it. **Colours and size (since 1.31.0):** `.glass-segmented__badge--primary`, `--success`, `--warning` and `--error` colour the count alone — the look of the badge variants, without the dot a tone puts before the label; 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: a hairline drawn inside the neutral count, unset none). All four colours reach 4.7:1 or more in both themes, inline and at the corner, chosen or not.
1474
1479
 
1475
1480
  ```html
1476
1481
  <button class="glass-segmented__item glass-segmented__item--warning" aria-pressed="false" aria-label="Tickets, 1 open">
@@ -1534,6 +1539,8 @@ The bottom sheet (since 1.15.0) — the mobile sibling of the modal: `.glass-she
1534
1539
 
1535
1540
  Show: remove `hidden`, force a reflow (`void overlay.offsetHeight`), add `.is-active` on the next animation frame. Hide: remove `.is-active`, set `hidden` after `transitionend` on the panel (fallback 400 ms), immediately under reduced motion. Close on scrim click and Escape. `<glk-sheet>` in GlassKit Elements does all of this.
1536
1541
 
1542
+ **As a `<dialog>` (since 1.30.0) — prefer it.** The overlay may be a native `<dialog class="glass-sheet-overlay">`, as the modal's: opened with `showModal()` it lies in the top layer, above every fixed or transformed element of the page whatever its `z-index` (a fixed tab bar with a backdrop filter could land above a fixed `div` on iOS), the page behind it is inert, and Escape arrives as the `cancel` event. `dialog.glass-sheet-overlay` undoes the dialog's box and backdrop and keeps its overflow hidden. Show with `showModal()`, then `.is-active` on the next frame; hide by removing `.is-active` and calling `close()` after the panel's `transitionend`. The panel then needs no `role` of its own; name the dialog with `aria-labelledby`. Lock the page's scrolling while it is open (`overflow: hidden` on `<html>`), or a wheel over the scrim still scrolls the page.
1543
+
1537
1544
  | Class | Description |
1538
1545
  |---|---|
1539
1546
  | `.glass-sheet-overlay` | Fixed overlay: scrim, blur, panel at the bottom; starts at opacity 0 |
@@ -2124,6 +2131,8 @@ Key points in this composition:
2124
2131
  | Overriding the tab label's `font-size` or the bar's `z-index` | `--gl-tab-bar-label-size`, `--gl-tab-bar-z-index` (since 1.28.0) |
2125
2132
  | Restyling the chosen segmented option for a dark brand | `--gl-segmented-active-bg`, `-color`, `-shadow` (since 1.28.0) |
2126
2133
  | A count in a segmented label, "Tickets (1)" | `.glass-segmented__badge` after the label, the count in the option's `aria-label` (since 1.29.0) |
2134
+ | A tone on the option only to colour its count, or `--gl-segmented-badge-bg` / `-color` set to a state colour | `.glass-segmented__badge--error` (or `--primary`, `--success`, `--warning`) — no dot (since 1.31.0) |
2135
+ | `--gl-radius-btn` set for pill-shaped buttons | `--gl-btn-radius: 9999px` — lists, toasts and the segmented control keep theirs (since 1.31.0) |
2127
2136
  | Overriding `height` of `.glass-btn`, `.glass-input` etc. for a denser UI | `data-density="compact"` on `<html>`, or set a density token — toggle thumb and label alignment follow the tokens, not a hand-set `height` |
2128
2137
 
2129
2138
  ---