Add the snackbar, badges, rich tooltips, alerts, stats and empty states

<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
2026-09-13 06:59:40 +02:00
parent cd64f4f371
commit 648ad8efaf
20 changed files with 813 additions and 1 deletions
@@ -0,0 +1,74 @@
+{{-- The snackbar host: shows every toast, one at a time. Put it once in each layout, near the end
+     of <body>:
+
+         <x-toast />
+
+     It shows every `toast` browser event — what `NoNameWeb\LivewireMaterial\Concerns\Toasts`
+     dispatches from a Livewire component — and for `window.materialToast(title, options)` from
+     JavaScript (`{ type, description, timeout, action: { label, handler } }`). Toasts queue and
+     show in turn, each for its `timeout` (4s by default; M3 asks for 4–10s), paused while the
+     pointer or focus is on it. A toast with an action or no timeout gets a close button.
+
+     `@persist` keeps the host across wire:navigate, so a toast dispatched with `redirectTo` is
+     still on screen when the next page arrives.
+
+     M3's snackbar (SnackbarTokens, androidx Compose Material 3, Apache-2.0): inverse surface,
+     body-medium text, a label-large action in inverse-primary, extra-small corners, elevation 3,
+     48px for one line. A type draws its state icon in the inverse state colour. `position`:
+     `bottom` (centred, the default) or `bottom-start`. It lifts above a bottom bar through
+     `--material-bottom-bar`. --}}
+
+@props(['position' => 'bottom'])
+
+@persist('material-toast')
+    <div
+        x-data="materialSnackbar"
+        {{ $attributes->class([
+            'pointer-events-none fixed inset-x-4 z-50 flex bottom-[calc(var(--material-bottom-bar,0px)+1rem)]',
+            'justify-center' => $position !== 'bottom-start',
+            'justify-start sm:start-6' => $position === 'bottom-start',
+        ]) }}
+    >
+        <template x-if="current">
+            <div
+                x-bind:key="current.id"
+                x-bind:role="current.type === 'error' || current.type === 'warning' ? 'alert' : 'status'"
+                aria-live="polite"
+                x-on:mouseenter="pause()"
+                x-on:mouseleave="resume()"
+                x-on:focusin="pause()"
+                x-on:focusout="resume()"
+                class="pointer-events-auto flex min-h-12 w-full max-w-[min(100%,36rem)] items-center gap-3 rounded-corner-xs bg-inverse-surface py-1.5 ps-4 pe-2 text-inverse-on-surface shadow-elevation-3 transition-[translate,opacity] duration-(--md-sys-motion-spatial-fast-duration) ease-spatial-fast starting:translate-y-4 starting:opacity-0 sm:w-auto sm:min-w-86"
+            >
+                <template x-if="icon(current.type)">
+                    <span class="flex shrink-0" x-bind:class="{
+                        'text-inverse-success': current.type === 'success',
+                        'text-inverse-error': current.type === 'error',
+                        'text-inverse-warning': current.type === 'warning',
+                        'text-inverse-info': current.type === 'info',
+                    }">
+                        <span x-show="current.type === 'success'"><x-icon name="check_circle" filled class="size-6" /></span>
+                        <span x-show="current.type === 'error'"><x-icon name="error" filled class="size-6" /></span>
+                        <span x-show="current.type === 'warning'"><x-icon name="warning" filled class="size-6" /></span>
+                        <span x-show="current.type === 'info'"><x-icon name="info" filled class="size-6" /></span>
+                    </span>
+                </template>
+
+                <div class="min-w-0 flex-1 py-1.5">
+                    <p class="type-body-md" x-text="current.title"></p>
+                    <p class="type-body-md opacity-80" x-show="current.description" x-text="current.description"></p>
+                </div>
+
+                <template x-if="current.action">
+                    <button type="button" class="state-layer focus-ring h-10 shrink-0 rounded-corner-full px-3 type-label-lg text-inverse-primary" x-text="current.action.label" x-on:click="act()"></button>
+                </template>
+
+                <template x-if="current.action || ! current.timeout">
+                    <button type="button" class="state-layer focus-ring inline-flex size-10 shrink-0 items-center justify-center rounded-corner-full" aria-label="{{ __('Dismiss') }}" x-on:click="dismiss()">
+                        <x-icon name="close" class="size-5" />
+                    </button>
+                </template>
+            </div>
+        </template>
+    </div>
+@endpersist