1 viewer
Component · Content
Stat
Label/value/detail presentation for metrics.
- Category
- Content
- Slots
- 4
- States
- 3
- Writer
- Shared
Preview
- Network Nodes
- 76 Apps
- 100% healthy
- Memory RSS
- 8.14 GB
- mimalloc reclaimed
- WebSocket Bus
- Port 8788
- 0ms backlog
<Row gap="16px">
<Stat
detail="100% healthy"
intent="success"
label="Network Nodes"
value="76 Apps"
/>
<Stat
detail="mimalloc reclaimed"
intent="info"
label="Memory RSS"
value="8.14 GB"
/>
<Stat
detail="0ms backlog"
intent="good"
label="WebSocket Bus"
value="Port 8788"
/>
</Row>Variants
- Hash Rate
- 142 MH/s
- +12.4% vs epoch
- Network Latency
- 18 ms
- -4 ms peer delta
- Slippage Loss
- 0.02%
- -0.15% reduced
Anatomy
The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.
| Slot | DOM class |
|---|---|
| root | .primitive-stat |
| label | .primitive-stat__label |
| value | .primitive-stat__value |
| detail | .primitive-stat__detail |
- Modifier
- primitive-stat--{intent}
- State attribute
- data-intentfrom the intent prop
States and platforms
The states the contract publishes, the platforms it declares, and the style recipes that dress it.
States
Platforms
Recipes
Renderers
Every tag in the example above renders through a shared writer.
Declared adapters. A status is the manifest's declaration, not a measured parity result.
| Target | Renderer | Status |
|---|---|---|
| web | react | experimental |
| runtime-node | view-node | ready |
| ssr | html-semantic | ready |
| terminal | terminal-text | planned |
| native | native-adapter | experimental |
Accessibility
Semantic structure must stay available without visual styling.
- Expose meaningful names for interactive controls.
- Keep keyboard and pointer behavior equivalent where the platform supports it.
- Publish state with native semantics and data attributes where the adapter supports them.