Lift a bottom-placed toolbar above the navigation bar
`place="bottom"` ignored --material-bottom-bar, so a floating toolbar overlapped the shell's navigation bar and a docked one landed squarely on it. Both now clear it — max(), not a sum, since that height already swallows the bottom safe area — and the docs say what M3 says: never show a docked toolbar and a navigation bar together. Plan: docs/plans/material-3-alignment.md, step 14 (navigation N-02). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
co-authored by
Claude Opus 5
parent
4a4982b1ef
commit
700869ded4
@@ -7,6 +7,11 @@
|
||||
toolbar sits where it is written. A `fab` slot sets an `<x-fab>` beside a floating toolbar.
|
||||
`label` names it for screen readers.
|
||||
|
||||
A docked toolbar and a navigation bar occupy the same region of the screen and M3 says never to
|
||||
show both at once: the bar belongs on a primary page, the toolbar on a secondary or contextual
|
||||
one. Either way a toolbar placed at `bottom` clears `--material-bottom-bar`, so it is never
|
||||
buried under `<x-app-shell>`'s bar.
|
||||
|
||||
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). --}}
|
||||
|
||||
Reference in New Issue
Block a user