every tool reachable.
Tab enters once. Arrow keys move within the set. Home and End jump to the edges.
components / 32
marked toolbar
tools should remember what the hand chose. focus leaves briefly; toggles stay marked until the state changes.
shadcn
npx shadcn@latest add berkantay/cheez/marked-toolbarlive
last action: waitingformat without losing the page
draft / 07
tools should feel close to the thought.
use left and right arrows inside the toolbarink
size
character
activebold
<MarkedToolbar aria-label="formatting" tone="orange" size="medium">
<MarkedToolbarGroup>
<MarkedToolbarButton pressed={bold} onPressedChange={setBold}>bold</MarkedToolbarButton>
<MarkedToolbarButton pressed={italic} onPressedChange={setItalic}>italic</MarkedToolbarButton>
</MarkedToolbarGroup>
<MarkedToolbarSeparator />
<MarkedToolbarInput aria-label="zoom" defaultValue="100%" />
<MarkedToolbarLink href="/help">help</MarkedToolbarLink>
</MarkedToolbar>orientation
arrow direction follows orientationthe same grammar turns ninety degrees
every tool reachable.
reference
Base UI behavior, Cheez stateapi
| part | prop | type | default | purpose |
|---|---|---|---|---|
| Root | orientation | "horizontal" | "vertical" | "horizontal" | roving focus direction |
| Root | loopFocus | boolean | true | wrap focus at each end |
| Root | disabled | boolean | false | disable every control |
| Root | tone | MarkedToolbarTone | "orange" | outer frame ink |
| Root | size | small | medium | large | "medium" | control density |
| Root | character | CheezCharacter | "calm" | drawing pressure |
| Button | pressed | boolean | — | persistent toggle state |
| Button | onPressedChange | function | — | toggle callback |
| Button | focusableWhenDisabled | boolean | true | keep disabled item discoverable |
| Button | tone | "default" | "danger" | "default" | destructive treatment |
| Link | href | string | — | native destination |
| Input | defaultValue | string | — | toolbar-native text field |
| Separator | orientation | Orientation | opposite root | semantic group boundary |
behavior notes
- the toolbar exposes one tab stop and uses arrow keys for internal focus
- pressed state is controlled and represented with aria-pressed
- disabled controls remain focusable by default so their labels stay discoverable
- links and inputs keep their native browser semantics
- orientation changes keyboard direction and separator direction together
- roving focus and disabled behavior come from Base UI
- no Framer Motion is shipped