Generated from catalog/catalog.json — 83 components across 11 categories. Prose specs live in the Component Library; see every component rendered and exercised in all its states in the Component Browser. This page is the queryable index (also emitted as machine-readable catalog.json).
WAI-ARIA toolbar — a labelled group of controls with a single tab stop and roving-tabindex arrows. Two modes: wrap your own controls as children, or pass items[] and (with overflow) collapse the buttons that don’t fit into a “⋯ more” menu (priority+, measured via ResizeObserver).
While the reveal key (default Alt) is held, sets data-cr-keys on the root so every secondary key hint fades in at once (a peek-all-shortcuts gesture). Pass hints to also render a shortcut legend: + joins a chord (“Ctrl+K”), a space joins a sequence (“g p”), and the two are drawn differently — a + glyph vs a “then” separator. Each binding carries a spoken aria-label and the keycaps are aria-hidden; aria-keyshortcuts is emitted only for single-step bindings, since ARIA reads a space there as “or” rather than “then”. With no hints it renders nothing visible.
A single composition bar (“stacked progress”) — signal-toned segments sized by share, with a 2px surface gap and a legend (label · value · %). Compose several for a comparison.
Grouped choices for both types, rendering CrChoice. type=“radio” is a radiogroup of native radios sharing one name (browser-supplied roving tabindex + arrow selection); type=“checkbox” is a group of independently tabbable boxes with arrows inert.
Autocomplete — an input (role=combobox) filtering a listbox; ↑/↓ move the active option (aria-activedescendant), Enter selects, Esc closes. Active row shows an ascii ▸ marker.
A proper cron-expression form field: label + input + quick presets + a live human-readable readout. The translation is injected as description (compute with cronstrue in the host) so the design system stays dependency-free; validity is message-driven via error (no hand-set invalid), wired like CrField (aria-invalid + aria-describedby).
File dropzone over a real native — click/keyboard opens the picker, drag-drop is accepted, dragover is announced via data-state. Selected files listed.
Schema-driven form. Feed it a Form Model + a validate() function (built by the headless forms core from an ArkType type OR a JSON Schema) and it renders and validates the whole form — value/touched/error state, validate on blur + submit, re-check on change once touched.
An input flanked by decorative prefix / suffix addons (protocol, currency, unit). Addons are aria-hidden; give the field a label. For a validated field use Field or Form.
Star-rating control — a radiogroup with roving tabindex (interactive) or an inert score readout (readonly). Geometric-glyph marks (no icon font); fill encodes the value.
Token entry — Enter or comma adds a tag, Backspace on an empty field removes the last, each tag has a labelled remove button. role=group; duplicates ignored.
Interactive multi-select filter pill (role=checkbox). Distinct from the static Chip and single-select Segmented; several toggle independently. On/off announced via aria-checked + data-state.
Image with an initials fallback and optional presence dot. With a src it’s an img[alt=name]; without one the wrapper is role=img[aria-label=name] over the initials.
The one sanctioned rule-break per screen (Law 9) — soft corner, colour glow, blurred blob, optional gradient wash — to spotlight the single most exceptional item.
A dense, VIRTUALIZED data grid for large datasets: only the rows in (or near) the viewport are in the DOM, so thousands of rows scroll smoothly. Fixed row height; sortable headers (asc → desc → none, stable); optional row selection (checkbox column + select-all + aria-selected); sticky header; grid a11y (role=grid/row/columnheader/gridcell, aria-sort, aria-rowcount). Div-grid (not a ) so virtualization offsets cleanly across all targets.
Two panes with a draggable divider. Panes are children (CSS-grid sized); the handle is a WAI-ARIA window splitter (role=separator, focusable, aria-valuenow, arrow/Home/End keys). Pointer-capture drag.
A container with cross-browser styled scrollbars (thin, inked, neon thumb) that keep the Control Room look. Keyboard-scrollable; with a label it’s a named role=group.
Dense operator table on the same chassis as a panel; mono/label headers, data-register cells. Optional column sort, row selection (checkbox + aria-selected), and a sticky header.
Seeded instrument chrome strip — a pixel-art metal bar with a deterministically varied graduated scale, panel seams, registration mark, wear scratches, and an indicator LED.
The FUI/decoration utility layer for dead space and chassis edges: styled scrollbar, tick-ruler edge, whisper drafting field, hazard stripe, and the Breach blur-blob. All aria-hidden, non-interactive, whisper contrast — never on a content field.
The house operational glyph set — 24×24, currentColor, single 2px stroke, square caps to match the neobrutalist geometry. Decorative by default; pass a label to name it.
Seeded NERV-style decorative telemetry string (hex id, byte, channel tag, mini bar) for a frame corner. Decoration, not data — every field is unitless so it cannot be mistaken for a real measurement.
An a11y-correct “+N more” disclosure for truncated lists; a button (aria-expanded) with onToggle, or an inert count. The accessible name always includes the noun.
Numbered progress indicator for a multi-step flow — ordered list with done/active/upcoming states; current step carries aria-current, optional navigable step buttons.
Hierarchical tree (role=tree) for nested data like a worker→session fleet. Rendered as a flat list of visible rows; full keyboard nav (arrows expand/collapse/step, Home/End) and aria-level/aria-expanded.
A rich hover/focus card for structured content (Tooltip is for plain text, Menu for actions). CSS-driven reveal with an open delay; the trigger is focusable so keyboard users get it too.
Dropdown menu — a trigger toggles a role=menu panel; a transparent full-viewport scrim closes it on outside click (no global listeners). Optional danger items.
A ⌘K command palette on the native dialog (focus-trap + Esc + backdrop). The input is a combobox driving a listbox — focus stays in the field while ↑/↓ move the active option (aria-activedescendant), Enter runs it; live query filter with per-command keycap hints.
Generic anchored overlay for arbitrary content — a trigger toggles a floating panel; scrim closes on outside click, Esc closes and returns focus. Use Menu for a list of actions.
A fixed screen anchor that stacks live toasts (parent owns the list). Each row is its own live region — err announces assertively — so nothing double-announces. Consecutive toasts with the same message and signal pack into one row with an aria-hidden ×N counter, so a repeat updates the count instead of re-announcing. Bottom anchors stack newest nearest the edge.
A keycap badge for a keyboard shortcut. Decorative (aria-hidden) — the real binding rides aria-keyshortcuts on the action. Main actions show it always; secondary use the hint variant, revealed on host hover/focus or a global peek.
Task progress and capacity / utilisation (role=progressbar) — determinate fills to value/max; indeterminate runs an animated hazard sweep. An optional label renders inline before the track.
Indeterminate loading indicator — role=status with an accessible label; the cells are aria-hidden and honour reduced-motion. signal keys the cells to the canonical vocabulary. For a known fraction, or a static capacity reading, use Progress.
Vertical event timeline — an ordered list of moments on a rail, each with a signal-coloured node, machine time, title and optional detail. Presentational; node colour is the semantic signal.