Draw the app bar without Tailwind

Plan step 36 (navigation group, first stream): <x-app-bar>'s class
lists move into resources/css/components/app-bar.css, keyed on
data-md-app-bar (with data-md-variant/-sticky/-subtitled/-scrolled/
-collapsed) and its parts data-md-app-bar-row/-leading/-headline/
-title/-subtitle/-search/-trailing/-action/-overflow/-expanded. The
overflow menu (two icon buttons below 600px, four from it, N-09's
312px search cap and N-11's three-column centred row) already matched
the audit; only its hooks, units and layer needed to change. Every
length is px, spacing through the measurement tokens where one
matches (M3's own "4dp leading/trailing space" and "16dp" headline
inset had no exact token, so those stay literal). Imports button.css,
menu.css and menu-item.css for the overflow menu the view renders.

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

tests/Feature/Components/NavigationStylesheetsTest.php is the
navigation twin of ContainmentStylesheetsTest.php, on the same
tests/Support/ViewClasses.php rule; its dataset starts at 'app-bar'
and a 'tabs' entry (once that commit lands) will read both
tabs.blade.php and tab.blade.php, since they share one stylesheet.

Added the owed browser tests (docs/plans/material-3-browser-tests.md):
the overflow at 599/600px, keyboard in its menu, a menu closing once
its width no longer shows it, and a wire:click action from both the
icon button and the menu item form.

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

tests/Browser/BarsTest.php

@@ -90,22 +90,22 @@ it('moves between tabs with the arrow keys, skipping disabled ones, and tells Li
 });
 
 it('collapses a medium app bar into its row as the page scrolls, and fades its small title in', function () {
-    $headline = "getComputedStyle(document.querySelector('#bar [data-app-bar-row] [data-app-bar-headline]')).opacity";
+    $headline = "getComputedStyle(document.querySelector('#bar [data-md-app-bar-row] [data-md-app-bar-headline]')).opacity";
 
     $page = barsProbe()
-        ->assertScript("! document.querySelector('#bar').hasAttribute('data-collapsed')")
+        ->assertScript("! document.querySelector('#bar').hasAttribute('data-md-collapsed')")
         ->assertScript("{$headline} === '0'");
 
     $page->script('window.scrollTo(0, 600)');
 
-    $page->assertScript("document.querySelector('#bar').hasAttribute('data-collapsed') && document.querySelector('#bar').hasAttribute('data-scrolled')")
-        ->assertScript("Math.round(document.querySelector('#bar [data-app-bar-row]').getBoundingClientRect().top) === 0")
+    $page->assertScript("document.querySelector('#bar').hasAttribute('data-md-collapsed') && document.querySelector('#bar').hasAttribute('data-md-scrolled')")
+        ->assertScript("Math.round(document.querySelector('#bar [data-md-app-bar-row]').getBoundingClientRect().top) === 0")
         ->assertScript("document.querySelector('#bar').getBoundingClientRect().bottom <= 65")
         ->assertScript("{$headline} === '1'");
 
     $page->script('window.scrollTo(0, 0)');
 
-    $page->assertScript("! document.querySelector('#bar').hasAttribute('data-collapsed')");
+    $page->assertScript("! document.querySelector('#bar').hasAttribute('data-md-collapsed')");
 });
 
 it('moves focus along a toolbar with the arrow keys', function () {
@@ -145,3 +145,104 @@ it('turns section tabs into a picker on a phone', function () {
         ->assertAttribute('[data-section-picker] [role="menuitem"][href="#profile"]', 'aria-current', 'page')
         ->assertScript("! document.querySelector('[data-section-picker] [role=\"menuitem\"][href=\"#security\"]').hasAttribute('aria-current')");
 });
+
+class AppBarOverflowProbe extends Component
+{
+    public int $stars = 0;
+
+    public function star(): void
+    {
+        $this->stars++;
+    }
+
+    public function render(): string
+    {
+        return <<<'BLADE'
+            <div>
+                <p>stars: <span id="stars">{{ $stars }}</span></p>
+
+                <x-app-bar title="Shares" id="bar" :actions="[
+                    ['label' => 'Search', 'icon' => 'search'],
+                    ['label' => 'Share', 'icon' => 'share'],
+                    ['label' => 'Star', 'icon' => 'star', 'wire:click' => 'star'],
+                    ['label' => 'Archive', 'icon' => 'archive'],
+                    ['label' => 'Delete', 'icon' => 'delete'],
+                ]" />
+
+                <div style="height: 200vh"></div>
+            </div>
+            BLADE;
+    }
+}
+
+function appBarOverflowProbe()
+{
+    Livewire::component('app-bar-overflow-probe', AppBarOverflowProbe::class);
+
+    Route::middleware('web')->get('/app-bar-overflow-probe', fn () => Blade::render(<<<'BLADE'
+        <!DOCTYPE html>
+        <html>
+            <head>
+                <x-theme-script />
+                @vite(config('livewire-material.showcase.vite'))
+                @livewireStyles
+            </head>
+            <body class="bg-surface">
+                <livewire:app-bar-overflow-probe />
+                @livewireScripts
+            </body>
+        </html>
+        BLADE));
+
+    return visit('/app-bar-overflow-probe')->waitForEvent('networkidle')
+        ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
+}
+
+it('shows the app bar overflow at exactly 599 and 600px', function () {
+    $visible = "[...document.querySelectorAll('#bar [data-md-app-bar-action]')].filter((el) => getComputedStyle(el).display !== 'none').length";
+
+    appBarOverflowProbe()->resize(599, 800)
+        // Two icon buttons below 600px — the kept action and the overflow button.
+        ->assertScript("{$visible} === 1")
+        ->assertScript("getComputedStyle(document.querySelector('#bar [data-md-app-bar-overflow=\"compact\"]')).display !== 'none'")
+        ->assertScript("getComputedStyle(document.querySelector('#bar [data-md-app-bar-overflow=\"medium\"]')).display === 'none'")
+        ->resize(600, 800)
+        // Four from 600px — three kept actions and the overflow button.
+        ->assertScript("{$visible} === 3")
+        ->assertScript("getComputedStyle(document.querySelector('#bar [data-md-app-bar-overflow=\"compact\"]')).display === 'none'")
+        ->assertScript("getComputedStyle(document.querySelector('#bar [data-md-app-bar-overflow=\"medium\"]')).display !== 'none'")
+        ->assertNoJavaScriptErrors();
+});
+
+it('moves the keyboard through an app bar\'s overflow menu, and closes it once the width no longer shows it', function () {
+    $page = appBarOverflowProbe()->resize(599, 800);
+
+    $page->click('#bar [data-md-app-bar-overflow="compact"] button')
+        ->assertScript("document.querySelector('#bar [data-md-app-bar-overflow=\"compact\"] [data-md-menu-popover]').matches(':popover-open')")
+        ->keys(':focus', 'ArrowDown')
+        ->assertScript("document.activeElement.textContent.includes('Star')")
+        ->keys(':focus', 'ArrowDown')
+        ->assertScript("document.activeElement.textContent.includes('Archive')")
+        ->keys(':focus', 'Escape')
+        ->assertScript("! document.querySelector('#bar [data-md-app-bar-overflow=\"compact\"] [data-md-menu-popover]').matches(':popover-open')");
+
+    // Reopen it, then resize across 600px: the compact menu's trigger is no longer shown, so the
+    // menu it opened closes rather than staying open anchored to nothing.
+    $page->click('#bar [data-md-app-bar-overflow="compact"] button')
+        ->assertScript("document.querySelector('#bar [data-md-app-bar-overflow=\"compact\"] [data-md-menu-popover]').matches(':popover-open')")
+        ->resize(900, 800)
+        ->assertScript("! document.querySelector('#bar [data-md-app-bar-overflow=\"compact\"] [data-md-menu-popover]').matches(':popover-open')")
+        ->assertNoJavaScriptErrors();
+});
+
+it('runs a wire:click action from either the icon button or its overflow menu item', function () {
+    $page = appBarOverflowProbe()->resize(900, 800);
+
+    $page->click('#bar [data-md-app-bar-action] [aria-label="Star"]')
+        ->assertSeeIn('#stars', '1');
+
+    $page->resize(599, 800)
+        ->click('#bar [data-md-app-bar-overflow="compact"] button')
+        ->click('[role="menuitem"]:has-text("Star")')
+        ->assertSeeIn('#stars', '2');
+});

tests/Browser/NavigationTest.php

@@ -232,7 +232,7 @@ it('skips to the content', function () {
 });
 
 it('moves an app bar\'s content under a safe area an application sets', function () {
-    $row = "Math.round(document.querySelector('[data-app-bar] [data-app-bar-row]').getBoundingClientRect().top)";
+    $row = "Math.round(document.querySelector('[data-md-app-bar] [data-md-app-bar-row]').getBoundingClientRect().top)";
 
     $page = navigationReady(visit('/material'));
     $top = (int) $page->script($row);