Toolbar

Toolbar from @prepared911/ui/toolbar presents a compact floating strip of actions. The component supplies the floating container and sizing; your job is to apply the toolbar role with a label, give each control an accessible name, and let keyboard users reach every affordance. Toolbars default to linear Tab navigation. When the strip contains many items, apply a roving-focus pattern: In @prepared911/ui, a Popover or Menu trigger wrapped in ToolbarItem is one roving item: the toolbar keeps one tab stop, and Arrow Left / Right (mirrored in RTL), Home, and End move across triggers like any other item. Enter, Space, or a press opens the surface; Escape closes it and focus returns to the trigger, which stays the tab stop. For a menu, Arrow Down opens on the first row and Arrow Up on the last; Tab from an open menu closes it and returns focus to the trigger. A disabled button inside a trigger is skipped by the arrows; disabled on ToolbarItem also works and wins. Put menu triggers in a horizontal toolbar; in a vertical toolbar Arrow Down and Arrow Up open the menu instead of moving. When overflowLabel is set, the toolbar keeps one tab stop. Arrow Left and Arrow Right (mirrored in RTL), Home and End reach the overflow control at the inline end. Arrow Down, Enter and Space open the menu; Escape or choosing a row returns focus to the control. If the focused item moves into the menu, focus moves to the control. Hidden bar items are not tab stops and are skipped by arrow keys. The overflow control is a Button with a tooltip named by overflowLabel and keeps Button's forced-colors paint. At 400% zoom (320 CSS px) and other narrow widths, every action stays reachable through the bar or the menu when each item has an overflowItem.