Add app bars, toolbars, tabs and the account and theme controls

M3 Expressive top app bars (small, centered, medium and large flexible, search) that collapse with CSS sticky, docked and floating toolbars, primary and secondary tabs with a view-transition indicator, section navigation, the account menu and theme toggles. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
2026-09-13 08:26:54 +02:00
parent bf00e4c40a
commit f90695cedd
22 changed files with 1603 additions and 1 deletions
@@ -0,0 +1,146 @@
+<?php
+
+use Illuminate\Support\Facades\Blade;
+use Illuminate\Support\Facades\Route;
+use Livewire\Component;
+use Livewire\Livewire;
+
+class BarsProbe extends Component
+{
+    public string $tab = 'files';
+
+    public function render(): string
+    {
+        return <<<'BLADE'
+            <div>
+                <x-app-bar variant="medium" title="Recipients" id="bar">
+                    <x-slot:navigation><x-button icon="arrow_back" tooltip="Back" /></x-slot:navigation>
+                    <x-slot:actions><x-theme-toggle id="toggle" /></x-slot:actions>
+                </x-app-bar>
+
+                <div class="space-y-6 p-4">
+                    <p>tab: <span id="tab">{{ $tab }}</span></p>
+
+                    <x-tabs id="share" wire:model.live="tab" :tabs="[['name' => 'files', 'label' => 'Files'], ['name' => 'people', 'label' => 'People'], ['name' => 'locked', 'label' => 'Locked', 'disabled' => true], ['name' => 'activity', 'label' => 'Activity']]">
+                        <x-tab name="files">Three files.</x-tab>
+                        <x-tab name="people">Anna and Ben.</x-tab>
+                        <x-tab name="activity">Two downloads.</x-tab>
+                    </x-tabs>
+
+                    <x-toolbar label="Formatting">
+                        <button type="button" id="bold">B</button>
+                        <button type="button" id="italic">I</button>
+                        <button type="button" id="underline">U</button>
+                    </x-toolbar>
+
+                    <x-theme-toggle mode="cycle" id="cycle" />
+                    <x-theme-toggle mode="picker" />
+
+                    <x-section-nav :items="[['title' => 'Profile', 'url' => '#profile', 'active' => true], ['title' => 'Security', 'url' => '#security']]" no-wire-navigate />
+
+                    <div style="height: 200vh"></div>
+                </div>
+            </div>
+            BLADE;
+    }
+}
+
+function barsProbe()
+{
+    Livewire::component('bars-probe', BarsProbe::class);
+
+    Route::middleware('web')->get('/bars-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:bars-probe />
+                @livewireScripts
+            </body>
+        </html>
+        BLADE));
+
+    return visit('/bars-probe')->waitForEvent('networkidle')
+        ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
+}
+
+it('moves between tabs with the arrow keys, skipping disabled ones, and tells Livewire', function () {
+    $page = barsProbe()
+        ->click('#share-people')
+        ->assertSeeIn('#tab', 'people')
+        ->assertSee('Anna and Ben.')
+        ->assertAttribute('#share-people', 'tabindex', '0')
+        ->assertAttribute('#share-files', 'tabindex', '-1');
+
+    $page->keys('#share-people', 'ArrowRight')
+        ->assertSeeIn('#tab', 'activity')
+        ->assertScript("document.activeElement.id === 'share-activity'")
+        ->assertScript("getComputedStyle(document.querySelector('#share-activity [data-tab-indicator]')).opacity === '1'");
+
+    $page->keys('#share-activity', 'Home')
+        ->assertSeeIn('#tab', 'files')
+        ->assertScript("document.activeElement.id === 'share-files'");
+
+    $page->keys('#share-files', 'ArrowLeft')
+        ->assertSeeIn('#tab', 'activity');
+});
+
+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";
+
+    $page = barsProbe()
+        ->assertScript("! document.querySelector('#bar').hasAttribute('data-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")
+        ->assertScript("document.querySelector('#bar').getBoundingClientRect().bottom <= 65")
+        ->assertScript("{$headline} === '1'");
+
+    $page->script('window.scrollTo(0, 0)');
+
+    $page->assertScript("! document.querySelector('#bar').hasAttribute('data-collapsed')");
+});
+
+it('moves focus along a toolbar with the arrow keys', function () {
+    barsProbe()
+        ->keys('#bold', 'ArrowRight')
+        ->assertScript("document.activeElement.id === 'italic'")
+        ->keys('#italic', 'End')
+        ->assertScript("document.activeElement.id === 'underline'")
+        ->keys('#underline', 'ArrowRight')
+        ->assertScript("document.activeElement.id === 'bold'");
+});
+
+it('switches the theme from a toggle, a cycle and a picker', function () {
+    $page = barsProbe()
+        ->click('[data-theme-option="light"]')
+        ->assertScript("document.documentElement.dataset.theme === 'light'")
+        ->assertAttribute('#toggle', 'aria-pressed', 'false');
+
+    $page->click('#toggle')
+        ->assertScript("document.documentElement.dataset.theme === 'dark'")
+        ->assertAttribute('#toggle', 'aria-pressed', 'true')
+        ->assertAttribute('[data-theme-option="dark"]', 'aria-checked', 'true');
+
+    $page->click('#cycle')
+        ->assertScript("document.documentElement.dataset.themeChoice === 'system'")
+        ->click('#cycle')
+        ->assertScript("document.documentElement.dataset.themeChoice === 'light'");
+});
+
+it('turns section tabs into a picker on a phone', function () {
+    barsProbe()
+        ->resize(400, 800)
+        ->assertScript("getComputedStyle(document.querySelector('[data-section-nav] nav')).display === 'none'")
+        ->click('[data-section-picker] button')
+        ->assertScript("document.querySelector('[data-section-picker] [popover]').matches(':popover-open')")
+        ->assertAttribute('[data-section-picker] [role="menuitemcheckbox"][href="#profile"]', 'aria-checked', 'true')
+        ->assertAttribute('[data-section-picker] [role="menuitemcheckbox"][href="#security"]', 'aria-checked', 'false');
+});