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

tests/Feature/Components/AppBarTest.php

@@ -0,0 +1,105 @@
+<?php
+
+it('draws a small, sticky app bar with a heading, navigation and actions', function () {
+    $html = (string) $this->blade(<<<'BLADE'
+        <x-app-bar title="Shares" subtitle="12 active">
+            <x-slot:navigation><button>menu</button></x-slot:navigation>
+            <x-slot:actions><button>search</button></x-slot:actions>
+        </x-app-bar>
+        BLADE);
+
+    expect($html)
+        ->toContain('<header')
+        ->toContain('x-data="materialAppBar"')
+        ->toContain('data-variant="small"')
+        ->toContain('data-sticky')
+        ->toContain('data-subtitled')
+        ->toContain('<h1 data-app-bar-title>Shares</h1>')
+        ->toContain('<p data-app-bar-subtitle>12 active</p>')
+        ->toContain('<div data-app-bar-leading><button>menu</button></div>')
+        ->toContain('<div data-app-bar-trailing><button>search</button></div>');
+});
+
+it('gives a medium or large bar a collapsed title in its row and the heading under it', function () {
+    $html = (string) $this->blade('<x-app-bar variant="large" title="Settings" heading="h2" :sticky="false" />');
+
+    expect($html)
+        ->toContain('data-variant="large"')
+        ->not->toContain('data-sticky')
+        ->toContain('<div data-app-bar-headline  aria-hidden="true" >')
+        ->toContain('<span data-app-bar-title>Settings</span>')
+        ->toContain('<div data-app-bar-expanded>')
+        ->toContain('<h2 data-app-bar-title>Settings</h2>');
+});
+
+it('puts a search bar in the row of a search app bar', function () {
+    expect((string) $this->blade('<x-app-bar variant="search"><x-search placeholder="Search shares" /></x-app-bar>'))
+        ->toContain('data-app-bar-search')
+        ->toContain('placeholder="Search shares"');
+});
+
+it('falls back to a small bar and an h1 for unknown values', function () {
+    expect((string) $this->blade('<x-app-bar variant="huge" heading="section" title="Shares" />'))
+        ->toContain('data-variant="small"')
+        ->toContain('<h1 data-app-bar-title>');
+});
+
+it('draws floating and docked toolbars', function () {
+    $html = (string) $this->blade(<<<'BLADE'
+        <x-toolbar label="Formatting" vibrant vertical place="end">
+            <button>B</button>
+            <x-slot:fab><button>+</button></x-slot:fab>
+        </x-toolbar>
+        BLADE);
+
+    expect($html)
+        ->toContain('<div data-toolbar-group  data-vertical   data-toolbar-place="end" >')
+        ->toContain('role="toolbar"')
+        ->toContain('materialToolbar(true)')
+        ->toContain('data-variant="floating"')
+        ->toContain('aria-orientation="vertical"')
+        ->toContain('data-vibrant')
+        ->toContain('aria-label="Formatting"')
+        ->toContain('<button>+</button>')
+        ->and((string) $this->blade('<x-toolbar variant="docked" vibrant vertical place="bottom"><button>B</button></x-toolbar>'))
+        ->toContain('data-variant="docked"')
+        ->not->toContain('data-vibrant')
+        ->not->toContain('data-vertical')
+        ->toContain('data-toolbar-place="bottom"')
+        ->not->toContain('data-toolbar-group');
+});
+
+it('switches the theme through the store in three shapes', function () {
+    expect((string) $this->blade('<x-theme-toggle />'))
+        ->toContain('data-theme-toggle="toggle"')
+        ->toContain('aria-label="Dark theme"')
+        ->toContain('$store.theme.toggle()')
+        ->and((string) $this->blade('<x-theme-toggle mode="cycle" />'))
+        ->toContain('data-theme-toggle="cycle"')
+        ->toContain("{ light: 'dark', dark: 'system', system: 'light' }")
+        ->and((string) $this->blade('<x-theme-toggle mode="picker" />'))
+        ->toContain('role="radiogroup"')
+        ->toContain('data-theme-option="system"')
+        ->toContain("\$store.theme.set('dark')");
+});
+
+it('opens an account menu from the initials of a name', function () {
+    $html = (string) $this->blade(<<<'BLADE'
+        <x-account-menu name="Anna Maria Keller" email="anna@example.com">
+            <x-menu-item label="Settings" />
+            <x-slot:footer><x-menu-item label="Sign out" /></x-slot:footer>
+        </x-account-menu>
+        BLADE);
+
+    expect($html)
+        ->toContain('aria-label="Account"')
+        ->toContain('data-account-menu')
+        ->toMatch('/>\s*AM\s*<\/button>/')
+        ->toContain('anna@example.com')
+        ->toContain('Settings')
+        ->toContain('data-account-theme')
+        ->toContain('Sign out')
+        ->and((string) $this->blade('<x-account-menu avatar="/anna.jpg" :theme="false" />'))
+        ->toContain('<img src="/anna.jpg"')
+        ->not->toContain('data-account-theme');
+});

