Steps 设计文档
步骤条，引导用户按流程完成任务。组合式 API（<Steps><Steps.Step/></Steps>），严格对齐 Semi Design：支持横向/纵向、fill/basic/nav 三型、迷你尺寸、每步独立图标/状态、连接线开关（hasLine）与 onChange 切换。
← API 文档使用建议
步骤条，引导用户按流程完成任务。组合式 API（<Steps><Steps.Step/></Steps>），严格对齐 Semi Design：支持横向/纵向、fill/basic/nav 三型、迷你尺寸、每步独立图标/状态、连接线开关（hasLine）与 onChange 切换。
Accessibility
ARIA role：list
- ol/li 结构
- 可点击（fill/basic + onChange）时每步为原生 button，roving tabindex 单 Tab 停靠点
- 当前步 aria-current=step
- 图标 ✓/✕/⚠ 用 aria-hidden；状态靠视觉隐藏文本（.cd-sr-only）与 aria-current 表达（WCAG 1.4.1）
- 连接线 aria-hidden=true；nav 型外包 nav[aria-label]
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-color-steps-bg-active | var(--cd-color-fill-1) | 步骤条背景 - 按下态 |
--cd-color-steps-bg-default | var(--cd-color-text-2) | 未到达步骤条图标背景（fill 型 wait 态左侧图标底） |
--cd-color-steps-bg-hover | var(--cd-color-fill-0) | 步骤条背景 - 悬浮态 |
--cd-color-steps-border-default | transparent | 步骤条描边 - 默认（fill 型 item 外框） |
--cd-color-steps-danger-text-active | var(--cd-color-danger-active) | 错误步骤条文本颜色 - 按下态 |
--cd-color-steps-danger-text-default | var(--cd-color-danger) | 错误步骤条文本颜色 - 默认态 |
--cd-color-steps-danger-text-hover | var(--cd-color-danger-hover) | 错误步骤条文本颜色 - 悬浮态 |
--cd-color-steps-icon-after-bg | var(--cd-color-fill-2) | basic 垂直型图标下方连接线颜色（wait 段） |
--cd-color-steps-icon-default | var(--cd-color-text-2) | 未到达步骤条图标颜色（fill 型 wait 态图标） |
--cd-color-steps-item-description-text-hover | var(--cd-color-focus-border) | 步骤条辅助描述文本颜色 - 悬浮态 |