@gjsify/adwaita-web 0.31.0 → 0.33.0

package/src/adw-sidebar.spec.ts

@@ -0,0 +1,332 @@
+// DOM-level conformance tests for <adw-sidebar>, driven by the SAME vectors the
+// NativeScript renderer asserts against (`@gjsify/adwaita-core/conformance`).
+//
+// The two renderers used to carry independent selection logic, and it had
+// drifted apart AND away from libadwaita: `selected = 5` on a 3-item sidebar
+// gave "no selection" in GTK, `2` here (it clamped to the last row) and `0` on
+// NativeScript (it dropped the write). This element also keyed section headers
+// off the DECLARATION index, so an empty leading section drew a stray separator
+// and cost the next section its `.first` flush-to-top padding. Nothing failed,
+// because nothing compared them. This suite is that comparison.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { AdwSidebarItemSpec, AdwSidebarSectionSpec } from '@gjsify/adwaita-core';
+import {
+    SIDEBAR_ACTIVATION_VECTORS,
+    SIDEBAR_CLAMP_VECTORS,
+    SIDEBAR_FILTER_VECTORS,
+    SIDEBAR_ITEM_FLAG_VECTORS,
+    SIDEBAR_MODEL_VECTORS,
+    SIDEBAR_MODE_VECTORS,
+} from '@gjsify/adwaita-core/conformance';
+import type { AdwSidebar } from './elements/adw-sidebar.js';
+
+/**
+ * Mount a sidebar built from DECLARED children, the way an author writes it —
+ * the element consumes them at connect time, so they all have to exist before
+ * the host is appended.
+ */
+function mountSidebar(
+    sections: ReadonlyArray<AdwSidebarSectionSpec>,
+    attributes: { mode?: string; selected?: string } = {},
+): { sidebar: AdwSidebar; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+
+    const sidebar = document.createElement('adw-sidebar') as AdwSidebar;
+    if (attributes.mode !== undefined) sidebar.setAttribute('mode', attributes.mode);
+    if (attributes.selected !== undefined) sidebar.setAttribute('selected', attributes.selected);
+
+    for (const section of sections) {
+        const sectionEl = document.createElement('adw-sidebar-section');
+        if (section.title !== undefined) sectionEl.setAttribute('title', section.title);
+
+        for (const item of section.items) {
+            sectionEl.appendChild(createItem(item));
+        }
+        sidebar.appendChild(sectionEl);
+    }
+
+    host.appendChild(sidebar);
+    return { sidebar, host };
+}
+
+function createItem(item: AdwSidebarItemSpec): HTMLElement {
+    const el = document.createElement('adw-sidebar-item');
+    el.setAttribute('title', item.title);
+    if (item.subtitle !== undefined) el.setAttribute('subtitle', item.subtitle);
+    if (item.iconName !== undefined) el.setAttribute('icon-name', item.iconName);
+    if (item.enabled === false) el.setAttribute('disabled', '');
+    if (item.visible === false) el.setAttribute('hidden', '');
+    return el;
+}
+
+/** The rendered rows, in render order. */
+function rowsOf(sidebar: AdwSidebar): HTMLButtonElement[] {
+    return Array.from(sidebar.querySelectorAll('.adw-sidebar-item')) as HTMLButtonElement[];
+}
+
+/** The rendered headers, reduced to the three things the C source derives. */
+function headersOf(sidebar: AdwSidebar): { kind: string; title: string; first: boolean }[] {
+    return Array.from(sidebar.querySelectorAll('.adw-sidebar-section-header')).map((el) => ({
+        kind: el.classList.contains('has-title') ? 'title' : 'separator',
+        title: el.querySelector('.adw-sidebar-section-heading')?.textContent ?? '',
+        first: el.classList.contains('first'),
+    }));
+}
+
+/** A sidebar of `count` plain rows — the shape the clamp vectors are stated over. */
+function countedSections(count: number): AdwSidebarSectionSpec[] {
+    if (count === 0) return [];
+    return [{ items: Array.from({ length: count }, (_, i) => ({ title: `Item ${i}` })) }];
+}
+
+export const AdwSidebarTest = async () => {
+    await describe('adw-sidebar selection bounds (libadwaita conformance vectors)', async () => {
+        for (const { index, count, selected, rule } of SIDEBAR_CLAMP_VECTORS) {
+            await it(`selected="${index}" on ${count} rows → ${selected} — ${rule}`, () => {
+                const { sidebar, host } = mountSidebar(countedSections(count), { selected: String(index) });
+
+                expect(sidebar.selected).toBe(selected);
+                // The attribute is normalised back, so it never claims an index
+                // the property does not report.
+                expect(sidebar.getAttribute('selected')).toBe(String(selected));
+                expect(rowsOf(sidebar).filter((row) => row.classList.contains('selected'))).toHaveLength(
+                    selected === -1 ? 0 : 1,
+                );
+
+                host.remove();
+            });
+        }
+
+        await it('auto-selects the first row when no index is declared', () => {
+            const { sidebar, host } = mountSidebar(countedSections(3));
+            expect(sidebar.selected).toBe(0);
+            expect(rowsOf(sidebar)[0]!.classList.contains('selected')).toBe(true);
+            host.remove();
+        });
+
+        await it('notifies on a programmatic change, not only on a click', () => {
+            const { sidebar, host } = mountSidebar(countedSections(3));
+            const seen: { selected: number; interactive: boolean }[] = [];
+            sidebar.addEventListener('notify::selected', (event) => {
+                seen.push((event as CustomEvent).detail as { selected: number; interactive: boolean });
+            });
+
+            sidebar.selected = 2;
+            expect(seen).toHaveLength(1);
+            expect(seen[0]!.selected).toBe(2);
+            expect(seen[0]!.interactive).toBe(false);
+
+            host.remove();
+        });
+    });
+
+    await describe('adw-sidebar rows + headers (libadwaita conformance vectors)', async () => {
+        for (const vector of SIDEBAR_MODEL_VECTORS) {
+            await it(`${vector.name} — ${vector.rule}`, () => {
+                const { sidebar, host } = mountSidebar(vector.sections);
+
+                expect(rowsOf(sidebar)).toHaveLength(vector.count);
+                expect(
+                    rowsOf(sidebar).map((row) => row.querySelector('.adw-sidebar-item-title')?.textContent ?? ''),
+                ).toStrictEqual(vector.flat.map((entry) => entry.title));
+                expect(headersOf(sidebar)).toStrictEqual(
+                    vector.headers.map((header) => ({
+                        kind: header.kind as string,
+                        title: header.title,
+                        first: header.first,
+                    })),
+                );
+
+                host.remove();
+            });
+        }
+
+        await it('draws no section container for a section that renders no rows', () => {
+            // The old element appended a header AND an empty `.adw-sidebar-section`
+            // per DECLARED section, which in page mode is a visible empty card.
+            const { sidebar, host } = mountSidebar([{ title: 'Empty', items: [] }, { items: [{ title: 'A' }] }]);
+            expect(sidebar.querySelectorAll('.adw-sidebar-section')).toHaveLength(1);
+            expect(headersOf(sidebar)).toHaveLength(0);
+            host.remove();
+        });
+    });
+
+    await describe('adw-sidebar item labels (string_is_not_empty bindings)', async () => {
+        for (const vector of SIDEBAR_ITEM_FLAG_VECTORS) {
+            await it(`${JSON.stringify(vector.item)} — ${vector.rule}`, () => {
+                const { sidebar, host } = mountSidebar([{ items: [vector.item] }]);
+                const row = rowsOf(sidebar)[0]!;
+
+                expect((row.querySelector('.adw-sidebar-item-title') as HTMLElement).hidden).toBe(!vector.titleVisible);
+                expect((row.querySelector('.adw-sidebar-item-subtitle') as HTMLElement).hidden).toBe(
+                    !vector.subtitleVisible,
+                );
+                expect((row.querySelector('.adw-sidebar-item-icon') as HTMLElement).hidden).toBe(!vector.iconVisible);
+
+                host.remove();
+            });
+        }
+    });
+
+    await describe('adw-sidebar activation (row-selected then row-activated)', async () => {
+        for (const vector of SIDEBAR_ACTIVATION_VECTORS) {
+            await it(`${vector.name} — ${vector.rule}`, () => {
+                const { sidebar, host } = mountSidebar(vector.sections);
+                sidebar.selected = vector.initialSelected;
+
+                const activations: number[] = [];
+                const notifications: number[] = [];
+                sidebar.addEventListener('activated', (event) => {
+                    activations.push(((event as CustomEvent).detail as { index: number }).index);
+                });
+                sidebar.addEventListener('notify::selected', (event) => {
+                    notifications.push(((event as CustomEvent).detail as { selected: number }).selected);
+                });
+
+                const row = rowsOf(sidebar)[vector.activate];
+                if (row) row.click();
+                else expect(vector.activated).toBe(false);
+
+                expect(activations).toHaveLength(vector.activated ? 1 : 0);
+                expect(notifications).toHaveLength(vector.selectionChanged ? 1 : 0);
+                expect(sidebar.selected).toBe(vector.selected);
+
+                host.remove();
+            });
+        }
+
+        await it('re-clicking the selected row still fires activated — the split-view reveal', () => {
+            const { sidebar, host } = mountSidebar([{ items: [{ title: 'A' }, { title: 'B' }] }]);
+            const activations: number[] = [];
+            sidebar.addEventListener('activated', () => activations.push(1));
+
+            rowsOf(sidebar)[0]!.click();
+            rowsOf(sidebar)[0]!.click();
+            expect(activations).toHaveLength(2);
+            expect(sidebar.selected).toBe(0);
+
+            host.remove();
+        });
+
+        await it('tags a click as interactive and a property write as not', () => {
+            const { sidebar, host } = mountSidebar([{ items: [{ title: 'A' }, { title: 'B' }] }]);
+            const flags: boolean[] = [];
+            sidebar.addEventListener('notify::selected', (event) => {
+                flags.push(((event as CustomEvent).detail as { interactive: boolean }).interactive);
+            });
+
+            rowsOf(sidebar)[1]!.click();
+            sidebar.selected = 0;
+            expect(flags).toStrictEqual([true, false]);
+
+            host.remove();
+        });
+    });
+
+    await describe('adw-sidebar filter + empty state (Adw.Sidebar:filter / update_placeholder)', async () => {
+        for (const vector of SIDEBAR_FILTER_VECTORS) {
+            await it(`${vector.name} — ${vector.rule}`, () => {
+                const { sidebar, host } = mountSidebar(vector.sections);
+                sidebar.filter = (item) => vector.keepTitles.includes(item.title);
+
+                expect(rowsOf(sidebar)).toHaveLength(vector.visibleIndices.length);
+                expect(headersOf(sidebar)).toStrictEqual(
+                    vector.headers.map((header) => ({
+                        kind: header.kind as string,
+                        title: header.title,
+                        first: header.first,
+                    })),
+                );
+                expect(sidebar.classList.contains('empty')).toBe(vector.isEmpty);
+
+                host.remove();
+            });
+        }
+
+        await it('keeps the selection index in the UNFILTERED space', () => {
+            const { sidebar, host } = mountSidebar([{ items: [{ title: 'A' }, { title: 'B' }, { title: 'C' }] }]);
+            sidebar.selected = 2;
+            sidebar.filter = (item) => item.title !== 'A';
+
+            expect(sidebar.selected).toBe(2);
+            expect(sidebar.selectedItem?.title).toBe('C');
+            expect(rowsOf(sidebar)).toHaveLength(2);
+            expect(rowsOf(sidebar)[1]!.classList.contains('selected')).toBe(true);
+
+            host.remove();
+        });
+    });
+
+    await describe('adw-sidebar mode (adw_sidebar_set_mode)', async () => {
+        for (const { mode, selectionVisible, rule } of SIDEBAR_MODE_VECTORS) {
+            await it(`${mode} paints the selection: ${selectionVisible} — ${rule}`, () => {
+                const { sidebar, host } = mountSidebar(countedSections(3), { mode, selected: '1' });
+
+                expect(sidebar.mode).toBe(mode);
+                expect(sidebar.selected).toBe(1);
+                expect(rowsOf(sidebar)[1]!.classList.contains('selected')).toBe(selectionVisible);
+                // Tracked either way — aria still reports which item is current.
+                expect(rowsOf(sidebar)[1]!.getAttribute('aria-selected')).toBe('true');
+
+                host.remove();
+            });
+        }
+
+        await it('keeps the selection across a mode switch and back', () => {
+            const { sidebar, host } = mountSidebar(countedSections(3), { selected: '2' });
+
+            sidebar.mode = 'page';
+            expect(sidebar.selected).toBe(2);
+            expect(rowsOf(sidebar)[2]!.classList.contains('selected')).toBe(false);
+
+            sidebar.mode = 'sidebar';
+            expect(sidebar.selected).toBe(2);
+            expect(rowsOf(sidebar)[2]!.classList.contains('selected')).toBe(true);
+
+            host.remove();
+        });
+    });
+
+    await describe('adw-sidebar live model changes', async () => {
+        await it('rebuilds when the sections are replaced, re-running the 0 → n auto-select', () => {
+            const { sidebar, host } = mountSidebar([{ items: [{ title: 'A' }, { title: 'B' }] }]);
+            sidebar.selected = 1;
+
+            sidebar.sections = [{ title: 'New', items: [{ title: 'X' }, { title: 'Y' }, { title: 'Z' }] }];
+            expect(rowsOf(sidebar)).toHaveLength(3);
+            expect(sidebar.selected).toBe(0);
+            expect(headersOf(sidebar)).toStrictEqual([{ kind: 'title', title: 'New', first: true }]);
+
+            host.remove();
+        });
+
+        await it('follows a declared item attribute change without touching the selection', () => {
+            // <adw-sidebar-item> declared `observedAttributes` with no
+            // attributeChangedCallback behind it, so every post-construction
+            // change was silently lost. The declared element is detached once
+            // consumed, so the link back to its spec cannot be a DOM lookup.
+            const declared = createItem({ title: 'A' });
+            const sectionEl = document.createElement('adw-sidebar-section');
+            sectionEl.append(declared, createItem({ title: 'B' }));
+
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const sidebar = document.createElement('adw-sidebar') as AdwSidebar;
+            sidebar.appendChild(sectionEl);
+            host.appendChild(sidebar);
+
+            sidebar.selected = 1;
+            declared.setAttribute('title', 'Renamed');
+            declared.setAttribute('icon-name', 'folder-symbolic');
+
+            const row = rowsOf(sidebar)[0]!;
+            expect(row.querySelector('.adw-sidebar-item-title')?.textContent).toBe('Renamed');
+            expect((row.querySelector('.adw-sidebar-item-icon') as HTMLElement).hidden).toBe(false);
+            expect(sidebar.selected).toBe(1);
+
+            host.remove();
+        });
+    });
+};

