@gjsify/adwaita-web 0.55.0 → 0.57.0

package/lib/types/widget-size.spec.d.ts

@@ -0,0 +1 @@
+export declare const AdwWidgetSizeTest: () => Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-web",
-    "version": "0.55.0",
+    "version": "0.57.0",
     "description": "Adwaita/Libadwaita web components for browser targets",
     "type": "module",
     "main": "./src/index.ts",
@@ -38,7 +38,8 @@
     ],
     "scripts": {
         "clear": "gjsify clear lib dist tsconfig.tsbuildinfo scss/_icons.generated.scss src/styles.generated.ts",
-        "check": "gjsify run build:scss && gjsify tsc --noEmit",
+        "check": "gjsify run build:scss && gjsify tsc --noEmit && gjsify run check:consumer",
+        "check:consumer": "gjsify tsc -p tsconfig.consumer.json",
         "build": "gjsify run build:scss && gjsify run build:types",
         "build:scss": "node scripts/build-scss.mjs",
         "build:types": "gjsify tsc",
@@ -49,16 +50,17 @@
         "@codemirror/language": "^6.12.4",
         "@codemirror/state": "^6.7.0",
         "@codemirror/view": "^6.43.4",
-        "@gjsify/adwaita-core": "^0.55.0",
-        "@gjsify/adwaita-fonts": "^0.55.0",
-        "@gjsify/adwaita-icons": "^0.55.0",
+        "@gjsify/adwaita-core": "^0.57.0",
+        "@gjsify/adwaita-fonts": "^0.57.0",
+        "@gjsify/adwaita-icons": "^0.57.0",
+        "@gjsify/gtksource-core": "^0.57.0",
         "@lezer/highlight": "^1.2.3"
     },
     "devDependencies": {
-        "@gjsify/blueprint": "^0.55.0",
-        "@gjsify/cli": "^0.55.0",
-        "@gjsify/unit": "^0.55.0",
-        "@gjsify/vite-plugin-blueprint": "^0.55.0",
+        "@gjsify/blueprint": "^0.57.0",
+        "@gjsify/cli": "^0.57.0",
+        "@gjsify/unit": "^0.57.0",
+        "@gjsify/vite-plugin-blueprint": "^0.57.0",
         "sass": "^1.101.0",
         "typescript": "^6.0.3"
     },

package/scss/_action_row.scss

@@ -5,7 +5,14 @@
 // Copyright (c) 2025 csm (adwaita-web). MIT License.
 // Modifications: Adapted for @gjsify/adwaita-web Web Components.
 
