@gjsify/adwaita-storybook 0.39.0 → 0.41.0

package/lib/types/styles.d.ts

@@ -1,3 +1,3 @@
-export declare const STORYBOOK_WEB_CSS = "\n/* Appearance dialog \u2014 round swatches with a selection ring. The web twin of the GTK\n   renderer's rules, themselves adapted from Learn6502.\n\n   The CARD is not decoration: in the dark scheme the \"dark\" swatch is a near-black\n   circle on a near-black dialog and is invisible without a lighter surface behind\n   it. Centring happens INSIDE the full-width card, so the row does not read as\n   left-aligned under the group title. */\n.sb-swatch-card {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: 8px;\n    padding: 12px;\n}\n/* Squaring the card's top alone leaves a notch: the row above lives in the group's\n   own rounded list, so BOTH sides have to be squared for the join to read as one\n   list. The attached card and the group rule below are the two halves of that. */\n.sb-swatch-card--attached {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n}\n.sb-attached-group .boxed-list {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n}\n/* Desaturated rather than merely dimmed: while the accent follows the desktop the\n   palette must read as unavailable, not as nine slightly faded choices. */\n.sb-swatch-card--disabled {\n    filter: saturate(0.4) brightness(1.05);\n    opacity: 0.7;\n}\n/* A radio input, so grouping and arrow-key navigation are the platform's. Its own\n   glyph is switched off because the swatch IS the indicator \u2014 a dot drawn on a\n   colour competes with the ring that already says which one is selected. */\n.sb-swatch {\n    appearance: none;\n    -webkit-appearance: none;\n    margin: 0;\n    width: 24px;\n    height: 24px;\n    border-radius: 9999px;\n    box-shadow: 0 0 0 3px transparent;\n    cursor: pointer;\n    /* A hairline on the fill itself. Without it the LIGHT scheme swatch is a\n       near-white circle on a near-white card and vanishes \u2014 the exact mirror of the\n       dark swatch on a dark dialog, and a card alone only fixes one direction.\n       --border-color is a currentColor mix, so it holds in both schemes. */\n    border: 1px solid var(--border-color);\n}\n.sb-swatch:checked {\n    box-shadow: 0 0 0 3px var(--accent-bg-color);\n}\n.sb-swatch:focus-visible {\n    outline: 2px solid var(--accent-color);\n    outline-offset: 3px;\n}\n.sb-swatch:disabled {\n    cursor: default;\n}\n/* The scheme swatches are larger \u2014 they are the dialog's primary choice. */\n.sb-swatch--scheme {\n    width: 44px;\n    height: 44px;\n}\n/* \"Follow system\" is the two schemes meeting on a diagonal, so the option looks like\n   what it does instead of needing a word for it. */\n/* light_2 / dark_4 from libadwaita's palette (_palette.scss:37,44), which is what\n   Learn6502's selector uses. NOT light_1 (#ffffff): pure white is invisible against\n   a light card even with the hairline, and light_2 is the shade the palette offers\n   for exactly this. */\n.sb-swatch--scheme-system {\n    background: linear-gradient(to bottom right, #f6f5f4 49.99%, #241f31 50.01%);\n}\n.sb-swatch--scheme-light {\n    background-color: #f6f5f4;\n}\n.sb-swatch--scheme-dark {\n    background-color: #241f31;\n}\n\n.sb-window {\n    width: 100%;\n    height: 100%;\n    min-width: 0;\n    min-height: 0;\n}\n\n/* Each pane in the outer split view is a flex column that fills its height. */\n.sb-sidebar-pane,\n.sb-content-pane {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    min-width: 0;\n    flex: 1 1 auto;\n}\n\n/* The toolbar-view content holds either a scroller (sidebar) or the split view\n   (content); the inner panes own the scrolling, so this level never scrolls. */\n.sb-sidebar-pane adw-toolbar-view > .adw-toolbar-view-content,\n.sb-content-pane adw-toolbar-view > .adw-toolbar-view-content {\n    overflow: hidden;\n}\n\n/* Background scheme: the content header + preview + controls all sit on the\n   window (story) background as one surface; only the left story-list column\n   (its header + list) keeps the distinct sidebar shade. Matches the native\n   renderer. The default adw-header-bar background is its own headerbar shade,\n   so override it per pane here. */\n.sb-content-pane adw-header-bar {\n    background-color: var(--window-bg-color);\n}\n.sb-sidebar-pane adw-header-bar {\n    background-color: var(--sidebar-bg-color);\n}\n\n.sb-sidebar-scroll {\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow-y: auto;\n    background-color: var(--sidebar-bg-color);\n}\n\n/* --- Story list (mirrors GTK .navigation-sidebar) --- */\n.sb-sidebar-list {\n    padding: var(--spacing-xs);\n    display: flex;\n    flex-direction: column;\n    gap: 1px;\n}\n\n.sb-category {\n    font-size: var(--font-size-small);\n    font-weight: 700;\n    opacity: var(--dim-opacity);\n    padding: 10px var(--spacing-m) 4px;\n}\n\n.sb-story-row {\n    padding: var(--spacing-xs) var(--spacing-m);\n    margin: 0 var(--spacing-xs);\n    border-radius: var(--button-radius);\n    cursor: pointer;\n    color: var(--window-fg-color);\n    font-size: var(--font-size-base);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.sb-story-row:hover {\n    background-color: var(--button-bg-color);\n}\n\n.sb-story-row.selected {\n    background-color: var(--accent-bg-color);\n    color: var(--accent-fg-color);\n}\n\n/* --- Preview area --- */\n\n/* The slotted content pane has to PASS ITS BOUND DOWN, or the scroller below it has\n   nothing to scroll against.\n\n   Measured before this rule existed: .adw-osv-content bounded itself correctly at\n   697px while its content wanted 1008px, but this div \u2014 display: block,\n   min-height: auto, flex: 0 1 auto \u2014 ignored that and grew to 1008. So\n   .sb-preview-scroll inherited clientHeight === scrollHeight, had nothing to scroll,\n   and everything past the fold was clipped by the toolbar view's overflow: hidden:\n   a tall story just ended mid-page.\n\n   The sidebar never had this. Its scroller sits directly inside the toolbar view's own\n   flex content wrapper, so nothing breaks the chain there; this pane is the one place\n   a plain div sits between the bound and the scroller.\n\n   NOTE: no backticks in this file's comments \u2014 the whole stylesheet is a JS template\n   literal, so a backtick ends it and the parse error lands nine lines away. */\n.sb-preview-pane {\n    display: flex;\n    flex-direction: column;\n    flex: 1 1 auto;\n    min-height: 0;\n    min-width: 0;\n}\n\n/* The tint belongs to the whole preview AREA, not to a box inside it. On the website\n   it sits on the preview panel and the stage within is only centring; on the stage it\n   drew a grey rectangle floating in the pane with no defined edge, which is how it read.\n\n   HERE and not on .sb-preview-pane, measured: this element paints an OPAQUE\n   background-color, so a gradient one level up is covered completely. Sampling five\n   points across the pane returned the identical colour while the computed style still\n   reported a background-image \u2014 true and meaningless.\n\n   A background on a scroll container is painted against its padding box, so it stays\n   put while the content scrolls, the way a wallpaper does. */\n.sb-preview-scroll {\n    flex: 1 1 auto;\n    min-height: 0;\n    min-width: 0;\n    overflow: auto;\n    background-color: var(--window-bg-color);\n    background-image:\n        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent-color) 7%, transparent), transparent 45%),\n        radial-gradient(circle at 100% 100%, color-mix(in srgb, #926ee4 6%, transparent), transparent 45%);\n}\n\n.sb-story-page {\n    display: flex;\n    justify-content: center;\n    padding: var(--spacing-xl) var(--spacing-m);\n    min-height: 100%;\n    box-sizing: border-box;\n}\n\n.sb-story-clamp {\n    width: 100%;\n    max-width: 600px;\n}\n\n.sb-story-group-header {\n    padding: var(--spacing-xs) 2px;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.sb-story-group-title {\n    font-size: var(--font-size-heading);\n    font-weight: 700;\n    color: var(--window-fg-color);\n}\n\n.sb-story-group-description {\n    font-size: var(--font-size-base);\n    opacity: var(--dim-opacity);\n    color: var(--window-fg-color);\n}\n\n/* Centring and breathing room only \u2014 the surface is the pane's.\n\n   The stage carried the tint first, and against the pane's own background that read\n   as a grey rectangle floating with no edge rather than as a surface. It has no\n   border-radius for the same reason: nothing here is a box any more.\n\n   The requirement the tint answers is unchanged \u2014 the preview area stays locatable\n   when the widget on it is transparent or empty \u2014 it is just answered by the AREA\n   now instead of by a rectangle inside it. Scheme handling moved with it, see\n   .sb-preview-pane. */\n.story-stage {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--spacing-m);\n    padding: var(--spacing-l);\n    margin-top: var(--spacing-s);\n    min-height: 80px;\n}\n\n/* --- Controls panel --- */\n.sb-controls-scroll {\n    height: 100%;\n    overflow-y: auto;\n    background-color: var(--window-bg-color);\n}\n\n.sb-controls-page {\n    padding: var(--spacing-l);\n}\n\n/* Range-control card (mirrors the native .story-range-row). */\n.sb-range-row {\n    display: flex;\n    flex-direction: column;\n    gap: var(--spacing-xs);\n    padding: var(--spacing-m);\n    border-bottom: 1px solid var(--card-shade-color);\n}\n\n.sb-range-row:last-child {\n    border-bottom: none;\n}\n\n.sb-range-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n    gap: var(--spacing-m);\n}\n\n.sb-range-title {\n    font-size: var(--font-size-base);\n    font-weight: 700;\n    color: var(--card-fg-color);\n}\n\n.sb-range-value {\n    font-size: var(--font-size-base);\n    font-variant-numeric: tabular-nums;\n    opacity: var(--dim-opacity);\n}\n\n.sb-range-description {\n    font-size: var(--font-size-small);\n    opacity: var(--dim-opacity);\n}\n\n.sb-range-input {\n    width: 100%;\n    accent-color: var(--accent-bg-color);\n}\n\n.sb-color-input {\n    width: 42px;\n    height: 28px;\n    padding: 0;\n    border: 1px solid var(--card-shade-color);\n    border-radius: var(--button-radius);\n    background: none;\n    cursor: pointer;\n}\n";
+export declare const STORYBOOK_WEB_CSS = "\n/* Appearance dialog \u2014 round swatches with a selection ring. The web twin of the GTK\n   renderer's rules, themselves adapted from Learn6502.\n\n   The CARD is not decoration: in the dark scheme the \"dark\" swatch is a near-black\n   circle on a near-black dialog and is invisible without a lighter surface behind\n   it. Centring happens INSIDE the full-width card, so the row does not read as\n   left-aligned under the group title. */\n.sb-swatch-card {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: 8px;\n    padding: 12px;\n}\n/* Squaring the card's top alone leaves a notch: the row above lives in the group's\n   own rounded list, so BOTH sides have to be squared for the join to read as one\n   list. The attached card and the group rule below are the two halves of that. */\n.sb-swatch-card--attached {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n}\n.sb-attached-group .boxed-list {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n}\n/* Desaturated rather than merely dimmed: while the accent follows the desktop the\n   palette must read as unavailable, not as nine slightly faded choices. */\n.sb-swatch-card--disabled {\n    filter: saturate(0.4) brightness(1.05);\n    opacity: 0.7;\n}\n/* A radio input, so grouping and arrow-key navigation are the platform's. Its own\n   glyph is switched off because the swatch IS the indicator \u2014 a dot drawn on a\n   colour competes with the ring that already says which one is selected. */\n.sb-swatch {\n    appearance: none;\n    -webkit-appearance: none;\n    margin: 0;\n    width: 24px;\n    height: 24px;\n    border-radius: 9999px;\n    box-shadow: 0 0 0 3px transparent;\n    cursor: pointer;\n    /* A hairline on the fill itself. Without it the LIGHT scheme swatch is a\n       near-white circle on a near-white card and vanishes \u2014 the exact mirror of the\n       dark swatch on a dark dialog, and a card alone only fixes one direction.\n       --border-color is a currentColor mix, so it holds in both schemes. */\n    border: 1px solid var(--border-color);\n}\n.sb-swatch:checked {\n    box-shadow: 0 0 0 3px var(--accent-bg-color);\n}\n.sb-swatch:focus-visible {\n    outline: 2px solid var(--accent-color);\n    outline-offset: 3px;\n}\n.sb-swatch:disabled {\n    cursor: default;\n}\n/* The scheme swatches are larger \u2014 they are the dialog's primary choice. */\n.sb-swatch--scheme {\n    width: 44px;\n    height: 44px;\n}\n/* \"Follow system\" is the two schemes meeting on a diagonal, so the option looks like\n   what it does instead of needing a word for it. */\n/* light_2 / dark_4 from libadwaita's palette (_palette.scss:37,44), which is what\n   Learn6502's selector uses. NOT light_1 (#ffffff): pure white is invisible against\n   a light card even with the hairline, and light_2 is the shade the palette offers\n   for exactly this. */\n.sb-swatch--scheme-system {\n    background: linear-gradient(to bottom right, #f6f5f4 49.99%, #241f31 50.01%);\n}\n.sb-swatch--scheme-light {\n    background-color: #f6f5f4;\n}\n.sb-swatch--scheme-dark {\n    background-color: #241f31;\n}\n\n.sb-window {\n    width: 100%;\n    height: 100%;\n    min-width: 0;\n    min-height: 0;\n}\n\n/* Each pane in the outer split view is a flex column that fills its height. */\n.sb-sidebar-pane,\n.sb-content-pane {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    min-width: 0;\n    flex: 1 1 auto;\n}\n\n/* The toolbar-view content holds either a scroller (sidebar) or the split view\n   (content); the inner panes own the scrolling, so this level never scrolls. */\n.sb-sidebar-pane adw-toolbar-view > .adw-toolbar-view-content,\n.sb-content-pane adw-toolbar-view > .adw-toolbar-view-content {\n    overflow: hidden;\n}\n\n/* Background scheme: the content header + preview + controls all sit on the\n   window (story) background as one surface; only the left story-list column\n   (its header + list) keeps the distinct sidebar shade. Matches the native\n   renderer.\n\n   On the PANE, not on the header bar. A header bar inside a toolbar view is flat\n   \u2014 no background of its own \u2014 so it shows whatever surface it sits on, exactly\n   as native does; painting the bar instead means colouring one strip and hoping\n   it matches the pane under it, which is how the two panes' bars ended up looking\n   like separate widgets rather than the top of their column. */\n.sb-content-pane {\n    background-color: var(--window-bg-color);\n}\n.sb-sidebar-pane {\n    background-color: var(--sidebar-bg-color);\n}\n\n/* No flex-grow here any more. This is the toolbar view's content widget, and filling\n   the rect between the bars is the TOOLBAR VIEW's job: see the only-child rule in\n   adwaita-web's _toolbar_view.scss, which is adw_toolbar_view_size_allocate handing\n   self->content the whole rect. The copy that used to sit here kept this one consumer\n   upright while every other one still ended at its last row. */\n.sb-sidebar-scroll {\n    min-height: 0;\n    overflow-y: auto;\n    background-color: var(--sidebar-bg-color);\n}\n\n/* --- Story list (mirrors GTK .navigation-sidebar) --- */\n.sb-sidebar-list {\n    padding: var(--spacing-xs);\n    display: flex;\n    flex-direction: column;\n    gap: 1px;\n}\n\n.sb-category {\n    font-size: var(--font-size-small);\n    font-weight: 700;\n    opacity: var(--dim-opacity);\n    padding: 10px var(--spacing-m) 4px;\n}\n\n.sb-story-row {\n    padding: var(--spacing-xs) var(--spacing-m);\n    margin: 0 var(--spacing-xs);\n    border-radius: var(--button-radius);\n    cursor: pointer;\n    color: var(--window-fg-color);\n    font-size: var(--font-size-base);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.sb-story-row:hover {\n    background-color: var(--button-bg-color);\n}\n\n.sb-story-row.selected {\n    background-color: var(--accent-bg-color);\n    color: var(--accent-fg-color);\n}\n\n/* --- Preview area --- */\n\n/* The slotted content pane has to PASS ITS BOUND DOWN, or the scroller below it has\n   nothing to scroll against.\n\n   Measured before this rule existed: .adw-osv-content bounded itself correctly at\n   697px while its content wanted 1008px, but this div \u2014 display: block,\n   min-height: auto, flex: 0 1 auto \u2014 ignored that and grew to 1008. So\n   .sb-preview-scroll inherited clientHeight === scrollHeight, had nothing to scroll,\n   and everything past the fold was clipped by the toolbar view's overflow: hidden:\n   a tall story just ended mid-page.\n\n   The sidebar never had this. Its scroller sits directly inside the toolbar view's own\n   flex content wrapper, so nothing breaks the chain there; this pane is the one place\n   a plain div sits between the bound and the scroller.\n\n   NOTE: no backticks in this file's comments \u2014 the whole stylesheet is a JS template\n   literal, so a backtick ends it and the parse error lands nine lines away. */\n.sb-preview-pane {\n    display: flex;\n    flex-direction: column;\n    flex: 1 1 auto;\n    min-height: 0;\n    min-width: 0;\n}\n\n/* The tint belongs to the whole preview AREA, not to a box inside it. On the website\n   it sits on the preview panel and the stage within is only centring; on the stage it\n   drew a grey rectangle floating in the pane with no defined edge, which is how it read.\n\n   HERE and not on .sb-preview-pane, measured: this element paints an OPAQUE\n   background-color, so a gradient one level up is covered completely. Sampling five\n   points across the pane returned the identical colour while the computed style still\n   reported a background-image \u2014 true and meaningless.\n\n   A background on a scroll container is painted against its padding box, so it stays\n   put while the content scrolls, the way a wallpaper does. */\n.sb-preview-scroll {\n    flex: 1 1 auto;\n    min-height: 0;\n    min-width: 0;\n    overflow: auto;\n    background-color: var(--window-bg-color);\n    background-image:\n        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent-color) 7%, transparent), transparent 45%),\n        radial-gradient(circle at 100% 100%, color-mix(in srgb, #926ee4 6%, transparent), transparent 45%);\n}\n\n.sb-story-page {\n    display: flex;\n    justify-content: center;\n    padding: var(--spacing-xl) var(--spacing-m);\n    min-height: 100%;\n    box-sizing: border-box;\n}\n\n.sb-story-clamp {\n    width: 100%;\n    max-width: 600px;\n}\n\n.sb-story-group-header {\n    padding: var(--spacing-xs) 2px;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.sb-story-group-title {\n    font-size: var(--font-size-heading);\n    font-weight: 700;\n    color: var(--window-fg-color);\n}\n\n.sb-story-group-description {\n    font-size: var(--font-size-base);\n    opacity: var(--dim-opacity);\n    color: var(--window-fg-color);\n}\n\n/* Centring and breathing room only \u2014 the surface is the pane's.\n\n   The stage carried the tint first, and against the pane's own background that read\n   as a grey rectangle floating with no edge rather than as a surface. It has no\n   border-radius for the same reason: nothing here is a box any more.\n\n   The requirement the tint answers is unchanged \u2014 the preview area stays locatable\n   when the widget on it is transparent or empty \u2014 it is just answered by the AREA\n   now instead of by a rectangle inside it. Scheme handling moved with it, see\n   .sb-preview-pane. */\n.story-stage {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--spacing-m);\n    padding: var(--spacing-l);\n    margin-top: var(--spacing-s);\n    min-height: 80px;\n}\n\n/* --- Controls panel --- */\n.sb-controls-scroll {\n    height: 100%;\n    overflow-y: auto;\n    background-color: var(--window-bg-color);\n}\n\n.sb-controls-page {\n    padding: var(--spacing-l);\n}\n\n/* Range-control card (mirrors the native .story-range-row). */\n.sb-range-row {\n    display: flex;\n    flex-direction: column;\n    gap: var(--spacing-xs);\n    padding: var(--spacing-m);\n    border-bottom: 1px solid var(--card-shade-color);\n}\n\n.sb-range-row:last-child {\n    border-bottom: none;\n}\n\n.sb-range-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n    gap: var(--spacing-m);\n}\n\n.sb-range-title {\n    font-size: var(--font-size-base);\n    font-weight: 700;\n    color: var(--card-fg-color);\n}\n\n.sb-range-value {\n    font-size: var(--font-size-base);\n    font-variant-numeric: tabular-nums;\n    opacity: var(--dim-opacity);\n}\n\n.sb-range-description {\n    font-size: var(--font-size-small);\n    opacity: var(--dim-opacity);\n}\n\n.sb-range-input {\n    width: 100%;\n    accent-color: var(--accent-bg-color);\n}\n\n.sb-color-input {\n    width: 42px;\n    height: 28px;\n    padding: 0;\n    border: 1px solid var(--card-shade-color);\n    border-radius: var(--button-radius);\n    background: none;\n    cursor: pointer;\n}\n";
 /** Inject the chrome stylesheet once (idempotent, browser-only). */
 export declare function injectStorybookStyles(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-storybook",
-    "version": "0.39.0",
+    "version": "0.41.0",
     "description": "Browser renderer for the @gjsify/stories contract — the web counterpart of @gjsify/storybook, built on @gjsify/adwaita-web",
     "type": "module",
     "main": "./src/index.ts",
@@ -30,13 +30,13 @@
         "browser"
     ],
     "dependencies": {
-        "@gjsify/adwaita-core": "^0.39.0",
-        "@gjsify/adwaita-web": "^0.39.0",
-        "@gjsify/stories": "^0.39.0",
-        "@gjsify/storybook-core": "^0.39.0"
+        "@gjsify/adwaita-core": "^0.41.0",
+        "@gjsify/adwaita-web": "^0.41.0",
+        "@gjsify/stories": "^0.41.0",
+        "@gjsify/storybook-core": "^0.41.0"
     },
     "devDependencies": {
-        "@gjsify/cli": "^0.39.0",
+        "@gjsify/cli": "^0.41.0",
         "typescript": "^6.0.3"
     },
     "gjsify": {

package/src/preview-scroll.spec.ts

@@ -123,5 +123,31 @@ export const AdwStorybookPreviewScrollTest = async () => {
                 host.remove();
             }
         });
