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

Plan step 38: the shadow-level grid moves onto <x-surface> and
<x-grid>; each tile is a data-md-showcase-elevation-tile keyed on
data-md-elevation, drawing var(--md-sys-elevation-1..5) — the same
tokens the label now names instead of the retired shadow-elevation-*
utility.

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

diff --git a/resources/css/showcase.css b/resources/css/showcase.css
index c1bcca79..7b2a9ca5 100644
--- a/resources/css/showcase.css
+++ b/resources/css/showcase.css
@@ -210,4 +210,34 @@
     [data-md-showcase-shape-swatch][data-md-corner='full'] {
         border-radius: var(--md-sys-shape-corner-full);
     }
+
+    /* Elevation: a tile at one shadow level, on the surface-container-high M3 pairs a shadow with. */
+    [data-md-showcase-elevation-tile] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 96px;
+        border-radius: var(--md-sys-shape-corner-md);
+        background-color: var(--md-sys-color-surface-container-high);
+    }
+
+    [data-md-showcase-elevation-tile][data-md-elevation='1'] {
+        box-shadow: var(--md-sys-elevation-1);
+    }
+
+    [data-md-showcase-elevation-tile][data-md-elevation='2'] {
+        box-shadow: var(--md-sys-elevation-2);
+    }
+
+    [data-md-showcase-elevation-tile][data-md-elevation='3'] {
+        box-shadow: var(--md-sys-elevation-3);
+    }
+
+    [data-md-showcase-elevation-tile][data-md-elevation='4'] {
+        box-shadow: var(--md-sys-elevation-4);
+    }
+
+    [data-md-showcase-elevation-tile][data-md-elevation='5'] {
+        box-shadow: var(--md-sys-elevation-5);
+    }
 }
diff --git a/resources/views/showcase/sections/elevation.blade.php b/resources/views/showcase/sections/elevation.blade.php
index bcde41f5..78f82a8e 100644
--- a/resources/views/showcase/sections/elevation.blade.php
+++ b/resources/views/showcase/sections/elevation.blade.php
@@ -1,19 +1,21 @@
-<section id="elevation" class="scroll-mt-24 space-y-6">
-    <h2 class="type-headline-md">Elevation</h2>
+<x-livewire-material::stack as="section" id="elevation" gap="space300">
+    <h2 class="md-type-headline-md">Elevation</h2>
 
-    <p class="max-w-3xl type-body-md text-on-surface-variant">
-        Five shadow levels as <code>shadow-elevation-*</code>, for what floats over content.
+    <p class="md-type-body-md md-ink-variant">
+        Five shadow levels as <code>--md-sys-elevation-*</code>, for what floats over content.
     </p>
 
-    <p class="max-w-3xl type-body-md text-on-surface-variant" data-test="when-to-use">
+    <p class="md-type-body-md md-ink-variant" data-test="when-to-use">
         Panels separate by tone first: the <code>surface-container</code> steps are a hierarchy of emphasis, not of height. Shadows are for what floats or lifts — 1 for elevated cards, buttons and modal sheets; 2 for menus, the navigation bar and a scrolled app bar; 3 for the FAB, dialogs, pickers and search; one level more on hover; nothing rests above 3. Fewer shadows carry more meaning.
     </p>
 
-    <div class="grid grid-cols-2 gap-6 rounded-corner-lg bg-surface-container-low p-6 medium:grid-cols-5">
-        @foreach (['shadow-elevation-1', 'shadow-elevation-2', 'shadow-elevation-3', 'shadow-elevation-4', 'shadow-elevation-5'] as $shadow)
-            <div @class(['flex h-24 items-center justify-center rounded-corner-md bg-surface-container-high', $shadow])>
-                <code class="type-label-md">{{ $shadow }}</code>
-            </div>
-        @endforeach
-    </div>
-</section>
+    <x-livewire-material::surface level="surface-container-low" padding="space300" corner="lg">
+        <x-livewire-material::grid :columns="['compact' => 2, 'medium' => 5]" gap="space300">
+            @foreach ([1, 2, 3, 4, 5] as $level)
+                <div data-md-showcase-elevation-tile data-md-elevation="{{ $level }}">
+                    <code class="md-type-label-md">--md-sys-elevation-{{ $level }}</code>
+                </div>
+            @endforeach
+        </x-livewire-material::grid>
+    </x-livewire-material::surface>
+</x-livewire-material::stack>