@gjsify/adwaita-web 0.32.0 → 0.34.0

package/scss/_wrap_box.scss

@@ -23,6 +23,15 @@ adw-wrap-box {
   align-content: flex-start;
 }
 
+// `wrap-policy`, published by the component as a custom property. The FALLBACK
+// is the load-bearing part: it is `ADW_WRAP_NATURAL`, libadwaita's default
+// (adw-wrap-box.c:491-495), where CSS defaults `flex-shrink` to 1 — so a wrap
+// box that has not upgraded yet, or one whose policy is unset, draws Adwaita's
+// choice rather than the cascade's.
+adw-wrap-box > * {
+  flex-shrink: var(--adw-wrap-box-child-shrink, 0);
+}
+
 // FILL grows the children and keeps the spacing constant
 // (adw-wrap-layout.c:317-319, :326-341); SPREAD deliberately does NOT, so the
 // gaps take the leftover instead. `data-line-justify` is the mode the component

package/scss/adwaita-skin.scss

@@ -66,6 +66,7 @@
 @use 'toast';
 @use 'toolbar_view';
 @use 'wrap_box';
+@use 'panes';
 @use 'overlay_split_view';
 @use 'navigation_split_view';
 @use 'carousel';

package/src/adw-about-dialog.spec.ts

@@ -347,4 +347,40 @@ export const AdwAboutDialogTest = async () => {
             mounted.dispose();
         });
     });
+
+    // AN OPENED DIALOG HAS TO OCCUPY SPACE.
+    //
+    // Every other test in this file reads the built DOM, and all of them passed
+    // while the dialog rendered INVISIBLE — its sheet measured 360×0. The suite
+    // could not see that, because none of it looks at geometry.
+    //
+    // The sheet is `position: fixed` with a width and no height, which is what
+    // `adw-about-dialog.ui:7` declares: `content-width` 360 and no
+    // content-height, libadwaita taking the height from the content. The content
+    // could not supply one — the navigation pages were absolutely positioned, so
+    // they contributed nothing to the page stack, which contributed nothing to
+    // the view, which left the sheet at zero; and the pages, being `inset: 0` of
+    // a zero-height parent, were zero in turn.
+    await describe('adw-about-dialog — an opened dialog is actually on screen', async () => {
+        await it('gives its sheet a height derived from its content', () => {
+            const mounted = mount({ 'application-name': 'Adwaita Storybook', version: '0.11.0' });
+            mounted.dialog.setAttribute('open', '');
+
+            const sheet = mounted.dialog.querySelector('.adw-about-dialog-sheet') as HTMLElement;
+            const rect = sheet.getBoundingClientRect();
+            // HEIGHT only. The width was never the defect, and pinning it here
+            // needs `calc(100vw - 48px)` restated in JS — where `100vw` and
+            // `innerWidth` disagree by the scrollbar (360 against a measured
+            // 342), so the assertion would report the harness rather than the
+            // widget. A test should assert the rule the bug broke.
+            expect(rect.height > 0).toBe(true);
+            // And not merely the header: the sheet has to be taller than the one
+            // child that had a size of its own all along, which is what made the
+            // collapse invisible to every other test in this file.
+            const header = sheet.querySelector('adw-header-bar') as HTMLElement;
+            expect(rect.height > header.getBoundingClientRect().height).toBe(true);
+
+            mounted.dispose();
+        });
+    });
 };

package/src/adw-avatar.spec.ts

@@ -9,6 +9,8 @@
 // them. This suite is that comparison.
 import { describe, expect, it } from '@gjsify/unit';
 
+import { AVATAR_MODE_VECTORS } from '@gjsify/adwaita-core/conformance';
+
 import { AVATAR_COLORS, avatarMaxFontSize } from '@gjsify/adwaita-core';
 import {
     AVATAR_COLOR_VECTORS,
@@ -136,4 +138,39 @@ export const AdwAvatarTest = async () => {
             host.remove();
         });
     });
