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

Plan step 38: text.css already has the three classes this section
needed (md-text-end, md-tabular, md-visually-hidden), so only the
table's own scroll wrapper and the pagination list move — the wrapper
to a data-md-showcase-table-scroll hook, the two paginators onto
<x-stack>.

Every #data id and data-md-list-row/aria-selected selector the
Chromium DataTest reads is unchanged.

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

diff --git a/resources/css/showcase.css b/resources/css/showcase.css
index f2c44559..7bbaae38 100644
--- a/resources/css/showcase.css
+++ b/resources/css/showcase.css
@@ -440,6 +440,12 @@
     [data-md-showcase-search-bar-title] {
         flex: 1 1 auto;
     }
+
+    /* Data: the table's own horizontal scroll stays the caller's, as table.css's header says. */
+    [data-md-showcase-table-scroll] {
+        width: 100%;
+        overflow-x: auto;
+    }
 }
 
 /* A handful of call sites (<x-input>, <x-datepicker>, <x-slider>) forward only `class` and
diff --git a/resources/views/showcase/sections/data.blade.php b/resources/views/showcase/sections/data.blade.php
index 387fe327..eedf2a88 100644
--- a/resources/views/showcase/sections/data.blade.php
+++ b/resources/views/showcase/sections/data.blade.php
@@ -1,56 +1,56 @@
 @php
     $examples = [
         'Data table' => <<<'BLADE'
-            <div class="w-full overflow-x-auto">
+            <div data-md-showcase-table-scroll>
                 <x-table>
                     <thead>
                         <tr>
                             <x-sort-header column="name" :sort-by="['column' => 'name', 'direction' => 'asc']">Name</x-sort-header>
-                            <x-sort-header column="size" :sort-by="['column' => 'name', 'direction' => 'asc']" class="text-end">Size</x-sort-header>
+                            <x-sort-header column="size" :sort-by="['column' => 'name', 'direction' => 'asc']" class="md-text-end">Size</x-sort-header>
                             <th>Expires</th>
-                            <th><span class="sr-only">Actions</span></th>
+                            <th><span class="md-visually-hidden">Actions</span></th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr data-md-list-row>
                             <td><a href="#data" data-md-list-open>contract.pdf</a></td>
-                            <td class="text-end tabular-nums">1.2 MB</td>
+                            <td class="md-text-end md-tabular">1.2 MB</td>
                             <td>in 1 hour</td>
-                            <td class="text-end"><x-button icon="more_vert" tooltip="More" /></td>
+                            <td class="md-text-end"><x-button icon="more_vert" tooltip="More" /></td>
                         </tr>
                         <tr data-md-list-row aria-selected="true">
                             <td><a href="#data" data-md-list-open>design-review.mp4</a></td>
-                            <td class="text-end tabular-nums">3.4 GB</td>
+                            <td class="md-text-end md-tabular">3.4 GB</td>
                             <td>in 7 days</td>
-                            <td class="text-end"><x-button icon="more_vert" tooltip="More" /></td>
+                            <td class="md-text-end"><x-button icon="more_vert" tooltip="More" /></td>
                         </tr>
                         <tr data-md-list-row>
                             <td><a href="#data" data-md-list-open>holiday-photos.zip</a></td>
-                            <td class="text-end tabular-nums">248 MB</td>
+                            <td class="md-text-end md-tabular">248 MB</td>
                             <td>in 3 days</td>
-                            <td class="text-end"><x-button icon="more_vert" tooltip="More" /></td>
+                            <td class="md-text-end"><x-button icon="more_vert" tooltip="More" /></td>
                         </tr>
                     </tbody>
                 </x-table>
             </div>
             BLADE,
         'Pagination' => <<<'BLADE'
-            <div class="grid w-full gap-6">
+            <x-livewire-material::stack gap="space300">
                 {{ (new \Illuminate\Pagination\LengthAwarePaginator(range(1, 10), 95, 10, 3, ['path' => '#data']))->links() }}
                 {{ (new \Illuminate\Pagination\Paginator(range(1, 11), 10, 2, ['path' => '#data']))->links() }}
-            </div>
+            </x-livewire-material::stack>
             BLADE,
     ];
 @endphp
 
-<section id="data" class="scroll-mt-24 space-y-6">
-    <h2 class="type-headline-md">Data</h2>
+<x-livewire-material::stack as="section" id="data" gap="space300">
+    <h2 class="md-type-headline-md">Data</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-table&gt;</code>, <code>&lt;x-sort-header&gt;</code>, and Laravel's and Livewire's paginators.
     </p>
 
     @foreach ($examples as $title => $code)
         <x-showcase::example :$title :$code />
     @endforeach
-</section>
+</x-livewire-material::stack>