From 58a5dca8d526358d36eee14065c35d6e49c63987 Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Tue, 15 Sep 2026 04:55:21 +0200
Subject: [PATCH] Rewrite the showcase's Time pickers section without Tailwind

Plan step 38: both examples move onto <x-grid> with <x-stack>
columns, x-data landing on the bound example's own stack.

TimepickerTest's Chromium selectors run against an isolated timeProbe
fixture, not this page, so nothing there is at risk.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
---
 .../showcase/sections/timepickers.blade.php   | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/resources/views/showcase/sections/timepickers.blade.php b/resources/views/showcase/sections/timepickers.blade.php
index d8aa4dab..6382f447 100644
--- a/resources/views/showcase/sections/timepickers.blade.php
+++ b/resources/views/showcase/sections/timepickers.blade.php
@@ -1,44 +1,44 @@
 @php
     $examples = [
         '12 and 24 hours, outlined and filled' => <<<'BLADE'
-            <div class="grid w-full gap-6 medium:grid-cols-2">
-                <div class="grid content-start gap-4">
+            <x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2]" gap="space300">
+                <x-livewire-material::stack gap="space200">
                     <x-timepicker label="Meeting starts" value="09:30" hint="The locale's clock" />
                     <x-timepicker label="Pick-up" value="17:15" format="12" icon="local_shipping" clearable />
                     <x-timepicker label="Disabled" value="12:00" disabled />
-                </div>
+                </x-livewire-material::stack>
 
-                <div class="grid content-start gap-4">
+                <x-livewire-material::stack gap="space200">
                     <x-timepicker variant="filled" label="Alarm" value="06:45" format="24" icon="alarm" />
                     <x-timepicker variant="filled" label="Reminder" format="24" hint="Opens at the current time" />
                     <x-timepicker variant="filled" label="Required" format="24" required />
-                </div>
-            </div>
+                </x-livewire-material::stack>
+            </x-livewire-material::grid>
             BLADE,
         'Steps and limits' => <<<'BLADE'
-            <div class="grid w-full gap-6 medium:grid-cols-2">
-                <div class="grid content-start gap-4">
+            <x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2]" gap="space300">
+                <x-livewire-material::stack gap="space200">
                     <x-timepicker label="Appointment" value="10:00" format="24" step="15" min="08:00" max="17:30" hint="Quarter hours from 08:00 to 17:30" />
                     <x-timepicker label="Night shift starts" value="23:00" format="24" min="22:00" max="06:00" hint="From 22:00, across midnight, to 06:00" />
-                </div>
+                </x-livewire-material::stack>
 
-                <div class="grid content-start gap-4" x-data="{ time: '14:05' }">
+                <x-livewire-material::stack gap="space200" x-data="{ time: '14:05' }">
                     <x-timepicker label="Bound with x-model" x-model="time" format="12" step="5" />
-                    <p class="type-body-md text-on-surface-variant">Stored as <code x-text="time ?? 'null'"></code></p>
-                </div>
-            </div>
+                    <p class="md-type-body-md md-ink-variant">Stored as <code x-text="time ?? 'null'"></code></p>
+                </x-livewire-material::stack>
+            </x-livewire-material::grid>
             BLADE,
     ];
 @endphp
 
-<section id="timepickers" class="scroll-mt-24 space-y-6">
-    <h2 class="type-headline-md">Time pickers</h2>
+<x-livewire-material::stack as="section" id="timepickers" gap="space300">
+    <h2 class="md-type-headline-md">Time pickers</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-timepicker&gt;</code> — M3's dial and input time picker in a modal dialog, opened from a text field.
     </p>
 
     @foreach ($examples as $title => $code)
         <x-showcase::example :$title :$code />
     @endforeach
-</section>
+</x-livewire-material::stack>