@jungherz-de/glasskit-elements 1.22.2 → 1.23.0

package/CHANGELOG.md

@@ -7,6 +7,39 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.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`).
+
+### Added
+
+- **List text in `<glk-list-item>` can wrap, decided once for a whole app.** Title and subtitle were cut on a phone — one line with an ellipsis, `wrap` clamped at three lines — and the rules sat in the shadow root, out of a project's reach. GlassKit 1.23.0's list tokens reach into the element by inheritance: `--gl-list-title-white-space` and `--gl-list-subtitle-white-space` (`normal` wraps) and `--gl-list-subtitle-lines` (the clamp of `wrap`, `none` shows every line), set on `:root`, one `<glk-list>` or one row. Unset, every row renders as before. A workaround through the `hostStyles` hook can go. ([GlassKit #10](https://github.com/JUNGHERZ/GlassKit/issues/10))
+
+### Fixed
+
+- **A long word in a `wrap` subtitle breaks instead of being clipped, and a `wrap` row without a subtitle keeps its title centred** — both from GlassKit 1.23.0. An e-mail address ran 310 px wide out of a 198 px column; an empty subtitle hidden with `hidden` still took a line's gap. ([GlassKit #10](https://github.com/JUNGHERZ/GlassKit/issues/10))
+
+Measured in Chromium, WebKit and Firefox at a 360 px viewport: `<glk-list-item>` gives the same line counts and row heights as plain GlassKit markup, with and without the tokens. Docs, showcase and landing pages render pixel-identical to 1.22.3.
+
+---
+
+## [1.22.3] – 2026-10-08
+
+GlassKit is unchanged; the peer dependency stays `>=1.22.2`.
+
+### Fixed
+
+- **A `<fieldset disabled>` disables the form elements inside it.** The browser already counted them as disabled — `:disabled`, left out of `FormData` — but their native controls live in the shadow root, where no fieldset reaches, and stayed enabled: every field was reachable with Tab, typing and clicks changed the values, and `<glk-button type="submit">` fired `glk-click` and sent the form, empty. The elements now take the state from `formDisabledCallback`, which the browser calls for the element's own `disabled` attribute and for a fieldset alike, also when an element moves into or out of one. Inside a disabled fieldset they look disabled, drop out of the tab order, take no input and send nothing; a required empty field is barred from validation and counts again once the fieldset is enabled. The `disabled` property still reflects the attribute only, as on a native control. Radios skip a fieldset-disabled member of their group with the arrow keys, and the tab stop moves off it. ([#15](https://github.com/JUNGHERZ/GlassKit-Elements/issues/15))
+- **`<glk-segmented disabled>` and `<glk-calendar disabled>` work.** Neither handled the attribute: the browser counted them as disabled and left them out of the form data, but a click still changed the value. Now the segmented row and the calendar's arrows and days are disabled; an option's own `disabled` stays as it is. ([#15](https://github.com/JUNGHERZ/GlassKit-Elements/issues/15))
+
+### Added
+
+- **A `disabled` property on every form element.** `<glk-search>`, `<glk-range>`, `<glk-segmented>` and `<glk-calendar>` had none; it sits on `GlkFormElement` now. A subclass of `GlkFormElement` overrides `applyDisabled(disabled)` to hand the state to its native controls; it runs after the first render and on every change.
+
+Measured in Chromium and WebKit with every form element inside `<form><fieldset disabled>`, 21 checks per engine: all native controls disabled with GlassKit's disabled look, Tab passes them, clicks and typing change nothing, no submit, no `glk-click`; enabled again, everything works and the button submits once; own attribute and fieldset combine in every order; an element moved in or created inside is disabled from the start; a calendar month shown while disabled stays disabled. Docs, showcase and landing pages render pixel-identical to 1.22.2.
+
+---
+
 ## [1.22.2] – 2026-10-08
 
 ### Fixed
@@ -807,7 +840,9 @@ Starting with this release, GlassKit Elements version numbers are aligned with G
 
 ---
 
-[Unreleased]: https://github.com/JUNGHERZ/GlassKit-Elements/compare/v1.22.2...HEAD
+[Unreleased]: https://github.com/JUNGHERZ/GlassKit-Elements/compare/v1.23.0...HEAD
+[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
 [1.22.1]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.22.1
 [1.22.0]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.22.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.22.2-lightgrey?style=flat-square" alt="Changelog"></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="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.22/glasskit.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.23/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.22/glasskit.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.23/glasskit.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
 </head>
 <body>
@@ -152,7 +152,7 @@ The per-component files leave `@jungherz-de/glasskit/glasskit-styles.js` as an e
 
 ### 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. 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.
+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. Since 1.22.3 a `<fieldset disabled>` around them disables them, as it does native controls.
 
 | Component | Description | Key Attributes |
 |---|---|---|

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: glasskit-elements
-description: GlassKit Elements is a vanilla-JS Web Components library (v1.22.2) wrapping GlassKit CSS v1.22.2. 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.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.
 ---
 
 # GlassKit Elements – AI Component Reference
@@ -18,7 +18,7 @@ description: GlassKit Elements is a vanilla-JS Web Components library (v1.22.2)
 npm install @jungherz-de/glasskit-elements @jungherz-de/glasskit
 ```
 
