@gjsify/adwaita-web 0.55.0 → 0.57.0

package/src/adw-header-bar.spec.ts

@@ -124,6 +124,24 @@ export const AdwHeaderBarTest = async () => {
             expect(centerText(bar)).toBe('example.org');
             unmountAll();
         });
+
+        // `update_title` (adw-header-bar.c:475) ends at the root window's title.
+        await it("a bar with no title of its own shows its window's, and follows it", async () => {
+            const window = document.createElement('adw-application-window');
+            window.setAttribute('title', 'Fireworks');
+            const bar = document.createElement('adw-header-bar');
+            window.appendChild(bar);
+            document.body.appendChild(window);
+            expect(centerText(bar)).toBe('Fireworks');
+
+            window.setAttribute('title', 'Sparks');
+            await Promise.resolve();
+            expect(centerText(bar)).toBe('Sparks');
+
+            bar.setAttribute('title', 'Own');
+            expect(centerText(bar)).toBe('Own');
+            window.remove();
+        });
     });
 
     // The centre is an `<adw-window-title>` — this port's divergence, not the bare

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/application.spec.ts

@@ -0,0 +1,75 @@
+// ADR 0098: the web port of `Gtk.Application`, held to the shared vectors (real GJS is their oracle,
+// in adwaita-core's `application.gjs.spec.ts`) through real custom elements.
+import {
+    APPLICATION_VECTORS,
+    driveApplicationVectors,
+    unprovenVfuncs,
+    type ApplicationScene,
+    type ApplicationSubject,
+} from '@gjsify/adwaita-core/conformance';
+import { describe, expect, it } from '@gjsify/unit';
+
+import { activateWidgetAction } from './application.js';
+import { Adw, Gio, GObject, Gtk } from './index.js';
+import type { GtkMenuButton } from './elements/gtk-menu-button.js';
+
+const place = <T extends Element>(parent: Element, child: T): T => {
+    parent.append(child);
+    return child;
+};
+
+const made: Element[] = [];
+
+const scene: ApplicationScene = {
+    window(app) {
+        const window = document.createElement('adw-application-window') as Adw.ApplicationWindow;
+        window.application = app;
+        document.body.append(window);
+        made.push(window);
+        return window;
+    },
+    buttonIn: (window) => place(window as Element, document.createElement('gtk-button')),
+    popoverButtonIn(window) {
+        const menuButton = place(window as Element, document.createElement('gtk-menu-button')) as GtkMenuButton;
+        const popover = menuButton.querySelector('gtk-popover') as Element;
+        return place(popover, document.createElement('gtk-button'));
+    },
+    loose: () => document.createElement('gtk-button'),
+    activate: (widget, name) => activateWidgetAction(widget as Element, name),
+    addWindowAction(window, action) {
+        (window as unknown as { add_action(a: object): void }).add_action(action);
+    },
+};
+
+const subject: ApplicationSubject = {
+    name: 'adwaita-web',
+    isOracle: false,
+    GObject: GObject as unknown as ApplicationSubject['GObject'],
+    Application: Gtk.Application as unknown as ApplicationSubject['Application'],
+    SimpleAction: Gio.SimpleAction as unknown as ApplicationSubject['SimpleAction'],
+    handlesOpen: Gio.ApplicationFlags.HANDLES_OPEN,
+    scene,
+};
+
+export const ApplicationTest = async () => {
+    await driveApplicationVectors(subject, { describe, it, expect });
+    // The page is shared with every other suite: a window left in it moves their layout.
+    for (const element of made.splice(0)) element.remove();
+
+    await describe('adwaita-web: Application (ADR 0098 § 3)', async () => {
+        await it('has a vector for every unlocked vfunc', () => {
+            expect(unprovenVfuncs(APPLICATION_VECTORS).length).toBe(0);
+        });
+        await it('Adw.Application is a Gtk.Application', () => {
+            expect(Adw.Application.prototype instanceof Gtk.Application).toBe(true);
+        });
+        await it('quit() takes the windows it added off the page', async () => {
+            const app = new Adw.Application({ application_id: 'org.gjsify.vec.WebQuit' });
+            const window = scene.window(app as never) as Element;
+            app.connect('activate', () => app.quit());
+            await app.runAsync([]);
+            expect(window.isConnected).toBe(false);
+            made.length = 0;
+        });
+    });
+};

package/src/application.ts

