@gjsify/adwaita-web 0.64.12-next.281 → 0.64.13-next.283

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-web",
-    "version": "0.64.12-next.281",
+    "version": "0.64.13-next.283",
     "description": "Adwaita/Libadwaita web components for browser targets",
     "type": "module",
     "main": "./src/index.ts",
@@ -58,14 +58,14 @@
         "@codemirror/language": "^6.12.4",
         "@codemirror/state": "^6.7.0",
         "@codemirror/view": "^6.43.4",
-        "@gjsify/adwaita-core": "0.64.12-next.281",
-        "@gjsify/adwaita-fonts": "0.64.12-next.281",
-        "@gjsify/adwaita-icons": "0.64.12-next.281",
-        "@gjsify/gtksource-core": "0.64.12-next.281",
+        "@gjsify/adwaita-core": "0.64.13-next.283",
+        "@gjsify/adwaita-fonts": "0.64.13-next.283",
+        "@gjsify/adwaita-icons": "0.64.13-next.283",
+        "@gjsify/gtksource-core": "0.64.13-next.283",
         "@lezer/highlight": "^1.2.3"
     },
     "peerDependencies": {
-        "@gjsify/app-settings": "0.64.12-next.281"
+        "@gjsify/app-settings": "0.64.13-next.283"
     },
     "peerDependenciesMeta": {
         "@gjsify/app-settings": {
@@ -73,11 +73,11 @@
         }
     },
     "devDependencies": {
-        "@gjsify/app-settings": "0.64.12-next.281",
-        "@gjsify/blueprint": "0.64.12-next.281",
-        "@gjsify/cli": "0.64.12-next.281",
-        "@gjsify/unit": "0.64.12-next.281",
-        "@gjsify/vite-plugin-blueprint": "0.64.12-next.281",
+        "@gjsify/app-settings": "0.64.13-next.283",
+        "@gjsify/blueprint": "0.64.13-next.283",
+        "@gjsify/cli": "0.64.13-next.283",
+        "@gjsify/unit": "0.64.13-next.283",
+        "@gjsify/vite-plugin-blueprint": "0.64.13-next.283",
         "sass": "^1.101.0",
         "typescript": "^6.0.3"
     },
@@ -115,5 +115,5 @@
         "url": "https://github.com/gjsify/gjsify/issues"
     },
     "homepage": "https://github.com/gjsify/gjsify/tree/main/packages/web/adwaita-web#readme",
-    "gitHead": "c4d2e266c0d9849860b9828c14ebfe37b6d493b8"
+    "gitHead": "05fae97125a374e84bf57c2d2d086fb53523f205"
 }

package/scss/_labels.scss

@@ -109,6 +109,25 @@ gtk-label {
     max-width: 100%;
   }
 
+  // `gtk-label.ts`'s run-render path, SINGLE-LINE: the markup's runs move into this span
+  // because this element is a flex container (the two spacers above), and a node directly
+  // under one is a FLEX ITEM, not text — `vertical-align` does not apply to a flex item,
+  // so `<sup>`/`<sub>` stop being raised, and `align-items` centres each run on its own
+  // instead of the line sharing one baseline. Plain text never needed a box: a bare text
+  // node is ONE anonymous item, where a run list is one item per run.
+  //
+  // NO `max-width` HERE, unlike `.adw-label-text`: this box only ever holds ONE line (the
+  // host's `white-space: pre`, and this path is the not-wrapping, not-ellipsizing case),
+  // so there is no shrink-to-fit collapse to measure around — a single-line label as wide
+  // as its text, overflowing a narrower container, is what GtkLabel does and what
+  // `gtk-label.spec.ts` already pins for the plain-text path. The box's own size is its
+  // text's: `flex-basis: auto` over `width: auto` is the item's max-content width, which
+  // leaves the two spacers the free space `xalign` splits.
+  .adw-label-runs {
+    // Blockified by spec as a flex item; spelled out as `.adw-label-text` spells it out.
+    display: block;
+  }
+
   // `wrap-mode` — Pango's break-opportunity choice — is a real `word-break`/
   // `overflow-wrap` mapping, not a declared gap: CSS's `break-all` is Pango's CHAR (break
   // anywhere), and `overflow-wrap: anywhere` is Pango's WORD_CHAR (word boundaries, falling

