A toolbar somebody would actually ship

Four groups and a split button, doing the four jobs a real editing bar has: actions that just happen, one-of-N that changes the view, independent toggles that change the text, and a default action with alternatives behind it. Everything below the fold is the same components taken apart.

Undo Redo List Grid Board Bold Italic Underline Save

The quick brown fox jumps over the lazy dog.

Four widgets, four Tab stops — not eleven. Tab moves between the groups; the arrows move inside one. That is the whole reason a group is an element rather than a `div` with buttons in it, and it is the single most common accessibility failure in component libraries because it is invisible to anyone testing with a mouse.

The sample paragraph really changes. Formatting toggles restyle it, the view control relabels it, and the split button's menu reports which alternative you chose — because a control that only writes to a log has not demonstrated anything a reader could not have assumed.

Button group

Three widgets in one tag. One Tab stop; arrow keys move within it, Home and End jump to the ends, disabled items are skipped.

Toolbar — related actions, no selection Cut Copy Paste Undo
Segmented control — one of N List Grid Board
Multiple selection — independent toggles
Vertical, and unattached
Overview Members Billing Approve Reject

Guards work inside a group for free: the rejected button stops the click inside its own shadow root, so the group never sees it.

Split button

A default action joined to a menu of alternatives — and the menu is bmx-menu, delegated rather than duplicated, so it cascades and it is in the browser's top layer.

Save Export Archive

Keyboard: Down or Up opens the menu, arrows move, letters search, Right opens a submenu, Enter chooses, Escape closes one level, Tab dismisses. Export has two levels — an entry with its own items is a submenu, so a second level is data rather than markup, and the event reports the route to what was chosen rather than only its position in the list it sits in. Keep them shallow: a split button is a short list of alternatives to one obvious action, and a menu deep enough to need navigating is a sign the obvious action is not obvious.