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
2026-09-13 08:07:59 +02:00
parent 7f92f1cb29
commit 0fee2a0952
21 changed files with 2061 additions and 2 deletions
@@ -19,5 +19,6 @@
        @include('livewire-material::showcase.sections.containment')
        @include('livewire-material::showcase.sections.carousel')
        @include('livewire-material::showcase.sections.fields')
+        @include('livewire-material::showcase.sections.chips')
    </main>
@endsection
@@ -18,7 +18,7 @@
                <a href="{{ route('livewire-material.showcase') }}" class="shrink-0 type-title-lg max-sm:hidden">Livewire Material</a>

                <nav class="-my-2 flex min-w-0 flex-1 gap-x-4 overflow-x-auto py-2 whitespace-nowrap type-label-lg text-on-surface-variant [scrollbar-width:none]" aria-label="Sections">
-                    @foreach (['colour' => 'Colour', 'type' => 'Type', 'shape' => 'Shape', 'elevation' => 'Elevation', 'motion' => 'Motion', 'icons' => 'Icons', 'buttons' => 'Buttons', 'menus' => 'Menus', 'communication' => 'Communication', 'progress' => 'Progress', 'containment' => 'Containment', 'carousel' => 'Carousel', 'fields' => 'Fields'] as $anchor => $section)
+                    @foreach (['colour' => 'Colour', 'type' => 'Type', 'shape' => 'Shape', 'elevation' => 'Elevation', 'motion' => 'Motion', 'icons' => 'Icons', 'buttons' => 'Buttons', 'menus' => 'Menus', 'communication' => 'Communication', 'progress' => 'Progress', 'containment' => 'Containment', 'carousel' => 'Carousel', 'fields' => 'Fields', 'chips' => 'Chips'] as $anchor => $section)
                        <a href="#{{ $anchor }}" class="rounded-corner-xs hover:text-on-surface focus-ring">{{ $section }}</a>
                    @endforeach
                </nav>
@@ -0,0 +1,79 @@
+@php
+    $examples = [
+        'Assist chips' => <<<'BLADE'
+            <div x-data class="flex flex-wrap items-center gap-2">
+                <x-chip label="Add to calendar" icon="event" x-on:click="materialToast('Added to your calendar')" />
+                <x-chip label="Directions" icon="directions" link="#chips" />
+                <x-chip label="Share" icon="share" elevated tooltip="Share this file" />
+                <x-chip label="Material 3 guidelines" icon-right="open_in_new" link="https://m3.material.io/components/chips" external />
+                <x-chip label="Unavailable" icon="block" disabled />
+                <x-chip label="Unavailable" icon="block" elevated disabled />
+            </div>
+            BLADE,
+        'Filter chips' => <<<'BLADE'
+            <div x-data="{ kinds: ['photos'] }" class="w-full space-y-6">
+                <x-chip-set label="File types" hint="Show only these kinds of file">
+                    <x-chip type="filter" label="Photos" value="photos" x-model="kinds" />
+                    <x-chip type="filter" label="Documents" value="documents" x-model="kinds" />
+                    <x-chip type="filter" label="Archives" value="archives" x-model="kinds" />
+                    <x-chip type="filter" label="Video" value="video" x-model="kinds" disabled />
+                </x-chip-set>
+
+                <x-chip-set label="Elevated, with icons">
+                    <x-chip type="filter" label="Starred" icon="star" name="starred" :selected="true" elevated />
+                    <x-chip type="filter" label="Shared with me" icon="group" name="shared" elevated />
+                    <x-chip type="filter" label="Expiring" name="expiring" icon-right="arrow_drop_down" />
+                    <x-chip type="filter" label="Archived" name="archived" :selected="true" disabled />
+                </x-chip-set>
+            </div>
+            BLADE,
+        'Input chips' => <<<'BLADE'
+            <div x-data="{ recipients: ['anna@example.com', 'ben@example.com', 'chiara@example.com'] }" class="w-full space-y-6">
+                <x-chip-set label="Recipients" hint="Backspace or Delete removes the focused chip">
+                    <template x-for="recipient in recipients" :key="recipient">
+                        <x-chip type="input" icon="mail" removable remove="recipients = recipients.filter((other) => other !== recipient)"><span x-text="recipient"></span></x-chip>
+                    </template>
+                </x-chip-set>
+
+                <x-chip-set label="People">
+                    <x-chip type="input" label="Anna Müller" avatar="AM" removable />
+                    <x-chip type="input" label="Ben Keller" avatar="BK" :selected="true" removable />
+                    <x-chip type="input" label="contract.pdf" icon="picture_as_pdf" x-on:click="materialToast('contract.pdf')" />
+                    <x-chip type="input" label="Chiara Rossi" avatar="CR" removable disabled />
+                </x-chip-set>
+            </div>
+            BLADE,
+        'Suggestion chips' => <<<'BLADE'
+            <x-chip-set label="Suggested replies">
+                <x-chip type="suggestion" label="Sounds good" />
+                <x-chip type="suggestion" label="Can we talk tomorrow?" />
+                <x-chip type="suggestion" label="Send the files" icon="attach_file" elevated />
+                <x-chip type="suggestion" label="Not now" disabled />
+            </x-chip-set>
+            BLADE,
+        'A set that scrolls' => <<<'BLADE'
+            <div class="w-full max-w-sm">
+                <x-chip-set label="Sort and filter" scroll>
+                    <x-chip type="filter" label="Newest" name="sort[]" value="newest" :selected="true" />
+                    <x-chip type="filter" label="Largest" name="sort[]" value="largest" />
+                    <x-chip type="filter" label="Expiring soon" name="sort[]" value="expiring" />
+                    <x-chip type="filter" label="Password protected" name="sort[]" value="protected" />
+                    <x-chip type="filter" label="Downloaded" name="sort[]" value="downloaded" />
+                    <x-chip type="filter" label="Never opened" name="sort[]" value="unopened" />
+                </x-chip-set>
+            </div>
+            BLADE,
+    ];
+@endphp
+
+<section id="chips" class="scroll-mt-24 space-y-6">
+    <h2 class="type-headline-md">Chips</h2>
+
+    <p class="max-w-3xl type-body-md text-on-surface-variant">
+        <code>&lt;x-chip&gt;</code> — assist, filter, input and suggestion — and <code>&lt;x-chip-set&gt;</code>.
+    </p>
+
+    @foreach ($examples as $title => $code)
+        <x-showcase::example :$title :$code />
+    @endforeach
+</section>
@@ -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)