@jungherz-de/glasskit-elements 1.21.1 → 1.22.0

package/CHANGELOG.md

@@ -7,6 +7,34 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.22.0] – 2026-10-07
+
+Versions realign with GlassKit at 1.22.0, which this release needs (peer dependency `>=1.22.0`) for the input affixes.
+
+### Added
+
+- **`<glk-input>` has `prefix` and `suffix` slots.** It had no slot at all, so a currency, a unit, an icon or a button inside the field's box had to be laid over it from outside, with the field's padding changed through the shadow root to keep the text clear. Now `<span slot="suffix">EUR</span>` sits inside the box at the end, a `slot="prefix"` icon at the start — right to left they swap sides —, both centred on the field. An affix shows only while something is slotted into it, and its width is measured, so the text keeps clear of a unit of any length and the room is there from the first frame, without sliding. A click on slotted text or an icon focuses the field; a slotted button or link takes its own click. Their text is read with the field as its description. New parts: `box`, `prefix`, `suffix`. Built on GlassKit 1.22.0's `.glass-input-wrap`. Without slotted content a field renders exactly as before — the docs, showcase and landing pages are pixel-identical in Chromium and WebKit. Measured: "EUR" 16 px from the end with the field's padding at 16 + 29 + 8 px, "https://" as prefix 48 px with the text after it, an 18 px icon giving 42 px; an affix added later shows and makes room, removed, the field is back to 16 px. ([#12](https://github.com/JUNGHERZ/GlassKit-Elements/issues/12))
+- **`readonly` on `<glk-input>` and `<glk-textarea>`,** with a `readOnly` property. The attribute did not reach the field: a record shown before an edit mode was switched on stayed editable, and typing emitted `glk-input` and `glk-change`. The inner field is read-only now — focusable, selectable and submitted with the form, not editable, and barred from validation like a native read-only field. Measured in Chromium and WebKit: typing into `<glk-input readonly value="Ada">` leaves "Ada", the field takes the focus, the form submits "Ada"; `readOnly = false` makes it editable again. ([#11](https://github.com/JUNGHERZ/GlassKit-Elements/issues/11))
+
+### Fixed
+
+- **A value set as a property survives, whatever the moment.** Frameworks bind values as properties right after creating an element — hybrids whenever the name is a property, lit's `.value`, Vue —, before it is connected and before `<glk-select>` has copied its options in. Measured across the elements, before this release: setting `value` on `<glk-select>`, `<glk-input>`, `<glk-textarea>`, `<glk-search>` or `<glk-range>`, or `checked` on `<glk-checkbox>`, `<glk-toggle>` or `<glk-radio>`, before connecting threw a `TypeError`; a `<glk-select>` given its value after connecting but before the options were copied showed its first option while the app held the other value, and saving kept the value the user had not seen. Now every such setter keeps what it cannot apply yet and `render()` takes it up, the getters read it back meanwhile, and `<glk-select>` keeps a value naming no option yet as the wanted value — selected as soon as an option carries it, until the user picks another. That also makes good the documented promise that a `value` attribute whose option arrives later is selected then: a surviving default selection used to win. A form reset returns `<glk-select>` to its `value` attribute instead of the first option. ([#13](https://github.com/JUNGHERZ/GlassKit-Elements/issues/13))
+- **Properties set before the element was defined are no longer lost.** A property a framework sets while the bundle is still loading lands on the element itself and hides the class's setter — `<glk-list header>`, `<glk-progress value>`, `<glk-image-picker label>` and the form values above showed nothing of it. On first connect such a value is taken off the instance and set again through the setter. Checked for all nineteen settable properties, set before connecting, before the definition and after connecting: each one shows and reads back. ([#13](https://github.com/JUNGHERZ/GlassKit-Elements/issues/13))
+
+### Documentation
+
+- Docs (English and German), README and SKILL.md describe the slots, `readonly`, the wanted value of `<glk-select>` and that properties set early are kept. The prose that 1.20.0 to 1.21.2 added to SKILL.md and README is on one line per paragraph now, as the rest of the new text.
+
+---
+
+## [1.21.2] – 2026-10-05
+
+### Fixed
+
+- **Disabled elements look disabled.** Rebuilt against GlassKit 1.21.2, which adds the disabled state its controls were missing. `<glk-button disabled>` rendered exactly like an enabled button, with the pointer cursor and the hover lift; so did `<glk-pill>` and `<glk-tab-accessory>`, and `<glk-toggle>`, `<glk-checkbox>`, `<glk-radio>`, `<glk-textarea>` and `<glk-range>` showed no difference at all — `<glk-select>` was dimmed by Chrome's own stylesheet only. Now buttons, pill, accessory and the check controls dim to 0.45 with the not-allowed cursor and no hover effect, the fields to 0.4 like `<glk-input>`. Measured in Chromium and WebKit, opacity of the inner control with `disabled` on the element: 1 → 0.45 for button, pill, accessory, toggle, checkbox and radio, 1 (Chrome: 0.7 for the select) → 0.4 for select, textarea and range. The rules are part of GlassKit's component sheet, so they reach the shadow roots; the bundles carry that sheet and needed the rebuild. The disabled toggle and button on the showcase and the docs now look disabled. The peer dependency moves to `>=1.21.2`. ([GlassKit #7](https://github.com/JUNGHERZ/GlassKit/issues/7))
+
+---
+
 ## [1.21.1] – 2026-10-05
 
 ### Fixed
@@ -763,7 +791,9 @@ Starting with this release, GlassKit Elements version numbers are aligned with G
 
 ---
 
-[Unreleased]: https://github.com/JUNGHERZ/GlassKit-Elements/compare/v1.21.1...HEAD
+[Unreleased]: https://github.com/JUNGHERZ/GlassKit-Elements/compare/v1.22.0...HEAD
+[1.22.0]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.22.0
+[1.21.2]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.21.2
 [1.21.1]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.21.1
 [1.21.0]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.21.0
 [1.20.0]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.20.0

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.21.1-lightgrey?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.22.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>
 
@@ -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.21/glasskit.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.22/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.21/glasskit.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.22/glasskit.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
 </head>
 <body>
@@ -156,8 +156,8 @@ All form components support `name`, `value`, `disabled` and participate in nativ
 
 | 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`, `required` |
+| `<glk-input>` | Text input with label & hint; slots `prefix` / `suffix` for an icon, unit or button in the field | `label`, `type`, `placeholder`, `hint`, `error`, `required`, `readonly`, `min`, `max`, `step`, `maxlength`, `pattern`, `autocomplete`, `inputmode` |
+| `<glk-textarea>` | Multi-line text input | `label`, `rows`, `placeholder`, `required`, `readonly` |
 | `<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` |
@@ -267,13 +267,7 @@ 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:
+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 -->

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: glasskit-elements
-description: GlassKit Elements is a vanilla-JS Web Components library (v1.21.1) wrapping GlassKit CSS v1.21.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.22.0) wrapping GlassKit CSS v1.22.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.21.1)
 npm install @jungherz-de/glasskit-elements @jungherz-de/glasskit
 ```
 
-Peer dependency `@jungherz-de/glasskit >=1.21.1` is required — 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.22.0` is required — 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)
 
@@ -36,11 +36,7 @@ import '@jungherz-de/glasskit-elements/components/glk-button.js';
 import { GlkButton } from '@jungherz-de/glasskit-elements/components/glk-button.js';
 ```
 
-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 `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.
+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 `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
 
@@ -214,22 +210,15 @@ 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.
+**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:
+**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.
+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)
 
@@ -323,8 +312,7 @@ 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.
+`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.
 
 ---
 
@@ -574,20 +562,11 @@ Full-width glass button (56 px). Three variants, four sizes.
 
 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.
+**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.
 
-**Upgrading from ≤ 1.19:** code that set `type="submit"` and did the work in a `glk-click`
-handler now gets a real submit as well — handle the form's `submit` event (with
-`preventDefault()` in an SPA) or drop `type="submit"`, or the browser reloads the page.
+**Upgrading from ≤ 1.19:** code that set `type="submit"` and did the work in a `glk-click` handler now gets a real submit as well — handle the form's `submit` event (with `preventDefault()` in an SPA) or drop `type="submit"`, or the browser reloads the page.
 
-`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).
+`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).
 
@@ -613,9 +592,7 @@ Form-associated checkbox with glass styling.
 
 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.
+`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.
 
 ---
 
@@ -638,6 +615,7 @@ Text input with label + hint.
 | `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 — the form does not submit while it is empty (since 1.20.0) |
+| `readonly` | Boolean | Read-only: focusable, selectable and submitted, not editable, barred from validation like a native field; property `.readOnly` (since 1.22.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) |
@@ -646,18 +624,20 @@ Text input with label + hint.
 
 Events: `glk-input` → `{ value }`, `glk-change` → `{ value }`. Native `input` / `change` also dispatched. Property: `.value`.
 
-**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.
+**Slots `prefix` and `suffix` (since 1.22.0)** put an icon, a currency, a unit or a button inside the field's box, at its start and end (they swap sides under `dir="rtl"`). Each shows only while something is slotted; its width is measured and the field's padding grows by it, so the text keeps clear of a unit of any length. A click on slotted text or an icon focuses the field; a slotted button or link takes its own click. Their text is read as part of the field's description. Parts: `box`, `prefix`, `suffix`. Built on GlassKit's `.glass-input-wrap` (GlassKit 1.22.0).
 
-**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.
+```html
+<glk-input label="Price" inputmode="decimal">
+  <span slot="suffix">EUR</span>
+</glk-input>
+<glk-input label="Search" type="search">
+  <svg slot="prefix" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
+</glk-input>
+```
+
+**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.
 
 ---
 
@@ -797,6 +777,8 @@ it happens to be first.
 A `value` naming no existing option leaves the current selection alone rather than
 clearing it — when the matching option arrives later, it is selected then.
 
+**Set as a property (since 1.22.0).** The same holds for `select.value = 'b'`: a value set before the element is connected, before its options are copied in, or before the options exist at all is kept as the wanted value and selected as soon as an option carries it — until the user picks another, which replaces it. `select.value` reads it back meanwhile. Before 1.22.0 such a value threw before connecting and was lost afterwards — the select showed its first option while the app held the other value. A form reset returns to the `value` attribute.
+
 ---
 
 ### 3.17 `<glk-textarea>`
@@ -816,6 +798,7 @@ Multi-line text input.
 | `value` | String | Current value |
 | `disabled` | Boolean | Disabled state |
 | `required` | Boolean | Required field |
+| `readonly` | Boolean | Read-only, property `.readOnly` (since 1.22.0) |
 
 Events: `glk-input`, `glk-change`.
 
@@ -842,13 +825,7 @@ Switch-style toggle (form-associated).
 
 Events: `glk-change` → `{ checked }`. Property: `.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).
+**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).
 
 ---
 
@@ -883,17 +860,11 @@ Slots:
 
 Methods: `.show()`, `.close()`. Property: `.open`. Events: `glk-close`.
 
-Closes automatically on overlay click and <kbd>Escape</kbd>, with its fade, and emits
-`glk-close` then; `.close()` and removing `open` do not emit.
+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.
+**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.
+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.
 
 ---
 
@@ -924,8 +895,7 @@ 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.
+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.
 
@@ -1013,9 +983,7 @@ 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).
+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).
 
 ---
 
