Steps
步骤条，引导用户按流程完成任务。组合式 API（<Steps><Steps.Step/></Steps>），严格对齐 Semi Design：支持横向/纵向、fill/basic/nav 三型、迷你尺寸、每步独立图标/状态、连接线开关（hasLine）与 onChange 切换。
如何引入
import { Steps } from '@chenzy-design/svelte';默认步骤条（fill）
fill 为块状步骤条（默认类型），process 态整块背景高亮。
简单步骤条（basic）
设置 type="basic" 显示为简洁风格步骤条。
导航步骤条（nav）
设置 type="nav" 显示为导航风格步骤条，不支持交互，宽度按内容撑开。
迷你尺寸
设置 size="small" 显示迷你尺寸步骤条（basic/nav 型生效）。
basic 迷你尺寸（size="small"）：
- 步骤 1，共 1 步，已完成已完成这是一段描述
- 步骤 1，共 1 步，已完成进行中这是一段描述
- 步骤 1，共 1 步，已完成等待中这是一段描述
处理进度
配合内容及按钮使用，表示一个流程的处理进度。
- 步骤 1，共 1 步，进行中First
- 步骤 1，共 1 步，进行中Second
- 步骤 1，共 1 步，进行中Last
First-content
竖直方向
设置 direction="vertical" 使用竖直方向的步骤条。
fill 竖直方向： basic 竖直方向：
指定步骤状态
使用 status 属性指定当前步骤的状态（如 error）。
自定义图标/状态
通过每步 status 自定义状态、icon 自定义图标（字符串或 Snippet）。
onChange 回调
onChange 接收 number 参数（等于 initial + index），用于实现处理进度。
起始序号 initial
通过 initial 设置起始序号偏移，onChange 参数等于 initial + index。
initial=2：起始序号从 3 开始记数，onChange 参数 = initial + index。
每步自定义 class/style
每步支持 class / style / ariaLabel，对齐 Semi Steps.Step 的 className/style/aria-label。
每步支持 class / style / ariaLabel（对齐 Semi Steps.Step 的 className/style/aria-label）。
- 步骤 1，共 1 步，已完成已完成这是一段描述
- 步骤 1，共 1 步，已完成进行中这是一段描述
- 步骤 1，共 1 步，已完成等待中这是一段描述
API 参考
Steps
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
current | 受控当前步（从 0 计数） | number | undefined |
defaultCurrent | 非受控初始当前步 | number | 0 |
direction | 步骤条方向 | 'horizontal'|'vertical' | horizontal |
type | fill 为块状（旧版默认）、basic 为简洁型、nav 为导航型（不可交互） | 'fill'|'basic'|'nav' | fill |
status | 当前步状态 | 'wait'|'process'|'finish'|'error'|'warning' | process |
size | 尺寸（basic/nav 型生效） | 'small'|'default' | default |
initial | 起始序号偏移 | number | 0 |
hasLine | basic 型是否显示连接线（对齐 Semi hasLine） | boolean | true |
onChange | 切换步骤回调（参数为 initial + index）；传入时 fill/basic 型步骤可点击 | (current: number) => void | undefined |
class | — | string | '' |
style | 容器内联样式（对齐 Semi style） | string | undefined |
ariaLabel | 容器 aria-label（对齐 Semi aria-label） | string | undefined |
children | 内嵌 <Steps.Step> 列表 | Snippet | undefined |
Accessibility
| ARIA role | list |
| 键盘交互 | TabArrowLeftArrowRightArrowUpArrowDownHomeEndEnterSpace |
- 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) | 步骤条辅助描述文本颜色 - 悬浮态 |