Andreas Reinhold / reiniandClaude Opus 5
648ad8efaf
tests / lint (push) Successful in 1m3s
tests / feature (8.4) (push) Failing after 1m5s
tests / feature (8.5) (push) Failing after 1m4s
tests / browser (chrome, chromium) (push) Failing after 1m5s
tests / browser (firefox, firefox) (push) Failing after 1m1s
tests / browser (safari, webkit) (push) Failing after 1m1s
<x-toast> hosts the snackbar queue for the Toasts concern and window.materialToast(), one at a time, paused on hover and focus, with an optional action; it listens from the moment its script loads, so a toast dispatched before Alpine starts is shown rather than lost. <x-badge> is M3's dot and count, plus a tonal or outlined status label; <x-rich-tooltip> is transient or persistent; <x-alert>, <x-stat> and <x-empty-state> are built from M3's parts. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
35 lines
1.3 KiB
PHP
35 lines
1.3 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. --}}
|
|
|
|
@props([
|
|
'title' => null,
|
|
'value' => null,
|
|
'description' => null,
|
|
'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">
|
|
@if ($icon)
|
|
<x-icon :name="$icon" class="size-5" />
|
|
@endif
|
|
<span>{{ $title }}</span>
|
|
</div>
|
|
|
|
<p class="type-emphasized-headline-md tabular-nums" x-data x-figure>{{ $value }}</p>
|
|
|
|
@if ($description)
|
|
<p class="type-body-sm text-on-surface-variant">{{ $description }}</p>
|
|
@endif
|
|
|
|
@if ($slot->isNotEmpty())
|
|
<div class="pt-2">{{ $slot }}</div>
|
|
@endif
|
|
</div>
|