Slide the sheets and close the search view out in Firefox too

The side sheet, the bottom sheet's panel and the docked search's scrim
and view kept `display` alive through their exit with
`transition-behavior: allow-discrete`. Firefox does not transition
`display` (Chrome 117 and Safari 18 do), and `x-show` sets
`display: none` in the frame the exit starts, so in Firefox the sheets
vanished instead of sliding out and the search view and scrim vanished
instead of fading. The docked search had a second problem in every
engine: neither the view nor the scrim had a closed state to transition
to, so where `display` was held (Chrome, Safari) the view stood at full
opacity for its duration and then disappeared.

Each element now carries `x-transition:enter`/`:leave="md-transition"`,
the approach the two sheet scrims already took (renamed from
`md-scrim-transition` to one name for all of them). The class only
switches Alpine to CSS-transition mode, so `x-show` holds `display` for
the element's computed transition-duration before hiding it, in every
engine, and a reopen during the exit cancels the pending hide; nothing
styles it. `display` and `allow-discrete` leave the transitions so
Chrome and Safari do not hold a second time. Alpine reads the first
`transition-duration` listed, which is the closing slide or fade in each
list (the preset panel lists translate before height). The search view
now closes back into the bar (opacity 0, `scale: 1 0.9`, the reverse of
its `@starting-style` entry) and its scrim fades out on close and when
the search turns full screen. Under reduced motion the durations are
zero and every one of them closes at once.

Four browser tests sample each exit mid-way in the page, in the same
round trip as the close: the sheets part of the way to their closed
offset, the search scrim and view part of the way faded, each still
displayed, then `display: none`. All four fail on main in Firefox (the
two search tests in Chrome too) and pass in Chrome, Firefox and Safari.
OverlayTest pins the drawer's new transition and the view's markup.

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

resources/views/components/bottom-sheet.blade.php

@@ -104,8 +104,9 @@
     @if ($standard) data-md-standard @endif
 >
     @unless ($standard)
-        {{-- Alpine's CSS transition holds the scrim for its fade, as in drawer.blade.php. --}}
-        <div data-md-bottom-sheet-scrim x-cloak x-show="open" x-transition:enter="md-scrim-transition" x-transition:leave="md-scrim-transition" x-on:click="close()" aria-hidden="true"></div>
+        {{-- `md-transition` turns on Alpine's CSS transition, which holds the scrim and the panel
+             displayed through their exit, as in drawer.blade.php. --}}
+        <div data-md-bottom-sheet-scrim x-cloak x-show="open" x-transition:enter="md-transition" x-transition:leave="md-transition" x-on:click="close()" aria-hidden="true"></div>
     @endunless
 
     @if ($stops !== [])
@@ -117,6 +118,8 @@
     <section
         x-cloak
         x-show="open"
+        x-transition:enter="md-transition"
+        x-transition:leave="md-transition"
         x-ref="sheet"
         @unless ($standard) x-trap.inert.noscroll="open" @endunless
         x-bind:style="sheetStyle"

resources/views/components/drawer.blade.php

@@ -93,15 +93,18 @@
     data-md-drawer
     @if ($standard) data-md-standard @endif
 >
-    {{-- The class names only turn on Alpine's CSS transition: it keeps the scrim displayed for the
-         computed transition-duration (drawer.css's effects token) before hiding it, because Firefox
-         does not transition `display`, even with `allow-discrete`. Both stages, so reopening during
-         the fade cancels the pending hide. --}}
-    <div data-md-drawer-scrim x-cloak x-show="open" x-transition:enter="md-scrim-transition" x-transition:leave="md-scrim-transition" @if (! $withoutBackdropClose) x-on:click="close()" @endif aria-hidden="true"></div>
+    {{-- `md-transition` is a class name only to turn on Alpine's CSS transition: `x-show` then keeps
+         the scrim and the sheet displayed for their computed transition-duration (drawer.css's
+         tokens) before hiding them, so they fade and slide out rather than vanish — Firefox does not
+         transition `display`, even with `allow-discrete`. Both stages, so reopening during the exit
+         cancels the pending hide. Nothing styles the class. --}}
+    <div data-md-drawer-scrim x-cloak x-show="open" x-transition:enter="md-transition" x-transition:leave="md-transition" @if (! $withoutBackdropClose) x-on:click="close()" @endif aria-hidden="true"></div>
 
     <aside
         x-cloak
         x-show="open"
+        x-transition:enter="md-transition"
+        x-transition:leave="md-transition"
         x-trap.inert.noscroll="open && ! wide"
         x-bind:role="wide ? 'region' : 'dialog'"
         x-bind:aria-modal="wide ? null : 'true'"

resources/views/components/search.blade.php

@@ -66,7 +66,9 @@
     data-md-trigger="{{ $trigger }}"
     {{ $attributes->only(['class', 'style', 'wire:key']) }}
 >
-    <div data-md-search-scrim x-cloak x-show="open && ! fullScreen" x-on:pointerdown="close()" aria-hidden="true"></div>
+    {{-- `md-transition` turns on Alpine's CSS transition, which holds the scrim and the view
+         displayed while they fade out (search.css): Firefox does not transition `display`. --}}
+    <div data-md-search-scrim x-cloak x-show="open && ! fullScreen" x-transition:enter="md-transition" x-transition:leave="md-transition" x-on:pointerdown="close()" aria-hidden="true"></div>
 
     @if ($trigger === 'icon')
         <button
@@ -134,6 +136,8 @@
         data-md-search-view
         x-cloak
         x-show="open"
+        x-transition:enter="md-transition"
+        x-transition:leave="md-transition"
         x-on:keydown.arrow-down.prevent="step(1)"
         x-on:keydown.arrow-up.prevent="step(-1)"
         x-on:click="choose($event)"