@jungherz-de/glasskit-elements 1.23.0 → 1.24.0

package/CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.24.0] – 2026-10-14
+
+Versions stay aligned with GlassKit at 1.24.0, which this release is built against (peer dependency `>=1.24.0`).
+
+### Added
+
+- **Solid surfaces: `data-surface="solid"` on `<html>`.** GlassKit 1.24.0's preset makes every surface opaque and turns blur and gloss off. Its tokens reach the shadow roots by inheritance, also on a page that loads only these elements, because the preset is part of the tokens the bundle puts on the document. The theme wrapper of each element mirrors the attribute, as it mirrors `data-theme` and `data-density`: set from the start, followed on every change, removed with the attribute, and caught up when a moved element comes back. Measured in Chromium, WebKit and Firefox: card, buttons, field, select, textarea, toggle, checkbox, radio, list, segmented control, search and accordion item each show the same pixels inside over a red and over a blue page, and blur computes to `0px` in every shadow root. ([GlassKit #9](https://github.com/JUNGHERZ/GlassKit/issues/9))
+
+Without the attribute, docs, showcase and landing pages render pixel-identical to 1.23.0.
+
+---
+
 ## [1.23.0] – 2026-10-14
 
 Versions realign with GlassKit at 1.23.0, which this release is built against (peer dependency `>=1.23.0`).
@@ -840,7 +852,8 @@ Starting with this release, GlassKit Elements version numbers are aligned with G
 
 ---
 
-[Unreleased]: https://github.com/JUNGHERZ/GlassKit-Elements/compare/v1.23.0...HEAD
+[Unreleased]: https://github.com/JUNGHERZ/GlassKit-Elements/compare/v1.24.0...HEAD
+[1.24.0]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.24.0
 [1.23.0]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.23.0
 [1.22.3]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.22.3
 [1.22.2]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.22.2

package/README.md

@@ -5,7 +5,7 @@
   <a href="#"><img src="https://img.shields.io/badge/vanilla_JS-no_dependencies-44cc11?style=flat-square" alt="Vanilla JS"></a>
   <a href="#"><img src="https://img.shields.io/badge/components-36-7ec8e3?style=flat-square" alt="36 Components"></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue?style=flat-square" alt="MIT License"></a>
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.23.0-lightgrey?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.24.0-lightgrey?style=flat-square" alt="Changelog"></a>
   <a href="https://www.npmjs.com/package/@jungherz-de/glasskit-elements"><img src="https://img.shields.io/badge/npm-%40jungherz--de%2Fglasskit--elements-cb3837?style=flat-square&logo=npm" alt="npm"></a>
 </p>
 