+
+    await describe('<adw-avatar> mode (update_visibility, adw-avatar.c:117)', async () => {
+        // The `hasCustomImage` rows are not reachable through this element: it
+        // passes `hasCustomImage: false` unconditionally, because it has no
+        // custom-image support at all — `Adw.Avatar:custom-image` is unported.
+        // Named below rather than silently filtered.
+        for (const { hasCustomImage, showInitials, text, mode, rule } of AVATAR_MODE_VECTORS) {
+            if (hasCustomImage) continue;
+            await it(`initials=${showInitials} "${text}" → ${mode} — ${rule}`, () => {
+                const host = document.createElement('div');
+                document.body.appendChild(host);
+                const avatar = document.createElement('adw-avatar');
+                if (showInitials) avatar.setAttribute('show-initials', '');
+                if (text) avatar.setAttribute('text', text);
+                host.appendChild(avatar);
+
+                // Exactly ONE of the two reachable modes is drawn — the point of
+                // the table is the precedence, and "both visible at once" is the
+                // failure it guards against.
+                const initials = (avatar.querySelector('.adw-avatar-text') as HTMLElement).hidden === false;
+                const icon = (avatar.querySelector('.adw-avatar-icon') as HTMLElement).hidden === false;
+                expect(initials).toBe(mode === 'initials');
+                expect(icon).toBe(mode === 'icon');
+                host.remove();
+            });
+        }
+
+        await it('leaves out only the custom-image rows, which this element cannot reach', () => {
+            const unreachable = AVATAR_MODE_VECTORS.filter((vector) => vector.hasCustomImage);
+            expect(unreachable.length).toBeGreaterThan(0);
+            // Every one of them is an `image` outcome, i.e. the whole mode is
+            // missing rather than a corner of it.
+            for (const vector of unreachable) expect(vector.mode).toBe('image');
+        });
+    });
 };

package/src/adw-button-content.spec.ts

@@ -13,6 +13,8 @@
 // `image-missing` (:355-356).
 import { describe, expect, it } from '@gjsify/unit';
 
+import { BUTTON_CONTENT_DEFAULT_VECTORS } from '@gjsify/adwaita-core/conformance';
+
 import { BUTTON_CONTENT_STYLE_CLASS, normalizeIconName } from '@gjsify/adwaita-core';
 import {
     BUTTON_CONTENT_ELLIPSIZE_VECTORS,
@@ -180,4 +182,26 @@ export const AdwButtonContentTest = async () => {
             });
         }
     });
+
+    await describe('<adw-button-content> the four GParamSpec defaults', async () => {
+        for (const { property, value, rule } of BUTTON_CONTENT_DEFAULT_VECTORS) {
+            await it(`${property} defaults to ${JSON.stringify(value)} — ${rule}`, () => {
+                const host = document.createElement('div');
+                document.body.appendChild(host);
+                const content = document.createElement('adw-button-content');
+                host.appendChild(content);
+
+                // A bare element must READ BACK the C's defaults. The table was
+                // driven by nobody, so an element that invented its own defaults
+                // — `use-underline` true, say, which is the banner button's — would
+                // have looked correct.
+                const actual =
+                    typeof value === 'boolean'
+                        ? content.hasAttribute(property)
+                        : (content.getAttribute(property) ?? '');
+                expect(actual).toStrictEqual(value);
+                host.remove();
+            });
+        }
+    });
 };

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

@@ -9,6 +9,8 @@
 // display silently.
 import { describe, expect, it } from '@gjsify/unit';
 
+import { COMBO_CHOOSER_VECTORS } from '@gjsify/adwaita-core/conformance';
+
 import type { AdwComboRow } from './elements/adw-combo-row.js';
 import type { AdwExpanderRow } from './elements/adw-expander-row.js';
 import type { AdwSpinRow } from './elements/adw-spin-row.js';
@@ -72,6 +74,53 @@ export const AdwRowStateTest = async () => {
             expect((row.querySelector('.adw-row-value') as HTMLSpanElement).textContent).toBe('');
             host.remove();
         });
+
+        for (const { count, presentsChooser, rule } of COMBO_CHOOSER_VECTORS) {
+            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',
+                );
+                const value = row.querySelector('.adw-row-value') as HTMLSpanElement;
+                const select = row.querySelector('select') as HTMLSelectElement;
+
+                // The ARROW: `.adw-row-value::after` is masked in, and the
+                // `[data-presents-chooser='false']` block removes it. Asserted
+                // as "not none" rather than against the authored `inline-block`,
+                // because `.adw-row-value` is a flex container and blockifies
+                // its children's display.
+                expect(getComputedStyle(value, '::after').display === 'none').toBe(!presentsChooser);
+                // ...and the ROW being activatable, which on this port is the
+                // overlaid <select> taking clicks at all. Hiding the arrow
+                // without this leaves a row that still opens a one-entry popup.
+                expect(select.disabled).toBe(!presentsChooser);
+
+                host.remove();
+            });
+        }
+
+        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',
+            );
+            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' },
+            ]);
+            expect(select.disabled).toBe(false);
+            expect(row.dataset.presentsChooser).toBe('true');
+
+            host.remove();
+        });
     });
 
     await describe('adw-spin-row (SpinState)', async () => {

package/src/adw-sidebar.spec.ts

@@ -329,4 +329,36 @@ export const AdwSidebarTest = async () => {
             host.remove();
         });
     });