package/scss/_link.scss

@@ -1,12 +1,26 @@
 // _link.scss — `link` and `button.link`, libadwaita's link treatment.
 //
-// ONLY `button.link`, not a bare `.link`. Upstream's rule names the `link` NODE and
-// `button.link` (`_links.scss:1-2`); the `link` node is the inner node of a `Gtk.Label`'s
-// `<a>` markup, which no element here renders. The `.link` style CLASS on anything but a
-// button is unstyled upstream: `AdwLinkRow` adds it to its row (adw-link-row.c:377), and
-// no rule matches `row.link`, so its title stays in the row's own colour. A bare `.link`
-// here painted the About dialog's link rows blue and underlined. `<gtk-link-button>`
-// renders an inner `<button class="adw-button link">`, which the selector below reads.
+// TWO NODES, NEVER A BARE `.link`. Upstream's rule names the `link` NODE and
+// `button.link` (`_links.scss:1-2`). `button.link` is `<gtk-link-button>`'s inner
+// `<button class="adw-button link">`, which the first selector below reads. The `link`
+// node is the inner node of a `Gtk.Label`'s `<a>` markup, and `<gtk-label>` now DRAWS
+// that — an `<a href>` per link in the markup (`label-markup.ts`) — so the second
+// selector is upstream's `link` rule, ported onto the element that finally exists.
+//
+// The `.link` style CLASS on anything but those two is unstyled upstream: `AdwLinkRow`
+// adds it to its row (adw-link-row.c:377), and no rule matches `row.link`, so its title
+// stays in the row's own colour. A bare `.link` here painted the About dialog's link rows
+// blue and underlined. It would now also hit `<gtk-label>` ITSELF, which gains the class
+// whenever its markup has a link (gtklabel.c:3896) — the label is not a link, its anchors
+// are. So both selectors name a node, and neither matches a class alone.
+//
+// THE LABEL'S ANCHORS ARE NOT STYLED THROUGH `:visited`, the CSS pseudo-class, even
+// though they are real `<a href>` elements that would match it. A browser's `:visited` is
+// the user's BROWSING HISTORY: a link followed in another tab, or last year, would come
+// up visited in a label that has never been clicked, which `Gtk.Label` never does. Its
+// `visited` is per-label state carried by URI across a re-parse
+// (`labelLinksInheritVisited`), painted as `.visited` by `_paintVisited` — the same class
+// `<gtk-link-button>` writes for the same reason one paragraph down.
 //
 // THE TWO COLOURS ARE THE PALETTE'S, not new tokens: `$link_color: var(--accent-color)`
 // and `$link_visited_color: color-mix(in srgb, var(--accent-color) 80%, var(--view-fg-color))`
@@ -36,6 +50,7 @@
 $link-color: var(--accent-color);
 $link-visited-color: color-mix(in srgb, var(--accent-color) 80%, var(--view-fg-color));
 $osd-link-color: color-mix(in srgb, var(--accent-bg-color) 50%, white);
