@gjsify/adwaita-web 0.40.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-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-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-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.