@gjsify/adwaita-web 0.41.0 → 0.43.0

package/src/adw-fonts.spec.ts

@@ -0,0 +1,188 @@
+// Does the Adwaita typeface actually SHIP, or is it only named?
+//
+// THE INCIDENT
+//
+// `src/index.ts` opened with `import '@gjsify/adwaita-fonts';` and the comment
+// "Registers @font-face (fontsource pattern)". It registered nothing. That
+// package's `.` export is `index.css`; under `gjsify build --app browser` the
+// css-as-string plugin turns a CSS import into `export default "<css>"`, and a
+// SIDE-EFFECT import of a module with no side effect is tree-shaken. Measured on
+// 0.41.0: a probe entry whose only statement is that import builds to a 0-byte
+// bundle with zero `@font-face`, exit 0. So every gjsify-built browser app using
+// this package declared `font-family: 'Adwaita Sans'` and registered no face.
+//
+// It survived for the package's whole life because the workstation it was
+// written on is a GNOME desktop with `adwaita-sans-fonts` installed system-wide
+// (24 matching `fc-list` rows). Every screenshot looked right. Every computed
+// `font-family` read back `'Adwaita Sans', …`. Both were true of a tree that
+// shipped no font.
+//
+// SO NOTHING HERE MAY READ A COMPUTED FONT
+//
+// `getComputedStyle(el).fontFamily` returns the DECLARED stack, and
+// `document.fonts.check()` answers yes for a face fontconfig supplies. Either
+// would pass on this host with the bug fully present — a green test that checked
+// nothing. So every assertion that has to be HOST-PROOF reads `document.fonts`
+// (the FontFaceSet) or the `CSSFontFaceRule`s of the injected sheet, and a
+// system-installed family appears in NEITHER: only faces this document
+// registered are there.
+//
+// ONE case is deliberately not host-proof and says so at the call site: "renders
+// distinct bolds" measures rendered WIDTHS, because whether the shipped bytes
+// carry a `wght` axis is invisible from the declaration. Its discriminator is
+// the `face.weight` assertion beside it, which fontconfig cannot satisfy.
+import { describe, expect, it } from '@gjsify/unit';
+
+import '@gjsify/adwaita-web';
+import { ADWAITA_FONTS_STYLE_ID, applyAdwaitaFonts } from './fonts.js';
+
+const FAMILY = 'Adwaita Sans';
+
+/** Family names round-trip through CSS serialisation, so compare unquoted. */
+const unquote = (value: string): string => value.trim().replace(/^['"]|['"]$/g, '');
+
+/** The document-registered faces for `FAMILY` — a system-installed one is never here. */
+const registeredFaces = (): FontFace[] => [...document.fonts].filter((face) => unquote(face.family) === FAMILY);
+
+/** Every `@font-face` rule of every same-origin sheet, as `CSSFontFaceRule`s. */
+const fontFaceRules = (sheet: CSSStyleSheet): CSSFontFaceRule[] => {
+    const out: CSSFontFaceRule[] = [];
+    // Indexed, not spread: `cssRules` is a LIVE list, and `unicorn/no-useless-spread`
+    // is right that copying it to iterate buys nothing.
+    for (let index = 0; index < sheet.cssRules.length; index++) {
+        const rule = sheet.cssRules[index];
+        if (rule instanceof CSSFontFaceRule) out.push(rule);
+    }
+    return out;
+};
+
+/** The `<style>` element carrying an id, or `null`. */
+const sheetOf = (id: string): CSSStyleSheet | null => {
+    const element = document.getElementById(id) as HTMLStyleElement | null;
+    return element?.sheet ?? null;
+};
+
+/** Rendered width of a fixed string in `FAMILY` at `weight`, at a size that makes the difference readable. */
+const widthAt = (weight: number): number => {
+    const span = document.createElement('span');
+    span.style.cssText = `position:absolute;white-space:pre;font-size:64px;font-family:'${FAMILY}';font-weight:${weight}`;
+    span.textContent = 'Hamburgefonstiv';
+    document.body.appendChild(span);
+    const width = span.getBoundingClientRect().width;
+    span.remove();
+    return width;
+};
+
+export const AdwFontsTest = async () => {
+    await describe('the adwaita-web root entry', async () => {
+        // THE DISCRIMINATOR for everything below: this runs BEFORE the opt-in, on
+        // a host that HAS the family installed. If `registeredFaces()` could be
+        // satisfied by fontconfig, this would already be non-empty and the
+        // "after" assertions would prove nothing.
+        await it('registers no face of its own — the family is only NAMED', async () => {
+            expect(registeredFaces().length).toBe(0);
+        });
+
+        await it('carries no @font-face in its stylesheet, which is the size decision', async () => {
+            // PINNED, not incidental. Inlining the two faces as base64 is
+            // 2.39 MB / 1.18 MB gzip against a 190 KB / 26 KB stylesheet, and
+            // `--app browser` has no code splitting, so a lazy face costs the same
+            // bytes as an eager one. If that trade is ever revisited (a subsetted
+            // woff2 would change it), this assertion is where the decision is
+            // recorded and has to be re-argued.
+            const sheet = sheetOf('adwaita-web-style');
+            expect(sheet).not.toBeNull();
+            expect(fontFaceRules(sheet as CSSStyleSheet).length).toBe(0);
+        });
+    });
+
+    // The removal below is an INVARIANT of this suite, not tidiness: a registered
+    // webface changes text METRICS for every element in the document, and this
+    // package's suite is full of layout assertions that measure text —
+    // `<adw-header-bar>`'s "ellipsizes instead of painting the title over the
+    // buttons" is one, and it went red in a discriminator run where the face 404'd
+    // mid-suite. `finally` is what MAKES it hold: it runs whether the body threw or
+    // not, so the cleanup no longer depends on the last case being reached, on it
+    // staying last, or on this suite staying last in `test.browser.mts`. The
+    // `it('leaves the document as it found it')` inside states the invariant; this
+    // guarantees it.
+    try {
+        await describe('applyAdwaitaFonts', async () => {
+            await it('registers both shipped faces in document.fonts', async () => {
+                expect(applyAdwaitaFonts()).toBe(true);
+
+                const faces = registeredFaces();
+                expect(faces.length).toBe(2);
+                expect(
+                    faces
+                        .map((face) => face.style)
+                        .sort()
+                        .join(','),
+                ).toBe('italic,normal');
+                // The RANGE, not `400`. Both TTFs are variable fonts (`fvar`:
+                // wght 100-900), and a face declared `font-weight: 400` pins the
+                // axis there and leaves the engine to synthesise every bolder
+                // weight — while `dist/adwaita-web.css` asks for 700 at 27
+                // declarations and 800 at 6. Host-proof: a system-installed face
+                // never appears in `document.fonts`, so fontconfig cannot satisfy
+                // this even on a GNOME desktop.
+                for (const face of faces) expect(face.weight).toBe('100 900');
+            });
+
+            await it('the faces are self-contained data: URIs, not a relative url()', async () => {
+                // The half a `@font-face` COUNT cannot see. Keeping the string alive
+                // is not enough: `src: url('./files/adwaita-sans-400.ttf')` resolves
+                // against the DOCUMENT, and a `--app browser` build emits one file
+                // and no assets, so that rule parses and then 404s.
+                const sheet = sheetOf(ADWAITA_FONTS_STYLE_ID);
+                expect(sheet).not.toBeNull();
+                const rules = fontFaceRules(sheet as CSSStyleSheet);
+                expect(rules.length).toBe(2);
+                for (const rule of rules) {
+                    expect(unquote(rule.style.getPropertyValue('font-family'))).toBe(FAMILY);
+                    expect(rule.style.getPropertyValue('src')).toContain('data:font/ttf;base64,');
+                    expect(rule.style.getPropertyValue('src')).not.toContain('./files/');
+                }
+            });
+
+            await it('the engine can LOAD the registered face, not merely see the rule', async () => {
+                // The effect, not the state. A `@font-face` whose payload the engine
+                // cannot parse sits in `document.fonts` with `status: "error"`, and a
+                // rule-count assertion is happy with it.
+                const loaded = await document.fonts.load(`400 16px '${FAMILY}'`);
+                expect(loaded.length).toBeGreaterThan(0);
+                for (const face of loaded) expect(face.status).toBe('loaded');
+            });
+
+            await it('renders distinct bolds rather than one synthesised weight', async () => {
+                // What the declaration alone cannot prove: that the shipped BYTES
+                // really carry a `wght` axis. A face clamped to one weight leaves the
+                // engine to fake every bold, and a fake is one stroke-widening applied
+                // to the same outlines — so 700 and 800 come out PIXEL-IDENTICAL
+                // (measured on the clamp: 499.683 px for both, against 517.767 /
+                // 533.283 with the range). Comparing 400 against 700 would NOT see
+                // that; a synthetic bold is wider than regular too.
+                //
+                // This one reads the rendered EFFECT, so unlike the assertions above
+                // it is not by itself host-proof — a fontconfig-supplied variable
+                // Adwaita Sans would also give three widths. Its discriminator is the
+                // `face.weight` assertion above, which fontconfig can never satisfy.
+                await document.fonts.load(`700 64px '${FAMILY}'`);
+                await document.fonts.load(`800 64px '${FAMILY}'`);
+                expect(widthAt(700)).not.toBe(widthAt(800));
+            });
+
+            await it('is idempotent — a second call neither injects nor duplicates', async () => {
+                expect(applyAdwaitaFonts()).toBe(false);
+                expect(registeredFaces().length).toBe(2);
+            });
+
+            await it('leaves the document as it found it', async () => {
+                document.getElementById(ADWAITA_FONTS_STYLE_ID)?.remove();
+                expect(registeredFaces().length).toBe(0);
+            });
+        });
+    } finally {
+        document.getElementById(ADWAITA_FONTS_STYLE_ID)?.remove();
+    }
+};

package/src/adw-icon.spec.ts

@@ -37,9 +37,15 @@ export const AdwIconTest = async () => {
                 // The base class is unconditional: a nameless icon is still an icon box,
                 // which `<adw-status-page>` hides rather than omits.
                 expect(el.classList.contains('adw-icon')).toBe(true);
-                // …and NOTHING else is on the node — the assertion a hand-rolled copy
-                // cannot make, where `icon-name="a b"` leaves a stray `b`.
-                expect(extraClasses(el)).toStrictEqual(normalized === '' ? [] : [`adw-icon--${normalized}`]);
+                // …and EXACTLY ONE mask class is on it — the assertion a hand-rolled copy
+                // cannot make, where `icon-name="a b"` left a stray `b`. A name that was
+                // GIVEN but is unusable falls back to the glyph GTK falls back to, so only
+                // an absent or empty name leaves the node classless.
+                // Spelled out rather than reusing the impl's own predicate, so the
+                // expectation cannot agree with a wrong implementation.
+                let drawn = normalized;
+                if (drawn === '' && (icon ?? '') !== '') drawn = 'image-missing';
+                expect(extraClasses(el)).toStrictEqual(drawn === '' ? [] : [`adw-icon--${drawn}`]);
                 host.remove();
             });
         }
