Keep a closing docked search above the page until its view has gone

The docked search raised itself to z-index 50 only while open, so the
moment it closed, positioned content later on the page could cover the
view while it faded out. The root now keeps the stacking for as long as
its view carries the `md-transition` class Alpine's x-transition sets
for the length of the exit. The browser test samples the view part-way
through its fade and counts it only while the root is still at 50; it
fails without the change and passes in Chrome, Firefox and Safari.

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

resources/css/components/search.css

@@ -45,8 +45,10 @@
         position: relative;
     }
 
-    /* Full screen, through its exit too: the fixed view and bar stay above the page while they leave. */
-    [data-md-search]:is([data-md-open], [data-md-full-screen]) {
+    /* Above the page while open, and while the view leaves: full screen through `data-md-full-screen`,
+       docked through the `md-transition` class Alpine's `x-transition` carries for the length of the
+       view's exit, so later positioned content on the page never covers the fading view. */
+    [data-md-search]:is([data-md-open], [data-md-full-screen], :has(> [data-md-search-view].md-transition)) {
         z-index: 50;
     }
 

tests/Browser/PickingTest.php

@@ -212,6 +212,19 @@ it('fades the docked search\'s scrim out on close, rather than making it vanish'
     $page->assertScript("getComputedStyle({$root}.querySelector('[data-md-search-scrim]')).display === 'none'");
 });
 
+it('keeps the docked search above the page while its view closes', function () {
+    $view = "document.querySelector('#find-view')";
+
+    $page = pickProbe()
+        ->click('#find')
+        ->assertScript("getComputedStyle({$view}).display !== 'none' && getComputedStyle({$view}).opacity === '1'");
+
+    // The view caught part-way through its fade only counts while the root is still at z-index 50.
+    expect($page->script(searchCloseSample('[data-md-search-view]', "getComputedStyle(root).zIndex === '50' ? parseFloat(getComputedStyle(element).opacity) : 0")))->toBeTrue();
+
+    $page->assertScript("getComputedStyle({$view}).display === 'none' && getComputedStyle(document.querySelector('[data-md-search]:has(#find)')).zIndex !== '50'");
+});
+
 it('closes the docked search view back into its bar, rather than making it vanish', function () {
     $view = "document.querySelector('#find-view')";