Add sticky toasts, action events and toast hooks

A sticky toast stays until it is dismissed or its action pressed, for a
question that must be answered ("A new version is ready" with Reload).
It is kept aside rather than queued, so it never holds up ordinary
toasts: one that arrives while it shows takes its place, and the sticky
toast comes back once the queue is empty. One is kept at a time; a newer
sticky toast replaces it. Every other toast keeps today's queue.

An action's `event` names a window event dispatched when it is pressed,
beside `handler`, for toasts whose detail cannot carry a function. The
snackbar now closes before either runs, so a toast they show is not the
one dismissed.

`data-toast` and `data-toast-action` give applications stable hooks for
their tests.

The queue now forgets a cleared timer in next(): a toast dismissed by a
click that neither hovered nor focused it first, as a screen reader
activates a button, left its timer running and cut the next toast short.

The showcase's snackbar buttons had no Alpine scope and did nothing; they
are wrapped in one, with a sticky example.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2

resources/js/snackbar.js

@@ -4,6 +4,11 @@
  * 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.
+ *
+ * A `sticky` toast ("A new version is ready" with a Reload action) stays until it is answered, but
+ * never holds the queue up: it is kept aside rather than queued, a toast that arrives while it shows
+ * takes its place, and it comes back once the queue is empty. Only one is kept — a newer sticky
+ * toast replaces it. Dismissing it, or pressing its action, lets it go.
  */
 const DEFAULT_TIMEOUT_MS = 4000
 
@@ -25,6 +30,7 @@ document.addEventListener('alpine:init', () => {
     window.Alpine.data('materialSnackbar', () => ({
         queue: [],
         current: null,
+        sticky: null,
         timer: null,
         remaining: 0,
         startedAt: 0,
@@ -44,24 +50,43 @@ document.addEventListener('alpine:init', () => {
             // 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
+            const sticky = toast.sticky === true
 
-            this.queue.push({
+            const entry = {
                 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),
+                timeout: sticky || toast.timeout === 0 || toast.timeout === null ? 0 : (toast.timeout ?? DEFAULT_TIMEOUT_MS),
                 action: toast.action ?? null,
-            })
+                sticky,
+            }
 
-            if (!this.current) {
+            if (sticky) {
+                const showing = !this.current || this.current === this.sticky
+                this.sticky = entry
+
+                if (showing) {
+                    this.next()
+                }
+
+                return
+            }
+
+            this.queue.push(entry)
+
+            // A sticky toast steps aside for it, and comes back from next() once the queue is empty.
+            if (!this.current || this.current === this.sticky) {
                 this.next()
             }
         },
 
         next() {
+            // Cleared and forgotten here, so a toast dismissed early never leaves its timer running
+            // to cut the next one short.
             clearTimeout(this.timer)
-            this.current = this.queue.shift() ?? null
+            this.timer = null
+            this.current = this.queue.shift() ?? this.sticky
 
             if (this.current?.timeout) {
                 this.remaining = this.current.timeout
@@ -92,13 +117,24 @@ document.addEventListener('alpine:init', () => {
         },
 
         dismiss() {
-            this.timer = null
+            if (this.current && this.current === this.sticky) {
+                this.sticky = null
+            }
+
             this.next()
         },
 
+        // Closed before the handler and the event run, so a toast either of them shows is not the
+        // one dismissed.
         act() {
-            this.current?.action?.handler?.()
+            const action = this.current?.action
+
             this.dismiss()
+            action?.handler?.()
+
+            if (typeof action?.event === 'string' && action.event !== '') {
+                window.dispatchEvent(new CustomEvent(action.event))
+            }
         },
 
         icon(type) {