Components · library

Eighteen parts, two themes

React components in components/, styled entirely by tokens, flip data-theme="dark" and everything follows. Live demos below run the real library; use the theme toggle in the header to inspect both modes.

§ 1 · Forms

Button, IconButton, Input, Select, Checkbox, Radio, Switch

Spec	Value
Control heights	sm 28 · md 36 · lg 44 (--control-h-*)
Button variants	primary (accent) · secondary (outlined) · ghost · danger, one primary per view
Focus	outline: 2px var(--focus-ring); outline-offset: 2px
Hover / press	Background shifts one surface step; no opacity fades, no transforms

§ 2 · Display

Card, Badge, Tag, Tooltip

The Card label prop renders the mono provenance tag, use it wherever a surface traces to a requirement, action id, or spec section. Badges are outlined mono uppercase: states, never decoration.

§ 3 · Navigation

TopNav, SideNav, Tabs

§ 4 · Data

Table, Stat

§ 5 · Feedback

Dialog, Toast

Every state-mutating agent action is human-gated through a Dialog carrying its provenance label (NFR-AI-1). Toast copy states the fact and the consequence: "Signature mismatch. Ingest halted."

§ 6 · Usage

Consuming the library

<link rel="stylesheet" href="styles.css">          <!-- all tokens + fonts -->
<script src="_ds_bundle.js"></script>               <!-- compiled components -->

<Button variant="primary" onClick={seal}>Seal object</Button>
<Card title="Key rotation" label="NFR-PQ-4">…</Card>
<Badge tone="success">Sealed</Badge>

Full props live in each component's .d.ts beside the source in components/.