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

resources/js/material.js

@@ -11,3 +11,6 @@ import './theme.js'
 import './figure.js'
 import './tooltip.js'
 import './menu.js'
+import './snackbar.js'
+import './rich-tooltip.js'
+import './progress.js'

resources/js/rich-tooltip.js

@@ -0,0 +1,53 @@
+/**
+ * `materialRichTooltip`: shows an `<x-rich-tooltip>`.
+ *
+ * Transient (the default): like a plain tooltip — after a short hover on a pointer that can hover,
+ * at once on keyboard focus, and it stays while the pointer moves onto the bubble to reach its
+ * actions. Persistent: a press on the trigger opens it as a light-dismiss popover.
+ */
+const HOVER_DELAY_MS = 500
+const LEAVE_GRACE_MS = 200
+
+document.addEventListener('alpine:init', () => {
+    window.Alpine.data('materialRichTooltip', (persistent = false) => ({
+        timer: null,
+
+        init() {
+            const bubble = this.$refs.bubble
+            const wrapper = this.$el
+            const open = () => bubble.matches(':popover-open')
+
+            if (persistent) {
+                wrapper.addEventListener('click', (event) => {
+                    if (bubble.contains(event.target)) {
+                        return
+                    }
+
+                    open() ? bubble.hidePopover() : bubble.showPopover()
+                })
+
+                return
+            }
+
+            const show = (delay) => {
+                clearTimeout(this.timer)
+                this.timer = setTimeout(() => !open() && bubble.showPopover(), delay)
+            }
+
+            const hide = (delay = 0) => {
+                clearTimeout(this.timer)
+                this.timer = setTimeout(() => open() && bubble.hidePopover(), delay)
+            }
+
+            wrapper.addEventListener('pointerenter', (event) => event.pointerType === 'mouse' && show(HOVER_DELAY_MS))
+            wrapper.addEventListener('pointerleave', () => hide(LEAVE_GRACE_MS))
+            wrapper.addEventListener('focusin', (event) => event.target.matches(':focus-visible') && show(0))
+            wrapper.addEventListener('focusout', (event) => !wrapper.contains(event.relatedTarget) && hide())
+            document.addEventListener('keydown', (event) => event.key === 'Escape' && hide())
+        },
+
+        destroy() {
+            clearTimeout(this.timer)
+        },
+    }))
+})

resources/js/snackbar.js

@@ -0,0 +1,108 @@
+/**
+ * `materialSnackbar`: the queue behind `<x-toast>`, and `window.materialToast()`.
+ *
+ * One snackbar at a time, as M3 shows them. Each waits its turn, stays for its timeout (paused
+ * while hovered or focused, so it is never pulled away from someone reading or reaching for its
+ * action) and is replaced by the next.
+ */
+const DEFAULT_TIMEOUT_MS = 4000
+
+let sequence = 0
+
+// The listener lives here, not on the Alpine component: a toast dispatched before Alpine has
+// started (on page load, straight after a redirect) would otherwise be lost. Until a host
+// registers, toasts wait in `pending`.
+let host = null
+const pending = []
+
+window.addEventListener('toast', (event) => (host ? host.add(event.detail) : pending.push(event.detail)))
+
+window.materialToast = (title, options = {}) => {
+    window.dispatchEvent(new CustomEvent('toast', { detail: { title, ...options } }))
+}
+
+document.addEventListener('alpine:init', () => {
+    window.Alpine.data('materialSnackbar', () => ({
+        queue: [],
+        current: null,
+        timer: null,
+        remaining: 0,
+        startedAt: 0,
+
+        init() {
+            host = this
+            pending.splice(0).forEach((detail) => this.add(detail))
+        },
+
+        destroy() {
+            if (host === this) {
+                host = null
+            }
+        },
+
+        add(detail) {
+            // Livewire dispatches named arguments as the detail object; a positional dispatch
+            // arrives as an array whose first entry is that object.
+            const toast = Array.isArray(detail) ? detail[0] : detail
+
+            this.queue.push({
+                id: ++sequence,
+                type: toast.type ?? null,
+                title: toast.title ?? '',
+                description: toast.description ?? null,
+                timeout: toast.timeout === 0 || toast.timeout === null ? 0 : (toast.timeout ?? DEFAULT_TIMEOUT_MS),
+                action: toast.action ?? null,
+            })
+
+            if (!this.current) {
+                this.next()
+            }
+        },
+
+        next() {
+            clearTimeout(this.timer)
+            this.current = this.queue.shift() ?? null
+
+            if (this.current?.timeout) {
+                this.remaining = this.current.timeout
+                this.resume()
+            }
+        },
+
+        pause() {
+            if (!this.current?.timeout || !this.timer) {
+                return
+            }
+
+            clearTimeout(this.timer)
+            this.timer = null
+            this.remaining -= performance.now() - this.startedAt
+        },
+
+        resume() {
+            if (!this.current?.timeout || this.timer) {
+                return
+            }
+
+            this.startedAt = performance.now()
+            this.timer = setTimeout(() => {
+                this.timer = null
+                this.next()
+            }, Math.max(this.remaining, 0))
+        },
+
+        dismiss() {
+            this.timer = null
+            this.next()
+        },
+
+        act() {
+            this.current?.action?.handler?.()
+            this.dismiss()
+        },
+
+        icon(type) {
+            return ['success', 'error', 'warning', 'info'].includes(type)
+        },
+    }))
+})