diff --git a/resources/css/components/bottom-sheet.css b/resources/css/components/bottom-sheet.css
index ed2be020..f68a7994 100644
--- a/resources/css/components/bottom-sheet.css
+++ b/resources/css/components/bottom-sheet.css
@@ -31,6 +31,9 @@
  *
  * The scrim fades out as it fades in, and the state rules match the root's own scrim and panel,
  * so a sheet nested in an open one (a menu's sheet at compact inside a sheet) keeps its own state.
+ * Both keep `x-show`, and the view's `x-transition` holds their `display` through the exit rather
+ * than `allow-discrete`, which Firefox does not honour for `display` (see drawer.css); Alpine holds
+ * for the first `transition-duration` listed, so the closing slide is listed first.
  */
 
 @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@@ -85,10 +88,9 @@
         box-shadow: var(--md-sys-elevation-1);
         padding-bottom: var(--material-safe-bottom, env(safe-area-inset-bottom));
         translate: 0 100%;
-        transition-property: translate, display;
+        transition-property: translate;
         transition-duration: var(--md-sys-motion-effects-default-duration);
         transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate);
-        transition-behavior: allow-discrete;
     }
 
     [data-md-bottom-sheet][data-md-open] > [data-md-bottom-sheet-panel] {
@@ -107,14 +109,14 @@
        spring, independent of the translate that opens and closes the sheet. */
     [data-md-bottom-sheet-panel][data-md-preset] {
         height: var(--sheet-max-height);
-        transition-property: translate, height, display;
-        transition-duration: var(--md-sys-motion-effects-default-duration), var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-effects-default-duration);
-        transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate), var(--md-sys-motion-spatial-default), var(--md-sys-motion-easing-emphasized-accelerate);
+        transition-property: translate, height;
+        transition-duration: var(--md-sys-motion-effects-default-duration), var(--md-sys-motion-spatial-default-duration);
+        transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate), var(--md-sys-motion-spatial-default);
     }
 
     [data-md-bottom-sheet][data-md-open] > [data-md-bottom-sheet-panel][data-md-preset] {
-        transition-duration: var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-spatial-default-duration);
-        transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate), var(--md-sys-motion-spatial-default), var(--md-sys-motion-easing-emphasized-decelerate);
+        transition-duration: var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-spatial-default-duration);
+        transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate), var(--md-sys-motion-spatial-default);
     }
 
     [data-md-bottom-sheet-handle] {
diff --git a/resources/css/components/drawer.css b/resources/css/components/drawer.css
index f1f540d4..47539517 100644
--- a/resources/css/components/drawer.css
+++ b/resources/css/components/drawer.css
@@ -18,9 +18,12 @@
  * 400px cap, 24dp start/end padding, a large corner on the inner edge only — from the specs
  * table. It enters on the emphasized-decelerate easing rather than a spring, because a sheet
  * anchored to an edge that overshot would open a gap, and leaves on emphasized accelerate: the
- * view keeps `x-show`, so `@starting-style` gives the entry its start and `allow-discrete` holds
- * `display` through the exit, whose timing comes from the closed state's own rule (a transition
- * takes the after-change style's). Reduced motion zeroes both duration tokens (tokens/motion.css).
+ * view keeps `x-show`, so `@starting-style` gives the entry its start and the view's `x-transition`
+ * holds `display` through the exit, whose timing comes from the closed state's own rule (a
+ * transition takes the after-change style's). Not `allow-discrete` on `display`: Firefox does not
+ * transition `display`, and in the other engines it would hold a second time after Alpine's hold.
+ * Alpine holds for the first `transition-duration` listed, so each exit's longest transition is
+ * listed first. Reduced motion zeroes both duration tokens (tokens/motion.css).
  * Below `expanded` it slides, from whichever edge `data-md-side` names in the document's direction;
  * once `standard` makes it co-planar it only fades (an in-flow box does not need to travel). Every
  * state rule matches the sheet and scrim as the root's children, so a sheet nested in an open one
@@ -84,10 +87,9 @@
         color: var(--md-sys-color-on-surface);
         box-shadow: var(--md-sys-elevation-1);
         translate: var(--sheet-offset) 0;
-        transition-property: translate, display;
+        transition-property: translate;
         transition-duration: var(--md-sys-motion-effects-default-duration);
         transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate);
