@jungherz-de/glasskit 1.23.0 → 1.25.0

package/CHANGELOG.md

@@ -7,6 +7,38 @@ GlassKit uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [1.25.0] – 2026-10-16
+
+### Added
+
+- **Tint surfaces: `data-surface="tint"`.** The solid preset mixes each surface over `--gl-color-bg-mid`, which fits a page whose background is the theme's middle colour. On a page with a background of its own — a brand colour, a photo, a pattern — an opaque surface stood out as a foreign block. The tint preset makes the surfaces in the flow of the page see-through tints of the text colour (`--gl-surface-1` … `-5` at 4, 6, 9, 12 and 16 %, the card glow likewise), nothing blurred: a field on a card stays as see-through as the card, and its contrast follows the text. What lies over other content keeps the solid values — modal, sheet, popover, toast and the tab bars, with the fields and rows inside them — and so do the milk surfaces, because a see-through secondary button would lose its dark text on a dark page. The solid values are kept as `--gl-solid-surface-1` … `-5` and `--gl-solid-card-glow-*` and follow `--gl-color-bg-mid`, so a brand sets that to its own colour. The solid preset is built on them now and renders pixel-identical to 1.24.0. Measured in Chromium, WebKit and Firefox, in both themes: of 19 elements rendered over red and over blue — plain and GlassKit Elements, one nested `data-theme` scope among them — the ones in the flow show the page through, while the panels, the secondary button and a field inside a popover do not; `<glk-modal>`'s panel is opaque inside its shadow root; nothing is blurred. The showcase switch has a third option. ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11))
+- **`--gl-blur-overlay`, a blur behind dialogs that the presets leave alone.** `.glass-modal-overlay` and `.glass-sheet-overlay` blur with it where it is set, else with `--gl-blur-soft` as before, which the surface presets set to `0`. A blurred dimmer suits a page without glass as well. ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11))
+- **Toggle track tokens:** `--gl-toggle-track-bg` and `--gl-toggle-track-bg-checked`; unset, `--gl-surface-2` and the primary gradient. ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11))
+- **Radio tokens:** `--gl-radio-bg`, `--gl-radio-bg-checked`, `--gl-radio-border`, `--gl-radio-border-checked`, `--gl-radio-dot-size` and `--gl-radio-dot-color`; unset, today's values. A ring in the text colour that turns the accent colour takes six declarations, shown in the docs. ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11))
+- **`--gl-textarea-field-sizing`:** `content` lets text areas grow with their text where `field-sizing` is supported. It is off by default because it ignores `rows`: a text area with `rows="8"` would shrink from 214 to 120 px. ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11))
+- **`--gl-input-picker-icon`:** `none` hides Chromium's picker button of date and time fields, and the arrow of a datalist, for a field whose prefix is the picker. Unset, every browser keeps its own (`revert`). ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11))
+
+### Fixed
+
+- **An empty `.glass-label` takes no room.** It kept the input group's 8px gap above its field. ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11))
+- **A long value or placeholder in `.glass-input` ends in an ellipsis** while the field is not being edited, instead of being cut off. ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11))
+- **A read-only or disabled text area has no resize handle.** ([#11](https://github.com/JUNGHERZ/GlassKit/issues/11))
+
+With the presets and the new tokens unset, docs, showcase and landing pages of GlassKit and GlassKit Elements render pixel-identical to 1.24.0 in Chromium and WebKit.
+
+---
+
+## [1.24.0] – 2026-10-14
+
+### Added
+
+- **Solid surfaces: `data-surface="solid"`.** GlassKit had one look, glass. An app that needed opaque surfaces — admin screens, forms on a plain background, designs without glass — built that variant itself and had to check it on every release, since a new literal could slip past it. The preset on `<html>`, next to `data-theme` and `data-density`, makes every surface opaque and turns blur and gloss off. Each surface (`--gl-surface-1` … `-5`, the milk surfaces, the card glow) takes the colour the glass shows over the theme's middle background, `--gl-color-bg-mid`, so the surfaces keep their order and a re-branded background carries over. `--gl-blur*` are `0px`; the `--gl-inset-*` shine, the gloss, the white glow in `--gl-shadow-glow` and the see-through toggle thumb are gone. Borders, drop shadows, the tints of badges and chips and the dimming overlay stay. A theme scope inside the page — an element with its own `data-theme` — stays solid. The preset is tokens only, so a project tunes it like a theme, and `build-styles-js.mjs` puts both of its blocks into `tokensCss`, so it also reaches pages that load only GlassKit Elements. Measured in Chromium, WebKit and Firefox, in both themes: 40 components, plain and as GlassKit Elements, each rendered once over red and once over blue, show the same pixels inside (with glass, all 40 differ), and every `backdrop-filter` computes to `blur(0px)`. The docs have a preview, the showcase a Glass / Solid switch. ([#9](https://github.com/JUNGHERZ/GlassKit/issues/9))
+- **The gloss is made of tokens.** `--gl-gloss-card` (the highlight along the top edge of the glow card), `--gl-gloss-modal` (the same on the modal), `--gl-gloss-progress` (the sheen on the progress fill) and `--gl-range-thumb-border` (the rim of the range thumb) were literals that no skin could reach. Their defaults are the old values. ([#9](https://github.com/JUNGHERZ/GlassKit/issues/9))
+
+With the attribute unset, the stylesheet renders pixel-identical to 1.23.0, measured on the docs, showcase and landing pages of GlassKit and GlassKit Elements in Chromium and WebKit.
+
+---
+
 ## [1.23.0] – 2026-10-14
 
 ### Added
@@ -1085,6 +1117,8 @@ during development. Version 1.3 is the first public open-source release.
 
 ---
 
+[1.25.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.25.0
+[1.24.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.24.0
 [1.23.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.23.0
 [1.22.2]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.22.2
 [1.22.1]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.22.1
@@ -1120,4 +1154,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.23.0...HEAD
+[Unreleased]: https://github.com/JUNGHERZ/GlassKit/compare/v1.25.0...HEAD

package/README.md

@@ -1,9 +1,9 @@
 <p align="center">
-  <img src="https://img.shields.io/badge/version-1.23.0-orange?style=flat-square" alt="Version">
+  <img src="https://img.shields.io/badge/version-1.25.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.23.0-f5a623?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.25.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>
@@ -72,16 +72,16 @@ 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.23/glasskit.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.25/glasskit.min.css">
 
 <!-- jsDelivr – Unminified (for reading/debugging) -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.23/glasskit.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.25/glasskit.css">
 
 <!-- unpkg – Alternative -->
-<link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.23/glasskit.min.css">
+<link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.25/glasskit.min.css">
 ```
 
-> **Tip:** Replace `@1.23` with `@latest` for the newest version – or pin to a specific version for maximum stability.
+> **Tip:** Replace `@1.25` with `@latest` for the newest version – or pin to a specific version for maximum stability.
 
 ### npm / yarn / pnpm
 
@@ -318,6 +318,34 @@ Every token can also be set on its own, for one density or both — the toggle's
 
 Like `data-theme`, keep `data-density` on `<html>`: an element further down that carries `data-theme="dark"` re-declares the dark block, the default sizes included.
 
+### Solid and tint surfaces
+
+Not every screen wants glass — admin screens, forms on a plain background, designs without it. Since **1.24.0** `data-surface="solid"` on `<html>` makes every surface opaque and turns blur and gloss off:
+
+```html
+<html data-theme="dark" data-surface="solid">
+```
+
+Each surface takes the colour the glass shows over the theme's middle background, `--gl-color-bg-mid`, so cards, fields and buttons keep their order and a re-branded background carries over. The blur (`--gl-blur*`), the inner shine (`--gl-inset-*`) and the gloss (`--gl-gloss-card`, `--gl-gloss-modal`, `--gl-gloss-progress`, `--gl-range-thumb-border`) are off. Borders, drop shadows, the tints of badges and chips and the dimming overlay stay as they are. A theme scope further down the page — an element with its own `data-theme` — stays solid, and the preset is tokens only, so a project tunes it like a theme:
+
+```css
+[data-surface='solid'] { --gl-surface-2: #17313d; }   /* a darker card surface in dark mode */
+```
+
+GlassKit Elements carries the attribute into its shadow roots, as it does with `data-theme`.
+
+A page with a background of its own — a brand colour, a photo, a pattern — takes `data-surface="tint"` instead (since **1.25.0**). The surfaces in the flow of the page become see-through tints of the text colour, nothing blurred, so a field on a card stays as see-through as the card. What lies over other content (modal, sheet, popover, toast, the tab bars) and the secondary button keep the solid values, which come from `--gl-color-bg-mid` — set it to a colour of your brand:
+
+```html
+<html data-theme="dark" data-surface="tint">
+```
+
+```css
+[data-surface='tint'] { --gl-color-bg-mid: #5c1310; }   /* panels in a dark red */
+```
+
+Both presets set the blur tokens to 0 but leave `--gl-blur-overlay` alone: set it to keep a blurred dimmer behind dialogs.
+
 ### Printing
 
 Print dialogs leave out background graphics by default, and some states are drawn with a background only. Since **1.21.1** those parts keep their colours on paper — the checked box and its tick, the chosen radio, the toggle's track, the progress fill, the current step, the chosen day of date strip and calendar, the slider thumb and the tone dots — while the rest of the page prints economically. Nothing to set.
@@ -374,6 +402,12 @@ All visual values are controlled via CSS Custom Properties:
 --gl-shadow-card
 --gl-inset-strong
 
+/* Gloss – off with data-surface="solid" */
+--gl-gloss-card           /* highlight on the top edge of the glow card */
+--gl-gloss-modal          /* the same on the modal */
+--gl-gloss-progress       /* sheen on the progress fill */
+--gl-range-thumb-border   /* rim of the range thumb */
+
 /* Component hooks */
 --gl-modal-max-width      /* 340px */
 --gl-select-chevron       /* url(…) per theme */
@@ -383,6 +417,13 @@ All visual values are controlled via CSS Custom Properties:
 --gl-list-title-white-space     /* nowrap, or normal to wrap list titles */
 --gl-list-subtitle-white-space  /* nowrap, or normal to wrap list subtitles */
 --gl-list-subtitle-lines        /* clamp of __subtitle--wrap, 3; none = all */
+--gl-blur-overlay               /* blur behind dialogs; unset: --gl-blur-soft; kept by the surface presets */
+--gl-toggle-track-bg            /* toggle track when off; unset: --gl-surface-2 (…-checked: the primary gradient) */
+--gl-radio-bg, --gl-radio-bg-checked, --gl-radio-border, --gl-radio-border-checked
+--gl-radio-dot-size             /* 10px */
+--gl-radio-dot-color            /* white */
+--gl-textarea-field-sizing      /* fixed; content lets text areas grow with their text */
+--gl-input-picker-icon          /* none hides Chromium's picker button of date and time fields */
 ```
 
 The full token reference can be found in the [Documentation](docs.html).

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: glasskit-css
-description: GlassKit is a pure CSS glassmorphism component library (v1.23.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.25.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
@@ -94,6 +94,18 @@ Denser controls for admin screens, desktop layouts and narrow forms: `data-densi
 
 Fields and buttons are 40px high instead of 52 and 56px; toggles, checkboxes, radios, list rows and modal actions shrink with them. Colours, type and spacing stay. Without the attribute nothing changes; `removeAttribute('data-density')` switches back at runtime. The values are the density tokens in section 2 — never shrink controls by overriding their `height`. It combines with `dir="rtl"`: the toggle's thumb and the select's padding mirror at either density.
 
+### Solid surfaces
+
+Opaque surfaces without blur and gloss, for admin screens, forms on a plain background and designs without glass: `data-surface="solid"` on `<html>`, next to `data-theme` and `data-density` (since 1.24.0).
+
+```html
+<html data-theme="dark" data-surface="solid">
+```
+
+Each surface (`--gl-surface-*`, the milk surfaces, the card glow) takes the colour the glass shows over `--gl-color-bg-mid`, so the order of the surfaces stays and a re-branded background carries over. `--gl-blur*` are `0px`, the `--gl-inset-*` shine and the gloss tokens (`--gl-gloss-card`, `--gl-gloss-modal`, `--gl-gloss-progress`, `--gl-range-thumb-border`) are off. Borders, drop shadows, the tints of badges and chips and the overlay stay. A theme scope inside the page (an element with its own `data-theme`) stays solid. It is tokens only: tune it with `[data-surface='solid'] { --gl-surface-2: … }`, never by overriding a component's `background` or `backdrop-filter`. Without the attribute nothing changes; `removeAttribute('data-surface')` switches back at runtime. GlassKit Elements mirrors the attribute into its shadow roots.
+
+**Tint (since 1.25.0).** For a page with a background of its own — a brand colour, a photo, a pattern — `data-surface="tint"`: the surfaces in the flow of the page become see-through tints of the text colour (`--gl-surface-1` … `-5` at 4, 6, 9, 12, 16 %, the card glow likewise), nothing blurred. What lies over other content — modal, sheet, popover, toast, the tab bars, with the fields and rows inside them — keeps the solid values, and so do the milk surfaces (the secondary button is a light plate for dark ink). The solid values are kept as `--gl-solid-surface-1` … `-5` and `--gl-solid-card-glow-*` and follow `--gl-color-bg-mid`: a brand sets `[data-surface='tint'] { --gl-color-bg-mid: … }`. Blur and gloss are off as with solid; both presets leave `--gl-blur-overlay` alone.
+
 ### Printing (since 1.21.1)
 
 Print dialogs leave out backgrounds by default. The parts that carry a state keep their colours on paper (`print-color-adjust: exact` inside `@media print`): checkbox box and tick, radio circle and dot, toggle track and thumb, progress fill, the current step, the chosen day of date strip and calendar, the slider thumb, the tone dots. Everything else prints economically. Nothing to set — do not add your own `print-color-adjust` to whole components: it also stops the browser from darkening light text for paper.
@@ -212,6 +224,19 @@ fully-translucent pre-1.7.0 chip.
 | `--gl-blur-soft` | `12px` |
 | `--gl-blur-heavy` | `40px` |
 
+All four are `0px` under `data-surface="solid"`.
+
+### Gloss (since 1.24.0)
+
+| Token | Value | Usage |
+|---|---|---|
+| `--gl-gloss-card` | `linear-gradient(90deg, …)` | Highlight along the top edge of `.glass-card--glow` |
+| `--gl-gloss-modal` | `linear-gradient(90deg, …)` | The same on `.glass-modal` |
+| `--gl-gloss-progress` | `linear-gradient(to bottom, …)` | Sheen on the progress fill |
+| `--gl-range-thumb-border` | `2px solid rgba(255,255,255,0.5)` | Rim of the range thumb |
+
+The same in both themes; `data-surface="solid"` sets them to `none` (the thumb's rim to `2px solid transparent`). They were literals before 1.24.0.
+
 ### Radii
 
 | Token | Value | Usage |
@@ -710,6 +735,8 @@ dialog.addEventListener('cancel', (e) => { e.preventDefault(); closeDialog(); })
 
 While a modal dialog is open everything outside it is inert — a toast shown then is neither clickable nor announced; give feedback inside the dialog. Wider dialogs (forms, tables): `.my-dialog { --gl-modal-max-width: 560px; }`.
 
+**Blur behind the dialog (since 1.25.0).** The dimmer of `.glass-modal-overlay` and `.glass-sheet-overlay` blurs with `--gl-blur-overlay` where set, else with `--gl-blur-soft`. The surface presets set the blur tokens to 0 but not this one, so `:root { --gl-blur-overlay: 8px; }` keeps a blurred dimmer on a page without glass.
+
 ---
 
 ### 3.13 Toast
@@ -809,6 +836,8 @@ Date and time fields (`type="date"`, `time`, `datetime-local`, `month`) take the
 </div>
 ```
 
+**Long values, empty labels, picker icon (since 1.25.0).** A value or placeholder too long for the field ends in an ellipsis while the field is not being edited, and a `.glass-label` without text takes no room (`:empty`; it used to keep the group's 8px gap). Date and time fields keep the browser's own picker button; `--gl-input-picker-icon: none` hides it in Chromium (WebKit and Firefox draw none to hide) — for a field whose prefix is the picker; call `showPicker()` from it then. It also hides the arrow of a field with a `<datalist>`.
+
 ---
 
 ### 3.15 Textarea
@@ -823,6 +852,8 @@ Multi-line text field.
 |---|---|
 | `.glass-textarea` | Multi-line glass input |
 
+**Growing and read-only (since 1.25.0).** `--gl-textarea-field-sizing: content` lets text areas grow with their text, where `field-sizing` is supported; off by default (`fixed`), because it ignores `rows`. A read-only or disabled text area has no resize handle.
+
 ---
 
 ### 3.16 Select
@@ -894,6 +925,8 @@ iOS-style switch.
 
 The input is invisible but lies **on top of** the track and takes the click itself (since 1.20.0) — a test tool clicking the switch by role (`getByRole('switch')` with `role="switch"` on the input) reaches it. It covers only the track; label text, links in it included, stays the label's. An empty `__label` takes no room (no 12px gap). Both apply to checkbox and radio as well.
 
+**Track tokens (since 1.25.0).** `--gl-toggle-track-bg` (off; unset `--gl-surface-2`) and `--gl-toggle-track-bg-checked` (on; unset the primary gradient) — a stronger track for a page without glass, e.g. `color-mix(in srgb, var(--gl-color-text) 35%, transparent)`.
+
 ---
 
 ### 3.19 Checkbox
@@ -956,6 +989,8 @@ Animated radio button with dot.
 
 **Important:** Radio buttons in the same group need the same `name` attribute value.
 
+**Radio tokens (since 1.25.0).** `--gl-radio-bg` / `--gl-radio-bg-checked` (unset `--gl-surface-2` / the primary gradient), `--gl-radio-border` / `--gl-radio-border-checked` (whole border values; unset `1.5px solid` in `--gl-border-medium` / `--gl-border-warm` — give both the same width), `--gl-radio-dot-size` (`10px`; `50%` follows the circle) and `--gl-radio-dot-color` (`white`). A ring that turns the accent colour: `--gl-radio-bg: transparent; --gl-radio-bg-checked: transparent; --gl-radio-border: 2px solid color-mix(in srgb, var(--gl-color-text) 60%, transparent); --gl-radio-border-checked: 2px solid var(--gl-color-primary); --gl-radio-dot-size: 50%; --gl-radio-dot-color: var(--gl-color-primary)`.
+
 ---
 
 ### 3.21 Range Slider