implementation
Components
Every primitive below is the built package, installed the way a product installs it. Isolation and state matrices live in Storybook. A break in the published shape appears here first.
core
The system’s action control. Square, hairline-bordered, mono-labeled. One accent-filled primary per view, never two. Countdown holds a destructive click until T-0; abort or Escape to halt.button→A state word with a mark. Color is never the only carrier; the marker is aria-hidden so the word is the name.badge→Phosphor glyphs at 15 or 30, currentColor. Decorative by default; a label makes it an image.icon→An action with no visible text. label is required and becomes both aria-label and tooltip title.icon-button→A shortcut as glyphs, not a sentence. Modifier names resolve to the faces that carry them.key-hint→Terminal square-wave block. 1060ms. The caret, and the loading mark that is not a spinner.cursor→Four-position mechanism. | / - \. Never a circle, never a shimmer.spin→A blinking asterisk. Telemetry flag: the number stays, the star marks it live. Not the star field, not a required mark.star→Ellipsis. Waiting, not working. Three steps on --dur-tick.wait→A labeled region. Hairline frame, uppercase caption, optional meta and actions on the right.panel→A region divide. The same --rule hairline as a native hr, with separator semantics. Not a table row.separator→A labeled empty. Dashed hairline, lightest lattice. A box without a caption is a mystery.vacant→A category chip. Data series 1–5, never a semantic tone — a tag is not a state.tag→
forms
A single-line field. Mono by default; prefix and suffix sit inside the same hairline.input→A numeric setting with steppers and clamp. Locale-aware parse; scrub is a part, not the default.number-field→A multi-line field. Same tokens as input, taller, resize vertical only.textarea→Label, control, hint or error. Invalid hides the hint. Side is a grid, not a floated caption.field→A named group of related controls. Legend is a caption, not a field label. Disabled disables every descendant.fieldset→A native form. Field name is the submit key; a control name is not enough. Primary action is type=submit.form→A labeled check. The box is the control; the word is the name. In a group it takes value, not name.checkbox→A set of checks. Group owns the array; each checkbox takes a value, not a name.checkbox-group→One choice from a set. Group owns the value; each radio owns its label.radio→A listbox behind a field. Options are values and labels; the parts take children when a menu needs groups.select→Two named states, not on and off. Neither side is off. On a form it sits in a named Field.switch→A mutually exclusive set drawn as one control. The selected segment is a fill, not a shadow.segmented-control→
data
Source as a specimen. Label and language in the head; the body is pre, not a highlight theme.code-block→Parallel streams. A series-colored prefix names the source; the message stays the body color. Beyond five sources, stop coloring.log→A combobox that filters a list. Count and clear sit in the field, not beside it.filter-field→A readout list. Values are tabular; a tone reports state, never emphasis.key-value→Rows on a hairline. Markup is a table; the class is the system. No React primitive — behavior is the browser’s.table→Capacity as cells, not a tinted bar. The fill is the accent; the value is a quantity, not a state.meter→A task with an end. Same cells as meter; the fill is the accent, never a hue of the value.progress→
feedback
Annunciator. Live blinks on --dur-tick; held is still. Motion is never the only carrier.lamp→An inline notice. Tone reports state; the glyph is aria-hidden so the title is the name.callout→A modal task. Present or not — no enter or exit fade. Scrim, chrome, body, footer.dialog→A destructive confirm. Same frame as dialog; the trigger is usually danger.alert-dialog→A transient confirmation. Requires the overlay provider; this site copies tokens with a live region instead.toast→A hover label. Delay is zero in this system — a tooltip that waits reads as lag.tooltip→
nav
A path, uppercase, hairline separators. The current page is text, not a link.breadcrumb→A view switch. The active tab sits on a 2px accent-mark; counts are muted.tabs→The frame’s index. Section labels uppercase; the current item is a surface step.sidebar-nav→A subsequence filter over commands. Open from a trigger; close on a value.command-palette→Completions after a slash. A slash mid-word is a literal slash.slash-menu→