package/src/adw-switch.spec.ts

@@ -0,0 +1,242 @@
+// DOM-level tests for <adw-switch>, plus the REGRESSION PROOF that lifting it
+// out of <adw-switch-row> and <adw-expander-row> left both rows working.
+//
+// What the extraction removed: `_expander_row.scss:73-121` was a
+// character-for-character copy of `_switch_row.scss:15-63` (same 44×24 box, same
+// hidden input, same 20px knob, same `translateX(20px)`, same focus ring),
+// because `_switch_row.scss:9` opened `adw-switch-row {` and nested `.adw-switch`
+// inside it — so the class did not exist anywhere else and the expander row could
+// not reuse it. Two consequences this suite pins down:
+//
+//   - the GEOMETRY now comes from ONE unscoped partial. `measure()` compares the
+//     computed box of the row's switch against the expander's; before the lift
+//     they were two independently-maintained blocks that happened to agree, and
+//     deleting either one silently unstyled its widget.
+//   - the EVENTS are unchanged. Both rows compose an element that emits its own
+//     `notify::active`, so each row stops it at the switch and publishes its own
+//     name — a row listener must still see exactly one event per toggle.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { AdwExpanderRow } from './elements/adw-expander-row.js';
+import type { AdwSwitch } from './elements/adw-switch.js';
+import type { AdwSwitchRow } from './elements/adw-switch-row.js';
+
+function mount<T extends HTMLElement>(tag: string): { el: T; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement(tag) as T;
+    host.appendChild(el);
+    return { el, host };
+}
+
+/** Collect the `detail` of every `event` dispatched on (or bubbling to) `el`. */
+function record(el: HTMLElement, event: string): unknown[] {
+    const details: unknown[] = [];
+    el.addEventListener(event, (e) => details.push((e as CustomEvent).detail));
+    return details;
+}
+
+/** The switch's own parts, by the markup contract the stylesheet selects on. */
+function parts(sw: AdwSwitch): { input: HTMLInputElement; slider: HTMLElement } {
+    return {
+        input: sw.querySelector('input[type="checkbox"]') as HTMLInputElement,
+        slider: sw.querySelector('.adw-switch-slider') as HTMLElement,
+    };
+}
+
+/** The rendered track box — the thing the two copies used to declare separately. */
+function measure(sw: HTMLElement): { width: string; height: string; radius: string } {
+    const box = getComputedStyle(sw);
+    const slider = getComputedStyle(sw.querySelector('.adw-switch-slider') as HTMLElement);
+    return { width: box.width, height: box.height, radius: slider.borderTopLeftRadius };
+}
+
+export const AdwSwitchTest = async () => {
+    await describe('<adw-switch> state', async () => {
+        await it('starts off and builds the input + slider markup', () => {
+            const { el, host } = mount<AdwSwitch>('adw-switch');
+            const { input, slider } = parts(el);
+            expect(el.active).toBe(false);
+            expect(input).toBeTruthy();
+            expect(input.checked).toBe(false);
+            // The focus ring is `input:focus-visible + .adw-switch-slider`, so the
+            // slider MUST be the input's immediate next sibling.
+            expect(input.nextElementSibling).toBe(slider);
+            expect(el.classList.contains('adw-switch')).toBe(true);
+            host.remove();
+        });
+
+        await it('adopts a declarative active attribute without emitting', () => {
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const el = document.createElement('adw-switch') as AdwSwitch;
+            el.setAttribute('active', '');
+            const events = record(el, 'notify::active');
+            host.appendChild(el);
+            expect(el.active).toBe(true);
+            expect(parts(el).input.checked).toBe(true);
+            expect(events.length).toBe(0);
+            host.remove();
+        });
+
+        await it('a programmatic set notifies, and re-setting the same value does not', () => {
+            const { el, host } = mount<AdwSwitch>('adw-switch');
+            const events = record(el, 'notify::active');
+            el.active = true;
+            expect(events).toStrictEqual([{ active: true }]);
+            el.active = true;
+            expect(events.length).toBe(1);
+            el.active = false;
+            expect(events.length).toBe(2);
+            expect(parts(el).input.checked).toBe(false);
+            host.remove();
+        });
+
+        await it('a click on the track toggles exactly once', () => {
+            const { el, host } = mount<AdwSwitch>('adw-switch');
+            const events = record(el, 'notify::active');
+            parts(el).slider.click();
+            expect(el.active).toBe(true);
+            expect(el.hasAttribute('active')).toBe(true);
+            expect(events.length).toBe(1);
+            host.remove();
+        });
+
+        await it('a click on the hidden checkbox toggles exactly once', () => {
+            // The checkbox is 0×0, so a pointer never reaches it — but keyboard
+            // activation and `input.click()` do, and the track listener must not
+            // toggle a second time on the way out.
+            const { el, host } = mount<AdwSwitch>('adw-switch');
+            const events = record(el, 'notify::active');
+            parts(el).input.click();
+            expect(el.active).toBe(true);
+            expect(events.length).toBe(1);
+            host.remove();
+        });
+
+        await it('a disabled switch does not toggle', () => {
+            const { el, host } = mount<AdwSwitch>('adw-switch');
+            el.disabled = true;
+            const events = record(el, 'notify::active');
+            parts(el).slider.click();
+            expect(el.active).toBe(false);
+            expect(events.length).toBe(0);
+            expect(parts(el).input.disabled).toBe(true);
+            expect(el.classList.contains('disabled')).toBe(true);
+            // …but it is not frozen: a programmatic set still applies, matching
+            // GObject property semantics (sensitivity gates INPUT, not the value).
+            el.active = true;
+            expect(events).toStrictEqual([{ active: true }]);
+            host.remove();
+        });
+    });
+
+    await describe('<adw-switch-row> still toggles and emits through <adw-switch>', async () => {
+        await it('a programmatic row.active drives the switch and emits once', () => {
+            const { el: row, host } = mount<AdwSwitchRow>('adw-switch-row');
+            const events = record(row, 'notify::active');
+            const sw = row.querySelector('adw-switch') as AdwSwitch;
+            expect(sw).toBeTruthy();
+
+            row.active = true;
+
+            expect(sw.active).toBe(true);
+            expect(parts(sw).input.checked).toBe(true);
+            expect(row.getAttribute('aria-checked')).toBe('true');
+            // ONE event: the composed switch's identically-named notify is
+            // stopped at the switch so it cannot reach a row listener as a second.
+            expect(events).toStrictEqual([{ active: true }]);
+            host.remove();
+        });
+
+        await it('a click on the row toggles and emits once', () => {
+            const { el: row, host } = mount<AdwSwitchRow>('adw-switch-row');
+            const events = record(row, 'notify::active');
+            row.click();
+            expect(row.active).toBe(true);
+            expect((row.querySelector('adw-switch') as AdwSwitch).active).toBe(true);
+            expect(events.length).toBe(1);
+            host.remove();
+        });
+
+        await it('a click on the switch toggles the row once, not twice', () => {
+            const { el: row, host } = mount<AdwSwitchRow>('adw-switch-row');
+            const events = record(row, 'notify::active');
+            const sw = row.querySelector('adw-switch') as AdwSwitch;
+            parts(sw).slider.click();
+            expect(row.active).toBe(true);
+            expect(events.length).toBe(1);
+            host.remove();
+        });
+    });
+
+    await describe('<adw-expander-row> still toggles its enable switch', async () => {
+        await it('a user toggle flips enable-expansion and emits once', () => {
+            const { el: row, host } = mount<AdwExpanderRow>('adw-expander-row');
+            row.setAttribute('show-enable-switch', '');
+            const events = record(row, 'notify::enable-expansion');
+            const sw = row.querySelector('adw-switch') as AdwSwitch;
+            expect(sw.active).toBe(true); // enable-expansion defaults to true
+
+            parts(sw).slider.click();
+
+            expect(row.enableExpansion).toBe(false);
+            expect(row.getAttribute('enable-expansion')).toBe('false');
+            expect(events).toStrictEqual([{ enableExpansion: false }]);
+            host.remove();
+        });
+
+        await it('a programmatic enableExpansion re-syncs the switch silently', () => {
+            // The row's published event is for USER changes, as it always was —
+            // the composed switch notifies on every change, so the row has to
+            // know which writes are its own.
+            const { el: row, host } = mount<AdwExpanderRow>('adw-expander-row');
+            row.setAttribute('show-enable-switch', '');
+            const enableEvents = record(row, 'notify::enable-expansion');
+            const activeEvents = record(row, 'notify::active');
+
+            row.enableExpansion = false;
+
+            expect((row.querySelector('adw-switch') as AdwSwitch).active).toBe(false);
+            expect(enableEvents.length).toBe(0);
+            // The switch's own notify never escapes the row either.
+            expect(activeEvents.length).toBe(0);
+            host.remove();
+        });
+
+        await it('a click on the enable switch does not disclose the row', () => {
+            const { el: row, host } = mount<AdwExpanderRow>('adw-expander-row');
+            row.setAttribute('show-enable-switch', '');
+            const sw = row.querySelector('adw-switch') as AdwSwitch;
+
+            parts(sw).slider.click();
+            expect(row.expanded).toBe(false);
+
+            (row.querySelector('.adw-expander-row-header') as HTMLElement).click();
+            expect(row.expanded).toBe(true);
+            host.remove();
+        });
+    });
+
+    await describe('one switch stylesheet reaches both rows', async () => {
+        await it('the row and the expander render the SAME track box', () => {
+            const { el: row, host: rowHost } = mount<AdwSwitchRow>('adw-switch-row');
+            const { el: expander, host: expanderHost } = mount<AdwExpanderRow>('adw-expander-row');
+            expander.setAttribute('show-enable-switch', '');
+
+            const rowBox = measure(row.querySelector('adw-switch') as HTMLElement);
+            const expanderBox = measure(expander.querySelector('adw-switch') as HTMLElement);
+
+            expect(rowBox).toStrictEqual(expanderBox);
+            // Pin the actual numbers too, so "both unstyled" cannot pass as
+            // "both agree". This is refs/adwaita-web's geometry, NOT libadwaita's
+            // (which is a 3px-padded trough around a 20px slider) — see the
+            // fidelity note in scss/_switch.scss.
+            expect(rowBox.width).toBe('44px');
+            expect(rowBox.height).toBe('24px');
+
+            rowHost.remove();
+            expanderHost.remove();
+        });
+    });
+};

