{
  "slug": "steplist",
  "end": "css",
  "curated": true,
  "summary": "CSS 端的 steplist：.kole-steplist-item 是步骤，.kole-steplist-node 是序号圆，三态只换节点与线色。",
  "usage": [
    "步骤项 .kole-steplist-item 是 position:relative 的 flex 行，23px 间距由 gap:12px 给，下留 20px 作为连接线空间（frameworks/StepList.css:4）。",
    "连接线 .kole-steplist-line 是绝对定位的 2px 竖线，写死 left:14px、top:32px，靠 :last-child 隐藏最后一项的线（frameworks/StepList.css:5、7）。",
    "序号圆 .kole-steplist-node 是 28px 圆形两像素描边，z-index:1 压在连接线上方（frameworks/StepList.css:8-9）。",
    "三种状态只改节点与线的颜色：is-done 节点填品牌色加反色字且线也转品牌色，is-active 只换品牌边框并加 3px 光晕，is-error 节点与线都转错误色（frameworks/StepList.css:16-20）。",
    "可点状态必须显式加 .is-clickable：它给出 pointer 光标与标题的悬停品牌色（frameworks/StepList.css:13-14）。",
    "水平模式给根元素加 .is-horizontal：根变 flex、步骤项改纵向排列等分，连接线由竖转横（高度 2px、left/top 重算）（frameworks/StepList.css:23-26）。",
    "文本层级用 .kole-steplist-title（14px 字重 500）与 .kole-steplist-desc（13px 次级色）（frameworks/StepList.css:11-12）。"
  ],
  "bestPractices": [
    "连接线的 left:14px 是按 28px 节点居中算出来的（左侧 14px 处正是圆心），节点尺寸一改这条要同步，否则线不在圆心上（frameworks/StepList.css:5、9）。",
    "水平模式下线的定位选择器很长（>.kole-steplist-item > .kole-steplist-line），说明线必须是步骤项的直接子元素；包一层 wrapper 会让水平线失效（frameworks/StepList.css:25）。",
    "is-active 是唯一不给节点填色的状态（只换边框加光晕），它与 is-done 的区分靠这一点，别给 active 也填色以免两态混淆（frameworks/StepList.css:18）。"
  ],
  "a11y": [
    "步骤列表建议用 ol/li 承载，样式层只提供节点与连线外观（frameworks/StepList.css:4）。",
    "三种状态只有颜色与填充差异，需要配合文字（如“已完成”）或 aria-current 才能被读屏理解（frameworks/StepList.css:16-20）。",
    "is-clickable 才给 pointer 光标，但可聚焦性仍需业务侧提供 button 或 tabindex（frameworks/StepList.css:13-14）。"
  ],
  "apiCarrier": {
    "kind": "classes",
    "note": "CSS 端无 props：载体是 .kole-steplist（根）、.kole-steplist-item（步骤）、.kole-steplist-line（连接线）、.kole-steplist-node（序号圆）、.kole-steplist-body / -title / -desc（文本区）；状态 is-done / is-active / is-error / is-clickable / is-horizontal。",
    "table": [
      {
        "name": "kole-steplist",
        "type": "类名",
        "desc": "在 frameworks/StepList.css 中定义的类；按类名组合表达该组件的外观与状态。"
      },
      {
        "name": "kole-steplist-item",
        "type": "类名",
        "desc": "在 frameworks/StepList.css 中定义的类；按类名组合表达该组件的外观与状态。"
      },
      {
        "name": "kole-steplist-line",
        "type": "类名",
        "desc": "在 frameworks/StepList.css 中定义的类；按类名组合表达该组件的外观与状态。"
      },
      {
        "name": "kole-steplist-node",
        "type": "类名",
        "desc": "在 frameworks/StepList.css 中定义的类；按类名组合表达该组件的外观与状态。"
      },
      {
        "name": "kole-steplist-body",
        "type": "类名",
        "desc": "在 frameworks/StepList.css 中定义的类；按类名组合表达该组件的外观与状态。"
      },
      {
        "name": "kole-steplist-title",
        "type": "类名",
        "desc": "在 frameworks/StepList.css 中定义的类；按类名组合表达该组件的外观与状态。"
      },
      {
        "name": "kole-steplist-desc",
        "type": "类名",
        "desc": "在 frameworks/StepList.css 中定义的类；按类名组合表达该组件的外观与状态。"
      },
      {
        "name": "is-clickable",
        "type": "类名",
        "desc": "在 frameworks/StepList.css 中定义的类；按类名组合表达该组件的外观与状态。"
      },
      {
        "name": "is-done",
        "type": "类名",
        "desc": "在 frameworks/StepList.css 中定义的类；按类名组合表达该组件的外观与状态。"
      },
      {
        "name": "is-active",
        "type": "类名",
        "desc": "在 frameworks/StepList.css 中定义的类；按类名组合表达该组件的外观与状态。"
      }
    ]
  },
  "resources": [
    {
      "file": "frameworks/StepList.css",
      "kind": "CSS",
      "desc": "该端实现（本页 API 与用法的唯一权威来源）。"
    }
  ],
  "exampleIds": [
    "steplist-ex-1"
  ],
  "notes": [
    "步骤项与连线见 frameworks/StepList.css:4-7，节点见 frameworks/StepList.css:8-9，三态见 frameworks/StepList.css:16-20，水平模式见 frameworks/StepList.css:23-26。",
    "is-horizontal 挂在根元素上（.kole-steplist.is-horizontal），其余状态挂在步骤项上，两层状态类作用对象不同（frameworks/StepList.css:23 与 16）。",
    "示例只写了 .kole-steplist 容器（site/examples/steplist.json），步骤与状态由脚本渲染。"
  ]
}