-        transition-behavior: allow-discrete;
     }
 
     [data-md-drawer-sheet][data-md-side='end'] {
@@ -167,7 +169,7 @@
             background-color: var(--md-sys-color-surface);
             box-shadow: none;
             opacity: 0;
-            transition-property: opacity, display;
+            transition-property: opacity;
             transition-duration: var(--md-sys-motion-effects-default-duration);
             transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate);
         }
diff --git a/resources/css/components/search.css b/resources/css/components/search.css
index 035b8bc4..92f010b3 100644
--- a/resources/css/components/search.css
+++ b/resources/css/components/search.css
@@ -56,10 +56,9 @@
         inset: 0;
         z-index: -1;
         background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
-        transition-property: opacity, display;
+        transition-property: opacity;
         transition-duration: var(--md-sys-motion-effects-fast-duration);
         transition-timing-function: var(--md-sys-motion-effects-fast);
-        transition-behavior: allow-discrete;
     }
 
     @starting-style {
@@ -68,6 +67,12 @@
         }
     }
 
+    /* Closing (or turning full screen), the scrim fades back out while the view's `x-transition`
+       holds its `display`: not `allow-discrete`, which Firefox does not honour for `display`. */
+    [data-md-search]:is(:not([data-md-open]), [data-md-full-screen]) > [data-md-search-scrim] {
+        opacity: 0;
+    }
+
     [data-md-search-bar] {
         position: relative;
         z-index: 1;
@@ -201,10 +206,9 @@
         background-color: var(--md-sys-color-surface-container-high);
         box-shadow: var(--md-sys-elevation-3);
         transform-origin: top;
-        transition-property: opacity, scale, display;
+        transition-property: opacity, scale;
         transition-duration: var(--md-sys-motion-spatial-fast-duration);
         transition-timing-function: var(--md-sys-motion-spatial-fast);
-        transition-behavior: allow-discrete;
     }
 
     @starting-style {
@@ -214,6 +218,13 @@
         }
     }
 
+    /* Closing, the view goes back the way it came, into the bar, while its `x-transition` holds
+       `display` for the same duration. */
+    [data-md-search]:not([data-md-open]) > [data-md-search-view] {
+        opacity: 0;
+        scale: 1 0.9;
+    }
+
     /* M3: the docked container is at least 240px tall — once there is something in it to be tall
        about; a search with nothing to show stays the height of its bar. */
     [data-md-search-view]:has([data-md-search-results], [data-md-search-suggestions]) {
diff --git a/resources/views/components/bottom-sheet.blade.php b/resources/views/components/bottom-sheet.blade.php
index 844744f3..23cffe5d 100644
--- a/resources/views/components/bottom-sheet.blade.php
+++ b/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"
diff --git a/resources/views/components/drawer.blade.php b/resources/views/components/drawer.blade.php
index 9c86a64a..271b91c3 100644
--- a/resources/views/components/drawer.blade.php
+++ b/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'"
diff --git a/resources/views/components/search.blade.php b/resources/views/components/search.blade.php
index 84d7285b..c8dd0839 100644
--- a/resources/views/components/search.blade.php
+++ b/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)"
diff --git a/tests/Browser/ContainmentTest.php b/tests/Browser/ContainmentTest.php
index dfdcd911..a904d0f5 100644
--- a/tests/Browser/ContainmentTest.php
+++ b/tests/Browser/ContainmentTest.php
@@ -635,6 +635,68 @@ it('fades the bottom sheet\'s scrim out on close, rather than making it vanish',
     $page->assertScript("getComputedStyle({$scrim}).display === 'none'");
 });
 
