@gjsify/adwaita-web 0.47.0 → 0.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-web",
-    "version": "0.47.0",
+    "version": "0.48.0",
     "description": "Adwaita/Libadwaita web components for browser targets",
     "type": "module",
     "main": "./src/index.ts",
@@ -45,14 +45,14 @@
         "@codemirror/language": "^6.12.4",
         "@codemirror/state": "^6.7.0",
         "@codemirror/view": "^6.43.4",
-        "@gjsify/adwaita-core": "^0.47.0",
-        "@gjsify/adwaita-fonts": "^0.47.0",
-        "@gjsify/adwaita-icons": "^0.47.0",
+        "@gjsify/adwaita-core": "^0.48.0",
+        "@gjsify/adwaita-fonts": "^0.48.0",
+        "@gjsify/adwaita-icons": "^0.48.0",
         "@lezer/highlight": "^1.2.3"
     },
     "devDependencies": {
-        "@gjsify/cli": "^0.47.0",
-        "@gjsify/unit": "^0.47.0",
+        "@gjsify/cli": "^0.48.0",
+        "@gjsify/unit": "^0.48.0",
         "sass": "^1.101.0",
         "typescript": "^6.0.3"
     },

package/scss/_popover.scss

@@ -188,3 +188,102 @@ gtk-popover {
   font-weight: 700;
   opacity: var(--dim-opacity);
 }
