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/views/components/toast.blade.php

@@ -5,9 +5,18 @@
 
      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.
+     JavaScript (`{ type, description, timeout, sticky, action: { label, handler, event } }`).
+     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. Pressing the action closes the snackbar, calls `handler` and dispatches `event` (a
+     name) on `window`; both may be given.
+
+     `sticky: true` keeps a toast until it is dismissed or its action pressed, without holding up
+     the queue: a toast that arrives meanwhile shows in its place, and the sticky one comes back
+     once the queue is empty. One is kept at a time; a newer sticky toast replaces it.
+
+     Hooks for tests and styling: `data-toast` on the snackbar on screen, `data-toast-action` on its
+     action button.
 
      `@persist` keeps the host across wire:navigate, so a toast dispatched with `redirectTo` is
      still on screen when the next page arrives.
@@ -32,6 +41,7 @@
         <template x-if="current">
             <div
                 x-bind:key="current.id"
+                data-toast
                 x-bind:role="current.type === 'error' || current.type === 'warning' ? 'alert' : 'status'"
                 aria-live="polite"
                 x-on:mouseenter="pause()"
@@ -60,7 +70,7 @@
                 </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>
+                    <button type="button" data-toast-action 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">

resources/views/showcase/sections/communication.blade.php

@@ -10,10 +10,13 @@
             <x-badge value="Pro" outline />
             BLADE,
         'Snackbars' => <<<'BLADE'
-            <x-button label="Saved" variant="tonal" x-on:click="materialToast('Settings saved', { type: 'success' })" />
-            <x-button label="With a description" variant="tonal" x-on:click="materialToast('Upload failed', { type: 'error', description: 'The file is larger than 4 GB.' })" />
-            <x-button label="With an action" variant="tonal" x-on:click="materialToast('Share deleted', { action: { label: 'Undo', handler: () => materialToast('Share restored', { type: 'info' }) } })" />
-            <x-button label="Until dismissed" variant="tonal" x-on:click="materialToast('Your storage is almost full', { type: 'warning', timeout: 0 })" />
+            <div x-data class="flex flex-wrap items-center gap-4">
+                <x-button label="Saved" variant="tonal" x-on:click="materialToast('Settings saved', { type: 'success' })" />
+                <x-button label="With a description" variant="tonal" x-on:click="materialToast('Upload failed', { type: 'error', description: 'The file is larger than 4 GB.' })" />
+                <x-button label="With an action" variant="tonal" x-on:click="materialToast('Share deleted', { action: { label: 'Undo', handler: () => materialToast('Share restored', { type: 'info' }) } })" />
+                <x-button label="Until dismissed" variant="tonal" x-on:click="materialToast('Your storage is almost full', { type: 'warning', timeout: 0 })" />
+                <x-button label="Sticky, with an event" variant="tonal" x-on:click="materialToast('A new version is ready', { type: 'info', sticky: true, action: { label: 'Reload', event: 'showcase:reload' } })" x-on:showcase:reload.window="materialToast('Reloading…')" />
+            </div>
             BLADE,
         'Plain tooltips' => <<<'BLADE'
             <x-button icon="content_copy" tooltip="Copy link" />