@gjsify/adwaita-web 0.55.0 → 0.56.0

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

@@ -0,0 +1,124 @@
+// <adw-status-page> compact — the documented smaller status page for a narrow surface.
+//
+// libadwaita ships ONE style class on this widget, `.compact`
+// (style-classes.md "Compact Status Page"), and `_misc.scss` gives it four differences from the
+// full page: margin 24px 12px not 36px 12px, icon 96px not 128px, 12px not 24px under the icon,
+// `.title-2` not `.title-1`. The child keeps libadwaita's 24px spacing, of which this renderer's
+// flex `gap` supplies 12 — hence `margin-top: 12px`.
+//
+// Each is asserted as a COMPUTED size on the node the rule selects, not as the class alone: the
+// class would pass against the pre-#1826 element whenever an author wrote `class="compact"` by
+// hand, so a class-only suite would have left the variant unmeasured.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { AdwStatusPage } from './elements/adw-status-page.js';
+
+/** Mount a status page wide enough for the full variant to differ from the compact one. */
+function mount(
+    attributes: Record<string, string> = {},
+    width = 400,
+): {
+    el: AdwStatusPage;
+    host: HTMLElement;
+} {
+    const host = document.createElement('div');
+    host.style.width = `${width}px`;
+    document.body.appendChild(host);
+    const el = document.createElement('adw-status-page') as AdwStatusPage;
+    el.setAttribute('icon', 'dialog-error-symbolic');
+    el.setAttribute('title', 'Could not connect');
+    el.setAttribute('description', 'Check your network connection and try again.');
+    for (const [name, value] of Object.entries(attributes)) el.setAttribute(name, value);
+    host.appendChild(el);
+    return { el, host };
+}
+
+/** Tolerance for a computed ratio: Firefox rounds a percentage-derived px size. */
+const near = (actual: number, expected: number, tolerance = 0.005): boolean => Math.abs(actual - expected) <= tolerance;
+
+const iconOf = (el: AdwStatusPage): HTMLElement => el.querySelector('.adw-status-page-icon') as HTMLElement;
+const titleOf = (el: AdwStatusPage): HTMLElement => el.querySelector('.adw-status-page-title') as HTMLElement;
+const childOf = (el: AdwStatusPage): HTMLElement => el.querySelector('.adw-status-page-child') as HTMLElement;
+
+export const AdwStatusPageTest = async () => {
+    await describe('adw-status-page compact (style-classes.md "Compact Status Page")', async () => {
+        await it('the compact attribute puts the documented style class on the host', async () => {
+            const { el, host } = mount({ compact: '' });
+            // The selector is `adw-status-page.compact` — the HOST, not an inner node, which
+            // is why this element writes the class itself instead of leaving it to a wrapper.
+            expect(el.classList.contains('compact')).toBe(true);
+            host.remove();
+        });
+
+        await it('a full status page carries no compact class and keeps the 128px icon', async () => {
+            const { el, host } = mount();
+            expect(el.classList.contains('compact')).toBe(false);
+            expect(getComputedStyle(iconOf(el)).width).toBe('128px');
+            expect(getComputedStyle(el).paddingTop).toBe('36px');
+            host.remove();
+        });
+
+        await it('compact shrinks the icon to 96px and the margin to 24px (_misc.scss, statuspage.compact)', async () => {
+            const { el, host } = mount({ compact: '' });
+            const icon = getComputedStyle(iconOf(el));
+            expect(icon.width).toBe('96px');
+            expect(icon.height).toBe('96px');
+            expect(icon.marginBottom).toBe('12px');
+            expect(getComputedStyle(el).paddingTop).toBe('24px');
+            expect(getComputedStyle(el).paddingBottom).toBe('24px');
+            host.remove();
+        });
+
+        await it('compact sets .title-2 (136%), the full page .title-1 (181%) (_labels.scss)', async () => {
+            const compact = mount({ compact: '' });
+            const full = mount();
+            try {
+                // The RATIO, not a pixel size: `_misc.scss` picks between `.title-1` and
+                // `.title-2`, which are 181% and 136% of the SAME inherited size — the
+                // boundary reset re-roots it (`_reset.scss`, ADR 0010), and a px assertion
+                // would pin this suite to one font instead of to the ratio the class encodes.
+                const compactTitle = parseFloat(getComputedStyle(titleOf(compact.el)).fontSize);
+                const fullTitle = parseFloat(getComputedStyle(titleOf(full.el)).fontSize);
+                expect(compactTitle < fullTitle).toBe(true);
+                expect(near(compactTitle / fullTitle, 136 / 181)).toBe(true);
+                // …and the weights both `.title-1`/`.title-2` carry, so this is the
+                // heading scale rather than a body label that happens to be smaller.
+                expect(getComputedStyle(titleOf(compact.el)).fontWeight).toBe('800');
+            } finally {
+                compact.host.remove();
+                full.host.remove();
+            }
+        });
+
+        await it('compact leaves 12px to the child beyond the 12px flex gap (_misc.scss, 24px spacing)', async () => {
+            const { el, host } = mount({ compact: '' });
+            const button = document.createElement('button');
+            button.className = 'adw-button suggested-action';
+            button.textContent = 'Try Again';
+            el.appendChild(button);
+
+            expect(getComputedStyle(childOf(el)).marginTop).toBe('12px');
+            // The full page's own 24px, so the pair cannot both be the compact rule.
+            const full = mount();
+            try {
+                expect(getComputedStyle(childOf(full.el)).marginTop).toBe('24px');
+            } finally {
+                host.remove();
+                full.host.remove();
+            }
+        });
+
+        await it('a .blp\'s styles ["compact"] survives a later attribute change', async () => {
+            const { el, host } = mount({ compact: '' });
+            el.classList.add('compact');
+            el.removeAttribute('compact');
+            // `title` is the attribute every real page sets, and setting it re-renders. A
+            // `toggle` here would strip the class the shared-tree builder had put there —
+            // `shared-tree-builder.ts:296` writes a `.blp`'s style classes onto this host.
+            el.setAttribute('title', 'Still compact');
+            expect(el.classList.contains('compact')).toBe(true);
+            expect(getComputedStyle(iconOf(el)).width).toBe('96px');
+            host.remove();
+        });
+    });
+};

