@jungherz-de/glasskit-elements 1.19.1 → 1.20.0

package/CHANGELOG.md

@@ -7,6 +7,40 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.20.0] – 2026-10-05
+
+Versions realign with GlassKit at 1.20.0, which this release needs (peer dependency `>=1.20.0`). The first batch of findings filed as GitHub issues, from a product that is adopting GlassKit at full depth — mostly accessibility and forms. Everything below was measured in Chromium and WebKit.
+
+### Fixed
+
+- **Importing the elements no longer turns the page dark.** The token defaults went onto the document with GlassKit's `color-scheme: dark` included, so on a page that does not use GlassKit's theme the whole document switched: `color-scheme` of `:root` and of every native control to `dark`, unstyled text from black to white, links from `rgb(0, 0, 238)` to `rgb(158, 158, 255)`. The injected layer now carries the `--gl-*` tokens only. Each element sets `color-scheme` on its own theme wrapper, following `data-theme`, so native parts inside it — a select's list, a date picker — still match the element. Measured on a white page without GlassKit CSS: scheme, text and link colour stay as they were; the select inside `<glk-select>` is `dark`, under `data-theme="light"` `light`. **New:** `<html data-glk-defaults="off">` switches the defaults off, for a page that declares the tokens itself or wants them on part of the page only; the attribute is watched, so it may also be set or removed later. Until now the only way was the internal flag meant to detect duplicate bundles. Compatibility: a page that counted on the elements to make it dark sets `color-scheme` itself, or loads `glasskit.css`, whose token blocks set it. ([#1](https://github.com/JUNGHERZ/glasskit-elements/issues/1))
+- **Form fields have accessible names, and focus reaches them.** The `<label>` of `<glk-input>`, `<glk-select>`, `<glk-textarea>` and `<glk-range>` sat next to the field without `for`, so the field had no name — with a placeholder, screen readers announced only that — and a click on the label text did nothing. Label and field are tied by id inside the shadow root now: `textbox "Vorname"`, `combobox "Land"`, `slider "Lautstärke"`. The `hint` of `<glk-input>` describes the field (`aria-describedby`), and `error` marks it `aria-invalid`. `<glk-search>`, which has no visible label, takes `label` as its accessible name. Form elements with one field open their shadow root with `delegatesFocus`, so `element.focus()`, a click on the label text and a click on a `<label for>` naming the element all land in the field. `<glk-segmented>` and `<glk-calendar>` keep it off: their first button is not the chosen one, and Tab already reaches the chosen one. An outer `<label for>` focuses the field but cannot name it across the shadow boundary — use `label` for the name. ([#2](https://github.com/JUNGHERZ/glasskit-elements/issues/2))
+- **The form learns whether the fields are valid.** `GlkFormElement` had a `setValidity()` that nothing called, so an empty `required` field counted as valid: `form.checkValidity()` returned `true` and `requestSubmit()` sent the form. Every element built on one native field now copies that field's verdict onto the host after each change — value, attribute, reset — with the field as anchor, so the browser's bubble points at it and `reportValidity()` focuses it. `required`, `pattern`, `min`/`max`, `minlength`/`maxlength`, `type="email"` and the like stop a submit with the browser's own message; `validity`, `validationMessage`, `willValidate`, `checkValidity()` and `reportValidity()` answer on the element. `<glk-checkbox>`, `<glk-toggle>` and `<glk-radio>` gain `required`, radios by the native rule: one required radio makes its group required, any checked one satisfies it. `<glk-textarea>` and `<glk-select>` now also follow a `required` set after they rendered. A disabled field is barred from validation, as natively. `error` stays a marker and does not block — a server's verdict arrives that way, and it must not stop the next attempt. Measured: empty required fields make `checkValidity()` false, `requestSubmit()` sends nothing, `reportValidity()` focuses the first field; "nope" in a `type="email"` field is a `typeMismatch`; checking the second radio of a required group makes both valid; `form.reset()` validates again. ([#3](https://github.com/JUNGHERZ/glasskit-elements/issues/3))
+- **`<glk-button type="submit">` submits its form, `type="reset"` resets it.** The native button lives in the shadow root, outside every form, so both types only emitted `glk-click`. The element is form-associated now and acts on its form once the click has finished bubbling — `preventDefault()` on the click stops it, as on a native button. Invalid fields stop the submit with the browser's message; the submit event names the element as its `submitter`; `form` and `type` are properties; `element.click()` acts like a click. Measured: one submit with complete `FormData` and the element as `submitter`, none after `preventDefault()`, one from `element.click()`; reset restores values and validity. Not covered: implicit submission — Enter in a `<glk-input>` does not submit the form. ([#4](https://github.com/JUNGHERZ/glasskit-elements/issues/4))
+- **`<glk-modal>` is a native dialog.** It had no dialog role, the focus stayed behind it, Tab walked through the page before it reached the modal's buttons, and its content was reachable while it was closed. The overlay is a `<dialog>` now, opened with `showModal()`: top layer, the page behind it inert for pointer, keyboard and screen readers, focus moving in and back to the opener on closing, named by its title (`aria-labelledby`), the content out of reach while closed. The fade stays — Escape arrives as the dialog's `cancel`, and the element turns it into the same animated close as a click on the dimmed area; both emit `glk-close`. The browsers pick the first focus differently, Chrome the first field of the content, Safari the first action; `autofocus` on an element in the content or on an action settles it. Moved while open, it opens as a modal again. Measured: `:modal` matches, `dialog "Eintrag löschen?"`, Tab cycles inside, a point over the page hits the overlay, Escape emits `glk-close` once and returns the focus to the opener. Compatibility: everything outside an open modal is inert — a `<glk-toast>` shown while it is open is neither clickable nor announced (moved into the top layer as a popover, it stays inert too; measured), so give feedback inside the modal or close it first; a `<glk-sheet>` opened from an open modal ends up behind it. ([#5](https://github.com/JUNGHERZ/glasskit-elements/issues/5))
+- **`<glk-toggle>` is one switch, and clicks aimed at the element work.** The host carried `role="switch"` and `aria-checked` with a focusable native checkbox inside, so screen readers met a switch that contained a checkbox. The role moved onto the checkbox; the host carries no `role`, `aria-checked` or `aria-disabled` any more, and the tree shows `switch "Benachrichtigungen"`, nothing else. `toggle.click()` changed nothing, where a native checkbox toggles — and a `<label>` around the element or naming it clicks the host, too. A click aimed at the host itself is now handed to the input and the original stopped, so listeners see one click and one change; the same holds for `<glk-checkbox>`, `<glk-radio>` and `<glk-button>`. A press on the host's empty width (it is a block, the control narrower) still does nothing: Chrome gives a label's click the same `detail` and `isTrusted` as a real one, so the two are told apart by where the pointer went down. With GlassKit 1.20.0 the input lies on top of the track, so Playwright's `getByRole('switch').click()`, `check()` and `uncheck()` reach it instead of timing out on the covering track — `getByRole('checkbox')` and `getByRole('radio')` gain the same. Compatibility: CSS or tests that select `glk-toggle[aria-checked]` or `[role="switch"]` on the host use `glk-toggle[checked]` now. ([#6](https://github.com/JUNGHERZ/glasskit-elements/issues/6))
+- **Accordion and popover triggers say whether they are open.** The accordion trigger carries `aria-expanded` and `aria-controls` now, and a closed section is `inert`: before, it was only squeezed to zero height, so Tab still walked into its links and screen readers read them. `<glk-popover>` sets `aria-expanded` on its trigger, again whenever the trigger is swapped; `<glk-button>` and `<glk-pill>` hand `aria-expanded`, `aria-haspopup` and `aria-pressed` on to their native button. Measured: `button "Abschnitt 1" [expanded=false]`, the closed section's link takes no focus and is missing from Chromium's accessibility tree, `button "Menü" [expanded]` while the popover is open. ([#7](https://github.com/JUNGHERZ/glasskit-elements/issues/7))
+- **A toggle without label is as large as its track.** The host measured 64 × 34 px around a 52 × 30 track: the empty label kept its 12 px gap (GlassKit 1.20.0 hides an empty label), and the inline control sat on the text baseline with room for descenders below it — in a centred row the track sat 2 px high. The control aligns to the top of its line now: 52 × 30, centred at 9 px in a 48 px row. `<glk-checkbox>` and `<glk-radio>` lose the same descender room. Compatibility: stacked toggles, checkboxes and radios move closer — on the docs page a labelled toggle shrinks from 37.6 to 30 px, a checkbox from 27.4 to 25.6 px. ([#8](https://github.com/JUNGHERZ/glasskit-elements/issues/8))
+
+### Changed
+
+- **With GlassKit 1.20.0** the elements also get its fixes: `<glk-list-item>` without an icon no longer keeps 28 px for it — title at 20 px, row 56 instead of 60 px, divider from 20 px ([GlassKit #4](https://github.com/JUNGHERZ/GlassKit/issues/4)); the select's chevron is visible in the light theme ([GlassKit #1](https://github.com/JUNGHERZ/GlassKit/issues/1)); under `dir="rtl"` the elements mirror ([GlassKit #2](https://github.com/JUNGHERZ/GlassKit/issues/2)); `--gl-modal-max-width` widens `<glk-modal>` ([GlassKit #3](https://github.com/JUNGHERZ/GlassKit/issues/3)).
+
+### Documentation
+
+- **Component count and browser support in the README.** The badge said 33 components, the intro 29, the docs pages 29 and 33; the package ships 36 elements, as SKILL.md and the landing pages already said — now all of them do. Browser support named Chrome 90 and Firefox 103, but GlassKit's tokens are derived with `color-mix()`: the floor is Chrome and Edge 111, Safari 16.4, Firefox 113, and what the elements need themselves — constructable stylesheets, `ElementInternals`, `delegatesFocus`, `<dialog>`, `inert` — falls inside it. The refinements that come later are named. ([#9](https://github.com/JUNGHERZ/glasskit-elements/issues/9))
+- Docs (English and German), README and SKILL.md describe validity, labels and focus, submit buttons, the dialog and its effect on toasts, the switch role, the triggers' states and the opt-out from the token defaults.
+
+---
+
+## [1.19.2] – 2026-09-26
+
+### Fixed
+
+- **`<glk-date-strip>` and `<glk-calendar>` name days in the page's language, not the browser's.** Without `locale` they went straight to `navigator.language`, so a German page opened on a phone set to English showed "SUN MON TUE" in the strip and started the calendar on Sunday — next to German text everywhere else. They now take the `lang` of the nearest ancestor, usually `<html lang>`, looked up across shadow roots through their hosts, so an element inside another component's shadow tree — a hybrids view, say — reaches the page's language, and a `<section lang="en">` in a German page stays English. Only without any `lang` does the browser language follow, then English; an empty `lang=""` means "unknown" in HTML and falls through to the browser. `locale` still wins over all of it. The page language decides weekday and month names, the chips' and days' `aria-label`s and the calendar's first day of the week. Measured in Chromium and WebKit with an `en-US` browser on `<html lang="de">`: "So Mo Di" and "Sonntag, 27. September 2026" instead of "Sun Mon Tue" and "Sunday, September 27, 2026", the calendar starts on Monday; a page without `lang` looks as before. Compatibility: a page whose `lang` differs from its visitors' browsers now shows its own language in these two elements — set `locale` to keep another. NotionKit Elements falls back to `<html lang>` since 1.17; this looks at the nearest ancestor instead. (EhrenPfoten, Elements finding 10.)
+
+---
+
 ## [1.19.1] – 2026-09-26
 
 ### Fixed
@@ -701,6 +735,8 @@ Starting with this release, GlassKit Elements version numbers are aligned with G
 
 ---
 
+[1.20.0]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.20.0
+[1.19.2]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.19.2
 [1.19.1]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.19.1
 [1.19.0]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.19.0
 [1.18.0]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.18.0

package/README.md

@@ -3,15 +3,15 @@
 <p align="center">
   <a href="https://www.npmjs.com/package/@jungherz-de/glasskit-elements"><img src="https://img.shields.io/npm/v/@jungherz-de/glasskit-elements?style=flat-square&color=f5a623&label=version" alt="Version"></a>
   <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-33-7ec8e3?style=flat-square" alt="33 Components"></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.19.1-lightgrey?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.20.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>
 
 <p align="center">
   <strong>Drop-in Web Components for <a href="https://github.com/JUNGHERZ/GlassKit">GlassKit CSS</a></strong><br>
-  29 vanilla JavaScript custom elements wrapping GlassKit's glassmorphism components.<br>
+  36 vanilla JavaScript custom elements wrapping GlassKit's glassmorphism components.<br>
   Shadow DOM &middot; Native form participation &middot; Zero dependencies.
 </p>
 
@@ -26,7 +26,7 @@
 
 ## ✨ What is GlassKit Elements?
 
-GlassKit Elements is a companion library to [GlassKit CSS](https://github.com/JUNGHERZ/GlassKit). It provides **29 Web Components** (incl. the iOS 26-style floating Tab-Bar + Accessory) that encapsulate the verbose HTML markup required by GlassKit into simple, declarative custom elements.
+GlassKit Elements is a companion library to [GlassKit CSS](https://github.com/JUNGHERZ/GlassKit). It provides **36 Web Components** (incl. the iOS 26-style floating Tab-Bar + Accessory) that encapsulate the verbose HTML markup required by GlassKit into simple, declarative custom elements.
 
 It is the **app layer** of the GlassKit family — three layers, one design language: [GlassKit](https://glasskit.jungherz.com) is the pure-CSS foundation, GlassKit Elements wraps it into web components for application UIs, and [GlassKit Web](https://glasskit-web.jungherz.com) is the official Astro template for complete websites on top of the same foundation.
 
@@ -51,10 +51,10 @@ It is the **app layer** of the GlassKit family — three layers, one design lang
 | Feature | Details |
 |---|---|
 | 🔌 **Shadow DOM** | Style encapsulation via `adoptedStyleSheets` — no CSS leaking |
-| 🧩 **33 Components** | Buttons, cards, toggles, modals, accordions, lists, popovers, tab bars (incl. floating + accessory), and more |
-| 🪶 **Lightweight** | 117 KB raw / 92 KB minified / 15 KB gzipped (IIFE bundle), no external dependencies |
+| 🧩 **36 Components** | Buttons, cards, toggles, modals, accordions, lists, popovers, tab bars (incl. floating + accessory), and more |
+| 🪶 **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` |
+| 🎛️ **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>` |
 | 📱 **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.19/glasskit.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.20/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.19/glasskit.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.20/glasskit.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
 </head>
 <body>
@@ -148,21 +148,21 @@ The per-component files leave `@jungherz-de/glasskit/glasskit-styles.js` as an e
 
 | Component | Description | Key Attributes |
 |---|---|---|
-| `<glk-button>` | Glass-styled button | `variant` (primary, secondary, tertiary), `size` (sm, md, lg, auto), `disabled`, `type` |
+| `<glk-button>` | Glass-styled button; `type="submit"` / `"reset"` act on its form | `variant` (primary, secondary, tertiary), `size` (sm, md, lg, auto), `disabled`, `type` (button, submit, reset) |
 
 ### Form Elements
 
-All form components support `name`, `value`, `disabled` and participate in native `<form>` submission via `ElementInternals` — except `<glk-image-picker>`, which hands its result to `glk-change` instead: a data URL is no form value.
+All form components support `name`, `value`, `disabled` and participate in native `<form>` submission via `ElementInternals` — except `<glk-image-picker>`, which hands its result to `glk-change` instead: a data URL is no form value. Since 1.20.0 they also report their validity to the form (`required`, `pattern`, `min`, `type="email"` … stop a submit with the browser's own message), their `label` names the field for screen readers, and a click on it, `element.focus()` or a `<label for>` lands in the field.
 
 | Component | Description | Key Attributes |
 |---|---|---|
 | `<glk-input>` | Text input with label & hint | `label`, `type`, `placeholder`, `hint`, `error`, `required`, `min`, `max`, `step`, `maxlength`, `pattern`, `autocomplete`, `inputmode` |
-| `<glk-textarea>` | Multi-line text input | `label`, `rows`, `placeholder` |
-| `<glk-select>` | Dropdown select | `label` (children: `<option>`) |
-| `<glk-search>` | Search input with icon | `placeholder` |
-| `<glk-toggle>` | Switch toggle | `label`, `checked`, `disabled` |
-| `<glk-checkbox>` | Checkbox | `label`, `checked`, `disabled` |
-| `<glk-radio>` | Radio button | `label`, `name`, `value`, `checked` |
+| `<glk-textarea>` | Multi-line text input | `label`, `rows`, `placeholder`, `required` |
+| `<glk-select>` | Dropdown select | `label`, `required` (children: `<option>`) |
+| `<glk-search>` | Search input with icon | `placeholder`, `label` (accessible name) |
+| `<glk-toggle>` | Switch toggle (`role="switch"` on its native checkbox) | `label`, `checked`, `disabled`, `required` |
+| `<glk-checkbox>` | Checkbox | `label`, `checked`, `disabled`, `required` |
+| `<glk-radio>` | Radio button | `label`, `name`, `value`, `checked`, `required` (per group) |
 | `<glk-range>` | Range slider | `label`, `min`, `max`, `value`, `step` |
 | `<glk-segmented>` | Small exclusive choice as one control; form-associated | `options` (JSON), `value`, `full`, `overflow` (scroll, wrap), `label`, `name` |
 | `<glk-calendar>` | One month with a day to pick; keyboard navigation, `Intl` names; form-associated | `month`, `value`, `today`, `min`, `max`, `marks`, `locale`, `week-start`, `label`, `name` |
@@ -173,7 +173,7 @@ All form components support `name`, `value`, `disabled` and participate in nativ
 | Component | Description | Key Attributes |
 |---|---|---|
 | `<glk-progress>` | Progress bar | `value`, `label`, `variant` (success, error), `size` (sm, lg) |
-| `<glk-modal>` | Modal dialog | `open`, `title` |
+| `<glk-modal>` | Modal dialog — a native `<dialog>`: page behind inert, focus in and back | `open`, `title` |
 | `<glk-toast>` | Notification that hides itself, or an offer with one action and an × | `message`, `variant` (success, error, warning), `duration`, `action-label`, `action-value`, `dismissible` |
 | `<glk-popover>` | Anchored dropdown / menu | `open`, `placement` (top, bottom, start, end) |
 | `<glk-sheet>` | Bottom sheet, the mobile sibling of the modal | `open`, `inline`, `title` |
@@ -239,6 +239,18 @@ inherits them — no JavaScript, no per-element setup:
 Token defaults are placed on the document once, inside `@layer glasskit-defaults`, so
 pages that never load `glasskit.css` still work and your brand file always wins.
 
+Since 1.20.0 that layer carries the `--gl-*` tokens only — GlassKit's `color-scheme` stays
+off the page. Each element sets it on its own theme wrapper, so a select's list or a date
+picker inside matches the element while the page keeps its scheme. (Before, importing the
+elements turned the whole page to `color-scheme: dark`: unstyled text white, links light
+blue, native controls dark.) The token names are still global, so a component of yours
+that reads `var(--gl-…, fallback)` gets GlassKit's value. A page that declares the tokens
+itself, or wants them on part of the page only, switches the defaults off:
+
+```html
+<html data-glk-defaults="off">   <!-- watched: may be set or removed later -->
+```
+
 ---
 
 ## 🛠️ Architecture
@@ -247,7 +259,8 @@ pages that never load `glasskit.css` still work and your brand file always wins.
 - **Theme wrapper** with `display: contents` — layout-transparent `<div>` for `data-theme` CSS selectors
 - **Global `MutationObserver`** — single observer watches `data-theme` changes and syncs all instances
 - **`GlkElement`** base class — handles Shadow DOM setup, theme sync, attribute reflection
-- **`GlkFormElement`** extends `GlkElement` — adds `ElementInternals` for native form participation
+- **`GlkFormElement`** extends `GlkElement` — adds `ElementInternals` for native form participation, delegates focus to its field and reports the field's validity
+- **Native semantics** — labels tied to their fields, the toggle's `role="switch"` on its native checkbox, `<glk-modal>` a native `<dialog>`, `aria-expanded` on accordion and popover triggers
 
 ### Build your own element
 
@@ -274,7 +287,7 @@ class DemoCounter extends GlkElement {
 customElements.define('demo-counter', DemoCounter);
 ```
 
-Hooks: `render()` builds into `this._wrapper`, `setupEvents()` / `teardownEvents()` run on every connect / disconnect, `onAttributeChanged(name, old, value)` after the first render. `static get displayInline()` → `true` for inline elements; `static get observesLightDom()` → `true` re-runs `projectLightDom()` whenever light-DOM children change. `GlkFormElement` adds `setFormValue()`, `setValidity()`, `resetValue()` / `restoreValue()`.
+Hooks: `render()` builds into `this._wrapper`, `setupEvents()` / `teardownEvents()` run on every connect / disconnect, `onAttributeChanged(name, old, value)` after the first render. `static get displayInline()` → `true` for inline elements; `static get observesLightDom()` → `true` re-runs `projectLightDom()` whenever light-DOM children change. `GlkFormElement` adds `setFormValue()`, `setValidity()`, `resetValue()` / `restoreValue()`; since 1.20.0 it delegates focus (`static get delegatesFocus()`) and, when `get _validityField()` returns your native field, reports that field's validity on the host after every `setFormValue()` and attribute change.
 
 ---
 
@@ -293,9 +306,9 @@ glasskit-elements/
       feedback/           # glk-progress, glk-modal, glk-toast, glk-popover
       containers/         # glk-accordion, glk-accordion-item, glk-list, glk-list-item
   dist/
-    glasskit-elements.js      # IIFE bundle (117 KB raw / 18 KB gzipped)
-    glasskit-elements.min.js  # IIFE minified (92 KB raw / 15 KB gzipped)
-    glasskit-elements.esm.js  # ES module bundle (112 KB raw / 17 KB gzipped)
+    glasskit-elements.js      # IIFE bundle (229 KB raw / 46 KB gzipped)
+    glasskit-elements.min.js  # IIFE minified (156 KB raw / 28 KB gzipped)
+    glasskit-elements.esm.js  # ES module bundle (221 KB raw / 45 KB gzipped)
     components/               # one ESM file per element + base.js (GlkElement, GlkFormElement)
   index.html                  # Landing page
   docs.html                   # Documentation
@@ -309,12 +322,12 @@ glasskit-elements/
 
 | Browser | Support |
 |---|---|
-| Chrome | 90+ |
-| Edge | 90+ |
+| Chrome | 111+ |
+| Edge | 111+ |
 | Safari | 16.4+ |
-| Firefox | 103+ |
+| Firefox | 113+ |
 
-Requires `adoptedStyleSheets`, `ElementInternals`, and `customElements` v1.
+The floor is GlassKit's: its tokens are derived with `color-mix()`. The elements also need constructable stylesheets, `ElementInternals`, `delegatesFocus`, `<dialog>` and `inert` — all inside that floor. A few refinements come later and fall back quietly: first-line alignment of toggle, checkbox and radio (`lh`, Firefox 120), the divider of list rows without icon (`:has()`, Firefox 121), right-to-left mirroring of select chevron, toggle thumb and progress fill (`:dir()`, Chrome 120).
 
 ---
 

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: glasskit-elements
-description: GlassKit Elements is a vanilla-JS Web Components library (v1.19.1) wrapping GlassKit CSS v1.19.1. 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.20.0) wrapping GlassKit CSS v1.20.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.19.1)
 npm install @jungherz-de/glasskit-elements @jungherz-de/glasskit
 ```
 
-Peer dependency `@jungherz-de/glasskit >=1.19.1` is required — 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.20.0` is required — 1.20.0 carries the rules the elements now build on (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)
 
@@ -37,8 +37,9 @@ import { GlkButton } from '@jungherz-de/glasskit-elements/components/glk-button.
 ```
 
 Every element has its own entry at `components/glk-{name}.js`; they import `./base.js` and leave `@jungherz-de/glasskit/glasskit-styles.js` external (bundler or import map resolves it). Importing one pulls that
-file plus a single shared chunk (`base.js` + the GlassKit stylesheet, ~48 KB) rather than
-the 112 KB full bundle; several imports share that chunk. Each module registers its
+file plus `base.js` (~16 KB, shared by all of them) and GlassKit's `glasskit-styles.js`
+(~70 KB, resolved once by your project) rather than the 221 KB full bundle; several imports
+share both. Each module registers its
 custom element as a side effect, so a bare `import '…'` is enough.
 
 ### CDN
@@ -99,7 +100,8 @@ A single module-level `MutationObserver` watches `data-theme` on `<html>` and sy
 | 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>` |
 | Events | Custom `glk-*` events, all `bubbles: true, composed: true` |
-| Form participation | `GlkFormElement` uses `ElementInternals` (`static formAssociated = 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 |
 | API style | Declarative HTML attributes + reflected JS properties |
 
 Custom properties (`--gl-*`) defined on `:root` or `<html>` pass through shadow boundaries by inheritance, so custom theming works with a single global stylesheet.
@@ -185,6 +187,23 @@ this module puts them on the document once, wrapped in `@layer glasskit-defaults
 If your app assigns `document.adoptedStyleSheets = [...]` wholesale at some later point,
 re-append the existing entries rather than replacing them, or the defaults are lost.
 
+**Only the tokens, not `color-scheme` (since 1.20.0).** GlassKit's token blocks also set
+`color-scheme`; on the document that switched the whole page to dark — unstyled text white,
+links light blue, native controls dark — on pages that never asked for GlassKit's theme. The
+layer now carries the `--gl-*` tokens only, and every element sets `color-scheme` on its own
+theme wrapper, so native parts inside it (a select's list, a date picker) match the element.
+
+**Opting out.** The token names are global, so a component of the page that reads
+`var(--gl-…, fallback)` sees GlassKit's values. A page that declares the tokens itself, or
+wants them in part of the page only, switches the defaults off — the attribute is watched:
+
+```html
+<html data-glk-defaults="off">
+```
+
+The elements then inherit the tokens from `glasskit.css` or from a block of the page's own,
+for instance on a container around them.
+
 ### Passing icons (fixed in 1.10.0)
 
 Pass an icon as a **direct child** — the `<svg>` itself, not wrapped:
@@ -277,6 +296,9 @@ Default slot: icon SVG (24×24).
 
 Events: `glk-click` when clicked.
 
+`aria-expanded`, `aria-haspopup` and `aria-pressed` set on the element are handed on to the
+native button inside (since 1.20.0) — `<glk-popover>` sets `aria-expanded` on its trigger.
+
 ---
 
 ### 3.3 `<glk-tab-bar>` + `<glk-tab-item>`
@@ -521,10 +543,21 @@ Full-width glass button (56 px). Three variants, four sizes.
 | `variant` | String | — | `primary`, `secondary`, `tertiary` |
 | `size` | String | `md` | `sm`, `md`, `lg`, `auto` |
 | `disabled` | Boolean | `false` | Disabled state |
-| `type` | String | `button` | Native button type |
+| `type` | String | `button` | `button`, `submit`, `reset` — submit and reset act on the element's form (since 1.20.0) |
 
 Events: `glk-click` (suppressed when disabled).
 
+**Submitting (since 1.20.0).** The element is form-associated: `type="submit"` submits the
+form it sits in and `type="reset"` resets it. Before 1.20.0 both did nothing — the native
+button lives in the shadow root, outside every form. It acts once the click has finished
+bubbling, so `preventDefault()` on the click stops it, as on a native button; invalid fields
+stop the submit with the browser's message; the submit event's `submitter` is the element;
+`.form` is its form; `element.click()` acts like a click. No implicit submission: Enter in a
+`<glk-input>` does not submit the form.
+
+`aria-expanded`, `aria-haspopup` and `aria-pressed` set on the element are handed on to the
+native button inside, which is what screen readers read (since 1.20.0).
+
 Default slot: button label (text or SVG + text).
 
 ---
@@ -545,9 +578,14 @@ Form-associated checkbox with glass styling.
 | `disabled` | Boolean | Disabled state |
 | `name` | String | Form field name |
 | `value` | String | Value submitted when checked (default `"on"`) |
+| `required` | Boolean | The form does not submit until it is ticked (since 1.20.0) |
 
 Events: `glk-change` → `{ checked }`; also dispatches native `change`. Property: `.checked`.
 
+`element.click()` and a `<label>` around the element or naming it tick it, as they do a
+native checkbox (since 1.20.0). A press on the element's empty width (it is a block, the
+control narrower) still does nothing.
+
 ---
 
 ### 3.12 `<glk-input>`
@@ -565,10 +603,10 @@ Text input with label + hint.
 | `label` | String | Label above the input |
 | `type` | String | Native input type (`text`, `email`, `password`, `number`, …) |
 | `placeholder` | String | Placeholder text |
-| `hint` | String | Helper text below the input |
-| `error` | Boolean | Error styling (red border + red hint) |
+| `hint` | String | Helper text below the input, read as the field's description (`aria-describedby`) |
+| `error` | Boolean | Error styling (red border + red hint) and `aria-invalid` on the field — it does not block the form |
 | `disabled` | Boolean | Disabled state |
-| `required` | Boolean | Required field |
+| `required` | Boolean | Required field — the form does not submit while it is empty (since 1.20.0) |
 | `name` | String | Form field name |
 | `value` | String | Current value |
 | `min`, `max`, `step` | String | Passed to the inner field — range and step of the picker for dates, times and numbers (since 1.17.0) |
@@ -577,7 +615,18 @@ Text input with label + hint.
 
 Events: `glk-input` → `{ value }`, `glk-change` → `{ value }`. Native `input` / `change` also dispatched. Property: `.value`.
 
-The inner field's validity is not reported to the surrounding form: `required`, `pattern` and `min` constrain the field and its picker, but they do not block a submit — validate before sending.
+**Validity (since 1.20.0).** The element reports its inner field's validity to the form:
+`required`, `pattern`, `min`/`max`, `minlength`, `type="email"` … make `form.checkValidity()`
+false and stop a submit at the first invalid field with the browser's own message;
+`reportValidity()` focuses the field. `element.validity`, `.validationMessage`,
+`.willValidate`, `.checkValidity()` and `.reportValidity()` answer on the element. Before
+1.20.0 none of this reached the form. `error` stays a marker: a server's verdict arrives that
+way, and it must not block the next attempt.
+
+**Label and focus (since 1.20.0).** The `label` is tied to the field: it names it for screen
+readers, and a click on it focuses it — as do `element.focus()` and a `<label for>` naming the
+element. An outer `<label for>` focuses, but cannot name, the field inside the shadow root;
+use `label` for the name.
 
 ---
 
@@ -598,6 +647,7 @@ Radio button. Group multiple with the same `name`.
 | `value` | String | Value submitted when checked |
 | `checked` | Boolean | Checked state |
 | `disabled` | Boolean | Disabled state |
+| `required` | Boolean | On any radio of the group: the group is required, any checked radio satisfies it (since 1.20.0) |
 
 Events: `glk-change` → `{ checked, value }`.
 
@@ -660,6 +710,7 @@ Search input with leading icon.
 | Attribute | Type | Description |
 |---|---|---|
 | `placeholder` | String | Placeholder text |
+| `label` | String | Accessible name of the field — it has no visible label (since 1.20.0) |
 | `value` | String | Current value |
 | `name` | String | Form field name |
 | `disabled` | Boolean | Disabled state |
@@ -683,10 +734,11 @@ Dropdown select. Pass native `<option>` elements as children.
 
 | Attribute | Type | Description |
 |---|---|---|
-| `label` | String | Label text |
+| `label` | String | Label text, tied to the field |
 | `name` | String | Form field name |
 | `value` | String | Selected value |
 | `disabled` | Boolean | Disabled state |
+| `required` | Boolean | With an empty first option (`value=""`), the form does not submit until a choice is made (since 1.20.0) |
 
 Children: native `<option>` elements, read from the light DOM.
 
@@ -755,8 +807,17 @@ Switch-style toggle (form-associated).
 | `disabled` | Boolean | Disabled state |
 | `name` | String | Form field name |
 | `value` | String | Submitted value when checked (default `"on"`) |
+| `required` | Boolean | Must be on before the form submits (since 1.20.0) |
+
+Events: `glk-change` → `{ checked }`. Property: `.checked`.
 
-Events: `glk-change` → `{ checked }`. Property: `.checked`. Has `role="switch"` and syncs `aria-checked`.
+**One control (since 1.20.0).** The switch is the native checkbox inside, with
+`role="switch"`, named by `label`. The element itself no longer carries `role`,
+`aria-checked` or `aria-disabled` — before 1.20.0 screen readers met a switch with a checkbox
+inside. Select and style on `[checked]` / `[disabled]`; in tests,
+`getByRole('switch', { name })` finds the input and `.click()`, `.check()` work on it.
+`element.click()` and a `<label>` around the element or naming it toggle it, like a native
+checkbox. Without `label` the element is exactly its track, 52 × 30 px (it was 64 × 34).
 
 ---
 
@@ -783,7 +844,7 @@ Modal dialog with overlay, title, body, and footer actions.
 | Attribute | Type | Description |
 |---|---|---|
 | `open` | Boolean | Visibility state (reflected as `.is-active` on the overlay) |
-| `title` | String | Header title |
+| `title` | String | Header title; names the dialog |
 
 Slots:
 - default — modal body content
@@ -791,7 +852,17 @@ Slots:
 
 Methods: `.show()`, `.close()`. Property: `.open`. Events: `glk-close`.
 
-Closes automatically on overlay click and <kbd>Escape</kbd>.
+Closes automatically on overlay click and <kbd>Escape</kbd>, with its fade, and emits
+`glk-close` then; `.close()` and removing `open` do not emit.
+
+**A native `<dialog>` (since 1.20.0).** The overlay is opened with `showModal()`: it lies in
+the top layer, the page behind it is inert for pointer, keyboard and screen readers, focus
+moves in and returns to where it came from on close, and the content is out of reach while
+closed. Chrome focuses the first field of the content, Safari the first action — put
+`autofocus` on the element that should get the focus, in the content or on an action.
+
+While it is open, **everything outside is inert** — a `<glk-toast>` shown then is neither
+clickable nor announced. Give feedback inside the modal, or close it first.
 
 ---
 
@@ -822,6 +893,9 @@ Slots:
 Methods: `.show()`, `.close()`, `.toggle()`. Property: `.open`.
 Events: `glk-open`, `glk-close`.
 
+The trigger gets `aria-expanded`, kept in step with `open` and set again when the trigger is
+swapped (since 1.20.0); `<glk-button>` and `<glk-pill>` hand it on to their native button.
+
 **Naming warning:** the toggle method is deliberately called `.toggle()`, **not** `.togglePopover()` — the latter collides with the native `HTMLElement.togglePopover()` API from the HTML Popover specification.
 
 ---
@@ -908,6 +982,10 @@ Collapsible sections.
 
 Default slot: body content. Events: `glk-toggle` → `{ open }`. Property: `.open`.
 
+The trigger carries `aria-expanded` and `aria-controls`; a closed section is `inert`, so its
+links and fields are out of the tab order and the accessibility tree until it opens (since
+1.20.0 — before, they were only squeezed to zero height and Tab still reached them).
+
 ---
 
 ### 3.24 `<glk-list>` + `<glk-list-item>`
@@ -1097,7 +1175,7 @@ A row of day chips that scrolls sideways (since 1.16.0) — a booking horizon, t
 | `value` | String | Chosen day `YYYY-MM-DD` |
 | `today` | String | The underlined day; the browser's day when missing |
 | `marks` | JSON | `{ date: tone \| { tone, disabled } }` — tone `primary` / `success` / `warning` / `error`; `disabled` makes the chip unpickable |
-| `locale` | String | BCP 47 tag for the names; the browser language when missing |
+| `locale` | String | BCP 47 tag for the names; without it the page language — the `lang` of the nearest ancestor, usually `<html lang>`, also across shadow roots — else the browser language (page language since 1.19.2) |
 | `label` | String | `aria-label` of the group |
 
 Event: `glk-change { value }` — only on a change made by the user. Properties: `value`, `marks` (object or JSON text), `locale`, `label`. Part: `strip`.
@@ -1120,7 +1198,7 @@ One month with a day to pick (since 1.16.0). The days are buttons in a `role="gr
 | `today` | String | The day with the warm border; the browser's day when missing |
 | `min`, `max` | String | Days outside cannot be picked |
 | `marks` | JSON | `{ date: tone \| [tone, …] }` — up to three tones per day |
-| `locale` | String | BCP 47 tag for names and week start; the browser language when missing |
+| `locale` | String | BCP 47 tag for names and week start; without it the page language — the `lang` of the nearest ancestor, usually `<html lang>`, also across shadow roots — else the browser language (page language since 1.19.2) |
 | `week-start` | Number | 0 = Sunday … 6 = Saturday; from the locale when missing |
 | `label` | String | `aria-label` of the day group |
 | `prev-label`, `next-label` | String | Names of the nav buttons ("Previous month" / "Next month") |
@@ -1216,8 +1294,9 @@ Events: `glk-change { dataUrl, width, height, size }` after a pick, on remove wi
 <form id="contract-form">
   <glk-title>New Contract</glk-title>
 
+  <!-- required stops the submit with the browser's message (since 1.20.0) -->
   <glk-input label="Contract Name" name="name" required></glk-input>
-  <glk-select label="Category" name="category">
+  <glk-select label="Category" name="category" required>
     <option value="">Please select…</option>
     <option value="insurance">Insurance</option>
     <option value="rental">Rental</option>
@@ -1376,6 +1455,9 @@ All `glk-*` events bubble and are `composed: true`, so they pierce shadow bounda
 | `<glk-tab-bar>` without `.glass-bg--has-tab-bar` on the outer background | Tab bar covers bottom content. Add the modifier to the outer `.glass-bg` container. |
 | `<glk-tab-bar floating>` without `<glk-tab-dock>` wrapper | Floating bar relies on the dock for fixed centered positioning. Always wrap it in `<glk-tab-dock>`. |
 | `<glk-tab-dock>` without `.glass-bg--has-tab-bar-floating` on the outer background | Use `--has-tab-bar-floating` (not `--has-tab-bar`) for the floating variant — the padding budget differs. |
+| `<glk-toast>` shown while a `<glk-modal>` is open | Everything outside the open modal is inert — the toast is neither clickable nor announced. Show the message inside the modal, or close it first. |
+| `glk-toggle[aria-checked="true"]` / `[role="switch"]` on the host | Since 1.20.0 the host carries neither; use `glk-toggle[checked]`. The role sits on the native checkbox inside. |
+| Validating `<glk-input required>` by hand before submit | Not needed since 1.20.0 — the form's own validation stops the submit. |
 
 ---
 
@@ -1403,14 +1485,14 @@ All `glk-*` events bubble and are `composed: true`, so they pierce shadow bounda
 | `<glk-status>` | Content | `message` | — | — |
 | `<glk-title>` | Content | — | default | — |
 | `<glk-button>` | Buttons | `variant`, `size`, `disabled`, `type` | default | `glk-click` |
-| `<glk-checkbox>` | Forms | `label`, `checked`, `disabled`, `name`, `value` | — | `glk-change` |
+| `<glk-checkbox>` | Forms | `label`, `checked`, `disabled`, `name`, `value`, `required` | — | `glk-change` |
 | `<glk-input>` | Forms | `label`, `type`, `placeholder`, `hint`, `error`, `disabled`, `required`, `name`, `value`, `min`, `max`, `step`, `minlength`, `maxlength`, `pattern`, `autocomplete`, `inputmode` | — | `glk-input`, `glk-change` |
-| `<glk-radio>` | Forms | `label`, `name`, `value`, `checked`, `disabled` | — | `glk-change` |
+| `<glk-radio>` | Forms | `label`, `name`, `value`, `checked`, `disabled`, `required` | — | `glk-change` |
 | `<glk-range>` | Forms | `label`, `min`, `max`, `value`, `step`, `name`, `disabled` | — | `glk-input`, `glk-change` |
-| `<glk-search>` | Forms | `placeholder`, `value`, `name`, `disabled` | — | `glk-input`, `glk-change` |
-| `<glk-select>` | Forms | `label`, `name`, `value`, `disabled` | default (`<option>`) | `glk-change` |
+| `<glk-search>` | Forms | `placeholder`, `label`, `value`, `name`, `disabled` | — | `glk-input`, `glk-change` |
+| `<glk-select>` | Forms | `label`, `name`, `value`, `disabled`, `required` | default (`<option>`) | `glk-change` |
 | `<glk-textarea>` | Forms | `label`, `rows`, `placeholder`, `name`, `value`, `disabled`, `required` | — | `glk-input`, `glk-change` |
-| `<glk-toggle>` | Forms | `label`, `checked`, `disabled`, `name`, `value` | — | `glk-change` |
+| `<glk-toggle>` | Forms | `label`, `checked`, `disabled`, `name`, `value`, `required` | — | `glk-change` |
 | `<glk-modal>` | Feedback | `open`, `title` | default, `actions` | `glk-close` |
 | `<glk-popover>` | Feedback | `open`, `placement` | `trigger`, default | `glk-open`, `glk-close` |
 | `<glk-progress>` | Feedback | `value`, `label`, `variant`, `size` | — | — |
@@ -1538,18 +1620,18 @@ See the class-based [GlassKit CSS `SKILL.md`](https://github.com/JUNGHERZ/GlassK
 |---|---|
 | Base class | `src/base.js` → `GlkElement`, `GlkFormElement` |
 | Theme sync | Single module-level `MutationObserver` in `base.js` |
-| Adopted stylesheets | `glassSheet` (from `@jungherz-de/glasskit/glasskit-styles.js`) + module-level `hostSheet` / `inlineHostSheet` |
+| Adopted stylesheets | `componentsSheet` (from `@jungherz-de/glasskit/glasskit-styles.js`) + module-level `hostSheet` / `inlineHostSheet` (they also set `color-scheme` per theme) + an element's own `hostStyles` |
 | Per-component structure | One `.js` file per element in `src/components/{category}/glk-{name}.js` |
 | Barrel | `src/index.js` — exports and registers all 36 elements, and exports `GlkElement` / `GlkFormElement` (since 1.14.0) |
 | Build | Rollup → IIFE (`glasskit-elements.js`), minified IIFE, ESM (`glasskit-elements.esm.js`), and per-element ESM in `dist/components/` with `base.js` as a stable entry |
 
 Each element is a subclass of `GlkElement` (or `GlkFormElement` for form controls) and follows a consistent lifecycle:
 
-1. `constructor()` — attach open shadow, adopt GlassKit stylesheet + host display sheet
+1. `constructor()` — attach open shadow (`delegatesFocus` for form elements with one field), adopt GlassKit stylesheet + host display sheet
 2. `connectedCallback()` — create theme wrapper, call `render()`, call `setupEvents()`, register for global theme sync
 3. `render()` — build shadow DOM tree (override per component)
 4. `setupEvents()` — attach DOM listeners (override per component)
 5. `attributeChangedCallback()` — call `onAttributeChanged()` (override per component)
 6. `disconnectedCallback()` — unregister, call `teardownEvents()`
 
-The `GlkFormElement` subclass adds `ElementInternals` for native form participation via `this.setFormValue(value)`, plus `formResetCallback` → `resetValue()` and `formStateRestoreCallback` → `restoreValue()`.
+The `GlkFormElement` subclass adds `ElementInternals` for native form participation via `this.setFormValue(value)`, plus `formResetCallback` → `resetValue()` and `formStateRestoreCallback` → `restoreValue()`. Since 1.20.0 it mirrors the validity of the native field returned by `get _validityField()` onto the host (`syncValidity()`, run after every `setFormValue()` and attribute change); `<glk-radio>` overrides it with the group's verdict.