@gjsify/adwaita-web 0.30.0 → 0.32.0

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

@@ -1,68 +1,436 @@
 // <adw-entry-row> — A boxed-list row that is itself a text entry: the title
-// floats as a label and the editable text sits inline on the row.
-// Attributes: title, text.
-// Property: text (get/set, proxies the inner input).
-// Events: `changed` (CustomEvent) on every edit — mirrors Adw.EntryRow's
-//   `changed` signal so it drives the same code path as the GTK renderer.
+// doubles as placeholder text and the editable value sits inline on the row.
+//
+// The DERIVATION behind all of that — `update_empty`'s five-output truth table,
+// the `text_changed` apply latch with both of its reset paths, character-counted
+// max-length truncation and the two-way <kbd>Enter</kbd> dispatch — is HEADLESS
+// and lives in `@gjsify/adwaita-core` (ADR 0004) as {@link EntryRowState}. This
+// element composes it and keeps only the DOM half; `@gjsify/adwaita-nativescript`
+// composes the same state machine, so both ports share one behaviour and are
+// held to one table (`@gjsify/adwaita-core/conformance`).
+//
+// Attributes: title, text, editable, max-length, show-apply-button,
+//   activates-default. `text-length` is REFLECTED (read-only, mirrors
+//   `Adw.EntryRow:text-length`).
+// Properties: text, editable, maxLength, textLength, showApplyButton,
+//   activatesDefault, editing.
+// Events:
+//   `changed` + `notify::text` — every buffer change. libadwaita implements
+//     GtkEditable through a delegate (adw-entry-row.c:87-93, :821-834) so it
+//     emits BOTH spellings; the two ports had each picked one and drifted, so
+//     this emits both and code written against either runs against the other.
+//   `notify::text-length` — on_length_changed (C:268-273).
+//   `apply` — the apply button, or Enter while it shows (C:240).
+//   `entry-activated` — Enter otherwise (C:256), AFTER the default was activated.
+//
+// Reference: refs/libadwaita/src/adw-entry-row.c, adw-entry-row.ui
 // Reference: refs/adwaita-web/adwaita-web/docs/widgets/entryrow.md
 // Reference: refs/libadwaita/src/stylesheet/widgets/_entries.scss
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
-// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web; the
+// edit icon node is <adw-icon>.
+
+import {
+    ENTRY_ROW_APPLY_ICON_NAME,
+    ENTRY_ROW_APPLY_TOOLTIP,
+    ENTRY_ROW_EDIT_ICON_NAME,
+    EntryRowState,
+    type EntryRowRenderState,
+} from '@gjsify/adwaita-core';
+
+import { type AdwIcon, createAdwIcon } from './adw-icon.js';
+
+/**
+ * Show/hide a rendered part.
+ *
+ * `hidden` carries the semantics and is what the conformance suite reads, but
+ * author CSS beats the UA `[hidden]` rule: `.adw-icon` already ships its own
+ * `&[hidden] { display: none }` override in `_icon.scss` and `.adw-button`
+ * does not, so a hidden apply button would still paint. The inline `display`
+ * rides along until the entry-row SCSS pass lands.
+ */
+function setPartVisible(part: HTMLElement, visible: boolean): void {
+    part.hidden = !visible;
+    part.style.display = visible ? '' : 'none';
+}
+
+/** Read a boolean attribute the HTML way, with an explicit `="false"` opt-out. */
+function boolAttribute(value: string | null): boolean {
+    return value !== null && value !== 'false';
+}
 
 export class AdwEntryRow extends HTMLElement {
-    private _input!: HTMLInputElement;
-    private _titleEl!: HTMLSpanElement;
-    private _initialized = false;
+    /** The headless `update_empty` derivation + apply latch (ADR 0004). */
+    protected readonly _state = new EntryRowState();
+    protected _input!: HTMLInputElement;
+    /** The large placeholder title (`empty_title` in adw-entry-row.ui). */
+    protected _emptyTitle!: HTMLSpanElement;
+    /** The small label above the value (`title` in adw-entry-row.ui). */
+    protected _title!: HTMLSpanElement;
+    /** The `editable-area` gizmo: both titles plus the input. */
+    protected _area!: HTMLDivElement;
+    protected _editIcon!: AdwIcon;
+    protected _indicator!: HTMLSpanElement;
+    protected _applyButton!: HTMLButtonElement;
+    protected _prefixes!: HTMLDivElement;
+    protected _suffixes!: HTMLDivElement;
+    protected _initialized = false;
+    /** Light-DOM children captured at build time, adopted after `_onConnected`. */
+    private _authored: Element[] = [];
+    private _lastText = '';
+    private _lastLength = 0;
+
+    static get observedAttributes(): string[] {
+        return ['title', 'text', 'editable', 'max-length', 'show-apply-button', 'activates-default'];
+    }
 
-    static get observedAttributes() {
-        return ['title', 'text'];
+    /**
+     * Class-name prefix for this row's parts. `<adw-password-entry-row>`
+     * overrides it so `_password_entry_row.scss` keeps matching its own parts —
+     * the two SCSS partials are near-identical but each scopes to its own tag.
+     */
+    protected get _classPrefix(): string {
+        return 'adw-entry-row';
     }
 
+    /** The editable text. */
     get text(): string {
-        return this._input ? this._input.value : (this.getAttribute('text') ?? '');
+        return this._state.text;
     }
 
     set text(value: string) {
-        if (this._input) this._input.value = value;
-        else this.setAttribute('text', value);
+        this._state.setText(value ?? '');
+    }
+
+    /** `Adw.EntryRow:text-length` — the number of CHARACTERS, not UTF-16 units. */
+    get textLength(): number {
+        return this._state.textLength;
+    }
+
+    /** `Adw.EntryRow:max-length` — maximum number of characters, `0` = unlimited. */
+    get maxLength(): number {
+        return this._state.maxLength;
+    }
+
+    set maxLength(value: number) {
+        this._state.setMaxLength(value);
+    }
+
+    /** Whether the entry accepts edits (`GtkEditable:editable`). */
+    get editable(): boolean {
+        return this._state.editable;
+    }
+
+    set editable(value: boolean) {
+        this._state.setEditable(value);
+    }
+
+    /** `Adw.EntryRow:show-apply-button` — typing reveals an apply button. */
+    get showApplyButton(): boolean {
+        return this._state.showApplyButton;
+    }
+
+    set showApplyButton(value: boolean) {
+        this._state.setShowApplyButton(value);
+    }
+
+    /** `Adw.EntryRow:activates-default` — Enter may submit the surrounding form. */
+    get activatesDefault(): boolean {
+        return this._state.activatesDefault;
+    }
+
+    set activatesDefault(value: boolean) {
+        this._state.setActivatesDefault(value);
+    }
+
+    /** Whether the embedded entry currently has focus. */
+    get editing(): boolean {
+        return this._state.editing;
     }
 
     connectedCallback() {
         if (this._initialized) return;
         this._initialized = true;
 
-        this._titleEl = document.createElement('span');
-        this._titleEl.className = 'adw-row-title';
-        this._titleEl.textContent = this.getAttribute('title') ?? '';
+        this._build();
+
+        // Seed from the attributes BEFORE subscribing, so building the initial
+        // DOM is not driven by change notifications (the adw-spin-row pattern).
+        // `text` is only taken when the attribute is present, so a property set
+        // before the element was connected survives.
+        this._state.setMaxLength(Number.parseInt(this.getAttribute('max-length') ?? '', 10));
+        this._state.setEditable(this.getAttribute('editable') !== 'false');
+        this._state.setShowApplyButton(boolAttribute(this.getAttribute('show-apply-button')));
+        this._state.setActivatesDefault(boolAttribute(this.getAttribute('activates-default')));
+        if (this.hasAttribute('text')) this._state.setText(this.getAttribute('text') ?? '');
+        this._renderTitle();
+
+        // Subclass parts first, THEN the author's children: `AdwPasswordEntryRow`
+        // installs its peek toggle from its own `init` (C:152), so a consumer
+        // suffix lands after it and both remain.
+        this._onConnected();
+        this._adoptAuthored();
+
+        this._lastText = this._state.text;
+        this._lastLength = this._state.textLength;
+        this._render(this._state.state);
+        this._state.subscribe((state) => this._onStateChanged(state));
+    }
+
+    attributeChangedCallback(name: string, _old: string | null, value: string | null) {
+        if (!this._initialized) return;
+        switch (name) {
+            case 'title':
+                this._renderTitle();
+                break;
+            case 'text':
+                this._state.setText(value ?? '');
+                break;
+            case 'editable':
+                this._state.setEditable(value !== 'false');
+                break;
+            case 'max-length':
+                this._state.setMaxLength(Number.parseInt(value ?? '', 10));
+                break;
+            case 'show-apply-button':
+                this._state.setShowApplyButton(boolAttribute(value));
+                break;
+            case 'activates-default':
+                this._state.setActivatesDefault(boolAttribute(value));
+                break;
+        }
+    }
+
+    /**
+     * Add a widget after the editable area — `adw_entry_row_add_suffix`
+     * (adw-entry-row.c:885-899), which APPENDS into a box, so several suffixes
+     * coexist and the password row's own peek toggle survives a consumer's.
+     */
+    addSuffix(node: Node): void {
+        this._suffixes.append(node);
+        setPartVisible(this._suffixes, true);
+    }
+
+    /**
+     * Add a widget before the editable area — `adw_entry_row_add_prefix`
+     * (C:864-880). PREPENDS, like the `gtk_box_prepend` it mirrors, so several
+     * prefixes stack in reverse call order exactly as they do in GTK.
+     */
+    addPrefix(node: Node): void {
+        this._prefixes.prepend(node);
+        setPartVisible(this._prefixes, true);
+    }
+
+    /**
+     * Drive the trailing indicator — `adw_entry_row_set_show_indicator`
+     * (adw-entry-row-private.h, C:1281-1296). Private-to-the-library upstream,
+     * public here because `<adw-password-entry-row>` is a separate custom element
+     * rather than a C subclass with access to the private header.
+     */
+    setShowIndicator(show: boolean): void {
+        this._state.setShowIndicator(show);
+    }
+
+    /** `adw_entry_row_set_indicator_icon_name` (C:1263-1273). */
+    setIndicatorIconName(iconName: string): void {
+        this._indicator.dataset.iconName = iconName;
+    }
+
+    /** `adw_entry_row_set_indicator_tooltip` (C:1275-1279). */
+    setIndicatorTooltip(tooltip: string): void {
+        this._indicator.title = tooltip;
+        this._indicator.setAttribute('aria-label', tooltip);
+    }
+
+    /** Apply the pending edit — the apply button click (C:229-241). */
+    apply(): void {
+        this._state.apply();
+        this.dispatchEvent(new CustomEvent('apply', { bubbles: true }));
+    }
+
+    /** Focus the entry without selecting — `adw_entry_row_grab_focus_without_selecting` (C:1379-1389). */
+    grabFocusWithoutSelecting(): boolean {
+        this._input.focus();
+        return this._state.editing;
+    }
+
+    /** Subclass hook: runs after the DOM exists and the state is seeded, before the first render. */
+    protected _onConnected(): void {}
+
+    private _build(): void {
+        const prefix = this._classPrefix;
+
+        // Author-supplied light-DOM children are KEPT: `replaceChildren` used to
+        // discard them silently, so `<adw-entry-row><adw-button>Go</adw-button>`
+        // rendered without its button. Elements only — GtkBuildable also only
+        // ever adopts widgets, and keeping stray whitespace would make an empty
+        // affordance box measure as non-empty.
+        this._authored = [...this.children];
+        this._prefixes = document.createElement('div');
+        this._prefixes.className = `${prefix}-prefixes`;
+        this._suffixes = document.createElement('div');
+        this._suffixes.className = `${prefix}-suffixes`;
+
+        // TWO title labels, exactly like adw-entry-row.ui: `empty_title` is the
+        // large placeholder shown while the row is empty, `title` the small label
+        // above the value. GTK cross-fades them over EMPTY_ANIMATION_DURATION_MS
+        // (C:433-439); until the SCSS pass lands this is a hard swap at the two
+        // animation endpoints, which is why the render reads `emptyTarget`.
+        this._emptyTitle = document.createElement('span');
+        this._emptyTitle.className = `adw-row-title ${prefix}-empty-title`;
+        this._title = document.createElement('span');
+        // `adw-row-title` is what the SCSS styles; the prefixed class is how the
+        // conformance suite tells the two titles apart.
+        this._title.className = `adw-row-title ${prefix}-title`;
 
         this._input = document.createElement('input');
-        this._input.className = 'adw-entry-row-input';
+        this._input.className = `${prefix}-input`;
         this._input.type = 'text';
-        this._input.value = this.getAttribute('text') ?? '';
         this._input.addEventListener('input', () => {
-            this.dispatchEvent(new CustomEvent('changed', { bubbles: true, detail: { text: this._input.value } }));
+            // Route through the core so truncation counts CHARACTERS —
+            // `input.maxLength` counts UTF-16 units and is deliberately unset.
+            this._state.setText(this._input.value);
+            if (this._input.value !== this._state.text) this._input.value = this._state.text;
         });
+        this._input.addEventListener('focus', () => this._state.setEditing(true));
+        this._input.addEventListener('blur', () => this._state.setEditing(false));
+        this._input.addEventListener('keydown', (event) => {
+            if (event.key !== 'Enter') return;
+            event.preventDefault();
+            this._activate();
+        });
+
+        this._area = document.createElement('div');
+        this._area.className = `${prefix}-text`;
+        this._area.append(this._emptyTitle, this._title, this._input);
+
+        // The caps-lock warning slot. `caps-lock-symbolic` is not in the curated
+        // @gjsify/adwaita-icons set, so the glyph stands in and the canonical
+        // name travels in `data-icon-name` — the same fallback the dialog close
+        // buttons use.
+        this._indicator = document.createElement('span');
+        this._indicator.className = `${prefix}-indicator`;
+        this._indicator.setAttribute('role', 'img');
+        this._indicator.textContent = '⇪';
 
-        // Title floats as a small label above the value (the filled
-        // Adw.EntryRow look), both left-aligned in a text column.
-        const text = document.createElement('div');
-        text.className = 'adw-entry-row-text';
-        text.append(this._titleEl, this._input);
+        this._applyButton = document.createElement('button');
+        this._applyButton.type = 'button';
+        this._applyButton.className = `adw-button suggested-action circular icon-only ${prefix}-apply`;
+        this._applyButton.dataset.iconName = ENTRY_ROW_APPLY_ICON_NAME;
+        this._applyButton.title = ENTRY_ROW_APPLY_TOOLTIP;
+        this._applyButton.setAttribute('aria-label', ENTRY_ROW_APPLY_TOOLTIP);
+        this._applyButton.textContent = '✓';
+        this._applyButton.addEventListener('click', () => this.apply());
 
-        // Trailing edit affordance, mirroring Adw.EntryRow's pencil; clicking
-        // it focuses the entry.
-        const edit = document.createElement('span');
-        edit.className = 'adw-row-edit adw-icon adw-icon--document-edit';
-        edit.setAttribute('aria-hidden', 'true');
-        edit.addEventListener('click', () => this._input.focus());
+        // The libadwaita name travels in `data-icon-name`; the drawn glyph is
+        // the curated @gjsify/adwaita-icons spelling of the same symbolic, which
+        // is a different string (`adw-entry-edit-symbolic` vs `document-edit`).
+        this._editIcon = createAdwIcon('document-edit', 'adw-row-edit', `${prefix}-edit`);
+        this._editIcon.dataset.iconName = ENTRY_ROW_EDIT_ICON_NAME;
 
-        this.replaceChildren(text, edit);
+        // Snapshot order: indicator → apply → edit icon inside the editable area
+        // (C:429-431), with the prefixes/suffixes boxes outside it.
+        this.replaceChildren(
+            this._prefixes,
+            this._area,
+            this._indicator,
+            this._applyButton,
+            this._editIcon,
+            this._suffixes,
+        );
+        setPartVisible(this._prefixes, false);
+        setPartVisible(this._suffixes, false);
+
+        this.addEventListener('click', (event) => this._maybeFocus(event));
     }
 
-    attributeChangedCallback(name: string, _old: string | null, value: string | null) {
-        if (!this._initialized) return;
-        if (name === 'title') this._titleEl.textContent = value ?? '';
-        else if (name === 'text' && this._input.value !== (value ?? '')) this._input.value = value ?? '';
+    /**
+     * Re-home the children the author wrote. libadwaita's buildable maps an
+     * untyped `<child>` to a suffix (C:796-812); `slot="prefix"` is the web
+     * spelling of its `type="prefix"`.
+     */
+    private _adoptAuthored(): void {
+        for (const node of this._authored) {
+            if (node.getAttribute('slot') === 'prefix') this.addPrefix(node);
+            else this.addSuffix(node);
+        }
+        this._authored = [];
+    }
+
+    /**
+     * `pressed_cb` (C:201-227): a click landing on the row, the editable area,
+     * the indicator or either affordance box grabs focus; anything else (a suffix
+     * control, the apply button) is left alone. The pencil is `can-target=False`
+     * in the .ui, so a click on it picks the editable area — hence it focuses too.
+     */
+    private _maybeFocus(event: MouseEvent): void {
+        const target = event.target;
+        if (
+            target === this ||
+            target === this._area ||
+            target === this._emptyTitle ||
+            target === this._title ||
+            target === this._editIcon ||
+            target === this._indicator ||
+            target === this._prefixes ||
+            target === this._suffixes
+        ) {
+            this._input.focus();
+        }
+    }
+
+    /** `text_activated_cb` (C:243-266) — exactly one of the two signals. */
+    private _activate(): void {
+        const activation = this._state.activate();
+        if (activation.signal === 'apply') {
+            this.dispatchEvent(new CustomEvent('apply', { bubbles: true }));
+            return;
+        }
+        // C:253-256 — the default widget is activated BEFORE `entry-activated`.
+        // Implicit form submission is the web's default-widget activation.
+        if (activation.activateDefault) this.closest('form')?.requestSubmit();
+        this.dispatchEvent(new CustomEvent('entry-activated', { bubbles: true }));
+    }
+
+    private _renderTitle(): void {
+        const title = this.getAttribute('title') ?? '';
+        this._emptyTitle.textContent = title;
+        this._title.textContent = title;
+    }
+
+    /** Paint one render snapshot. Overridden (via `super`) by the password row. */
+    protected _render(state: EntryRowRenderState): void {
+        if (this._input.value !== state.text) this._input.value = state.text;
+        this._input.readOnly = !state.editable;
+        this.classList.toggle('focused', state.editing);
+        this.classList.toggle('empty', state.empty);
+        // The two titles are the animation's endpoints; a renderer with a real
+        // cross-fade would lerp between them over EMPTY_ANIMATION_DURATION_MS.
+        setPartVisible(this._emptyTitle, state.emptyTarget === 0);
+        setPartVisible(this._title, state.emptyTarget === 1);
+        setPartVisible(this._editIcon, state.editIconVisible);
+        this._editIcon.classList.toggle('disabled', !state.editIconSensitive);
+        this._editIcon.setAttribute('aria-disabled', String(!state.editIconSensitive));
+        setPartVisible(this._indicator, state.indicatorVisible);
+        setPartVisible(this._applyButton, state.applyButtonVisible);
+        this.setAttribute('text-length', String(state.textLength));
+    }
+
+    private _onStateChanged(state: EntryRowRenderState): void {
+        this._render(state);
+
+        if (state.text !== this._lastText) {
+            this._lastText = state.text;
+            const detail = { text: state.text };
+            this.dispatchEvent(new CustomEvent('changed', { bubbles: true, detail }));
+            this.dispatchEvent(new CustomEvent('notify::text', { bubbles: true, detail }));
+        }
+        if (state.textLength !== this._lastLength) {
+            this._lastLength = state.textLength;
+            this.dispatchEvent(
+                new CustomEvent('notify::text-length', { bubbles: true, detail: { textLength: state.textLength } }),
+            );
+        }
     }
 }
 

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

@@ -18,27 +18,50 @@
 // `notify::expanded` event. `@gjsify/adwaita-nativescript` composes the same
 // state machine, so both ports share one behaviour.
 //
+// The optional enable switch is `<adw-switch>`. Both the markup and the
+// stylesheet block behind it used to be hand-built copies of
+// `<adw-switch-row>`'s — `_expander_row.scss:73-121` was character-for-character
+// `_switch_row.scss:15-63` — because `.adw-switch` was nested inside
+// `adw-switch-row {` and unusable from here.
+//
 // Reference: refs/adwaita-web/adwaita-web/scss/_expander_row.scss
 // Reference: refs/libadwaita/src/stylesheet/widgets/_expander-row.scss
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web; the
-// disclosure state machine composed from @gjsify/adwaita-core.
-
-import { ExpanderState } from '@gjsify/adwaita-core';
+// disclosure state machine composed from @gjsify/adwaita-core, the enable
+// switch from <adw-switch> and the chevron from <adw-icon>.
+
+import { ExpanderState, deriveRowLabels } from '@gjsify/adwaita-core';
+
+// SIDE-EFFECT imports, deliberately separate from the type import below: they
+// are what guarantee `adw-switch` / `adw-icon` are defined before this module's
+// own `customElements.define` can upgrade a server-rendered `<adw-expander-row>`
+// and build them. A combined `import { AdwSwitch }` would NOT do it — the
+// binding is only ever used in type position here, and this package compiles
+// without `verbatimModuleSyntax`, so TypeScript would elide the whole statement
+// and take the registration with it.
+import './adw-switch.js';
+import type { AdwSwitch } from './adw-switch.js';
+import { type AdwIcon, createAdwIcon } from './adw-icon.js';
 
 export class AdwExpanderRow extends HTMLElement {
     private _headerEl!: HTMLDivElement;
     private _titleEl!: HTMLSpanElement;
     private _subtitleEl!: HTMLSpanElement;
-    private _enableSwitch!: HTMLInputElement;
-    private _enableLabel!: HTMLLabelElement;
-    private _chevronEl!: HTMLSpanElement;
+    private _enableSwitch!: AdwSwitch;
+    private _chevronEl!: AdwIcon;
     private _contentEl!: HTMLDivElement;
     private _prefixEl!: HTMLDivElement;
     private _suffixEl!: HTMLDivElement;
     /** The headless expanded/collapsed disclosure state machine (ADR 0004). */
     private readonly _state = new ExpanderState();
     private _initialized = false;
+    /**
+     * Guards the enable switch's `notify::active` while WE are the ones writing
+     * it. Only a user toggle publishes `notify::enable-expansion`; a programmatic
+     * `enableExpansion = …` re-syncs the control silently, as it always has.
+     */
+    private _reflectingEnable = false;
 
     constructor() {
         super();
@@ -114,17 +137,11 @@ export class AdwExpanderRow extends HTMLElement {
 
         // Optional enable switch (the same toggle Adw.ExpanderRow shows when
         // show-enable-switch is set). Clicking it does NOT toggle the disclosure.
-        this._enableLabel = document.createElement('label');
-        this._enableLabel.className = 'adw-switch adw-expander-row-enable-switch';
-        this._enableSwitch = document.createElement('input');
-        this._enableSwitch.type = 'checkbox';
-        this._enableSwitch.checked = this.enableExpansion;
-        const slider = document.createElement('span');
-        slider.className = 'adw-switch-slider';
-        this._enableLabel.append(this._enableSwitch, slider);
-
-        this._chevronEl = document.createElement('span');
-        this._chevronEl.className = 'adw-icon adw-icon--go-down adw-expander-row-chevron';
+        this._enableSwitch = document.createElement('adw-switch') as AdwSwitch;
+        this._enableSwitch.classList.add('adw-expander-row-enable-switch');
+        this._enableSwitch.active = this.enableExpansion;
+
+        this._chevronEl = createAdwIcon('go-down', 'adw-expander-row-chevron');
 
         // Header prefix / suffix widget slots (Adw.ExpanderRow add_prefix/add_suffix).
         this._prefixEl = document.createElement('div');
@@ -135,7 +152,7 @@ export class AdwExpanderRow extends HTMLElement {
         this._suffixEl.className = 'adw-expander-row-suffix';
         for (const child of suffixChildren) this._suffixEl.appendChild(child);
 
-        this._headerEl.append(this._prefixEl, textEl, this._suffixEl, this._enableLabel, this._chevronEl);
+        this._headerEl.append(this._prefixEl, textEl, this._suffixEl, this._enableSwitch, this._chevronEl);
 
         // Disclosed content — a nested listbox holding the rows.
         this._contentEl = document.createElement('div');
@@ -146,7 +163,7 @@ export class AdwExpanderRow extends HTMLElement {
 
         this._headerEl.addEventListener('click', (event) => {
             // Clicks on the enable switch toggle expansion-enable, not disclosure.
-            if (this._enableLabel.contains(event.target as Node)) return;
+            if (this._enableSwitch.contains(event.target as Node)) return;
             // The core state machine flips + reflects + re-renders; the event is
             // emitted here so only a USER disclosure notifies (a programmatic
             // `expanded = …` stays silent, as it always has on this port).
@@ -157,12 +174,19 @@ export class AdwExpanderRow extends HTMLElement {
             }
         });
 
-        this._enableSwitch.addEventListener('change', () => {
-            this.setAttribute('enable-expansion', this._enableSwitch.checked ? 'true' : 'false');
+        this._enableSwitch.addEventListener('notify::active', (event) => {
+            // The switch's own notify is stopped at the row: the row publishes
+            // `notify::enable-expansion`, and letting an identically-shaped
+            // `notify::active` past would put a second, differently-named event
+            // for the same user action on every ancestor listener.
+            event.stopPropagation();
+            if (this._reflectingEnable) return;
+            const enabled = this._enableSwitch.active;
+            this.setAttribute('enable-expansion', enabled ? 'true' : 'false');
             this.dispatchEvent(
                 new CustomEvent('notify::enable-expansion', {
                     bubbles: true,
-                    detail: { enableExpansion: this._enableSwitch.checked },
+                    detail: { enableExpansion: enabled },
                 }),
             );
         });
@@ -182,15 +206,23 @@ export class AdwExpanderRow extends HTMLElement {
     }
 
     private _render() {
-        const title = this.getAttribute('title') ?? '';
-        const subtitle = this.getAttribute('subtitle') ?? '';
-        this._titleEl.textContent = title;
-        this._subtitleEl.textContent = subtitle;
-        this._subtitleEl.hidden = subtitle.length === 0;
+        // The `string_is_not_empty` label rule, from core — this block was one of
+        // six hand-rolled copies, all of which omitted the TITLE half.
+        const labels = deriveRowLabels({
+            title: this.getAttribute('title'),
+            subtitle: this.getAttribute('subtitle'),
+        });
+        this._titleEl.textContent = labels.title;
+        this._titleEl.hidden = !labels.titleVisible;
+        this._subtitleEl.textContent = labels.subtitle;
+        this._subtitleEl.hidden = !labels.subtitleVisible;
 
         const showSwitch = this.hasAttribute('show-enable-switch');
-        this._enableLabel.hidden = !showSwitch;
-        this._enableSwitch.checked = this.enableExpansion;
+        this._enableSwitch.hidden = !showSwitch;
+        // OUR write, not the user's — see `_reflectingEnable`.
+        this._reflectingEnable = true;
+        this._enableSwitch.active = this.enableExpansion;
+        this._reflectingEnable = false;
 
         this._prefixEl.hidden = this._prefixEl.childElementCount === 0;
         this._suffixEl.hidden = this._suffixEl.childElementCount === 0;