Rewrite the showcase's Buttons section without Tailwind

Plan step 38: every example moves onto the layout components and the
md-* text classes. Wrapper divs that existed only to give an Alpine
scope to a button group or a connected <x-group> ("A connected group
that owns its selection", "Square groups", "A choice as a connected
group") become <x-stack>/<x-grid> carrying the x-data directly, which
also gives them M3's full-width stretch in place of w-full. The
loading indicator's two sized, tertiary-coloured variants and the FAB
menu's bounded demo box move to data-md-showcase-* hooks in
showcase.css; hint-class="text-warning" becomes hint-class="md-ink-warning",
the exact example the <x-group> header itself documents.

No demo content removed; every id, aria-label and input[name] the
Chromium ActionsTest selectors read (#buttons, showcase-theme,
showcase-days, the "Tonal" tooltip, the progressbar, collapse-on-scroll,
data-md-selection) is unchanged.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/css/showcase.css

@@ -22,6 +22,15 @@
  * the role it shows, so that one declaration is the caller's inline `style`, never a class), a
  * type-scale row, a shape swatch, an elevation tile, a motion track and its moving dot, an icon
  * search result and the Layout page's breakpoint cards.
+ *
+ * Batch 3 (the component sections) adds each section's own demo geometry: a sized loading
+ * indicator, a bounded box for the FAB menu, a narrow chip row that forces its own scroll
+ * affordance, a scrolling table wrapper, the legend above a checkbox grid, a bordered demo card,
+ * a small circular avatar and a compact search bar, and the two ink colours a menu item's `icon-class`
+ * needs beyond the fixed `md-ink-*` set. A handful of call sites (`<x-input>`, `<x-datepicker>`,
+ * `<x-slider>`) forward only `class` and `style` to the element that needs sizing, never a data
+ * attribute, so those few rules below are `.md-showcase-*` classes rather than
+ * `data-md-showcase-*` hooks — the same "caller's class" mechanism any application would reach for.
  */
 
 @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@@ -319,4 +328,25 @@
             color: var(--md-sys-color-on-primary-container);
         }
     }
+
+    /* Buttons: the loading indicator sized and coloured beyond its 48px primary default, and the
+       bounded box a FAB menu opens into (M3 anchors it to a scaffold's own corner; this is only
+       room enough to show the menu open). */
+    [data-md-showcase-loading='lg'] {
+        width: 96px;
+        height: 96px;
+        color: var(--md-sys-color-tertiary);
+    }
+
+    [data-md-showcase-loading='sm'] {
+        width: 32px;
+        height: 32px;
+    }
+
+    [data-md-showcase-fab-menu-demo] {
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-end;
+        height: 288px;
+    }
 }

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

@@ -60,8 +60,8 @@
         'Loading indicator' => <<<'BLADE'
             <x-loading />
             <x-loading contained />
-            <x-loading class="size-24 text-tertiary" label="Uploading" />
+            <x-loading data-md-showcase-loading="lg" label="Uploading" />
-            <x-loading contained class="size-8" />
+            <x-loading contained data-md-showcase-loading="sm" />
             BLADE,
         'Button groups: standard (press a button) and connected' => <<<'BLADE'
             <x-button-group label="Standard" size="md">
@@ -77,7 +77,7 @@
             </x-button-group>
             BLADE,
         'A connected group that owns its selection' => <<<'BLADE'
-            <div x-data="{ view: 'week', marks: ['bold'] }" class="w-full space-y-6">
+            <x-livewire-material::stack gap="space300" x-data="{ view: 'week', marks: ['bold'] }">
                 <x-button-group connected selection="single" required label="View" x-model="view">
                     <x-button label="Day" value="day" variant="tonal" :selected="false" />
                     <x-button label="Week" value="week" variant="tonal" :selected="true" />
@@ -90,11 +90,11 @@
                     <x-button icon="format_underlined" aria-label="Underline" value="underline" variant="tonal" :selected="false" />
                 </x-button-group>
 
