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

Plan step 38: the badge/icon wrapper spans move to
style="position: relative; display: inline-flex", the exact pattern
<x-badge>'s own header documents; Alerts, Stats and the two empty
states move onto <x-stack>/<x-grid> in place of w-full and a
Tailwind grid, so a caller no longer sizes each child by hand. The
"plain" badge (no colour of its own, by design) and the illustration's
two decorative fills move to data-md-showcase-* hooks, as does the
tooltip demo span's focus-ring corner; the shortcut kbds now use the
data-md-showcase-kbd hook the frame batch already drew.

No demo content removed; #communication, the toast/snackbar hooks and
the rich-tooltip triggers (Press for details, About expiry) the
Chromium CommunicationTest selectors read are unchanged.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
---
 resources/css/showcase.css                    |  24 +++++
 .../showcase/sections/communication.blade.php | 100 ++++++++++--------
 2 files changed, 77 insertions(+), 47 deletions(-)

diff --git a/resources/css/showcase.css b/resources/css/showcase.css
index 046bb8a6..36520739 100644
--- a/resources/css/showcase.css
+++ b/resources/css/showcase.css
@@ -359,4 +359,28 @@
     [data-md-showcase-icon-color='secondary'] [data-md-icon] {
         color: var(--md-sys-color-secondary);
     }
+
+    /* Communication: the "plain" badge's own colours (that variant draws none, by design, so the
+       caller paints it), a focus ring's corner on a plain span standing in for a control, and the
+       illustration's two decorative colours beyond currentColor. */
+    [data-md-showcase-badge-plain] {
+        background-color: var(--md-sys-color-primary-fixed);
+        color: var(--md-sys-color-on-primary-fixed);
+    }
+
+    [data-md-showcase-focus-demo] {
+        border-radius: var(--md-sys-shape-corner-xs);
+    }
+
+    [data-md-showcase-illustration='container'] {
+        fill: var(--md-sys-color-primary-container);
+    }
+
+    [data-md-showcase-illustration='accent'] {
+        fill: var(--md-sys-color-tertiary);
+    }
+
+    [data-md-showcase-illustration='on-accent'] {
+        fill: var(--md-sys-color-on-tertiary);
+    }
 }