@@ -0,0 +1,92 @@
+// `Gio.Application`, `Gtk.Application` and `Adw.Application` on the browser (ADR 0098 §§ 1, 3).
+//
+// The behaviour is the core's (`@gjsify/adwaita-core`); this file is the HOST: when the platform is
+// ready (`DOMContentLoaded`), how a window leaves it, and the walk that resolves `app.` / `win.`
+// from an element. A web page has no process, so `quit()` removes the windows the application
+// added and the tab stays.
+
+import {
+    GioApplicationBase,
+    withGtkApplication,
+    activateWidgetAction as activateIn,
+    activateMenuItem,
+    applicationOfWindow,
+    menuActionsFor,
+    installActionMap,
+    type AdwMenuItem,
+    type AdwMenuActions,
+    type AdwMenuModel,
+    type ApplicationHost,
+} from '@gjsify/adwaita-core';
+
+export const webHost: ApplicationHost = {
+    name: 'adwaita-web',
+    requiresWindow: false,
+    start(body) {
+        return new Promise<void>((resolve) => {
+            const go = (): void => {
+                body();
+                resolve();
+            };
+            if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', go, { once: true });
+            else go();
+        });
+    },
+    detach(window) {
+        (window as Element).remove();
+    },
+    exit() {},
+};
+
+/** An element's parent for action resolution; a popover is rooted at the widget that owns it. */
+export function parentOfElement(node: object): object | null {
+    if (!(node instanceof Element)) return null;
+    const anchor = (node as { anchor?: unknown }).anchor;
+    return anchor instanceof Element ? anchor : node.parentElement;
+}
+
+/** What a `Gtk.Actionable` does on activation: the action `prefix.name` found from `widget`. */
+export function activateWidgetAction(widget: Element, fullName: string, parameter: unknown = null): boolean {
+    return activateIn(widget, fullName, parentOfElement, parameter);
+}
+
+/** What the items of `model` read from the actions registered above `el` (ADR 0097 § 3). */
+export function menuActionsOfElement(el: Element, model: AdwMenuModel): AdwMenuActions {
+    return menuActionsFor(model, el, parentOfElement);
+}
+
+/** What choosing `item` in a menu owned by `el` does: the action it names fires. */
+export function activateElementMenuItem(el: Element, item: AdwMenuItem): boolean {
+    return activateMenuItem(item, el, parentOfElement);
+}
+
+export class GioApplication extends GioApplicationBase {
+    static override host = webHost;
+}
+
+export class GtkApplication extends withGtkApplication(GioApplication) {}
+
+export class AdwApplication extends GtkApplication {}
+
+type WindowApplication = { add_window(window: object): void; remove_window(window: object): void };
+
+/**
+ * `Gtk.Window:application` and the window's `Gio.ActionMap` (`win.` actions) on an element class.
+ * Setting the property is `add_window`, as on GTK; setting it to `null` is `remove_window`.
+ */
+export function defineWindowApplication(proto: object): void {
+    installActionMap(proto);
+    Object.defineProperty(proto, 'application', {
+        configurable: true,
+        enumerable: true,
+        get(this: object) {
+            return applicationOfWindow(this);
+        },
+        set(this: object, value: WindowApplication | null) {
+            const current = applicationOfWindow(this) as unknown as WindowApplication | null;
+            if (current === value) return;
+            current?.remove_window(this);
+            value?.add_window(this);
+        },
+    });
+}

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;
     }
@@ -138,6 +138,161 @@ export const AdwConstructVectorsTest = async () => {
                 'plain handlers only',
             );
         });
