Lift the snackbar above a toolbar placed at the bottom

SealShare's only navigation is a floating toolbar at place="bottom". In
1.x it set --material-bottom-bar to lift the snackbar over it; in 2.0.0
the toolbar reads that variable to place itself, so an application can
no longer set it, and the snackbar landed on the toolbar. M3 nudges a
snackbar "upward to avoid overlapping FABs/docked toolbars" and never
puts one in front of navigation.

A bottom-placed toolbar now publishes --material-bottom-toolbar, the
distance from the window's bottom edge to its top: floating 64px (as
tall as an md or lg FAB beside it), docked 64px plus the safe area it
pads, rounded docked floating from 840px. It is declared on :root and
again on the scaffold's root, the only place its formula sees the bar.
The snackbar clears whichever of the bar and the toolbar reaches higher,
and a page pads its end with it. Two Chromium tests, both failing on the
old formula: a docked toolbar on a scaffold's navigation bar, and a
floating toolbar without a scaffold (plan step 46).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

tests/Feature/Components/AppBarTest.php

@@ -224,6 +224,24 @@ it('keeps a toolbar at the bottom clear of the navigation bar', function () {
     }
 });
 
+it('publishes what a toolbar at the bottom covers', function () {
+    $toolbar = ComponentStylesheet::read('toolbar');
+    $rule = fn (string $has): string => ":root:has({$has}), [data-md-scaffold]:has({$has})";
+    $above = fn (string $height): array => ['--material-bottom-toolbar' => "calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200) + {$height})"];
+    $group = "[data-md-toolbar-group][data-md-toolbar-place='bottom']:not([data-md-vertical])";
+
+    // A floating toolbar (or its group) sits 16px above the bar or the safe area and is 64px tall;
+    // beside a medium or large FAB, the group is as tall as the FAB. Declared on the scaffold's root
+    // too, the one place the formula sees --material-bottom-bar.
+    expect($toolbar->declarations($rule("[data-md-toolbar-place='bottom']:is([data-md-toolbar], [data-md-toolbar-group]):not([data-md-vertical])")))->toBe($above('64px'))
+        ->and($toolbar->declarations($rule("{$group} [data-md-fab][data-md-size='md']")))->toBe($above('80px'))
+        ->and($toolbar->declarations($rule("{$group} [data-md-fab][data-md-size='lg']")))->toBe($above('96px'))
+        // A docked one rests on the bar and pads the safe area; rounded, it floats from 840px.
+        ->and($toolbar->declarations($rule("[data-md-toolbar][data-md-variant='docked'][data-md-toolbar-place='bottom']")))
+        ->toBe(['--material-bottom-toolbar' => 'calc(var(--material-bottom-bar, 0px) + 64px + var(--material-safe-bottom, env(safe-area-inset-bottom)))'])
+        ->and($toolbar->declarations($rule("[data-md-toolbar][data-md-variant='docked'][data-md-rounded][data-md-toolbar-place='bottom']"), ['@media (width >= 840px)']))->toBe($above('64px'));
+});
+
 it('offers M3\'s three contrast levels, marking the one in force', function () {
     expect((string) $this->blade('<x-theme-toggle mode="contrast" />'))
         ->toContain('data-md-theme-toggle="contrast"')

tests/Feature/Components/NavigationStylesheetsTest.php

@@ -135,8 +135,9 @@ it('is imported from the navigation block of all.css', function (string $name) {
 
 it('scopes every element-wide selector to a data-md hook', function (string $name) {
     // `all.css` bundles every component stylesheet into every page, so a bare `html`, `body`,
-    // `dialog` or `:root` rule would restyle the application's own pages.
+    // `dialog` or `:root` rule would restyle the application's own pages. One that applies only
+    // while a package component is on the page (`:root:has([data-md-toolbar-place…])`) is scoped.
     $source = (string) preg_replace('~/\*.*?\*/~s', '', ComponentStylesheet::read($name)->css);
 
-    expect($source)->not->toMatch('/(?:^|[,{};]\s*)(?:html|body|dialog|:root)(?![\w-])(?!\[data-md-|:has\(> \[data-md-)/m');
+    expect($source)->not->toMatch('/(?:^|[,{};]\s*)(?:html|body|dialog|:root)(?![\w-])(?!\[data-md-|:has\((?:> )?\[data-md-)/m');
 })->with('navigation stylesheets');

tests/Feature/Components/ToastTest.php

@@ -87,8 +87,10 @@ it('keeps the live region in the page, polite, around the snackbar that comes an
         ->and(substr_count($html, 'aria-live'))->toBe(1);
 });
 
-it('lifts above a bottom bar, publishing its own height for a FAB to clear', function () {
+it('lifts above a bottom bar or a toolbar placed at the bottom, publishing its own height for a FAB to clear', function () {
+    // Whichever reaches higher: M3 nudges a snackbar clear of a docked toolbar and never puts one
+    // in front of navigation (toolbar.css publishes --material-bottom-toolbar).
     expect(ComponentStylesheet::read('toast')->declarations('[data-md-toast]'))->toMatchArray([
-        'bottom' => 'calc(var(--material-bottom-bar, 0px) + var(--md-sys-measurement-space200))',
+        'bottom' => 'calc(max(var(--material-bottom-bar, 0px), var(--material-bottom-toolbar, 0px)) + var(--md-sys-measurement-space200))',
     ]);
 });