Andreas Reinhold / reiniandClaude Opus 5
1e580c573e
Package views now write <x-livewire-material::button>, so a configured prefix (which Blade spells <x-m::button>) and an application component of the same name can no longer break or shadow them. The showcase rewrites its examples to the configured prefix. Adds the README, and waits for the adaptive rail to hear a resize before the navigation tests press its menu button. 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-livewire-material::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>
|