diff --git a/resources/css/layout/scaffold.css b/resources/css/layout/scaffold.css index 320e41c5..2f652adb 100644 --- a/resources/css/layout/scaffold.css +++ b/resources/css/layout/scaffold.css @@ -6,10 +6,11 @@ * Tailwind; `data-md-scaffold-fab` and the content region's `--md-layout-margin` are step 35's, * unchanged below. * - * `--material-margin` is M3's window margin, read by a pane and the canonical layouts wherever - * `--md-layout-margin` has not already zeroed it: 16px below `medium`, 24px from it + * `--material-margin` is M3's window margin, which the content region pads itself with and an + * application's own rules can read: 16px below `medium`, 24px from it * (docs/reference/m3/foundations-supplement.md § Breakpoints), the same two spacing tokens - * layout/pane.css reads for its own margin. + * layout/pane.css draws its own margin from. `--md-layout-margin: 0px` on the region tells a pane + * or canonical layout inside that the margin is already drawn. * * `[data-md-skip-link]` hides the way `md-visually-hidden` does at rest (text.css) — duplicated * here rather than shared, because a class cannot be un-applied on `:focus` — and reveals itself @@ -31,19 +32,19 @@ * the actions row can never be the rail element itself. * * `[data-md-scaffold-bar]` pins the navigation bar to the window's bottom edge below `medium`, at - * the navigation bar's own stacking layer (z-index 30: over the page, under a scrim or the - * snackbar — navigation-bar.css and toast.css agree on the number). It also carries - * `--material-bottom-bar`, which everything the bar would otherwise cover reads: the FAB - * (`[data-md-scaffold-fab]`, below), the snackbar host (toast.css) and the content region's own - * bottom padding, all through `max()`/`var()` with a `0px` fallback, so nothing below `medium`, or - * once the bar itself is absent, reads a stale height. It stayed a Tailwind utility - * (`max-medium:[--material-bottom-bar:…]`, unlayered so it could win over `navigation-bar.css`'s - * own override) until this rewrite; now both live in `material.components` - * (`navigation-bar.css`'s own header explains why that layer, not this one, is enough) and this - * declaration only has to beat `main`'s own `0px` fallback inside the very same layer, which normal - * cascade order already does. 64px and 80px are `NavigationBarTokens.ContainerHeight` and - * `TallContainerHeight`, the bar's own dimensions, not the spacing scale — the number - * navigation-bar.css itself draws the bar at, kept literal here for the same reason. + * z-index 30: over the page, under the rail's scrim (40) and the snackbar (50, toast.css). While a + * bar is there, the scaffold's root publishes `--material-bottom-bar` below `medium` — the bar's + * 64px or, tall, 80px (`NavigationBarTokens.ContainerHeight` and `TallContainerHeight`, the bar's + * own dimensions rather than the spacing scale), the bottom safe area and `--material-bottom-extra` + * — which everything the bar would otherwise cover reads: the FAB (below), the snackbar host + * (toast.css), a placed toolbar (toolbar.css) and the content region's bottom padding. Without a + * bar, or from `medium`, the scaffold publishes nothing and each reader falls back to 0px. A bar that has slid + * away on scroll drops its own height from the variable (navigation-bar.css); that rule wins + * because `material.components` comes after this file's `material.layout`, where before this + * rewrite the variable was a Tailwind utility and the override had to sit outside every layer. + * + * The content region's `
` is matched as the content wrapper's own child, so a `
` an + * application nests inside the page takes none of the region's padding or clipping. * * Imports the stylesheets of every component this view renders: the adaptive rail and its item and * section, the navigation bar and its item, and the snackbar host. @@ -171,7 +172,7 @@ } } - [data-md-scaffold] main { + [data-md-scaffold-content] > main { --md-layout-margin: 0px; min-inline-size: 0; diff --git a/tests/Feature/Components/ScaffoldTest.php b/tests/Feature/Components/ScaffoldTest.php index 11073fbf..22fcfc5c 100644 --- a/tests/Feature/Components/ScaffoldTest.php +++ b/tests/Feature/Components/ScaffoldTest.php @@ -265,7 +265,9 @@ it('places the FAB at the bottom-end corner, clear of the bar and of a snackbar, ->toContain('+ var(--material-snackbar-height, 0px)') ->toContain('+ min(var(--material-snackbar-height, 0px), var(--md-sys-measurement-space200))') // The content region already has the window margin, so a pane inside draws none. - ->toContain("[data-md-scaffold] main {\n --md-layout-margin: 0px;") + // Only the region's own
: one an application nests in the page takes none of this. + ->toContain("[data-md-scaffold-content] > main {\n --md-layout-margin: 0px;") + ->not->toContain('[data-md-scaffold] main') ->and((string) file_get_contents(__DIR__.'/../../../resources/css/layout.css'))->toContain("@import './layout/scaffold.css';"); });