+it('slides the side sheet out on close, rather than making it vanish', function () {
+    $sheet = "document.querySelector('#containment aside[role=\"dialog\"]')";
+    $scrim = "{$sheet}.parentElement.querySelector(':scope > [data-md-drawer-scrim]')";
+
+    $page = containment()
+        ->click('#containment button:has-text("Side sheet")')
+        ->assertScript("getComputedStyle({$sheet}).display !== 'none'")
+        ->assertScript("Math.abs(parseFloat(getComputedStyle({$sheet}).translate)) < 0.5");
+
+    // Sampled in the page, in the same round trip as the close, as the scrim's fade is above: the
+    // sheet must be caught still displayed and part of the way to its closed offset (one sheet
+    // width past its edge), not gone at once — which is what Firefox showed while the exit leaned
+    // on `allow-discrete` holding `display`.
+    $midSlide = $page->script(<<<JS
+        (async () => {
+            const width = {$sheet}.getBoundingClientRect().width
+            {$scrim}.click()
+
+            for (let i = 0; i < 60; i++) {
+                const style = getComputedStyle({$sheet})
+                const offset = Math.abs(parseFloat(style.translate) || 0)
+                if (style.display !== 'none' && offset > 1 && offset < width - 1) return true
+                await new Promise((resolve) => setTimeout(resolve, 5))
+            }
+            return false
+        })()
+        JS);
+
+    expect($midSlide)->toBeTrue();
+
+    $page->assertScript("getComputedStyle({$sheet}).display === 'none'");
+});
+
+it('slides the bottom sheet down on close, rather than making it vanish', function () {
+    $sheet = "document.querySelector('#containment section[role=\"dialog\"]')";
+    $scrim = "{$sheet}.parentElement.querySelector(':scope > [data-md-bottom-sheet-scrim]')";
+    $offset = "(parseFloat(getComputedStyle({$sheet}).translate.split(' ')[1]) || 0)";
+
+    $page = containment()
+        ->click('#containment button:has(> span:text-is("Bottom sheet"))')
+        ->assertScript("getComputedStyle({$sheet}).display !== 'none'")
+        ->assertScript("Math.abs({$offset}) < 0.5");
+
+    $midSlide = $page->script(<<<JS
+        (async () => {
+            const height = {$sheet}.getBoundingClientRect().height
+            {$scrim}.click()
+
+            for (let i = 0; i < 60; i++) {
+                const offset = {$offset}
+                if (getComputedStyle({$sheet}).display !== 'none' && offset > 1 && offset < height - 1) return true
+                await new Promise((resolve) => setTimeout(resolve, 5))
+            }
+            return false
+        })()
+        JS);
+
+    expect($midSlide)->toBeTrue();
+
+    $page->assertScript("getComputedStyle({$sheet}).display === 'none'");
+});
+
 it('slides the side sheet in from its own edge in a right-to-left page', function () {
     Route::middleware('web')->get('/drawer-rtl-probe', fn () => Blade::render(<<<'BLADE'
         <!DOCTYPE html>
diff --git a/tests/Browser/PickingTest.php b/tests/Browser/PickingTest.php
index 297a90e8..6be28e88 100644
--- a/tests/Browser/PickingTest.php
+++ b/tests/Browser/PickingTest.php
@@ -175,6 +175,55 @@ it('says so when nothing matches, and closes on a press outside or a chosen resu
         ->assertScript("getComputedStyle({$view}).display === 'none'");
 });
 
+/**
+ * Presses the open docked search's scrim and samples, in the page and in the same round trip,
+ * whether `$expression` (a number) was ever caught strictly between `$from` and `$to` while the
+ * element was still displayed: the exit ran, rather than the element vanishing at once.
+ */
+function searchCloseSample(string $element, string $expression): string
+{
+    return <<<JS
+        (async () => {
+            const root = document.querySelector('[data-md-search]:has(#find)')
+            root.querySelector('[data-md-search-scrim]').dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+
+            for (let i = 0; i < 80; i++) {
+                const element = root.querySelector('{$element}')
+                const value = {$expression}
+                if (getComputedStyle(element).display !== 'none' && value > 0.02 && value < 0.98) return true
+                await new Promise((resolve) => setTimeout(resolve, 5))
+            }
+            return false
+        })()
+        JS;
+}
+
+it('fades the docked search\'s scrim out on close, rather than making it vanish', function () {
+    $root = "document.querySelector('[data-md-search]:has(#find)')";
+
+    $page = pickProbe()
+        ->click('#find')
+        // Displayed as well as opaque: until the first frame of its entry the scrim is still
+        // `display: none` at the open state's full opacity.
+        ->assertScript("(({ display, opacity }) => display !== 'none' && opacity === '1')(getComputedStyle({$root}.querySelector('[data-md-search-scrim]')))");
+
+    expect($page->script(searchCloseSample('[data-md-search-scrim]', 'parseFloat(getComputedStyle(element).opacity)')))->toBeTrue();
+
+    $page->assertScript("getComputedStyle({$root}.querySelector('[data-md-search-scrim]')).display === 'none'");
+});
+
+it('closes the docked search view back into its bar, rather than making it vanish', function () {
+    $view = "document.querySelector('#find-view')";
+
+    $page = pickProbe()
+        ->click('#find')
+        ->assertScript("getComputedStyle({$view}).display !== 'none' && getComputedStyle({$view}).opacity === '1'");
+
+    expect($page->script(searchCloseSample('[data-md-search-view]', 'parseFloat(getComputedStyle(element).opacity)')))->toBeTrue();
+
+    $page->assertScript("getComputedStyle({$view}).display === 'none'");
+});
+
 it('takes the whole screen on a compact window, with a back arrow', function () {
     $page = pickProbe()->resize(400, 800);
 
diff --git a/tests/Feature/Components/OverlayTest.php b/tests/Feature/Components/OverlayTest.php
index 2d09babe..2a45d6f0 100644
--- a/tests/Feature/Components/OverlayTest.php
+++ b/tests/Feature/Components/OverlayTest.php
@@ -251,15 +251,21 @@ it('is M3\'s standard side sheet from expanded, and the modal one below', functi
 it('slides a side sheet out as it slid in, from its own edge in either direction, and fades its scrim both ways', function () {
     $css = ComponentStylesheet::read('drawer');
 
+    // Alpine's CSS transition holds `display` through the exit (the view's `x-transition`), not
+    // `allow-discrete`, which Firefox does not honour for `display`.
     expect($css->declarations('[data-md-drawer-sheet]'))
         ->toHaveKey('translate', 'var(--sheet-offset) 0')
-        ->toHaveKey('transition-behavior', 'allow-discrete')
+        ->toHaveKey('transition-property', 'translate')
+        ->not->toHaveKey('transition-behavior')
         ->not->toHaveKey('opacity')
         ->and($css->declarations("[data-md-drawer-sheet][data-md-side='end']:is([dir='rtl'], [dir='rtl'] *)"))->toBe(['--sheet-offset' => '-100%'])
         ->and($css->declarations("[data-md-drawer-sheet][data-md-side='start']:is([dir='rtl'], [dir='rtl'] *)"))->toBe(['--sheet-offset' => '100%'])
         ->and($css->declarations('[data-md-drawer][data-md-open] > [data-md-drawer-sheet]', ['@starting-style']))->toBe(['translate' => 'var(--sheet-offset) 0'])
         ->and($css->declarations('[data-md-drawer-scrim]'))->toHaveKey('opacity', '0')
-        ->and($css->declarations('[data-md-drawer][data-md-open] > [data-md-drawer-scrim]'))->toBe(['opacity' => '1']);
+        ->and($css->declarations('[data-md-drawer][data-md-open] > [data-md-drawer-scrim]'))->toBe(['opacity' => '1'])
+        ->and((string) $this->blade('<x-drawer title="Filters">Body</x-drawer>'))
+        ->toMatch('/<div data-md-drawer-scrim x-cloak x-show="open" x-transition:enter="md-transition" x-transition:leave="md-transition"/')
+        ->toMatch('/<aside\s+x-cloak\s+x-show="open"\s+x-transition:enter="md-transition"\s+x-transition:leave="md-transition"/');
 });
 
 it('draws the drawer from a stylesheet imported from the containment block, with the pane prop gone', function () {