Draw the search bar and its view as the contained style

Expressive deprecates the divided style, so the results lose their
divider; the full-screen layout takes its own surface-container-low, one
step from the docked one; the docked view opens over a scrim, as M3's
variants table says it does; and the bar is bounded at M3's 720px, grows
to that width while focused, and rests with the 24px leading and trailing
padding the specs table gives an unfocused bar. --search-width sets the
resting width for M3's 360px bar.

Plan step 20, findings IN-07, IN-08, IN-09, IN-20 and IN-21.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/components/search.blade.php

@@ -5,8 +5,10 @@
      `empty` is shown instead when the slot renders nothing (say, "No shares match"). Results are
      usually `<x-list-item>`s with a `link`, or buttons: choosing one closes the view.
 
-     Docked under the bar from `medium`, full screen below it with a back arrow (resources/css/
-     components/search.css); `docked` keeps it docked at every width. `placeholder` ("Search"),
+     Docked under the bar from `medium` over a scrim, full screen below it with a back arrow
+     (resources/css/components/search.css); `docked` keeps it docked at every width. The bar is
+     never wider than M3's 720px and grows to that width while it is focused: set `--search-width`
+     on a wrapper for a narrower resting bar (M3's own is 360px). `placeholder` ("Search"),
      `label` (the input's name when it differs from the placeholder), leading `icon` (`search`), and
      a `trailing` slot for an avatar or icon buttons in the bar. Every other attribute reaches the
      `<input type="search">`.
@@ -46,6 +48,8 @@
     data-search
     {{ $attributes->only(['class', 'wire:key'])->class(['relative']) }}
 >
+    <div data-search-scrim x-cloak x-show="open && ! fullScreen" x-on:pointerdown="close()" aria-hidden="true"></div>
+
     <div data-search-bar role="search" x-on:click="if ($event.target === $el) $refs.input.focus()">
         <span data-search-leading x-show="! fullScreen">
             <x-livewire-material::icon :name="$icon" />

resources/views/showcase/sections/fields.blade.php

@@ -126,9 +126,12 @@
                     </x-search>
                 </div>
 
-                <x-search placeholder="Search in settings" docked>
-                    <x-slot:empty>Type to search your settings.</x-slot:empty>
-                </x-search>
+                {{-- M3's resting bar is 360px and grows to 720 while focused; --search-width sets the resting one. --}}
+                <div style="--search-width: 22.5rem">
+                    <x-search placeholder="Search in settings" docked>
+                        <x-slot:empty>Type to search your settings.</x-slot:empty>
+                    </x-search>
+                </div>
             </div>
             BLADE,
         'A form' => <<<'BLADE'