@gjsify/adwaita-web 0.55.0 → 0.57.0

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-view-stack.ts

@@ -50,9 +50,17 @@
 import { ViewStackState } from '@gjsify/adwaita-core';
 import type { AdwViewStackPageInfo as CorePageInfo, ViewStackStateChange } from '@gjsify/adwaita-core';
 
+import type { DispatchedSignals } from '../signals.js';
+
 export type AdwViewStackPageInfo = CorePageInfo<HTMLElement>;
 
 export class AdwViewStack extends HTMLElement {
+    /** The GTK signals this element dispatches, each with the DOM event it arrives as (ADR 0093). */
+    static readonly signals: DispatchedSignals = {
+        'notify::visible-child': 'notify::visible-child',
+        'notify::visible-child-name': 'notify::visible-child-name',
+    };
+
     private readonly _state = new ViewStackState<HTMLElement>();
     private _initialized = false;
 
@@ -255,6 +263,12 @@ export class AdwViewStack extends HTMLElement {
                 },
             }),
         );
+        this.dispatchEvent(
+            new CustomEvent('notify::visible-child-name', {
+                bubbles: true,
+                detail: { 'visible-child-name': change.name },
+            }),
+        );
     }
 
     private _applyVisibility(): void {

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`;
     }

package/src/elements/checks.ts

@@ -87,6 +87,8 @@
 
 import { RadioGroupState, resolveCheckState } from '@gjsify/adwaita-core';
 
+import type { DispatchedSignals } from '../signals.js';
+
 /**
  * The document's radio groups. ONE registry, as global as a bare
  * `<input type="radio" name="x">` outside a form is — two independent groups therefore
@@ -124,6 +126,15 @@ abstract class AdwCheckBase extends HTMLElement {
         this.toggleAttribute('checked', !!value);
     }
 
+    /** `Gtk.CheckButton:active`, the GObject name for {@link checked}. */
+    get active(): boolean {
+        return this.checked;
+    }
+
+    set active(value: boolean) {
+        this.checked = value;
+    }
+
     /** Whether the control is in the third, inconsistent state. */
     get indeterminate(): boolean {
         return this.hasAttribute('indeterminate');
@@ -202,10 +213,17 @@ abstract class AdwCheckBase extends HTMLElement {
             this._label.textContent = this.getAttribute('label') ?? '';
         }
         this.render();
+        if (name === 'active') {
+            // The GObject spelling a projected `.blp` writes; `checked` stays the state.
+            this.checked = this.hasAttribute('active');
+        }
         if (name === 'checked') {
             this.dispatchEvent(
                 new CustomEvent('notify::checked', { bubbles: true, detail: { checked: this.checked } }),
             );
+            // `toggled` fires on every change of `active`, programmatic included.
+            this.dispatchEvent(new CustomEvent('toggled', { bubbles: true }));
+            this.dispatchEvent(new CustomEvent('notify::active', { bubbles: true, detail: { active: this.checked } }));
         }
     }
 
@@ -227,8 +245,14 @@ abstract class AdwCheckBase extends HTMLElement {
 
 /** The Adwaita checkbox — `checkbutton > check` as a custom element. */
 export class GtkCheckButton extends AdwCheckBase {
+    /** The GTK signals this element dispatches, each with the DOM event it arrives as (ADR 0093). */
+    static readonly signals: DispatchedSignals = {
+        toggled: 'toggled',
+        'notify::active': 'notify::active',
+    };
+
     static get observedAttributes() {
-        return ['checked', 'indeterminate', 'disabled', 'label'];
+        return ['checked', 'active', 'indeterminate', 'disabled', 'label'];
     }
 
     protected get inputType(): 'checkbox' {

package/src/elements/gtk-application-window.ts

@@ -26,8 +26,11 @@
 
 import type { AdwSlot } from '../slotted-children.js';
 import { GtkWindow } from './gtk-window.js';
+import { defineWindowApplication } from '../application.js';
 
 export class GtkApplicationWindow extends GtkWindow {
+    /** `Gtk.Window:application`: setting it is `add_window` (ADR 0098), set by `defineWindowApplication`. */
+    declare application: object | null;
     private _menubar: HTMLDivElement | null = null;
     private _menubarObserver: MutationObserver | null = null;
 
@@ -106,3 +109,5 @@ export class GtkApplicationWindow extends GtkWindow {
 }
 
 customElements.define('gtk-application-window', GtkApplicationWindow);
+
+defineWindowApplication(GtkApplicationWindow.prototype);

package/src/elements/gtk-drop-down.ts

@@ -47,6 +47,8 @@
 // Events:
 //   `notify::selected` (CustomEvent, bubbles, detail = { selected }) — the index
 //     changed (mirrors the Gtk.DropDown `notify::selected` GObject signal).
+//   `notify::selected-item` (CustomEvent, bubbles, detail = { 'selected-item' }) — fired
+//     right after `notify::selected`, on the same real change.
 //   `change`           (CustomEvent, bubbles, detail = { index, value, label }) —
 //     a convenience event carrying the full selection. Fires ONLY on a user
 //     pick — `ComboState`'s `interactive` flag is what tells the two apart.
@@ -69,6 +71,7 @@ import { ComboState, normalizeComboOptions, parseListModel } from '@gjsify/adwai
 import type { AdwComboOption, AdwListItemsChanged, AdwListModelInput } from '@gjsify/adwaita-core';
 
 import { bindSlottedChildren } from '../slotted-children.js';
+import type { DispatchedSignals } from '../signals.js';
 import { stringListSlot } from '../string-list-slot.js';
 
 import { createGtkImage } from './gtk-image.js';
@@ -81,6 +84,12 @@ import { createGtkImage } from './gtk-image.js';
 export type GtkDropDownOption = AdwComboOption;
 
 export class GtkDropDown extends HTMLElement {
+    /** The GTK signals this element dispatches, each with the DOM event it arrives as (ADR 0093). */
+    static readonly signals: DispatchedSignals = {
+        'notify::selected': 'notify::selected',
+        'notify::selected-item': 'notify::selected-item',
+    };
+
     private _buttonEl!: HTMLButtonElement;
     private _labelEl!: HTMLSpanElement;
     private _popoverEl!: GtkPopover;
@@ -242,6 +251,13 @@ export class GtkDropDown extends HTMLElement {
             // `notify::selected` mirrors GObject property-notify: EVERY change,
             // programmatic included.
             this.dispatchEvent(new CustomEvent('notify::selected', { bubbles: true, detail: { selected: index } }));
+            // `gtk_drop_down_set_selected` notifies `selected-item` right after `selected`.
+            this.dispatchEvent(
+                new CustomEvent('notify::selected-item', {
+                    bubbles: true,
+                    detail: { 'selected-item': option ?? null },
+                }),
+            );
             // `change` mirrors the DOM <select> contract: ONLY a user-initiated change. A
             // programmatic assignment stays silent, just as native `select.value = x` fires
             // no `change`, so consumers can set the value without guarding against it.

package/src/elements/gtk-entry.ts

@@ -22,6 +22,8 @@
 
 import { ENTRY_ROW_MAX_LENGTH_LIMIT, clampEntryText, entryTextLength } from '@gjsify/adwaita-core';
 
+import type { DispatchedSignals } from '../signals.js';
+
 export class GtkEntry extends HTMLElement {
     /**
      * `protected`, not `private`: `GtkPasswordEntry` and `GtkSearchEntry` subclass this
@@ -32,9 +34,18 @@ export class GtkEntry extends HTMLElement {
     protected _input!: HTMLInputElement;
     private _initialized = false;
     private _maxLength = 0;
+    /** The text last announced, so `changed` fires on a real change only — as `gtk_editable_changed` does. */
+    private _announced = '';
+
+    /** The GTK signals this element dispatches, each with the DOM event it arrives as (ADR 0093). */
+    static readonly signals: DispatchedSignals = {
+        changed: 'changed',
+        'notify::text': 'notify::text',
+        activate: 'activate',
+    };
 
     static get observedAttributes() {
-        return ['value', 'placeholder-text', 'placeholder', 'width-request', 'type', 'disabled', 'maxlength'];
+        return ['value', 'text', 'placeholder-text', 'placeholder', 'width-request', 'type', 'disabled', 'maxlength'];
     }
 
     get value(): string {
@@ -43,8 +54,28 @@ export class GtkEntry extends HTMLElement {
 
     set value(v: string) {
         const clamped = clampEntryText(v ?? '', this._maxLength);
-        if (this._input) this._input.value = clamped;
-        else this.setAttribute('value', clamped);
+        if (this._input) {
+            this._input.value = clamped;
+            this._announceText();
+        } else this.setAttribute('value', clamped);
+    }
+
+    /** `Gtk.Editable:text`, the GObject name for {@link value}. */
+    get text(): string {
+        return this.value;
+    }
+
+    set text(v: string) {
+        this.value = v;
+    }
+
+    /** `changed` then `notify::text`, once per real change of the text, typed or set from code. */
+    private _announceText(): void {
+        const text = this._input.value;
+        if (text === this._announced) return;
+        this._announced = text;
+        this.dispatchEvent(new CustomEvent('changed', { bubbles: true }));
+        this.dispatchEvent(new CustomEvent('notify::text', { bubbles: true, detail: { text } }));
     }
 
     /** `Gtk.Entry:max-length` — 0 means unlimited. Counted in CODE POINTS. */
@@ -56,7 +87,10 @@ export class GtkEntry extends HTMLElement {
         this._maxLength = Number.isFinite(value)
             ? Math.min(ENTRY_ROW_MAX_LENGTH_LIMIT, Math.max(0, Math.trunc(value)))
             : 0;
-        if (this._input) this._input.value = clampEntryText(this._input.value, this._maxLength);
+        if (this._input) {
+            this._input.value = clampEntryText(this._input.value, this._maxLength);
+            this._announceText();
+        }
     }
 
     /** `Gtk.Entry:text-length` — code points, not UTF-16 units. */
@@ -92,7 +126,7 @@ export class GtkEntry extends HTMLElement {
         const input = document.createElement('input');
         input.className = 'adw-entry';
         input.type = this.getAttribute('type') || 'text';
-        input.value = clampEntryText(this.getAttribute('value') ?? '', this._maxLength);
+        input.value = clampEntryText(this.getAttribute('value') ?? this.getAttribute('text') ?? '', this._maxLength);
         input.placeholder = this.placeholderAttribute();
         this.applyWidthRequest();
         input.disabled = this.hasAttribute('disabled');
@@ -101,6 +135,7 @@ export class GtkEntry extends HTMLElement {
         input.addEventListener('input', () => {
             const clamped = clampEntryText(input.value, this._maxLength);
             if (clamped !== input.value) input.value = clamped;
+            this._announceText();
         });
         input.addEventListener('keydown', (e) => {
             if (e.key === 'Enter') {
@@ -109,6 +144,7 @@ export class GtkEntry extends HTMLElement {
         });
 
         this._input = input;
+        this._announced = input.value;
         this.replaceChildren(input);
     }
 
@@ -129,8 +165,10 @@ export class GtkEntry extends HTMLElement {
             return;
         }
         if (!this._input) return;
-        if (name === 'value') this._input.value = clampEntryText(value ?? '', this._maxLength);
-        else if (name === 'placeholder-text' || name === 'placeholder')
+        if (name === 'value' || name === 'text') {
+            this._input.value = clampEntryText(value ?? '', this._maxLength);
+            this._announceText();
+        } else if (name === 'placeholder-text' || name === 'placeholder')
             this._input.placeholder = this.placeholderAttribute();
         else if (name === 'type') this._input.type = value || 'text';
         else if (name === 'disabled') this._input.disabled = value !== null;

package/src/elements/gtk-menu-button.ts

@@ -34,6 +34,7 @@ import {
     normalizeMenuModel,
     parseMenuModel,
 } from '@gjsify/adwaita-core';
+import { activateElementMenuItem, menuActionsOfElement } from '../application.js';
 import type { AdwMenuActions, AdwMenuInput, AdwMenuModel, SplitButtonDirection } from '@gjsify/adwaita-core';
 
 import { PopoverMenuView } from './popover-menu.js';
@@ -197,6 +198,7 @@ export class GtkMenuButton extends HTMLElement {
             if (item === null) return;
             this._popoverEl.popdown();
             this._buttonEl.focus();
+            activateElementMenuItem(this, item);
             this.dispatchEvent(
                 new CustomEvent('menu-item-activated', {
                     bubbles: true,
@@ -246,7 +248,10 @@ export class GtkMenuButton extends HTMLElement {
     private _onPopoverToggled(open: boolean): void {
         this.classList.toggle('active', open);
         this._buttonEl.setAttribute('aria-expanded', String(open));
-        if (open) this._menuView.focusableRows[0]?.focus();
+        if (open) {
+            this._refreshActions();
+            this._menuView.focusableRows[0]?.focus();
+        }
         // A dismissal returns the popup to its top page: a menu that reopens inside a
         // submenu is one the reader cannot get out of.
         else this._menuView.reset();
@@ -270,6 +275,12 @@ export class GtkMenuButton extends HTMLElement {
         this._renderMenu();
     }
 
+    /** The registry's answer, unless the application wrote `actions` itself (ADR 0097 § 2). */
+    private _refreshActions(): void {
+        this._menuView.setActions(this._actions ?? menuActionsOfElement(this, this._model));
+        this._menuView.render();
+    }
+
     private _renderMenu(): void {
         this._menuView.setMenuModel(this._model);
         this._menuView.setTitle(this.getAttribute('menu-title') ?? this._menuTitle);