diff --git a/resources/views/showcase/sections/communication.blade.php b/resources/views/showcase/sections/communication.blade.php
index 3059f2b5..e5c4a31a 100644
--- a/resources/views/showcase/sections/communication.blade.php
+++ b/resources/views/showcase/sections/communication.blade.php
@@ -1,9 +1,9 @@
 @php
     $examples = [
         'Badges' => <<<'BLADE'
-            <span class="relative inline-flex"><x-icon name="notifications" /><x-badge floating /></span>
-            <span class="relative inline-flex"><x-icon name="mail" /><x-badge value="4" floating /></span>
-            <span class="relative inline-flex"><x-icon name="inbox" /><x-badge value="1204" max="999" floating /></span>
+            <span style="position: relative; display: inline-flex"><x-icon name="notifications" /><x-badge floating /></span>
+            <span style="position: relative; display: inline-flex"><x-icon name="mail" /><x-badge value="4" floating /></span>
+            <span style="position: relative; display: inline-flex"><x-icon name="inbox" /><x-badge value="1204" max="999" floating /></span>
             <x-badge value="Expired" tonal />
             <x-badge value="Active" color="success" tonal />
             <x-badge value="Password" color="info" tonal />
@@ -11,37 +11,37 @@
             <x-badge value="Pro" outline />
             <x-badge value="Draft" color="neutral" tonal />
             <x-badge value="Archived" color="neutral" outline />
-            <span class="relative inline-flex"><x-icon name="chat" /><x-badge value="2" color="neutral" floating /></span>
-            <x-badge tonal color="tertiary"><x-icon name="bolt" filled optical="20" class="size-3" /> Pro</x-badge>
-            <x-badge value="Beta" tonal color="plain" class="bg-primary-fixed text-on-primary-fixed" />
+            <span style="position: relative; display: inline-flex"><x-icon name="chat" /><x-badge value="2" color="neutral" floating /></span>
+            <x-badge tonal color="tertiary"><x-icon name="bolt" filled optical="20" size="12" /> Pro</x-badge>
+            <x-badge value="Beta" tonal color="plain" data-md-showcase-badge-plain />
             BLADE,
         'Snackbars' => <<<'BLADE'
-            <div x-data class="flex flex-wrap items-center gap-4">
+            <x-livewire-material::row gap="space200" wrap align="center" x-data>
                 <x-button label="Saved" variant="tonal" x-on:click="materialToast('Settings saved', { type: 'success' })" />
                 <x-button label="With a description" variant="tonal" x-on:click="materialToast('Upload failed', { type: 'error', description: 'The file is larger than 4 GB.' })" />
                 <x-button label="With an action" variant="tonal" x-on:click="materialToast('Share deleted', { action: { label: 'Undo', handler: () => materialToast('Share restored', { type: 'info' }) } })" />
                 <x-button label="Until dismissed" variant="tonal" x-on:click="materialToast('Your storage is almost full', { type: 'warning', timeout: 0 })" />
                 <x-button label="Sticky, with an event" variant="tonal" x-on:click="materialToast('A new version is ready', { type: 'info', sticky: true, action: { label: 'Reload', event: 'showcase:reload' } })" x-on:showcase:reload.window="materialToast('Reloading…')" />
-            </div>
+            </x-livewire-material::row>
             BLADE,
         'Two lines, and the keyboard shortcut that reaches them' => <<<'BLADE'
-            <div x-data class="w-full space-y-4">
-                <div class="flex flex-wrap items-center gap-4">
+            <x-livewire-material::stack gap="space200" x-data>
+                <x-livewire-material::row gap="space200" wrap align="center">
                     <x-button label="Two lines" variant="tonal" x-on:click="materialToast('Upload paused', { description: 'The connection dropped at 64%. It carries on when you are back.' })" />
                     <x-button label="Two lines, with an action" variant="tonal" x-on:click="materialToast('Upload paused', { description: 'The connection dropped at 64%. It carries on when you are back.', action: { label: 'Retry now', handler: () => materialToast('Retrying…') } })" />
-                </div>
+                </x-livewire-material::row>
 
-                <p class="type-body-md text-on-surface-variant">
+                <p class="md-type-body-md md-ink-variant">
                     A description makes the snackbar 68px, M3's two-line height; below <code>medium</code> the action wraps under the text.
-                    Press <kbd class="rounded-corner-xs bg-surface-container-highest px-1 type-label-md">Alt</kbd>&nbsp;+&nbsp;<kbd class="rounded-corner-xs bg-surface-container-highest px-1 type-label-md">G</kbd> to move the focus to a snackbar that has an action.
+                    Press <kbd class="md-type-label-md" data-md-showcase-kbd>Alt</kbd>&nbsp;+&nbsp;<kbd class="md-type-label-md" data-md-showcase-kbd>G</kbd> to move the focus to a snackbar that has an action.
                 </p>
-            </div>
+            </x-livewire-material::stack>
             BLADE,
         'Plain tooltips' => <<<'BLADE'
             <x-button icon="content_copy" tooltip="Copy link" />
             <x-button icon="qr_code_2" tooltip-bottom="Show QR code" />
             <x-tooltip text="Expires in 3 days" side="right">
-                <span tabindex="0" class="focus-ring rounded-corner-xs type-body-md text-on-surface-variant">holiday-photos.zip</span>
+                <span tabindex="0" class="md-type-body-md md-ink-variant md-focus-ring" data-md-showcase-focus-demo>holiday-photos.zip</span>
             </x-tooltip>
             BLADE,
         'Rich tooltips' => <<<'BLADE'
@@ -57,52 +57,58 @@
             </x-rich-tooltip>
             BLADE,
         'Alerts' => <<<'BLADE'
-            <x-alert title="Storage almost full" description="3.8 GB of 4 GB used. Old shares are deleted when they expire." color="warning" class="w-full" />
-            <x-alert description="Links are shown only once. Copy yours before you leave the page." class="w-full" dismissible />
-            <x-alert title="Upload failed" color="error" class="w-full">
-                The connection dropped at 64%.
-                <x-slot:actions><x-button label="Try again" /></x-slot:actions>
-            </x-alert>
-            <x-alert description="Settings saved." color="success" class="w-full" />
+            <x-livewire-material::stack gap="space200">
+                <x-alert title="Storage almost full" description="3.8 GB of 4 GB used. Old shares are deleted when they expire." color="warning" />
+                <x-alert description="Links are shown only once. Copy yours before you leave the page." dismissible />
+                <x-alert title="Upload failed" color="error">
+                    The connection dropped at 64%.
+                    <x-slot:actions><x-button label="Try again" /></x-slot:actions>
+                </x-alert>
+                <x-alert description="Settings saved." color="success" />
+            </x-livewire-material::stack>
             BLADE,
         'Stats' => <<<'BLADE'
-            <div class="grid w-full gap-4 medium:grid-cols-2 expanded:grid-cols-4">
+            <x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2, 'expanded' => 4]" gap="space200">
                 <x-stat title="Shares" value="1,204" icon="link" description="12 this week" />
                 <x-stat title="Files" value="8,317" icon="description" />
                 <x-stat title="Stored" value="3.2 GB" icon="hard_drive" description="of 4 GB" />
                 <x-stat title="Downloads" value="42,019" icon="download" />
