Slide the navigation rail and fade its scrim out in Firefox too

A rail that was open over the page left it on `transition: … display …
allow-discrete`: the compact adaptive rail's slide-out, the slide-out of
a rail that hides when collapsed, and every rail scrim's fade. Firefox
does not transition `display`, even with `allow-discrete` (Chrome 117
and Safari 18 do), so there the panel and the scrim vanished on the
first frame. Unlike the sheets' scrims these are drawn by attribute
rules on `data-md-open`, not `x-show`, so Alpine had nothing to hold.

navigation.js now marks a rail that closes `data-md-closing` — `sheet`
when the panel leaves the window, `scrim` when it stands in the layout
again — and drops it once the panel's `translate` and the scrim's
`opacity` transitions have finished (at once under reduced motion, or
when the rail opens again). navigation-rail.css keeps what is leaving
displayed, and a sliding panel in its open geometry, while the
attribute is set, and no longer transitions `display` anywhere, so
Chrome and Safari do not hold a second time. The view sets it from
`x-effect`, beside the `x-bind` that drops `data-md-open`, so both
attributes change in one flush: a `$watch` a microtask later let a
style read in between settle the scrim as already hidden. The collapsed
branches and `--md-navigation-rail-value` are untouched.

NavigationTest samples each exit part-way in the page (the compact
slide, the hide-when-collapsed slide, a modal rail's scrim) and checks
it ends hidden; all three fail on main in Firefox and pass in Chrome,
Firefox and Safari. They wait for the entry to finish first: Firefox
creates a transition on its next refresh tick, so straight after a
change its computed style already reads the end value. NavigationRailTest
pins the holds and that no rule transitions `display`.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

resources/views/components/navigation-rail.blade.php

@@ -81,8 +81,11 @@
      (`false`) drops the container colour for a transparent rail over the page's own background,
      which M3 allows as long as the items keep a 3:1 contrast against what is behind them. A rail
      open over a scrim keeps its fill and drops the divider whatever those say: it is a surface
-     over the page then. The rail does not scroll with the page: in a flex row it sticks to the top
-     of the viewport, as tall as the viewport at most.
+     over the page then. As it closes it keeps `data-md-closing` (`sheet` while the panel slides off
+     the window, `scrim` while only the scrim fades) until the exit has run, which is what holds it
+     on screen in Firefox, where `display` cannot transition (resources/js/navigation.js). The rail
+     does not scroll with the page: in a flex row it sticks to the top of the viewport, as tall as
+     the viewport at most.
 
      Values from androidx Compose Material 3 (Apache-2.0), androidx-main
      27cf9a7d5788aa0f5f2d8b6699ce279560daf326: NavigationRailCollapsedTokens.kt,
@@ -128,6 +131,8 @@
     @if ($interactive)
         x-data="materialNavigationRail('{{ $mode }}', {{ $hideWhenCollapsed ? 'true' : 'false' }})"
         x-bind:data-md-open="open"
+        x-bind:data-md-closing="closing"
+        x-effect="settle(open)"
     @endif
     {{ $attributes->merge(['style' => "--navigation-rail-width: {$width}"]) }}
 >