Close a full-screen search back into its bar or icon, bar and view together

`fullScreen` followed `open`, so the moment a full-screen search closed,
`data-md-full-screen` went with it: the fixed header bar went back to its
resting pill — or to `display: none`, behind the search icon — and the
view, still fading out under Alpine's hold, dropped to the docked layout
for its exit. In every engine the bar vanished on the first frame while
the view went on fading somewhere else.

search.js: a close from full screen now `hold()`s the layout — `leaving`
keeps `fullScreen`, and with it `data-md-full-screen`, the back arrow and
the fixed bar, for the view's own closing duration, read from its
computed style a frame on (zero under reduced motion); reopening lets a
pending end go by. search.css fades the header bar out with the view on
the view's spring and keeps the root above the page while it leaves,
and the icon trigger's bar stays displayed until the layout settles. The
focus trap now binds to `open && fullScreen`, so it still lets go at the
close and its return of focus lands inside RETURN_GUARD_MS rather than
reopening the view at the end of the exit.

PickingTest samples both exits in the page — the icon trigger, and the
bar trigger on a compact window — for a moment where the root is still
full screen with a fixed bar and both bar and view part-way through their
fade, then checks the settled layout and focus back on the icon or the
field; both fail on the previous code in Chrome, Firefox and Safari. The
tests wait for the entry's own transitions first: Firefox reads a
transition's end value until its next refresh tick.

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

tests/Browser/PickingTest.php

@@ -284,6 +284,71 @@ it('expands the search icon into the full-screen view, and hands focus back to t
         ->assertScript("getComputedStyle({$trigger}).display !== 'none'");
 });
 
+/**
+ * Closes a full-screen search from its back arrow and samples, in the page, for a moment in its
+ * exit where the layout is still full screen — the root marked, the header bar fixed at the top —
+ * with both the bar and the view part-way through their fade, rather than the bar gone back to
+ * its resting form (or to nothing, behind the icon) on the first frame.
+ */
+function fullScreenCloseSample(string $input): string
+{
+    return <<<JS
+        (async () => {
+            const root = document.querySelector('[data-md-search]:has(#{$input})')
+            root.querySelector('[data-md-search-back]').click()
+
+            for (let i = 0; i < 80; i++) {
+                const bar = getComputedStyle(root.querySelector('[data-md-search-bar]'))
+                const view = getComputedStyle(root.querySelector('[data-md-search-view]'))
+                const fading = (style) => style.display !== 'none' && parseFloat(style.opacity) > 0.02 && parseFloat(style.opacity) < 0.98
+
+                if (! root.hasAttribute('data-md-open') && root.hasAttribute('data-md-full-screen') && bar.position === 'fixed' && fading(bar) && fading(view)) return true
+                await new Promise((resolve) => setTimeout(resolve, 5))
+            }
+            return false
+        })()
+        JS;
+}
+
+it('closes the full-screen view and its bar together, back into the search icon', function () {
+    $root = "document.querySelector('[data-md-search]:has(#find-icon)')";
+    $trigger = "{$root}.querySelector('[data-md-search-trigger]')";
+
+    $page = pickProbe()
+        ->click('[data-md-search]:has(#find-icon) [data-md-search-trigger]')
+        ->assertScript("{$root}.hasAttribute('data-md-full-screen')")
+        // Its entry run: Firefox reads a transition's end value until its next refresh tick, so an
+        // opacity of 1 alone does not say the view has finished fading in.
+        ->assertScript("{$root}.getAnimations({ subtree: true }).length === 0");
+
+    expect($page->script(fullScreenCloseSample('find-icon')))->toBeTrue();
+
+    $page->assertScript("! {$root}.hasAttribute('data-md-full-screen')")
+        ->assertScript("getComputedStyle({$root}.querySelector('[data-md-search-bar]')).display === 'none'")
+        ->assertScript("getComputedStyle({$root}.querySelector('[data-md-search-view]')).display === 'none'")
+        ->assertScript("document.activeElement === {$trigger}")
+        // The view does not open again when the trap's return of focus lands on the icon.
+        ->assertScript("! {$root}.hasAttribute('data-md-open')");
+});
+
+it('closes a compact window\'s full-screen view and its bar together, back into the bar', function () {
+    $root = "document.querySelector('[data-md-search]:has(#find)')";
+
+    $page = pickProbe()->resize(400, 800);
+
+    $page->click('#find')
+        ->assertScript("{$root}.hasAttribute('data-md-full-screen')")
+        ->assertScript("{$root}.getAnimations({ subtree: true }).length === 0");
+
+    expect($page->script(fullScreenCloseSample('find')))->toBeTrue();
+
+    $page->assertScript("! {$root}.hasAttribute('data-md-full-screen')")
+        ->assertScript("(({ position, display, opacity }) => position === 'relative' && display !== 'none' && opacity === '1')(getComputedStyle({$root}.querySelector('[data-md-search-bar]')))")
+        ->assertScript("getComputedStyle({$root}.querySelector('[data-md-search-view]')).display === 'none'")
+        ->assertScript("document.activeElement.id === 'find'")
+        ->assertScript("! {$root}.hasAttribute('data-md-open')");
+});
+
 it('shows the suggestions until the first key, then the results, and counts whichever is on screen', function () {
     $root = "document.querySelector('[data-md-search]:has(#find-icon)')";
     $shown = fn (string $list): string => "{$root}.querySelector('[data-md-search-{$list}]').checkVisibility()";