storyboard stepper
StoryboardStepper is the work package's compact narrative sequencer. It lets case-study pages reveal a short ordered story one step at a time while staying on the work interaction panel styling.
| field | value |
|---|---|
| group | work |
| import | @arieare/ds-work |
| source | packages/ds-work/src/StoryboardStepper.tsx packages/ds-work/src/work-ds.css |
build loop
1/4
audit
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. |
--ds-button-primitive-border-color / --ds-button-primitive-bg / --ds-button-primitive-text-color | @arieare/ds-work/work-ds.css | Defines the primitive button surface, border, and text color. |
--ds-button-primitive-font-size / --ds-button-primitive-letter-spacing | @arieare/ds-work/work-ds.css | Controls the compact uppercase label rhythm. |
--ds-control-button-* | @arieare/ds-work/work-ds.css | Optional control-button overrides layered on top of the primitive button contract. |
props
| prop | type | default | description |
|---|---|---|---|
title | string | — | Header label shown above the active step. |
steps | string[] | — | Ordered story steps rendered one at a time. |