package/src/attributes.ts

@@ -0,0 +1,52 @@
+// The one reading of an attribute that spells a GObject BOOLEAN property.
+//
+// An HTML boolean attribute can only spell TRUE by PRESENCE, and many GTK properties
+// default to TRUE — `GtkWidget:sensitive`, `AdwToggle:enabled`, `GtkEditable:editable`.
+// Reading `sensitive` by presence would leave every `<adw-toggle-group>` on a page
+// insensitive. So a TRUE-default property is read by VALUE (`sensitive="false"` is the
+// only way to say it), and the DEFAULT is passed in at the call site rather than assumed.
+// The default varies by widget and property: `show-apply-button` defaults FALSE,
+// `AdwBanner:revealed` defaults FALSE, but `GtkActionBar:revealed` defaults TRUE.
+// The per-widget map in `@gjsify/adwaita-core/tags` ({@link isValueBasedBooleanAttr})
+// records which (widget, property) pairs are value-based.
+//
+// TWO CATEGORIES, NOT THREE CONVENTIONS (ADR 0049, ADR 0034):
+// - STYLE CLASS → presence-based: `flat`, `round`, `compact` — the attribute's PRESENCE
+//   toggles the CSS class. `booleanAttribute` is NOT used for these.
+// - GTK PROPERTY → value-based per (widget, property): the attribute's VALUE
+//   (`"false"` vs anything else) sets the property. `booleanAttribute` IS used for these.
+//   A declarative `false` MUST write `attr="false"`, not remove the attribute.
+//
+// It was a private helper in `elements/adw-entry-row.ts` until a second caller needed it.
+
+import { VALUE_BASED_BOOLEAN_ATTRS } from '@gjsify/adwaita-core/tags';
+
+/** Re-export for consumers that need the list (e.g. `shared-tree-builder.ts`). */
+export { VALUE_BASED_BOOLEAN_ATTRS };
+
+/**
+ * Whether an attribute spells a boolean property, defaulting to `whenAbsent`.
+ *
+ * Absent is the property's default; present, the literal `"false"` is FALSE and anything
+ * else is TRUE.
+ */
+export function booleanAttribute(value: string | null, whenAbsent: boolean): boolean {
+    if (value === null) return whenAbsent;
+    return value !== 'false';
+}
+
+/**
+ * Write a value-based boolean attribute (GTK property defaulting to TRUE).
+ *
+ * `true`  → sets `attr="true"` (present, not "false", reads as true)
+ * `false` → sets `attr="false"` (present, reads as false)
+ * This avoids `toggleAttribute` which removes the attribute for `false`,
+ * causing value-based readers to fall back to the default (true).
+ */
+export function writeBooleanAttribute(el: HTMLElement, attr: string, value: boolean): void {
+    if (value) {
+        el.setAttribute(attr, 'true');
+    } else {
+        el.setAttribute(attr, 'false');
+    }
+}

