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

Plan step 38: single-column groups move onto <x-stack>, per-breakpoint
ones onto <x-grid>, and the "Vertical" row's shared height (M3's
second orientation needs one on the wrapper, which the label and hint
share) moves to a showcase-slider-vertical class — <x-slider> forwards
only class, style and wire:key to that wrapper, so a data attribute
would have been dropped silently.

Every #sliders id and data-bound span the Chromium SliderTest 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/sliders.blade.php | 54 +++++++++----------
 2 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/resources/css/showcase.css b/resources/css/showcase.css
index 2d206739..f2c44559 100644
--- a/resources/css/showcase.css
+++ b/resources/css/showcase.css
@@ -456,3 +456,9 @@
 .showcase-w-narrow {
     max-width: 320px;
 }
+
+/* <x-slider> forwards only class, style and wire:key to its wrapper, which the label and hint
+   share with the track — so the vertical demo's shared height is a class too. */
+.showcase-slider-vertical {
+    height: 256px;
+}
diff --git a/resources/views/showcase/sections/sliders.blade.php b/resources/views/showcase/sections/sliders.blade.php
index 03f1c2dc..950cd6d4 100644
--- a/resources/views/showcase/sections/sliders.blade.php
+++ b/resources/views/showcase/sections/sliders.blade.php
@@ -1,67 +1,67 @@
 @php
     $examples = [
         'Standard, discrete and disabled' => <<<'BLADE'
-            <div class="grid w-full gap-8 expanded:grid-cols-3">
+            <x-livewire-material::grid :columns="['compact' => 1, 'expanded' => 3]" gap="space400">
                 <x-slider label="Volume" value="40" hint="Drag the handle or use the arrow keys" />
                 <x-slider label="Quality" value="6" :max="10" ticks />
                 <x-slider label="Locked" value="70" disabled />
-            </div>
+            </x-livewire-material::grid>
             BLADE,
         'Sizes, with an inset icon from md' => <<<'BLADE'
-            <div class="grid w-full gap-6">
+            <x-livewire-material::stack gap="space300">
                 <x-slider label="Extra small (16px track)" value="30" />
                 <x-slider label="Small (24px)" value="45" size="sm" />
                 <x-slider label="Medium (40px)" value="60" size="md" icon="volume_up" />
                 <x-slider label="Large (56px)" value="12" size="lg" icon="light_mode" />
                 <x-slider label="Extra large (96px)" value="75" size="xl" icon="brightness_medium" />
-            </div>
+            </x-livewire-material::stack>
             BLADE,
         'Range and centred' => <<<'BLADE'
-            <div class="grid w-full gap-8 medium:grid-cols-2">
+            <x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2]" gap="space400">
                 <x-slider label="Price" :value="[20, 60]" range ticks :step="10" hint="Handles never cross" />
                 <x-slider label="Balance" value="15" :min="-50" :max="50" centered />
-            </div>
+            </x-livewire-material::grid>
             BLADE,
         'Vertical' => <<<'BLADE'
             {{-- M3 Expressive's second orientation. A vertical slider needs a height: it is on the wrapper, which the label and hint share. --}}
-            <div class="flex flex-wrap items-end gap-10">
-                <x-slider label="Volume" orientation="vertical" value="40" class="h-64" hint="Up and Down" />
-                <x-slider label="Warmth" orientation="vertical" value="6" :max="10" ticks class="h-64" />
-                <x-slider label="Brightness" orientation="vertical" value="70" size="md" icon="light_mode" class="h-64" />
-                <x-slider label="Always labelled" orientation="vertical" value="55" value-label="always" color="tertiary" class="h-64" />
-                <x-slider label="Locked" orientation="vertical" value="25" disabled class="h-64" />
-            </div>
+            <x-livewire-material::row gap="space500" wrap align="end">
+                <x-slider label="Volume" orientation="vertical" value="40" class="showcase-slider-vertical" hint="Up and Down" />
+                <x-slider label="Warmth" orientation="vertical" value="6" :max="10" ticks class="showcase-slider-vertical" />
+                <x-slider label="Brightness" orientation="vertical" value="70" size="md" icon="light_mode" class="showcase-slider-vertical" />
+                <x-slider label="Always labelled" orientation="vertical" value="55" value-label="always" color="tertiary" class="showcase-slider-vertical" />
+                <x-slider label="Locked" orientation="vertical" value="25" disabled class="showcase-slider-vertical" />
+            </x-livewire-material::row>
             BLADE,
         'Colours and value labels' => <<<'BLADE'
-            <div class="grid w-full gap-8 expanded:grid-cols-3">
+            <x-livewire-material::grid :columns="['compact' => 1, 'expanded' => 3]" gap="space400">
                 <x-slider label="Always labelled" value="55" color="secondary" value-label="always" size="sm" />
                 <x-slider label="Tertiary, no label" value="35" color="tertiary" value-label="never" size="sm" />
                 <x-slider label="Error" :value="[30, 70]" color="error" range size="sm" />
-            </div>
+            </x-livewire-material::grid>
             BLADE,
         'Bound with x-model' => <<<'BLADE'
-            <div x-data="{ volume: 25, price: [100, 300] }" class="grid w-full gap-8 medium:grid-cols-2">
-                <div class="space-y-2">
+            <x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2]" gap="space400" x-data="{ volume: 25, price: [100, 300] }">
+                <x-livewire-material::stack gap="space100">
                     <x-slider label="Bound volume" x-model="volume" />
-                    <p class="type-body-md text-on-surface-variant">volume: <span data-bound="volume" x-text="volume"></span> <x-button label="Set 80" x-on:click="volume = 80" /></p>
-                </div>
-                <div class="space-y-2">
+                    <p class="md-type-body-md md-ink-variant">volume: <span data-bound="volume" x-text="volume"></span> <x-button label="Set 80" x-on:click="volume = 80" /></p>
+                </x-livewire-material::stack>
+                <x-livewire-material::stack gap="space100">
                     <x-slider label="Bound price" x-model="price" range :max="500" :step="25" ticks />
-                    <p class="type-body-md text-on-surface-variant">price: <span data-bound="price" x-text="JSON.stringify(price)"></span></p>
-                </div>
-            </div>
+                    <p class="md-type-body-md md-ink-variant">price: <span data-bound="price" x-text="JSON.stringify(price)"></span></p>
+                </x-livewire-material::stack>
+            </x-livewire-material::grid>
             BLADE,
     ];
 @endphp
 
-<section id="sliders" class="scroll-mt-24 space-y-6">
-    <h2 class="type-headline-md">Sliders</h2>
+<x-livewire-material::stack as="section" id="sliders" gap="space300">
+    <h2 class="md-type-headline-md">Sliders</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-slider&gt;</code>: M3 Expressive's slider on native range inputs — standard, range and centred, horizontal or vertical, five sizes, ticks, value labels and an inset icon.
     </p>
 
     @foreach ($examples as $title => $code)
         <x-showcase::example :$title :$code :stack="true" />
     @endforeach
-</section>
+</x-livewire-material::stack>