@@ -110,8 +116,9 @@ export const AdwIconTest = async () => {
             const { el, host } = mount<AdwMenuButton>('adw-menu-button');
             el.setAttribute('icon-name', 'a b');
             const icon = el.querySelector('.adw-icon') as HTMLElement;
-            // `adw-icon--a b` would have added a second, unrelated `b` class.
-            expect(extraClasses(icon)).toStrictEqual(['adw-menu-button-icon']);
+            // `adw-icon--a b` would have added a second, unrelated `b` class. What it gets
+            // instead is the ONE fallback class, not two tokens and not none.
+            expect(extraClasses(icon)).toStrictEqual(['adw-icon--image-missing', 'adw-menu-button-icon']);
             host.remove();
         });
 
@@ -124,9 +131,11 @@ export const AdwIconTest = async () => {
             ];
             const items = [...el.querySelectorAll('.adw-menu-button-item')];
             expect(items.length).toBe(3);
-            // An unusable name draws nothing rather than injecting markup, and
-            // an entry with no icon still gets no icon node at all.
-            expect(items[0].querySelector('.adw-icon')).toBe(null);
+            // An entry that ASKED for an icon keeps its slot even when the name is
+            // unusable — it shows the broken glyph, which is what tells the author the
+            // name is wrong. Only an entry with no `icon` key gets no node at all.
+            const bad = items[0].querySelector('.adw-icon') as HTMLElement;
+            expect(extraClasses(bad)).toStrictEqual(['adw-icon--image-missing', 'adw-menu-button-item-icon']);
             expect(items[2].querySelector('.adw-icon')).toBe(null);
             const good = items[1].querySelector('.adw-icon') as HTMLElement;
             expect(extraClasses(good)).toStrictEqual(['adw-icon--view-refresh', 'adw-menu-button-item-icon']);

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

