Draw the snackbar host without Tailwind

Plan step 36 (actions). <x-toast> renders data-md-toast with
data-md-position, its snackbar data-md-toast-snackbar with a bound
data-md-two-line, data-md-toast-content with a bound
data-md-toast-wrap, and data-md-toast-action/-dismiss; no class list.
toast.css draws SnackbarTokens' inverse surface, 48/68px container,
the two 40px controls reaching 48px targets with their own state
layer and touch target (ACT-18), the enter transition and the
position-start margin that grows from medium.

data-toast becomes data-md-toast-snackbar and data-toast-action
becomes data-md-toast-action (snackbar.js, navigation.js's
hide-on-scroll guard, NavigationBarTest, CommunicationTest); a new
data-md-toast-dismiss hook names the close button. ToastTest is
rewritten on the hooks and ComponentStylesheet. CommunicationTest
gains the owed tests: an actioned snackbar past the default timeout,
Escape on a focused one, the live region before any message, and the
two-line height with Alt+G reaching the action from elsewhere on the
page.

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

tests/Feature/Components/ActionStylesheetsTest.php

@@ -26,6 +26,7 @@ dataset('action components', [
     'fab-menu-item',
     'fab-menu',
     'rich-tooltip',
+    'toast',
 ]);
 
 it('draws the component from a stylesheet shaped like every package stylesheet', function (string $name) {

tests/Feature/Components/NavigationBarTest.php

@@ -101,5 +101,5 @@ it('hides on a scroll down and springs back on a scroll up', function () {
 
     expect(file_get_contents(__DIR__.'/../../../resources/js/navigation.js'))
         // Never out from under a snackbar, a bottom sheet or a drawer resting on its edge.
-        ->toContain("document.querySelectorAll('[data-toast], [role=\"dialog\"]')");
+        ->toContain("document.querySelectorAll('[data-md-toast-snackbar], [role=\"dialog\"]')");
 });

tests/Feature/Components/ToastTest.php

@@ -1,48 +1,77 @@
 <?php
 
+use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
+
 it('hosts the snackbar queue, kept across wire:navigate', function () {
     $html = (string) $this->blade('<x-toast />');
 
     expect($html)
         ->toContain('x-persist="material-toast"')
         ->toContain('x-data="materialSnackbar"')
-        ->toContain('bg-inverse-surface')
-        ->toContain('justify-center');
+        ->toContain('data-md-toast')
+        ->toContain('data-md-position="bottom"')
+        ->and(ComponentStylesheet::read('toast')->declarations('[data-md-toast-snackbar]'))->toMatchArray([
+            'background-color' => 'var(--md-sys-color-inverse-surface)',
+            'color' => 'var(--md-sys-color-inverse-on-surface)',
+        ]);
 });
 
 it('draws no state icon, and reaches 48px from its 40px controls', function () {
     $html = (string) $this->blade('<x-toast />');
+    $css = ComponentStylesheet::read('toast');
 
     // M3 tells you to avoid an icon in a snackbar; the type is left to pick the announcement role.
     expect(substr_count($html, '<svg'))->toBe(1)
         ->and($html)->not->toContain('text-inverse-success')
-        ->not->toContain('opacity-80')
-        ->toContain('data-toast-action class="state-layer focus-ring touch-target')
-        ->toContain('state-layer focus-ring touch-target inline-flex size-10');
+        ->toContain('data-md-toast-action')
+        ->toContain('data-md-toast-dismiss')
+        ->and($css->declarations(':is([data-md-toast-action], [data-md-toast-dismiss])'))
+        ->toHaveKey('border-radius', 'var(--md-sys-shape-corner-full)')
+        ->and($css->declarations(':is([data-md-toast-action], [data-md-toast-dismiss])::after'))->toMatchArray([
+            'min-width' => 'var(--md-sys-measurement-space600)',
+            'min-height' => 'var(--md-sys-measurement-space600)',
+        ])
+        ->and($css->declarations('[data-md-toast-dismiss]'))->toMatchArray([
+            'width' => 'var(--md-sys-measurement-space500)',
+            'height' => 'var(--md-sys-measurement-space500)',
+        ]);
 });
 
 it('grows to M3\'s two-line height, and wraps the action below on a compact window', function () {
     $html = (string) $this->blade('<x-toast />');
+    $css = ComponentStylesheet::read('toast');
 
     // SnackbarTokens: 48dp for one line, 68dp for two — a description is that second line.
     expect($html)
-        ->toContain('x-bind:class="current.description ? \'min-h-17\' : \'min-h-12\'"')
-        ->toContain('flex-wrap')
-        // M3's "two lines with longer action": the action leaves the text's line below `medium`.
-        ->toContain('x-bind:class="current.description && current.action ? \'max-medium:basis-full\' : \'\'"')
-        ->toContain('touch-target ms-auto h-10');
+        ->toContain('x-bind:data-md-two-line="current.description ? \'\' : null"')
+        ->toContain('x-bind:data-md-toast-wrap="current.description && current.action ? \'\' : null"')
+        ->and($css->declarations('[data-md-toast-snackbar]'))->toHaveKey('min-height', 'var(--md-sys-measurement-space600)')
+        ->and($css->declarations('[data-md-toast-snackbar][data-md-two-line]'))->toBe(['min-height' => '68px'])
+        ->and($css->declarations('[data-md-toast-content][data-md-toast-wrap]', ['@media (width < 600px)']))->toBe(['flex-basis' => '100%'])
+        ->and($css->declarations('[data-md-toast-action]'))->toHaveKey('height', 'var(--md-sys-measurement-space500)');
 });
 
-it('can sit at the start', function () {
-    expect((string) $this->blade('<x-toast position="bottom-start" />'))->toContain('justify-start');
+it('can sit at the start, growing its margin from medium', function () {
+    $css = ComponentStylesheet::read('toast');
+
+    expect((string) $this->blade('<x-toast position="bottom-start" />'))->toContain('data-md-position="bottom-start"')
+        ->and($css->declarations("[data-md-toast][data-md-position='bottom-start']"))->toBe(['justify-content' => 'flex-start'])
+        ->and($css->declarations("[data-md-toast][data-md-position='bottom-start']", ['@media (width >= 600px)']))->toBe([
+            'inset-inline-start' => 'var(--md-sys-measurement-space300)',
+        ]);
+});
+
+it('falls back to bottom for an unknown position', function () {
+    expect((string) $this->blade('<x-toast position="top" />'))->toContain('data-md-position="bottom"');
 });
 
 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/')
-        ->toMatch('/<button\s[^>]*\bdata-toast-action\b[^>]*x-on:click="act\(\)"/');
+        ->toMatch('/<div\s[^>]*\bdata-md-toast-snackbar\b/')
+        ->toMatch('/<button\s[^>]*\bdata-md-toast-action\b[^>]*x-on:click="act\(\)"/')
+        ->toMatch('/<button\s[^>]*\bdata-md-toast-dismiss\b[^>]*x-on:click="dismiss\(\)"/');
 });
 
 it('keeps the live region in the page, polite, around the snackbar that comes and goes', function () {
@@ -54,3 +83,9 @@ it('keeps the live region in the page, polite, around the snackbar that comes an
         ->toContain("x-bind:role=\"current && (current.type === 'error' || current.type === 'warning') ? 'alert' : 'status'\"")
         ->and(substr_count($html, 'aria-live'))->toBe(1);
 });
+
+it('lifts above a bottom bar, publishing its own height for a FAB to clear', function () {
+    expect(ComponentStylesheet::read('toast')->declarations('[data-md-toast]'))->toMatchArray([
+        'bottom' => 'calc(var(--material-bottom-bar, 0px) + var(--md-sys-measurement-space200))',
+    ]);
+});