+
+    // A row's own box, which nothing had ever measured.
+    //
+    // `.adw-sidebar-item` carried `width: 100%` ON TOP of `margin: 0 6px 2px`.
+    // The list is a column flex container, so a row already stretches to it and
+    // stretching subtracts margins; `width: 100%` resolves against the
+    // containing block instead, which does not, so every row came out 12px too
+    // wide — inset on the left, hanging past the right edge with its rounded
+    // corners clipped away. Every earlier test asked what a row CONTAINED, so
+    // all of them passed.
+    await describe('a sidebar row sits inside its list, not over its edge', async () => {
+        await it('leaves the same margin on both sides', async () => {
+            const { sidebar, host } = mountSidebar([{ items: [{ title: 'Inbox' }, { title: 'Starred' }] }], {
+                selected: '0',
+            });
+            host.setAttribute('style', 'width:220px');
+
+            const list = sidebar.querySelector('.adw-sidebar-list') as HTMLElement;
+            const listBox = list.getBoundingClientRect();
+
+            for (const row of rowsOf(sidebar)) {
+                const box = row.getBoundingClientRect();
+                const left = box.left - listBox.left;
+                const right = listBox.right - box.right;
+                // Symmetric, and INSIDE — a negative right gap is the overhang.
+                expect(Math.round(left)).toBe(Math.round(right));
+                expect(right >= 0).toBe(true);
+            }
+
+            host.remove();
+        });
+    });
 };

package/src/adw-wrap-box.spec.ts

@@ -23,7 +23,12 @@
 import { describe, expect, it } from '@gjsify/unit';
 
 import {
+    WRAP_BOX_CHILD_ORDER_VECTORS,
+    WRAP_BOX_LENGTH_VECTORS,
     WRAP_BOX_LINE_VECTORS,
+    WRAP_BOX_NATURAL_LENGTH_VECTORS,
+    WRAP_BOX_NOTIFY_PROPERTIES,
+    WRAP_BOX_POLICY_VECTORS,
     WRAP_BOX_SPACING_NOTIFY_VECTORS,
     WRAP_BOX_SPACING_VECTORS,
 } from '@gjsify/adwaita-core/conformance';
@@ -49,7 +54,7 @@ function unmountAll(): void {
 }
 
 /** A vector value as it reads in a test name (`JSON.stringify` flattens NaN to null). */
-function label(value: number | string | null): string {
+function label(value: unknown): string {
     return typeof value === 'string' ? JSON.stringify(value) : String(value);
 }
 
@@ -191,4 +196,146 @@ export const AdwWrapBoxTest = async () => {
             });
         }
     });
