Notes

• The shell is 100dvh and main is the only scroll container. If the page scrolls instead, the rail scrolls away with it and a sticky header inside the content stops sticking — that single decision is most of what this component is.
• dvh, not vh: on iOS 100vh is taller than the visible viewport while the browser chrome is up, so a vh shell hangs its own bottom edge behind the address bar.
• Bind scrollElement and hand it to TopBar — the bar then watches the real scroller instead of the window, which is what makes its hairline appear at the right moment.
• TopBar is frosted and keeps its hairline at all times, which is how the app has always drawn it: the rail, the bar and the content are three different surfaces, so the line separates real things from the first pixel. divider="scroll" is there for a bar sitting directly on the content surface, where there genuinely is nothing to divide yet.
• Its height is fixed rather than a minimum. Everything in a shell measures against the header — a drawer’s top edge, a sticky table head, 100dvh - header — so a bar that grows a pixel when a subtitle appears moves all of them.
• The title is tracked tighter than the type ramp’s default and the eyebrow is smaller and airier than the caption default. At 56px those two lines have to read as chrome rather than as the first paragraph of the page.
• Below compactAt the page actions move into an overflow menu rather than being hidden. Hiding actions below a breakpoint hides the thing the page is for.
• It measures its own width, not the viewport: the bar is the sidebar’s complement, so the window can be wide while the bar is not.

Examples

API

Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.