Give search M3's icon entry point and its suggestions

M3 § Search names three entry points and only the bar existed; suggestions
before the first keystroke were missing too (plan step 24, audit
docs/audits/m3-alignment/inputs.md § Missing). `trigger="icon"` is the search
icon button — search as a secondary action, one 48px button that expands into
the full-screen view at any width, since an icon button has nothing to dock
under, and takes its focus back on close. The `suggestions` slot stands where
the results do until something is typed; the live region counts whichever of
the two is on screen and names suggestions as suggestions.

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

@@ -169,6 +169,40 @@
                 </div>
             </div>
             BLADE,
+        'Search entry points and suggestions' => <<<'BLADE'
+            <div class="grid w-full gap-6 medium:grid-cols-2">
+                <div x-data="{ query: '' }">
+                    <x-search x-model="query" placeholder="Search shares">
+                        <x-slot:suggestions>
+                            <x-list>
+                                <x-list-item title="Recent: holiday photos" icon="history" link="#fields" />
+                                <x-list-item title="Recent: contract" icon="history" link="#fields" />
+                                <x-list-item title="Shares expiring this week" icon="trending_up" link="#fields" />
+                            </x-list>
+                        </x-slot:suggestions>
+
+                        <x-list>
+                            <x-list-item title="holiday-photos.zip" description="248 MB" icon="folder_zip" link="#fields" x-show="'holiday-photos.zip'.includes(query.toLowerCase())" />
+                            <x-list-item title="contract.pdf" description="1.2 MB" icon="picture_as_pdf" link="#fields" x-show="'contract.pdf'.includes(query.toLowerCase())" />
+                        </x-list>
+                    </x-search>
+                </div>
+
+                {{-- M3's search icon button: search as a secondary action, expanding into the full-screen view. --}}
+                <div class="flex items-center gap-2 rounded-corner-full bg-surface-container-high px-2 py-1">
+                    <x-button icon="menu" aria-label="Open the menu" />
+                    <span class="grow type-title-md text-on-surface">Shares</span>
+                    <x-search trigger="icon" label="Search shares">
+                        <x-slot:suggestions>
+                            <x-list>
+                                <x-list-item title="Recent: design review" icon="history" link="#fields" />
+                            </x-list>
+                        </x-slot:suggestions>
+                        <x-slot:empty>No shares match.</x-slot:empty>
+                    </x-search>
+                </div>
+            </div>
+            BLADE,
         'A form' => <<<'BLADE'
             <x-card variant="outlined" class="w-full max-w-xl">
                 <x-form x-on:submit.prevent="materialToast('Share created', { type: 'success' })" separator>