@gjsify/adwaita-web 0.53.0 → 0.55.0

package/src/gtk-spinner.spec.ts

@@ -0,0 +1,130 @@
+// DOM-level tests for <gtk-spinner>. GtkSpinner has exactly ONE property, so what
+// matters is the four facts around it: `spinning` is the state and `:checked` (spelled
+// `.checked`) is how the stylesheet sees it, `start()`/`stop()` carry the busy state as
+// well as the property, and the drawn picture is the icon GTK loads — a faint ring with
+// one quarter arc on it, which is a STATIC shape.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkSpinner } from './elements/gtk-spinner.js';
+
+function mount(attrs: Record<string, string> = {}): { el: GtkSpinner; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-spinner') as GtkSpinner;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    host.appendChild(el);
+    return { el, host };
+}
+
+export const GtkSpinnerTest = async () => {
+    await describe('<gtk-spinner> state', async () => {
+        await it('starts stopped, with no busy state announced', () => {
+            // gtkspinner.c:338-340 — the property's default is FALSE, and nothing has
+            // called start(), so there is no aria-busy either.
+            const { el, host } = mount();
+            expect(el.spinning).toBe(false);
+            expect(el.classList.contains('checked')).toBe(false);
+            expect(el.hasAttribute('aria-busy')).toBe(false);
+            host.remove();
+        });
+
+        await it('adopts a declarative spinning attribute without emitting', () => {
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const el = document.createElement('gtk-spinner') as GtkSpinner;
+            const events: unknown[] = [];
+            el.addEventListener('notify::spinning', (e) => events.push((e as CustomEvent).detail));
+            el.setAttribute('spinning', '');
+            host.appendChild(el);
+            expect(el.spinning).toBe(true);
+            expect(el.classList.contains('checked')).toBe(true);
+            expect(events.length).toBe(0);
+            host.remove();
+        });
+
+        await it('a programmatic set notifies once per real change', () => {
+            const { el, host } = mount();
+            const events: unknown[] = [];
+            el.addEventListener('notify::spinning', (e) => events.push((e as CustomEvent).detail));
+            el.spinning = true;
+            el.spinning = true;
+            el.spinning = false;
+            expect(events).toStrictEqual([{ spinning: true }, { spinning: false }]);
+            host.remove();
+        });
+
+        await it('the attribute and the property are the same state', () => {
+            const { el, host } = mount();
+            el.setAttribute('spinning', '');
+            expect(el.spinning).toBe(true);
+            expect(el.classList.contains('checked')).toBe(true);
+            el.spinning = false;
+            expect(el.hasAttribute('spinning')).toBe(false);
+            expect(el.classList.contains('checked')).toBe(false);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-spinner> start / stop', async () => {
+        await it('start sets the property AND the busy state; stop clears both', () => {
+            // gtkspinner.c:373-383 and :391-400 — `gtk_accessible_update_state (…,
+            // GTK_ACCESSIBLE_STATE_BUSY, …)` is in both methods, not in the setter.
+            const { el, host } = mount();
+            el.start();
+            expect(el.spinning).toBe(true);
+            expect(el.getAttribute('aria-busy')).toBe('true');
+            el.stop();
+            expect(el.spinning).toBe(false);
+            expect(el.getAttribute('aria-busy')).toBe('false');
+            host.remove();
+        });
+
+        await it('setting the property alone does not announce a busy state', () => {
+            const { el, host } = mount();
+            el.spinning = true;
+            expect(el.hasAttribute('aria-busy')).toBe(false);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-spinner> picture', async () => {
+        await it('is a faint ring plus ONE quarter arc, the icon GTK loads', () => {
+            // refs/gtk/gtk/icons/process-working-symbolic.svg — a full circle at
+            // stroke-opacity 0.2 and the arc from (1,8) to (8,1) on a radius-7 circle.
+            const { el, host } = mount();
+            expect(el.querySelectorAll('.adw-spinner-track').length).toBe(1);
+            const arcs = el.querySelectorAll('.adw-spinner-arc');
+            expect(arcs.length).toBe(1);
+            expect((arcs[0] as SVGPathElement).getAttribute('d')).toBe('M 1 8 A 7 7 0 0 1 8 1');
+            const track = el.querySelector('.adw-spinner-track') as SVGCircleElement;
+            expect(getComputedStyle(track).strokeOpacity).toBe('0.2');
+            host.remove();
+        });
+
+        await it('carries the progressbar role and no value range', () => {
+            // gtkspinner.c:345 — GTK_ACCESSIBLE_ROLE_PROGRESS_BAR. There is no fraction
+            // to report, so none of aria-valuemin/max/now is written.
+            const { el, host } = mount();
+            expect(el.getAttribute('role')).toBe('progressbar');
+            expect(el.hasAttribute('aria-valuenow')).toBe(false);
+            host.remove();
+        });
+
+        await it('is 16px until a rule says otherwise, which is its icon size', () => {
+            // gtkspinner.c:110-123 — measured from `icon-size`, reported as minimum AND
+            // natural, so the box is square at the icon's intrinsic size.
+            const { el, host } = mount();
+            const box = getComputedStyle(el);
+            expect(box.width).toBe('16px');
+            expect(box.height).toBe('16px');
+            host.remove();
+        });
+
+        await it('dims when disabled, the way libadwaita dims a spinner node', () => {
+            // refs/libadwaita/src/stylesheet/widgets/_spinner.scss:1-3.
+            const { el, host } = mount({ disabled: '' });
+            expect(Number(getComputedStyle(el).opacity)).toBeLessThan(1);
+            host.remove();
+        });
+    });
+};

package/src/gtk-stack-sidebar.spec.ts

@@ -0,0 +1,217 @@
+// DOM-level tests for <gtk-stack-sidebar>. The widget is three separable things: the
+// ROW-VISIBILITY rule (which is NOT the switcher's — no icon fallback here), the
+// two-way binding with the stack, and the list's own node contract.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkStack } from './elements/gtk-stack.js';
+import type { GtkStackSidebar } from './elements/gtk-stack-sidebar.js';
+
+interface Page {
+    name: string;
+    title?: string;
+    icon?: string;
+    hidden?: boolean;
+    attention?: boolean;
+}
+
+/** A stack with its pages, a sidebar bound to it by id, both in the document. */
+function mount(
+    pages: Page[],
+    attrs: Record<string, string> = {},
+): { stack: GtkStack; sidebar: GtkStackSidebar; host: HTMLElement; stackId: string } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    // A UNIQUE id per mount: the switcher binds by id, so two stacks left in the document
+    // under one id make `getElementById` answer with whichever came first. A counter in
+    // this module is not enough, because the suite's cases are free to interleave.
+    const stackId = `stack-under-test-${crypto.randomUUID()}`;
+    const stack = document.createElement('gtk-stack') as GtkStack;
+    stack.id = stackId;
+    for (const page of pages) {
+        const child = document.createElement('div');
+        child.setAttribute('name', page.name);
+        if (page.title !== undefined) child.setAttribute('title', page.title);
+        if (page.icon !== undefined) child.setAttribute('icon-name', page.icon);
+        if (page.hidden) child.setAttribute('hidden', '');
+        if (page.attention) child.setAttribute('needs-attention', '');
+        stack.appendChild(child);
+    }
+    const sidebar = document.createElement('gtk-stack-sidebar') as GtkStackSidebar;
+    for (const [name, value] of Object.entries(attrs)) sidebar.setAttribute(name, value);
+    sidebar.setAttribute('stack', stackId);
+    host.append(stack, sidebar);
+    return { stack, sidebar, host, stackId };
+}
+
+/** The rows, with hidden ones marked, as the visibility rule leaves them. */
+function rows(el: GtkStackSidebar): string[] {
+    return [...el.querySelectorAll<HTMLButtonElement>('.adw-stack-sidebar-row')].map((row) => {
+        const parts = [row.querySelector('.adw-stack-sidebar-title')?.textContent ?? ''];
+        if (row.hidden) parts.push('hidden');
+        if (row.classList.contains('selected')) parts.push('selected');
+        if (row.classList.contains('needs-attention')) parts.push('attention');
+        return parts.filter(Boolean).join(' ');
+    });
+}
+
+/** A turn of the event loop — a page's change reaches the sidebar through the stack's observer. */
+function settle(): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+const THREE = [
+    { name: 'a', title: 'Alpha' },
+    { name: 'b', title: 'Beta' },
+    { name: 'c', title: 'Gamma' },
+];
+
+export const GtkStackSidebarTest = async () => {
+    await describe('<gtk-stack-sidebar> defaults', async () => {
+        await it('builds one row per page, the first one selected', () => {
+            const { sidebar, host } = mount(THREE);
+            expect(rows(sidebar)).toStrictEqual(['Alpha selected', 'Beta', 'Gamma']);
+            // C's own classes: `.sidebar` on the widget, `.navigation-sidebar` on the list
+            // (gtkstacksidebar.c:155, :163).
+            expect(sidebar.classList.contains('sidebar')).toBe(true);
+            const list = sidebar.querySelector('.adw-stack-sidebar-list');
+            expect(list?.classList.contains('navigation-sidebar')).toBe(true);
+            expect(list?.getAttribute('role')).toBe('listbox');
+            // The translated "Sidebar" of gtkstacksidebar.c:157-159.
+            expect(list?.getAttribute('aria-label')).toBe('Sidebar');
+            host.remove();
+        });
+
+        await it('a row is a link, selected state and all', () => {
+            const { sidebar, host } = mount(THREE);
+            const [first, second] = sidebar.querySelectorAll<HTMLButtonElement>('.adw-stack-sidebar-row');
+            expect(first.getAttribute('role')).toBe('link');
+            expect(first.getAttribute('aria-selected')).toBe('true');
+            expect(second.getAttribute('aria-selected')).toBe('false');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-stack-sidebar> row visibility', async () => {
+        await it('a page with a title shows a row', () => {
+            const { sidebar, host } = mount([{ name: 'a', title: 'Alpha' }]);
+            expect(rows(sidebar)).toStrictEqual(['Alpha selected']);
+            host.remove();
+        });
+
+        await it('a page with an icon and NO title gets no row text and is hidden', () => {
+            // gtkstacksidebar.c:186 — `visible && title != NULL`. `update_row` never
+            // reads icon-name, so there is NO icon fallback here, which is the one rule
+            // where this sidebar and the switcher disagree.
+            const { sidebar, host } = mount([
+                { name: 'a', icon: 'go-next-symbolic' },
+                { name: 'b', title: 'Beta' },
+            ]);
+            // `a` is the first page, so it is the visible one — and its row has no text.
+            expect(rows(sidebar)).toStrictEqual(['hidden selected', 'Beta']);
+            host.remove();
+        });
+
+        await it('a hidden page is hidden whatever it carries', () => {
+            const { sidebar, host } = mount([
+                { name: 'a', title: 'Alpha' },
+                { name: 'b', title: 'Beta', hidden: true },
+            ]);
+            expect(rows(sidebar)).toStrictEqual(['Alpha selected', 'Beta hidden']);
+            host.remove();
+        });
+
+        await it('needs-attention puts the class on the ROW', () => {
+            // gtkstacksidebar.c:188-191 — the class goes on the row, not the label.
+            const { sidebar, host } = mount([
+                { name: 'a', title: 'Alpha', attention: true },
+                { name: 'b', title: 'Beta' },
+            ]);
+            expect(rows(sidebar)).toStrictEqual(['Alpha selected attention', 'Beta']);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-stack-sidebar> the two-way binding', async () => {
+        await it('clicking a row makes its page visible', () => {
+            const { stack, sidebar, host } = mount(THREE);
+            (sidebar.querySelectorAll('.adw-stack-sidebar-row')[2] as HTMLButtonElement).click();
+            expect(stack.visibleChildName).toBe('c');
+            expect(rows(sidebar)).toStrictEqual(['Alpha', 'Beta', 'Gamma selected']);
+            host.remove();
+        });
+
+        await it('a page change re-marks the rows without rebuilding them', () => {
+            // gtkstacksidebar.c:317-338 — selection_changed_cb never repopulates.
+            const { stack, sidebar, host } = mount(THREE);
+            const before = sidebar.querySelectorAll('.adw-stack-sidebar-row')[1];
+            stack.setVisibleChildName('c');
+            const after = sidebar.querySelectorAll('.adw-stack-sidebar-row')[1];
+            expect(after).toBe(before);
+            expect(rows(sidebar)).toStrictEqual(['Alpha', 'Beta', 'Gamma selected']);
+            host.remove();
+        });
+
+        await it('clicking the CURRENT row leaves it selected', () => {
+            // gtkstacksidebar.c:130-143 — only a SELECTION drives the model, so a click on
+            // the current row is the same no-op the switcher's is.
+            const { stack, sidebar, host } = mount(THREE);
+            (sidebar.querySelectorAll('.adw-stack-sidebar-row')[0] as HTMLButtonElement).click();
+            expect(stack.visibleChildName).toBe('a');
+            expect(rows(sidebar)).toStrictEqual(['Alpha selected', 'Beta', 'Gamma']);
+            host.remove();
+        });
+
+        await it('a page added later brings its own row', async () => {
+            // items_changed_cb rebuilds the whole list (gtkstacksidebar.c:307-311).
+            const { stack, sidebar, host } = mount(THREE);
+            const added = document.createElement('div');
+            added.setAttribute('name', 'd');
+            added.setAttribute('title', 'Delta');
+            stack.appendChild(added);
+            await settle();
+            expect(rows(sidebar)).toStrictEqual(['Alpha selected', 'Beta', 'Gamma', 'Delta']);
+            host.remove();
+        });
+
+        await it('a page title change reaches the row', async () => {
+            const { sidebar, host, stackId } = mount(THREE);
+            const page = document.querySelector(`#${stackId} > div:nth-child(2)`);
+            page?.setAttribute('title', 'Renamed');
+            await settle();
+            expect(rows(sidebar)).toStrictEqual(['Alpha selected', 'Renamed', 'Gamma']);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-stack-sidebar> binding and properties', async () => {
+        await it('resolves the stack by id, and an unknown id leaves it unbound', () => {
+            const { stack, sidebar, host } = mount(THREE);
+            expect(sidebar.stack).toBe(stack);
+            sidebar.setAttribute('stack', 'no-such-stack-anywhere');
+            expect(sidebar.stack).toBe(null);
+            expect(sidebar.querySelectorAll('.adw-stack-sidebar-row').length).toBe(0);
+            host.remove();
+        });
+
+        await it('setStack notifies, and re-binding the SAME stack does not', () => {
+            // gtkstacksidebar.c:422-433 — the early return before the notify.
+            const { stack, sidebar, host } = mount(THREE);
+            const events: unknown[] = [];
+            sidebar.addEventListener('notify::stack', (e) => events.push((e as CustomEvent).detail));
+            sidebar.setStack(stack);
+            sidebar.setStack(null);
+            expect(events).toStrictEqual([{ stack: null }]);
+            host.remove();
+        });
+
+        await it('an unbound sidebar is empty, not broken', () => {
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const sidebar = document.createElement('gtk-stack-sidebar') as GtkStackSidebar;
+            host.appendChild(sidebar);
+            expect(sidebar.stack).toBe(null);
+            expect(sidebar.querySelectorAll('.adw-stack-sidebar-row').length).toBe(0);
+            host.remove();
+        });
+    });
+};

package/src/gtk-stack-switcher.spec.ts

@@ -0,0 +1,249 @@
+// DOM-level tests for <gtk-stack-switcher>. The widget is three separable things:
+// the BUTTON-VISIBILITY rule (which decides how many buttons exist at all), the
+// TWO-WAY binding with the stack (including C's refusal to let a page be deselected),
+// and the page-update path.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkStack } from './elements/gtk-stack.js';
+import type { GtkStackSwitcher } from './elements/gtk-stack-switcher.js';
+
+interface Page {
+    name: string;
+    title?: string;
+    icon?: string;
+    hidden?: boolean;
+    attention?: boolean;
+}
+
+/** A stack with its pages, a switcher bound to it by id, both in the document. */
+function mount(
+    pages: Page[],
+    attrs: Record<string, string> = {},
+): { stack: GtkStack; switcher: GtkStackSwitcher; host: HTMLElement; stackId: string } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    // A UNIQUE id per mount: the switcher binds by id, so two stacks left in the document
+    // under one id make `getElementById` answer with whichever came first. A counter in
+    // this module is not enough, because the suite's cases are free to interleave.
+    const stackId = `stack-under-test-${crypto.randomUUID()}`;
+    const stack = document.createElement('gtk-stack') as GtkStack;
+    stack.id = stackId;
+    for (const page of pages) {
+        const child = document.createElement('div');
+        child.setAttribute('name', page.name);
+        if (page.title !== undefined) child.setAttribute('title', page.title);
+        if (page.icon !== undefined) child.setAttribute('icon-name', page.icon);
+        if (page.hidden) child.setAttribute('hidden', '');
+        if (page.attention) child.setAttribute('needs-attention', '');
+        stack.appendChild(child);
+    }
+    const switcher = document.createElement('gtk-stack-switcher') as GtkStackSwitcher;
+    for (const [name, value] of Object.entries(attrs)) switcher.setAttribute(name, value);
+    switcher.setAttribute('stack', stackId);
+    host.append(stack, switcher);
+    return { stack, switcher, host, stackId };
+}
+
+/** The buttons, with hidden ones marked, as the visibility rule leaves them. */
+function buttons(el: GtkStackSwitcher): string[] {
+    return [...el.querySelectorAll<HTMLButtonElement>('.adw-stack-switcher-button')].map((button) => {
+        const title = button.querySelector('.adw-stack-switcher-title')?.textContent ?? '';
+        const icon = button.querySelector('.adw-stack-switcher-icon')?.getAttribute('icon-name');
+        const parts = [title];
+        if (icon) parts.push(icon);
+        if (button.hidden) parts.push('hidden');
+        if (button.classList.contains('active')) parts.push('active');
+        if (button.classList.contains('needs-attention')) parts.push('attention');
+        return parts.filter(Boolean).join(' ');
+    });
+}
+
+/** A turn of the event loop — a page's change reaches the switcher through the stack's observer. */
+function settle(): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+const THREE = [
+    { name: 'a', title: 'Alpha' },
+    { name: 'b', title: 'Beta' },
+    { name: 'c', title: 'Gamma' },
+];
+
+export const GtkStackSwitcherTest = async () => {
+    await describe('<gtk-stack-switcher> defaults', async () => {
+        await it('builds one button per page, the first one active', () => {
+            const { switcher, host } = mount(THREE);
+            expect(buttons(switcher)).toStrictEqual(['Alpha active', 'Beta', 'Gamma']);
+            expect(switcher.getAttribute('role')).toBe('tablist');
+            // `.linked` is what C puts on the switcher itself (gtkstackswitcher.c:49-57).
+            expect(switcher.classList.contains('linked')).toBe(true);
+            expect(switcher.orientation).toBe('horizontal');
+            host.remove();
+        });
+
+        await it('a button is a tab, selected state and all', () => {
+            const { switcher, host } = mount(THREE);
+            const [first, second] = switcher.querySelectorAll<HTMLButtonElement>('.adw-stack-switcher-button');
+            expect(first.getAttribute('role')).toBe('tab');
+            expect(first.getAttribute('aria-selected')).toBe('true');
+            expect(second.getAttribute('aria-selected')).toBe('false');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-stack-switcher> button visibility', async () => {
+        await it('a page with a title shows a label button', () => {
+            const { switcher, host } = mount([{ name: 'a', title: 'Alpha' }]);
+            const label = switcher.querySelector<HTMLElement>('.adw-stack-switcher-title');
+            const icon = switcher.querySelector<HTMLElement>('.adw-stack-switcher-icon');
+            expect(label?.textContent).toBe('Alpha');
+            expect(label?.hidden).toBe(false);
+            expect(icon?.hidden).toBe(true);
+            expect((switcher.querySelector('.adw-stack-switcher-button') as HTMLElement).dataset.buttonMode).toBe(
+                'text',
+            );
+            host.remove();
+        });
+
+        await it('an icon AND a title show both, and the tooltip lands on the switcher', () => {
+            // gtkstackswitcher.c:145-155 — the tooltip is set on `self`, not on the button.
+            const { switcher, host } = mount([{ name: 'a', title: 'Alpha', icon: 'go-next-symbolic' }]);
+            const icon = switcher.querySelector<HTMLElement>('.adw-stack-switcher-icon');
+            expect(icon?.hidden).toBe(false);
+            expect(icon?.getAttribute('icon-name')).toBe('go-next-symbolic');
+            expect(switcher.title).toBe('Alpha');
+            expect((switcher.querySelector('.adw-stack-switcher-button') as HTMLElement).dataset.buttonMode).toBe(
+                'both',
+            );
+            host.remove();
+        });
+
+        await it('an icon WITHOUT a title takes the switcher tooltip and clears the label', () => {
+            // gtkstackswitcher.c:146-147 sets the tooltip; :158-160 leaves no label child.
+            const { switcher, host } = mount([{ name: 'a', icon: 'go-next-symbolic' }]);
+            expect(switcher.querySelector<HTMLElement>('.adw-stack-switcher-title')?.hidden).toBe(true);
+            expect(switcher.title).toBe('');
+            host.remove();
+        });
+
+        await it('a page with NEITHER title nor icon is hidden', () => {
+            // gtkstackswitcher.c:200 — `visible && (title != NULL || icon_name != NULL)`.
+            const { switcher, host } = mount([{ name: 'a' }, { name: 'b', title: 'Beta' }]);
+            // `a` is the FIRST page, so it is the visible one — and a visible page with
+            // nothing to draw is still a hidden button, selected.
+            expect(buttons(switcher)).toStrictEqual(['hidden active', 'Beta']);
+            host.remove();
+        });
+
+        await it('a hidden page is hidden, whatever it carries', () => {
+            const { switcher, host } = mount([
+                { name: 'a', title: 'Alpha' },
+                { name: 'b', title: 'Beta', hidden: true },
+            ]);
+            expect(buttons(switcher)).toStrictEqual(['Alpha active', 'Beta hidden']);
+            host.remove();
+        });
+
+        await it('a title-only button CLEARS a tooltip an icon-only page set', () => {
+            // gtkstackswitcher.c:168 — `gtk_widget_set_tooltip_text (self, NULL)`.
+            const { switcher, host } = mount([
+                { name: 'a', icon: 'go-next-symbolic' },
+                { name: 'b', title: 'Beta' },
+            ]);
+            // The LAST page wins, and it has a title, so the tooltip is cleared.
+            expect(switcher.title).toBe('');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-stack-switcher> the two-way binding', async () => {
+        await it('clicking a button makes its page visible', () => {
+            const { stack, switcher, host } = mount(THREE);
+            (switcher.querySelectorAll('.adw-stack-switcher-button')[2] as HTMLButtonElement).click();
+            expect(stack.visibleChildName).toBe('c');
+            expect(buttons(switcher)).toStrictEqual(['Alpha', 'Beta', 'Gamma active']);
+            host.remove();
+        });
+
+        await it('a page change re-marks the buttons without rebuilding them', () => {
+            // gtkstackswitcher.c:359-381 — only the buttons in the changed range move.
+            const { stack, switcher, host } = mount(THREE);
+            const before = switcher.querySelectorAll('.adw-stack-switcher-button')[1];
+            stack.setVisibleChildName('c');
+            const after = switcher.querySelectorAll('.adw-stack-switcher-button')[1];
+            expect(after).toBe(before);
+            expect(buttons(switcher)).toStrictEqual(['Alpha', 'Beta', 'Gamma active']);
+            host.remove();
+        });
+
+        await it('clicking the CURRENT page leaves it selected', () => {
+            // gtkstackswitcher.c:126-131 — a deactivation is taken back from the model.
+            const { stack, switcher, host } = mount(THREE);
+            (switcher.querySelectorAll('.adw-stack-switcher-button')[0] as HTMLButtonElement).click();
+            expect(stack.visibleChildName).toBe('a');
+            expect(buttons(switcher)).toStrictEqual(['Alpha active', 'Beta', 'Gamma']);
+            host.remove();
+        });
+
+        await it('needs-attention puts the class on the button', () => {
+            const { switcher, host } = mount([
+                { name: 'a', title: 'Alpha', attention: true },
+                { name: 'b', title: 'Beta' },
+            ]);
+            expect(buttons(switcher)).toStrictEqual(['Alpha active attention', 'Beta']);
+            host.remove();
+        });
+
+        await it('a page added later brings its own button', async () => {
+            // `items_changed_cb` rebuilds the whole row (gtkstackswitcher.c:347-355).
+            const { stack, switcher, host } = mount(THREE);
+            const added = document.createElement('div');
+            added.setAttribute('name', 'd');
+            added.setAttribute('title', 'Delta');
+            stack.appendChild(added);
+            await settle();
+            expect(buttons(switcher)).toStrictEqual(['Alpha active', 'Beta', 'Gamma', 'Delta']);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-stack-switcher> binding and properties', async () => {
+        await it('resolves the stack by id, and an unknown id leaves it unbound', () => {
+            const { stack, switcher, host } = mount(THREE);
+            expect(switcher.stack).toBe(stack);
+            switcher.setAttribute('stack', 'no-such-stack-anywhere');
+            expect(switcher.stack).toBe(null);
+            expect(switcher.querySelectorAll('.adw-stack-switcher-button').length).toBe(0);
+            host.remove();
+        });
+
+        await it('setStack notifies, and re-binding the SAME stack does not', () => {
+            // gtkstackswitcher.c:430-432 — the early return before the notify.
+            const { stack, switcher, host } = mount(THREE);
+            const events: unknown[] = [];
+            switcher.addEventListener('notify::stack', (e) => events.push((e as CustomEvent).detail));
+            switcher.setStack(stack);
+            switcher.setStack(null);
+            expect(events).toStrictEqual([{ stack: null }]);
+            host.remove();
+        });
+
+        await it('orientation is a property and the switcher keeps its horizontal default', () => {
+            const { switcher, host } = mount(THREE, { orientation: 'vertical' });
+            expect(switcher.orientation).toBe('vertical');
+            switcher.orientation = 'horizontal';
+            expect(switcher.orientation).toBe('horizontal');
+            host.remove();
+        });
+
+        await it('an unbound switcher is empty, not broken', () => {
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const switcher = document.createElement('gtk-stack-switcher') as GtkStackSwitcher;
+            host.appendChild(switcher);
+            expect(switcher.stack).toBe(null);
+            expect(switcher.querySelectorAll('.adw-stack-switcher-button').length).toBe(0);
+            host.remove();
+        });
+    });
+};