-            </div>
+            </x-livewire-material::grid>
             BLADE,
         'Empty state' => <<<'BLADE'
-            <x-empty-state icon="upload_file" title="No shares yet" description="Files you share appear here, with their links and when they expire." class="w-full">
-                <x-slot:actions>
-                    <x-button label="Upload files" icon="upload" variant="filled" />
-                </x-slot:actions>
-            </x-empty-state>
+            <x-livewire-material::stack gap="space200">
+                <x-empty-state icon="upload_file" title="No shares yet" description="Files you share appear here, with their links and when they expire.">
+                    <x-slot:actions>
+                        <x-button label="Upload files" icon="upload" variant="filled" />
+                    </x-slot:actions>
+                </x-empty-state>
+            </x-livewire-material::stack>
             BLADE,
         'Empty state with an illustration' => <<<'BLADE'
-            <x-empty-state title="No routes yet" description="Draw a route on the map, or import one from a GPX file." class="w-full">
-                <x-slot:illustration class="text-primary">
-                    <svg class="size-32" viewBox="0 0 120 120" fill="none" aria-hidden="true">
-                        <circle cx="60" cy="60" r="56" class="fill-primary-container" />
-                        <path d="M28 86C40 62 56 92 68 64S86 42 90 46" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-dasharray="1 10" />
-                        <circle cx="28" cy="86" r="7" fill="currentColor" />
-                        <path d="M90 18a12 12 0 0 1 12 12c0 10-12 22-12 22S78 40 78 30a12 12 0 0 1 12-12Z" class="fill-tertiary" />
-                        <circle cx="90" cy="30" r="4" class="fill-on-tertiary" />
-                    </svg>
-                </x-slot:illustration>
-                <x-slot:actions>
-                    <x-button label="Draw a route" icon="route" variant="filled" />
-                </x-slot:actions>
-            </x-empty-state>
+            <x-livewire-material::stack gap="space200">
+                <x-empty-state title="No routes yet" description="Draw a route on the map, or import one from a GPX file.">
+                    <x-slot:illustration style="color: var(--md-sys-color-primary)">
+                        <svg style="width: 128px; height: 128px" viewBox="0 0 120 120" fill="none" aria-hidden="true">
+                            <circle cx="60" cy="60" r="56" data-md-showcase-illustration="container" />
+                            <path d="M28 86C40 62 56 92 68 64S86 42 90 46" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-dasharray="1 10" />
+                            <circle cx="28" cy="86" r="7" fill="currentColor" />
+                            <path d="M90 18a12 12 0 0 1 12 12c0 10-12 22-12 22S78 40 78 30a12 12 0 0 1 12-12Z" data-md-showcase-illustration="accent" />
+                            <circle cx="90" cy="30" r="4" data-md-showcase-illustration="on-accent" />
+                        </svg>
+                    </x-slot:illustration>
+                    <x-slot:actions>
+                        <x-button label="Draw a route" icon="route" variant="filled" />
+                    </x-slot:actions>
+                </x-empty-state>
+            </x-livewire-material::stack>
             BLADE,
     ];
 @endphp
 
-<section id="communication" class="scroll-mt-24 space-y-6">
-    <h2 class="type-headline-md">Communication</h2>
+<x-livewire-material::stack as="section" id="communication" gap="space300">
+    <h2 class="md-type-headline-md">Communication</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-badge&gt;</code>, <code>&lt;x-toast&gt;</code> (the snackbar host, fed by the <code>Toasts</code> concern or <code>materialToast()</code>),
         <code>&lt;x-tooltip&gt;</code>, <code>&lt;x-rich-tooltip&gt;</code>, <code>&lt;x-alert&gt;</code>, <code>&lt;x-stat&gt;</code> and <code>&lt;x-empty-state&gt;</code>.
     </p>
@@ -110,4 +116,4 @@
     @foreach ($examples as $title => $code)
         <x-showcase::example :$title :$code />
     @endforeach
-</section>
+</x-livewire-material::stack>