Rewrite the showcase's Elevation section without Tailwind

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

@@ -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);
+    }
 }

resources/views/showcase/sections/elevation.blade.php

@@ -1,19 +1,21 @@
-<section id="elevation" class="scroll-mt-24 space-y-6">
+<x-livewire-material::stack as="section" id="elevation" gap="space300">
-    <h2 class="type-headline-md">Elevation</h2>
+    <h2 class="md-type-headline-md">Elevation</h2>
 
-    <p class="max-w-3xl type-body-md text-on-surface-variant">
+    <p class="md-type-body-md md-ink-variant">
-        Five shadow levels as <code>shadow-elevation-*</code>, for what floats over content.
+        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">
+    <x-livewire-material::surface level="surface-container-low" padding="space300" corner="lg">
-        @foreach (['shadow-elevation-1', 'shadow-elevation-2', 'shadow-elevation-3', 'shadow-elevation-4', 'shadow-elevation-5'] as $shadow)
+        <x-livewire-material::grid :columns="['compact' => 2, 'medium' => 5]" gap="space300">
-            <div @class(['flex h-24 items-center justify-center rounded-corner-md bg-surface-container-high', $shadow])>
+            @foreach ([1, 2, 3, 4, 5] as $level)
-                <code class="type-label-md">{{ $shadow }}</code>
+                <div data-md-showcase-elevation-tile data-md-elevation="{{ $level }}">
-            </div>
+                    <code class="md-type-label-md">--md-sys-elevation-{{ $level }}</code>
-        @endforeach
+                </div>
-    </div>
+            @endforeach
-</section>
+        </x-livewire-material::grid>
+    </x-livewire-material::surface>
+</x-livewire-material::stack>