@gjsify/adwaita-web 0.39.0 → 0.41.0

package/scss/adwaita-skin.scss

@@ -77,6 +77,7 @@
 @use 'password_entry_row';
 @use 'toast';
 @use 'toolbar_view';
+@use 'scrolling';
 @use 'wrap_box';
 @use 'panes';
 @use 'overlay_split_view';

package/src/adw-button.spec.ts

@@ -0,0 +1,59 @@
+// DOM-level tests for <adw-button>'s style classes.
+//
+// The element and its NativeScript twin each kept their own attribute→class table,
+// and the two disagreed: `circular` was here and not there. The table now lives in
+// `@gjsify/adwaita-core`, and these drive its vectors through the REAL element, so a
+// renderer that goes back to a private copy fails on the row that names the class.
+
+import { describe, expect, it } from '@gjsify/unit';
+import { BUTTON_STYLE_CLASS_VECTORS } from '@gjsify/adwaita-core/conformance';
+
+/** The boolean attributes this element exposes — the short spellings. */
+const WEB_ATTRIBUTES = new Set(['flat', 'suggested', 'destructive', 'circular', 'pill']);
+
+/** Mount a button carrying the given boolean attributes; return the inner classes. */
+function mountWithStyles(names: readonly string[]): string[] {
+    const el = document.createElement('adw-button');
+    el.setAttribute('label', 'Click me');
+    for (const name of names) el.setAttribute(name, '');
+    document.body.appendChild(el);
+    const btn = el.querySelector('button') as HTMLButtonElement;
+    return Array.from(btn.classList).filter((cls) => cls !== 'adw-button');
+}
+
+function unmountAll(): void {
+    for (const el of Array.from(document.querySelectorAll('adw-button'))) el.remove();
+}
+
+export const AdwButtonTest = async () => {
+    // Rows naming a class the LONG way (`suggested-action`) are the NativeScript
+    // variant spelling — this element has no such attribute. They are partitioned
+    // out here rather than skipped inside the loop, and the partition is asserted,
+    // so a row cannot fall out of coverage unnoticed.
+    const reachable = BUTTON_STYLE_CLASS_VECTORS.filter((v) => v.names.every((n) => WEB_ATTRIBUTES.has(n)));
+    const unreachable = BUTTON_STYLE_CLASS_VECTORS.filter((v) => !v.names.every((n) => WEB_ATTRIBUTES.has(n)));
+
+    await describe('<adw-button> style classes', async () => {
+        for (const { names, classes, rule } of reachable) {
+            await it(`[${names.join(', ')}] → [${classes.join(', ')}] — ${rule}`, () => {
+                expect(mountWithStyles(names)).toStrictEqual([...classes]);
+                unmountAll();
+            });
+        }
+
+        await it('the rows this element cannot express are exactly the long spellings', () => {
+            const names = unreachable.flatMap((v) => v.names).filter((n) => !WEB_ATTRIBUTES.has(n));
+            expect(names).toStrictEqual(['suggested-action', 'suggessted', 'not-a-style']);
+        });
+
+        await it('a style attribute added later is picked up', () => {
+            const el = document.createElement('adw-button');
+            el.setAttribute('label', 'Send');
+            document.body.appendChild(el);
+            el.setAttribute('suggested', '');
+            const btn = el.querySelector('button') as HTMLButtonElement;
+            expect(btn.classList.contains('suggested-action')).toBe(true);
+            unmountAll();
+        });
+    });
+};

package/src/adw-carousel.spec.ts

@@ -9,7 +9,12 @@
 // element sets it as an inline style precisely so it stays overridable.
 import { describe, expect, it } from '@gjsify/unit';
 
-import { CAROUSEL_PAGE_AT_POSITION_VECTORS, CAROUSEL_PAGE_LIST_VECTORS } from '@gjsify/adwaita-core/conformance';
+import type { CarouselPageMeasurement } from '@gjsify/adwaita-core';
+import {
+    CAROUSEL_PAGE_ALLOCATION_VECTORS,
+    CAROUSEL_PAGE_AT_POSITION_VECTORS,
+    CAROUSEL_PAGE_LIST_VECTORS,
+} from '@gjsify/adwaita-core/conformance';
 import type { CarouselPageOp } from '@gjsify/adwaita-core/conformance';
 
 /** The carousel surface this suite drives — the element's own public API. */