+$osd-link-visited-color: color-mix(in srgb, var(--accent-bg-color) 75%, white);
 
 .adw-button.link {
   color: $link-color;
@@ -82,4 +97,55 @@ $osd-link-color: color-mix(in srgb, var(--accent-bg-color) 50%, white);
   &.checked {
     background-color: transparent;
   }
+}
+
+// Upstream's bare `link` node — a `Gtk.Label`'s `<a href>` markup, which `<gtk-label>`
+// draws as a real anchor per link (`label-markup.ts`, `buildAnchor`).
+//
+// THE SELECTOR IS THE ATTRIBUTE, not the class. `data-gtk-link` is written by the renderer
+// and by nothing else, so it names the node the way upstream's `link` names a GTK node;
+// the `.link` class on the same anchor is GTK's own style class, which a consumer may also
+// put on anything (and `<gtk-label>` ITSELF carries it whenever its markup has a link —
+// see the header). Scoped under `gtk-label` so an `<a>` a consumer put in a label's slot
+// for its own reasons is untouched.
+gtk-label a[data-gtk-link] {
+  color: $link-color;
+  text-decoration: underline;
+  font-weight: inherit;
+
+  &:hover {
+    color: hsl(from $link-color h calc(s * 1.1) calc(l * 1.1));
+  }
+
+  &:active {
+    color: $link-color;
+  }
+
+  // `.visited` and NOT `:visited` — the pseudo-class is the user's browsing history, where
+  // `Gtk.Label`'s `visited` is per-label state carried by URI (`_paintVisited`, and the
+  // paragraph in the header).
+  &.visited {
+    color: $link-visited-color;
+  }
+
+  .osd & {
+    color: $osd-link-color;
+
+    &.visited {
+      color: $osd-link-visited-color;
+    }
+
+    &:active {
+      color: $osd-link-color;
+    }
+  }
+
+  // `link { @include focus-ring() }` (_links.scss:33-35) — the mixin is a 2px outline at
+  // offset -2px (`_drawing.scss`), spelled out as `_expander.scss` and `_checks.scss`
+  // spell it out. `:focus-visible` rather than `:focus`: GTK draws the ring on keyboard
+  // focus, and a click on a link must not leave one behind.
+  &:focus-visible {
+    outline: 2px solid var(--accent-color);
+    outline-offset: -2px;
+  }
 }

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

@@ -19,6 +19,7 @@ import { describe, expect, it } from '@gjsify/unit';
 
 import {
     ACTION_ROW_ACTIVATION_VECTORS,
+    ACTION_ROW_SUBTITLE_VECTORS,
     BUTTON_ROW_ACTIVATABLE_VECTORS,
     BUTTON_ROW_ICON_VECTORS,
     LABEL_VISIBILITY_VECTORS,
@@ -98,6 +99,24 @@ export const AdwActionRowsTest = async () => {
         });
     });
 