+
+// --- The menu INSIDE the popover (ADR 0042) -----------------------------------
+//
+// One rule set for both menu-bearing elements, because the split button's dropdown
+// half IS a GtkMenuButton and its popup is the same `popover.menu`. SIX nodes, none of
+// which has a counterpart in the port's previous menus — they drew a flat list of labels
+// and nothing else: the separator, the section title, the accelerator, the check/radio
+// mark (plus the two nested `[aria-checked='true']` rules that draw it), the submenu
+// chevron and the back row.
+
+// `popover.menu separator { margin: 6px 0 }` (_menus.scss:68-70). GTK's separator is
+// a real widget with its own background; in the DOM the hairline is the border, so
+// the 6px is split above and below it rather than being a margin on a 1px box.
+.adw-popover-separator {
+  height: 1px;
+  margin: 6px 0;
+  background-color: var(--separator-color, rgba(0, 0, 0, 0.15));
+}
+
+// A section's heading. `.adw-popover-title` already carries the weight and the dim;
+// this is the tighter top inset a heading needs when it follows a separator rather
+// than opening the menu.
+.adw-popover-section-title {
+  padding-top: 2px;
+}
+
+// `popover.menu accelerator { color: dim; margin-left: $menu_padding }`
+// (_menus.scss:78-82). `margin-inline-start` rather than `margin-left`, so it follows
+// the writing direction the way GTK's `:dir(ltr)`/`:dir(rtl)` pair does — the two
+// rules are one logical property here.
+.adw-popover-item-accel {
+  margin-inline-start: auto;
+  padding-inline-start: 12px;
+  opacity: var(--dim-opacity);
+  font-size: 0.9em;
+}
+
+// `popover.menu check, radio { min-width: 14px; min-height: 14px; padding: 2px }`
+// (_menus.scss:85-90). The slot is reserved whether or not the row is checked, so the
+// labels of a group line up — the reason it is a node and not a `::before`.
+//
+// A DELIBERATE SUBSTITUTION, the same kind `<adw-split-button>`'s pan-up arrow already
+// documents: GTK draws the tick with `object-select-symbolic`, and this port's icon set
+// ships no checkmark (`_icons.generated.scss` has 42 glyphs and none of them is one). A
+// two-sided rotated border is the tick, so nothing here depends on an asset that would
+// silently render as `image-missing`.
+.adw-popover-item-check {
+  position: relative;
+  box-sizing: border-box;
+  flex: none;
+  width: 14px;
+  height: 14px;
+  padding: 2px;
+
+  // Drawn off `aria-checked`, never off a class of its own: the accessible state and
+  // the visible state are then the same fact rather than two that can disagree.
+  [aria-checked='true'] > &::after {
+    content: '';
+    position: absolute;
+    inset-inline-start: 4px;
+    top: 1px;
+    width: 4px;
+    height: 8px;
+    border: solid currentcolor;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
+
+  // A radio's mark is a filled dot, so the tick becomes a disc.
+  &.radio {
+    border-radius: 9999px;
+  }
+
+  [aria-checked='true'] > &.radio::after {
+    inset-inline-start: 4px;
+    top: 4px;
+    width: 6px;
+    height: 6px;
+    border: none;
+    border-radius: 9999px;
+    background-color: currentcolor;
+    transform: none;
+  }
+}
+
+// The chevron on a row that opens a submenu.
+.adw-popover-item-arrow {
+  margin-inline-start: auto;
+  width: 16px;
+  height: 16px;
+  flex: none;
+  opacity: var(--dim-opacity);
+}
+
+// The row that leaves a submenu. It carries the parent's own label, so it reads as
+// the heading of the page it returns to rather than as a bare "Back".
+.adw-popover-back {
+  font-weight: 700;
+}

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

@@ -9,7 +9,19 @@
 // display silently.
 import { describe, expect, it } from '@gjsify/unit';
 
-import { COMBO_CHOOSER_VECTORS } from '@gjsify/adwaita-core/conformance';
+import {
+    ADJUSTMENT_AUTHORED_VECTORS,
+    ADJUSTMENT_PARSE_VECTORS,
+    COMBO_CHOOSER_VECTORS,
+    COMBO_SELECTION_VECTORS,
+    LIST_ITEMS_CHANGED_VECTORS,
+    LIST_MODEL_OWNERSHIP_VECTORS,
+    LIST_NORMALIZE_VECTORS,
+    LIST_PARSE_VECTORS,
+    LIST_SELECTION_CLAMP_VECTORS,
+    applyListReadback,
+} from '@gjsify/adwaita-core/conformance';
+import type { ComboSelectionStep } from '@gjsify/adwaita-core/conformance';
 
 import type { AdwComboRow } from './elements/adw-combo-row.js';
 import type { AdwExpanderRow } from './elements/adw-expander-row.js';
@@ -32,11 +44,45 @@ function record(el: HTMLElement, event: string): { details: unknown[]; stop: ()
     return { details, stop: () => el.removeEventListener(event, listener) };
 }
 
+/**
+ * Replay one `COMBO_SELECTION_VECTORS` step against a live `<adw-combo-row>` — the
+ * property sets a consumer has for the programmatic ops, a real `<select>` pick for the
+ * interactive one.
+ *
+ * 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.
+ */
+function applyComboStep(row: AdwComboRow, step: ComboSelectionStep): void {
+    const select = row.querySelector('select') as HTMLSelectElement;
+    switch (step.op) {
+        case 'setModel':
+            row.model = step.model;
+            return;
+        case 'setSelectedIndex':
+            row.selected = step.index;
+            return;
+        case 'setSelectedValue':
+            row.selectedValue = step.value;
+            return;
+        case 'select':
+            // A dismissed chooser: the native dropdown closes with nothing picked, which
+            // dispatches no `change` at all — there is no gesture to replay.
+            if (step.index < 0) return;
+            select.selectedIndex = step.index;
+            select.dispatchEvent(new Event('change'));
+            return;
+    }
+}
+
 export const AdwRowStateTest = async () => {
     await describe('adw-combo-row (ComboState)', async () => {
         await it('renders the selected label and notifies only on a user pick', async () => {
             const { el: row, host } = parse<AdwComboRow>(
-                `<adw-combo-row title="Colour" items='["Red","Green","Blue"]' selected="1"></adw-combo-row>`,
+                `<adw-combo-row title="Colour" model='["Red","Green","Blue"]' selected="1"></adw-combo-row>`,
                 'adw-combo-row',
             );
             const select = row.querySelector('select') as HTMLSelectElement;
@@ -68,7 +114,7 @@ export const AdwRowStateTest = async () => {
 
         await it('renders an empty value for an out-of-range selection', async () => {
             const { el: row, host } = parse<AdwComboRow>(
-                `<adw-combo-row title="Empty" items='[]' selected="3"></adw-combo-row>`,
+                `<adw-combo-row title="Empty" model='[]' selected="3"></adw-combo-row>`,
                 'adw-combo-row',
             );
             expect((row.querySelector('.adw-row-value') as HTMLSpanElement).textContent).toBe('');
@@ -79,7 +125,7 @@ export const AdwRowStateTest = async () => {
             await it(`${count} option(s) → ${presentsChooser ? 'a chooser' : 'not a chooser'}: ${rule}`, async () => {
                 const items = JSON.stringify(Array.from({ length: count }, (_, i) => `Item ${i}`));
                 const { el: row, host } = parse<AdwComboRow>(
-                    `<adw-combo-row title="Pick" items='${items}'></adw-combo-row>`,
+                    `<adw-combo-row title="Pick" model='${items}'></adw-combo-row>`,
                     'adw-combo-row',
                 );
                 const value = row.querySelector('.adw-row-value') as HTMLSpanElement;
@@ -101,31 +147,302 @@ export const AdwRowStateTest = async () => {
 
         await it('gains its arrow back when the model grows past one item', async () => {
             const { el: row, host } = parse<AdwComboRow>(
-                `<adw-combo-row title="Pick" items='["Only"]'></adw-combo-row>`,
+                `<adw-combo-row title="Pick" model='["Only"]'></adw-combo-row>`,
                 'adw-combo-row',
             );
             const select = row.querySelector('select') as HTMLSelectElement;
             expect(select.disabled).toBe(true);
 
-            // `items` is read at connect only, so the model is replaced through the state
-            // the element composes — the same path a consumer has.
-            (
-                row as unknown as { _state: { setOptions(o: { label: string; value: string }[]): void } }
-            )._state.setOptions([
-                { label: 'One', value: 'a' },
-                { label: 'Two', value: 'b' },
-            ]);
+            // 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'];
             expect(select.disabled).toBe(false);
             expect(row.dataset.presentsChooser).toBe('true');
 
             host.remove();
         });
+
+        // The model is INPUT, so replacing it after connect has to reach the DOM — the
+        // half `<gtk-drop-down>` has had all along and this row did not: it parsed its
+        // items once in `connectedCallback`, observed `['title','subtitle','selected']`,
+        // and published no accessor, so `row.items = […]` wrote an expando onto the
+        // element and `setAttribute('items', …)` reached no callback (#1525). Both doors
+        // are asserted because a consumer reaches for whichever its framework binds.
+        await it('re-renders the options when the model is replaced after connect', async () => {
+            const { el: row, host } = parse<AdwComboRow>(
+                `<adw-combo-row title="Colour" model='["Red","Green"]'></adw-combo-row>`,
+                'adw-combo-row',
+            );
+            const select = row.querySelector('select') as HTMLSelectElement;
+            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'];
+            expect([...select.options].map((o) => o.textContent).join('|')).toBe('Cyan|Magenta|Yellow');
+            expect(row.model.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');
+
+            // The ATTRIBUTE, the spelling markup and every attribute-binding framework use.
+            row.setAttribute('model', '["Only"]');
+            expect([...select.options].map((o) => o.textContent).join('|')).toBe('Only');
+            expect(value.textContent).toBe('Only');
+            // …and the chooser rule re-runs off the replaced model.
+            expect(select.disabled).toBe(true);
+            expect(row.dataset.presentsChooser).toBe('false');
+
+            host.remove();
+        });
+
+        // One spelling on both selectors — `model`, `Adw.ComboRow`'s own property name
+        // (ADR 0046) — so a consumer moving a model between them renames nothing.
+        await it('accepts descriptor objects, and selection by value', async () => {
+            const { el: row, host } = parse<AdwComboRow>(
+                `<adw-combo-row title="Colour"></adw-combo-row>`,
+                'adw-combo-row',
+            );
+            const select = row.querySelector('select') as HTMLSelectElement;
+
+            row.model = [
+                { 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');
+
+            // And selection by VALUE, the drop-down's other published setter.
+            row.selectedValue = 'g';
+            expect(row.selected).toBe(1);
+            expect((row.querySelector('.adw-row-value') as HTMLSpanElement).textContent).toBe('Green');
+
+            host.remove();
+        });
+
+        // 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 () => {
+            const { el: row, host } = parse<AdwComboRow>(
+                `<adw-combo-row title="Pick"></adw-combo-row>`,
+                'adw-combo-row',
+            );
+
+            expect(row.selectedItem).toBeNull();
+
+            row.model = [
+                { value: 'r', label: 'Red' },
+                { value: 'g', label: 'Green' },
+            ];
+            expect(row.selectedItem?.value).toBe('r');
+            row.selected = 1;
+            expect(row.selectedItem?.label).toBe('Green');
+
+            // 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.
+            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('');
+
+            host.remove();
+        });
+    });
+
+    // The portable list model (ADR 0046), driven through this row's own `model` door.
+    //
+    // 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
+    // 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 () => {
+        for (const vector of LIST_NORMALIZE_VECTORS) {
+            await it(`normalize — ${vector.rule}`, async () => {
+                const { el: row, host } = parse<AdwComboRow>(
+                    `<adw-combo-row title="Pick"></adw-combo-row>`,
+                    'adw-combo-row',
+                );
+                row.model = vector.input;
+                expect(row.model).toStrictEqual([...vector.model]);
+                const select = row.querySelector('select') as HTMLSelectElement;
+                expect([...select.options].map((option) => option.textContent)).toStrictEqual(
+                    vector.model.map((item) => item.label),
+                );
+                host.remove();
+            });
+        }
+
+        for (const vector of LIST_PARSE_VECTORS) {
+            await it(`attribute — ${vector.rule}`, async () => {
+                const { el: row, host } = parse<AdwComboRow>(
+                    `<adw-combo-row title="Pick"></adw-combo-row>`,
+                    'adw-combo-row',
+                );
+                // 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]);
+                host.remove();
+            });
+        }
+
+        for (const vector of LIST_ITEMS_CHANGED_VECTORS) {
+            await it(`items-changed — ${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;
+                row.model = vector.previous;
+                const before = [...select.options];
+
+                row.model = vector.next;
+
+                const after = [...select.options];
+                expect(after.map((option) => option.textContent)).toStrictEqual(vector.next.map((item) => item.label));
+                expect(before.filter((option) => after.includes(option)).length).toBe(vector.survivors);
+                host.remove();
+            });
+        }
+
+        // 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.
+        for (const vector of LIST_MODEL_OWNERSHIP_VECTORS) {
+            await it(`ownership — ${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 input = vector.initial.map((item) => ({ ...item }));
+                row.model = input;
+                const before = [...select.options];
+
+                const mutated = applyListReadback(vector.source === 'input' ? input : row.model, vector.op);
+                if (vector.assign) row.model = mutated;
+
+                expect(row.model).toStrictEqual([...vector.model]);
+                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
+    // (`COMBO_SELECTION_VECTORS`), replayed through this row's own DOM and read back as
+    // what a user would see: the inline value label, `selected`/`selectedValue`, and the
+    // `notify::selected` stream. Two of the four step ops had no spelling here until the
+    // model and the select-by-value were published, which is what the conformance header
+    // names as the condition for this row inheriting the rows.
+    await describe('adw-combo-row selection (libadwaita conformance vectors)', async () => {
+        for (const vector of COMBO_SELECTION_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 value = row.querySelector('.adw-row-value') as HTMLSpanElement;
+                const events = record(row, 'notify::selected');
+
+                for (const step of vector.steps) applyComboStep(row, step);
+
+                expect(row.selected).toBe(vector.selected);
+                expect(row.selectedValue).toBe(vector.value);
+                expect(value.textContent).toBe(vector.label);
+                // `notify::selected` is this row's DOM spelling of the `interactive`
+                // flag: a user pick emits, a programmatic set repaints silently. So the
+                // interactive frames of the state's stream ARE the events a listener sees.
+                expect(events.details).toStrictEqual(
+                    vector.emitted
+                        .filter((change) => change.interactive)
+                        .map((change) => ({ selected: change.selected })),
+                );
+
+                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
+        // dialect means the same thing in all three (ADR 0047).
+        for (const vector of ADJUSTMENT_AUTHORED_VECTORS) {
+            await it(`authored: ${vector.rule}`, () => {
+                const { el: row, host } = parse<AdwSpinRow>(
+                    `<adw-spin-row title="Amount" adjustment='${JSON.stringify(vector.input)}'></adw-spin-row>`,
+                    'adw-spin-row',
+                );
+                expect(row.adjustment).toStrictEqual({ ...vector.adjustment });
+                expect(row.value).toBe(vector.adjustment.value);
+                host.remove();
+            });
+        }
+
+        // The state the parse rows are written over: the defaults with a value of 7, so a
+        // door that answered with a WHOLE adjustment would take the value back to 0 — which
+        // is what this table's `{"upper":20}` row exists to catch.
+        const SEEDED = { value: 7, lower: 0, upper: 100, stepIncrement: 1, pageIncrement: 1, pageSize: 0 };
+
+        for (const vector of ADJUSTMENT_PARSE_VECTORS) {
+            await it(`attribute: ${vector.rule}`, () => {
+                // Seeded through the ATTRIBUTE and not left at the defaults, so the write
+                // below has something to overwrite: a row that starts where it ends cannot
+                // tell a door that read the vector from one that was never called.
+                const { el: row, host } = parse<AdwSpinRow>(
+                    `<adw-spin-row title="Amount" value="7" adjustment='{"upper":40}'></adw-spin-row>`,
+                    'adw-spin-row',
+                );
+                expect(row.adjustment).toStrictEqual({ ...SEEDED, upper: 40 });
+
+                // `null` is the ABSENT attribute, and removing one is how an element meets
+                // it: `attributeChangedCallback` fires with a null value, which the door has
+                // to answer as "nothing authored" rather than as a whole adjustment. The
+                // element never sees that call if the test simply skips the write.
+                if (vector.raw === null) row.removeAttribute('adjustment');
+                else row.setAttribute('adjustment', vector.raw);
+
+                // The authored fields over what the row already held, and nothing else —
+                // `upper: 40` survives every row that does not name an upper.
+                expect(row.adjustment).toStrictEqual({ ...SEEDED, upper: 40, ...vector.input });
+                host.remove();
+            });
+        }
+
         await it('steps at step precision and notifies only on a stepper press', async () => {
             const { el: row, host } = parse<AdwSpinRow>(
-                '<adw-spin-row title="Amount" min="0" max="10" step="0.1" value="0"></adw-spin-row>',
+                `<adw-spin-row title="Amount" value="0" adjustment='{"lower":0,"upper":10,"stepIncrement":0.1}'></adw-spin-row>`,
                 'adw-spin-row',
             );
             const input = row.querySelector('input') as HTMLInputElement;
@@ -154,7 +471,7 @@ export const AdwRowStateTest = async () => {
 
         await it('clamps to the lower bound and re-clamps when a bound moves', async () => {
             const { el: row, host } = parse<AdwSpinRow>(
-                '<adw-spin-row title="Amount" min="2" max="8" step="1" value="5"></adw-spin-row>',
+                `<adw-spin-row title="Amount" value="5" adjustment='{"lower":2,"upper":8}'></adw-spin-row>`,
                 'adw-spin-row',
             );
             const input = row.querySelector('input') as HTMLInputElement;
@@ -162,9 +479,10 @@ export const AdwRowStateTest = async () => {
             row.value = -4;
             expect(row.value).toBe(2);
 
-            // Moving the upper bound below the value pulls the value into range.
+            // Moving the upper bound below the value pulls the value into range — and the
+            // attribute names ONLY the bound, so the value it does not name is not reset.
             row.value = 8;
-            row.setAttribute('max', '6');
+            row.setAttribute('adjustment', '{"upper":6}');
             expect(row.value).toBe(6);
             expect(input.value).toBe('6');