package/src/adw-tab-view.spec.ts

@@ -2,7 +2,11 @@
 // @gjsify/adwaita-web browser test axis (the entry self-applies the compiled
 // stylesheet, so computed-style assertions are valid). Asserts page building,
 // selected↔click sync, notify/close events, and the expand-tabs / no-close
-// attributes.
+// attributes — i.e. the DOM/CSS surface.
+//
+// The MODEL is asserted in `tab-view.spec.ts`, against the shared libadwaita
+// conformance vectors. Keep the split: this file is about markup and computed
+// style, that one is about behaviour both renderers must agree on.
 import { describe, expect, it } from '@gjsify/unit';
 
 import type { AdwTabView } from './elements/adw-tab-view.js';
@@ -51,7 +55,7 @@ export const AdwTabViewTest = async () => {
             view.parentElement?.remove();
         });
 
-        await it('emits close-page from the close affordance', async () => {
+        await it('emits close-page from the close affordance AND removes the page', async () => {
             const view = makeTabView();
             let closed = -1;
             view.addEventListener('close-page', (event) => {
@@ -59,7 +63,12 @@ export const AdwTabViewTest = async () => {
             });
             (view.querySelectorAll('.adw-tab-close')[1] as HTMLButtonElement).click();
             expect(closed).toBe(1);
-            // Closing must not also select the tab.
+            // The element used to emit and remove NOTHING, so every close was
+            // permanently denied; the default handler now confirms a non-pinned
+            // page (close_page_cb, adw-tab-view.c:1990-1991).
+            expect(view.querySelectorAll('.adw-tab').length).toBe(2);
+            // Closing a page BEFORE the selection must not also select the tab,
+            // and must leave the selected PAGE selected (adw-tab-view.c:1864-1865).
             expect(view.selected).toBe(0);
             view.parentElement?.remove();
         });