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

Plan step 38: every two-column layout moves onto <x-grid> with
<x-stack> columns, x-data landing on the grid itself; the small demo
picker reuses the showcase-w-sm class the Text fields section already
defines.

DatepickerTest's Chromium selectors run against isolated probe
fixtures, 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
---
 .../views/showcase/sections/pickers.blade.php | 90 +++++++++----------
 1 file changed, 45 insertions(+), 45 deletions(-)

diff --git a/resources/views/showcase/sections/pickers.blade.php b/resources/views/showcase/sections/pickers.blade.php
index 241068e4..d3d53b2f 100644
--- a/resources/views/showcase/sections/pickers.blade.php
+++ b/resources/views/showcase/sections/pickers.blade.php
@@ -1,85 +1,85 @@
 @php
     $examples = [
         'Docked' => <<<'BLADE'
-            <div class="grid w-full gap-6 medium:grid-cols-2" x-data="{ expires: '{{ now()->addWeek()->format('Y-m-d') }}', starts: null }">
-                <div class="grid content-start gap-4">
+            <x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2]" gap="space300" x-data="{ expires: '{{ now()->addWeek()->format('Y-m-d') }}', starts: null }">
+                <x-livewire-material::stack gap="space200">
                     <x-datepicker label="Expires on" clearable x-model="expires" hint="Type a date or pick one" />
-                    <p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(expires)"></code></p>
-                </div>
+                    <p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(expires)"></code></p>
+                </x-livewire-material::stack>
 
-                <div class="grid content-start gap-4">
+                <x-livewire-material::stack gap="space200">
                     <x-datepicker label="Starts on" variant="filled" icon="event" x-model="starts" />
-                    <p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(starts)"></code></p>
-                </div>
-            </div>
+                    <p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(starts)"></code></p>
+                </x-livewire-material::stack>
+            </x-livewire-material::grid>
             BLADE,
         'Modal and modal input' => <<<'BLADE'
-            <div class="grid w-full gap-6 medium:grid-cols-2" x-data="{ birthday: '1990-05-17', delivery: null }">
-                <div class="grid content-start gap-4">
+            <x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2]" gap="space300" x-data="{ birthday: '1990-05-17', delivery: null }">
+                <x-livewire-material::stack gap="space200">
                     <x-datepicker label="Birthday" mode="modal" x-model="birthday" :max="now()" />
-                    <p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(birthday)"></code></p>
-                </div>
+                    <p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(birthday)"></code></p>
+                </x-livewire-material::stack>
 
-                <div class="grid content-start gap-4">
+                <x-livewire-material::stack gap="space200">
                     <x-datepicker label="Delivery" mode="input" x-model="delivery" hint="Opens on a text field" />
-                    <p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(delivery)"></code></p>
-                </div>
-            </div>
+                    <p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(delivery)"></code></p>
+                </x-livewire-material::stack>
+            </x-livewire-material::grid>
             BLADE,
         'Range' => <<<'BLADE'
             {{-- Narrow the window below 600px: a range picker becomes M3's full-screen one, with a close button, Save, and the months scrolled through. --}}
-            <div class="grid w-full gap-6 medium:grid-cols-2" x-data="{ trip: { start: '{{ now()->addDays(3)->format('Y-m-d') }}', end: '{{ now()->addDays(9)->format('Y-m-d') }}' }, leave: { start: null, end: null } }">
-                <div class="grid content-start gap-4">
+            <x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2]" gap="space300" x-data="{ trip: { start: '{{ now()->addDays(3)->format('Y-m-d') }}', end: '{{ now()->addDays(9)->format('Y-m-d') }}' }, leave: { start: null, end: null } }">
+                <x-livewire-material::stack gap="space200">
                     <x-datepicker label="Trip" range x-model="trip" />
-                    <p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(trip)"></code></p>
-                </div>
+                    <p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(trip)"></code></p>
+                </x-livewire-material::stack>
 
-                <div class="grid content-start gap-4">
+                <x-livewire-material::stack gap="space200">
                     <x-datepicker label="Leave" range mode="modal" x-model="leave" hint="Full screen on a compact window" />
-                    <p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(leave)"></code></p>
-                </div>
-            </div>
+                    <p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(leave)"></code></p>
+                </x-livewire-material::stack>
+            </x-livewire-material::grid>
             BLADE,
         'First day of the week and format' => <<<'BLADE'
-            <div class="grid w-full gap-6 medium:grid-cols-2" x-data="{ race: '{{ now()->addMonth()->format('Y-m-d') }}', block: { start: null, end: null } }">
-                <div class="grid content-start gap-4">
+            <x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2]" gap="space300" x-data="{ race: '{{ now()->addMonth()->format('Y-m-d') }}', block: { start: null, end: null } }">
+                <x-livewire-material::stack gap="space200">
                     <x-datepicker label="Race day" week-start="0" format="yyyy-MM-dd" x-model="race" hint="Weeks start on Sunday; typed year first" />
-                    <p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(race)"></code></p>
-                </div>
+                    <p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(race)"></code></p>
+                </x-livewire-material::stack>
 
-                <div class="grid content-start gap-4">
+                <x-livewire-material::stack gap="space200">
                     <x-datepicker label="Training block" range mode="modal" week-start="1" format="dd.MM.yyyy" x-model="block" />
-                    <p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(block)"></code></p>
-                </div>
-            </div>
+                    <p class="md-type-body-sm md-ink-variant">Bound value: <code x-text="JSON.stringify(block)"></code></p>
+                </x-livewire-material::stack>
+            </x-livewire-material::grid>
             BLADE,
         'Limits, errors and states' => <<<'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-datepicker label="Within the next 30 days" :min="now()" :max="now()->addDays(30)" hint="Days outside are disabled" />
                     <x-datepicker label="Required" required />
-                </div>
+                </x-livewire-material::stack>
 
-                <div class="grid content-start gap-4">
+                <x-livewire-material::stack gap="space200">
                     <x-datepicker label="Disabled" value="2026-09-13" disabled />
                     <x-datepicker label="Read-only" value="2026-09-13" readonly />
-                    <div class="flex flex-wrap items-center gap-3">
-                        <x-datepicker size="sm" aria-label="From" class="w-48" />
-                    </div>
-                </div>
-            </div>
+                    <x-livewire-material::row gap="space125" wrap align="center">
+                        <x-datepicker size="sm" aria-label="From" class="showcase-w-sm" />
+                    </x-livewire-material::row>
+                </x-livewire-material::stack>
+            </x-livewire-material::grid>
             BLADE,
     ];
 @endphp
 
-<section id="pickers" class="scroll-mt-24 space-y-6">
-    <h2 class="type-headline-md">Date pickers</h2>
+<x-livewire-material::stack as="section" id="pickers" gap="space300">
+    <h2 class="md-type-headline-md">Date 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-datepicker&gt;</code> — docked, modal and modal input; single dates and ranges. Month and weekday names, the first day of the week and the typed format follow the application's locale; <code>week-start</code> and <code>format</code> set the last two for someone who chose their own.
     </p>
 
     @foreach ($examples as $title => $code)
         <x-showcase::example :$title :$code />
     @endforeach
-</section>
+</x-livewire-material::stack>