{
  "slug": "steps",
  "end": "css",
  "curated": true,
  "summary": "步骤条样式：kole-steps 配方向类，每个 kole-step 用 is-finish/is-process/is-error/is-wait 表状态。",
  "usage": [
    "方向是加在根 .kole-steps 上的 .horizontal / .vertical，两者互斥且默认按行内排布。",
    "每个步骤 .kole-step 由 .kole-step-icon 序号圆、.kole-step-title、.kole-step-desc 与纵向模式的 .kole-step-body 组成。",
    "状态类写在 .kole-step 上：.is-finish 已完成、.is-process 进行中、.is-error 异常、.is-wait 待处理，连接线颜色随之变化。",
    "连接线由 .kole-step-icon 的伪元素绘制，纵向模式下改由 .kole-step-body 区域延续。",
    "状态色令牌：--kole-color-brand 表进行中，--kole-color-error 表异常，--kole-color-border 表未到达。"
  ],
  "bestPractices": [
    "状态类必须加在 .kole-step 上而不是内部图标上，图标内部没有对应的状态选择器。",
    "横向模式不要加 .kole-step-body，纵向模式的标题与描述才会跟随它换行排布。",
    "四个状态类互斥，最后一个步骤不要同时保留 .is-wait 与 .is-finish。"
  ],
  "apiCarrier": {
    "kind": "classes",
    "note": "CSS 端没有 props/emit/slot 契约：可交付的 API 就是类名组合（基础类＋变体类＋尺寸类）、`is-*` 状态类，以及 `--kole-*` 令牌。示例代码由 site/examples 提供，本文件只给 exampleIds。",
    "table": [
      {
        "name": "kole-steps",
        "type": "基础类",
        "desc": "步骤条根容器（frameworks/Steps.css:3）"
      },
      {
        "name": "kole-step",
        "type": "结构类",
        "desc": "单个步骤，状态类挂载点（frameworks/Steps.css:7）"
      },
      {
        "name": "kole-step-icon",
        "type": "结构类",
        "desc": "序号/图标圆，伪元素画连接线（frameworks/Steps.css:10）"
      },
      {
        "name": "kole-step-body",
        "type": "结构类",
        "desc": "纵向模式下承载标题与描述（frameworks/Steps.css:28）"
      }
    ]
  },
  "a11y": [
    "步骤是流程语义，建议宿主用有序列表或 role=list 承载，并把当前步通过 aria-current=step 播报。",
    "状态不能只靠颜色区分（进行中/异常的色差对色觉障碍用户不友好），标题文字里应带上状态词。",
    "序号圆形里的数字本身是文本，保持真实字符而非背景图。"
  ],
  "resources": [
    {
      "file": "frameworks/Steps.css",
      "kind": "css",
      "desc": "Kole UI 该组件的纯样式实现：类名与状态类的唯一定义处，含 :focus-visible / 令牌引用（frameworks/Steps.css）"
    }
  ],
  "exampleIds": [
    "steps-ex-1",
    "steps-ex-2"
  ],
  "notes": [
    "依据 frameworks/Steps.css:3 定义 .kole-steps",
    "依据 frameworks/Steps.css:7 定义 .kole-step",
    "依据 frameworks/Steps.css:10 定义 .kole-step-icon",
    "依据 frameworks/Steps.css:28 定义 .kole-step-body",
    "类名总表来自 frameworks/Steps.css（facts.consumedApi.classes，12 项），本端不消费 props/emits/slots：[] / [] / []"
  ]
}