@layer components { .navigation-split--sidebar-width-wide { --sidebar-width: min(26rem, 96vw); } @media (pointer: fine) and (not ((min-width: 120rem) and (display-mode: fullscreen))) { .app .navigation-split--sidebar-width-wide { --sidebar-width: min(20rem, 96vw); } } /* A sidebar column + a flexing detail column, each its own scroll container. Overrides the app shell's scrolling `main` (the columns own their scroll) while keeping its background. */ .app > main.navigation-split { display: flex; overflow: hidden; } /* Sidebar column = . Reset the UA dialog chrome so it behaves as an in-flow flex column (its `.navigation-stack` display:flex keeps it shown even though it is not `[open]` — that is the desktop, non-modal presentation). */ /* The sidebar column is an opaque raised surface — #F2F2F7 / #1C1C1E, as on iPadOS — so it reads apart from the detail on any page. A translucent material over a white page would just look white. A sidebar that asks for a background in its options gets that instead. */ .navigation-split > dialog.navigation-stack { background-color: var(--secondary-system-background); border: 0; border-inline-end: 1px solid var(--hairline); flex: 0 0 var(--sidebar-width); inset: auto; margin: 0; max-block-size: none; max-inline-size: none; padding: 0; transition: margin 0.25s ease; } .navigation-split > section.navigation-stack { flex: 1 1 0; min-inline-size: 0; transition: --safe-area-inline-start 0.25s ease, --safe-area-inline-end 0.25s ease; } .navigation-split > dialog.navigation-stack { --safe-area-inline-end: 0rem; } @media (min-width: 48rem) { .app:not([data-sidebar-collapsed]) > main.navigation-split > dialog.navigation-stack ~ section.navigation-stack { --safe-area-inline-start: 0rem; } .app:not([data-inspector-collapsed]) > main.navigation-split > section.navigation-stack:has(~ dialog.inspector) { --safe-area-inline-end: 0rem; } .navigation-split > dialog.inspector { --safe-area-inline-start: 0rem; } } @media (max-width: 47.999rem) { .navigation-split > dialog.inspector { --safe-area-block-start: 0rem; } } @media (prefers-reduced-motion: reduce) { .navigation-split > section.navigation-stack { transition: none; } } /* Large screen: the toggle collapses the column by sliding it out with a negative margin so the detail reflows to fill. */ @media (min-width: 48rem) { .app[data-sidebar-collapsed] > main.navigation-split > dialog.navigation-stack { margin-inline-start: calc(-1 * var(--sidebar-width)); } } @media (min-width: 48rem) { .app:not([data-sidebar-collapsed]) > .navigation-split > section.navigation-stack .toolbar-item.navigation-split__expand, .app[data-sidebar-collapsed] > .navigation-split > dialog.navigation-stack .toolbar-item.navigation-split__collapse { display: none; } } /* Small screen: the column is hidden until the toggle calls showModal(), which lifts it into the top layer as a left drawer with a native backdrop. */ @media (max-width: 47.999rem) { /* Off-canvas drawer. Position stays put across open/close so the slide animates; `allow-discrete` keeps it in the top layer while it slides out before `display: none` / leaving the overlay applies. */ .navigation-split > dialog.navigation-stack { block-size: 100dvh; flex-basis: auto; inline-size: var(--sidebar-width); inset-block: 0; inset-inline-start: 0; margin: 0; position: fixed; transform: translateX(-100%); transition: transform 0.25s ease, overlay 0.25s ease allow-discrete, display 0.25s ease allow-discrete; } /* A sidebar with a bar is full width, as on a phone, and closes with its own button at the trailing edge of that bar. */ .navigation-split > dialog.navigation-stack:has(> .navigation-bar) { border-inline-end: 0; inline-size: 100%; } .navigation-split > dialog.navigation-stack:not([open]) { display: none; } .navigation-split > dialog.navigation-stack[open] { transform: none; } /* Entry: start off-canvas so showModal() slides it in. */ @starting-style { .navigation-split > dialog.navigation-stack[open] { transform: translateX(-100%); } } .navigation-split > dialog.navigation-stack[open]::backdrop { background-color: var(--scrim); transition: background-color 0.25s ease, overlay 0.25s ease allow-discrete, display 0.25s ease allow-discrete; } @starting-style { .navigation-split > dialog.navigation-stack[open]::backdrop { background-color: oklch(0% 0% 0deg / 0%); } } } /* Suppress the slide while restoring the persisted collapsed state on load. */ .app[data-restoring] > main.navigation-split > dialog.navigation-stack { transition: none; } /* Floating sidebar (macOS 26): in compact density at regular width the sidebar column is an inset, rounded panel over the window background, with a hairline edge and a soft shadow instead of a column border. */ @media (pointer: fine) and (not ((min-width: 120rem) and (display-mode: fullscreen))) { @media (min-width: 48rem) { .navigation-split > dialog.navigation-stack { block-size: auto; margin: 0.5rem; border-inline-end: 0; border-radius: 1rem; background-color: var(--secondary-system-background); box-shadow: 0 0 0 1px var(--hairline), 0 0.5rem 1.5rem light-dark( oklch(0% 0 0deg / 8%), oklch(0% 0 0deg / 40%) ); overflow: clip; } .app[data-sidebar-collapsed] > main.navigation-split > dialog.navigation-stack { margin-inline: calc(-1 * var(--sidebar-width) - 1.5rem) 1.5rem; } } } } /* On a small screen the sidebar and the inspector are modal sheets over a dimmed backdrop. A translucent material there blurs the scrim into a muddy grey, so an open sheet is an opaque surface instead. This sits in the utilities layer because it overrides the `background--*` material the column carries. */ @layer utilities { @media (max-width: 47.999rem) { .navigation-split > dialog.navigation-stack[open].background, .navigation-split > dialog.inspector[open] .background { background-color: var(--secondary-system-background); backdrop-filter: none; } } } @layer components { @media print { .app > main.navigation-split { display: block; overflow: visible; } .navigation-split > dialog.navigation-stack { display: none; } } }