diff --git a/resources/css/components/navigation-rail.css b/resources/css/components/navigation-rail.css index f3368f37..eb97f648 100644 --- a/resources/css/components/navigation-rail.css +++ b/resources/css/components/navigation-rail.css @@ -47,10 +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 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. + * `display` (N-23). Both sit in this file's own `material.components` layer and win by specificity + * alone, whichever copy of fab.css a build places last: the flat shadow outranks fab.css's resting + * and hover shadows, and the collapsed FAB's `gap` and minimum width outrank fab.css's extended-size + * and collapse-on-scroll rules, which would otherwise tie with them. * * 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 @@ -965,7 +965,10 @@ } } - [data-md-navigation-rail-header] [data-md-fab][data-md-extended] { + /* `[data-md-extended]` doubled for the same reason as the shadow's `[data-md-fab]` above: it + outranks fab.css's `[data-md-fab][data-md-extended][data-md-size]` gap and its collapsed + collapse-on-scroll FAB's minimum width, three attributes each. */ + [data-md-navigation-rail-header] [data-md-fab][data-md-extended][data-md-extended] { &:where( [data-md-navigation-rail='collapsed'], [data-md-navigation-rail='collapsed'] *, diff --git a/tests/Feature/Components/NavigationRailTest.php b/tests/Feature/Components/NavigationRailTest.php index cbe10bb6..4af6a400 100644 --- a/tests/Feature/Components/NavigationRailTest.php +++ b/tests/Feature/Components/NavigationRailTest.php @@ -187,7 +187,7 @@ it('flattens a FAB nested in the rail header and morphs its label', function () expect($css->declarations("[data-md-navigation-rail-header] [data-md-fab] > span:where( [data-md-navigation-rail='collapsed'], [data-md-navigation-rail='collapsed'] *, [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]), [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *, [data-md-navigation-rail='modal']:not([data-md-open]), [data-md-navigation-rail='modal']:not([data-md-open]) * )")) ->toBe(['max-width' => '0', 'opacity' => '0']) - ->and($css->declarations("[data-md-navigation-rail-header] [data-md-fab][data-md-extended]:where( [data-md-navigation-rail='collapsed'], [data-md-navigation-rail='collapsed'] *, [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]), [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *, [data-md-navigation-rail='modal']:not([data-md-open]), [data-md-navigation-rail='modal']:not([data-md-open]) * )")) + ->and($css->declarations("[data-md-navigation-rail-header] [data-md-fab][data-md-extended][data-md-extended]:where( [data-md-navigation-rail='collapsed'], [data-md-navigation-rail='collapsed'] *, [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]), [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *, [data-md-navigation-rail='modal']:not([data-md-open]), [data-md-navigation-rail='modal']:not([data-md-open]) * )")) ->toBe(['min-inline-size' => '0', 'aspect-ratio' => '1', 'gap' => '0']); });