Four shapes with four fixed meanings (Law 4): chevron=direction, notch=state, wedge=focus, arrow-rail=sequence. Max 15° off-axis.
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.
Primary action with the signature mechanical snap-press; secondary 'controls' variant for utilities.
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).
Month calendar grid — role=grid with roving tabindex (arrows move day/week, PageUp/Down step months, Enter/Space select). Fully controlled, SSR-safe (month + today injected, never read from the clock).
Square checkbox and radio (radius 0); checked fills to --sig-work with an --on-sig mark.
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).
A styled native date/time input (datetime-local / date / time) — the browser owns the picker, keyboard, and locale.
File dropzone over a real native <input type=file> — 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.
Label + control + hint/error wrapper; error state shows a non-color ✗ marker.
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.
Number input with −/+ steppers, clamped to min/max; the native input keeps its own keyboard.
One-time-code / PIN entry — N single-digit cells acting as one field; typing advances, Backspace steps back, arrows move, paste fills across. role=group with per-cell labels.
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.
Native select styled to the chassis.
Styled native range input — square track + thumb, keyboard for free (arrows, Home/End, PageUp/Down).
button[role=switch] toggle; on = --sig-done track.
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.
Single-line text input on a recessed board surface; square, inked, focus-ringed.
Multi-line text input; vertically resizable.
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.
Navigation trail — an aria-hidden "▸" separator between crumbs (override with `separator`); the last crumb is the current page (aria-current).
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.
Controlled pager — prev/next plus a windowed run of page numbers with ellipses; current page keyed and aria-current.
Primary navigation — persistent left chassis; active item keyed to accent, count badge to its state.
Single-select connected button bar (role=radiogroup, roving tabindex; ←/→/Home/End). Same semantics as a radio group, distinct connected visual.
Numbered progress indicator for a multi-step flow — ordered list with done/active/upcoming states; current step carries aria-current, optional navigable step buttons.
Tab strip (role=tablist) with a keyed underline on the active tab; scalar active-index state.
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 ⌘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.
An edge sheet on the native dialog (focus-trap + Esc + backdrop) — slides from the left or right, full height. For detail/inspector panels.
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.
Native <dialog> modal; browser owns focus-trap, Esc, and backdrop.
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.
Transient status readout keyed to a machine signal; err announces assertively.
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.
Hint bubble revealed on hover/focus; role=tooltip wired via aria-describedby, pure-CSS reveal.
Collapsible sections — header buttons (aria-expanded + aria-controls) reveal region panels. single = exclusive; ↑/↓/Home/End move between headers.
The only legal host for texture (Law 6) — a physical instrument enclosing a recessed, halftoned screen.
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 <table>) so virtualization offsets cleanly across all targets.
Key → value readout (dl/dt/dd) on a two-column grid — mono/label keys, data-register values. For detail panels.
The dashboard chassis — composes the nav rail and a board (masthead/hero + panels).
A composed instrument bay — eyebrow, ghost index, title, lede, body and a pinned footer; the system's workhorse surface.
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.
Inline callout keyed to a signal (work/wait/done/err) — a left brush-bar in the signal hue, optional dismiss. err announces assertively (role=alert).
A compact standalone tag/label keyed to a signal (Law 2); defaults to done; stamp-in when added.
The house glitch for failure — vertical downward bleed in --drip over a --sig-err field. Errors only.
Zero-data (calm) and failure (error keying + drip) fallbacks for any panel — must not look alike.
A grid of uniform state-keyed tiles that reads as one instrument, not competing stages (Law 2).
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.
Relative-time display ("5m ago") as a semantic <time>; the clock is injected as a prop so SSR and client agree (no hydration flicker).
One row of a live list — the densest unit; calm at rest, one-shot glitch on a real state change.
Severity glyph — polygon side-count encodes danger/focus (fewer sides = more urgent); a shape channel beside colour (Law 4).
Loading placeholder — a blocky pulse (never rounded). Sizes: --line, --text, --block; give it a width inline.
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.
The smallest state readout — a square keyed to the signal ramp, with an aria-label naming the state.
Inline status label inside dense content; variants map to the signal ramp.
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.
Seeded ASCII/Unicode density field (braille/block/ramp) for dead space — whisper contrast, aria-hidden, mask-faded off content.
Character-flavored detail utilities: .cr-sep / .cr-sep-label box-rule separators (dashed/dotted, labeled), .cr-list ascii-marker lists (▸ · » +), and .cr-leader dot-leader rows (label ····· value).
recent events
Slide carousel with the WAI-ARIA carousel pattern — labelled region, prev/next, dot indicators, aria-live viewport, ←/→ navigation. Controlled via index/onIndex.
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.
Seeded Bayer 4×4 ordered dither / halftone field — hardware surfaces only (Law 6); the genuine texture the CSS tokens approximate.
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.
Identity+state sprite: fur/markings from the session id, pose from state; deterministic paint() to canvas.
Seeded cyber-sigil — a retro-futuristic pixel glyph generated from a seed; optional state keys the hue.
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.
Categorical bar chart — baseline-anchored bars with rounded data-ends, a 2px surface gap, optional dashed target line, monospace value/category labels.
Time-series line chart — recessive grid, non-scaling 2px lines, a data-end dot per series, tick labels and a legend for ≥2 series. One y-axis only.
Inline micro line/area chart for a KPI or table cell — no axes, a crisp non-scaling 2px stroke, a data-end dot. Stretches to fill its box.
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.
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 region that keys to the state needing attention; keys to --stage when calm.
The stark title card — page identity and headline state in the display register; optional drip host.
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.