-Peer dependency `@jungherz-de/glasskit >=1.22.2` is required — 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.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.
 
 ### Import (ES modules)
 
@@ -123,6 +123,7 @@ addEventListener('afterprint', () => {
 | 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 |
+| Disabled | Form elements follow their own `disabled` and a `<fieldset disabled>` around them, as native controls do (since 1.22.3); the `disabled` property reflects the attribute |
 | 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.
@@ -152,7 +153,7 @@ customElements.define('demo-counter', DemoCounter);
 
 Which import to take depends on how the elements are loaded, and mixing them is the one mistake to avoid: the `<script>` / ESM **bundle** carries its own copy of `GlkElement`, so a subclass built on `base.js` next to it is a different class — `instanceof` fails across the two, and the GlassKit stylesheet lives twice. Bundle loaded → take `GlassKitElements.GlkElement` or `import { GlkElement } from '@jungherz-de/glasskit-elements'`. Per-component files loaded → `base.js`, which the components import themselves. The per-component files leave `@jungherz-de/glasskit/glasskit-styles.js` external, so a bundler resolves it from `node_modules` and an import-map project maps it to the one copy it already loads for its own elements.
 
-Rules for a subclass: build only inside `this._wrapper` (it carries `data-theme`, and `data-density` while `<html>` has one); keep listeners in `setupEvents()` / `teardownEvents()`, never in `render()`, or a moved element loses them; use `emit()` instead of `dispatchEvent()` so the event bubbles and crosses the shadow boundary — `emit(name, detail, { cancelable: true })` lets a listener call `preventDefault()`, and `emit()` returns `false` then (since 1.19.0); return `true` from `static get displayInline()` for inline elements; set `static get observesLightDom()` to `true` and implement `projectLightDom()` when copying light-DOM children into the shadow tree. `GlkFormElement` adds `setFormValue()`, `setValidity()`, `resetValue()` / `restoreValue()` and `static formAssociated = true`.
+Rules for a subclass: build only inside `this._wrapper` (it carries `data-theme`, and `data-density` while `<html>` has one); keep listeners in `setupEvents()` / `teardownEvents()`, never in `render()`, or a moved element loses them; use `emit()` instead of `dispatchEvent()` so the event bubbles and crosses the shadow boundary — `emit(name, detail, { cancelable: true })` lets a listener call `preventDefault()`, and `emit()` returns `false` then (since 1.19.0); return `true` from `static get displayInline()` for inline elements; set `static get observesLightDom()` to `true` and implement `projectLightDom()` when copying light-DOM children into the shadow tree. `GlkFormElement` adds `setFormValue()`, `setValidity()`, `resetValue()` / `restoreValue()`, a `disabled` property and `static formAssociated = true`. Override `applyDisabled(disabled)` to disable your native controls (since 1.22.3): it runs after the first render and whenever the element's own `disabled` or a `<fieldset disabled>` around it changes — no fieldset reaches into the shadow root by itself.
 
 ### Light-DOM children (since 1.12.0)
 
@@ -706,7 +707,7 @@ Slider input.
 | `name` | String | Form field name |
 | `disabled` | Boolean | Disabled state |
 
-Events: `glk-input`, `glk-change`. Property: `.value`.
+Events: `glk-input`, `glk-change`. Properties: `.value`, `.disabled` (since 1.22.3).
 
 ---
 
@@ -726,7 +727,7 @@ Search input with leading icon.
 | `name` | String | Form field name |
 | `disabled` | Boolean | Disabled state |
 
-Events: `glk-input`, `glk-change`.
+Events: `glk-input`, `glk-change`. Properties: `.value`, `.disabled` (since 1.22.3).
 
 ---
 
@@ -1058,6 +1059,18 @@ iOS-style grouped settings list. Items carry a leading icon, title + optional su
 | `leading` | Icon slot (24×24 SVG recommended, or 32×32 with `leading-lg`; use `stroke: currentColor`) |
 | `trailing` | Chevron, badge, or button — rendered after `detail` value |
 
+#### Wrapping text (since 1.23.0)
+
+Title and subtitle keep to one line, and `wrap` clamps the subtitle at three lines. GlassKit's list tokens change that for a whole app, one list or one row; they are inherited into the element's shadow root: `--gl-list-title-white-space` and `--gl-list-subtitle-white-space` (`nowrap` by default, `normal` wraps) and `--gl-list-subtitle-lines` (the clamp of `wrap`, `3` unless set, `none` = every line). A word wider than the column (an e-mail address) breaks instead of running out of the row. For breaks at syllables set `hyphens: auto; -webkit-hyphens: auto` on `glk-list` or the page; it is inherited too.
+
+```css
+:root {
+  --gl-list-title-white-space: normal;
+  --gl-list-subtitle-white-space: normal;
+  --gl-list-subtitle-lines: none;
+}
+```
+
 #### Events
 
 `<glk-list-item>` emits `glk-click` when clicked, but only if `interactive` is set.
@@ -1086,8 +1099,9 @@ A small, exclusive choice as one control (since 1.15.0) — traffic light, morni
 | `overflow` | String | What happens when the options do not fit: `scroll` — one row that scrolls sideways, the chosen option kept in view; `wrap` — breaks into lines. Without it the row stays one line (since 1.17.0) |
 | `label` | String | `aria-label` of the group (no default — set it) |
 | `name` | String | Form field name |
+| `disabled` | Boolean | The whole row (since 1.22.3); a `<fieldset disabled>` around it disables it too |
 
-Properties: `value`, `options` (array or JSON text), `full`, `overflow`, `label`. Events: `glk-change` `{ value }` — only on a change made by the user, not on `.value = …`. Part: `group`.
+Properties: `value`, `options` (array or JSON text), `full`, `overflow`, `label`, `disabled`. Events: `glk-change` `{ value }` — only on a change made by the user, not on `.value = …`. Part: `group`.
 
 With `overflow="scroll"` the chosen option is centred in the row after the first layout, on every value change and when the row's width changes — the row scrolls, never the page. Seven areas on a phone:
 
@@ -1202,8 +1216,9 @@ One month with a day to pick (since 1.16.0). The days are buttons in a `role="gr
 | `label` | String | `aria-label` of the day group |
 | `prev-label`, `next-label` | String | Names of the nav buttons ("Previous month" / "Next month") |
 | `name` | String | Form field name |
+| `disabled` | Boolean | Arrows and days (since 1.22.3); a `<fieldset disabled>` around it disables it too |
 
-Events: `glk-change { value }` on a pick by the user; `glk-month { month }` when the user moves to another month. Properties: `month`, `value`, `marks`, `locale`, `label`. Parts: `calendar`, `head`, `title`, `grid`.
+Events: `glk-change { value }` on a pick by the user; `glk-month { month }` when the user moves to another month. Properties: `month`, `value`, `marks`, `locale`, `label`, `disabled`. Parts: `calendar`, `head`, `title`, `grid`.
 
 ---
 

package/dist/components/base.js

@@ -238,6 +238,7 @@ class GlkElement extends HTMLElement {
       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
@@ -340,6 +341,28 @@ class GlkElement extends HTMLElement {
    */
   refresh() { this.projectLightDom(); }
 
+  /**
+   * Form-associated elements only. Such an element is disabled by its own
+   * `disabled` attribute or by a <fieldset disabled> around it: the browser
+   * counts both — :disabled, left out of the form data — and calls
+   * formDisabledCallback() on every change, also when the element moves into
+   * or out of such a fieldset. The native controls sit in the shadow root,
+   * out of every fieldset's reach, so the state is handed on to them through
+   * applyDisabled(). Until 1.22.2 only the element's own attribute reached
+   * them: inside a disabled fieldset every field stayed usable, and a submit
+   * button sent the form.
+   */
+  get _actuallyDisabled() { return this.matches(':disabled'); }
+
+  formDisabledCallback() {
+    if (this._initialized) this._syncDisabled();
+  }
+
+  _syncDisabled() { this.applyDisabled(this._actuallyDisabled); }
+
+  /** Form-associated subclasses override to disable their native controls. */
+  applyDisabled(disabled) {}
+
   // ── Utility Methods ──
 
   /**
@@ -417,6 +440,17 @@ class GlkFormElement extends GlkElement {
     if (this._initialized) this.syncValidity();
   }
 
+  // Reflects the attribute, as on a native control: a disabled fieldset
+  // around the element disables it without changing this.
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+
+  _syncDisabled() {
+    super._syncDisabled();
+    // A disabled field is barred from validation; enabled again, it counts.
+    this.syncValidity();
+  }
+
   get form() { return this._internals.form; }
   get validationMessage() { return this._internals.validationMessage; }
   get validity() { return this._internals.validity; }

package/dist/components/glk-button.js

@@ -11,12 +11,13 @@ const FORWARDED_ARIA = ['aria-expanded', 'aria-haspopup', 'aria-pressed'];
 
 class GlkButton extends GlkElement {
   static get observedAttributes() {
-    return ['variant', 'size', 'disabled', 'type', ...FORWARDED_ARIA];
+    return ['variant', 'size', 'type', ...FORWARDED_ARIA];
   }
 
   // The native button sits in the shadow root, outside every form. Form
   // association gives the element its form, so type="submit" and "reset"
-  // can act on it (see _activateForm).
+  // can act on it (see _activateForm), and a disabled fieldset around it
+  // disables it (since 1.22.3; before, it still sent the form).
   static formAssociated = true;
 
   constructor() {
@@ -29,9 +30,6 @@ class GlkButton extends GlkElement {
       type: this.getAttribute('type') || 'button'
     });
 
-    if (this.getBoolAttr('disabled')) {
-      this._btn.disabled = true;
-    }
     for (const attr of FORWARDED_ARIA) this._forward(attr);
 
     this._btn.appendChild(document.createElement('slot'));
@@ -40,7 +38,7 @@ class GlkButton extends GlkElement {
 
   setupEvents() {
     this._onClick = (e) => {
-      if (this.getBoolAttr('disabled')) {
+      if (this._actuallyDisabled) {
         e.preventDefault();
         e.stopPropagation();
         return;
@@ -99,9 +97,6 @@ class GlkButton extends GlkElement {
       case 'size':
         this._btn.className = this._computeClasses().join(' ');
         break;
-      case 'disabled':
-        this._btn.disabled = this.getBoolAttr('disabled');
-        break;
       case 'type':
         this._btn.setAttribute('type', this.getAttribute('type') || 'button');
         break;
@@ -110,6 +105,8 @@ class GlkButton extends GlkElement {
     }
   }
 
+  applyDisabled(disabled) { this._btn.disabled = disabled; }
+
   _forward(attr) {
     const value = this.getAttribute(attr);
     if (value === null) this._btn.removeAttribute(attr);

package/dist/components/glk-calendar.js

@@ -11,8 +11,9 @@ import '@jungherz-de/glasskit/glasskit-styles.js';
 //             the page language, else the browser's), week-start (0 = Sunday … 6 = Saturday;
 //             default from the locale, Monday where the browser cannot say),
 //             label (aria-label of the day group), prev-label / next-label
-//             (names of the nav buttons, English by default)
-// Properties: month, value, marks, locale, label
+//             (names of the nav buttons, English by default), disabled
+//             (since 1.22.3, as is a disabled fieldset around it)
+// Properties: month, value, marks, locale, label, disabled
 // Form:       associated — a surrounding <form> receives name=value, reset
 //             restores the initial value, like <glk-segmented>
 // Events:     glk-change { value } — on a pick by the user
@@ -104,9 +105,16 @@ class GlkCalendar extends GlkFormElement {
       day.append(num, dots);
       this._grid.appendChild(day);
     }
+    this.applyDisabled(this._actuallyDisabled);
     this._syncValue();
   }
 
+  // Disabled as a whole: the arrows and every day. The days of another month
+  // are built again, so _build() hands the state on to them too.
+  applyDisabled(disabled) {
+    for (const button of [this._prev, this._next, ...this._days()]) button.disabled = disabled;
+  }
+
   _days() { return [...this._grid.querySelectorAll('button[data-value]')]; }
   _dayFor(iso) { return this._grid.querySelector(`button[data-value="${iso}"]`); }
 

package/dist/components/glk-checkbox.js

@@ -5,7 +5,7 @@ const CHECKMARK_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor
 
 class GlkCheckbox extends GlkFormElement {
   static get observedAttributes() {
-    return ['checked', 'disabled', 'label', 'name', 'value', 'required'];
+    return ['checked', 'label', 'name', 'value', 'required'];
   }
 
   static get hostStyles() { return checkControlSheet; }
@@ -31,7 +31,6 @@ class GlkCheckbox extends GlkFormElement {
     label.appendChild(this._labelEl);
 
     if (this.getBoolAttr('checked')) this._input.checked = true;
-    if (this.getBoolAttr('disabled')) this._input.disabled = true;
     if (this.getBoolAttr('required')) this._input.required = true;
 
     this._defaultChecked = this.getBoolAttr('checked');
@@ -65,9 +64,6 @@ class GlkCheckbox extends GlkFormElement {
         this._input.checked = this.getBoolAttr('checked');
         this._syncFormValue();
         break;
-      case 'disabled':
-        this._input.disabled = this.getBoolAttr('disabled');
-        break;
       case 'label':
         this._labelEl.textContent = this.getAttribute('label') || '';
         break;
@@ -80,6 +76,8 @@ class GlkCheckbox extends GlkFormElement {
     }
   }
 
+  applyDisabled(disabled) { this._input.disabled = disabled; }
+
   get _validityField() { return this._input; }
 
   _syncFormValue() {
@@ -101,9 +99,6 @@ class GlkCheckbox extends GlkFormElement {
     if (this._input) this._syncFormValue();
   }
 
-  get disabled() { return this.getBoolAttr('disabled'); }
-  set disabled(v) { this.setBoolAttr('disabled', v); }
-
   get name() { return this.getAttribute('name'); }
   set name(v) { this.setAttribute('name', v); }
 

package/dist/components/glk-input.js

@@ -33,7 +33,7 @@ affixSheet.replaceSync(`
 
 class GlkInput extends GlkFormElement {
   static get observedAttributes() {
-    return ['label', 'type', 'placeholder', 'error', 'hint', 'disabled', 'readonly', 'name', 'value', 'required', ...FORWARDED];
+    return ['label', 'type', 'placeholder', 'error', 'hint', 'readonly', 'name', 'value', 'required', ...FORWARDED];
   }
 
   static get hostStyles() { return affixSheet; }
@@ -64,7 +64,6 @@ class GlkInput extends GlkFormElement {
     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);
@@ -154,9 +153,6 @@ class GlkInput extends GlkFormElement {
         }
         this._applyDescription();
         break;
-      case 'disabled':
-        this._input.disabled = this.getBoolAttr('disabled');
-        break;
       case 'readonly':
         this._input.readOnly = this.getBoolAttr('readonly');
         break;
@@ -175,6 +171,8 @@ class GlkInput extends GlkFormElement {
     }
   }
 
+  applyDisabled(disabled) { this._input.disabled = disabled; }
+
   /** An affix shows, and makes room in the field, only while something is slotted. */
   _applyAffixes() {
     for (const affix of [this._prefix, this._suffix]) {
@@ -240,9 +238,6 @@ class GlkInput extends GlkFormElement {
     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); }
 

package/dist/components/glk-radio.js

@@ -20,7 +20,7 @@ function ownerForm(el) {
 
 /** Only the selected radio is a tab stop; arrow keys move within the group. */
 function syncGroupTabIndex(group) {
-  const enabled = group.filter(el => !el.disabled);
+  const enabled = group.filter(el => !el._actuallyDisabled);
   if (!enabled.length) return;
   const focusable = enabled.find(el => el.checked) || enabled[0];
   for (const el of group) {
@@ -30,7 +30,7 @@ function syncGroupTabIndex(group) {
 
 class GlkRadio extends GlkFormElement {
   static get observedAttributes() {
-    return ['checked', 'disabled', 'label', 'name', 'value', 'required'];
+    return ['checked', 'label', 'name', 'value', 'required'];
   }
 
   static get hostStyles() { return checkControlSheet; }
@@ -60,7 +60,6 @@ class GlkRadio extends GlkFormElement {
     label.appendChild(this._labelEl);
 
     if (this.getBoolAttr('checked')) this._input.checked = true;
-    if (this.getBoolAttr('disabled')) this._input.disabled = true;
 
     this._defaultChecked = this.getBoolAttr('checked');
     this._wrapper.appendChild(label);
@@ -78,7 +77,7 @@ class GlkRadio extends GlkFormElement {
     this._onKeyDown = (e) => {
       const dir = ARROW_KEYS[e.key];
       if (!dir || e.ctrlKey || e.metaKey || e.altKey) return;
-      const group = this._group().filter(el => !el.disabled);
+      const group = this._group().filter(el => !el._actuallyDisabled);
       if (group.length < 2) return;
       e.preventDefault();
       const next = group[(group.indexOf(this) + dir + group.length) % group.length];
@@ -160,10 +159,6 @@ class GlkRadio extends GlkFormElement {
         this._syncFormValue();
         syncGroupTabIndex(this._group());
         break;
-      case 'disabled':
-        this._input.disabled = this.getBoolAttr('disabled');
-        syncGroupTabIndex(this._group());
-        break;
       case 'label':
         this._labelEl.textContent = this.getAttribute('label') || '';
         break;
@@ -178,6 +173,11 @@ class GlkRadio extends GlkFormElement {
     }
   }
 
+  applyDisabled(disabled) {
+    this._input.disabled = disabled;
+    syncGroupTabIndex(this._group());
+  }
+
   _syncFormValue() {
     const val = this.getAttribute('value') || '';
     this.setFormValue(this._input.checked ? val : null);
@@ -202,9 +202,6 @@ class GlkRadio extends GlkFormElement {
     syncGroupTabIndex(this._group());
   }
 
-  get disabled() { return this.getBoolAttr('disabled'); }
-  set disabled(v) { this.setBoolAttr('disabled', v); }
-
   get name() { return this.getAttribute('name'); }
   set name(v) { this.setAttribute('name', v); }
 

package/dist/components/glk-range.js

@@ -3,7 +3,7 @@ import '@jungherz-de/glasskit/glasskit-styles.js';
 
 class GlkRange extends GlkFormElement {
   static get observedAttributes() {
-    return ['label', 'min', 'max', 'value', 'step', 'name', 'disabled'];
+    return ['label', 'min', 'max', 'value', 'step', 'name'];
   }
 
   render() {
@@ -34,8 +34,6 @@ class GlkRange extends GlkFormElement {
     const name = this.getAttribute('name');
     if (name) this._input.setAttribute('name', name);
 
-    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;
@@ -87,12 +85,11 @@ class GlkRange extends GlkFormElement {
       case 'name':
         this._input.setAttribute('name', this.getAttribute('name') || '');
         break;
-      case 'disabled':
-        this._input.disabled = this.getBoolAttr('disabled');
-        break;
     }
   }
 
+  applyDisabled(disabled) { this._input.disabled = disabled; }
+
   _updateValueDisplay() {
     this._valueEl.textContent = `${this._input.value}%`;
   }

package/dist/components/glk-search.js

@@ -5,7 +5,7 @@ const SEARCH_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" s
 
 class GlkSearch extends GlkFormElement {
   static get observedAttributes() {
-    return ['placeholder', 'name', 'value', 'disabled', 'label'];
+    return ['placeholder', 'name', 'value', 'label'];
   }
 
   render() {
@@ -33,8 +33,6 @@ class GlkSearch extends GlkFormElement {
     this._pendingValue = undefined;
     if (value) this._input.value = value;
 
-    if (this.getBoolAttr('disabled')) this._input.disabled = true;
-
     container.appendChild(icon);
     container.appendChild(this._input);
 
@@ -68,15 +66,14 @@ class GlkSearch extends GlkFormElement {
         this._input.value = this.getAttribute('value') || '';
         this._syncFormValue();
         break;
-      case 'disabled':
-        this._input.disabled = this.getBoolAttr('disabled');
-        break;
       case 'label':
         this._applyLabel();
         break;
     }
   }
 
+  applyDisabled(disabled) { this._input.disabled = disabled; }
+
   _applyLabel() {
     const label = this.getAttribute('label');
     if (label) this._input.setAttribute('aria-label', label);

package/dist/components/glk-segmented.js

@@ -8,8 +8,11 @@ import '@jungherz-de/glasskit/glasskit-styles.js';
 // Attributes: options (JSON [{value,label,tone?,disabled?}]), value, full,
 //             overflow ("scroll" | "wrap": what happens when the options
 //             do not fit — without it the row stays one line and runs past
-//             the edge), label (aria-label of the group), name (form field)
-// Properties: value, options (array or JSON text), full, overflow, label
+//             the edge), label (aria-label of the group), name (form field),
+//             disabled (the whole row; since 1.22.3, as is a disabled
+//             fieldset around it)
+// Properties: value, options (array or JSON text), full, overflow, label,
+//             disabled
 // Event:      glk-change { value } — only on a change made by the user
 // Part:       group
 //
@@ -62,13 +65,21 @@ class GlkSegmented extends GlkFormElement {
         button.classList.add(`glass-segmented__item--${option.tone}`);
         button.appendChild(this.createElement('span', ['glass-segmented__dot']));
       }
-      if (option.disabled) button.disabled = true;
       button.appendChild(document.createTextNode(option.label ?? value));
       this._group.appendChild(button);
     }
+    this.applyDisabled(this._actuallyDisabled);
     this._syncValue();
   }
 
+  /** The whole row is disabled, or an option by its own `disabled`. */
+  applyDisabled(disabled) {
+    const options = this.options;
+    this._group.querySelectorAll('button[data-value]').forEach((button, i) => {
+      button.disabled = disabled || Boolean(options[i]?.disabled);
+    });
+  }
+
   _syncValue() {
     const value = this.value;
     for (const button of this._group.querySelectorAll('button[data-value]')) {

package/dist/components/glk-select.js

@@ -13,7 +13,7 @@ import '@jungherz-de/glasskit/glasskit-styles.js';
 
 class GlkSelect extends GlkFormElement {
   static get observedAttributes() {
-    return ['label', 'disabled', 'name', 'value', 'required'];
+    return ['label', 'name', 'value', 'required'];
   }
 
   static get observesLightDom() { return true; }
@@ -32,7 +32,6 @@ class GlkSelect extends GlkFormElement {
     const name = this.getAttribute('name');
     if (name) this._select.setAttribute('name', name);
 
-    if (this.getBoolAttr('disabled')) this._select.disabled = true;
     if (this.getBoolAttr('required')) this._select.required = true;
 
     group.appendChild(this._labelEl);
@@ -106,9 +105,6 @@ class GlkSelect extends GlkFormElement {
       case 'label':
         this._labelEl.textContent = this.getAttribute('label') || '';
         break;
-      case 'disabled':
-        this._select.disabled = this.getBoolAttr('disabled');
-        break;
       case 'name':
         this._select.setAttribute('name', this.getAttribute('name') || '');
         break;
@@ -123,6 +119,8 @@ class GlkSelect extends GlkFormElement {
     }
   }
 
+  applyDisabled(disabled) { this._select.disabled = disabled; }
+
   get _validityField() { return this._select; }
 
   _syncFormValue() {
@@ -148,9 +146,6 @@ class GlkSelect extends GlkFormElement {
     this._applyValue(this._wanted);
     this._syncFormValue();
   }
-
-  get disabled() { return this.getBoolAttr('disabled'); }
-  set disabled(v) { this.setBoolAttr('disabled', v); }
 }
 
 customElements.define('glk-select', GlkSelect);