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

package/lib/types/elements/adw-combo-row.d.ts

@@ -1,4 +1,4 @@
-import type { AdwComboOption, AdwListModelInput } from '@gjsify/adwaita-core';
+import type { AdwComboOption, ComboWatchableModel } from '@gjsify/adwaita-core';
 import { TooltipElement } from '../widget-element.js';
 export declare class AdwComboRow extends TooltipElement {
     private _select;
@@ -9,19 +9,36 @@ export declare class AdwComboRow extends TooltipElement {
     private _subtitleEl;
     /** The headless options list + selectedIndex↔selectedValue state machine (ADR 0004). */
     private readonly _state;
+    /**
+     * The list the MARKUP doors fill — the `model` ATTRIBUTE is JSON text and a
+     * `<gtk-string-list slot="model">` child is strings, and a real `Gio.ListModel` has no
+     * spelling in either (ADR 0122 § 5). Held for the element's whole life so re-parsing the
+     * attribute splices the list the element already points at rather than replacing it, which
+     * would reset the selection.
+     */
+    private readonly _authored;
     private _initialized;
     static get observedAttributes(): string[];
-    /** The list model (`Adw.ComboRow:model`). Setting it splices the <select> and clamps the selection. */
-    get model(): AdwComboOption[];
-    set model(value: AdwListModelInput);
+    /**
+     * The list model (`Adw.ComboRow:model`) — the OBJECT that was assigned, by identity, as
+     * `row.model === model` is measured to hold in libadwaita (ADR 0122 § 4). The normalised
+     * descriptors are {@link options}. Assigning splices the `<select>` and re-runs autoselect.
+     */
+    get model(): ComboWatchableModel | null;
+    set model(value: ComboWatchableModel | string | null);
+    /** The held model's items as `{ value, label }` descriptors. */
+    get options(): AdwComboOption[];
     /** `adw_combo_row_set_model`. */
-    set_model(model: AdwListModelInput | null): void;
+    set_model(model: ComboWatchableModel | null): void;
+    /** `adw_combo_row_get_model`. */
+    get_model(): ComboWatchableModel | null;
     /**
-     * The selected index (Adw.ComboRow:selected). PERMISSIVE: an index past the end is
-     * accepted and reads back with an empty {@link selectedValue}, mirroring the `guint`
-     * property that takes any position — where `<gtk-drop-down>` rejects the same set, as
-     * its own docs promise. `ComboState.hasIndex` owns the bounds and records why the
-     * POLICY is each renderer's; `COMBO_SELECTION_VECTORS` drives both answers.
+     * The selected index (Adw.ComboRow:selected). An index past the end is IGNORED — the
+     * selection stays where it was, which is what libadwaita is measured to do (ADR 0122 § 4,
+     * `combo-probe2.js`) and what `<gtk-drop-down>` already did. This element used to ACCEPT
+     * such a set and read back an empty {@link selectedValue}, the one row of
+     * `COMBO_SELECTION_VECTORS` the two selectors answered differently; the permissive half
+     * was ours, not GTK's, and it is gone. `ComboState.hasIndex` owns the bounds.
      */
     get selected(): number;
     set selected(value: number);
@@ -38,13 +55,15 @@ export declare class AdwComboRow extends TooltipElement {
     get selectedValue(): string;
     set selectedValue(value: string);
     /**
-     * The selected option descriptor, or `null` (Adw.ComboRow:selected-item).
+     * The selected ITEM, or `null` (Adw.ComboRow:selected-item).
      *
-     * Read-only, as the GObject property is. `null` and not a blank descriptor: the
-     * sentinel and an index past the end both address no option, and inventing an empty
-     * one would make "nothing is selected" indistinguishable from an option with no text.
+     * Read-only, as the GObject property is, and the MODEL'S OWN object rather than a
+     * descriptor, so the identity comparison a `selected-item` consumer writes holds (ADR
+     * 0122 § 4). `null` and not a blank item: the sentinel and an index past the end both
+     * address no option, and inventing an empty one would make "nothing is selected"
+     * indistinguishable from an option with no text.
      */
-    get selectedItem(): AdwComboOption | null;
+    get selectedItem(): unknown;
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     /**

package/lib/types/elements/gtk-drop-down.d.ts

@@ -1,5 +1,5 @@
 import './gtk-popover.js';
-import type { AdwComboOption, AdwListModelInput } from '@gjsify/adwaita-core';
+import type { AdwComboOption, ComboWatchableModel } from '@gjsify/adwaita-core';
 import type { DispatchedSignals } from '../signals.js';
 import { WidgetElement } from '../widget-element.js';
 /**
@@ -19,13 +19,31 @@ export declare class GtkDropDown extends WidgetElement {
     private _itemButtons;
     /** The headless options list + selectedIndex↔selectedValue machine (ADR 0004). */
     private readonly _state;
+    /**
+     * The list the MARKUP doors fill — the `model` ATTRIBUTE is JSON text and a
+     * `<gtk-string-list slot="model">` child is strings, and a real `Gio.ListModel` has no
+     * spelling in either (ADR 0122 § 5). Held for the element's whole life so re-parsing the
+     * attribute splices the list the element already points at rather than replacing it, which
+     * would reset the selection.
+     */
+    private readonly _authored;
     private _initialized;
     private _typeAheadBuffer;
     private _typeAheadTimer;
     static get observedAttributes(): string[];
-    /** The list model (`Gtk.DropDown:model`). Setting it splices the popover and clamps the selection. */
-    get model(): GtkDropDownOption[];
-    set model(value: AdwListModelInput);
+    /**
+     * The list model (`Gtk.DropDown:model`) — the OBJECT that was assigned, by identity, as
+     * `dropdown.model === model` is measured to hold in GTK (ADR 0122 § 4). The normalised
+     * descriptors are {@link options}. Assigning splices the popover and re-runs autoselect.
+     */
+    get model(): ComboWatchableModel | null;
+    set model(value: ComboWatchableModel | string | null);
+    /** The held model's items as `{ value, label }` descriptors. */
+    get options(): AdwComboOption[];
+    /** `gtk_drop_down_set_model`. */
+    set_model(model: ComboWatchableModel | null): void;
+    /** `gtk_drop_down_get_model`. */
+    get_model(): ComboWatchableModel | null;
     /** The selected index. Out-of-range values are ignored (Gtk.DropDown:selected). */
     get selected(): number;
     set selected(value: number);
@@ -36,7 +54,15 @@ export declare class GtkDropDown extends WidgetElement {
     /** The selected option's value, or '' when empty (Gtk.DropDown:selected-item). */
     get selectedValue(): string;
     set selectedValue(value: string);
-    get selectedItem(): GtkDropDownOption | null;
+    /**
+     * The selected ITEM, or `null` (Gtk.DropDown:selected-item).
+     *
+     * The MODEL'S OWN object rather than a descriptor, so the identity comparison a
+     * `selected-item` consumer writes holds (ADR 0122 § 4).
+     */
+    get selectedItem(): unknown;
+    /** `gtk_drop_down_get_selected_item`. */
+    get_selected_item(): unknown;
     get enableSearch(): boolean;
     set enableSearch(value: boolean);
     get active(): boolean;

package/lib/types/namespace/gdk.d.ts

@@ -8,4 +8,4 @@ export declare const ContentProvider: Pick<typeof import("@gjsify/adwaita-core")
 export declare const ContentFormats: typeof import("@gjsify/adwaita-core").ContentFormats;
 export declare const AppLaunchContext: typeof import("@gjsify/adwaita-core").GdkAppLaunchContext;
 export declare const CURRENT_TIME = 0;
-export declare const KEY_space: 32, KEY_a: 97, KEY_d: 100, KEY_e: 101, KEY_q: 113, KEY_s: 115, KEY_w: 119, KEY_Return: 65293, KEY_Escape: 65307, KEY_Left: 65361, KEY_Up: 65362, KEY_Right: 65363, KEY_Down: 65364;
+export declare const KEY_space: 32, KEY_a: 97, KEY_d: 100, KEY_e: 101, KEY_q: 113, KEY_s: 115, KEY_w: 119, KEY_Return: 65293, KEY_Escape: 65307, KEY_Left: 65361, KEY_Up: 65362, KEY_Right: 65363, KEY_Down: 65364, KEY_Back: 269025062;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-web",
-    "version": "0.64.12-next.281",
+    "version": "0.64.12",
     "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.12",
+        "@gjsify/adwaita-fonts": "^0.64.12",
+        "@gjsify/adwaita-icons": "^0.64.12",
+        "@gjsify/gtksource-core": "^0.64.12",
         "@lezer/highlight": "^1.2.3"
     },
     "peerDependencies": {
-        "@gjsify/app-settings": "0.64.12-next.281"
+        "@gjsify/app-settings": "^0.64.12"
     },
     "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.12",
+        "@gjsify/blueprint": "^0.64.12",
+        "@gjsify/cli": "^0.64.12",
+        "@gjsify/unit": "^0.64.12",
+        "@gjsify/vite-plugin-blueprint": "^0.64.12",
         "sass": "^1.101.0",
         "typescript": "^6.0.3"
     },
@@ -114,6 +114,5 @@
     "bugs": {
         "url": "https://github.com/gjsify/gjsify/issues"
     },
-    "homepage": "https://github.com/gjsify/gjsify/tree/main/packages/web/adwaita-web#readme",
-    "gitHead": "c4d2e266c0d9849860b9828c14ebfe37b6d493b8"
+    "homepage": "https://github.com/gjsify/gjsify/tree/main/packages/web/adwaita-web#readme"
 }

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

@@ -13,15 +13,18 @@ import {
     ADJUSTMENT_AUTHORED_VECTORS,
     ADJUSTMENT_PARSE_VECTORS,
     COMBO_CHOOSER_VECTORS,
+    COMBO_ITEMS_CHANGED_VECTORS,
     COMBO_SELECTION_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 +54,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 +165,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 +187,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 +215,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 +233,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 +286,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 +307,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 +319,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 +337,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 +349,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 +404,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

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;