@@ -62,6 +67,45 @@ function mount(labels: readonly string[], attributes: Record<string, string> = {
     return { carousel, host, track };
 }
 
+/**
+ * One page that MEASURES what a conformance row says it does. `expand` is spelled
+ * `width: 100%`, the CSS of hexpand; `flex: none` keeps the slot's own flex layout from
+ * shrinking a natural size that is wider than the carousel before it can be measured.
+ */
+function sizedCard(page: CarouselPageMeasurement, index: number): HTMLElement {
+    const element = document.createElement('div');
+    element.dataset.label = `p${index}`;
+    const width = page.expand ? '100%' : `${page.natural}px`;
+    element.style.cssText = `flex:none;height:100%;width:${width};`;
+    return element;
+}
+
+/** Mount a carousel `available` px wide whose pages measure what `pages` says. */
+function mountSized(available: number, pages: readonly CarouselPageMeasurement[]) {
+    const host = document.createElement('div');
+    host.style.cssText = `width:${available}px;height:80px;`;
+    document.body.appendChild(host);
+
+    const carousel = document.createElement('adw-carousel') as CarouselElement;
+    carousel.style.cssText = `display:block;width:${available}px;height:80px;`;
+    pages.forEach((page, index) => carousel.appendChild(sizedCard(page, index)));
+    host.appendChild(carousel);
+
+    const track = carousel.querySelector('.adw-carousel-track') as HTMLElement;
+    // Instant scrolls; snapping stays ON here, because where a page SNAPS is half of
+    // what these tests are about.
+    track.style.setProperty('scroll-behavior', 'auto');
+    return { carousel, host, track };
+}
+
+/** Each page's left edge relative to the carousel, rounded off the subpixel noise. */
+function pageEdges(carousel: HTMLElement): number[] {
+    const origin = carousel.getBoundingClientRect().left;
+    return Array.from(carousel.querySelectorAll('.adw-carousel-page')).map((slot) =>
+        Math.round(slot.getBoundingClientRect().left - origin),
+    );
+}
+
 /** The page labels in DOM order — what the user actually sees, not what the model says. */
 function domOrder(carousel: HTMLElement): string[] {
     return Array.from(carousel.querySelectorAll('.adw-carousel-page')).map(
@@ -159,6 +203,102 @@ export const AdwCarouselTest = async () => {
         }
     });
 
+    await describe('adw-carousel page allocation (libadwaita conformance vectors)', async () => {
+        // The rows the DOM can express. The element measures a RENDERED width, so a page
+        // whose MINIMUM exceeds the carousel has already been resolved by CSS before the
+        // element sees it, and a carousel with no pages has nothing to measure at all.
+        const measurable = CAROUSEL_PAGE_ALLOCATION_VECTORS.filter(
+            (vector) => vector.pages.length > 0 && vector.pages.every((page) => page.minimum === undefined),
+        );
+
+        for (const vector of measurable) {
+            await it(vector.rule, async () => {
+                const { carousel, host, track } = mountSized(vector.available, vector.pages);
+                await flush();
+
+                const widths = Array.from(carousel.querySelectorAll('.adw-carousel-page')).map((slot) =>
+                    Math.round(slot.getBoundingClientRect().width),
+                );
+                expect(widths).toStrictEqual(vector.pages.map(() => vector.pageSize));
+                // The half-gap is the track's own padding, which is what lets the page
+                // strip start inside the carousel instead of flush against its edge.
+                expect(Math.round(Number.parseFloat(getComputedStyle(track).paddingInlineStart))).toBe(
+                    vector.leadingInset,
+                );
+                host.remove();
+            });
+        }
+
+        await it('shows the previous and next page at the edges', async () => {
+            // THE REPORTED DEFECT. With `flex: 0 0 100%` the pages of the Carousel story
+            // (440px cards in a 480px carousel) filled the width and both neighbours sat
+            // entirely off screen, where GTK leaves 20px of each showing.
+            const pages: CarouselPageMeasurement[] = [{ natural: 440 }, { natural: 440 }, { natural: 440 }];
+            const { carousel, host } = mountSized(480, pages);
+            await flush();
+
+            // At rest on page 0: centred, with page 1 starting 20px before the right edge.
+            expect(pageEdges(carousel)).toStrictEqual([20, 460, 900]);
+
+            carousel.scrollToPage(1);
+            await flush();
+            // Page 1 centred, 20px of page 0 showing at the left and 20px of page 2 at the right.
+            expect(pageEdges(carousel)).toStrictEqual([-420, 20, 460]);
+            host.remove();
+        });
+
+        await it('leaves the LAST page room to centre as well', async () => {
+            // The trailing half-gap is track padding too. A scroll container that dropped
+            // its end padding would stop `leadingInset` short of the last snap point, and
+            // the last page would never reach the middle.
+            const pages: CarouselPageMeasurement[] = [{ natural: 440 }, { natural: 440 }, { natural: 440 }];
+            const { carousel, host, track } = mountSized(480, pages);
+            await flush();
+
+            carousel.scrollToPage(2);
+            await flush();
+            expect(Math.round(track.scrollLeft)).toBe(880);
+            expect(carousel.currentPage).toBe(2);
+            expect(pageEdges(carousel)).toStrictEqual([-860, -420, 20]);
+            host.remove();
+        });
+
+        await it('re-aims the scroll in flight instead of rewinding it', async () => {
+            // Mounted inside a HIDDEN ancestor, which is how real markup reaches this:
+            // `connectedCallback` measures 0, so the declared position waits for a
+            // layout, and revealing the host delivers the pending-position observer and
+            // the layout observer in ONE resize pass. The first fires a scroll to page
+            // 2 at the fallback pitch; the second narrows the pages and has to put the
+            // offset back, and `state.position` is still 0 there, because the `scroll`
+            // event that will teach it 2 fires a frame later. Restoring THAT parks the
+            // carousel on page 0 and swallows `position="2"`. GTK re-aims instead: it
+            // pushes the recomputed snap point into the running animation (:786-788).
+            //
+            // A carousel already laid out when it is mounted does NOT reach this: it
+            // allocates during `connectedCallback` and the pending observer never
+            // arms, which is why the mounted-visible spelling of this test passes
+            // either way and is not the one kept.
+            const host = document.createElement('div');
+            host.style.cssText = 'width:480px;height:80px;display:none;';
+            document.body.appendChild(host);
+
+            const carousel = document.createElement('adw-carousel') as CarouselElement;
+            carousel.style.cssText = 'display:block;width:480px;height:80px;';
+            carousel.setAttribute('position', '2');
+            for (let index = 0; index < 3; index++) carousel.appendChild(sizedCard({ natural: 440 }, index));
+            host.appendChild(carousel);
+            await flush();
+
+            host.style.display = 'block';
+            await flush();
+
+            const track = carousel.querySelector('.adw-carousel-track') as HTMLElement;
+            expect(Math.round(track.scrollLeft)).toBe(880);
+            expect(carousel.currentPage).toBe(2);
+            host.remove();
+        });
+    });
+
     await describe('adw-carousel page lookup (libadwaita conformance vectors)', async () => {
         for (const vector of CAROUSEL_PAGE_AT_POSITION_VECTORS) {
             // Only rows whose snap points are a settled page list are reachable through

package/src/adw-entry.spec.ts

@@ -0,0 +1,73 @@
+// DOM-level tests for <adw-entry>'s length arithmetic.
+//
+// The element had NO max length and no text length, while its NativeScript twin has
+// composed `@gjsify/adwaita-core`'s since it shipped — so the same consumer got a
+// limit on one renderer and none on the other. These drive the core's own vectors
+// against the real element, which is what makes the delegation checkable rather
+// than merely claimed: a re-implementation that counts UTF-16 units instead of code
+// points fails on the row that names it.
+
+import { describe, expect, it } from '@gjsify/unit';
+import { ENTRY_MAX_LENGTH_VECTORS, ENTRY_TEXT_LENGTH_VECTORS } from '@gjsify/adwaita-core/conformance';
+
+import type { AdwEntry } from './elements/adw-entry.js';
+
+/** Mount an entry with the given attributes. */
+function mountEntry(attrs: Record<string, string> = {}): AdwEntry {
+    const entry = document.createElement('adw-entry') as AdwEntry;
+    for (const [name, value] of Object.entries(attrs)) entry.setAttribute(name, value);
+    document.body.appendChild(entry);
+    return entry;
+}
+
+function unmountAll(): void {
+    for (const entry of Array.from(document.querySelectorAll('adw-entry'))) entry.remove();
+}
+
+export const AdwEntryTest = async () => {
+    await describe('<adw-entry> text length', async () => {
+        for (const { text, length, rule } of ENTRY_TEXT_LENGTH_VECTORS) {
+            await it(`${JSON.stringify(text)} → ${length} — ${rule}`, () => {
+                const entry = mountEntry();
+                entry.value = text;
+                expect(entry.textLength).toBe(length);
+                unmountAll();
+            });
+        }
+    });
+
+    await describe('<adw-entry> max length', async () => {
+        for (const { text, maxLength, clamped, length, rule } of ENTRY_MAX_LENGTH_VECTORS) {
+            await it(`${JSON.stringify(text)} @ ${maxLength} — ${rule}`, () => {
+                const entry = mountEntry({ maxlength: String(maxLength) });
+                entry.value = text;
+                expect(entry.value).toBe(clamped);
+                expect(entry.textLength).toBe(length);
+                unmountAll();
+            });
+        }
+
+        await it('clamps what the ATTRIBUTE writes, not only the property', () => {
+            const entry = mountEntry({ maxlength: '5' });
+            entry.setAttribute('value', 'Ada Lovelace');
+            expect(entry.value).toBe('Ada L');
+            unmountAll();
+        });
+
+        await it('re-clamps when the limit is lowered under the current text', () => {
+            const entry = mountEntry();
+            entry.value = 'Ada Lovelace';
+            entry.maxLength = 3;
+            expect(entry.value).toBe('Ada');
+            unmountAll();
+        });
+
+        await it('an unusable limit means unlimited, never "truncate to empty"', () => {
+            const entry = mountEntry({ maxlength: 'nonsense' });
+            entry.value = 'Ada Lovelace';
+            expect(entry.maxLength).toBe(0);
+            expect(entry.value).toBe('Ada Lovelace');
+            unmountAll();
+        });
+    });
+};

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 () => {
@@ -78,4 +119,90 @@ export const AdwHeaderBarTest = async () => {
             unmountAll();
         });
     });
+
+    // The centre is the `<adw-window-title>` Adw.HeaderBar itself derives, so the three
+    // rules that element holds through @gjsify/adwaita-core reach the header bar too.
+    // None of them did while the centre was a bare span.
+    await describe('<adw-header-bar> derives an <adw-window-title>', async () => {
+        await it('builds one rather than a bare span', () => {
+            const bar = mountHeaderBar({ title: 'Documents' });
+            expect(bar.querySelector('adw-window-title')).toBeTruthy();
+            unmountAll();
+        });
+
+        await it('renders a subtitle, which it could not before', () => {
+            const bar = mountHeaderBar({ title: 'Documents', subtitle: '12 items' });
+            expect(centerText(bar)).toContain('Documents');
+            expect(centerText(bar)).toContain('12 items');
+            unmountAll();
+        });
+
+        await it('hides the title line when the title is empty — the blank-line bug', () => {
+            // adw-window-title.c:207-208. A header bar with only a subtitle used to
+            // reserve an empty line above it, because the span was always there.
+            const bar = mountHeaderBar({ title: '', subtitle: 'Loading…' });
+            const titleEl = bar.querySelector('.adw-window-title-title') as HTMLElement | null;
+            expect(titleEl?.hidden).toBe(true);
+            unmountAll();
+        });
+
+        await it('a subtitle survives a title write', () => {
+            const bar = mountHeaderBar({ title: 'Documents', subtitle: '12 items' });
+            bar.setAttribute('title', 'Pictures');
+            expect(centerText(bar)).toContain('Pictures');
+            expect(centerText(bar)).toContain('12 items');
+            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-menu-button.spec.ts

@@ -0,0 +1,52 @@
+// DOM-level tests for <adw-menu-button>'s `menu` attribute.
+//
+// The element parsed the JSON itself, and the copy was weaker than the core parser
+// the split button next to it already used: it kept `id` and `icon` whatever their
+// runtime type, so author markup could put a number in a field typed `string` — and
+// `id` is exactly what the activation event reports. These drive the core's parse
+// vectors against the real element.
+
+import { describe, expect, it } from '@gjsify/unit';
+import { SPLIT_BUTTON_MENU_PARSE_VECTORS } from '@gjsify/adwaita-core/conformance';
+
+/** Mount a menu button carrying `menu` as JSON, and return its rendered item labels. */
+function mountWithMenu(json: string): { el: HTMLElement; labels: string[] } {
+    const el = document.createElement('adw-menu-button');
+    el.setAttribute('menu', json);
+    document.body.appendChild(el);
+    const labels = Array.from(el.querySelectorAll('.adw-popover button')).map((b) => b.textContent?.trim() ?? '');
+    return { el, labels };
+}
+
+function unmountAll(): void {
+    for (const el of Array.from(document.querySelectorAll('adw-menu-button'))) el.remove();
+}
+
+export const AdwMenuButtonTest = async () => {
+    await describe('<adw-menu-button> menu attribute', async () => {
+        for (const { json, entries, rule } of SPLIT_BUTTON_MENU_PARSE_VECTORS) {
+            await it(`${rule}`, () => {
+                const { labels } = mountWithMenu(json ?? '');
+                expect(labels).toStrictEqual(entries.map((entry) => entry.label));
+                unmountAll();
+            });
+        }
+
+        await it('drops a non-string id instead of leaking a number into the event', () => {
+            const el = document.createElement('adw-menu-button');
+            el.setAttribute('menu', '[{"label":"Open","id":7}]');
+            document.body.appendChild(el);
+
+            let seen: unknown = 'not fired';
+            el.addEventListener('menu-item-activated', (e) => {
+                seen = (e as CustomEvent<{ id: string }>).detail.id;
+            });
+            (el.querySelector('.adw-popover button') as HTMLElement | null)?.click();
+
+            // `id` fell back to the label, which is the documented default — rather
+            // than arriving as the number 7 in a field every consumer reads as text.
+            expect(seen).toBe('Open');
+            unmountAll();
+        });
+    });
+};

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();
+        });
+    });
 };