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

resources/views/components/toolbar.blade.php

@@ -0,0 +1,51 @@
+{{-- M3 Expressive's toolbar: a set of actions for the current page, in a bar of its own.
+
+     `variant`: `floating` (the default: a pill at elevation 3; `vibrant` in primary-container,
+     `vertical` stands it on end) or `docked` (a full-width bar in surface-container, for the bottom
+     of a screen). `place` puts it over the page: `bottom` (centred above the bottom edge; a docked
+     toolbar spans it) or `end` (centred against the end edge, for a vertical one); without it the
+     toolbar sits where it is written. A `fab` slot sets an `<x-fab>` beside a floating toolbar.
+     `label` names it for screen readers.
+
+     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). --}}
+
+@props([
+    'variant' => 'floating',
+    'vibrant' => false,
+    'vertical' => false,
+    'place' => null,
+    'label' => null,
+])
+
+@php
+    $variant = $variant === 'docked' ? 'docked' : 'floating';
+    $vertical = $vertical && $variant === 'floating';
+    $place = in_array($place, ['bottom', 'end'], true) ? $place : null;
+    $grouped = isset($fab) && $variant === 'floating';
+@endphp
+
+@if ($grouped)
+    <div data-toolbar-group @if ($vertical) data-vertical @endif @if ($place) data-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 ($place && ! $grouped) data-toolbar-place="{{ $place }}" @endif
+    @if (filled($label)) aria-label="{{ $label }}" @endif
+    {{ $attributes }}
+>
+    {{ $slot }}
+</div>
+
+@if ($grouped)
+        {{ $fab }}
+    </div>
+@endif