tests/Feature/Components/TabsTest.php

@@ -0,0 +1,82 @@
+<?php
+
+use Livewire\Component;
+use Livewire\Livewire;
+
+it('renders the tablist on the server with the first enabled tab chosen', function () {
+    $html = (string) $this->blade(<<<'BLADE'
+        <x-tabs id="share" :tabs="[['name' => 'files', 'label' => 'Files', 'disabled' => true], ['name' => 'people', 'label' => 'People', 'icon' => 'group', 'badge' => 3]]">
+            <x-tab name="people">Anna</x-tab>
+        </x-tabs>
+        BLADE);
+
+    expect($html)
+        ->toContain('role="tablist"')
+        ->toContain('data-variant="primary"')
+        ->toContain('id="share-people"')
+        ->toContain('aria-controls="share-people-panel"')
+        ->toMatch('/data-tab="people"\s+aria-controls="share-people-panel"\s+aria-selected="true"\s+tabindex="0"/')
+        ->toMatch('/data-tab="files"\s+aria-controls="share-files-panel"\s+aria-selected="false"\s+tabindex="-1"/')
+        ->toContain('disabled')
+        ->toContain('data-tab-indicator')
+        ->toContain('--tabs-indicator: share-indicator')
+        ->toContain('x-modelable="selected"')
+        ->toContain('role="tabpanel"')
+        ->toContain('>3</span>');
+});
+
+it('takes a variant, stacks icons and scrolls on request', function () {
+    expect((string) $this->blade('<x-tabs variant="secondary" stacked scrollable :tabs="[[\'name\' => \'a\', \'label\' => \'A\']]" />'))
+        ->toContain('data-variant="secondary"')
+        ->not->toContain('data-stacked')
+        ->toContain('data-scrollable')
+        ->and((string) $this->blade('<x-tabs stacked selected="b" :tabs="[[\'name\' => \'a\', \'label\' => \'A\'], [\'name\' => \'b\', \'label\' => \'B\']]" />'))
+        ->toContain('data-stacked')
+        ->toMatch('/data-tab="b"\s+aria-controls="[^"]+"\s+aria-selected="true"/');
+});
+
+it('entangles the chosen tab with Livewire and renders the one the property names', function () {
+    Livewire::component('tabs-probe', new class extends Component
+    {
+        public string $tab = 'people';
+
+        public function render(): string
+        {
+            return '<div><x-tabs wire:model.live="tab" :tabs="[[\'name\' => \'files\', \'label\' => \'Files\'], [\'name\' => \'people\', \'label\' => \'People\']]" /></div>';
+        }
+    });
+
+    expect(Livewire::test('tabs-probe')->html())
+        ->toContain(".entangle('tab').live")
+        ->not->toContain('x-modelable')
+        ->toMatch('/data-tab="people"\s+aria-controls="[^"]+"\s+aria-selected="true"/');
+});
+
+it('draws section navigation as secondary tabs and a picker', function () {
+    $html = (string) $this->blade(<<<'BLADE'
+        <x-section-nav label="Settings" :items="[
+            ['title' => 'Profile', 'icon' => 'person', 'url' => '/settings/profile'],
+            ['title' => 'Security', 'icon' => 'lock', 'url' => '/settings/security', 'active' => true, 'badge' => 1],
+        ]" />
+        BLADE);
+
+    expect($html)
+        ->toContain('aria-label="Settings"')
+        ->toContain('data-section-picker')
+        ->toContain('data-variant="secondary"')
+        ->toContain('sm:flex')
+        ->toMatch('/href="\/settings\/security"\s+data-tab\s+aria-current="page"\s+wire:navigate/')
+        ->not->toMatch('/href="\/settings\/profile"\s+data-tab\s+aria-current/')
+        ->toContain('role="menuitemcheckbox"');
+});
+
+it('marks the section whose url is the request\'s, and wraps many sections onto a grid', function () {
+    $this->get('/');
+
+    $items = collect(range(1, 7))->map(fn (int $n): array => ['title' => "S{$n}", 'url' => $n === 3 ? url('/') : "/s/{$n}"])->all();
+
+    expect((string) $this->blade('<x-section-nav :items="$items" no-wire-navigate />', ['items' => $items]))
+        ->toContain('sm:grid sm:grid-cols-4 xl:flex')
+        ->toMatch('/data-tab\s+aria-current="page"\s*>\s*<span data-tab-content>\s*<span class="truncate">S3/')
+        ->not->toContain('wire:navigate');
+});