Progress Steps
An ordered list in a nav, not a row of divs — so the count and the position come free, and aria-current names the step you are on. Horizontal and vertical, because four labels do not fit on a phone.
A primitive is one control you drop into a form or a toolbar — a segmented control, an input with an addon, a tag field.
6 of the 54 primitives in the catalog. Every one is a single file of plain markup and Tailwind classes — paste it and it works.
An ordered list in a nav, not a row of divs — so the count and the position come free, and aria-current names the step you are on. Horizontal and vertical, because four labels do not fit on a phone.
One tab stop for the whole tree, with the ARIA tree keyboard contract in full — including typeahead and the arrow keys mapped through the reading direction.
One tab stop for the whole list, arrow keys mapped through the reading direction, and a manual-activation mode so arrowing past five expensive panels does not fire four requests nobody asked for.
The trail back up, with the current page as text rather than a link to itself, and a long middle that collapses to a button that announces what it hides and hands focus to the first revealed crumb.
A page window that keeps its width while you page and never draws an ellipsis for a single page — as real links when you pass getHref, so a listing stays crawlable and works without JavaScript.
Buttons inside real headings, with panels that stay mounted so aria-controls resolves and go inert when shut so Tab cannot walk into invisible content — animated by a grid-row transition, off under reduced motion.