role="region" with aria-labelaria-hidden="true" on each number spanaria-expanded and aria-controls:focus-visible outlinesExplanations must be surfaced at point of decision, not buried in documentation. Users should never have to leave the interface to understand why the AI acted.
Override these CSS custom properties to apply your own visual treatment without touching the component's behavioral contracts.
| Token | Controls |
|---|---|
--rad-surface-card |
Popover background |
--rad-color-approve |
Header label, step numbers, link color |
--rad-color-text-secondary |
Step body text |
--rad-color-text-meta |
Dim link color |
--rad-color-focus |
Focus ring color |
--rad-radius-card |
Popover border radius |
| Token | Controls |
|---|---|
--rad-popover-border |
Popover border |
--rad-popover-footer-divider |
Footer rule above links |
"*When you write example copy for this component, "The AI decided this because it is very smart" is not an acceptable explanation. Use specifics.*"
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 →