@gjsify/adwaita-web 0.55.0 → 0.56.0

package/src/elements/adw-overlay-split-view.ts

@@ -26,6 +26,7 @@ import {
 } from '@gjsify/adwaita-core';
 
 import { bindBreakpointSetter } from '../breakpoints.js';
+import type { DispatchedSignals } from '../signals.js';
 import { bindSlottedChildren } from '../slotted-children.js';
 
 /**
@@ -80,6 +81,9 @@ function readTriStateAttr(element: Element, name: string, fallback: boolean): bo
 }
 
 export class AdwOverlaySplitView extends HTMLElement {
+    /** The GTK signals this element dispatches, which is what a `.blp` `bind` of `show-sidebar` follows. */
+    static readonly signals: DispatchedSignals = { 'notify::show-sidebar': 'notify::show-sidebar' };
+
     private _initialized = false;
     private _sidebarEl!: HTMLDivElement;
     private _contentEl!: HTMLDivElement;
@@ -97,6 +101,8 @@ export class AdwOverlaySplitView extends HTMLElement {
      * `show-sidebar` + `pin-sidebar` mean together, held to `OVERLAY_COLLAPSE_VECTORS`.
      */
     private _state = new OverlaySplitViewState();
+    /** The `show-sidebar` the last `notify::show-sidebar` (or the first read) settled on. */
+    private _notifiedShowSidebar: boolean | null = null;
     /** Re-entrancy guard for {@link _reflectShowSidebar}. */
     private _reflecting = false;
     /** The view's own width in CSS px — the size the sidebar fraction is OF. */
@@ -329,13 +335,30 @@ export class AdwOverlaySplitView extends HTMLElement {
     private _reflectShowSidebar() {
         if (this._reflecting) return;
         const wanted = this._state.showSidebar ? '' : 'false';
-        if (this.getAttribute('show-sidebar') === wanted) return;
-        this._reflecting = true;
-        try {
-            this.setAttribute('show-sidebar', wanted);
-        } finally {
-            this._reflecting = false;
+        if (this.getAttribute('show-sidebar') !== wanted) {
+            this._reflecting = true;
+            try {
+                this.setAttribute('show-sidebar', wanted);
+            } finally {
+                this._reflecting = false;
+            }
         }
+        this._notifyShowSidebar();
+    }
+
+    /**
+     * `notify::show-sidebar`, raised on the EFFECTIVE value — the state's, after an auto-hide on
+     * collapse — and only when it changed, the way GObject notifies. Every path that moves it
+     * (the attribute, the property, a breakpoint, a gesture) ends in {@link _reflectShowSidebar},
+     * so this is the one place it is raised. The first read only records the baseline: a bind
+     * reads the current value itself.
+     */
+    private _notifyShowSidebar() {
+        const shown = this._state.showSidebar;
+        const previous = this._notifiedShowSidebar;
+        this._notifiedShowSidebar = shown;
+        if (previous === null || previous === shown) return;
+        this.dispatchEvent(new CustomEvent('notify::show-sidebar', { bubbles: true, detail: { showSidebar: shown } }));
     }
 
     private _syncBreakpoint() {

package/src/elements/adw-preferences-row.ts

@@ -5,7 +5,8 @@
 // FOUR PROPERTIES, AND EVERY ONE OF THEM IS ABOUT THE TITLE LABEL:
 // `title` (Pango markup unless `use-markup` is FALSE), `use-markup`, `use-underline`
 // (an embedded `_` marks a mnemonic) and `title-selectable` (the user may copy it) —
-// the property docs are at adw-preferences-row.c:118-170.
+// the property docs are at adw-preferences-row.c:118-170. Inherited from `GtkWidget`,
+// every row also takes `tooltip-text` (`src/row-tooltip.ts`).
 //
 // ONE DELIBERATE PORT DECISION, named here because C says the opposite in so many
 // words: "It doesn't present the title in any way and lets you present the preference
@@ -43,6 +44,7 @@
 
 import { labelDisplayText, stringIsNotEmpty } from '@gjsify/adwaita-core';
 
+import { applyRowTooltip } from '../row-tooltip.js';
 import { bindEmptySections } from '../empty-sections.js';
 import { bindSlottedChildren } from '../slotted-children.js';
 
@@ -52,7 +54,7 @@ export class AdwPreferencesRow extends HTMLElement {
     private _initialized = false;
 
     static get observedAttributes() {
-        return ['title', 'title-selectable', 'use-markup', 'use-underline'];
+        return ['title', 'title-selectable', 'use-markup', 'use-underline', 'tooltip-text'];
     }
 
     /** `Adw.PreferencesRow:title` — Pango markup unless {@link useMarkup} is false. */
@@ -144,6 +146,7 @@ export class AdwPreferencesRow extends HTMLElement {
         // `Gtk.Label:selectable` puts a label in GTK_SELECTION_TEXT; the DOM's spelling
         // of "this text may be copied" is `user-select: text`.
         this._titleEl.style.userSelect = this.titleSelectable ? 'text' : '';
+        applyRowTooltip(this, [this._titleEl, this._contentEl]);
     }
 }
 

package/src/elements/adw-sidebar.ts

@@ -64,6 +64,7 @@ import {
 
 import { createGtkImage } from './gtk-image.js';
 import { attachRovingFocus } from './roving-focus.js';
+import { booleanAttribute } from '../attributes.js';
 
 // The sidebar consumes its declared children and drops them from the tree, so a later
 // `setAttribute` on one cannot find its sidebar with `closest()`. These keep the link —
@@ -75,28 +76,51 @@ const sectionBindings = new WeakMap<AdwSidebarSection, { sidebar: AdwSidebar; sp
 /** A single sidebar item. Child of <adw-sidebar-section>; consumed at connect time. */
 export class AdwSidebarItem extends HTMLElement {
     static get observedAttributes() {
-        return ['title', 'subtitle', 'icon-name', 'disabled', 'hidden', 'needs-attention', 'badge-number'];
+        return [
+            'title',
+            'subtitle',
+            'icon-name',
+            'disabled',
+            'hidden',
+            'enabled',
+            'visible',
+            'needs-attention',
+            'badge-number',
+        ];
     }
 
     /**
-     * `AdwSidebarItem:enabled`, under the GIR name — the `disabled` attribute inverted. The
-     * property is what lets an authored `enabled: false` reach this item through the
+     * `AdwSidebarItem:enabled`, under the GIR name — the `disabled` attribute inverted.
+     * The property is what lets an authored `enabled: false` reach this item through the
      * shared-tree builder, which writes a `false` through the element's own property.
+     * Reads both the presence-based `disabled` and value-based `enabled` attributes.
      */
     get enabled(): boolean {
+        // Value-based `enabled` attribute takes precedence (shared-tree builder writes it).
+        const enabledAttr = this.getAttribute('enabled');
+        if (enabledAttr !== null) return booleanAttribute(enabledAttr, true);
+        // Fall back to presence-based `disabled` attribute.
         return !this.hasAttribute('disabled');
     }
 
     set enabled(value: boolean) {
+        // Write both for compatibility: value-based `enabled` and presence-based `disabled`.
+        this.setAttribute('enabled', value ? 'true' : 'false');
         this.toggleAttribute('disabled', !value);
     }
 
     /** `AdwSidebarItem:visible` — the `hidden` attribute inverted, for the same reason. */
     get visible(): boolean {
+        // Value-based `visible` attribute takes precedence (shared-tree builder writes it).
+        const visibleAttr = this.getAttribute('visible');
+        if (visibleAttr !== null) return booleanAttribute(visibleAttr, true);
+        // Fall back to presence-based `hidden` attribute.
         return !this.hasAttribute('hidden');
     }
 
     set visible(value: boolean) {
+        // Write both for compatibility: value-based `visible` and presence-based `hidden`.
+        this.setAttribute('visible', value ? 'true' : 'false');
         this.toggleAttribute('hidden', !value);
     }
 
@@ -109,7 +133,9 @@ export class AdwSidebarItem extends HTMLElement {
         else if (name === 'subtitle') binding.spec.subtitle = value;
         else if (name === 'icon-name') binding.spec.iconName = value;
         else if (name === 'disabled') binding.spec.enabled = newValue === null;
+        else if (name === 'enabled') binding.spec.enabled = booleanAttribute(newValue, true);
         else if (name === 'hidden') binding.spec.visible = newValue === null;
+        else if (name === 'visible') binding.spec.visible = booleanAttribute(newValue, true);
         else if (name === 'needs-attention') binding.spec.needsAttention = newValue === null;
         else if (name === 'badge-number') binding.spec.badgeNumber = Number.parseInt(value, 10) || 0;
 
@@ -263,8 +289,10 @@ export class AdwSidebar extends HTMLElement {
                     title: itemEl.getAttribute('title') ?? '',
                     subtitle: itemEl.getAttribute('subtitle') ?? '',
                     iconName: itemEl.getAttribute('icon-name') ?? '',
-                    enabled: !itemEl.hasAttribute('disabled'),
-                    visible: !itemEl.hasAttribute('hidden'),
+                    // Use the element's own property getters, which read both value-based
+                    // (`enabled`/`visible`) and presence-based (`disabled`/`hidden`) attributes.
+                    enabled: itemEl.enabled,
+                    visible: itemEl.visible,
                     badgeNumber: Number.parseInt(itemEl.getAttribute('badge-number') ?? '0', 10) || 0,
                     needsAttention: itemEl.hasAttribute('needs-attention'),
                 };

package/src/elements/adw-spin-row.ts

@@ -24,6 +24,11 @@
 // `adjustment:` sets the property to a whole new object: an unwritten field takes the
 // adjustment's own default, not what the row held (`ADJUSTMENT_AUTHORED_VECTORS`).
 //
+// ATTRIBUTES: `adjustment` (the range, JSON), `value`, `title`, `subtitle`, and
+// `title-lines` / `subtitle-lines` — clamp either label to N lines, `0` = unlimited,
+// the AdwActionRow pspec's sentinel (`@girs/adw-1`, min 0, default 0).
+// `tooltip-text` (`Gtk.Widget:tooltip-text`) — the row's tooltip (`src/row-tooltip.ts`).
+
 // Adapted from Adwaita Web UI Framework (https://github.com/mclellac/adwaita-web).
 // Copyright (c) 2025 csm. MIT License.
 // Modifications: Reimplemented as Web Component for @gjsify/adwaita-web;
@@ -34,7 +39,9 @@ import { SpinState, deriveRowLabels, normalizeAdjustment, parseAdjustment } from
 import type { AdwAdjustment, AdwAdjustmentInput } from '@gjsify/adwaita-core';
 import { attributeOf } from '@gjsify/adwaita-core/tags';
 
+import { applyRowTooltip } from '../row-tooltip.js';
 import { bindSlottedChildren } from '../slotted-children.js';
+import { applyRowLineClamp, parseRowLinesAttribute } from '../row-line-clamp.js';
 
 /** `Gtk.Adjustment`'s six properties, as `AdwAdjustmentInput` names them. */
 const ADJUSTMENT_FIELDS = ['value', 'lower', 'upper', 'stepIncrement', 'pageIncrement', 'pageSize'] as const;
@@ -58,6 +65,10 @@ function authoredAdjustment(node: Node): AdwAdjustmentInput {
 
 export class AdwSpinRow extends HTMLElement {
     private _input!: HTMLInputElement;
+    /** The label column — kept for `tooltip-text`, which the browser reads off a PART. */
+    private _textEl!: HTMLDivElement;
+    /** The −/input/+ box — the other half of the row's surface. */
+    private _controlEl!: HTMLDivElement;
     private _titleEl!: HTMLSpanElement;
     private _subtitleEl!: HTMLSpanElement;
     /** The headless adjustment: the range, the clamp and the two signals (ADR 0004, ADR 0047). */
@@ -65,7 +76,7 @@ export class AdwSpinRow extends HTMLElement {
     private _initialized = false;
 
     static get observedAttributes() {
-        return ['title', 'subtitle', 'value', 'adjustment'];
+        return ['title', 'subtitle', 'value', 'adjustment', 'tooltip-text', 'title-lines', 'subtitle-lines'];
     }
 
     get value(): number {
@@ -107,6 +118,7 @@ export class AdwSpinRow extends HTMLElement {
 
         const text = document.createElement('div');
         text.className = 'adw-row-text';
+        this._textEl = text;
         this._titleEl = document.createElement('span');
         this._titleEl.className = 'adw-row-title';
         this._subtitleEl = document.createElement('span');
@@ -115,6 +127,7 @@ export class AdwSpinRow extends HTMLElement {
 
         const control = document.createElement('div');
         control.className = 'adw-spin-control';
+        this._controlEl = control;
 
         const decBtn = document.createElement('button');
         decBtn.className = 'adw-spin-dec';
@@ -164,7 +177,16 @@ export class AdwSpinRow extends HTMLElement {
 
     attributeChangedCallback(name: string, _old: string | null, val: string | null) {
         if (!this._initialized) return;
-        if (name === 'title' || name === 'subtitle') {
+        if (
+            name === 'title' ||
+            name === 'subtitle' ||
+            name === 'tooltip-text' ||
+            // The two `*-lines` attributes are LABEL geometry, not the adjustment: without
+            // this branch they fell through to the `setValue` below, so `title-lines="1"`
+            // set the numeric value to 1 and clamped nothing.
+            name === 'title-lines' ||
+            name === 'subtitle-lines'
+        ) {
             this._renderText();
             return;
         }
@@ -186,6 +208,19 @@ export class AdwSpinRow extends HTMLElement {
         this._titleEl.hidden = !labels.titleVisible;
         this._subtitleEl.textContent = labels.subtitle;
         this._subtitleEl.hidden = !labels.subtitleVisible;
+        applyRowTooltip(this, [this._textEl, this._controlEl]);
+        this._applyLineClamping();
+    }
+
+    /** Apply CSS line-clamping based on title-lines/subtitle-lines attributes. */
+    private _applyLineClamping(): void {
+        applyRowLineClamp({
+            titleEl: this._titleEl,
+            subtitleEl: this._subtitleEl,
+            textContainerEl: this._titleEl.parentElement!,
+            getTitleLines: () => parseRowLinesAttribute(this.getAttribute('title-lines')),
+            getSubtitleLines: () => parseRowLinesAttribute(this.getAttribute('subtitle-lines')),
+        });
     }
 
     /** A stepper press — the interactive path, so it emits `notify::value`. */

package/src/elements/adw-status-page.ts

@@ -1,9 +1,10 @@
 // <adw-status-page> — A centered empty/placeholder state: a large symbolic
 // icon, a title, a description and an optional action (slotted child).
 // Attributes: icon (symbolic name, with or without -symbolic) or icon-name, the GObject
-// spelling a projected `.blp` writes; title, description.
+// spelling a projected `.blp` writes; title, description, and the boolean compact.
 // Reference: refs/adwaita-web/adwaita-web/scss/_status_page.scss
 // Reference: refs/libadwaita/src/stylesheet/widgets/_misc.scss (AdwStatusPage)
+// Reference: refs/libadwaita/doc/style-classes.md (Compact Status Page)
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web; the
 // icon node is <gtk-image>.
@@ -22,7 +23,7 @@ export class AdwStatusPage extends HTMLElement {
     private _initialized = false;
 
     static get observedAttributes() {
-        return ['icon', 'icon-name', 'title', 'description'];
+        return ['icon', 'icon-name', 'title', 'description', 'compact'];
     }
 
     connectedCallback() {
@@ -64,6 +65,13 @@ export class AdwStatusPage extends HTMLElement {
     }
 
     private _render() {
+        // `.compact` (style-classes.md "Compact Status Page") is keyed off the HOST by
+        // `_status_page.scss`, so this door writes the class itself. ADDED, never toggled:
+        // `shared-tree-builder.ts` puts a `.blp`'s `styles ["compact"]` on this same class,
+        // and a `toggle` would strip it on the first attribute change — `title`, on any page
+        // that sets one. Additive, the way `gtk_button_add_css_class` is.
+        if (this.hasAttribute('compact')) this.classList.add('compact');
+
         const icon = this.getAttribute('icon') ?? this.getAttribute('icon-name');
         // The element swaps the mask class and keeps the size class.
         this._iconEl.iconName = icon;

package/src/elements/adw-switch-row.ts

@@ -14,6 +14,10 @@
 // `<adw-action-row>` — libadwaita's AdwSwitchRow IS an AdwActionRow
 // (adw-switch-row.c:50), so `add_prefix` is inherited, not invented here.
 //
+// ATTRIBUTES: `title`, `subtitle`, `active`, `tooltip-text` (`Gtk.Widget:tooltip-text`),
+// and `title-lines` / `subtitle-lines` —
+// clamp either label to N lines, `0` = unlimited, the AdwActionRow pspec's sentinel
+// (`@girs/adw-1`, min 0, default 0).
 // Adapted from Adwaita Web UI Framework (https://github.com/mclellac/adwaita-web).
 // Copyright (c) 2025 csm. MIT License.
 // Modifications: Reimplemented as Web Component for @gjsify/adwaita-web;
@@ -23,7 +27,9 @@
 import { SwitchRowState, deriveRowLabels } from '@gjsify/adwaita-core';
 
 import { bindEmptySections } from '../empty-sections.js';
+import { applyRowTooltip } from '../row-tooltip.js';
 import { bindSlottedChildren } from '../slotted-children.js';
+import { applyRowLineClamp, parseRowLinesAttribute } from '../row-line-clamp.js';
 
 // SIDE-EFFECT import, deliberately separate from the type import below: it guarantees
 // `gtk-switch` is defined before this module's `customElements.define` can upgrade a
@@ -38,6 +44,8 @@ import type { GtkSwitch } from './gtk-switch.js';
 export class AdwSwitchRow extends HTMLElement {
     private _switchEl!: GtkSwitch;
     private _prefixEl!: HTMLDivElement;
+    /** The label column — kept for `tooltip-text`, which the browser reads off a PART. */
+    private _textEl!: HTMLDivElement;
     private _titleEl!: HTMLSpanElement;
     private _subtitleEl!: HTMLSpanElement;
     /** The headless active flag + its notify rule (ADR 0004). */
@@ -45,7 +53,7 @@ export class AdwSwitchRow extends HTMLElement {
     private _initialized = false;
 
     static get observedAttributes() {
-        return ['title', 'subtitle', 'active'];
+        return ['title', 'subtitle', 'active', 'tooltip-text', 'title-lines', 'subtitle-lines'];
     }
 
     /** The start (prefix) section — append icons/widgets here imperatively. */
@@ -69,6 +77,7 @@ export class AdwSwitchRow extends HTMLElement {
 
         const text = document.createElement('div');
         text.className = 'adw-row-text';
+        this._textEl = text;
         this._titleEl = document.createElement('span');
         this._titleEl.className = 'adw-row-title';
         this._subtitleEl = document.createElement('span');
@@ -160,6 +169,21 @@ export class AdwSwitchRow extends HTMLElement {
         this._titleEl.hidden = !titleVisible;
         this._subtitleEl.textContent = subtitle;
         this._subtitleEl.hidden = !subtitleVisible;
+        // The switch is NOT a part here: `unfocusable` and consumer-facing, and a
+        // tooltip the consumer put on it has to keep winning over the row's.
+        applyRowTooltip(this, [this._prefixEl, this._textEl]);
+        this._applyLineClamping();
+    }
+
+    /** Apply CSS line-clamping based on title-lines/subtitle-lines attributes. */
+    private _applyLineClamping(): void {
+        applyRowLineClamp({
+            titleEl: this._titleEl,
+            subtitleEl: this._subtitleEl,
+            textContainerEl: this._titleEl.parentElement!,
+            getTitleLines: () => parseRowLinesAttribute(this.getAttribute('title-lines')),
+            getSubtitleLines: () => parseRowLinesAttribute(this.getAttribute('subtitle-lines')),
+        });
     }
 }
 

package/src/elements/adw-toggle-group.ts

@@ -48,6 +48,28 @@
 // C does for the only layout this element has, it matches the three sibling tab lists,
 // and it leaves ArrowUp/ArrowDown to the page instead of swallowing a scroll.
 //
+// SENSITIVITY HAS TWO DOORS, and both are the GTK ones. `GtkWidget:sensitive` on the GROUP
+// is the `sensitive` attribute, read by VALUE rather than by presence because the property
+// is TRUE by default and `<adw-toggle-group>` must not read as insensitive (`src/attributes.ts`).
+// `AdwToggle:enabled` is per toggle.
+//
+// PER-TOGGLE `enabled` IS REACHABLE, and the issue's warning does not close it. `add_toggle`
+// spends it at add time — `gtk_widget_set_sensitive (toggle->button, toggle->enabled)`
+// (adw-toggle-group.c:871) — and `adw_toggle_set_enabled` applies it to that same button
+// afterwards (:1663), so nothing about the order is load-bearing. What makes the door awkward
+// is not the order but the TYPE: `AdwToggle` is not a widget and has no `set_sensitive`, so
+// `add_toggle` is the only public way in and it wants an `AdwToggle` this element never
+// builds. Here the door is the rendered `<button>` — which is exactly what `add_toggle` spends
+// the flag on — so the element reads `enabled` where `add_toggle` would have read it and lands
+// in the same state. One consequence is ported with it: an insensitive toggle cannot be the
+// active one (`set_active_toggle`, :720), which is also what makes a disabled `<button>`
+// agree with the selection rather than sitting checked and unreachable.
+//
+// The roving walk is FILTERED, which `roving-focus.ts` requires of every caller: a disabled
+// `<button>` cannot take focus, and leaving one in strands the user on a `focus()` the browser
+// refuses. `status/open-todos/adwaita-web.md` made adding that filter the price of the
+// attribute; this is that change.
+//
 // Reference: refs/libadwaita/src/adw-toggle-group.c (AdwToggleGroup behaviour)
 // Reference: refs/libadwaita/src/stylesheet/widgets/_toggle-group.scss
 // Reference: refs/adwaita-web/adwaita-web/scss/_toggle_group.scss
@@ -58,6 +80,7 @@
 
 import { ToggleGroupState, keptToggles, toggleIndexOfName } from '@gjsify/adwaita-core';
 
+import { booleanAttribute } from '../attributes.js';
 import { createGtkImage } from './gtk-image.js';
 import { attachRovingFocus } from './roving-focus.js';
 
@@ -67,8 +90,24 @@ export class AdwToggle extends HTMLElement {
     // icon-only toggle has no other text — `tooltip` is what NAMES it, so it is not a
     // decoration. It produces no disabled or hidden button, which is the invariant
     // `keyboard-operable.spec.ts` pins this list for.
+    //
+    // `enabled` is the one that DOES change the invariant, and the pinned list is what
+    // forced the roving filter to land in the same change.
     static get observedAttributes() {
-        return ['label', 'icon-name', 'tooltip'];
+        return ['label', 'icon-name', 'tooltip', 'enabled'];
+    }
+
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {
+        if (name === 'enabled' && oldValue !== newValue) {
+            // Notify the parent group that this toggle's enabled state changed.
+            this.dispatchEvent(
+                new CustomEvent('toggle-enabled-changed', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { enabled: newValue !== 'false' },
+                }),
+            );
+        }
     }
 }
 
@@ -82,9 +121,32 @@ export class AdwToggleGroup extends HTMLElement {
     private _stateAttr: 'aria-checked' | 'aria-selected' = 'aria-checked';
     /** Each toggle's `name`, in order — what `active-name` resolves against. */
     private _names: (string | null)[] = [];
+    /** `AdwToggle:enabled` per rendered button, in order — `add_toggle` spends this at add time. */
+    private _enabled: boolean[] = [];
+    /** The authored <adw-toggle> elements, kept to observe live `enabled` changes. */
+    private _toggles: AdwToggle[] = [];
 
     static get observedAttributes() {
-        return ['active', 'active-name', 'flat', 'round'];
+        return ['active', 'active-name', 'flat', 'round', 'sensitive'];
+    }
+
+    /**
+     * `GtkWidget:sensitive` — whether the whole group is insensitive.
+     *
+     * TRUE unless the attribute says `false`, because the property defaults to TRUE and a
+     * boolean attribute read by PRESENCE would leave every group on a page insensitive.
+     */
+    get sensitive(): boolean {
+        return booleanAttribute(this.getAttribute('sensitive'), true);
+    }
+
+    set sensitive(value: boolean) {
+        this.setAttribute('sensitive', value ? 'true' : 'false');
+    }
+
+    /** Whether the toggle at `index` is enabled (`AdwToggle:enabled`) — false once disabled. */
+    isToggleEnabled(index: number): boolean {
+        return this._enabled[index] ?? false;
     }
 
     /** Zero-based index of the active toggle. */
@@ -159,11 +221,15 @@ export class AdwToggleGroup extends HTMLElement {
         // in the C.
         this._innerEl.setAttribute('role', 'none');
 
+        this._toggles = toggles;
         this._buttons = toggles.map((toggle, index) => {
             const btn = document.createElement('button');
             btn.type = 'button';
             btn.className = 'adw-toggle';
             btn.setAttribute('role', toggleRole);
+            // `add_toggle` reads `enabled` while building the button (:871), and a toggle
+            // with no `enabled` attribute is the TRUE default (:513).
+            this._enabled[index] = booleanAttribute(toggle.getAttribute('enabled'), true);
 
             const label = toggle.getAttribute('label') ?? '';
             const icon = toggle.getAttribute('icon-name') ?? '';
@@ -190,6 +256,21 @@ export class AdwToggleGroup extends HTMLElement {
         this._innerEl.append(...this._buttons);
         this.replaceChildren(this._innerEl);
 
+        // Observe live `enabled` changes on the authored <adw-toggle> elements.
+        // Upstream's `adw_toggle_set_enabled` is a live setter (:1663); the port
+        // snapshots at connect, so a later `toggle.setAttribute('enabled', 'false')`
+        // had no effect. The `AdwToggle` element fires `toggle-enabled-changed`
+        // from its attributeChangedCallback; we update `_enabled` and re-render.
+        for (let i = 0; i < this._toggles.length; i++) {
+            this._toggles[i].addEventListener('toggle-enabled-changed', (event: Event) => {
+                const { enabled } = (event as CustomEvent<{ enabled: boolean }>).detail;
+                if (this._enabled[i] !== enabled) {
+                    this._enabled[i] = enabled;
+                    this._render();
+                }
+            });
+        }
+
         // Hand the segments to the headless state machine (it needs the count to
         // bound the selection), then seed the active index from the attribute.
         this._state.setLabels(
@@ -203,16 +284,13 @@ export class AdwToggleGroup extends HTMLElement {
         this._applyActiveName();
         this._render();
 
-        // No `disabled`/`hidden` filter, because no `<adw-toggle>` attribute can produce
-        // either — upstream's per-toggle `enabled` (adw-toggle-group.c:871) has no web
-        // counterpart yet, and a filter for a state this element cannot reach would be
-        // untestable. `AdwToggle.observedAttributes` is pinned in
-        // `keyboard-operable.spec.ts` so the day it grows, this decision has to be
-        // revisited instead of silently becoming a focus trap.
+        // No `hidden` filter, because no `<adw-toggle>` attribute can produce one — and now
+        // there IS a `disabled` one, so the filter `roving-focus.ts` asks of every caller is
+        // here. `status/open-todos/adwaita-web.md` made that the price of `enabled`.
         attachRovingFocus({
             host: this,
             orientation: 'horizontal',
-            items: () => this._buttons,
+            items: () => this._buttons.filter((btn) => !btn.disabled),
             // Same path a click takes, so an arrow key cannot drift from a press.
             select: (item) => this._selectIndex(this._buttons.findIndex((btn) => btn === item)),
         });
@@ -229,7 +307,7 @@ export class AdwToggleGroup extends HTMLElement {
             this._applyActiveName();
             return;
         }
-        // flat / round are styling-only.
+        // `sensitive`, flat and round: styling and per-button state, both `_render`.
         this._render();
     }
 
@@ -253,6 +331,10 @@ export class AdwToggleGroup extends HTMLElement {
     }
 
     private _selectIndex(index: number): void {
+        // `set_active_toggle` refuses a toggle that is not enabled (:720), so an insensitive
+        // one can never become the active one — the check is the core state machine's guard
+        // plus this one, in C's order.
+        if (!this._enabled[index]) return;
         // The core state machine guards the no-op/out-of-range cases and notifies
         // the subscriber (which re-renders) only on a real change.
         if (!this._state.setSelected(index)) return;
@@ -266,14 +348,41 @@ export class AdwToggleGroup extends HTMLElement {
         this.classList.toggle('flat', this.hasAttribute('flat'));
         this.classList.toggle('round', this.hasAttribute('round'));
         const active = this._state.selected;
+        const sensitive = this.sensitive;
+        // The group node's own `:disabled` rule (_toggle-group.scss:16) needs the UA's
+        // `:disabled`, which a custom element never is — `_expander.scss` records why, and
+        // writes the rule against the attribute for the same reason.
+        this.toggleAttribute('disabled', !sensitive);
         this._buttons.forEach((btn, index) => {
             const isActive = index === active;
             btn.classList.toggle('active', isActive);
             btn.setAttribute(this._stateAttr, String(isActive));
+            // `GtkWidget:sensitive` on the GROUP reaches every child in GTK, because
+            // `gtk_widget_is_sensitive` ANDs the parent chain; a `<button disabled>` is the
+            // browser's half of that, and it is also what takes the toggle out of the tab
+            // order and out of the roving walk.
+            btn.disabled = !sensitive || !this._enabled[index];
             // The roving tabindex: Tab enters on the ACTIVE toggle, the way
             // `adw_toggle_group_grab_focus` grabs it, and leaves the group from there.
             btn.tabIndex = isActive ? 0 : -1;
         });
+        // An insensitive toggle can never BE the active one, so an active-but-disabled toggle
+        // — `active="1"` authored next to `<adw-toggle enabled="false">` — would be a
+        // checked radio nothing can reach. Upstream cannot express the pair at all
+        // (`set_active_toggle` clears the selection instead, :720), so the selection moves
+        // to the first enabled toggle, which is the one Tab then enters on.
+        if (!this._enabled[active]) this._activateFirstEnabled();
+    }
+
+    /** Select the first enabled toggle, if there is one — the C's "no active" repair. */
+    private _activateFirstEnabled(): void {
+        const first = this._enabled.findIndex((enabled) => enabled);
+        if (first === -1) return;
+        this._state.setSelected(first);
+        this.setAttribute('active', String(first));
+        // The state change came from _render, not user interaction, but the active
+        // index changed — emit notify::active so consumers stay in sync.
+        this.dispatchEvent(new CustomEvent('notify::active', { bubbles: true, detail: { active: first } }));
     }
 }
 

package/src/elements/adw-window.ts

@@ -20,6 +20,9 @@
 //   width, height — the size REQUEST in px, the one `gtk_widget_set_size_request
 //     (GTK_WIDGET (self), 360, 200)` makes in adw_window_init (C:344). Absent, the
 //     element keeps that default; an explicit attribute overrides it.
+//   default-width, default-height — `Gtk.Window:default-width` / `:default-height`, the size a
+//     `.blp` authors (`default-width: 1100`). A page has no window manager to open the window at
+//     that size, so it IS the box's size here, and it beats the request where both are present.
 //
 // Properties: `content` (the Adw.Window:content child), `breakpoints`,
 // `currentBreakpoint` (Adw.Window:current-breakpoint), `dialogs` and
@@ -51,7 +54,7 @@ export class AdwWindow extends HTMLElement {
     private _openDialogs: HTMLElement[] = [];
 
     static get observedAttributes() {
-        return ['width', 'height'];
+        return ['width', 'height', 'default-width', 'default-height'];
     }
 
     /** The content area — the Adw.Window:content property. */
@@ -128,7 +131,9 @@ export class AdwWindow extends HTMLElement {
         // The size request is read from the ATTRIBUTE, so it is applied on every
         // change — including one that arrived before the element was connected, which
         // is the ordinary case for markup already sitting in a document.
-        if (name === 'width' || name === 'height') this._applySizeRequest();
+        if (name === 'width' || name === 'height' || name === 'default-width' || name === 'default-height') {
+            this._applySizeRequest();
+        }
     }
 
     private _buildOnce() {
@@ -182,8 +187,8 @@ export class AdwWindow extends HTMLElement {
 
     /** The window's size request — GTK's, not CSS's, so an absent attribute means the default. */
     private _applySizeRequest() {
-        const width = this.getAttribute('width');
-        const height = this.getAttribute('height');
+        const width = this.getAttribute('default-width') ?? this.getAttribute('width');
+        const height = this.getAttribute('default-height') ?? this.getAttribute('height');
         this.style.width = width ? `${width}px` : `${DEFAULT_WIDTH}px`;
         this.style.height = height ? `${height}px` : `${DEFAULT_HEIGHT}px`;
     }