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/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'