+        await it('runs a CheckButton `toggled` handler on a click and on a programmatic change', () => {
+            let calls = 0;
+            const { root, unmount } = mountSharedTree(
+                {
+                    tag: 'GtkBox',
+                    children: [
+                        { tag: 'GtkCheckButton', id: 'box', signals: [{ name: 'toggled', handler: 'onToggled' }] },
+                    ],
+                },
+                { scope: { onToggled: () => calls++ } },
+            );
+            try {
+                const box = root.querySelector('#box') as unknown as HTMLElement & { active: boolean };
+                box.click();
+                expect(box.active).toBe(true);
+                box.active = false;
+                expect(calls).toBe(2);
+            } finally {
+                unmount();
+            }
+        });
+        await it('makes a bind follow a CheckButton `active`', () => {
+            const { root, unmount } = mountSharedTree({
+                tag: 'GtkBox',
+                children: [
+                    { tag: 'GtkCheckButton', id: 'box' },
+                    {
+                        tag: 'GtkToggleButton',
+                        id: 'target',
+                        bindings: { active: { source: 'box', property: 'active' } },
+                    },
+                ],
+            });
+            try {
+                const target = root.querySelector('#target') as unknown as { active: boolean };
+                expect(target.active).toBe(false);
+                (root.querySelector('#box') as HTMLElement).click();
+                expect(target.active).toBe(true);
+            } finally {
+                unmount();
+            }
+        });
+        await it('makes a bind follow a Switch `active`', () => {
+            const { root, unmount } = mountSharedTree({
+                tag: 'GtkBox',
+                children: [
+                    { tag: 'GtkSwitch', id: 'source' },
+                    { tag: 'GtkSwitch', id: 'target', bindings: { active: { source: 'source', property: 'active' } } },
+                ],
+            });
+            try {
+                const target = root.querySelector('#target') as unknown as { active: boolean };
+                (root.querySelector('#source') as unknown as { active: boolean }).active = true;
+                expect(target.active).toBe(true);
+            } finally {
+                unmount();
+            }
+        });
+        await it('runs an Entry `changed` and `notify::text` handler on typing and on a programmatic set', () => {
+            const seen: string[] = [];
+            const { root, unmount } = mountSharedTree(
+                {
+                    tag: 'GtkBox',
+                    children: [
+                        {
+                            tag: 'GtkEntry',
+                            id: 'entry',
+                            signals: [
+                                { name: 'changed', handler: 'onChanged' },
+                                { name: 'notify::text', handler: 'onText' },
+                            ],
+                        },
+                    ],
+                },
+                { scope: { onChanged: () => seen.push('changed'), onText: () => seen.push('notify::text') } },
+            );
+            try {
+                const entry = root.querySelector('#entry') as unknown as HTMLElement & {
+                    text: string;
+                    input: HTMLInputElement;
+                };
+                entry.input.value = 'typed';
+                entry.input.dispatchEvent(new Event('input'));
+                entry.text = 'set';
+                entry.text = 'set';
+                expect(seen.join()).toBe('changed,notify::text,changed,notify::text');
+            } finally {
+                unmount();
+            }
+        });
+        await it('dispatches ViewStack `notify::visible-child-name` when the visible page changes', () => {
+            const stack = document.createElement('adw-view-stack') as HTMLElement & {
+                addTitled(c: HTMLElement, name: string, title: string): unknown;
+                visibleChildName: string;
+            };
+            const names: string[] = [];
+            stack.addEventListener('notify::visible-child-name', (e) =>
+                names.push((e as CustomEvent).detail['visible-child-name']),
+            );
+            document.body.append(stack);
+            try {
+                stack.addTitled(document.createElement('div'), 'a', 'A');
+                stack.addTitled(document.createElement('div'), 'b', 'B');
+                stack.visibleChildName = 'b';
+                expect(names.join()).toBe('a,b');
+            } finally {
+                stack.remove();
+            }
+        });
+        await it('dispatches DropDown `notify::selected-item` after `notify::selected`, on a real change only', () => {
+            const dropDown = document.createElement('gtk-drop-down') as HTMLElement & {
+                model: string[];
+                selected: number;
+            };
+            const seen: string[] = [];
+            for (const name of ['notify::selected', 'notify::selected-item'])
+                dropDown.addEventListener(name, () => seen.push(name));
+            document.body.append(dropDown);
+            try {
+                dropDown.model = ['a', 'b'];
+                seen.length = 0;
+                dropDown.selected = 1;
+                dropDown.selected = 1;
+                expect(seen.join()).toBe('notify::selected,notify::selected-item');
+            } finally {
+                dropDown.remove();
+            }
+        });
+        await it('dispatches Stack `notify::visible-child` before `notify::visible-child-name`', () => {
+            const stack = document.createElement('gtk-stack') as HTMLElement & { visibleChildName: string | null };
+            const a = document.createElement('div');
+            a.setAttribute('name', 'a');
+            const b = document.createElement('div');
+            b.setAttribute('name', 'b');
+            stack.append(a, b);
+            document.body.append(stack);
+            try {
+                const seen: string[] = [];
+                for (const name of ['notify::visible-child', 'notify::visible-child-name'])
+                    stack.addEventListener(name, () => seen.push(name));
+                stack.visibleChildName = 'b';
+                expect(seen.join()).toBe('notify::visible-child,notify::visible-child-name');
+            } finally {
+                stack.remove();
+            }
+        });
+        await it('declares the notify each of DropDown, Stack and Switch dispatches', () => {
+            const declared = (tag: string) =>
+                (customElements.get(tag) as unknown as { signals: Record<string, string> }).signals;
+            expect(declared('gtk-drop-down')['notify::selected']).toBe('notify::selected');
+            expect(declared('gtk-drop-down')['notify::selected-item']).toBe('notify::selected-item');
+            expect(declared('gtk-stack')['notify::visible-child']).toBe('notify::visible-child');
+            expect(declared('gtk-stack')['notify::visible-child-name']).toBe('notify::visible-child-name');
+            expect(declared('gtk-switch')['notify::active']).toBe('notify::active');
+        });
         await it('refuses a bind to an id nothing has, to a source that dispatches no notify, and the flags', () => {
             const bound = (binding: NonNullable<SharedTreeNode['bindings']>[string], sourceTag = 'GtkToggleButton') =>
                 ({

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) {