-                <p class="type-body-md text-on-surface-variant">
+                <p class="md-type-body-md md-ink-variant">
                     View: <code x-text="view"></code> · marks: <code x-text="marks.join(', ') || 'none'"></code>.
                     The shape follows at once; the colours come from each button's own <code>:selected</code>, which a Livewire render brings back.
                 </p>
-            </div>
+            </x-livewire-material::stack>
             BLADE,
         'Square groups (hold a button down)' => <<<'BLADE'
             <x-button-group label="Square standard" size="md" shape="square">
@@ -109,29 +109,29 @@
                 <x-button icon="format_underlined" aria-label="Underline" variant="tonal" :selected="false" />
             </x-button-group>
 
-            <div x-data="{ density: 'cosy' }" class="w-full">
+            <x-livewire-material::stack x-data="{ density: 'cosy' }">
                 <x-group label="Density" name="showcase-density" shape="square" x-model="density" inline :options="[
                     ['id' => 'compact', 'name' => 'Compact'],
                     ['id' => 'cosy', 'name' => 'Cosy'],
                     ['id' => 'roomy', 'name' => 'Roomy'],
                 ]" />
-            </div>
+            </x-livewire-material::stack>
             BLADE,
         'A choice as a connected group' => <<<'BLADE'
-            <div x-data="{ theme: 'system', days: ['mon'] }" class="grid w-full gap-6 medium:grid-cols-2">
+            <x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2]" gap="space300" x-data="{ theme: 'system', days: ['mon'] }">
                 <x-group label="Theme" name="showcase-theme" x-model="theme" :options="[
                     ['id' => 'light', 'name' => 'Light', 'icon' => 'light_mode'],
                     ['id' => 'dark', 'name' => 'Dark', 'icon' => 'dark_mode'],
                     ['id' => 'system', 'name' => 'System', 'icon' => 'computer'],
                 ]" />
 
-                <x-group label="Days" name="showcase-days" x-model="days" multiple variant="outlined" hint="Thursday is fully booked" hint-class="text-warning" :options="[
+                <x-group label="Days" name="showcase-days" x-model="days" multiple variant="outlined" hint="Thursday is fully booked" hint-class="md-ink-warning" :options="[
                     ['id' => 'mon', 'name' => 'Mon'],
                     ['id' => 'tue', 'name' => 'Tue'],
                     ['id' => 'wed', 'name' => 'Wed'],
                     ['id' => 'thu', 'name' => 'Thu', 'disabled' => true],
                 ]" />
-            </div>
+            </x-livewire-material::grid>
             BLADE,
         'Split buttons' => <<<'BLADE'
             <x-split-button label="Download all" icon="download" menu-label="Download options">
@@ -161,7 +161,7 @@
             <x-fab icon="add" label="New share" size="lg" color="tertiary" collapse-on-scroll />
             BLADE,
         'FAB menu' => <<<'BLADE'
-            <div class="flex h-72 w-full items-end justify-end">
+            <div data-md-showcase-fab-menu-demo>
                 <x-fab-menu label="New">
                     <x-fab-menu-item label="Upload files" icon="upload_file" />
                     <x-fab-menu-item label="Upload a folder" icon="drive_folder_upload" />
@@ -172,14 +172,14 @@
     ];
 @endphp
 
-<section id="buttons" class="scroll-mt-24 space-y-6">
+<x-livewire-material::stack as="section" id="buttons" gap="space300">
-    <h2 class="type-headline-md">Buttons</h2>
+    <h2 class="md-type-headline-md">Buttons</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-button&gt;</code>: label buttons, icon buttons and toggles in M3 Expressive's five sizes.
     </p>
 
     @foreach ($examples as $title => $code)
         <x-showcase::example :$title :$code />
     @endforeach
-</section>
+</x-livewire-material::stack>