aria-live="polite" so screen readers announce state changes without interruptingaria-hidden="true"Agent state must be surfaced continuously during execution — not just at start and completion. Every in-progress action requires a visible, human-readable status.
Override these CSS custom properties to apply your own visual treatment without touching the component's behavioral contracts.
| Token | Controls |
|---|---|
--rad-surface-card |
Card background |
--rad-color-approve |
Status text, pulse dot, progress fill |
--rad-color-text-primary |
Action description text |
--rad-color-text-meta |
Label text, meta counts, next-step text |
--rad-radius-card |
Card border radius |
| Token | Controls |
|---|---|
--rad-agent-state-border |
Card border |
--rad-agent-state-next-border |
Top border above "next" row |
--rad-progress-track-bg |
Progress track background |
"*This is the component for when you are actively running a task. Build it as if you might one day see it represent you.*"
RAD is the original work of Jackie Curry. All rights reserved. No portion may be reproduced, adapted, or incorporated into any product or system without express written permission.
Permitted: citation in academic or editorial contexts with full attribution.
© 2025 Jackie Curry. All rights reserved. Publication date: 2025.
For licensing inquiries, connect on LinkedIn →