+
+    await describe('<adw-wrap-box> the properties neither port had (#1048)', async () => {
+        for (const { value, policy, flexShrink, rule } of WRAP_BOX_POLICY_VECTORS) {
+            await it(`wrap-policy ${label(value)} → ${policy}: ${rule}`, () => {
+                const attrs: Record<string, string> = {};
+                if (value !== null) attrs['wrap-policy'] = String(value);
+                const { box, children } = mountWrapBox(attrs);
+                expect((box as HTMLElement & { wrapPolicy: string }).wrapPolicy).toBe(policy);
+                expect(getComputedStyle(children[0]).flexShrink).toBe(String(flexShrink));
+                unmountAll();
+            });
+        }
+
+        await it('a box with no wrap-policy forbids shrinking — CSS defaults to the OTHER one', () => {
+            const { children } = mountWrapBox({});
+            expect(getComputedStyle(children[0]).flexShrink).toBe('0');
+            unmountAll();
+        });
+
+        for (const { value, unit, dpi, px, rule } of WRAP_BOX_LENGTH_VECTORS) {
+            // The element resolves at the default dpi; the scaled rows are the
+            // core suite's, since a browser has no `gtk-xft-dpi` to report.
+            if (dpi !== 96 || value < 0) continue;
+            await it(`child-spacing ${value}${String(unit)} → ${px}px: ${rule}`, () => {
+                const attrs: Record<string, string> = { 'child-spacing': String(value) };
+                if (unit !== null) attrs['child-spacing-unit'] = String(unit);
+                const { box } = mountWrapBox(attrs);
+                expect(getComputedStyle(box).columnGap).toBe(`${px}px`);
+                unmountAll();
+            });
+        }
+
+        for (const { value, length, rule } of WRAP_BOX_NATURAL_LENGTH_VECTORS) {
+            await it(`natural-line-length ${label(value)} → ${length}: ${rule}`, () => {
+                const attrs: Record<string, string> = {};
+                if (value !== null) attrs['natural-line-length'] = String(value);
+                const { box } = mountWrapBox(attrs);
+                expect((box as HTMLElement & { naturalLineLength: number }).naturalLineLength).toBe(length);
+                // -1 is UNSET, not a length: it must not reach the style at all.
+                expect(box.style.maxWidth).toBe(length < 0 ? '' : `${length}px`);
+                unmountAll();
+            });
+        }
+
+        await it('a VERTICAL box caps the block axis, because that is where its lines run', () => {
+            const { box } = mountWrapBox({ orientation: 'vertical', 'natural-line-length': '400' });
+            expect(box.style.maxHeight).toBe('400px');
+            expect(box.style.maxWidth).toBe('');
+            unmountAll();
+        });
+
+        await it('pack-direction and wrap-reverse reverse the axes they own', () => {
+            const packed = mountWrapBox({ 'pack-direction': 'end-to-start' });
+            expect(getComputedStyle(packed.box).flexDirection).toBe('row-reverse');
+            unmountAll();
+
+            const reversed = mountWrapBox({ 'wrap-reverse': '' });
+            expect(getComputedStyle(reversed.box).flexWrap).toBe('wrap-reverse');
+            unmountAll();
+        });
+
+        await it('notifies for EVERY property, not just the two spacings', () => {
+            const { box } = mountWrapBox({});
+            const seen: string[] = [];
+            for (const property of WRAP_BOX_NOTIFY_PROPERTIES) {
+                box.addEventListener(`notify::${property}`, () => seen.push(property));
+            }
+            // One real change per property, each different from the default.
+            box.setAttribute('child-spacing', '6');
+            box.setAttribute('child-spacing-unit', 'sp');
+            box.setAttribute('pack-direction', 'end-to-start');
+            box.setAttribute('align', '1');
+            box.setAttribute('justify', 'fill');
+            box.toggleAttribute('justify-last-line', true);
+            box.setAttribute('line-spacing', '4');
+            box.setAttribute('line-spacing-unit', 'pt');
+            box.toggleAttribute('line-homogeneous', true);
+            box.setAttribute('natural-line-length', '400');
+            box.setAttribute('natural-line-length-unit', 'sp');
+            box.toggleAttribute('wrap-reverse', true);
+            box.setAttribute('wrap-policy', 'minimum');
+            box.setAttribute('orientation', 'vertical');
+
+            expect([...seen].sort()).toStrictEqual([...WRAP_BOX_NOTIFY_PROPERTIES].sort());
+            unmountAll();
+        });
+
+        await it('and stays silent for a value that normalises to what it already holds', () => {
+            const { box } = mountWrapBox({ 'wrap-policy': 'minimum' });
+            let notified = 0;
+            box.addEventListener('notify::wrap-policy', () => {
+                notified++;
+            });
+            box.setAttribute('wrap-policy', 'not-a-policy'); // → the default, a change
+            expect(notified).toBe(1);
+            box.setAttribute('wrap-policy', 'also-not-a-policy'); // → the default again
+            expect(notified).toBe(1);
+            unmountAll();
+        });
+    });
+
+    await describe('<adw-wrap-box> child list (insert/reorder after, remove_all)', async () => {
+        for (const { op, children, child, sibling, result, rule } of WRAP_BOX_CHILD_ORDER_VECTORS) {
+            const name = `${op} ${child} after ${sibling ?? 'NULL'} in [${children.join(',')}]`;
+            await it(`${name}: ${rule}`, () => {
+                const box = document.createElement('adw-wrap-box') as HTMLElement & {
+                    insertChildAfter(c: Element, s?: Element | null): boolean;
+                    reorderChildAfter(c: Element, s?: Element | null): boolean;
+                };
+                document.body.appendChild(box);
+                const byId = new Map<string, HTMLElement>();
+                const make = (id: string) => {
+                    const view = document.createElement('div');
+                    view.dataset.id = id;
+                    byId.set(id, view);
+                    return view;
+                };
+                for (const id of children) box.appendChild(make(id));
+                // The child being placed may be one of the mounted ones (a
+                // reorder, or the "already parented" refusal) or a fresh one.
+                const target = byId.get(child) ?? make(child);
+                // A sibling the box does not have still has to be a real element.
+                const after = sibling === null ? null : (byId.get(sibling) ?? make(sibling));
+
+                const ok =
+                    op === 'insert-after' ? box.insertChildAfter(target, after) : box.reorderChildAfter(target, after);
+                expect(ok).toBe(result !== null);
+                const order = [...box.children].map((view) => (view as HTMLElement).dataset.id);
+                expect(order).toStrictEqual(result === null ? [...children] : [...result]);
+                unmountAll();
+            });
+        }
+
+        await it('removeAll empties the box, leaving the box itself mounted', () => {
+            const { box } = mountWrapBox({}, 4);
+            expect(box.children.length).toBe(4);
+            (box as HTMLElement & { removeAll(): void }).removeAll();
+            expect(box.children.length).toBe(0);
+            expect(box.isConnected).toBe(true);
+            unmountAll();
+        });
+    });
 };

