Draw the toolbar without Tailwind

Plan step 36 (navigation group, second stream): <x-toolbar>'s class
lists move into resources/css/components/toolbar.css, keyed on
data-md-toolbar (data-md-variant/-vertical/-vibrant/-rounded/
-toolbar-place) and data-md-toolbar-group/-toolbar-fab. The docked
form with a FAB (N-02's --material-bottom-bar clearance), the vertical
24dp margin (N-12), the standard toolbar's primary icon buttons
(N-13), and the rounded large-screen form with dividers from 840px
were all already correct; only their hooks, units and layer needed to
change. The file no longer sits outside every layer: button.css and
fab.css now draw their own ink through data-md-* attributes rather
than a Tailwind utility, so a toolbar's more specific selector always
beats their single base color/background-color/box-shadow declaration
without needing to escape the cascade layers.

Sizes stay px (64px row, 40px divider); spacing goes through the
measurement tokens where one matches the value (4px leading/trailing
gap, 16/32px docked spread, 8px floating ends, 16/24px placed
margins).

Hooks renamed: every unprefixed data-toolbar* attribute to data-md-*,
updated in tests/Feature/Components/{AppBarTest,ToolbarTest}.php and
tests/Browser/BarsTest.php. toolbar.js needed no change: it reads the
bar through $root and role="toolbar", not by hook name.

Carry-over from the app-bar step: layout/pane.css now imports
app-bar.css and button.css for the pane's own top app bar and back
button, now that both are rewritten. That import crosses into
material.components for the first time from a layout file, so
tests/Feature/StylesheetsTest.php's two layout-shape checks now skip
non-`layout/` files reached through it — each already covered by its
own group's stylesheet test.

Added the owed browser tests (docs/plans/material-3-browser-tests.md):
a docked toolbar clear of the navigation bar below medium, and the
rounded form with its divider height from 840px, clear of the
window's edges.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/components/toolbar.blade.php

@@ -14,13 +14,13 @@
      `rounded` gives a docked toolbar the form M3 lets it take on web and large screens: "the docked
      toolbar can be rounded. Dividers can be used to organize large amounts of items", and it "can be
      … placed in different parts of the page" (docs/reference/m3/components-navigation-selection-inputs.md
-     § Toolbars → Behaviour and guidelines; toolbars/guidelines § Adaptive design → Resizing). From `expanded`
-     (840px) it is a fully rounded bar that spans what it is written in, and at `place="bottom"` it
-     lifts clear of the window's edges; below `expanded` it is the square, full-width docked toolbar,
-     as M3 requires there. Separate groups of controls with `<x-divider vertical />` between them (in
-     a vertical toolbar, `<x-divider />`): inside a toolbar it stands as tall as an icon button rather
-     than across the whole bar. The floating toolbar has no such form — it is fully rounded already,
-     and M3's large-screen advice for it is to show more controls, or two toolbars at opposite edges.
+     § Toolbars → Behaviour and guidelines). From `expanded` (840px) it is a fully rounded bar that
+     spans what it is written in, and at `place="bottom"` it lifts clear of the window's edges; below
+     `expanded` it is the square, full-width docked toolbar, as M3 requires there. Separate groups of
+     controls with `<x-divider vertical />` between them (in a vertical toolbar, `<x-divider />`):
+     inside a toolbar it stands as tall as an icon button rather than across the whole bar. The
+     floating toolbar has no such form — it is fully rounded already, and M3's large-screen advice
+     for it is to show more controls, or two toolbars at opposite edges.
 
      A docked toolbar and a navigation bar occupy the same region of the screen and M3 says never to
      show both at once: the bar belongs on a primary page, the toolbar on a secondary or contextual
@@ -29,7 +29,14 @@
 
      Put `<x-button icon="…" tooltip="…" />` controls in the slot (`:selected` for toggles). It is a
      `role="toolbar"`: the arrow keys move between its controls (resources/js/toolbar.js,
-     resources/css/components/toolbar.css). --}}
+     resources/css/components/toolbar.css).
+
+     The toolbar renders `data-md-toolbar` with `data-md-variant`, `data-md-vertical`,
+     `data-md-vibrant`, `data-md-rounded` and `data-md-toolbar-place`; a FAB beside a floating
+     toolbar sits in `data-md-toolbar-group` (with the toolbar itself), one docked in
+     `data-md-toolbar-fab`. Drawn by resources/css/components/toolbar.css, which the view renders
+     no other component into — a caller's own `<x-button>`, `<x-fab>` and `<x-divider>` bring
+     their own stylesheets. --}}
 
 @props([
     'variant' => 'floating',
@@ -50,26 +57,26 @@
 @endphp
 
 @if ($grouped)
-    <div data-toolbar-group @if ($vertical) data-vertical @endif @if ($place) data-toolbar-place="{{ $place }}" @endif>
+    <div data-md-toolbar-group @if ($vertical) data-md-vertical @endif @if ($place) data-md-toolbar-place="{{ $place }}" @endif>
 @endif
 
 <div
     role="toolbar"
     x-data="materialToolbar({{ $vertical ? 'true' : 'false' }})"
     x-on:keydown="move($event)"
-    data-toolbar
-    data-variant="{{ $variant }}"
-    @if ($vertical) data-vertical aria-orientation="vertical" @endif
-    @if ($vibrant && $variant === 'floating') data-vibrant @endif
-    @if ($rounded) data-rounded @endif
-    @if ($place && ! $grouped) data-toolbar-place="{{ $place }}" @endif
+    data-md-toolbar
+    data-md-variant="{{ $variant }}"
+    @if ($vertical) data-md-vertical aria-orientation="vertical" @endif
+    @if ($vibrant && $variant === 'floating') data-md-vibrant @endif
+    @if ($rounded) data-md-rounded @endif
+    @if ($place && ! $grouped) data-md-toolbar-place="{{ $place }}" @endif
     @if (filled($label)) aria-label="{{ $label }}" @endif
     {{ $attributes }}
 >
     {{ $slot }}
 
     @if ($docksFab)
-        <div data-toolbar-fab>{{ $fab }}</div>
+        <div data-md-toolbar-fab>{{ $fab }}</div>
     @endif
 </div>