@gjsify/adwaita-web 0.55.0 → 0.57.0

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

@@ -41,8 +41,11 @@ import {
 } from '@gjsify/adwaita-core';
 
 import { AdwWindow } from './adw-window.js';
+import { defineWindowApplication } from '../application.js';
 
 export class AdwApplicationWindow extends AdwWindow {
+    /** `Gtk.Window:application`: setting it is `add_window` (ADR 0098), set by `defineWindowApplication`. */
+    declare application: object | null;
     private _menubarEl: HTMLDivElement | null = null;
     private _model: AdwMenuModel = [];
 
@@ -152,3 +155,5 @@ export class AdwApplicationWindow extends AdwWindow {
 }
 
 customElements.define('adw-application-window', AdwApplicationWindow);
+
+defineWindowApplication(AdwApplicationWindow.prototype);

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

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

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

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

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

package/src/elements/adw-sidebar.ts

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

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

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

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

@@ -57,6 +57,7 @@ import type {
     SplitButtonChange,
     SplitButtonDirection,
 } from '@gjsify/adwaita-core';
+import { activateElementMenuItem, menuActionsOfElement } from '../application.js';
 
 import { PopoverMenuView } from './popover-menu.js';
 
@@ -336,6 +337,7 @@ export class AdwSplitButton extends HTMLElement {
         this._menuView = new PopoverMenuView(this._menuEl, 'adw-split-button-menu', (path) => {
             const activated = this._state.activateMenuItem(path);
             if (activated === null) return;
+            activateElementMenuItem(this, activated);
             this.dispatchEvent(
                 new CustomEvent('menu-activated', {
                     bubbles: true,
@@ -525,7 +527,9 @@ export class AdwSplitButton extends HTMLElement {
 
     private _renderMenu(): void {
         this._menuEl.open = this._state.open;
-        this._menuView.setMenuModel(this._state.menuModel ?? []);
+        const model = this._state.menuModel ?? [];
+        this._menuView.setMenuModel(model);
+        this._menuView.setActions(this._actions ?? menuActionsOfElement(this, model));
         this._menuView.render();
     }
 }