package/src/chrome.spec.ts

@@ -14,7 +14,7 @@
 // faking one.
 import { describe, expect, it } from '@gjsify/unit';
 
-import { ADW_SPINNER_MIN_SIZE, spinnerGeometry } from '@gjsify/adwaita-core';
+import { ADW_SPINNER_MIN_SIZE, ADW_SPINNER_TRACK_OPACITY, spinnerGeometry } from '@gjsify/adwaita-core';
 import {
     CLAMP_ALLOCATE_VECTORS,
     CLAMP_PROPERTY_VECTORS,
@@ -201,52 +201,86 @@ export const AdwChromeTest = async () => {
     });
 
     await describe('adw-spinner geometry (AdwSpinnerPaintable conformance vectors)', async () => {
+        /** The `<svg>` the element draws its ring into. */
+        const ringOf = (spinner: HTMLElement) => spinner.querySelector('svg') as SVGSVGElement;
+
         for (const { width, height, diameter, lineWidth, rule } of SPINNER_GEOMETRY_VECTORS) {
-            // The element is the ring itself, so only the square, allocatable
-            // boxes describe what a `size` attribute can produce.
+            // Only square, allocatable boxes describe what a `size` attribute
+            // can produce; the rectangular rows exercise the paintable directly.
             if (width !== height || width < ADW_SPINNER_MIN_SIZE) continue;
 
             await it(`size ${width} draws a ${diameter}px ring stroked ${lineWidth}px — ${rule}`, () => {
-                const { host } = mountSized(200);
+                const { host } = mountSized(400);
                 const spinner = document.createElement('adw-spinner');
                 spinner.setAttribute('size', String(width));
                 host.appendChild(spinner);
 
-                expect(spinner.offsetWidth).toBe(diameter);
-                expect(spinner.offsetHeight).toBe(diameter);
-                expect(Number.parseFloat(spinner.style.borderWidth)).toBe(lineWidth);
+                const svg = ringOf(spinner);
+                expect(svg.getAttribute('width')).toBe(String(diameter));
+                expect(svg.getAttribute('height')).toBe(String(diameter));
+                const arc = svg.querySelectorAll('circle')[1] as SVGCircleElement;
+                expect(Number(arc.getAttribute('stroke-width'))).toBe(lineWidth);
                 host.remove();
             });
         }
 
         await it('strokes 3px at 24 and 6px at 48, where it used to stroke 2 and 4', () => {
-            const { host } = mountSized(200);
+            const { host } = mountSized(400);
             const spinner = document.createElement('adw-spinner');
             host.appendChild(spinner);
             const strokeAt = (size: number) => {
                 spinner.setAttribute('size', String(size));
-                return Number.parseFloat(spinner.style.borderWidth);
+                return Number(ringOf(spinner).querySelector('circle')?.getAttribute('stroke-width'));
             };
             expect(strokeAt(24)).toBe(3);
             expect(strokeAt(48)).toBe(6);
             expect(strokeAt(64)).toBe(8);
             host.remove();
         });
+
+        await it('rounds its arc ends — GSK_LINE_CAP_ROUND, square-cut before', () => {
+            const { host } = mountSized(400);
+            const spinner = document.createElement('adw-spinner');
+            spinner.setAttribute('size', '64');
+            host.appendChild(spinner);
+            const [track, arc] = [...ringOf(spinner).querySelectorAll('circle')];
+            expect(arc.getAttribute('stroke-linecap')).toBe('round');
+            // The TRACK is the widget colour at CIRCLE_OPACITY, not a grey.
+            expect(track.getAttribute('stroke')).toBe('currentColor');
+            expect(Number(track.getAttribute('stroke-opacity'))).toBe(ADW_SPINNER_TRACK_OPACITY);
+            host.remove();
+        });
     });
 