+
+        await it('lets the toolbar view, not this sheet, fill the story-list column', () => {
+            // This sheet used to carry its own `.sb-sidebar-scroll { flex: 1 1 auto }`,
+            // which held the column up here while every other Adw.ToolbarView content
+            // widget in the project still stopped at its last row. The declaration is
+            // gone and `adw-toolbar-view` fills its content widget instead, so this
+            // asserts the widget rule from the consumer that used to hide its absence.
+            const { host } = mountTall();
+            try {
+                const scroll = host.querySelector('.sb-sidebar-scroll') as HTMLElement;
+                const area = scroll.parentElement as HTMLElement;
+                const list = host.querySelector('.sb-sidebar-list') as HTMLElement;
+
+                // Two discriminators, without which "scroller height == pane height" is
+                // a coincidence: the scroller really is the toolbar view's content, and
+                // its own content really is shorter than the pane it has to fill.
+                expect(area.classList.contains('adw-toolbar-view-content')).toBe(true);
+                expect(list.getBoundingClientRect().height).toBeLessThan(area.getBoundingClientRect().height);
+
+                expect(Math.round(scroll.getBoundingClientRect().height)).toBe(
+                    Math.round(area.getBoundingClientRect().height),
+                );
+            } finally {
+                host.remove();
+            }
+        });
     });
 };

