@gjsify/adwaita-web 0.40.0 → 0.42.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-header-bar.spec.ts

@@ -36,6 +36,47 @@ function centerWidget(text: string): HTMLElement {
 /** Remove every header bar a test mounted. */
 function unmountAll(): void {
     for (const bar of Array.from(document.querySelectorAll('adw-header-bar'))) bar.remove();
+    for (const host of Array.from(document.querySelectorAll('[data-header-bar-host]'))) host.remove();
+}
+
+/** The long title both geometry tests use, so the narrow bar really has to give way. */
+const LONG_TITLE = 'A very very long document title indeed';
+
+/**
+ * A header bar of a fixed width, one start button and two end buttons.
+ *
+ * The asymmetry is the point: it is what tells "centred on the BAR" apart from
+ * "centred in the space the buttons left over".
+ */
+function mountSizedHeaderBar(width: number): HTMLElement {
+    const host = document.createElement('div');
+    host.setAttribute('data-header-bar-host', '');
+    host.style.width = `${width}px`;
+    document.body.appendChild(host);
+
+    const bar = document.createElement('adw-header-bar');
+    bar.setAttribute('title', LONG_TITLE);
+    for (const [slot, count] of [
+        ['start', 1],
+        ['end', 2],
+    ] as const) {
+        for (let i = 0; i < count; i++) {
+            const button = document.createElement('button');
+            button.className = 'adw-header-btn';
+            button.setAttribute('slot', slot);
+            button.textContent = '+';
+            bar.appendChild(button);
+        }
+    }
+    // Appended LAST: the sections are built in `connectedCallback`, so the slotted
+    // children have to be in place before the bar enters the document.
+    host.appendChild(bar);
+    return bar;
+}
+
+/** The rect of one part of a mounted header bar. */
+function rectOf(bar: HTMLElement, selector: string): DOMRect {
+    return (bar.querySelector(selector) as HTMLElement).getBoundingClientRect();
 }
 
 export const AdwHeaderBarTest = async () => {
@@ -113,4 +154,55 @@ export const AdwHeaderBarTest = async () => {
             unmountAll();
         });
     });
+
+    // `Adw.HeaderBar` lays its three sections out with a `GtkCenterBox`
+    // (adw-header-bar.c:992), whose two rules pull in opposite directions and were
+    // each broken on their own once. Both are asserted here, because a fix for
+    // either one is exactly what breaks the other:
+    //
+    //   - the centre is centred on the WHOLE bar, not in the space the sides left
+    //     over, so a bar with unequal sides still shows its title in the middle;
+    //   - `shrink_center_last` is FALSE, so the centre is clamped to
+    //     `size - (start.natural + end.natural)` and pushed in from either side
+    //     (gtkcenterlayout.c:155-157). The TITLE gives way, never the buttons.
+    await describe('<adw-header-bar> centre placement (GtkCenterBox)', async () => {
+        await it('centres the title on the BAR even when the two sides differ', () => {
+            const bar = mountSizedHeaderBar(600);
+            const barBox = bar.getBoundingClientRect();
+            const start = rectOf(bar, '.adw-header-bar-start');
+            const end = rectOf(bar, '.adw-header-bar-end');
+            const title = rectOf(bar, '.adw-window-title-title');
+
+            // The discriminator: with equal sides, centring on the bar and centring
+            // between the buttons are the same answer and this proves nothing.
+            expect(Math.round(end.width) > Math.round(start.width)).toBe(true);
+
+            const off = Math.abs((title.left + title.right) / 2 - (barBox.left + barBox.right) / 2);
+            expect(off <= 1).toBe(true);
+            unmountAll();
+        });
+
+        await it('ellipsizes instead of painting the title over the buttons', () => {
+            const bar = mountSizedHeaderBar(260);
+            const barBox = bar.getBoundingClientRect();
+            const start = rectOf(bar, '.adw-header-bar-start');
+            const end = rectOf(bar, '.adw-header-bar-end');
+            const centre = rectOf(bar, '.adw-header-bar-center');
+            const titleEl = bar.querySelector('.adw-window-title-title') as HTMLElement;
+
+            // The discriminator: the untruncated title really is wider than the whole
+            // bar, so there is a collision to avoid in the first place.
+            expect(titleEl.scrollWidth > Math.round(barBox.width)).toBe(true);
+
+            // A centred grid item is sized `fit-content`, whose floor is its own
+            // min-content — the whole `nowrap` string. That drew the centre section
+            // 277px wide in a 260px bar, starting outside it and running over all
+            // three buttons. Stretched into its track it can only be the leftover.
+            expect(centre.left >= start.right - 0.5).toBe(true);
+            expect(centre.right <= end.left + 0.5).toBe(true);
+            expect(centre.left >= barBox.left - 0.5 && centre.right <= barBox.right + 0.5).toBe(true);
+            expect(titleEl.scrollWidth > titleEl.clientWidth).toBe(true);
+            unmountAll();
+        });
+    });
 };

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/adw-tab-view.spec.ts