-    await describe('adw-spinner sizing (adw_spinner_measure minimum = natural)', async () => {
+    await describe('adw-spinner sizing — the BOX and the RING are different things', async () => {
         for (const { value, size, rule } of SPINNER_SIZE_VECTORS) {
-            await it(`size ${JSON.stringify(value ?? null)} → a ${spinnerGeometry(size, size).diameter}px ring — ${rule}`, () => {
+            await it(`size ${JSON.stringify(value ?? null)} → a ${size}px box — ${rule}`, () => {
                 const { host } = mountSized(400);
                 const spinner = document.createElement('adw-spinner');
                 if (value !== null && value !== undefined) spinner.setAttribute('size', String(value));
                 host.appendChild(spinner);
 
-                expect(spinner.offsetWidth).toBe(spinnerGeometry(size, size).diameter);
+                // THE BOX takes the whole request — this suite used to assert the
+                // ring's diameter here, contradicting the core table it drives.
+                expect(spinner.offsetWidth).toBe(size);
+                expect(spinner.offsetHeight).toBe(size);
+                // THE RING is capped and centred inside it.
+                const svg = spinner.querySelector('svg') as SVGSVGElement;
+                expect(Number(svg.getAttribute('width'))).toBe(spinnerGeometry(size, size).diameter);
                 host.remove();
             });
         }
 
+        await it('a 200px spinner occupies 200px and draws a 64px ring', () => {
+            const { host } = mountSized(400);
+            const spinner = document.createElement('adw-spinner');
+            spinner.setAttribute('size', '200');
+            host.appendChild(spinner);
+            expect(spinner.offsetWidth).toBe(200);
+            expect(Number((spinner.querySelector('svg') as SVGSVGElement).getAttribute('width'))).toBe(64);
+            host.remove();
+        });
+
         await it('defaults to the measured 16, not the invented 24', () => {
             const { host } = mountSized(400);
             const spinner = document.createElement('adw-spinner');
@@ -256,6 +290,71 @@ export const AdwChromeTest = async () => {
         });
     });
 
+    await describe('adw-spinner animation + accessibility (#1066)', async () => {
+        await it('announces itself — role progressbar, aria-busy (zero hits before)', () => {
+            const { host } = mountSized(400);
+            const spinner = document.createElement('adw-spinner');
+            host.appendChild(spinner);
+            expect(spinner.getAttribute('role')).toBe('progressbar');
+            expect(spinner.getAttribute('aria-busy')).toBe('true');
+            host.remove();
+        });
+
+        await it('BREATHES — the drawn arc length changes across a turn', () => {
+            const { host } = mountSized(400);
+            const spinner = document.createElement('adw-spinner') as HTMLElement & { drawAt(now: number): void };
+            spinner.setAttribute('size', '64');
+            host.appendChild(spinner);
+            const arc = spinner.querySelectorAll('circle')[1] as SVGCircleElement;
+
+            const drawnAt = (ms: number) => {
+                spinner.drawAt(ms);
+                return Number.parseFloat((arc.getAttribute('stroke-dasharray') ?? '0').split(' ')[0]);
+            };
+            // `drawAt` takes the FIRST call as the origin, so these are offsets
+            // into one animation, sampled across a cycle.
+            const lengths = [0, 200, 500, 900, 1300, 1900].map(drawnAt);
+            const spread = Math.max(...lengths) - Math.min(...lengths);
+            // A fixed 90-degree border chase — what this element used to draw —
+            // has a spread of exactly zero.
+            expect(spread).toBeGreaterThan(0);
+            host.remove();
+        });
+
+        await it('KEEPS SPINNING under reduced motion — a frozen busy indicator reads as a hang', () => {
+            // libadwaita opts the spinner out of the animation setting on purpose
+            // (adw-spinner-paintable.c:537). The old stylesheet had
+            // `@media (prefers-reduced-motion: reduce) { animation: none }`, so
+            // this asserts the ABSENCE of any CSS animation to switch off: the
+            // arc is driven per frame from JS and cannot be disabled by a query.
+            const { host } = mountSized(400);
+            const spinner = document.createElement('adw-spinner');
+            host.appendChild(spinner);
+            expect(getComputedStyle(spinner).animationName).toBe('none');
+            host.remove();
+        });
+
+        await it('advances while mapped and stops when it is not', () => {
+            const { host } = mountSized(400);
+            const spinner = document.createElement('adw-spinner') as HTMLElement & { drawAt(now: number): void };
+            host.appendChild(spinner);
+            const arc = spinner.querySelectorAll('circle')[1] as SVGCircleElement;
+            spinner.drawAt(0);
+            const first = arc.getAttribute('stroke-dashoffset');
+            spinner.drawAt(400);
+            expect(arc.getAttribute('stroke-dashoffset')).not.toBe(first);
+
+            // Unmapping removes it from the shared ticker — `widget_map_cb`
+            // (adw-spinner-paintable.c:181-185) is what plays the animation, so
+            // an off-screen spinner burns nothing.
+            spinner.remove();
+            const parked = arc.getAttribute('stroke-dashoffset');
+            spinner.drawAt(800); // only reachable directly; the ticker has dropped it
+            expect(arc.getAttribute('stroke-dashoffset')).not.toBe(parked);
+            host.remove();
+        });
+    });
+
     await describe('adw-toolbar-view style classes (update_undershoots + the style setters)', async () => {
         for (const { input, view, topBar, bottomBar, rule } of TOOLBAR_VIEW_CLASS_VECTORS) {
             await it(`${input.topBarStyle}/${input.bottomBarStyle} → [${view.join(' ')}] — ${rule}`, () => {

package/src/elements/adw-action-row.ts

@@ -84,7 +84,17 @@ export class AdwActionRow extends HTMLElement {
     }
 
     connectedCallback() {
-        if (this._initialized) return;
+        if (this._initialized) {
+            // Re-entering a document. `disconnectedCallback` drops the
+            // sensitivity observer, and returning here without rebuilding it
+            // left a MOVED row permanently blind to its activatable widget
+            // becoming insensitive — the same shape that broke the overlay
+            // split view's ResizeObserver and both view switchers' page
+            // observers. Anything torn down on the way out has to be rebuilt
+            // on the way back in.
+            this._observeSensitivity(this._state.activatableWidget);
+            return;
+        }
         this._initialized = true;
 
         const prefixChildren = Array.from(this.querySelectorAll(':scope > [slot="prefix"]'));

package/src/elements/adw-combo-row.ts

@@ -85,6 +85,7 @@ export class AdwComboRow extends HTMLElement {
         this._state.subscribe((change) => {
             this._valueEl.textContent = change.label;
             if (this._select.selectedIndex !== change.selected) this._select.selectedIndex = change.selected;
+            this._syncChooser();
             if (!change.interactive) return;
             this.setAttribute('selected', String(change.selected));
             this.dispatchEvent(
@@ -101,6 +102,7 @@ export class AdwComboRow extends HTMLElement {
             this._state.select(this._select.selectedIndex);
         });
 
+        this._syncChooser();
         this._renderText();
     }
 
@@ -115,6 +117,21 @@ export class AdwComboRow extends HTMLElement {
         }
     }
 
+    /**
+     * `model_changed` (adw-combo-row.c:187-195) — one option or none is not a
+     * choice, so the arrow goes and the row stops being activatable.
+     *
+     * Both halves have to be expressed: `data-presents-chooser` gates the
+     * `.adw-row-value::after` mask in the stylesheet, and DISABLING the overlaid
+     * `<select>` is what makes the row inert — hiding the arrow alone would leave
+     * a row that still opens a one-entry popup on click.
+     */
+    private _syncChooser() {
+        const presents = this._state.presentsChooser;
+        this.dataset.presentsChooser = presents ? 'true' : 'false';
+        this._select.disabled = !presents;
+    }
+
     private _renderText() {
         // The `string_is_not_empty` label rule, from core — this block was one of
         // six hand-rolled copies, all of which omitted the TITLE half.