From eda16ba727a2279a353555458e074b88929ccc95 Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Tue, 15 Sep 2026 03:08:18 +0200 Subject: [PATCH] Make the rail header FAB's collapsed shape win by specificity Plan step 37 review. The collapsed rail FAB's gap and minimum width tied with fab.css's extended-size and collapse-on-scroll rules at three attributes and won only by coming after them. A deduplicating bundle keeps that order (navigation-rail.css imports fab.css), but a build that repeats a shared stylesheet need not: all.css imports fab.css again after the scaffold has reached the rail, and the Workbench's Tailwind entry inlines every occurrence. Doubling [data-md-extended] settles it by specificity, as the flat shadow already was, so the order no longer matters. A scan of every component and layout stylesheet pair for same-layer, same-property ties on a shared hook found no other override that relies on order: the remaining ties are on mutually exclusive elements or sit behind an import edge. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 --- resources/css/components/navigation-rail.css | 13 ++++++++----- tests/Feature/Components/NavigationRailTest.php | 2 +- 2 files changed, 9 insertions(+), 6 deletions(-) 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']); });