Add app bars, toolbars, tabs and the account and theme controls
tests / browser (chrome, chromium) (push) Successful in 3m34s
tests / browser (safari, webkit) (push) Successful in 6m2s
tests / lint (push) Successful in 59s
tests / feature (8.4) (push) Successful in 1m6s
tests / feature (8.5) (push) Successful in 1m9s
tests / browser (firefox, firefox) (push) Successful in 4m20s

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
This commit is contained in:
Andreas Reinhold / reini
2026-09-13 08:26:54 +02:00
co-authored by Claude Opus 5
parent bf00e4c40a
commit f90695cedd
22 changed files with 1603 additions and 1 deletions
+18
View File
@@ -0,0 +1,18 @@
{{-- One tab's panel, inside `<x-tabs>`, which draws the bar from its own `tabs` list. Shown while
its `name` is the chosen one; every panel is rendered, so switching never waits on the server.
`class` lands on the panel (it has `pt-6` above its content by default). --}}
@props([
'name',
])
<div
x-show="selected === @js($name)"
role="tabpanel"
x-bind:id="tabsId + '-' + @js($name) + '-panel'"
x-bind:aria-labelledby="tabsId + '-' + @js($name)"
tabindex="0"
{{ $attributes->class(['pt-6 outline-none']) }}
>
{{ $slot }}
</div>