Draw the stat card without Tailwind

Plan step 36 (actions). <x-stat> renders data-md-stat with
data-md-stat-header/-value/-description/-extra; no class list.
stat.css draws the surface-container panel, the label-large header,
the value as an emphasized-headline-md hero with tabular figures, and
the body-small description. StatTest is rewritten on the hooks and
ComponentStylesheet.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/css/components.css

@@ -30,6 +30,7 @@
 @import './components/toast.css';
 @import './components/progress.css';
 @import './components/alert.css';
+@import './components/stat.css';
 
 /* Inputs, selection and data */
 @import './components/form.css';

resources/css/components/stat.css

@@ -0,0 +1,50 @@
+/*
+ * <x-stat>: a figure and what it counts — not an M3 component; drawn in M3's terms, a panel that
+ * separates from the page in surface-container, a label-large title beside its icon, the value as
+ * an emphasized-headline-md hero with tabular figures (so the panel never reflows as it counts),
+ * and a body-small description. resources/js/figure.js counts the value up on first appearance
+ * and on every change after, and rests under reduced motion.
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@import './icon.css';
+
+@layer material.components {
+    [data-md-stat] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--md-sys-measurement-space50);
+        border-radius: var(--md-sys-shape-corner-lg);
+        background-color: var(--md-sys-color-surface-container);
+        padding: var(--md-sys-measurement-space200);
+    }
+
+    [data-md-stat-header] {
+        display: flex;
+        align-items: center;
+        gap: var(--md-sys-measurement-space100);
+        color: var(--md-sys-color-on-surface-variant);
+        font: var(--md-sys-typescale-label-lg);
+        letter-spacing: var(--md-sys-typescale-label-lg-tracking);
+        font-variation-settings: normal;
+    }
+
+    [data-md-stat-value] {
+        font: var(--md-sys-typescale-emphasized-headline-md);
+        letter-spacing: var(--md-sys-typescale-emphasized-headline-md-tracking);
+        font-variation-settings: "ROND" 100;
+        font-variant-numeric: tabular-nums;
+    }
+
+    [data-md-stat-description] {
+        color: var(--md-sys-color-on-surface-variant);
+        font: var(--md-sys-typescale-body-sm);
+        letter-spacing: var(--md-sys-typescale-body-sm-tracking);
+        font-variation-settings: normal;
+    }
+
+    [data-md-stat-extra] {
+        padding-top: var(--md-sys-measurement-space100);
+    }
+}

resources/views/components/stat.blade.php

@@ -5,7 +5,9 @@
      headline with tabular figures, and a body-small `description`. The value counts up once on
      first appearance and again when it changes (`x-figure`), and rests under reduced motion.
      `icon` sits beside the title. The slot, if any, goes under the description — a progress bar
-     for a quota. --}}
+     for a quota.
+
+     Drawn by resources/css/components/stat.css from `data-md-stat`; no class list. --}}
 
 @props([
     'title' => null,
@@ -14,21 +16,21 @@
     'icon' => null,
 ])
 
-<div {{ $attributes->class('flex flex-col gap-1 rounded-corner-lg bg-surface-container p-4') }}>
-    <div class="flex items-center gap-2 type-label-lg text-on-surface-variant">
+<div data-md-stat {{ $attributes }}>
+    <div data-md-stat-header>
         @if ($icon)
-            <x-livewire-material::icon :name="$icon" optical="20" class="size-5" />
+            <x-livewire-material::icon :name="$icon" size="20" />
         @endif
         <span>{{ $title }}</span>
     </div>
 
-    <p class="type-emphasized-headline-md tabular-nums" x-data x-figure>{{ $value }}</p>
+    <p data-md-stat-value x-data x-figure>{{ $value }}</p>
 
     @if ($description)
-        <p class="type-body-sm text-on-surface-variant">{{ $description }}</p>
+        <p data-md-stat-description>{{ $description }}</p>
     @endif
 
     @if ($slot->isNotEmpty())
-        <div class="pt-2">{{ $slot }}</div>
+        <div data-md-stat-extra>{{ $slot }}</div>
     @endif
 </div>

tests/Feature/Components/ActionStylesheetsTest.php

@@ -29,6 +29,7 @@ dataset('action components', [
     'toast',
     'progress',
     'alert',
+    'stat',
 ]);
 
 it('draws the component from a stylesheet shaped like every package stylesheet', function (string $name) {

tests/Feature/Components/StatTest.php

@@ -1,14 +1,34 @@
 <?php
 
+use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
+
 it('shows a figure that counts, with its title and description', function () {
     $html = (string) $this->blade('<x-stat title="Shares" value="1,204" icon="link" description="12 this week"><span>quota</span></x-stat>');
 
     expect($html)
-        ->toContain('bg-surface-container')
+        ->toContain('data-md-stat')
         ->toContain('Shares')
+        ->toContain('data-md-stat-value')
         ->toContain('x-figure>1,204</p>')
-        ->toContain('type-emphasized-headline-md tabular-nums')
+        ->toContain('data-md-stat-description')
         ->toContain('12 this week')
+        ->toContain('data-md-stat-extra')
         ->toContain('<span>quota</span>')
-        ->toContain('<svg');
+        ->toContain('<svg')
+        ->and(ComponentStylesheet::read('stat')->declarations('[data-md-stat]'))->toMatchArray([
+            'background-color' => 'var(--md-sys-color-surface-container)',
+            'border-radius' => 'var(--md-sys-shape-corner-lg)',
+        ])
+        ->and(ComponentStylesheet::read('stat')->declarations('[data-md-stat-value]'))->toMatchArray([
+            'font' => 'var(--md-sys-typescale-emphasized-headline-md)',
+            'font-variant-numeric' => 'tabular-nums',
+        ]);
+});
+
+it('leaves out the description and slot when there is neither', function () {
+    $html = (string) $this->blade('<x-stat title="Files" value="8,317" />');
+
+    expect($html)
+        ->not->toContain('data-md-stat-description')
+        ->not->toContain('data-md-stat-extra');
 });