步骤条 Stepper
展示有先后顺序的流程与当前所处位置。纯 HTML，状态由业务代码写入。
侧栏步骤条
多步骤表单（公司注册、开通收单）的桌面端侧栏：进度百分比 + 进度条 + 步骤列表。
examples/stepper/sidebar.html
| 状态 | 写法 | 效果 |
|---|---|---|
| 已完成 | 普通 <button>，序号换成 check 图标 + sr-only「已完成：」 | 可点击返回修改 |
| 当前 | aria-current="step" | 深蓝底白字 |
| 未开始 | disabled | 次要色、不可点击 |
样式全部由 aria-[current=step]:*、disabled:*、group-aria-[current=step]:* 表达，改状态只需要改属性。
横向步骤条
移动端或页面顶部，空间不足时横向滚动。
examples/stepper/horizontal.html
v2 的做法是同一份列表在 lg 以下切换为横向：flex gap-1 overflow-x-auto lg:flex-col lg:overflow-visible，并在切换步骤时把当前项滚动到可见区域。
流程说明
营销页中介绍服务流程，不表示进度。
examples/stepper/process.html
使用建议
推荐
- 步骤 3–5 个；步骤名用名词或动宾短语：「填写资料」「付款」
- 允许返回已完成的步骤修改，不允许跳到未开始的步骤
避免
- 用颜色作为唯一的状态区分（已完成项加图标，当前项加
aria-current）
无障碍
- 步骤列表使用
<ol> - 进度条：
role="progressbar"+aria-valuenow/aria-valuemin/aria-valuemax
与 v2 的差异
| v2 现状 | 规范 |
|---|---|
当前步骤只靠背景色区分，没有 aria-current | 加 aria-current="step" |
| 已完成与未开始的序号样式相同 | 已完成显示对勾 |
| 进度条没有 ARIA 语义 | role="progressbar" |