@@ -188,7 +188,12 @@ export const AdwRowStateTest = async () => {
             expect(buttons.length).toBe(3);
             expect(group.active).toBe(1);
             expect(buttons[1].classList.contains('active')).toBe(true);
-            expect(buttons[1].getAttribute('aria-pressed')).toBe('true');
+            // `aria-checked`, not `aria-pressed`: upstream declares the group a
+            // `RADIO_GROUP` and each toggle a `RADIO` (adw-toggle-group.c:1191, :860),
+            // and `aria-pressed` is the independent toolbar toggle-BUTTON pattern. This
+            // line pinned the wrong one until the roles landed.
+            expect(buttons[1].getAttribute('aria-checked')).toBe('true');
+            expect(buttons[1].getAttribute('role')).toBe('radio');
 
             buttons[2].click();
             expect(group.active).toBe(2);
@@ -205,6 +210,11 @@ export const AdwRowStateTest = async () => {
             group.active = 0;
             expect(group.active).toBe(0);
             expect(buttons[0].classList.contains('active')).toBe(true);
+            // The roving tabindex and the state attribute move with the pill. Reading
+            // only `classList` here would pass on a `_render` that repainted the group
+            // and left Tab entering on the toggle that is no longer active.
+            expect(buttons.map((btn) => btn.tabIndex)).toStrictEqual([0, -1, -1]);
+            expect(buttons.map((btn) => btn.getAttribute('aria-checked'))).toStrictEqual(['true', 'false', 'false']);
             expect(events.details.length).toBe(1);
 
             events.stop();

package/src/breakpoints.ts

@@ -46,6 +46,15 @@ export function addBreakpoints(element: Element, breakpoints: readonly AdwBreakp
  * of an `Adw.Breakpoint` with one `add_setter()` call. Returns a dispose function; call it
  * before re-binding and on disconnect.
  *
+ * `applied` is what the binding being REPLACED had last set, and it is not optional
+ * bookkeeping: an element rebinds on every connect, and a fresh `AdwBreakpoint` starts
+ * at `false` while firing on transitions only. Without carrying it over, a view the
+ * breakpoint had collapsed and that then moves into a WIDE parent evaluates
+ * `matches === applied === false` and never hears `onUnapply` — measured stuck at
+ * `collapsed` after 800px → 500px → 900px. Pass what the setter last received, never
+ * what the attribute currently says: markup that declares the state itself was never
+ * this breakpoint's doing and must not be undone by it.
+ *
  * A missing or unparsable condition binds nothing and returns a no-op, leaving whatever
  * the attribute already says untouched — an element must not silently flip state because
  * its condition had a typo.
@@ -54,11 +63,16 @@ export function bindBreakpointSetter(
     element: Element,
     condition: string | null,
     setValue: (active: boolean) => void,
+    applied = false,
 ): () => void {
     if (!condition) return () => {};
-    const breakpoint = new AdwBreakpoint(condition, {
-        onApply: () => setValue(true),
-        onUnapply: () => setValue(false),
-    });
+    const breakpoint = new AdwBreakpoint(
+        condition,
+        {
+            onApply: () => setValue(true),
+            onUnapply: () => setValue(false),
+        },
+        applied,
+    );
     return addBreakpoints(element, [breakpoint]);
 }

package/src/connect-lifecycle.spec.ts

@@ -0,0 +1,351 @@
+// "Evaluated once at connect time", driven over EVERY element the package registers.
+//
+// THE INCIDENT, in two shapes
+//
+//   1. `<adw-toolbar-view>` documents `topBar` as the imperative append point and then
+//      derives `topEl.hidden = childElementCount === 0` inside the `_initialized` guard,
+//      never again. A header bar appended AFTER connect therefore sits in the DOM with
+//      the right classes at offsetHeight 0 — the compiled sheet ends with a global
+//      `[hidden] { display: none !important }`, so the widget's own `display: flex` does
+//      not win — while the IDENTICAL declared bar renders at 48px. Six getters across
+//      three files had it.
+//   2. Most element classes open `connectedCallback` with an `_initialized` early
+//      return. For the ones that also tear something down in `disconnectedCallback`, a
+//      bare re-parent — a slideshow slide, a client-side route, moving a node between
+//      two containers — dropped the outside binding and never restored it.
+//
+// A per-widget spec is one more spec per widget to forget, and both shapes were found
+// by reading rather than by a failing test. So neither list here is written down:
+// {@link registeredElements} reads the CustomElementRegistry and {@link containerGetters}
+// reads the accessor shape, so a container written in that shape enrols itself.
+//
+// Its static sibling is `scripts/check-adwaita-connect-rebind.mjs`, which holds shape 2
+// at the source level, where a missing rebind is visible without a widget that shows it.
+import { describe, expect, it } from '@gjsify/unit';
+
+import * as adwaitaWeb from './index.js';
+
+/**
+ * Elements that cannot RENDER a child, however the DOM lets you append one. A container
+ * getter returning one of these is an imperative handle (`<adw-entry>.input`, for
+ * focus and selection), not an append point, and appending to it measures 0 forever.
+ * The HTML void-element set, not a per-widget ledger — a new container still enrols
+ * itself; only a new void element in the spec would need a line here.
+ */
+const NON_RENDERING = new Set([
+    'input',
+    'img',
+    'br',
+    'hr',
+    'area',
+    'base',
+    'col',
+    'embed',
+    'link',
+    'meta',
+    'source',
+    'track',
+    'wbr',
+]);
+
+/**
+ * Undo the two states in which a correctly-built widget legitimately reads
+ * `display: none`, so the driver measures the widget and not the state. Both cost a
+ * reviewer real time: a driver without this goes red on correct code, which is worse
+ * than the bug it hunts.
+ *
+ * Asked of the ELEMENT, not looked up per tag: every dialog answers `present()`, so a
+ * fifth one enrols itself instead of failing the day it grows a container getter. The
+ * expander is keyed by tag because "collapsed" is its own idea and nothing else has it.
+ *
+ * Everything else is expected to lay a child out with no setup at all, which is what
+ * "append here imperatively" promises.
+ */
+function reveal(el: HTMLElement): void {
+    // `<adw-dialog>.contentArea` and every dialog after it are merely not PRESENTED —
+    // `display: none` until `present()`, exactly as `Adw.Dialog` is until it is pushed.
+    const dialog = el as HTMLElement & { present?: () => void };
+    if (typeof dialog.present === 'function') dialog.present();
+    // `<adw-expander-row>.contentSection` is merely COLLAPSED — it is the disclosure.
+    if (el.localName === 'adw-expander-row') el.setAttribute('expanded', '');
+}
+
+/**
+ * Every tag the package registers, asked of the registry that registered them, next to
+ * every exported element class the registry does NOT know.
+ *
+ * The second half is a `define` that was dropped or renamed: those tags would silently
+ * leave this whole driver. It is REPORTED rather than asserted here, because this runs
+ * at namespace level — an `expect` that throws out here escapes `runTests`, and the
+ * runner's promise chain never reaches `browserSignalDone()`, so the page never sets
+ * `data-tests-done` and Playwright kills the leg on a timeout naming no test. This
+ * namespace is registered FIRST, so that would take all of adwaita-web's browser
+ * assertions with it and report none of them.
+ */
+function registeredElements(): { tags: string[]; unregistered: string[] } {
+    const tags: string[] = [];
+    const unregistered: string[] = [];
+    for (const exported of Object.values(adwaitaWeb)) {
+        if (typeof exported !== 'function' || !(exported.prototype instanceof HTMLElement)) continue;
+        const tag = customElements.getName(exported as CustomElementConstructor);
+        if (tag === null) unregistered.push(exported.name);
+        else tags.push(tag);
+    }
+    return { tags: tags.sort(), unregistered: unregistered.sort() };
+}
+
+/**
+ * The containers a consumer is invited to append into, derived from the accessor SHAPE:
+ * a getter with NO setter whose value is an element this one already CONTAINS.
+ *
+ * Each half earns its place. No setter, because a container you append into is not one
+ * you replace by assignment — that is what separates `topBar` from `anchor` and
+ * `activatableWidget`. Contained, because the handle has to be part of THIS widget's
+ * own subtree — `<adw-popover>.anchor` defaults to `parentElement` and is not. And a
+ * value that is not an element at all (`items`, `groups`, a `null` slot on an empty
+ * widget) is nothing to append to.
+ *
+ * So this enrols the SHAPE the six containers of the incident have, not every possible
+ * one: a container exposed as a get/set pair, or one the widget only attaches once it
+ * has children, is invisible here and needs its own coverage.
+ */
+function containerGetters(el: HTMLElement): Array<[string, HTMLElement]> {
+    const found: Array<[string, HTMLElement]> = [];
+    for (let proto = Object.getPrototypeOf(el); proto && proto !== HTMLElement.prototype;) {
+        for (const [name, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(proto))) {
+            if (typeof descriptor.get !== 'function' || descriptor.set !== undefined) continue;
+            const value: unknown = descriptor.get.call(el);
+            if (!(value instanceof HTMLElement) || value === el || !el.contains(value)) continue;
+            if (NON_RENDERING.has(value.localName)) continue;
+            found.push([name, value]);
+        }
+        proto = Object.getPrototypeOf(proto);
+    }
+    return found.sort(([a], [b]) => a.localeCompare(b));
+}
+
+/** A visible host of a known size, so a collapsed child cannot hide behind a 0-width page. */
+function visibleHost(): HTMLElement {
+    const host = document.createElement('div');
+    host.style.width = '800px';
+    host.style.height = '600px';
+    document.body.appendChild(host);
+    return host;
+}
+
+/** A slotted split-view pane, so the two slot names are spelled once and not inside markup. */
+function pane(slot: string): HTMLElement {
+    const el = document.createElement('div');
+    el.setAttribute('slot', slot);
+    el.textContent = slot;
+    return el;
+}
+
+/** A child with a size of its OWN, so the box measured is the container's answer, not the content's. */
+function probe(): HTMLElement {
+    const box = document.createElement('div');
+    box.style.width = '24px';
+    box.style.height = '24px';
+    // A flex container would otherwise shrink it to nothing and the measurement would
+    // say "collapsed" about a container that is perfectly fine.
+    box.style.flex = '0 0 auto';
+    return box;
+}
+
+/** Two frames: one for the append to land, one for anything a MutationObserver schedules. */
+async function settle(): Promise<void> {
+    await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+}
+
+/** `laid out`, or the real numbers — a bare `false` names neither the widget nor the size. */
+function verdict(el: HTMLElement): string {
+    const box = el.getBoundingClientRect();
+    if (box.width <= 0 || box.height <= 0) return `collapsed ${Math.round(box.width)}x${Math.round(box.height)}`;
+    // A box is not a pixel. `visibility` INHERITS, so a container that hid its subtree
+    // that way leaves the child measuring its full 24x24 — one read on the CHILD is
+    // enough to tell the two apart, and no walk up the tree is needed.
+    if (getComputedStyle(el).visibility === 'hidden') return 'invisible';
+    const onScreen = box.bottom > 0 && box.top < window.innerHeight && box.right > 0 && box.left < window.innerWidth;
+    return onScreen ? 'laid out' : `off-screen at ${Math.round(box.left)},${Math.round(box.top)}`;
+}
+
+/** `same box`, or both sizes — the numbers are what says whether a difference is real. */
+function boxDelta(a: HTMLElement, b: HTMLElement): string {
+    const x = a.getBoundingClientRect();
+    const y = b.getBoundingClientRect();
+    const same = Math.abs(x.width - y.width) < 1 && Math.abs(x.height - y.height) < 1;
+    return same
+        ? 'same box'
+        : `${x.width.toFixed(2)}x${x.height.toFixed(2)} vs ${y.width.toFixed(2)}x${y.height.toFixed(2)}`;
+}
+
+/**
+ * The rendered SHAPE of a subtree — tags, classes and what is hidden, no text and no
+ * generated ids. It is what a re-parent must not change: two elements built the same
+ * way differ here only because one of them derived something from where it was built.
+ */
+function skeleton(el: Element): string {
+    const classes = [...el.classList].sort().join('.');
+    const hidden = (el as HTMLElement).hidden ? '[hidden]' : '';
+    const children = [...el.children].map(skeleton).join(',');
+    return `${el.localName}${classes === '' ? '' : `.${classes}`}${hidden}(${children})`;
+}
+
+export const AdwConnectLifecycleTest = async () => {
+    const { tags, unregistered } = registeredElements();
+
+    await describe('imperative append points', async () => {
+        await it('finds the elements and their containers', async () => {
+            // A dropped or renamed `define`, named as ONE failing test: the tags it
+            // carries would otherwise leave this driver with nothing going red.
+            expect(`unregistered: ${unregistered.join(', ')}`).toBe('unregistered: ');
+            // A scan that finds nothing passes vacuously, and every `it` below it would
+            // report a green it never earned. Floors, not exact counts: the point of the
+            // derivation is that both numbers grow without this file being edited.
+            expect(tags.length > 40).toBe(true);
+            const containers = tags.flatMap((tag) => {
+                const host = visibleHost();
+                const el = document.createElement(tag);
+                host.appendChild(el);
+                reveal(el);
+                const names = containerGetters(el).map(([name]) => `${tag}.${name}`);
+                host.remove();
+                return names;
+            });
+            expect(containers.length > 5).toBe(true);
+        });
+
+        for (const tag of tags) {
+            await it(`<${tag}> lays out a child appended after connect`, async () => {
+                const host = visibleHost();
+                const el = document.createElement(tag);
+                host.appendChild(el);
+                reveal(el);
+
+                const containers = containerGetters(el);
+                const probes = containers.map(([name, container]) => {
+                    const child = probe();
+                    container.appendChild(child);
+                    return [name, child] as const;
+                });
+                await settle();
+
+                const report = probes.map(([name, child]) => `${name}: ${verdict(child)}`).join(' | ');
+                const wanted = probes.map(([name]) => `${name}: laid out`).join(' | ');
+                // Measure, THEN tear down, THEN assert: a failing expectation throws, and
+                // a host left on the page pushes every later one down until the next
+                // widget is measured off-screen. That cascade turned one real failure
+                // into four, three of which named the wrong widget.
+                host.remove();
+                expect(`<${tag}> ${report}`).toBe(`<${tag}> ${wanted}`);
+            });
+        }
+    });
+
+    await describe('re-parent', async () => {
+        for (const tag of tags) {
+            await it(`<${tag}> survives a move out of a display:none parent`, async () => {
+                // The reproduction shape the incident named: built where there is no
+                // layout at all, then moved somewhere there is.
+                const dark = visibleHost();
+                dark.style.display = 'none';
+                const moved = document.createElement(tag);
+                dark.appendChild(moved);
+                reveal(moved);
+
+                // THREE hosts, one widget each. Put the two in one host and the row
+                // stylesheets separate them for us: `:last-child` drops the hairline, so
+                // the reference row measured 52px and the moved one 51px — a difference
+                // in the SETUP, reported against `<adw-expander-row>` and `<adw-spin-row>`.
+                const control = visibleHost();
+                const fresh = document.createElement(tag);
+                control.appendChild(fresh);
+                reveal(fresh);
+
+                const light = visibleHost();
+                light.appendChild(moved);
+                reveal(moved);
+                await settle();
+
+                // Built in the dark and moved into the light, a widget must be
+                // indistinguishable from one built here — same rendered shape, same box.
+                // BOTH skeletons on a mismatch: one of them alone leaves the reader to
+                // reproduce the run to find out what actually differed.
+                const shape =
+                    skeleton(moved) === skeleton(fresh) ? 'same shape' : `${skeleton(moved)} vs ${skeleton(fresh)}`;
+                const size = boxDelta(moved, fresh);
+                dark.remove();
+                control.remove();
+                light.remove();
+                expect(`<${tag}> ${shape}`).toBe(`<${tag}> same shape`);
+                expect(`<${tag}> ${size}`).toBe(`<${tag}> same box`);
+            });
+        }
+    });
+
+    // Shape and box are blind to a binding that reaches OUTSIDE the element — a dead
+    // MediaQuery or document listener changes nothing until something fires it. These
+    // two fire it. Both split views are driven, the overlay one as the control: it
+    // already split `_buildOnce` from `_bindToDocument`, so a probe that cannot tell the
+    // two apart is measuring nothing.
+    await describe('outside bindings after a re-parent', async () => {
+        for (const tag of ['adw-navigation-split-view', 'adw-overlay-split-view']) {
+            await it(`<${tag}> still tracks its breakpoint after a move`, async () => {
+                const first = visibleHost();
+                const view = document.createElement(tag);
+                view.setAttribute('breakpoint', 'max-width: 720px');
+                view.append(pane('sidebar'), pane('content'));
+                first.appendChild(view);
+                await settle();
+                const wide = view.hasAttribute('collapsed') ? 'collapsed' : 'expanded';
+
+                const second = visibleHost();
+                second.appendChild(view);
+                second.style.width = '500px';
+                await settle();
+                const narrow = view.hasAttribute('collapsed') ? 'collapsed' : 'expanded';
+
+                // BOTH directions, because only one of them needs the carried state.
+                // Collapsing after a move works off a fresh breakpoint (false → true is a
+                // transition); coming back WIDE does not, and a breakpoint rebuilt at
+                // `applied = false` matches its own start state and never unapplies. The
+                // view stayed collapsed at 900px in both engines until the rebind carried
+                // what the last one had set.
+                const third = visibleHost();
+                third.style.width = '900px';
+                third.appendChild(view);
+                await settle();
+                const again = view.hasAttribute('collapsed') ? 'collapsed' : 'expanded';
+
+                first.remove();
+                second.remove();
+                third.remove();
+                expect(`<${tag}> 800px:${wide} → 500px:${narrow} → 900px:${again}`).toBe(
+                    `<${tag}> 800px:expanded → 500px:collapsed → 900px:expanded`,
+                );
+            });
+        }
+
+        await it('<adw-popover> still dismisses on an outside click after a move', async () => {
+            const first = visibleHost();
+            const popover = document.createElement('adw-popover');
+            first.appendChild(popover);
+            (popover as HTMLElement & { popup(): void }).popup();
+
+            const second = visibleHost();
+            second.appendChild(popover);
+            const outside = visibleHost();
+            outside.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
+            const afterClick = popover.hasAttribute('open') ? 'still open' : 'dismissed';
+
+            (popover as HTMLElement & { popup(): void }).popup();
+            document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+            const afterEscape = popover.hasAttribute('open') ? 'still open' : 'dismissed';
+
+            first.remove();
+            second.remove();
+            outside.remove();
+            expect(`click:${afterClick} escape:${afterEscape}`).toBe('click:dismissed escape:dismissed');
+        });
+    });
+};