@@ -55,7 +55,7 @@ It is the **app layer** of the GlassKit family — three layers, one design lang
 | 🪶 **Lightweight** | 156 KB minified / 28 KB gzipped (IIFE bundle, GlassKit's component rules included), no external dependencies |
 | 📦 **Three bundle formats** | IIFE for `<script>`, minified IIFE for production, ESM for bundlers & tree-shaking |
 | 🎛️ **Form Participation** | Input, toggle, checkbox, radio, select — all work natively with `<form>` via `ElementInternals`: value, reset and, since 1.20.0, validity; `<glk-button type="submit">` submits |
-| 🌗 **Theme Sync** | Automatic dark/light mode sync via `data-theme` on `<html>`, compact controls via `data-density` |
+| 🌗 **Theme Sync** | Automatic dark/light mode sync via `data-theme` on `<html>`, compact controls via `data-density`, opaque surfaces via `data-surface` |
 | 📱 **Mobile-first** | Inherits GlassKit's mobile-optimized design with `safe-area-inset` support |
 
 ---
@@ -66,7 +66,7 @@ It is the **app layer** of the GlassKit family — three layers, one design lang
 
 ```html
 <!-- 1. GlassKit CSS -->
-<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.24/glasskit.min.css">
 
 <!-- 2. GlassKit Elements -->
 <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
@@ -104,7 +104,7 @@ The per-component files leave `@jungherz-de/glasskit/glasskit-styles.js` as an e
 <!DOCTYPE html>
 <html data-theme="dark">
 <head>
-  <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.24/glasskit.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
 </head>
 <body>
@@ -216,6 +216,18 @@ Fields and buttons become 40px high instead of 52 and 56, toggles, checkboxes an
 
 > **Requires GlassKit CSS >= 1.21.0.** The sizes are GlassKit's density tokens, so they reach every shadow root by inheritance, like the brand colors below — and so do your own: `[data-density='compact'] { --gl-btn-height: 36px; }`. With `data-glk-defaults="off"` the preset comes from `glasskit.css` on the page, like every other token. The global observer mirrors `data-density` onto each element's theme wrapper as well, so a rule keyed on the attribute matches inside the shadow root too.
 
+### Solid surfaces
+
+Not every screen wants glass. Set `data-surface="solid"` on `<html>`, next to `data-theme` (since 1.24.0):
+
+```html
+<html data-theme="dark" data-surface="solid">
+```
+
+Every surface becomes opaque, in the colour the glass shows over the theme's middle background, and blur and gloss are off; `removeAttribute('data-surface')` switches back at runtime. Without the attribute nothing changes.
+
+> **Requires GlassKit CSS >= 1.24.0.** The preset is tokens only, so it reaches every shadow root by inheritance, and so do your own values: `[data-surface='solid'] { --gl-surface-2: #17313d; }`. With `data-glk-defaults="off"` it comes from `glasskit.css` on the page. The observer mirrors `data-surface` onto each element's theme wrapper, like `data-theme` and `data-density`.
+
 ### Printing
 
 Print dialogs leave out background graphics by default. With GlassKit 1.21.1 the parts that carry a state keep their colours on paper — checkbox, radio, toggle, progress, the current step, the chosen day, the slider thumb, the tone dots — inside the elements as well. A dark page prints light text and surfaces on white paper; a page meant for printing switches to the light theme for it, and the elements follow:

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: glasskit-elements
-description: GlassKit Elements is a vanilla-JS Web Components library (v1.23.0) wrapping GlassKit CSS v1.23.0. It provides 36 custom elements with the `glk-` prefix, Dark/Light mode with automatic theme sync, Shadow DOM encapsulation, and form-associated custom elements. Use this reference whenever generating HTML that uses `<glk-*>` tags to ensure correct attributes, slots, events, and composition.
+description: GlassKit Elements is a vanilla-JS Web Components library (v1.24.0) wrapping GlassKit CSS v1.24.0. It provides 36 custom elements with the `glk-` prefix, Dark/Light mode with automatic theme sync, Shadow DOM encapsulation, and form-associated custom elements. Use this reference whenever generating HTML that uses `<glk-*>` tags to ensure correct attributes, slots, events, and composition.
 ---
 
 # GlassKit Elements – AI Component Reference
@@ -18,7 +18,7 @@ description: GlassKit Elements is a vanilla-JS Web Components library (v1.23.0)
 npm install @jungherz-de/glasskit-elements @jungherz-de/glasskit
 ```
 
-Peer dependency `@jungherz-de/glasskit >=1.23.0` is required — 1.23.0 lets list text wrap app-wide through tokens, 1.22.2 hands a click on a disabled control in an input affix to the field, 1.22.1 lets date and time fields shrink in narrow columns, 1.22.0 brings the input affixes behind the `prefix` / `suffix` slots, 1.21.2 gives disabled controls their look, 1.21.1 keeps the controls' state on paper, 1.21.0 brings the density tokens behind `data-density`, 1.20.0 the rules the elements build on since then (the dialog overlay, hidden list slots, empty control labels, control inputs on top); 1.9.0 is the release that made the stylesheet splittable, which is what lets document-level branding reach the elements at all.
+Peer dependency `@jungherz-de/glasskit >=1.24.0` is required — 1.24.0 brings the solid surface preset behind `data-surface`, 1.23.0 lets list text wrap app-wide through tokens, 1.22.2 hands a click on a disabled control in an input affix to the field, 1.22.1 lets date and time fields shrink in narrow columns, 1.22.0 brings the input affixes behind the `prefix` / `suffix` slots, 1.21.2 gives disabled controls their look, 1.21.1 keeps the controls' state on paper, 1.21.0 brings the density tokens behind `data-density`, 1.20.0 the rules the elements build on since then (the dialog overlay, hidden list slots, empty control labels, control inputs on top); 1.9.0 is the release that made the stylesheet splittable, which is what lets document-level branding reach the elements at all.
 
 ### Import (ES modules)
 
@@ -93,6 +93,14 @@ A single module-level `MutationObserver` watches `data-theme` on `<html>` and sy
 
 Denser controls for admin screens, desktop layouts and narrow forms: fields and buttons 40px instead of 52 and 56, smaller toggles, checkboxes and radios, denser list rows and modal actions. Without the attribute nothing changes; `removeAttribute('data-density')` switches back at runtime. The sizes are GlassKit's density tokens (GlassKit 1.21.0 or later), so they reach every shadow root by inheritance, and a project's own values do too (`[data-density='compact'] { --gl-btn-height: 36px; }`); with `data-glk-defaults="off"` the preset comes from `glasskit.css` on the page, like every other token. The same observer mirrors `data-density` onto each element's theme wrapper — set it on `<html>` only, never on individual elements.
 
+### Solid surfaces (since 1.24.0)
+
+```html
+<html data-theme="dark" data-surface="solid">
+```
+
+Opaque surfaces without blur and gloss, for admin screens, forms on a plain background and designs without glass: every surface in the colour the glass shows over the theme's middle background. Without the attribute nothing changes; `removeAttribute('data-surface')` switches back at runtime. It is GlassKit's solid surface preset (GlassKit 1.24.0 or later): tokens only, so it reaches every shadow root by inheritance, and a project's own values do too (`[data-surface='solid'] { --gl-surface-2: … }`); with `data-glk-defaults="off"` it comes from `glasskit.css` on the page. The observer mirrors `data-surface` onto each element's theme wrapper, like `data-theme` and `data-density`, so a rule keyed on it (a subclass's `hostStyles`) matches inside the shadow root — set it on `<html>` only.
+
 
 ### Printing (since 1.21.1)
 
@@ -119,7 +127,7 @@ addEventListener('afterprint', () => {
 | Tag prefix | `glk-*` (analogous to the `glass-*` CSS prefix) |
 | Rendering | Shadow DOM (`mode: 'open'`) with `adoptedStyleSheets` |
 | Stylesheet sharing | GlassKit's `componentsSheet` is the same `CSSStyleSheet` object in every element — no CSS duplication. Token declarations live on the document, not in the shadow roots |
-| Theme sync | Global MutationObserver on `<html data-theme>` and `<html data-density>` |
+| Theme sync | Global MutationObserver on `<html data-theme>`, `<html data-density>` and `<html data-surface>` (since 1.24.0) |
 | Events | Custom `glk-*` events, all `bubbles: true, composed: true` |
 | Form participation | `GlkFormElement` uses `ElementInternals` (`static formAssociated = true`): value, reset and — since 1.20.0 — the inner field's validity |
 | Focus | Form elements with one field delegate focus (since 1.20.0): `element.focus()`, a click on the label, a `<label for>` land in the field |

package/dist/components/base.js

@@ -53,16 +53,16 @@ function syncDefaultTokens() {
 
 injectDefaultTokens();
 
-// ── Global Theme & Density Sync ──
-// Single MutationObserver that watches data-theme and data-density on <html>
-// and notifies all GlkElement instances.
+// ── Global Theme, Density & Surface Sync ──
+// Single MutationObserver that watches data-theme, data-density and
+// data-surface on <html> and notifies all GlkElement instances.
 //
-// The density tokens themselves arrive from <html> by inheritance, like every
-// other token: GlassKit's [data-density="compact"] preset is part of
-// tokensCss, not of the components sheet. The wrapper mirrors the attribute
-// anyway, as it mirrors data-theme — a rule keyed on it (a component rule, a
-// subclass's hostStyles) can match inside a shadow root only on an element
-// there.
+// The density and surface tokens themselves arrive from <html> by
+// inheritance, like every other token: GlassKit's [data-density="compact"]
+// and [data-surface="solid"] presets are part of tokensCss, not of the
+// components sheet. The wrapper mirrors the attributes anyway, as it mirrors
+// data-theme — a rule keyed on one (a component rule, a subclass's
+// hostStyles) can match inside a shadow root only on an element there.
 
 const instances = new Set();
 
@@ -75,6 +75,11 @@ function getCurrentDensity() {
   return document.documentElement.getAttribute('data-density');
 }
 
+/** The surface preset on <html> (since 1.24.0), or null, like the density. */
+function getCurrentSurface() {
+  return document.documentElement.getAttribute('data-surface');
+}
+
 function syncAllThemes() {
   const theme = getCurrentTheme();
   for (const instance of instances) {
@@ -89,15 +94,23 @@ function syncAllDensities() {
   }
 }
 
+function syncAllSurfaces() {
+  const surface = getCurrentSurface();
+  for (const instance of instances) {
+    instance._syncSurface(surface);
+  }
+}
+
 if (typeof window !== 'undefined' && typeof MutationObserver !== 'undefined') {
   const observer = new MutationObserver(records => {
     if (records.some(r => r.attributeName === 'data-theme')) syncAllThemes();
     if (records.some(r => r.attributeName === 'data-density')) syncAllDensities();
+    if (records.some(r => r.attributeName === 'data-surface')) syncAllSurfaces();
     if (records.some(r => r.attributeName === DEFAULTS_ATTR)) syncDefaultTokens();
   });
   observer.observe(document.documentElement, {
     attributes: true,
-    attributeFilter: ['data-theme', 'data-density', DEFAULTS_ATTR]
+    attributeFilter: ['data-theme', 'data-density', 'data-surface', DEFAULTS_ATTR]
   });
 }
 
@@ -235,17 +248,19 @@ class GlkElement extends HTMLElement {
       this._wrapper.className = 'glk-wrapper';
       this._wrapper.setAttribute('data-theme', getCurrentTheme());
       this._syncDensity(getCurrentDensity());
+      this._syncSurface(getCurrentSurface());
       this._shadow.appendChild(this._wrapper);
 
       this.render();
       if (this.constructor.formAssociated) this._syncDisabled();
     } else {
       // Back in the document. While it was out, the observer did not reach
-      // it, so a theme or density switched in the meantime is caught up here
-      // — the wrapper's data-theme also sets the color-scheme of the native
-      // parts inside.
+      // it, so a theme, density or surface switched in the meantime is
+      // caught up here — the wrapper's data-theme also sets the color-scheme
+      // of the native parts inside.
       this._syncTheme(getCurrentTheme());
       this._syncDensity(getCurrentDensity());
+      this._syncSurface(getCurrentSurface());
     }
 
     // Everything below runs on every connect, not just the first. Moving an
@@ -315,6 +330,16 @@ class GlkElement extends HTMLElement {
     }
   }
 
+  /** Mirrors data-surface from <html> (since 1.24.0), like the density. */
+  _syncSurface(surface) {
+    if (!this._wrapper) return;
+    if (surface) {
+      this._wrapper.setAttribute('data-surface', surface);
+    } else {
+      this._wrapper.removeAttribute('data-surface');
+    }
+  }
+
   /** Subclasses override to build inner DOM inside this._wrapper. */
   render() {}