+    await describe('<adw-action-row> subtitle (libadwaita conformance vectors)', async () => {
+        // The element is attribute-driven and publishes no `notify::subtitle`, so only the
+        // value the vectors hold afterwards is observable; `null` is an absent attribute.
+        for (const vector of ACTION_ROW_SUBTITLE_VECTORS) {
+            await it(`${vector.name} — ${vector.rule}`, () => {
+                const { el: row, host } = mount<AdwActionRow>('adw-action-row');
+                for (const step of vector.steps) {
+                    if (step.write === null) row.removeAttribute('subtitle');
+                    else row.setAttribute('subtitle', step.write);
+                    const label = row.querySelector('.adw-row-subtitle') as HTMLElement;
+                    expect(label.textContent).toBe(step.subtitle);
+                    expect(label.hidden).toBe(step.subtitle === '');
+                }
+                host.remove();
+            });
+        }
+    });
+
     await describe('<adw-action-row> activatable-widget (libadwaita conformance vectors)', async () => {
         for (const vector of ACTION_ROW_ACTIVATION_VECTORS) {
             await it(`${vector.name} — ${vector.rule}`, async () => {

package/src/adw-row-state.spec.ts

@@ -13,15 +13,21 @@ import {
     ADJUSTMENT_AUTHORED_VECTORS,
     ADJUSTMENT_PARSE_VECTORS,
     COMBO_CHOOSER_VECTORS,
+    COMBO_ITEMS_CHANGED_VECTORS,
     COMBO_SELECTION_VECTORS,
+    EXPANDER_ROW_CONSTRUCT_VECTORS,
+    EXPANDER_ROW_INITIAL,
+    EXPANDER_ROW_VECTORS,
     LIST_ITEMS_CHANGED_VECTORS,
     LIST_MODEL_OWNERSHIP_VECTORS,
     LIST_NORMALIZE_VECTORS,
     LIST_PARSE_VECTORS,
-    LIST_SELECTION_CLAMP_VECTORS,
+    applyListMutation,
     applyListReadback,
+    listModelForInput,
 } from '@gjsify/adwaita-core/conformance';
 import type { ComboSelectionStep } from '@gjsify/adwaita-core/conformance';
+import { GjsifyOptionList } from '@gjsify/adwaita-core';
 
 import type { AdwComboRow } from './elements/adw-combo-row.js';
 import type { AdwExpanderRow } from './elements/adw-expander-row.js';
@@ -51,17 +57,24 @@ function record(el: HTMLElement, event: string): { details: unknown[]; stop: ()
  *
  * The row can drive the table at all only because the model and the select-by-value are
  * now published; the conformance header names that as the condition for it inheriting
- * these rows. It drives EVERY row, including `an index past the end`, which
- * `<gtk-drop-down>` carves out: the row keeps `ComboState`'s permissive answer where the
- * drop-down's published `selected` contract rejects the set, and `ComboState.hasIndex`'s
- * doc is where that split is stated. So the carve-out is now visible from both sides.
+ * these rows. It drives EVERY row with no carve-out — `an index past the end` used to be
+ * the one the two browser selectors answered differently and ADR 0122 measured it instead,
+ * so the permissive half this element carried is gone.
+ *
+ * Every `setModel` builds a FRESH list, which is what makes `setModelAgain` — assigning the
+ * identity the row already holds — a distinct step rather than a repeat of the one above it.
  */
 function applyComboStep(row: AdwComboRow, step: ComboSelectionStep): void {
     const select = row.querySelector('select') as HTMLSelectElement;
     switch (step.op) {
         case 'setModel':
-            row.model = step.model;
+            row.model = GjsifyOptionList.new([...step.model]);
+            return;
+        case 'setModelAgain': {
+            const held = row.model;
+            row.model = held;
             return;
+        }
         case 'setSelectedIndex':
             row.selected = step.index;
             return;
@@ -155,7 +168,7 @@ export const AdwRowStateTest = async () => {
 
             // Through the PUBLISHED path a consumer has — the same `model` property
             // `<gtk-drop-down>` publishes, not a reach into the composed state.
-            row.model = ['One', 'Two'];
+            row.model = GjsifyOptionList.new(['One', 'Two']);
             expect(select.disabled).toBe(false);
             expect(row.dataset.presentsChooser).toBe('true');
 
@@ -177,10 +190,10 @@ export const AdwRowStateTest = async () => {
             const value = row.querySelector('.adw-row-value') as HTMLSpanElement;
             expect(select.options.length).toBe(2);
 
-            // The PROPERTY, with the plain-string vocabulary both selectors accept.
-            row.model = ['Cyan', 'Magenta', 'Yellow'];
+            // The PROPERTY, with the plain-string vocabulary `GjsifyOptionList` accepts.
+            row.model = GjsifyOptionList.new(['Cyan', 'Magenta', 'Yellow']);
             expect([...select.options].map((o) => o.textContent).join('|')).toBe('Cyan|Magenta|Yellow');
-            expect(row.model.map((o) => o.label).join('|')).toBe('Cyan|Magenta|Yellow');
+            expect(row.options.map((o) => o.label).join('|')).toBe('Cyan|Magenta|Yellow');
             // The model was replaced under an index the new one still has, so autoselect
             // keeps 0 and the inline label has to follow the NEW option at that index.
             expect(value.textContent).toBe('Cyan');
@@ -205,12 +218,12 @@ export const AdwRowStateTest = async () => {
             );
             const select = row.querySelector('select') as HTMLSelectElement;
 
-            row.model = [
+            row.model = GjsifyOptionList.new([
                 { value: 'r', label: 'Red' },
                 { value: 'g', label: 'Green' },
-            ];
+            ]);
             expect([...select.options].map((o) => o.textContent).join('|')).toBe('Red|Green');
-            expect(row.model.map((o) => o.value).join('|')).toBe('r|g');
+            expect(row.options.map((o) => o.value).join('|')).toBe('r|g');
 
             // And selection by VALUE, the drop-down's other published setter.
             row.selectedValue = 'g';
@@ -223,42 +236,50 @@ export const AdwRowStateTest = async () => {
         // The row publishes the drop-down's property set apart from `enableSearch` and
         // `active`, which are that element's popover chrome. `selectedItem` is NOT chrome —
         // it is `Adw.ComboRow:selected-item` — so it is here, read-only as the GObject
-        // property is, and `null` rather than a blank descriptor when nothing is addressed.
-        await it('reads the selected descriptor back, and null when nothing is addressed', async () => {
+        // property is, and `null` rather than a blank item when nothing is addressed.
+        //
+        // THE MODEL'S OWN ITEM, by identity (ADR 0122 § 4): `row.selectedItem ===
+        // model.get_item(row.selected)`, which is the comparison a `selected-item` consumer
+        // writes and the one a normalised descriptor would have failed.
+        await it('reads the selected item back by identity, and null when nothing is addressed', async () => {
             const { el: row, host } = parse<AdwComboRow>(
                 `<adw-combo-row title="Pick"></adw-combo-row>`,
                 'adw-combo-row',
             );
 
+            // No model at all — `null` and not an item of an empty list.
+            expect(row.model).toBeNull();
             expect(row.selectedItem).toBeNull();
 
-            row.model = [
+            const model = GjsifyOptionList.new([
                 { value: 'r', label: 'Red' },
                 { value: 'g', label: 'Green' },
-            ];
-            expect(row.selectedItem?.value).toBe('r');
+            ]);
+            row.model = model;
+            expect(row.model === model).toBe(true);
+            expect(row.selectedItem === model.get_item(0)).toBe(true);
             row.selected = 1;
-            expect(row.selectedItem?.label).toBe('Green');
+            expect(row.selectedItem === model.get_item(1)).toBe(true);
 
-            // The one row of the shared contract the two selectors answer differently: an
-            // index past the end is ACCEPTED here (`ComboState.setSelectedIndex` mirrors a
-            // guint property) where `<gtk-drop-down>` rejects the set. So the index moves,
-            // and everything read out of the model reads empty.
+            // An index past the end is IGNORED, as measured in libadwaita — the selection
+            // stays where it was, and nothing reads empty. This element used to ACCEPT the
+            // set and read back blank, the one row of the shared table the two browser
+            // selectors answered differently; the permissive half was ours, not GTK's.
             row.selected = 9;
-            expect(row.selected).toBe(9);
-            expect(row.selectedItem).toBeNull();
-            expect(row.selectedValue).toBe('');
-            expect((row.querySelector('.adw-row-value') as HTMLSpanElement).textContent).toBe('');
+            expect(row.selected).toBe(1);
+            expect(row.selectedValue).toBe('g');
+            expect((row.querySelector('.adw-row-value') as HTMLSpanElement).textContent).toBe('Green');
 
             host.remove();
         });
     });
 
-    // The portable list model (ADR 0046), driven through this row's own `model` door.
+    // The portable list model (ADR 0046), driven through this row's own `model` doors — the
+    // property for a real model, the attribute for markup.
     //
     // The ITEMS-CHANGED rows are the ones that could not be asserted anywhere else: they
-    // compare `<option>` node IDENTITY across a replacement, which is the difference
-    // between splicing the model and rebuilding it — a difference no assertion about the
+    // compare `<option>` node IDENTITY across a markup update, which is the difference
+    // between splicing the list and rebuilding it — a difference no assertion about the
     // model, the labels or the selection can see. Before the splice landed, every row with
     // a non-zero `survivors` scored 0.
     await describe('adw-combo-row list model (portable list-model vectors)', async () => {
@@ -268,8 +289,10 @@ export const AdwRowStateTest = async () => {
                     `<adw-combo-row title="Pick"></adw-combo-row>`,
                     'adw-combo-row',
                 );
-                row.model = vector.input;
-                expect(row.model).toStrictEqual([...vector.model]);
+                // `listModelForInput` is the table's own answer to which door a row reaches
+                // through now that `model` takes no array (ADR 0122 § 4).
+                row.model = listModelForInput(vector.input);
+                expect(row.options).toStrictEqual([...vector.model]);
                 const select = row.querySelector('select') as HTMLSelectElement;
                 expect([...select.options].map((option) => option.textContent)).toStrictEqual(
                     vector.model.map((item) => item.label),
@@ -287,7 +310,7 @@ export const AdwRowStateTest = async () => {
                 // Set AFTER connect, so the attribute reaches the callback rather than the
                 // seeding path: a total parser has to be total on the live door too.
                 row.setAttribute('model', vector.attribute);
-                expect(row.model).toStrictEqual([...vector.model]);
+                expect(row.options).toStrictEqual([...vector.model]);
                 host.remove();
             });
         }
@@ -299,10 +322,16 @@ export const AdwRowStateTest = async () => {
                     'adw-combo-row',
                 );
                 const select = row.querySelector('select') as HTMLSelectElement;
-                row.model = vector.previous;
+                // Driven through the MARKUP door, which is the one that still computes a
+                // splice: the attribute reconciles the element's own authored list (ADR 0122
+                // amendment A4), keeping its identity, so the survivors these rows count are
+                // the `<option>` nodes a minimal splice left alone. A `model` PROPERTY write
+                // cannot answer them any more — a different list is a replacement, and a
+                // replacement carries nothing over by definition.
+                row.setAttribute('model', JSON.stringify(vector.previous));
                 const before = [...select.options];
 
-                row.model = vector.next;
+                row.setAttribute('model', JSON.stringify(vector.next));
 
                 const after = [...select.options];
                 expect(after.map((option) => option.textContent)).toStrictEqual(vector.next.map((item) => item.label));
@@ -311,10 +340,10 @@ export const AdwRowStateTest = async () => {
             });
         }
 
-        // WHO OWNS the array `model` hands back. The DOM is what makes these rows worth
-        // driving at the element: without the copy the MODEL still reads correctly on the
-        // mutate-then-assign rows — it is `_options` itself that was mutated — and only the
-        // `<option>` list shows that no splice was ever emitted.
+        // WHO OWNS the options on either side of the model, and what the model's own API
+        // moves. The DOM is what makes these rows worth driving at the element: on the
+        // caller-side rows the descriptors still read correctly from the model itself, and
+        // only the `<option>` list shows whether a splice was emitted for them.
         for (const vector of LIST_MODEL_OWNERSHIP_VECTORS) {
             await it(`ownership — ${vector.rule}`, async () => {
                 const { el: row, host } = parse<AdwComboRow>(
@@ -323,39 +352,23 @@ export const AdwRowStateTest = async () => {
                 );
                 const select = row.querySelector('select') as HTMLSelectElement;
                 const input = vector.initial.map((item) => ({ ...item }));
-                row.model = input;
+                const list = GjsifyOptionList.new(input);
+                row.model = list;
                 const before = [...select.options];
 
-                const mutated = applyListReadback(vector.source === 'input' ? input : row.model, vector.op);
-                if (vector.assign) row.model = mutated;
+                if (vector.source === 'model') applyListMutation(list, vector.op);
+                else applyListReadback(vector.source === 'input' ? input : row.options, vector.op);
 
-                expect(row.model).toStrictEqual([...vector.model]);
+                expect(row.options).toStrictEqual([...vector.model]);
+                // None of these ops is a replacement, so the element must still be pointing
+                // at the list it was handed.
+                expect(row.model).toBe(list);
                 const after = [...select.options];
                 expect(after.map((option) => option.textContent)).toStrictEqual(vector.model.map((item) => item.label));
                 expect(before.filter((option) => after.includes(option)).length).toBe(vector.survivors);
                 host.remove();
             });
         }
-
-        for (const vector of LIST_SELECTION_CLAMP_VECTORS) {
-            await it(`autoselect — ${vector.rule}`, async () => {
-                const { el: row, host } = parse<AdwComboRow>(
-                    `<adw-combo-row title="Pick"></adw-combo-row>`,
-                    'adw-combo-row',
-                );
-                // Seed a model long enough to hold the starting index, then replace it with
-                // one of the vector's length. NARROWER THAN THE VECTOR ON ONE ROW, and it
-                // says so: this element cannot HOLD a non-finite index — `setSelectedIndex`
-                // folds it to 0 before the clamp is reached — so that row asserts the same
-                // outcome by a different route here, and the non-finite input itself is
-                // driven in the core suite.
-                row.model = Array.from({ length: 8 }, (_, i) => `item ${i}`);
-                row.setAttribute('selected', String(vector.selected));
-                row.model = Array.from({ length: vector.length }, (_, i) => `next ${i}`);
-                expect(row.selected).toBe(vector.result);
-                host.remove();
-            });
-        }
     });
 
     // The SAME table `<gtk-drop-down>` and the NativeScript renderer are held to
@@ -394,6 +407,53 @@ export const AdwRowStateTest = async () => {
         }
     });
 
+    // The model MOVING under a live row — the axis that only exists since `model` holds a
+    // real `Gio.ListModel` (ADR 0122 § 6). Nothing re-assigns `model` here: the list is
+    // spliced through its own API and the row has to follow, which is what separates this
+    // from every replacement row above it.
+    //
+    // What a DOM surface can show is the OUTCOME — `selected`, `selectedValue`, the inline
+    // label and the rebuilt `<option>` list — plus the silence: a model moving underneath is
+    // not a user pick, so `notify::selected` must not fire. The vectors' `notified` column is
+    // the GObject half this element has no spelling for and the core suite asserts alone.
+    await describe('adw-combo-row items-changed on the held model (GtkSingleSelection)', async () => {
+        for (const vector of COMBO_ITEMS_CHANGED_VECTORS) {
+            await it(`${vector.name} — ${vector.rule}`, async () => {
+                const { el: row, host } = parse<AdwComboRow>(
+                    `<adw-combo-row title="Pick"></adw-combo-row>`,
+                    'adw-combo-row',
+                );
+                const select = row.querySelector('select') as HTMLSelectElement;
+                const value = row.querySelector('.adw-row-value') as HTMLSpanElement;
+
+                const list = GjsifyOptionList.new([...vector.initial]);
+                row.model = list;
+                if (vector.selected >= 0) row.selected = vector.selected;
+                expect(row.selected, 'the row set up the selection it says it did').toBe(vector.selected);
+
+                const events = record(row, 'notify::selected');
+                list.splice(vector.splice.position, vector.splice.removed, [...vector.splice.added]);
+
+                const expected = [...vector.initial];
+                expected.splice(vector.splice.position, vector.splice.removed, ...vector.splice.added);
+
+                expect(row.selected).toBe(vector.result);
+                expect(row.selectedValue).toBe(vector.value);
+                expect(value.textContent).toBe(expected[vector.result]?.label ?? '');
+                // The drawn list follows the MODEL: the row was never re-assigned, so a
+                // `<select>` still showing the old options is exactly the bug the
+                // `items-changed` channel exists to prevent.
+                expect([...select.options].map((option) => option.textContent)).toStrictEqual(
+                    expected.map((option) => option.label),
+                );
+                expect(events.details).toStrictEqual([]);
+
+                events.stop();
+                host.remove();
+            });
+        }
+    });
+
     await describe('adw-spin-row (SpinState)', async () => {
         // THE SHARED TABLES, driven through the ELEMENT and its markup door — the same rows
         // the core suite and the NativeScript suite assert, so a range authored in one
@@ -722,6 +782,83 @@ export const AdwRowStateTest = async () => {
             host.remove();
         });
 
+        for (const vector of EXPANDER_ROW_VECTORS) {
+            await it(`holds ${vector.name} (shared conformance vectors)`, async () => {
+                const { el: row, host } = parse<AdwExpanderRow>(
+                    '<adw-expander-row title="More"><adw-action-row title="Nested"></adw-action-row></adw-expander-row>',
+                    'adw-expander-row',
+                );
+                expect(row.expanded).toBe(EXPANDER_ROW_INITIAL.expanded);
+                expect(row.enableExpansion).toBe(EXPANDER_ROW_INITIAL.enableExpansion);
+                for (const step of vector.steps) {
+                    if (step.op === 'expanded') row.expanded = step.value;
+                    else row.enableExpansion = step.value;
+                    // A DOM element publishes only the user's notifications, so `notified` is
+                    // not observable here — the held values and what they reflect to are.
+                    expect(row.expanded).toBe(step.expanded);
+                    expect(row.enableExpansion).toBe(step.enableExpansion);
+                    expect(row.hasAttribute('expanded')).toBe(step.expanded);
+                    expect(row.classList.contains('expanded')).toBe(step.expanded);
+                }
+                host.remove();
+            });
+        }
+
+        for (const vector of EXPANDER_ROW_CONSTRUCT_VECTORS) {
+            await it(`parses expanded=${vector.expanded}, enable-expansion=${vector.enableExpansion} — ${vector.rule}`, async () => {
+                const enable = `enable-expansion="${vector.enableExpansion}"`;
+                const expanded = vector.expanded ? 'expanded' : '';
+                // Both attribute orders: the parser delivers them in source order.
+                for (const attributes of [`${enable} ${expanded}`, `${expanded} ${enable}`]) {
+                    const { el: row, host } = parse<AdwExpanderRow>(
+                        `<adw-expander-row title="x" ${attributes}></adw-expander-row>`,
+                        'adw-expander-row',
+                    );
+                    expect(row.enableExpansion).toBe(vector.enableExpansion);
+                    expect(row.expanded).toBe(vector.resultExpanded);
+                    expect(row.hasAttribute('expanded')).toBe(vector.resultExpanded);
+                    host.remove();
+                }
+            });
+        }
+
+        await it('does not open on a header click while expansion is disabled', async () => {
+            const { el: row, host } = parse<AdwExpanderRow>(
+                '<adw-expander-row title="More" enable-expansion="false"></adw-expander-row>',
+                'adw-expander-row',
+            );
+            const header = row.querySelector('.adw-expander-row-header') as HTMLDivElement;
+            const events = record(row, 'notify::expanded');
+            header.click();
+            expect(row.expanded).toBe(false);
+            expect(events.details.length).toBe(0);
+            events.stop();
+            host.remove();
+        });
+
+        await it('the enable switch publishes expanded BEFORE enable-expansion, as libadwaita emits them', async () => {
+            const { el: row, host } = parse<AdwExpanderRow>(
+                '<adw-expander-row title="More" show-enable-switch enable-expansion="false"></adw-expander-row>',
+                'adw-expander-row',
+            );
+            const seen: string[] = [];
+            row.addEventListener('notify::expanded', () => seen.push('expanded'));
+            row.addEventListener('notify::enable-expansion', () => seen.push('enable-expansion'));
+            const toggle = row.querySelector('.adw-expander-row-enable-switch') as HTMLElement & { active: boolean };
+
+            toggle.active = true;
+            expect(seen.join()).toBe('expanded,enable-expansion');
+            expect(row.expanded).toBe(true);
+            expect(row.hasAttribute('expanded')).toBe(true);
+
+            seen.length = 0;
+            toggle.active = false;
+            expect(seen.join()).toBe('expanded,enable-expansion');
+            expect(row.expanded).toBe(false);
+            expect(row.hasAttribute('expanded')).toBe(false);
+            host.remove();
+        });
+
         await it('adopts a declarative expanded attribute', async () => {
             const { el: row, host } = parse<AdwExpanderRow>(
                 '<adw-expander-row title="Open" expanded></adw-expander-row>',

package/src/construct-vectors.spec.ts

@@ -9,6 +9,7 @@ import {
     type ConstructVector,
     type SharedTreeNode,
 } from '@gjsify/adwaita-core/conformance';
+import { GjsifyOptionList } from '@gjsify/adwaita-core';
 import { describe, expect, it } from '@gjsify/unit';
 
 import type { AdwAlertDialog } from './elements/adw-alert-dialog.js';
@@ -280,7 +281,7 @@ export const AdwConstructVectorsTest = async () => {
         });
         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[];
+                model: unknown;
                 selected: number;
             };
             const seen: string[] = [];
@@ -288,7 +289,8 @@ export const AdwConstructVectorsTest = async () => {
                 dropDown.addEventListener(name, () => seen.push(name));
             document.body.append(dropDown);
             try {
-                dropDown.model = ['a', 'b'];
+                // `model` takes a real list model, never an array (ADR 0122 § 4).
+                dropDown.model = GjsifyOptionList.new(['a', 'b']);
                 seen.length = 0;
                 dropDown.selected = 1;
                 dropDown.selected = 1;