@jungherz-de/glasskit 1.30.0 → 1.31.0

package/CHANGELOG.md

@@ -7,6 +7,27 @@ GlassKit uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [1.31.0] – 2026-10-25
+
+### Added
+
+- **Hooks of the button's own: `--gl-btn-radius`.** `.glass-btn` took its corners from `--gl-radius-btn`, which `.glass-list`, `.glass-status`, `.glass-toast`, `.glass-accordion__item` and `.glass-segmented` share, so a project that wanted pill-shaped buttons turned lists, toasts and the segmented control into capsules as well; the height had a hook of its own, the radius none. `--gl-btn-radius` rounds the buttons alone, unset `--gl-radius-btn`; `--sm` reads `--gl-btn-radius-sm`, then `--gl-btn-radius`, and keeps its 12px while neither is set. The issue proposed the small size falling back to `--gl-radius-sm` directly; through `--gl-btn-radius` one value shapes every size, which an app builder that lets each app choose the shape of its buttons needs. Measured in Chromium 153, WebKit 26.6 and Firefox 151 with the issue's page: with `--gl-btn-radius: 9999px` on `:root` the buttons are round, while the list, the segmented control, the status card, the toast and the accordion item stay at 16px; `--gl-btn-radius-sm: 4px` changes the small buttons alone. ([#20](https://github.com/JUNGHERZ/GlassKit/issues/20))
+- **Room beside the label for every button: `--gl-btn-padding-x`.** Only `--auto` had a horizontal padding, 24px; every other button kept the browser's, 6px in Chromium and WebKit and 4px in Firefox. A small button whose width came from its text — in a row of actions, in an empty state, a GlassKit Elements `<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))
+- **A colour of the count's own in the segmented control: `.glass-segmented__badge--primary`, `--success`, `--warning`, `--error`**, and tokens for its size and hairline. The count could be coloured only through the option's tone, which also puts the dot before the label, or through its three colour tokens; its height (16px), its font size (11px) and the missing hairline were fixed. So a red count of new calls on an "Open" option without a dot, or a count as large as a `.glass-badge`, could not be had. The four classes give the count the look of the badge variants — the state tint over a doubled scrim, a hairline in the state colour, the readable text colour — without the dot; where the option has a tone too, the count's own colour wins. `--gl-segmented-badge-height` (16px, also its least width), `--gl-segmented-badge-font-size` (11px) and `--gl-segmented-badge-border` (a colour, drawn inside the neutral count, unset none) size and outline it. Measured in all three engines, the four colours reach 4.71:1 or more in both themes, inline, under the drop and at the icon's corner, on the chosen option and beside it; the new `--primary` 4.79:1 in the light theme and 5.10:1 in the dark one. ([#21](https://github.com/JUNGHERZ/GlassKit/issues/21))
+
+### Changed
+
+- **Muted text, card text and icons reach WCAG AA by default.** In the light theme `--gl-color-text-muted` read 3.41:1 on the page and 3.47:1 on glass, `--gl-card-text-color` 4.00:1 and `--gl-icon-muted` 2.05:1 — below the 4.5:1 text needs and the 3:1 of icons that carry a meaning; in the dark theme muted text read 4.45:1 on glass. Light: muted text 55 → 68 %, card text 60 → 68 %, icons muted 35 → 55 %, default 50 → 65 %, strong 70 → 80 % (the card icon and the tertiary icon follow the default), so the three steps keep their order; dark: muted text 60 → 65 %. The select's chevron follows the muted text in both. Measured with the issue's page in Chromium 153, WebKit 26.6 and Firefox 151: in the light theme muted text 4.97:1 on the page and 5.09:1 on glass, card text 5.09:1, icons 3.41, 4.54 and 7.23:1; in the dark theme muted text 5.88:1 and 4.92:1. Two points of the issue were decided otherwise. `--gl-color-primary-text` stays the primary: GlassKit's light orange reads 2.43:1 as text, but a fixed mix with black would darken every brand alike and a darker one far more than it needs, a pink at 4.33:1 to 8.79:1; docs, README and SKILL.md show the recipe for a light theme that keeps the orange (`--gl-color-primary-on-surface`, 5.8:1). White on the primary button stays part of the look, as decided in 1.7.0 (2.68:1 light, 2.03:1 dark on the lightest stop of the gradient); the docs now show the dark ink as well, 4.6:1 or more on every stop. ([#19](https://github.com/JUNGHERZ/GlassKit/issues/19))
+
+### Compatibility
+
+- Small buttons that take their width from their text grow by 36px: in the docs and the showcase of GlassKit Elements "Small" from 51 to 87px and "Book" from 48 to 84px, and a row of three that fit the showcase's narrow column in one line now breaks into two. Plain markup changes only where a container shrinks a `.glass-btn` without `--auto` to its text. `--gl-btn-padding-x-sm` or `--gl-btn-padding-x` set another value.
+- The light theme reads firmer: muted text, card text and icons are darker; in the dark theme muted text is a little brighter. A page that copies GlassKit's light tokens — the no-JS `prefers-color-scheme` mirror of GlassKit Web — updates its copies of these seven tokens and the chevron.
+
+Docs (English and German), README, SKILL.md and `theme-override.css` describe the hooks, the colours of the count and the contrast. With the raised tokens and the chevron set back to their 1.30.0 values, docs, showcase and landing pages render pixel-identical to 1.30.0 in Chromium 153, WebKit 26.6 and Firefox 151 — in Chromium section by section, where full-page captures differ by rasterisation — apart from the new docs example of the coloured count.
+
+---
+
 ## [1.30.0] – 2026-10-22
 
 ### Added
@@ -1198,6 +1219,7 @@ during development. Version 1.3 is the first public open-source release.
 
 ---
 
+[1.31.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.31.0
 [1.30.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.30.0
 [1.29.1]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.29.1
 [1.29.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.29.0
@@ -1241,4 +1263,4 @@ during development. Version 1.3 is the first public open-source release.
 [1.3.2]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.2
 [1.3.1]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.1
 [1.3.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.0
-[Unreleased]: https://github.com/JUNGHERZ/GlassKit/compare/v1.30.0...HEAD
+[Unreleased]: https://github.com/JUNGHERZ/GlassKit/compare/v1.31.0...HEAD

package/README.md

@@ -1,9 +1,9 @@
 <p align="center">
-  <img src="https://img.shields.io/badge/version-1.30.0-orange?style=flat-square" alt="Version">
+  <img src="https://img.shields.io/badge/version-1.31.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-34-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.30.0-f5a623?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.31.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>
@@ -73,22 +73,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.30/glasskit.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.31/glasskit.min.css">
 
 <!-- jsDelivr – Unminified (for reading/debugging) -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.30/glasskit.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.31/glasskit.css">
 
 <!-- unpkg – Alternative -->
-<link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.30/glasskit.min.css">
+<link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.31/glasskit.min.css">
 ```
 
-> **Tip:** Replace `@1.30` with `@latest` for the newest version – or pin to a specific version for maximum stability.
+> **Tip:** Replace `@1.31` 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.30/glasskit-droplet.js';
+  import { attachDroplets } from 'https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.31/glasskit-droplet.js';
   attachDroplets();
 </script>
 ```
@@ -322,6 +322,8 @@ a later declaration if you want to bend one.
 
 `--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`.
 
+**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.
+
 The `theme-override.css` template comes with **4 example themes**:
 - 🔵 Ocean Blue
 - 🟢 Emerald Green
@@ -459,6 +461,10 @@ All visual values are controlled via CSS Custom Properties:
 
 /* Component hooks */
 --gl-modal-max-width      /* 340px */
+--gl-btn-radius            /* buttons alone; unset: --gl-radius-btn, shared with lists, toasts, the segmented control */
+--gl-btn-radius-sm         /* --sm; unset: --gl-btn-radius, then --gl-radius-sm */
+--gl-btn-padding-x         /* room beside the label; unset: 24px */
+--gl-btn-padding-x-sm      /* --sm; unset: --gl-btn-padding-x */
 --gl-select-chevron       /* url(…) per theme */
 --gl-toast-top            /* distance of the toast from the top */
 --gl-input-prefix-size    /* room for an input prefix, 18px */
@@ -487,6 +493,9 @@ All visual values are controlled via CSS Custom Properties:
 --gl-segmented-active-color     /* label and icon of the chosen option; unset: --gl-color-text-heading */
 --gl-segmented-badge-bg         /* tint of a neutral count over the state scrim; unset: 12 % of the text colour */
 --gl-segmented-badge-color      /* its figures; unset: --gl-color-text */
+--gl-segmented-badge-height     /* 16px, also its least width */
+--gl-segmented-badge-font-size  /* 11px */
+--gl-segmented-badge-border     /* hairline inside a neutral count; unset: none */
 --gl-list-flush-inset           /* how far a --flush list reaches out; set by the card and the modal body, else 20px */
 --gl-gloss-droplet              /* highlight in the drop of --droplet rows; off with data-surface */
 ```
@@ -790,7 +799,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
+  .glass-segmented--full / --scroll / --wrap / --icons · __item[aria-pressed] · __item--success / --warning / --error · __dot · __icon · __badge (--primary / --success / --warning / --error)
   .glass-segmented--droplet        (gliding selection, with glasskit-droplet.js)
 
 Steps:

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: glasskit-css
-description: GlassKit is a pure CSS glassmorphism component library (v1.30.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.
+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.
 ---
 
 # GlassKit CSS – AI Component Reference
@@ -148,7 +148,7 @@ All visual values are controlled via CSS Custom Properties. For custom theming,
 | `--gl-color-primary-dark` | `#d4692a` | `#c96a1e` | Gradient end value |
 | `--gl-color-primary-mid` | derived → `#e07a24` | derived → `#d97826` | Gradient midpoint, mixed from primary + primary-dark |
 | `--gl-color-text` | `#ffffff` | `#1a2a36` | Default text color |
-| `--gl-color-text-muted` | `rgba(255,255,255,0.60)` | `rgba(26,42,54,0.55)` | Secondary text |
+| `--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 %) |
 | `--gl-color-text-heading` | `#ffffff` | `#0f1f2a` | Headings |
 | `--gl-color-success` | `#34c759` | `#28a745` | Success |
 | `--gl-color-error` | `#ff3b30` | `#dc3545` | Error |
@@ -198,6 +198,8 @@ fully-translucent pre-1.7.0 chip.
 >
 > That reaches 4,62:1. Badges are unaffected — they already pass by default.
 
+> **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.
+
 > **Do not put text in `--gl-color-success` / `--error` / `--primary` on a tinted
 > surface.** Those values are fills. Use the matching `-on-surface` token, which is what
 > `.glass-badge--*` does.
@@ -265,7 +267,7 @@ The same in both themes; `data-surface="solid"` sets them to `none` (the thumb's
 | `--gl-radius-xs` | `8px` | Small elements |
 | `--gl-radius-sm` | `12px` | Badges, small containers |
 | `--gl-radius-input` | `14px` | Inputs, textareas |
-| `--gl-radius-btn` | `16px` | Buttons |
+| `--gl-radius-btn` | `16px` | Buttons (since 1.31.0 through `--gl-btn-radius`), lists, status card, toasts, accordion, segmented control |
 | `--gl-radius-card` | `24px` | Cards |
 | `--gl-radius-full` | `9999px` | Fully rounded |
 | `--gl-radius-pill` | `50%` | Circle shape |
@@ -630,6 +632,8 @@ Full-width buttons (56px height) with three variants and size modifiers.
 
 **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).
 
+**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.
+
 **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>`.
 
 **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>`.
@@ -1455,6 +1459,7 @@ More options than fit — seven areas on a phone: without a modifier the row sta
 | `.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--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) |
 | `.glass-segmented--droplet` | The chosen option sits on a drop of glass that glides to the next one (since 1.27.0) — recommended |
 
 **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
 </div>
 ```
 
-**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.
+**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.
 
 ```html
 <button class="glass-segmented__item glass-segmented__item--warning" aria-pressed="false" aria-label="Tickets, 1 open">
@@ -2126,6 +2131,8 @@ Key points in this composition:
 | 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) |
 | Restyling the chosen segmented option for a dark brand | `--gl-segmented-active-bg`, `-color`, `-shadow` (since 1.28.0) |
 | 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) |
+| 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) |
+| `--gl-radius-btn` set for pill-shaped buttons | `--gl-btn-radius: 9999px` — lists, toasts and the segmented control keep theirs (since 1.31.0) |
 | 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` |
 
 ---