@@ -1518,12 +1486,12 @@ All `glk-*` events bubble and are `composed: true`, so they pierce shadow bounda
 | `<glk-title>` | Content | — | default | — |
 | `<glk-button>` | Buttons | `variant`, `size`, `disabled`, `type` | default | `glk-click` |
 | `<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-input>` | Forms | `label`, `type`, `placeholder`, `hint`, `error`, `disabled`, `readonly`, `required`, `name`, `value`, `min`, `max`, `step`, `minlength`, `maxlength`, `pattern`, `autocomplete`, `inputmode` | `prefix`, `suffix` | `glk-input`, `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`, `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-textarea>` | Forms | `label`, `rows`, `placeholder`, `name`, `value`, `disabled`, `readonly`, `required` | — | `glk-input`, `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` |
@@ -1540,6 +1508,8 @@ All `glk-*` events bubble and are `composed: true`, so they pierce shadow bounda
 
 GlassKit Elements are standards-compliant Custom Elements. They work in every major framework:
 
+**Properties set early are kept (since 1.22.0).** Frameworks bind values as properties right after creating an element — before it is connected, and sometimes before the bundle has even defined it. A property set before the element rendered waits for it (`value`, `checked` and the rest no longer throw), and one set before the class was defined, which lands on the instance and hides the setter, is taken over through the setter on first connect.
+
 ### Vanilla HTML / JS
 
 ```html

package/dist/components/base.js

@@ -225,6 +225,9 @@ class GlkElement extends HTMLElement {
 
   connectedCallback() {
     if (!this._initialized) {
+      // Before _initialized: setters that set attributes must not reach
+      // onAttributeChanged yet — render() reads the attributes anyway.
+      this._upgradeProperties();
       this._initialized = true;
 
       // Create theme wrapper (display:contents makes it layout-transparent)
@@ -259,6 +262,30 @@ class GlkElement extends HTMLElement {
     }
   }
 
+  /**
+   * A property set on the element before its class was defined — markup a
+   * framework fills before the bundle has loaded — lands on the instance
+   * and hides the class's accessor: the setter never ran, and the value was
+   * lost (a glk-select kept its first option, a glk-progress stayed at 0).
+   * Such a value is taken off the instance and set again through the
+   * setter, which keeps what it cannot apply before render().
+   */
+  _upgradeProperties() {
+    for (const key of Object.keys(this)) {
+      let proto = Object.getPrototypeOf(this);
+      let setter = null;
+      while (proto && proto !== HTMLElement.prototype) {
+        const desc = Object.getOwnPropertyDescriptor(proto, key);
+        if (desc) { setter = desc.set; break; }
+        proto = Object.getPrototypeOf(proto);
+      }
+      if (!setter) continue;
+      const value = this[key];
+      delete this[key];
+      this[key] = value;
+    }
+  }
+
   disconnectedCallback() {
     instances.delete(this);
     this._lightDomObserver?.disconnect();

package/dist/components/glk-checkbox.js

@@ -93,11 +93,12 @@ class GlkCheckbox extends GlkFormElement {
     this._syncFormValue();
   }
 
-  get checked() { return this._input?.checked ?? false; }
+  // Before render() the attribute carries the state: render() reads it.
+  get checked() { return this._input ? this._input.checked : this.getBoolAttr('checked'); }
   set checked(v) {
     if (this._input) this._input.checked = v;
     this.setBoolAttr('checked', v);
-    this._syncFormValue();
+    if (this._input) this._syncFormValue();
   }
 
   get disabled() { return this.getBoolAttr('disabled'); }

package/dist/components/glk-input.js

@@ -7,11 +7,26 @@ import '@jungherz-de/glasskit/glasskit-styles.js';
 // 1.17.0 — before, a date field with min still offered every past day).
 const FORWARDED = ['min', 'max', 'step', 'minlength', 'maxlength', 'pattern', 'autocomplete', 'inputmode'];
 
+// Prefix and suffix (since 1.22.0): two slots inside the field's box, on
+// GlassKit's .glass-input-wrap. An affix shows only while something is
+// slotted into it, and its width is measured, so the text keeps clear of a
+// unit of any length. GlassKit lets clicks through an affix to the field;
+// slotted elements take them here instead — a button or a link inside
+// works — and a click on slotted text or an icon still lands in the field,
+// because the shadow root delegates focus to it.
+const affixSheet = new CSSStyleSheet();
+affixSheet.replaceSync(`
+  .glass-input-wrap__prefix ::slotted(*),
+  .glass-input-wrap__suffix ::slotted(*) { pointer-events: auto; }
+`);
+
 class GlkInput extends GlkFormElement {
   static get observedAttributes() {
-    return ['label', 'type', 'placeholder', 'error', 'hint', 'disabled', 'name', 'value', 'required', ...FORWARDED];
+    return ['label', 'type', 'placeholder', 'error', 'hint', 'disabled', 'readonly', 'name', 'value', 'required', ...FORWARDED];
   }
 
+  static get hostStyles() { return affixSheet; }
+
   render() {
     const group = this.createElement('div', ['glass-input-group']);
 
@@ -33,19 +48,28 @@ class GlkInput extends GlkFormElement {
     const name = this.getAttribute('name');
     if (name) this._input.setAttribute('name', name);
 
-    const value = this.getAttribute('value');
+    // A value set as a property before render() has waited for it.
+    const value = this._pendingValue ?? this.getAttribute('value');
+    this._pendingValue = undefined;
     if (value) this._input.value = value;
 
     if (this.getBoolAttr('disabled')) this._input.disabled = true;
+    if (this.getBoolAttr('readonly')) this._input.readOnly = true;
     if (this.getBoolAttr('required')) this._input.required = true;
     for (const attr of FORWARDED) this._forward(attr);
 
+    // The field's box: the input, a prefix and a suffix slot on top of it
+    this._box = this.createElement('div', ['glass-input-wrap'], { part: 'box' });
+    this._prefix = this._createAffix('prefix');
+    this._suffix = this._createAffix('suffix');
+    this._box.append(this._prefix, this._input, this._suffix);
+
     // Hint — read out with the field as its description
     this._hintEl = this.createElement('span', this._computeHintClasses(), { id: 'hint' });
     this._hintEl.textContent = this.getAttribute('hint') || '';
 
     group.appendChild(this._labelEl);
-    group.appendChild(this._input);
+    group.appendChild(this._box);
     if (this.getAttribute('hint')) group.appendChild(this._hintEl);
 
     this._group = group;
@@ -55,6 +79,12 @@ class GlkInput extends GlkFormElement {
     this._syncFormValue();
   }
 
+  _createAffix(name) {
+    const affix = this.createElement('span', [`glass-input-wrap__${name}`], { id: name, part: name, hidden: '' });
+    affix.appendChild(this.createElement('slot', [], { name }));
+    return affix;
+  }
+
   setupEvents() {
     this._onInput = () => {
       this._syncFormValue();
@@ -67,11 +97,26 @@ class GlkInput extends GlkFormElement {
     };
     this._input.addEventListener('input', this._onInput);
     this._input.addEventListener('change', this._onChangeNative);
+
+    // Affixes: shown while something is slotted, measured while shown.
+    this._onSlotChange = () => this._applyAffixes();
+    this._box.addEventListener('slotchange', this._onSlotChange);
+    this._affixObserver = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        const size = entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+        this._box.style.setProperty(`--gl-input-${entry.target.id}-size`, `${size}px`);
+      }
+    });
+    this._affixObserver.observe(this._prefix);
+    this._affixObserver.observe(this._suffix);
+    this._applyAffixes();
   }
 
   teardownEvents() {
     this._input?.removeEventListener('input', this._onInput);
     this._input?.removeEventListener('change', this._onChangeNative);
+    this._box?.removeEventListener('slotchange', this._onSlotChange);
+    this._affixObserver?.disconnect();
   }
 
   onAttributeChanged(name) {
@@ -101,6 +146,9 @@ class GlkInput extends GlkFormElement {
       case 'disabled':
         this._input.disabled = this.getBoolAttr('disabled');
         break;
+      case 'readonly':
+        this._input.readOnly = this.getBoolAttr('readonly');
+        break;
       case 'name':
         this._input.setAttribute('name', this.getAttribute('name') || '');
         break;
@@ -116,14 +164,27 @@ class GlkInput extends GlkFormElement {
     }
   }
 
+  /** An affix shows, and makes room in the field, only while something is slotted. */
+  _applyAffixes() {
+    for (const affix of [this._prefix, this._suffix]) {
+      const filled = affix.firstElementChild.assignedNodes().length > 0;
+      affix.hidden = !filled;
+      this._box.classList.toggle(`glass-input-wrap--${affix.id}`, filled);
+    }
+    this._applyDescription();
+  }
+
   /**
-   * The hint describes the field; with `error` set it is the error message
-   * and the field is marked invalid. Server-side errors arrive this way, so
-   * `error` stays a marker for assistive technology and does not block the
-   * form — only the field's own constraints (required, pattern …) do.
+   * Prefix, suffix and hint describe the field — a unit belongs to the value
+   * it stands next to. With `error` set the hint is the error message and the
+   * field is marked invalid. Server-side errors arrive this way, so `error`
+   * stays a marker for assistive technology and does not block the form —
+   * only the field's own constraints (required, pattern …) do.
    */
   _applyDescription() {
-    if (this.getAttribute('hint')) this._input.setAttribute('aria-describedby', 'hint');
+    const ids = [this._prefix, this._suffix].filter(affix => affix && !affix.hidden).map(affix => affix.id);
+    if (this.getAttribute('hint')) ids.push('hint');
+    if (ids.length) this._input.setAttribute('aria-describedby', ids.join(' '));
     else this._input.removeAttribute('aria-describedby');
     if (this.getBoolAttr('error')) this._input.setAttribute('aria-invalid', 'true');
     else this._input.removeAttribute('aria-invalid');
@@ -158,15 +219,22 @@ class GlkInput extends GlkFormElement {
     this._syncFormValue();
   }
 
-  get value() { return this._input?.value ?? ''; }
+  get value() { return this._input ? this._input.value : (this._pendingValue ?? this.getAttribute('value') ?? ''); }
   set value(v) {
-    if (this._input) this._input.value = v;
+    const value = v == null ? '' : String(v);
+    // Frameworks set properties right after creating the element. Before
+    // render() the value waits for it — it used to throw.
+    if (!this._input) { this._pendingValue = value; return; }
+    this._input.value = value;
     this._syncFormValue();
   }
 
   get disabled() { return this.getBoolAttr('disabled'); }
   set disabled(v) { this.setBoolAttr('disabled', v); }
 
+  get readOnly() { return this.getBoolAttr('readonly'); }
+  set readOnly(v) { this.setBoolAttr('readonly', v); }
+
   get name() { return this.getAttribute('name'); }
   set name(v) { this.setAttribute('name', v); }
 }

package/dist/components/glk-radio.js

@@ -190,14 +190,15 @@ class GlkRadio extends GlkFormElement {
     syncGroupTabIndex(this._group());
   }
 
-  get checked() { return this._input?.checked ?? false; }
+  // Before render() the attribute carries the state: render() reads it.
+  get checked() { return this._input ? this._input.checked : this.getBoolAttr('checked'); }
   set checked(v) {
     if (this._input) this._input.checked = v;
     // Also covers the case where the attribute is already present, so
     // setBoolAttr stays silent and onAttributeChanged never runs.
     if (v) this._uncheckPeers();
     this.setBoolAttr('checked', v);
-    this._syncFormValue();
+    if (this._input) this._syncFormValue();
     syncGroupTabIndex(this._group());
   }
 

package/dist/components/glk-range.js

@@ -36,13 +36,17 @@ class GlkRange extends GlkFormElement {
 
     if (this.getBoolAttr('disabled')) this._input.disabled = true;
 
+    // The reset value is the attribute's; a value set as a property before
+    // render() has waited for it and comes on top.
+    this._defaultValue = this._input.value;
+    if (this._pendingValue !== undefined) this._input.value = this._pendingValue;
+    this._pendingValue = undefined;
     this._updateValueDisplay();
 
     group.appendChild(header);
     group.appendChild(this._input);
 
     this._wrapper.appendChild(group);
-    this._defaultValue = this._input.value;
     this._syncFormValue();
   }
 
@@ -103,9 +107,13 @@ class GlkRange extends GlkFormElement {
     this._syncFormValue();
   }
 
-  get value() { return this._input?.value ?? ''; }
+  get value() { return this._input ? this._input.value : (this._pendingValue ?? this.getAttribute('value') ?? '50'); }
   set value(v) {
-    if (this._input) this._input.value = v;
+    const value = v == null ? '' : String(v);
+    // Frameworks set properties right after creating the element. Before
+    // render() the value waits for it — it used to throw.
+    if (!this._input) { this._pendingValue = value; return; }
+    this._input.value = value;
     this._updateValueDisplay();
     this._syncFormValue();
   }