package/src/capabilities.mjs

@@ -15,4 +15,7 @@ export const capabilities = {
     signal: 'implemented',
     bind: 'implemented',
     breakpoint: 'implemented',
+    'sibling-object': {
+        refused: 'the web builder mounts one root element and has no consumer for a second root yet (ADR 0093)',
+    },
 };

package/src/construct-vectors.spec.ts

@@ -23,7 +23,7 @@ customElements.define('corpus-extern', CorpusExtern);
 registerTemplateClass(EXTERN_VECTOR_CLASS, 'corpus-extern');
 
 function observe(vector: ConstructVector): unknown {
-    if (vector.kind === 'layout') {
+    if (vector.kind === 'layout' || vector.kind === 'sibling-object') {
         buildSharedTree(vector.tree);
         return undefined;
     }

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

@@ -7,6 +7,14 @@
 // in `@gjsify/adwaita-core` (ADR 0004) as {@link ActionRowState}; this element keeps
 // only the DOM render half.
 //
+// ATTRIBUTES:
+//   title, subtitle — the text column
+//   activatable     — whether the row activates on click (boolean presence)
+//   tooltip-text    — `Gtk.Widget:tooltip-text` (`src/row-tooltip.ts` carries why it lands
+//                     on the row's parts and not on the host)
+//   title-lines     — clamp title to N lines (0 = unlimited, default)
+//   subtitle-lines  — clamp subtitle to N lines (0 = unlimited, default)
+//
 // Reference: refs/adwaita-web/adwaita-web/docs/widgets/actionrow.md
 // Reference: refs/libadwaita/src/adw-action-row.c, adw-action-row.ui
 // Reference: refs/libadwaita/src/stylesheet/widgets/_lists.scss (.row styling)
@@ -17,8 +25,10 @@
 import { ActionRowState } from '@gjsify/adwaita-core';
 
 import { bindEmptySections } from '../empty-sections.js';
+import { applyRowTooltip } from '../row-tooltip.js';
 import { bindSlottedChildren } from '../slotted-children.js';
 import { type AdwRowActivation, attachRowActivation } from './row-activation.js';
+import { applyRowLineClamp, parseRowLinesAttribute } from '../row-line-clamp.js';
 
 /**
  * Attributes whose change means the activatable widget's sensitivity may have
@@ -38,6 +48,8 @@ export class AdwActionRow extends HTMLElement {
     private _subtitleEl!: HTMLSpanElement;
     private _suffixEl!: HTMLDivElement;
     private _prefixEl!: HTMLDivElement;
+    /** The label column — kept for `tooltip-text`, which the browser reads off a PART. */
+    private _textEl!: HTMLDivElement;
     /** The headless labels + activatable-widget coupling (ADR 0004). */
     private readonly _state = new ActionRowState<HTMLElement>();
     /** Watches the activatable widget's `disabled`/`aria-disabled` — the live binding. */
@@ -47,7 +59,7 @@ export class AdwActionRow extends HTMLElement {
     private _activation?: AdwRowActivation;
 
     static get observedAttributes() {
-        return ['title', 'subtitle', 'activatable'];
+        return ['title', 'subtitle', 'activatable', 'tooltip-text', 'title-lines', 'subtitle-lines'];
     }
 
     /** The end (suffix) section — append controls here imperatively. */
@@ -95,7 +107,11 @@ export class AdwActionRow extends HTMLElement {
         this._prefixEl.className = 'adw-action-row-prefix';
 
         const textEl = document.createElement('div');
-        textEl.className = 'adw-action-row-text';
+        // `.adw-row-text`, the ONE spelling every row type's text column carries —
+        // switch, combo, spin and expander all build it under that name, and so do the
+        // shared `.adw-row-clamp` rules in `_action_row.scss`/`_expander_row.scss`.
+        textEl.className = 'adw-row-text';
+        this._textEl = textEl;
         this._titleEl = document.createElement('span');
         this._titleEl.className = 'adw-row-title';
         this._subtitleEl = document.createElement('span');
@@ -133,6 +149,7 @@ export class AdwActionRow extends HTMLElement {
         this._state.setTitle(this.getAttribute('title'));
         this._state.setSubtitle(this.getAttribute('subtitle'));
         this._state.setActivatable(this.hasAttribute('activatable'));
+        this._applyLineClamping();
     }
 
     disconnectedCallback() {
@@ -194,8 +211,20 @@ export class AdwActionRow extends HTMLElement {
         this._subtitleEl.textContent = subtitle;
         this._subtitleEl.hidden = !subtitleVisible;
         this.classList.toggle('activatable', this._state.activatable);
+        applyRowTooltip(this, [this._prefixEl, this._textEl, this._suffixEl]);
         this._activation?.sync();
     }
+
+    /** 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')),
+        });
+    }
 }
 
 customElements.define('adw-action-row', AdwActionRow);

package/src/elements/adw-alert-dialog.ts

@@ -59,6 +59,7 @@ import type { AdwResponseAppearance } from '@gjsify/adwaita-core';
 import { bindEmptySections } from '../empty-sections.js';
 import { bindSlottedChildren } from '../slotted-children.js';
 import { AdwModalSurface } from './modal-surface.js';
+import { booleanAttribute } from '../attributes.js';
 
 /** Response button appearance — mirrors Adw.ResponseAppearance. */
 export type { AdwResponseAppearance } from '@gjsify/adwaita-core';
@@ -269,7 +270,9 @@ export class AdwAlertDialog extends HTMLElement {
         const appearance = (el.getAttribute('appearance') ?? 'default') as AdwResponseAppearance;
         this.addResponse(id, (el.textContent ?? '').trim());
         if (appearance !== 'default') this.setResponseAppearance(id, appearance);
-        if (el.getAttribute('enabled') === 'false') this.setResponseEnabled(id, false);
+        // `enabled` is a value-based boolean attribute (GTK property defaulting to TRUE).
+        // Use the shared reader instead of a hand-rolled `=== 'false'` comparison.
+        if (!booleanAttribute(el.getAttribute('enabled'), true)) this.setResponseEnabled(id, false);
     }
 
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {

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

@@ -7,6 +7,9 @@
 // The label/icon visibility rules are HEADLESS and live in `@gjsify/adwaita-core`
 // (ADR 0004) as {@link ButtonRowState}; this element keeps only the DOM render half.
 //
+// Attributes: title, start-icon-name, end-icon-name, tooltip-text
+// (`Gtk.Widget:tooltip-text`).
+//
 // THERE IS NO `activatable` OPT-OUT, and inventing one would be wrong twice over: the
 // upstream template hardcodes `activatable=True` and the class docs say "AdwButtonRow is
 // always activatable", while `<adw-action-row>` in this same package reads `activatable`
@@ -21,6 +24,7 @@
 
 import { BUTTON_ROW_ACTIVATABLE, ButtonRowState } from '@gjsify/adwaita-core';
 
+import { applyRowTooltip } from '../row-tooltip.js';
 import { type GtkImage, createGtkImage } from './gtk-image.js';
 import { attachRowActivation } from './row-activation.js';
 
@@ -34,7 +38,7 @@ export class AdwButtonRow extends HTMLElement {
     private _initialized = false;
 
     static get observedAttributes() {
-        return ['title', 'start-icon-name', 'end-icon-name'];
+        return ['title', 'start-icon-name', 'end-icon-name', 'tooltip-text'];
     }
 
     connectedCallback() {
@@ -81,6 +85,8 @@ export class AdwButtonRow extends HTMLElement {
 
         // Unconditional: an AdwButtonRow has no way to not be activatable.
         this.classList.toggle('activatable', BUTTON_ROW_ACTIVATABLE);
+        // The contents box is the whole row here, so it carries the tooltip for all of it.
+        applyRowTooltip(this, [this._contentsEl]);
     }
 
     /**

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

@@ -29,6 +29,9 @@
 //   title / subtitle — the text column.
 //   model            — JSON array: `["a","b"]` or `[{"value":"a","label":"A"}]`.
 //   selected         — the selected index (number).
+//   tooltip-text     — `Gtk.Widget:tooltip-text` (`src/row-tooltip.ts`).
+//   title-lines      — clamp title to N lines (0 = unlimited, default)
+//   subtitle-lines   — clamp subtitle to N lines (0 = unlimited, default)
 // Properties — the `<gtk-drop-down>` set minus `enableSearch` and `active`, which are that
 // element's own popover chrome and have no counterpart on a row that opens a native
 // <select>:
@@ -58,12 +61,16 @@
 import { ComboState, deriveRowLabels, normalizeComboOptions, parseListModel } from '@gjsify/adwaita-core';
 import type { AdwComboOption, AdwListItemsChanged, AdwListModelInput } from '@gjsify/adwaita-core';
 
+import { applyRowTooltip } from '../row-tooltip.js';
 import { bindSlottedChildren } from '../slotted-children.js';
 import { stringListSlot } from '../string-list-slot.js';
+import { applyRowLineClamp, parseRowLinesAttribute } from '../row-line-clamp.js';
 
 export class AdwComboRow extends HTMLElement {
     private _select!: HTMLSelectElement;
     private _valueEl!: HTMLSpanElement;
+    /** 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 options list + selectedIndex↔selectedValue state machine (ADR 0004). */
@@ -71,7 +78,7 @@ export class AdwComboRow extends HTMLElement {
     private _initialized = false;
 
     static get observedAttributes() {
-        return ['title', 'subtitle', 'model', 'selected'];
+        return ['title', 'subtitle', 'model', 'selected', 'tooltip-text', 'title-lines', 'subtitle-lines'];
     }
 
     /** The list model (`Adw.ComboRow:model`). Setting it splices the <select> and clamps the selection. */
@@ -141,6 +148,7 @@ export class AdwComboRow extends HTMLElement {
         // survive being attached, and an absent attribute must not blank it.
         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');
@@ -283,6 +291,23 @@ export class AdwComboRow extends HTMLElement {
         this._titleEl.hidden = !labels.titleVisible;
         this._subtitleEl.textContent = labels.subtitle;
         this._subtitleEl.hidden = !labels.subtitleVisible;
+        // The <select> is stretched over the whole row (`position: absolute; inset: 0`,
+        // `_combo_row.scss`), so it is what the pointer actually lands on — the label column
+        // has `pointer-events: none`. A tooltip on the label parts alone would therefore
+        // never be reached over the title half of the row.
+        applyRowTooltip(this, [this._textEl, this._valueEl, this._select]);
+        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-entry-row.ts

@@ -10,8 +10,8 @@
 // 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`).
+//   activates-default, tooltip-text (`Gtk.Widget:tooltip-text`). `text-length` is
+//   REFLECTED (read-only, mirrors `Adw.EntryRow:text-length`).
 // Properties: text, editable, maxLength, textLength, showApplyButton,
 //   activatesDefault, editing.
 // Events:
@@ -37,6 +37,8 @@ import {
     type EntryRowRenderState,
 } from '@gjsify/adwaita-core';
 
+import { booleanAttribute } from '../attributes.js';
+import { applyRowTooltip } from '../row-tooltip.js';
 import { bindSlottedChildren, type AdwSlottedChildren } from '../slotted-children.js';
 import { type GtkImage, createGtkImage } from './gtk-image.js';
 
@@ -51,11 +53,6 @@ function setPartVisible(part: HTMLElement, visible: boolean): void {
     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 {
     /** The headless `update_empty` derivation + apply latch (ADR 0004). */
     protected readonly _state = new EntryRowState();
@@ -81,7 +78,7 @@ export class AdwEntryRow extends HTMLElement {
     private _lastLength = 0;
 
     static get observedAttributes(): string[] {
-        return ['title', 'text', 'editable', 'max-length', 'show-apply-button', 'activates-default'];
+        return ['title', 'text', 'editable', 'max-length', 'show-apply-button', 'activates-default', 'tooltip-text'];
     }
 
     /**
@@ -158,8 +155,8 @@ export class AdwEntryRow extends HTMLElement {
         // 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')));
+        this._state.setShowApplyButton(booleanAttribute(this.getAttribute('show-apply-button'), false));
+        this._state.setActivatesDefault(booleanAttribute(this.getAttribute('activates-default'), false));
         if (this.hasAttribute('text')) this._state.setText(this.getAttribute('text') ?? '');
         this._renderTitle();
 
@@ -181,6 +178,7 @@ export class AdwEntryRow extends HTMLElement {
         this._lastText = this._state.text;
         this._lastLength = this._state.textLength;
         this._render(this._state.state);
+        applyRowTooltip(this, this._tooltipParts());
         this._state.subscribe((state) => this._onStateChanged(state));
     }
 
@@ -200,14 +198,26 @@ export class AdwEntryRow extends HTMLElement {
                 this._state.setMaxLength(Number.parseInt(value ?? '', 10));
                 break;
             case 'show-apply-button':
-                this._state.setShowApplyButton(boolAttribute(value));
+                this._state.setShowApplyButton(booleanAttribute(value, false));
                 break;
             case 'activates-default':
-                this._state.setActivatesDefault(boolAttribute(value));
+                this._state.setActivatesDefault(booleanAttribute(value, false));
+                break;
+            case 'tooltip-text':
+                applyRowTooltip(this, this._tooltipParts());
                 break;
         }
     }
 
+    /**
+     * The parts `tooltip-text` lands on: the two slots and the editable area — NOT the
+     * apply button or the indicator, which carry tooltips of their own that the consumer
+     * reads for what they are.
+     */
+    private _tooltipParts(): readonly Element[] {
+        return [this._prefixes, this._area, this._suffixes];
+    }
+
     /**
      * Add a widget after the editable area — `adw_entry_row_add_suffix`, which APPENDS
      * into a box, so several suffixes coexist and the password row's own peek toggle

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

@@ -1,6 +1,12 @@
 // <adw-expander-row> — a boxed-list row that discloses nested rows when expanded,
 // with an optional enable switch. Mirrors Adw.ExpanderRow.
 //
+// ATTRIBUTES: `title`, `subtitle`, `expanded`, `enable-expansion`, `show-enable-switch`,
+// 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`) — on the HEADER row alone, which is the
+// part that is the row libadwaita draws.
+//
 // Slots: `slot="prefix"` / `slot="suffix"` children sit in the HEADER row beside the
 // title (before the enable switch and disclosure chevron), like Adw.ExpanderRow's
 // add_prefix/add_suffix; every other child is moved into the disclosed content
@@ -22,7 +28,9 @@
 import { ExpanderState, 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
@@ -68,7 +76,16 @@ export class AdwExpanderRow extends HTMLElement {
     }
 
     static get observedAttributes() {
-        return ['title', 'subtitle', 'expanded', 'enable-expansion', 'show-enable-switch'];
+        return [
+            'title',
+            'subtitle',
+            'expanded',
+            'enable-expansion',
+            'show-enable-switch',
+            'tooltip-text',
+            'title-lines',
+            'subtitle-lines',
+        ];
     }
 
     get expanded(): boolean {
@@ -224,6 +241,22 @@ export class AdwExpanderRow extends HTMLElement {
         // step with the flag; `aria-expanded` is the same statement to the same reader.
         this._headerEl.setAttribute('aria-expanded', String(this.expanded));
         this._contentEl.classList.toggle('expanded', this.expanded);
+        // The HEADER only, not the disclosure: libadwaita's tooltip belongs to the row, and
+        // the content box is where the disclosed rows live — a child row's own tooltip is
+        // what the browser should offer there.
+        applyRowTooltip(this, [this._headerEl]);
+        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-header-bar.ts

@@ -53,6 +53,12 @@ export class AdwHeaderBar extends HTMLElement {
      * bare `Adw.HeaderBar {}` in a `.blp` page shows "Mailboxes" with no title of its own.
      */
     private _page: Element | null = null;
+    /**
+     * The window the bar sits in: `update_title`'s last stop before the application name
+     * (`gtk_window_get_title` of the root), so a bar with no title of its own, under no titled
+     * page, shows the window's.
+     */
+    private _window: Element | null = null;
     private _pageObserver: MutationObserver | null = null;
 
     static get observedAttributes() {
@@ -136,6 +142,7 @@ export class AdwHeaderBar extends HTMLElement {
         this._pageObserver?.disconnect();
         this._pageObserver = null;
         this._page = null;
+        this._window = null;
     }
 
     /**
@@ -146,9 +153,12 @@ export class AdwHeaderBar extends HTMLElement {
      */
     private _followPage() {
         this._page = this.closest('adw-navigation-page');
-        if (this._page === null) return;
+        this._window = this.closest('adw-window, adw-application-window');
         this._pageObserver ??= new MutationObserver(() => this._renderTitle());
-        this._pageObserver.observe(this._page, { attributes: true, attributeFilter: ['title'] });
+        for (const ancestor of [this._page, this._window]) {
+            if (ancestor !== null)
+                this._pageObserver.observe(ancestor, { attributes: true, attributeFilter: ['title'] });
+        }
     }
 
     /**
@@ -188,9 +198,13 @@ export class AdwHeaderBar extends HTMLElement {
         // keeps "unset" distinguishable from "set to empty" on the child.
         for (const name of ['title', 'subtitle']) {
             // The bar's own `title` is this port's declarative divergence (see the header) and
-            // wins; without one, the page's title is the first answer `update_title` has.
+            // wins; without one, the page's title is the first answer `update_title` has, then
+            // the window's.
             const value =
-                this.getAttribute(name) ?? (name === 'title' ? (this._page?.getAttribute('title') ?? null) : null);
+                this.getAttribute(name) ??
+                (name === 'title'
+                    ? (this._page?.getAttribute('title') ?? this._window?.getAttribute('title') ?? null)
+                    : null);
             if (value === null) this._titleEl.removeAttribute(name);
             else this._titleEl.setAttribute(name, value);
         }