diff --git a/UPGRADE.md b/UPGRADE.md index 3009aad9..ab655798 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -106,7 +106,8 @@ over a colour, use the role directly. - `` is renamed ``, with no alias; it is a column with a nested row and gains `banner` and `fab` slots. ``'s `header` slot takes one `` that morphs (replace the two-FAB `rail-collapsed:` swap); new `divider` - and `fill` props. `data-app-shell`, `data-app-shell-bar`, `data-app-shell-actions` and + and `fill` props. The `rail-collapsed:` variant is gone: style a rail's collapsed shape in the + application's CSS with the conditions `resources/css/components/navigation-rail.css` lists. `data-app-shell`, `data-app-shell-bar`, `data-app-shell-actions` and `data-app-shell-banner` are `data-md-scaffold`, `data-md-scaffold-bar`, `data-md-scaffold-actions` and `data-md-scaffold-banner`; the skip link is `data-md-skip-link`. - `` selects the optical-size-20 cut; the components pass it for their own diff --git a/resources/css/components/navigation-rail.css b/resources/css/components/navigation-rail.css index 8f222bcb..f3368f37 100644 --- a/resources/css/components/navigation-rail.css +++ b/resources/css/components/navigation-rail.css @@ -47,9 +47,10 @@ * * The rail-header FAB rules at the end draw M3's nested-FAB elevation (level 0, not a standalone * FAB's 3 — N-03) and morph it into an extended FAB as the rail opens, rather than swapping two by - * `display` (N-23): both now sit in this file's own `material.components` layer, like toolbar.css's - * FAB override, because each only overrides the single declaration fab.css puts on `[data-md-fab]` - * itself, with a more specific selector that always wins without needing to sit outside the layer. + * `display` (N-23). Both sit in this file's own `material.components` layer: the flat shadow + * outranks fab.css's resting and hover shadows by specificity, and the collapsed FAB's `gap` and + * minimum width, which tie with fab.css's extended-size rules, win by coming after them — this file + * imports fab.css, so a bundle always places fab.css first. * * The destination item, its indicator and its state layer are navigation-rail-item.css and * navigation-item.css (shared with the bar's item); a section's heading is @@ -887,8 +888,8 @@ * A FAB in the rail's header rests at elevation 0, not the 3 a standalone FAB has * (§ Navigation Rail/Behaviour: "when nested within another component, such as the navigation * rail, the FAB's resting elevation should be level 0" — N-03). The doubled `[data-md-fab]` - * attribute only adds specificity to beat fab.css's own single-attribute selector reliably, - * exactly as `[data-md-navigation-rail-item][data-md-navigation-rail-item]::before` + * attribute only adds specificity, over fab.css's `[data-md-fab]:hover` too, as + * `[data-md-navigation-rail-item][data-md-navigation-rail-item]::before` * (navigation-rail-item.css) does for the same reason. */ [data-md-navigation-rail-header] [data-md-fab][data-md-fab], diff --git a/resources/views/components/navigation-rail.blade.php b/resources/views/components/navigation-rail.blade.php index a42309bc..e92c1760 100644 --- a/resources/views/components/navigation-rail.blade.php +++ b/resources/views/components/navigation-rail.blade.php @@ -48,8 +48,9 @@ Anything else inside can take both shapes by matching the rail's own state directly, the same selectors resources/css/components/navigation-rail.css uses for every branch of "collapsed" — `data-md-navigation-rail`'s value, `:not([data-md-open])`, and the window band each mode - collapses in; that file is the one place the numbers need to stay right, rather than a - Tailwind variant repeating them. Nothing that shows while collapsed may be wider than 96px. + collapses in (its header lists them). Every rule in the package that draws a collapsed shape + writes them out, and tests/Feature/Components/NavigationRailTest.php keeps each copy to the same + conditions. Nothing that shows while collapsed may be wider than 96px. Props: `label` names the landmark ("Main"); `width` is the expanded width (`256px`, held between M3's 220 and 360dp) — or the word `narrow`, M3's other *collapsed* width