signal meter
SignalMeter is the work package's embedded maturity-scale interaction. It couples a range input with inline state labeling so narrative case-study copy can include a small live control without leaving the reading surface.
| field | value |
|---|---|
| group | work |
| import | @arieare/ds-work |
| source | packages/ds-work/src/SignalMeter.tsx packages/ds-work/src/work-ds.css |
system maturity
68
current state: integrated
component tokens
| token | source | description |
|---|---|---|
--ds-interactive-panel-bg | @arieare/ds-work/work-ds.css | Sets the translucent panel fill used by embedded interactions. |
--ds-interactive-label-color / --ds-interactive-value-color / --ds-interactive-note-color | @arieare/ds-work/work-ds.css | Controls type hierarchy across interactive labels, values, and notes. |
--ds-interactive-meter-bg / --ds-interactive-meter-progress | @arieare/ds-work/work-ds.css | Colors the interactive meter track and progress fill. |
props
| prop | type | default | description |
|---|---|---|---|
label | string | — | Panel heading and range aria-label. |
min / max | number | 0 / 100 | Range bounds used to clamp and display the current value. |
initial | number | 50 | Initial slider value before interaction. |
checkpoints | string[] | ["fragile", "forming", "stable", "scaling"] | State labels mapped across the range progress. |