From 44a29a8ea27a580f0ecacab9d95b87b24657a8e1 Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Tue, 15 Sep 2026 04:18:37 +0200
Subject: [PATCH] Rewrite the showcase's Icons section without Tailwind
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Plan step 38: the filter row is now real components — <x-input
icon="search"> and two <x-checkbox>s — instead of a bespoke bordered
label and accent-coloured native inputs; the result grid is
<x-grid min-item="120px"> of <x-surface as="li">/<x-stack> tiles.
The fetched symbol's mask stays the view's own x-bind:style (its
shorthand depends on the fetched name), but the size it toggles
between 24 and 20px is now the data-md-showcase-icon-size attribute
a script sets, never a class, drawn by data-md-showcase-icon-mask in
showcase.css.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
---
 resources/css/showcase.css                    | 15 +++++
 .../views/showcase/sections/icons.blade.php   | 62 ++++++++-----------
 2 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/resources/css/showcase.css b/resources/css/showcase.css
index d7f0bd47..37d4e7b1 100644
--- a/resources/css/showcase.css
+++ b/resources/css/showcase.css
@@ -261,4 +261,19 @@
         border-radius: var(--md-sys-shape-corner-full);
         background-color: var(--md-sys-color-tertiary);
     }
+
+    /* Icons: one search result's mask (its `mask` shorthand is the fetched symbol, so it stays the
+       view's own x-bind:style), 24px by default and 20px once optical size 20 is on — the state a
+       script toggles as data-md-showcase-icon-size, never a class. */
+    [data-md-showcase-icon-mask] {
+        display: block;
+        width: 24px;
+        height: 24px;
+        background-color: currentColor;
+    }
+
+    [data-md-showcase-icon-mask][data-md-showcase-icon-size='20'] {
+        width: 20px;
+        height: 20px;
+    }
 }
diff --git a/resources/views/showcase/sections/icons.blade.php b/resources/views/showcase/sections/icons.blade.php
index bba669a6..6d94aae3 100644
--- a/resources/views/showcase/sections/icons.blade.php
+++ b/resources/views/showcase/sections/icons.blade.php
@@ -1,6 +1,7 @@
-<section
+<x-livewire-material::stack
+    as="section"
     id="icons"
-    class="scroll-mt-24 space-y-6"
+    gap="space300"
     x-data="{
         names: [],
         query: '',
@@ -17,47 +18,38 @@
     }"
     x-intersect.once="load()"
 >
-    <h2 class="type-headline-md">Icons</h2>
+    <h2 class="md-type-headline-md">Icons</h2>
 
-    <p class="max-w-3xl type-body-md text-on-surface-variant">
+    <p class="md-type-body-md md-ink-variant">
         Every Material Symbol (Rounded, 400, grade 0) as <code>&lt;x-icon name="…" /&gt;</code>, outlined or <code>filled</code>,
         drawn from the optical size 24 cut or — for an icon 20px or smaller, where 24's strokes would look thin —
-        the 20 cut: <code>&lt;x-icon name="…" optical="20" class="size-5" /&gt;</code>.
+        the 20 cut: <code>&lt;x-icon name="…" optical="20" /&gt;</code>.
     </p>
 
-    <p class="max-w-3xl type-body-md text-on-surface-variant" data-test="when-to-use">
+    <p class="md-type-body-md md-ink-variant" data-test="when-to-use">
         <code>filled</code> means active or selected; <code>optical="20"</code> when an icon is drawn at 20px or less; one weight per group. An icon takes the size and colour of the text beside it. An icon-only control carries an accessible name; a decorative icon is hidden.
     </p>
 
-    <div class="flex flex-wrap items-center gap-4">
-        <label class="flex min-w-72 flex-1 items-center gap-2 rounded-corner-xs border border-outline px-3 py-2 focus-within:outline-3 focus-within:outline-secondary">
-            <x-livewire-material::icon name="search" class="size-5 text-on-surface-variant" />
-            <input type="search" x-model.debounce.150ms="query" placeholder="Search {{ number_format(count(\NoNameWeb\LivewireMaterial\Support\SvgFile::symbolNames())) }} symbols" class="w-full bg-transparent type-body-lg outline-none" />
-        </label>
+    <x-livewire-material::row gap="space200" wrap align="center">
+        <x-livewire-material::input icon="search" type="search" x-model.debounce.150ms="query" placeholder="Search {{ number_format(count(\NoNameWeb\LivewireMaterial\Support\SvgFile::symbolNames())) }} symbols" full />
+        <x-livewire-material::checkbox label="Filled" x-model="filled" />
+        <x-livewire-material::checkbox label="Optical size 20" x-model="optical20" />
+    </x-livewire-material::row>
 
-        <label class="flex items-center gap-2 type-label-lg">
-            <input type="checkbox" x-model="filled" class="size-4 accent-primary" />
-            Filled
-        </label>
-
-        <label class="flex items-center gap-2 type-label-lg">
-            <input type="checkbox" x-model="optical20" class="size-4 accent-primary" />
-            Optical size 20
-        </label>
-    </div>
-
-    <ul class="grid grid-cols-[repeat(auto-fill,minmax(7.5rem,1fr))] gap-2">
+    <x-livewire-material::grid as="ul" min-item="120px" gap="space100">
         <template x-for="name in matches" x-bind:key="name">
-            <li class="flex flex-col items-center gap-2 rounded-corner-md bg-surface-container p-3 text-center">
-                <span
-                    class="bg-current"
-                    x-bind:class="optical20 ? 'size-5' : 'size-6'"
-                    x-bind:style="{
-                        mask: `url('{{ rtrim(route('livewire-material.showcase', [], false), '/') }}/symbols/${filled ? 'filled' : 'outlined'}/${name}.svg${optical20 ? '?optical=20' : ''}') center / contain no-repeat`,
-                    }"
-                ></span>
-                <code class="w-full break-all type-label-sm text-on-surface-variant" x-text="name"></code>
-            </li>
+            <x-livewire-material::surface as="li" level="surface-container" corner="md" padding="space100">
+                <x-livewire-material::stack gap="space100" align="center">
+                    <span
+                        data-md-showcase-icon-mask
+                        x-bind:data-md-showcase-icon-size="optical20 ? '20' : null"
+                        x-bind:style="{
+                            mask: `url('{{ rtrim(route('livewire-material.showcase', [], false), '/') }}/symbols/${filled ? 'filled' : 'outlined'}/${name}.svg${optical20 ? '?optical=20' : ''}') center / contain no-repeat`,
+                        }"
+                    ></span>
+                    <code class="md-type-label-sm md-ink-variant md-text-center" x-text="name"></code>
+                </x-livewire-material::stack>
+            </x-livewire-material::surface>
         </template>
-    </ul>
-</section>
+    </x-livewire-material::grid>
+</x-livewire-material::stack>