@@ -8,6 +8,10 @@ import { describe, expect, it } from '@gjsify/unit';
 
 import type { AdwTabView } from './elements/adw-tab-view.js';
 
+function chips(view: AdwTabView): HTMLButtonElement[] {
+    return Array.from(view.querySelectorAll('.adw-tab')) as HTMLButtonElement[];
+}
+
 function makeTabView(attrs = ''): AdwTabView {
     const host = document.createElement('div');
     host.innerHTML = `<adw-tab-view ${attrs}>
@@ -111,4 +115,151 @@ export const AdwTabViewTest = async () => {
             view.parentElement?.remove();
         });
     });
+
+    // Switching a tab scrolls the TAB STRIP and nothing else. In C that is not a rule
+    // anyone has to keep, it is the shape of the API: `scroll_to_tab_full` writes
+    // `self->adjustment`, the strip's own adjustment
+    // (refs/libadwaita/src/adw-tab-box.c:928-961), and `select_page` is its only caller
+    // on a selection (:1728). The DOM has no equally narrow move, because `focus()` and
+    // `scrollIntoView()` both walk every scrollable ancestor up to the window, so the
+    // port handed the document a 6567px jump on a single ArrowRight, measured in a
+    // documentation page long enough to have somewhere to jump to.
+    await describe('adw-tab-view keyboard selection scrolls the STRIP, not the page', async () => {
+        const BAR_WIDTH = 220;
+        const CHIP_WIDTH = 90;
+
+        /** A view parked far below the fold, so a window scroll is the only way to reveal it. */
+        function makeFarBelowTheFold(count = 6): { view: AdwTabView; host: HTMLElement } {
+            const host = document.createElement('div');
+            const spacer = document.createElement('div');
+            spacer.style.height = '4000px';
+            host.appendChild(spacer);
+            const inner = document.createElement('div');
+            inner.style.width = `${BAR_WIDTH}px`;
+            host.appendChild(inner);
+            document.body.appendChild(host);
+
+            const view = document.createElement('adw-tab-view') as AdwTabView;
+            inner.appendChild(view);
+            for (const id of 'abcdefgh'.slice(0, count)) view.appendPage({ id, title: `Page ${id}` });
+            return { view, host };
+        }
+
+        await it('ArrowRight moves focus without moving the window', async () => {
+            const { view, host } = makeFarBelowTheFold();
+            window.scrollTo(0, 0);
+            // The precondition IS the test: with the widget already on screen the
+            // browser would not scroll either way, and this would pass on the bug.
+            expect(view.getBoundingClientRect().top > window.innerHeight).toBe(true);
+
+            const before = window.scrollY;
+            chips(view)[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+
+            expect(view.selectedId).toBe('b');
+            // Focus still travels with the roving tabindex; what changed is where the
+            // browser may scroll, not whether the chip is focused.
+            expect(document.activeElement).toBe(chips(view)[1]);
+            expect(window.scrollY).toBe(before);
+
+            host.remove();
+            window.scrollTo(0, 0);
+        });
+
+        await it('End brings the last chip into the bar by scrolling the BAR', async () => {
+            const { view, host } = makeFarBelowTheFold();
+            window.scrollTo(0, 0);
+            const bar = view.querySelector('.adw-tab-bar') as HTMLElement;
+            // Pin the chip widths: a chip is a flex item that shrinks to whatever the
+            // strip has, so without this the six of them fit and `scroll_to_tab_full`
+            // has nothing to do, and the assertions below would hold vacuously.
+            for (const chip of chips(view)) chip.style.flex = '0 0 90px';
+            expect(bar.scrollWidth > bar.clientWidth).toBe(true);
+            expect(bar.scrollLeft).toBe(0);
+
+            const before = window.scrollY;
+            chips(view)[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
+
+            expect(view.selectedId).toBe('f');
+            expect(bar.scrollLeft > 0).toBe(true);
+            const last = chips(view)[5].getBoundingClientRect();
+            const box = bar.getBoundingClientRect();
+            expect(Math.round(last.right) <= Math.round(box.right)).toBe(true);
+            expect(window.scrollY).toBe(before);
+
+            host.remove();
+            window.scrollTo(0, 0);
+        });
+
+        // The two above both press a key, so both would still pass if the strip scroll
+        // lived in the key handler and the padding term were dropped. Neither is what C
+        // does: `notify::selected-page` reaches `select_page` through the bar
+        // (adw-tab-bar.c:934 -> adw-tab-box.c:1728), so EVERY selection scrolls the
+        // strip, and `scroll_to_tab_full` parks the chip `padding` short of the edge
+        // rather than flush against it (adw-tab-box.c:952-959).
+        await it('a programmatic selection parks the chip a padding short of the edge', async () => {
+            const { view, host } = makeFarBelowTheFold(8);
+            window.scrollTo(0, 0);
+            const bar = view.querySelector('.adw-tab-bar') as HTMLElement;
+            for (const chip of chips(view)) {
+                // `min-width: 0` as well as the basis: a flex item's automatic minimum
+                // size is its MIN-CONTENT size, and the selected chip carries a close
+                // affordance the others hide, so without this the six-point-something
+                // pixels it adds land in the middle of the arithmetic under test.
+                chip.style.flex = `0 0 ${CHIP_WIDTH}px`;
+                chip.style.minWidth = '0';
+            }
+            expect(bar.scrollLeft).toBe(0);
+
+            const before = window.scrollY;
+            // No keypress and no click: the model is driven directly.
+            expect(view.setSelectedPage('d')).toBe(true);
+
+            const pageSize = bar.clientWidth;
+            // `padding = MIN (tab_width, page_size - tab_width) / 2` (adw-tab-box.c:952).
+            const padding = Math.min(CHIP_WIDTH, pageSize - CHIP_WIDTH) / 2;
+            // Chip 4 of 8 is mid-strip, so the computed offset is inside the adjustment's
+            // range: an assertion the clamp could satisfy on its own proves nothing.
+            expect(bar.scrollLeft > 0 && bar.scrollLeft < bar.scrollWidth - pageSize).toBe(true);
+            const chip = chips(view)[3].getBoundingClientRect();
+            expect(Math.round(bar.getBoundingClientRect().right - chip.right)).toBe(padding);
+            expect(window.scrollY).toBe(before);
+
+            host.remove();
+            window.scrollTo(0, 0);
+        });
+    });
+
+    // The same coordinate space, one call site over, and it was wrong there too.
+    // `update_visible` (adw-tab-box.c:769-797) decides `fully_visible` from `pos` against
+    // the adjustment, exactly as `scroll_to_tab_full` does, and the close affordance
+    // hangs off it: `show_close = (hovering && fully_visible) || selected || dragging`
+    // (adw-tab.c:124). Measured with `offsetLeft` instead, the comparison ran against
+    // whichever positioned ancestor the HOST page happened to have, so a tab view that
+    // merely sat indented reported every chip clipped and swallowed the close button on
+    // hover.
+    await describe('adw-tab-view close affordance is measured against the BAR', async () => {
+        await it('hovering an indented but fully visible chip shows its close button', async () => {
+            const host = document.createElement('div');
+            // The whole defect: an offset between the chip's offsetParent and the bar.
+            // Nothing in the widget is positioned, so this lands in `offsetLeft`.
+            host.style.marginLeft = '300px';
+            host.style.width = '400px';
+            document.body.appendChild(host);
+            const view = document.createElement('adw-tab-view') as AdwTabView;
+            host.appendChild(view);
+            for (const id of ['a', 'b', 'c']) view.appendPage({ id, title: `Page ${id}` });
+
+            const bar = view.querySelector('.adw-tab-bar') as HTMLElement;
+            expect(bar.scrollWidth <= bar.clientWidth).toBe(true);
+
+            // Chip 1, not chip 0: `selected` shows the close button on its own, which
+            // would mask the `hovering && fullyVisible` term under test.
+            const chip = chips(view)[1];
+            expect(chip.classList.contains('active')).toBe(false);
+            chip.dispatchEvent(new PointerEvent('pointerenter', { bubbles: false }));
+            expect((chip.querySelector('.adw-tab-close') as HTMLElement).hidden).toBe(false);
+
+            host.remove();
+        });
+    });
 };

package/src/bottom-sheet.spec.ts

@@ -201,6 +201,93 @@ export const AdwBottomSheetTest = async () => {
             sheet.remove();
         });
 
+        await it('a dismissed sheet re-opens, through either toggle spelling', () => {
+            // Reported as "the sheet never comes back": a preview that mounts open, gets
+            // dismissed by a scrim click, and then stays closed. Every other case here
+            // stops at its FIRST close, so a close path that latched (a listener torn
+            // down and never re-attached, a state that only travels one way) could have
+            // kept the suite green. The two spellings are the two a host actually
+            // writes: `sheet.open = !sheet.open`, and `toggleAttribute('open')` (what the
+            // storybook story uses), which only works while the element keeps reflecting
+            // the state back onto the attribute.
+            const sheet = document.createElement('adw-bottom-sheet') as AdwBottomSheet;
+            // `open="true"`, not a bare `open`: that is what Astro's MDX compiler emits
+            // for the documentation preview, so it is the markup that gets upgraded.
+            sheet.setAttribute('open', 'true');
+            sheet.innerHTML =
+                '<adw-bottom-sheet-content><button id="under">Under</button></adw-bottom-sheet-content>' +
+                '<adw-bottom-sheet-sheet><button id="inside">Inside</button></adw-bottom-sheet-sheet>';
+            document.body.appendChild(sheet);
+            expect(sheet.open).toBe(true);
+
+            const payloads: boolean[] = [];
+            sheet.addEventListener('notify::open', (event) => {
+                payloads.push((event as CustomEvent).detail.open);
+            });
+
+            dimming(sheet).dispatchEvent(new MouseEvent('click', { bubbles: true }));
+            expect(sheet.open).toBe(false);
+            expect(sheet.hasAttribute('open')).toBe(false);
+
+            sheet.open = true;
+            expect(sheet.open).toBe(true);
+            expect(sheet.hasAttribute('open')).toBe(true);
+            expect(sheet.classList.contains('open')).toBe(true);
+            // The scrim has to become interactive again, or the sheet is dismissible
+            // exactly once even though the state reopened.
+            expect(dimming(sheet).classList.contains('visible')).toBe(true);
+
+            sheet.toggleAttribute('open');
+            expect(sheet.open).toBe(false);
+            sheet.toggleAttribute('open');
+            expect(sheet.open).toBe(true);
+
+            expect(payloads).toStrictEqual([false, true, false, true]);
+            sheet.remove();
+        });
+
+        await it('survives the template-clone mount the docs preview uses, and reopens from it', () => {
+            // Every other case here builds the sheet with createElement, so the element
+            // is upgraded before it has children. The documentation site never does
+            // that: it clones an inert <template> and appends the whole subtree in ONE
+            // insertion, so the sheet is constructed, gets its attributes and is
+            // connected while the same walk is still upgrading its descendants, and its
+            // connectedCallback moves those descendants into the content/sheet layers
+            // mid-walk. That is the mount the reported "the sheet never comes back" was
+            // seen in, and the toggle button has to come back out of it wired and
+            // reachable or the preview has no way back from a scrim dismissal.
+            const tpl = document.createElement('template');
+            tpl.innerHTML =
+                '<adw-bottom-sheet open="true" modal="true" can-close="true">' +
+                '<adw-bottom-sheet-content><adw-button pill>Toggle sheet</adw-button></adw-bottom-sheet-content>' +
+                '<adw-bottom-sheet-sheet><button id="inside">Inside</button></adw-bottom-sheet-sheet>' +
+                '</adw-bottom-sheet>';
+            const stage = document.createElement('div');
+            document.body.appendChild(stage);
+            stage.append(tpl.content.cloneNode(true));
+
+            const sheet = stage.querySelector('adw-bottom-sheet') as AdwBottomSheet;
+            expect(sheet.open).toBe(true);
+
+            const toggle = sheet.querySelector('.adw-bottom-sheet-content adw-button') as HTMLElement;
+            expect(toggle).toBeTruthy();
+            expect(insideSheet(sheet).id).toBe('inside');
+            // What the page binds: a listener on the custom element, driven by a click
+            // on the inner native button.
+            toggle.addEventListener('click', () => sheet.toggleAttribute('open'));
+            const inner = toggle.querySelector('button') as HTMLElement;
+
+            dimming(sheet).dispatchEvent(new MouseEvent('click', { bubbles: true }));
+            expect(sheet.open).toBe(false);
+
+            inner.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+            expect(sheet.open).toBe(true);
+            expect(sheet.classList.contains('open')).toBe(true);
+            expect(dimming(sheet).classList.contains('visible')).toBe(true);
+
+            stage.remove();
+        });
+
         await it('a dimming click on a CLOSED sheet does nothing and signals nothing', () => {
             // The scrim is `can_target = open`, so it is not reachable at all — unlike
             // Escape, it does not signal.