From dfb599747403e4f87e8e4a81708ba84fea8fa868 Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Tue, 15 Sep 2026 04:50:29 +0200
Subject: [PATCH] Rewrite the showcase's Chips section without Tailwind

Plan step 38: the Alpine-scope wrapper divs become <x-row>/<x-stack>
carrying x-data directly, giving Filter and Input chips M3's
full-width stretch in place of w-full/space-y-6. The narrow demo that
forces its chip set to scroll moves to a data-md-showcase-chip-scroll
hook (384px, Tailwind's old max-w-sm).

Every id, value and derived aria-label the Chromium ChipsTest
selectors read (#chips, the filter checkboxes' values, "Remove
<email>") is unchanged.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
---
 resources/css/showcase.css                    |  7 ++++++
 .../views/showcase/sections/chips.blade.php   | 22 +++++++++----------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/resources/css/showcase.css b/resources/css/showcase.css
index 3fcc4196..54206ed5 100644
--- a/resources/css/showcase.css
+++ b/resources/css/showcase.css
@@ -390,4 +390,11 @@
         width: 96px;
         height: 96px;
     }
+
+    /* Chips: a row narrow enough that its set has to scroll, to show the fade and the arrow
+       buttons M3 asks an overflowing row for. */
+    [data-md-showcase-chip-scroll] {
+        width: 100%;
+        max-width: 384px;
+    }
 }
diff --git a/resources/views/showcase/sections/chips.blade.php b/resources/views/showcase/sections/chips.blade.php
index 8e6da8da..e9a21946 100644
--- a/resources/views/showcase/sections/chips.blade.php
+++ b/resources/views/showcase/sections/chips.blade.php
@@ -1,17 +1,17 @@
 @php
     $examples = [
         'Assist chips' => <<<'BLADE'
-            <div x-data class="flex flex-wrap items-center gap-2">
+            <x-livewire-material::row gap="space100" wrap align="center" x-data>
                 <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>
+            </x-livewire-material::row>
             BLADE,
         'Filter chips' => <<<'BLADE'
-            <div x-data="{ kinds: ['photos'] }" class="w-full space-y-6">
+            <x-livewire-material::stack gap="space300" x-data="{ kinds: ['photos'] }">
                 <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" />
@@ -25,10 +25,10 @@
                     <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>
+            </x-livewire-material::stack>
             BLADE,
         'Input chips' => <<<'BLADE'
-            <div x-data="{ recipients: ['anna@example.com', 'ben@example.com', 'chiara@example.com'] }" class="w-full space-y-6">
+            <x-livewire-material::stack gap="space300" x-data="{ recipients: ['anna@example.com', 'ben@example.com', 'chiara@example.com'] }">
                 <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>
@@ -41,7 +41,7 @@
                     <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>
+            </x-livewire-material::stack>
             BLADE,
         'Suggestion chips' => <<<'BLADE'
             <x-chip-set label="Suggested replies">
@@ -53,7 +53,7 @@
             BLADE,
         'A set that scrolls' => <<<'BLADE'
             {{-- M3 asks an overflowing chip row for a visible affordance: the edge it can still scroll towards fades, and on a mouse a button sits over it. --}}
-            <div class="w-full max-w-sm">
+            <div data-md-showcase-chip-scroll>
                 <x-chip-set label="Sort and filter" hint="Drag, or use the arrow keys" scroll>
                     <x-chip type="filter" label="Newest" name="sort[]" value="newest" :selected="true" />
                     <x-chip type="filter" label="Largest" name="sort[]" value="largest" />
@@ -67,14 +67,14 @@
     ];
 @endphp
 
-<section id="chips" class="scroll-mt-24 space-y-6">
-    <h2 class="type-headline-md">Chips</h2>
+<x-livewire-material::stack as="section" id="chips" gap="space300">
+    <h2 class="md-type-headline-md">Chips</h2>
 
-    <p class="max-w-3xl type-body-md text-on-surface-variant">
+    <p class="md-type-body-md md-ink-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>
+</x-livewire-material::stack>