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

tests/Browser/CommunicationTest.php

@@ -2,6 +2,8 @@
 
 const SNACKBAR = "document.querySelector('[x-data=\"materialSnackbar\"] [aria-live]')";
 
+const TOAST = "document.querySelector('[data-toast]')";
+
 it('shows a toast as a snackbar, then the next in turn', function () {
     $page = visit('/material/communication')->waitForEvent('networkidle')
         ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
@@ -39,6 +41,65 @@ it('runs a toast\'s action and dismisses it', function () {
         ->assertScript(SNACKBAR.' === null');
 });
 
+it('does not let a toast dismissed early cut the next one short', function () {
+    $page = visit('/material/communication')->waitForEvent('networkidle')
+        ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
+
+    $page->script("window.eval(\"materialToast('Share deleted', { timeout: 800, action: { label: 'Undo' } }); materialToast('Link copied', { timeout: 2500 })\")");
+
+    // A click with no hover or focus before it, as a screen reader activates a button: nothing has
+    // paused the first toast's timer.
+    $page->script("document.querySelector('[data-toast] button[aria-label=\"Dismiss\"]').click()");
+
+    $page->assertScript(TOAST."?.textContent.includes('Link copied')")
+        ->wait(1.2);
+
+    $page->assertScript(TOAST."?.textContent.includes('Link copied')");
+});
+
+it('keeps a sticky toast aside while a passing one shows, brings back the newest, and lets it go once dismissed', function () {
+    $page = visit('/material/communication')->waitForEvent('networkidle')
+        ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
+
+    // As an application dispatches it; built in the page's realm (see above).
+    $page->script("window.eval(\"window.dispatchEvent(new CustomEvent('toast', { detail: { type: 'info', title: 'A new version is ready', sticky: true, timeout: 300, action: { label: 'Reload', event: 'material:test-reload' } } }))\")");
+
+    $page->assertScript(TOAST."?.textContent.includes('A new version is ready')")
+        ->wait(0.6);
+
+    $page->assertScript(TOAST."?.textContent.includes('A new version is ready')");
+
+    $page->script("window.eval(\"materialToast('Settings saved', { type: 'success', timeout: 900 }); materialToast('Version 2 is ready', { sticky: true })\")");
+
+    $page->assertScript(TOAST."?.textContent.includes('Settings saved')")
+        ->wait(1.3);
+
+    $page->assertScript(TOAST."?.textContent.includes('Version 2 is ready')");
+
+    $page->click('[data-toast] button[aria-label="Dismiss"]')
+        ->assertScript(TOAST.' === null');
+
+    // Dismissed rather than left to time out: the pointer still rests where the snackbar appears,
+    // and hovering pauses it.
+    $page->script("window.eval(\"materialToast('Link copied', { timeout: 0 })\")");
+
+    $page->assertScript(TOAST."?.textContent.includes('Link copied')")
+        ->click('[data-toast] button[aria-label="Dismiss"]')
+        ->assertScript(TOAST.' === null');
+});
+
+it('dispatches a toast action\'s window event alongside its handler, and closes', function () {
+    $page = visit('/material/communication')->waitForEvent('networkidle')
+        ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
+
+    $page->script("window.eval(\"window.reloads = 0; window.handled = 0; window.addEventListener('material:test-reload', () => window.reloads++); materialToast('A new version is ready', { sticky: true, action: { label: 'Reload', event: 'material:test-reload', handler: () => window.handled++ } })\")");
+
+    $page->click('[data-toast-action]')
+        ->assertScript(TOAST.' === null')
+        ->assertScript("window.eval('window.reloads') === 1")
+        ->assertScript("window.eval('window.handled') === 1");
+});
+
 it('opens a persistent rich tooltip on press', function () {
     $bubble = "document.querySelector('#communication [role=\"dialog\"][popover]')";
 

tests/Feature/Components/ToastTest.php

@@ -13,3 +13,11 @@ it('hosts the snackbar queue, kept across wire:navigate', function () {
 it('can sit at the start', function () {
     expect((string) $this->blade('<x-toast position="bottom-start" />'))->toContain('justify-start');
 });
+
+it('marks the snackbar and its action for tests and styling', function () {
+    $html = (string) $this->blade('<x-toast />');
+
+    expect($html)
+        ->toMatch('/<div\s[^>]*\bdata-toast\b[^>]*aria-live="polite"/')
+        ->toMatch('/<button\s[^>]*\bdata-toast-action\b[^>]*x-on:click="act\(\)"/');
+});