-adw-action-row {
+adw-action-row,
+adw-switch-row,
+adw-combo-row,
+adw-spin-row {
+  // These row types inherit from AdwActionRow upstream and have
+  // title-lines/subtitle-lines properties. Match libadwaita: wrap by default
+  // (GtkLabel with wrap=true, lines=0), clamp via CSS custom property when
+  // title-lines/subtitle-lines > 0. See adw-action-row.ui lines 54-61, 70-81.
   display: flex;
   align-items: center;
   gap: var(--spacing-m);
@@ -31,36 +38,53 @@ adw-action-row {
   }
 
   .adw-action-row-prefix,
-  .adw-action-row-suffix {
+  .adw-action-row-suffix,
+  .adw-switch-row-prefix {
     display: flex;
     align-items: center;
     gap: var(--spacing-xs);
     flex-shrink: 0;
   }
 
-  .adw-action-row-text {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    flex: 1 1 auto;
-    min-width: 0;
-  }
+  // The text column's own rule is `_row.scss`'s shared `.adw-row-text` — one spelling
+  // for all five rows, so the clamp selectors below can name it too.
 
+  // Title/subtitle WRAP BY DEFAULT, matching libadwaita's GtkLabel wrap=true,
+  // lines=0. The typography is this row type's own (it was here before the wrap); only
+  // `white-space` moves, and `overflow`/`text-overflow` are left to the clamped state
+  // below, where the ellipsis has a line count to truncate to.
   .adw-row-title {
     font-size: var(--font-size-base);
     color: var(--card-fg-color);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: normal;
+    overflow-wrap: break-word;
   }
 
   .adw-row-subtitle {
     font-size: var(--font-size-small);
     opacity: var(--dim-opacity);
     color: var(--card-fg-color);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: normal;
+    overflow-wrap: break-word;
+  }
+
+  // Clamped state — enabled by JS toggling .adw-row-clamp on the text container.
+  .adw-row-text.adw-row-clamp {
+    .adw-row-title,
+    .adw-row-subtitle {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: var(--adw-row-ellipsize-overflow, ellipsis);
+    }
+
+    .adw-row-title {
+      -webkit-line-clamp: var(--adw-row-title-lines, 1);
+    }
+
+    .adw-row-subtitle {
+      -webkit-line-clamp: var(--adw-row-subtitle-lines, 1);
+    }
   }
 }
 

package/scss/_button_row.scss

@@ -34,6 +34,11 @@ adw-button-row {
     justify-content: center;
     gap: var(--spacing-xs);
     min-width: 0;
+    // The row centres its one button (`justify-content: center` above), so without this the
+    // contents box is exactly as wide as the button and `tooltip-text` reaches only that
+    // much of the row. Growing it and letting its own `justify-content: centre` do the
+    // centring draws the same button in the same place.
+    flex: 1 1 auto;
   }
 
   .adw-button-row-title {

package/scss/_expander_row.scss

@@ -32,12 +32,45 @@ adw-expander-row {
     }
   }
 
+  // Title/subtitle WRAP BY DEFAULT, matching libadwaita's GtkLabel wrap=true,
+  // lines=0 — stated HERE, at this row's own specificity, because `_row.scss` carries
+  // a `white-space: nowrap` default for `.adw-row-subtitle` and an inherited one reaches
+  // the title. A rule that only turns `white-space` on inside the clamp selector cannot
+  // make a row wrap by DEFAULT: the clamp is the minority state.
   .adw-row-title {
     font-size: var(--font-size-base);
     color: var(--card-fg-color);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: normal;
+    overflow-wrap: break-word;
+  }
+
+  .adw-row-subtitle {
+    font-size: var(--font-size-small);
+    opacity: var(--dim-opacity);
+    color: var(--card-fg-color);
+    white-space: normal;
+    overflow-wrap: break-word;
+  }
+
+  // Clamped state — JS toggles `.adw-row-clamp` on the TEXT COLUMN, the same node and
+  // the same class `_action_row.scss` keys off; reading it off the header instead never
+  // matched anything.
+  .adw-row-text.adw-row-clamp {
+    .adw-row-title,
+    .adw-row-subtitle {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: var(--adw-row-ellipsize-overflow, ellipsis);
+    }
+
+    .adw-row-title {
+      -webkit-line-clamp: var(--adw-row-title-lines, 1);
+    }
+
+    .adw-row-subtitle {
+      -webkit-line-clamp: var(--adw-row-subtitle-lines, 1);
+    }
   }
 
   // The text column takes the free space so prefix/suffix widgets, the enable

package/scss/_headerbar.scss

@@ -119,7 +119,8 @@ adw-header-bar {
 // would paint over them. Washing the stripes out with the bar's own opaque
 // background colour renders identically and leaves the content alone.
 .devel adw-header-bar,
-adw-window.devel adw-header-bar {
+adw-window.devel adw-header-bar,
+adw-application-window.devel adw-header-bar {
   background-image:
     linear-gradient(to bottom, transparent 0%, var(--headerbar-bg-color) 100%),
     repeating-linear-gradient(

package/scss/_preferences_row.scss

@@ -32,6 +32,15 @@ adw-preferences-row {
   // stylesheet that resets selection.
   .adw-row-title {
     user-select: none;
+
+    // A row with NO content section has a `hidden` one, and `[hidden]` is
+    // `display: none !important` — so the row's free space belongs to no part at all and
+    // `tooltip-text`, which rides a part (`src/row-tooltip.ts`), reaches only the label's
+    // own width. Taking that space moves it into a box that draws nothing: the label is
+    // start-aligned and the content's items are `flex-end`, so nothing on screen moves.
+    &:has(~ .adw-preferences-row-content[hidden]) {
+      flex: 1 1 auto;
+    }
   }
 
   // The slot the `child` property lands in: the preference's own controls, which sit

package/scss/_reset.scss

@@ -47,7 +47,7 @@ $adw-components:
   gtk-gl-area, gtk-graphics-offload, gtk-grid, gtk-grid-view, gtk-header-bar, gtk-image, gtk-inscription, gtk-label, gtk-level-bar,
   gtk-link-button, gtk-list-box, gtk-list-box-row, gtk-list-view, gtk-media-controls, gtk-menu-button, gtk-overlay, gtk-page-setup-unix-dialog, gtk-paned,
   gtk-password-entry, gtk-picture, gtk-popover, gtk-popover-bin, gtk-popover-menu, gtk-popover-menu-bar, gtk-print-unix-dialog,
-  gtk-progress-bar, gtk-revealer, gtk-scale, gtk-scale-button, gtk-scrollbar, gtk-scrolled-window, gtk-search-bar, gtk-search-entry, gtk-separator,
+  gtk-progress-bar, gtk-revealer, gtk-scale, gtk-scale-button, gtk-scrollbar, gtk-scrolled-window, gtk-search-bar, gtk-search-entry, gtk-separator, gtk-source-view,
   gtk-spin-button, gtk-spinner, gtk-stack, gtk-stack-sidebar, gtk-stack-switcher, gtk-switch, gtk-text, gtk-text-view, gtk-toggle-button, gtk-tree-expander, gtk-video, gtk-viewport,
   gtk-window, gtk-window-controls, gtk-window-handle;
 

package/scss/_row.scss

@@ -20,6 +20,16 @@ adw-combo-row {
   }
 }
 
+// A `tooltip-text` part must cover the ROW, not just the label text inside it: the browser
+// resolves a tooltip by walking UP from the hovered node, so a part that stops at the text's
+// own height lets the walk reach the host — whose `title` is the row's LABEL — over the rest
+// of the widget. Measured on a 54px `adw-action-row`: the label text is 18px of it. The
+// marker is `applyRowTooltip`'s (`src/row-tooltip.ts`); stretching changes nothing drawn,
+// because these columns centre their own children.
+[data-row-tooltip] {
+  align-self: stretch;
+}
+
 // Shared title/subtitle text column used by every row type (action/switch/
 // combo/spin). The title is the primary label; the subtitle is dimmed and
 // hidden when empty.
@@ -31,6 +41,12 @@ adw-combo-row {
   min-width: 0;
 }
 
+// NO `.adw-row-title` default HERE, deliberately. `.adw-row-title` is also the class
+// `<adw-entry-row>` and `<adw-preferences-row>` put on their titles, so a global
+// `white-space: nowrap` here silently made those two rows un-wrapping too — a change
+// to row types this feature was never scoped to. Each row type that wants a wrapping
+// title says so in its own partial at its own specificity (see `_action_row.scss`,
+// `_expander_row.scss`); a global default can only ever be the losing side of that.
 .adw-row-subtitle {
   font-size: var(--font-size-small);
   opacity: var(--dim-opacity);

package/scss/_status_page.scss

@@ -53,7 +53,7 @@ adw-status-page {
 
   // `.compact` — the documented smaller status page, for a sidebar or a popover
   // (style-classes.md "Compact Status Page"): margins 24px 12px, the icon 96px with 12px
-  // under it, `.title-2`, and 24px to the child (`_misc.scss`, statuspage.compact).
+  // under it, `.title-2`, and 12px to the child (`_misc.scss`, statuspage.compact).
   &.compact {
     padding: 24px 12px;
 

package/scss/_toggle_group.scss

@@ -24,6 +24,13 @@ adw-toggle-group {
   border-radius: var(--button-radius);
   background-color: var(--button-bg-color);
 
+  // `toggle-group:disabled` (libadwaita `_toggle-group.scss:16`) — the whole group's
+  // background mixed toward transparent. Written against `[disabled]` and not `:disabled`:
+  // a custom element is never `:disabled`, the way `_expander.scss` records.
+  &[disabled] {
+    background-color: color-mix(in srgb, var(--button-bg-color) var(--disabled-opacity), transparent);
+  }
+
   .adw-toggle-group-inner {
     display: flex;
     align-items: stretch;
@@ -70,6 +77,20 @@ adw-toggle-group {
       outline-offset: 1px;
     }
 
+    // A `<button disabled>` carries GTK's `:disabled` dimming — `_buttons.scss:58`,
+    // `filter: Opacity(var(--disabled-opacity))` — and `cursor: default` with it
+    // (`_button.scss`). Hover and active are suppressed because a disabled button takes
+    // neither, so the hover fill would linger over a toggle that cannot be pressed.
+    &:disabled {
+      opacity: var(--disabled-opacity);
+      cursor: default;
+
+      &:hover,
+      &:active {
+        background-color: transparent;
+      }
+    }
+
     // The active toggle — a raised white chip, the way libadwaita draws it.
     &.active {
       background-color: var(--active-toggle-bg-color);
@@ -81,6 +102,13 @@ adw-toggle-group {
       &:hover {
         background-color: var(--active-toggle-bg-color);
       }
+
+      // The raised chip is what makes it read as raised; libadwaita drops the shadow on a
+      // disabled active toggle (`_toggle-group.scss:131`) so an unavailable choice does not
+      // look pressed.
+      &:disabled {
+        box-shadow: none;
+      }
     }
   }
 

package/scss/_widget.scss

@@ -4,7 +4,8 @@
 // projected `.blp` hands them to `buildSharedTree` as attributes (`halign="center"`). Until
 // this partial nothing read them, so the gallery's bottom sheet stretched the button its
 // Blueprint centres. The margins are not here: an attribute cannot carry a length into CSS
-// portably, so `shared-tree-builder.ts` writes them as inline style.
+// portably, so `shared-tree-builder.ts` writes them as inline style — and so are
+// `width-request` / `height-request`, as the `min-width` / `min-height` they are.
 //
 // ALIGNMENT IS AN AUTO MARGIN, because that is the one CSS placement that means the same on
 // both axes of a flex container and of a grid: GTK allocates a non-FILL child its natural
@@ -49,7 +50,17 @@
   margin-block: auto;
 }
 
-gtk-box:not([orientation='vertical']) > [hexpand],
-gtk-box[orientation='vertical'] > [vexpand] {
+gtk-box:not([orientation='vertical']) > [hexpand]:not([hexpand='false']),
+gtk-box[orientation='vertical'] > [vexpand]:not([vexpand='false']) {
   flex-grow: 1;
 }
+
+// An AUTHORED `hexpand: false` is the one case where absence is not enough: a widget that
+// grows by default (`<gtk-scrolled-window>` is `flex: 1 1 0%`, the allocation of a window in a
+// column) must stop, and GTK then gives it its NATURAL size rather than nothing — hence the
+// `auto` basis, not just a zero grow. `width-request` (an inline `min-width`) is the floor.
+gtk-box:not([orientation='vertical']) > [hexpand='false'],
+gtk-box[orientation='vertical'] > [vexpand='false'] {
+  flex-grow: 0;
+  flex-basis: auto;
+}

package/scss/_window.scss

@@ -6,7 +6,11 @@
 // Copyright (c) 2025 csm (adwaita-web). MIT License.
 // Modifications: Adapted for @gjsify/adwaita-web Web Components.
 
-adw-window {
+// `adw-application-window` is `adw-window` plus a menubar (it extends the class and adds nothing
+// else), so it is the same frame: without this an application window was an inline box with no
+// size at all, and a tree rooted at one measured 0 x 0.
+adw-window,
+adw-application-window {
   display: flex;
   flex-direction: column;
   background-color: var(--window-bg-color);
@@ -43,6 +47,14 @@ adw-window {
   min-width: 0;
 }
 
+// A window hands its one child the WHOLE allocation, whatever that child's own expand flags say.
+// On the web a box is only as tall as what it holds, so the `Gtk.Box` a `.blp` roots its content
+// in stopped at its header bar and the split view below it drew a quarter of the window.
+.adw-window-content > gtk-box {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
 // <gtk-window> — the GTK frame, in the SAME file upstream styles `Adw.Window` in: libadwaita
 // keys `window { &.csd { … } }` off the GtkWindow CSS node
 // (refs/libadwaita/src/stylesheet/widgets/_window.scss:1-31), and this element IS a window

package/src/adw-action-rows.spec.ts

@@ -13,6 +13,8 @@
 //   - libadwaita has no activatable opt-out for a button row, and
 //     `<adw-action-row activatable="false">` reads by PRESENCE, so it means the
 //     opposite of what it says.
+//   - the row `title-lines`/`subtitle-lines` clamp is observed as RENDERED GEOMETRY, not
+//     as computed style (see `renderedLineCount`).
 import { describe, expect, it } from '@gjsify/unit';
 
 import {
@@ -30,6 +32,9 @@ import { isIconAvailable } from './icon-registry.js';
 import { fallbackMask, maskOf } from './icon-registry.spec.js';
 
 import type { AdwActionRow } from './elements/adw-action-row.js';
+import type { AdwComboRow } from './elements/adw-combo-row.js';
+import type { AdwExpanderRow } from './elements/adw-expander-row.js';
+import type { AdwSpinRow } from './elements/adw-spin-row.js';
 import type { AdwSwitchRow } from './elements/adw-switch-row.js';
 import type { AdwWindowTitle } from './elements/adw-window-title.js';
 
@@ -196,6 +201,134 @@ export const AdwActionRowsTest = async () => {
         });
     });
 
+    /**
+     * The number of lines a row title/subtitle element actually RENDERS, measured from its
+     * height divided by one line box's height.
+     *
+     * NOT the number of rects a `Range` over the element reports. Firefox reports a rect per
+     * laid-out line box and `-webkit-line-clamp` truncates the BOX without re-laying out the
+     * text, so a label clamped to one line still lists every line it would have taken:
+     * measured on a real `adw-switch-row`, `title-lines=1` gave 5 rects for a box that
+     * collapsed from 90px to 18px, and an isolated `display:-webkit-box;
+     * -webkit-line-clamp:1` probe gave 3 rects / 22px against 3 rects / 66px unclamped —
+     * identical rect counts, opposite line counts. Only the HEIGHT moves, so only the height
+     * can carry the claim; the rect count was never a line count and no `-webkit-line-clamp`
+     * implementation can satisfy `expect(rects.length).toBe(1)`.
+     *
+     * The step is the FIRST line box, not the computed `line-height`: the stylesheet sets no
+     * line-height on these labels, so `getComputedStyle().lineHeight` reads `normal` — which
+     * computes to no number at all.
+     */
+    function renderedLineCount(el: HTMLElement): number {
+        const range = document.createRange();
+        range.selectNodeContents(el);
+        const rects = range.getClientRects();
+        const lineBox = rects.length > 0 ? rects[0]!.height : 0;
+        if (!(lineBox > 0)) return Number.NaN;
+        return Math.round(el.getBoundingClientRect().height / lineBox);
+    }
+
+    // Default (0 = unlimited, the AdwActionRow pspec's sentinel): wraps freely.
+    await describe('<adw-action-row> title-lines / subtitle-lines (libadwaita conformance)', async () => {
+        await it('title-lines=0 (default) wraps to multiple lines in narrow container', () => {
+            const { el, host } = mount<AdwActionRow>('adw-action-row');
+            el.setAttribute(
+                'title',
+                'A very long title that should wrap across multiple lines when the container is narrow',
+            );
+            host.style.width = '200px';
+            const lines = renderedLineCount(el.querySelector('.adw-row-title')!);
+            expect(lines).toBeGreaterThan(1);
+            host.remove();
+        });
+
+        await it('subtitle-lines=0 (default) wraps to multiple lines in narrow container', () => {
+            const { el, host } = mount<AdwActionRow>('adw-action-row');
+            el.setAttribute(
+                'subtitle',
+                'A very long subtitle that should wrap across multiple lines when the container is narrow',
+            );
+            host.style.width = '200px';
+            const lines = renderedLineCount(el.querySelector('.adw-row-subtitle')!);
+            expect(lines).toBeGreaterThan(1);
+            host.remove();
+        });
+
+        // title-lines > 0: clamps to N lines
+        await it('title-lines=1 clamps to exactly 1 line', () => {
+            const { el, host } = mount<AdwActionRow>('adw-action-row');
+            el.setAttribute('title', 'Title that is long enough to wrap if allowed');
+            el.setAttribute('title-lines', '1');
+            host.style.width = '150px';
+            const lines = renderedLineCount(el.querySelector('.adw-row-title')!);
+            expect(lines).toBe(1);
+            host.remove();
+        });
+
+        await it('subtitle-lines=2 clamps to exactly 2 lines', () => {
+            const { el, host } = mount<AdwActionRow>('adw-action-row');
+            el.setAttribute('subtitle', 'Subtitle that is long enough to wrap into three lines if allowed');
+            el.setAttribute('subtitle-lines', '2');
+            host.style.width = '150px';
+            const lines = renderedLineCount(el.querySelector('.adw-row-subtitle')!);
+            expect(lines).toBe(2);
+            host.remove();
+        });
+
+        // Dynamic attribute change
+        await it('changing title-lines from 0 to 1 applies clamping visually', () => {
+            const { el, host } = mount<AdwActionRow>('adw-action-row');
+            el.setAttribute('title', 'Title that is long enough to wrap if allowed');
+            el.setAttribute('title-lines', '0');
+            host.style.width = '150px';
+            let lines = renderedLineCount(el.querySelector('.adw-row-title')!);
+            expect(lines).toBeGreaterThan(1);
+
+            el.setAttribute('title-lines', '1');
+            // Force reflow
+            el.getBoundingClientRect();
+            lines = renderedLineCount(el.querySelector('.adw-row-title')!);
+            expect(lines).toBe(1);
+            host.remove();
+        });
+
+        await it('changing title-lines from 1 to 0 removes clamping visually', () => {
+            const { el, host } = mount<AdwActionRow>('adw-action-row');
+            el.setAttribute('title', 'Title that is long enough to wrap if allowed');
+            el.setAttribute('title-lines', '1');
+            host.style.width = '150px';
+            let lines = renderedLineCount(el.querySelector('.adw-row-title')!);
+            expect(lines).toBe(1);
+
+            el.setAttribute('title-lines', '0');
+            el.getBoundingClientRect();
+            lines = renderedLineCount(el.querySelector('.adw-row-title')!);
+            expect(lines).toBeGreaterThan(1);
+            host.remove();
+        });
+
+        // Invalid/non-numeric values treated as 0 (unlimited) — AdwActionRow pspec range is 0..G_MAXINT
+        await it('title-lines="invalid" treated as unlimited (wraps)', () => {
+            const { el, host } = mount<AdwActionRow>('adw-action-row');
+            el.setAttribute('title', 'Title that is long enough to wrap if allowed');
+            el.setAttribute('title-lines', 'invalid');
+            host.style.width = '150px';
+            const lines = renderedLineCount(el.querySelector('.adw-row-title')!);
+            expect(lines).toBeGreaterThan(1);
+            host.remove();
+        });
+
+        await it('subtitle-lines="-1" treated as unlimited (wraps)', () => {
+            const { el, host } = mount<AdwActionRow>('adw-action-row');
+            el.setAttribute('subtitle', 'Subtitle that is long enough to wrap if allowed');
+            el.setAttribute('subtitle-lines', '-1');
+            host.style.width = '150px';
+            const lines = renderedLineCount(el.querySelector('.adw-row-subtitle')!);
+            expect(lines).toBeGreaterThan(1);
+            host.remove();
+        });
+    });
+
     await describe('<adw-switch-row> notify::active (libadwaita conformance vectors)', async () => {
         for (const vector of SWITCH_ROW_NOTIFY_VECTORS) {
             await it(`${vector.name} — ${vector.rule}`, () => {
@@ -244,6 +377,76 @@ export const AdwActionRowsTest = async () => {
                 host.remove();
             });
         }
+
+        // title-lines / subtitle-lines tests (same behavior as adw-action-row)
+        await it('title-lines=0 (default) wraps to multiple lines in narrow container', () => {
+            const { el, host } = mount<AdwSwitchRow>('adw-switch-row');
+            el.setAttribute(
+                'title',
+                'A very long title that should wrap across multiple lines when the container is narrow',
+            );
+            host.style.width = '200px';
+            const lines = renderedLineCount(el.querySelector('.adw-row-title')!);
+            expect(lines).toBeGreaterThan(1);
+            host.remove();
+        });
+
+        await it('subtitle-lines=0 (default) wraps to multiple lines in narrow container', () => {
+            const { el, host } = mount<AdwSwitchRow>('adw-switch-row');
+            el.setAttribute(
+                'subtitle',
+                'A very long subtitle that should wrap across multiple lines when the container is narrow',
+            );
+            host.style.width = '200px';
+            const lines = renderedLineCount(el.querySelector('.adw-row-subtitle')!);
+            expect(lines).toBeGreaterThan(1);
+            host.remove();
+        });
+
+        await it('title-lines=1 clamps to exactly 1 line', () => {
+            const { el, host } = mount<AdwSwitchRow>('adw-switch-row');
+            el.setAttribute('title', 'Title that is long enough to wrap if allowed');
+            el.setAttribute('title-lines', '1');
+            host.style.width = '150px';
+            const lines = renderedLineCount(el.querySelector('.adw-row-title')!);
+            expect(lines).toBe(1);
+            host.remove();
+        });
+
+        await it('subtitle-lines=2 clamps to exactly 2 lines', () => {
+            const { el, host } = mount<AdwSwitchRow>('adw-switch-row');
+            el.setAttribute('subtitle', 'Subtitle that is long enough to wrap into three lines if allowed');
+            el.setAttribute('subtitle-lines', '2');
+            host.style.width = '150px';
+            const lines = renderedLineCount(el.querySelector('.adw-row-subtitle')!);
+            expect(lines).toBe(2);
+            host.remove();
+        });
+
+        await it('changing title-lines from 0 to 1 applies clamping visually', () => {
+            const { el, host } = mount<AdwSwitchRow>('adw-switch-row');
+            el.setAttribute('title', 'Title that is long enough to wrap if allowed');
+            el.setAttribute('title-lines', '0');
+            host.style.width = '150px';
+            let lines = renderedLineCount(el.querySelector('.adw-row-title')!);
+            expect(lines).toBeGreaterThan(1);
+
+            el.setAttribute('title-lines', '1');
+            el.getBoundingClientRect();
+            lines = renderedLineCount(el.querySelector('.adw-row-title')!);
+            expect(lines).toBe(1);
+            host.remove();
+        });
+
+        await it('title-lines="invalid" treated as unlimited (wraps)', () => {
+            const { el, host } = mount<AdwSwitchRow>('adw-switch-row');
+            el.setAttribute('title', 'Title that is long enough to wrap if allowed');
+            el.setAttribute('title-lines', 'invalid');
+            host.style.width = '150px';
+            const lines = renderedLineCount(el.querySelector('.adw-row-title')!);
+            expect(lines).toBeGreaterThan(1);
+            host.remove();
+        });
     });
 
     await describe('<adw-switch-row> prefix slot (inherited add_prefix)', async () => {
@@ -419,4 +622,56 @@ export const AdwActionRowsTest = async () => {
             host.remove();
         });
     });
+
+    // Line-clamping tests for other row types that inherit title-lines/subtitle-lines
+    await describe('<adw-combo-row> title-lines / subtitle-lines', async () => {
+        await it('title-lines=0 wraps, title-lines=1 clamps to 1 line', () => {
+            const { el, host } = mount<AdwComboRow>('adw-combo-row');
+            el.setAttribute('title', 'Title that is long enough to wrap if allowed');
+            el.setAttribute('title-lines', '0');
+            host.style.width = '150px';
+            let lines = renderedLineCount(el.querySelector('.adw-row-title')!);
+            expect(lines).toBeGreaterThan(1);
+
+            el.setAttribute('title-lines', '1');
+            el.getBoundingClientRect();
+            lines = renderedLineCount(el.querySelector('.adw-row-title')!);
+            expect(lines).toBe(1);
+            host.remove();
+        });
+    });
+
+    await describe('<adw-spin-row> title-lines / subtitle-lines', async () => {
+        await it('title-lines=0 wraps, title-lines=1 clamps to 1 line', () => {
+            const { el, host } = mount<AdwSpinRow>('adw-spin-row');
+            el.setAttribute('title', 'Title that is long enough to wrap if allowed');
+            el.setAttribute('title-lines', '0');
+            host.style.width = '150px';
+            let lines = renderedLineCount(el.querySelector('.adw-row-title')!);
+            expect(lines).toBeGreaterThan(1);
+
+            el.setAttribute('title-lines', '1');
+            el.getBoundingClientRect();
+            lines = renderedLineCount(el.querySelector('.adw-row-title')!);
+            expect(lines).toBe(1);
+            host.remove();
+        });
+    });
+
+    await describe('<adw-expander-row> title-lines / subtitle-lines', async () => {
+        await it('title-lines=0 wraps, title-lines=1 clamps to 1 line', () => {
+            const { el, host } = mount<AdwExpanderRow>('adw-expander-row');
+            el.setAttribute('title', 'Title that is long enough to wrap if allowed');
+            el.setAttribute('title-lines', '0');
+            host.style.width = '150px';
+            let lines = renderedLineCount(el.querySelector('.adw-row-title')!);
+            expect(lines).toBeGreaterThan(1);
+
+            el.setAttribute('title-lines', '1');
+            el.getBoundingClientRect();
+            lines = renderedLineCount(el.querySelector('.adw-row-title')!);
+            expect(lines).toBe(1);
+            host.remove();
+        });
+    });
 };