package/src/styles.ts

@@ -1,6 +1,10 @@
 // Chrome styles, shipped as a string and injected once on mount (as adwaita-web's own
 // stylesheet and the native renderer's STORYBOOK_CSS are). Driven entirely by the
 // adwaita-web CSS custom properties, so it follows the active light/dark theme.
+//
+// The whole sheet below is ONE template literal, so a backtick anywhere in it (a CSS
+// comment quoting a selector, say) ends the string and the bundler reports a syntax
+// error somewhere else entirely. Quote selectors with plain text.
 
 export const STORYBOOK_WEB_CSS = `
 /* Appearance dialog — round swatches with a selection ring. The web twin of the GTK
@@ -110,17 +114,26 @@ export const STORYBOOK_WEB_CSS = `
 /* Background scheme: the content header + preview + controls all sit on the
    window (story) background as one surface; only the left story-list column
    (its header + list) keeps the distinct sidebar shade. Matches the native
-   renderer. The default adw-header-bar background is its own headerbar shade,
-   so override it per pane here. */
-.sb-content-pane adw-header-bar {
+   renderer.
+
+   On the PANE, not on the header bar. A header bar inside a toolbar view is flat
+   — no background of its own — so it shows whatever surface it sits on, exactly
+   as native does; painting the bar instead means colouring one strip and hoping
+   it matches the pane under it, which is how the two panes' bars ended up looking
+   like separate widgets rather than the top of their column. */
+.sb-content-pane {
     background-color: var(--window-bg-color);
 }
-.sb-sidebar-pane adw-header-bar {
+.sb-sidebar-pane {
     background-color: var(--sidebar-bg-color);
 }
 
+/* No flex-grow here any more. This is the toolbar view's content widget, and filling
+   the rect between the bars is the TOOLBAR VIEW's job: see the only-child rule in
+   adwaita-web's _toolbar_view.scss, which is adw_toolbar_view_size_allocate handing
+   self->content the whole rect. The copy that used to sit here kept this one consumer
+   upright while every other one still ended at its last row. */
 .sb-sidebar-scroll {
-    flex: 1 1 auto;
     min-height: 0;
     overflow-y: auto;
     background-color: var(--sidebar-bg-color);