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

Plan step 38: the typescale listing moves onto <x-surface> for its
container and a bespoke data-md-showcase-type-row (a fixed label
column beside two flexible samples from 840px, one column below it,
a rule between rows) since no layout component draws an asymmetric
grid track; the sample text itself is styled by the very md-type-*
class names the row's own label prints, so the code sample and the
rendered specimen are the same string.

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

diff --git a/resources/css/showcase.css b/resources/css/showcase.css
index 7cc95e78..bc95ff44 100644
--- a/resources/css/showcase.css
+++ b/resources/css/showcase.css
@@ -142,4 +142,24 @@
     [data-md-showcase-swatch-label] {
         min-width: 0;
     }
+
+    /* Type: one typescale style beside its label and its emphasized twin, a row of the surface
+       they share. A single column below `expanded` (840px), where the label, the regular sample
+       and the emphasized one no longer fit a line each. */
+    [data-md-showcase-type-row] {
+        display: grid;
+        gap: var(--md-sys-measurement-space100);
+        padding: var(--md-sys-measurement-space200);
+    }
+
+    [data-md-showcase-type-row] + [data-md-showcase-type-row] {
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+    }
+
+    @media (width >= 840px) {
+        [data-md-showcase-type-row] {
+            grid-template-columns: 192px 1fr 1fr;
+            align-items: baseline;
+        }
+    }
 }
diff --git a/resources/views/showcase/sections/type.blade.php b/resources/views/showcase/sections/type.blade.php
index d6707af3..16e171f5 100644
--- a/resources/views/showcase/sections/type.blade.php
+++ b/resources/views/showcase/sections/type.blade.php
@@ -1,41 +1,41 @@
 @php
     $styles = [
-        ['type-display-lg', 'type-emphasized-display-lg'],
-        ['type-display-md', 'type-emphasized-display-md'],
-        ['type-display-sm', 'type-emphasized-display-sm'],
-        ['type-headline-lg', 'type-emphasized-headline-lg'],
-        ['type-headline-md', 'type-emphasized-headline-md'],
-        ['type-headline-sm', 'type-emphasized-headline-sm'],
-        ['type-title-lg', 'type-emphasized-title-lg'],
-        ['type-title-md', 'type-emphasized-title-md'],
-        ['type-title-sm', 'type-emphasized-title-sm'],
-        ['type-body-lg', 'type-emphasized-body-lg'],
-        ['type-body-md', 'type-emphasized-body-md'],
-        ['type-body-sm', 'type-emphasized-body-sm'],
-        ['type-label-lg', 'type-emphasized-label-lg'],
-        ['type-label-md', 'type-emphasized-label-md'],
-        ['type-label-sm', 'type-emphasized-label-sm'],
+        ['md-type-display-lg', 'md-type-emphasized-display-lg'],
+        ['md-type-display-md', 'md-type-emphasized-display-md'],
+        ['md-type-display-sm', 'md-type-emphasized-display-sm'],
+        ['md-type-headline-lg', 'md-type-emphasized-headline-lg'],
+        ['md-type-headline-md', 'md-type-emphasized-headline-md'],
+        ['md-type-headline-sm', 'md-type-emphasized-headline-sm'],
+        ['md-type-title-lg', 'md-type-emphasized-title-lg'],
+        ['md-type-title-md', 'md-type-emphasized-title-md'],
+        ['md-type-title-sm', 'md-type-emphasized-title-sm'],
+        ['md-type-body-lg', 'md-type-emphasized-body-lg'],
+        ['md-type-body-md', 'md-type-emphasized-body-md'],
+        ['md-type-body-sm', 'md-type-emphasized-body-sm'],
+        ['md-type-label-lg', 'md-type-emphasized-label-lg'],
+        ['md-type-label-md', 'md-type-emphasized-label-md'],
+        ['md-type-label-sm', 'md-type-emphasized-label-sm'],
     ];
 @endphp
 
-<section id="type" class="scroll-mt-24 space-y-6">
-    <h2 class="type-headline-md">Type</h2>
+<x-livewire-material::stack as="section" id="type" gap="space300">
+    <h2 class="md-type-headline-md">Type</h2>
 
-    <p class="max-w-3xl type-body-md text-on-surface-variant">
-        M3's typescale in Google Sans Flex, each style regular and emphasized: <code>type-title-lg</code>, <code>type-emphasized-title-lg</code>.
+    <p class="md-type-body-md md-ink-variant">
+        M3's typescale in Google Sans Flex, each style regular and emphasized: <code>md-type-title-lg</code>, <code>md-type-emphasized-title-lg</code>.
     </p>
 
-    <p class="max-w-3xl type-body-md text-on-surface-variant" data-test="when-to-use">
-        When to use which: <code>display</code> for hero figures and short marketing lines; <code>headline</code> for page and section titles; <code>title</code> for card, dialog and list-section titles; <code>body</code> for paragraphs (<code>body-lg</code> for reading); <code>label</code> inside components. The emphasized styles are opt-in — a selected item, a primary action, a headline — not decoration. Keep 40–60 characters per line and <code>tabular-nums</code> on figures that change.
+    <p class="md-type-body-md md-ink-variant" data-test="when-to-use">
+        When to use which: <code>display</code> for hero figures and short marketing lines; <code>headline</code> for page and section titles; <code>title</code> for card, dialog and list-section titles; <code>body</code> for paragraphs (<code>body-lg</code> for reading); <code>label</code> inside components. The emphasized styles are opt-in — a selected item, a primary action, a headline — not decoration. Keep 40–60 characters per line and <code>md-tabular</code> on figures that change.
     </p>
 
-    <div class="divide-y divide-divider rounded-corner-lg bg-surface-container">
+    <x-livewire-material::surface level="surface-container" corner="lg">
         @foreach ($styles as [$regular, $emphasized])
-            <div class="grid gap-2 p-4 expanded:grid-cols-[12rem_1fr_1fr] expanded:items-baseline">
-                <code class="type-label-md text-on-surface-variant">{{ $regular }}</code>
-                <p @class([$regular, 'truncate'])>Share files, safely</p>
-                <p @class([$emphasized, 'truncate'])>Share files, safely</p>
+            <div data-md-showcase-type-row>
+                <code class="md-type-label-md md-ink-variant">{{ $regular }}</code>
+                <p class="{{ $regular }} md-truncate">Share files, safely</p>
+                <p class="{{ $emphasized }} md-truncate">Share files, safely</p>
             </div>
         @endforeach
-    </div>
-</section>
+    </x-livewire-material::surface>
+</x-livewire-material::stack>