Andreas Reinhold / reiniandClaude Opus 5
4cc905b144
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
37 lines
1.2 KiB
PHP
37 lines
1.2 KiB
PHP
{{-- A figure and what it counts: "1,204 · Shares", "3.2 GB · Stored".
|
|
|
|
Not an M3 component; drawn in M3's terms — a panel in surface-container that separates from
|
|
the page by tone, a label-large `title`, the `value` as the card's hero in an emphasized
|
|
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.
|
|
|
|
Drawn by resources/css/components/stat.css from `data-md-stat`; no class list. --}}
|
|
|
|
@props([
|
|
'title' => null,
|
|
'value' => null,
|
|
'description' => null,
|
|
'icon' => null,
|
|
])
|
|
|
|
<div data-md-stat {{ $attributes }}>
|
|
<div data-md-stat-header>
|
|
@if ($icon)
|
|
<x-livewire-material::icon :name="$icon" size="20" />
|
|
@endif
|
|
<span>{{ $title }}</span>
|
|
</div>
|
|
|
|
<p data-md-stat-value x-data x-figure>{{ $value }}</p>
|
|
|
|
@if ($description)
|
|
<p data-md-stat-description>{{ $description }}</p>
|
|
@endif
|
|
|
|
@if ($slot->isNotEmpty())
|
|
<div data-md-stat-extra>{{ $slot }}</div>
|
|
@endif
|
|
</div>
|