Add chips, choices and search

M3's assist, filter, input and suggestion chips with chip sets; choices
as filter chips or a searchable combobox whose list is an anchored
popover; and the search bar that opens into a docked or full-screen
search view.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy

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

@@ -98,6 +98,39 @@
                 </div>
             </div>
             BLADE,
+        'Choices' => <<<'BLADE'
+            <div class="grid w-full gap-6 md:grid-cols-2">
+                <div class="grid content-start gap-6">
+                    <x-choices label="Days you are free" hint="Filter chips: any number" :value="[1, 3]" :options="[['id' => 1, 'name' => 'Mon'], ['id' => 2, 'name' => 'Tue'], ['id' => 3, 'name' => 'Wed'], ['id' => 4, 'name' => 'Thu'], ['id' => 5, 'name' => 'Fri'], ['id' => 6, 'name' => 'Sat', 'disabled' => true]]" />
+                    <x-choices label="Expires after" single :value="24" :options="[['id' => 1, 'name' => '1 hour'], ['id' => 24, 'name' => '1 day'], ['id' => 168, 'name' => '7 days']]" />
+                </div>
+
+                <div class="grid content-start gap-4">
+                    <x-choices label="Time zone" searchable icon="public" value="Europe/Zurich" :options="collect(timezone_identifiers_list())->map(fn ($zone) => ['id' => $zone, 'name' => str_replace('_', ' ', $zone)])->all()" />
+                    <x-choices label="Language" searchable variant="filled" placeholder="Type a language" :options="[['id' => 'de', 'name' => 'Deutsch'], ['id' => 'en', 'name' => 'English'], ['id' => 'fr', 'name' => 'Français'], ['id' => 'it', 'name' => 'Italiano'], ['id' => 'rm', 'name' => 'Rumantsch', 'disabled' => true]]" />
+                </div>
+            </div>
+            BLADE,
+        'Search' => <<<'BLADE'
+            <div class="grid w-full gap-6 md:grid-cols-2">
+                <div x-data="{ query: '' }">
+                    <x-search x-model="query" placeholder="Search shares">
+                        <x-list>
+                            <x-list-item title="holiday-photos.zip" description="248 MB · 3 days left" icon="folder_zip" link="#fields" x-show="'holiday-photos.zip'.includes(query.toLowerCase())" />
+                            <x-list-item title="contract.pdf" description="1.2 MB · 1 hour left" icon="picture_as_pdf" link="#fields" x-show="'contract.pdf'.includes(query.toLowerCase())" />
+                            <x-list-item title="design-review.mp4" description="3.4 GB · 7 days left" icon="movie" link="#fields" x-show="'design-review.mp4'.includes(query.toLowerCase())" />
+                        </x-list>
+                        <x-slot:trailing>
+                            <span class="grid size-8 place-items-center rounded-corner-full bg-primary-container type-label-lg text-on-primary-container">AR</span>
+                        </x-slot:trailing>
+                    </x-search>
+                </div>
+
+                <x-search placeholder="Search in settings" docked>
+                    <x-slot:empty>Type to search your settings.</x-slot:empty>
+                </x-search>
+            </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>
@@ -121,7 +154,7 @@
 
     <p class="max-w-3xl type-body-md text-on-surface-variant">
         <code>&lt;x-input&gt;</code>, <code>&lt;x-password&gt;</code>, <code>&lt;x-textarea&gt;</code>, <code>&lt;x-select&gt;</code>, <code>&lt;x-file&gt;</code>
-        (all on <code>&lt;x-field&gt;</code>, outlined or filled), <code>&lt;x-checkbox&gt;</code>, <code>&lt;x-radio&gt;</code>, <code>&lt;x-toggle&gt;</code> and <code>&lt;x-form&gt;</code>.
+        (all on <code>&lt;x-field&gt;</code>, outlined or filled), <code>&lt;x-checkbox&gt;</code>, <code>&lt;x-radio&gt;</code>, <code>&lt;x-toggle&gt;</code>, <code>&lt;x-choices&gt;</code>, <code>&lt;x-search&gt;</code> and <code>&lt;x-form&gt;</code>.
     </p>
 
     @foreach ($examples as $title => $code)