{
  "slug": "transfer",
  "end": "css",
  "curated": true,
  "summary": "穿梭框样式：左右两个 kole-transfer-panel，走 item 与 box 勾选，ops 中放操作按钮。",
  "usage": [
    "两侧面板都是 .kole-transfer-panel，含 .kole-transfer-head（标题与 .count 计数）、可选 .kole-transfer-search 搜索、.kole-transfer-body 列表。",
    "单条数据是 .kole-transfer-item，勾选标记用 .box 加 .is-checked，禁用项加 .is-disabled。",
    "中间操作区 .kole-transfer-ops 放移入移出按钮，与两侧面板同级。",
    "空列表用 .kole-transfer-empty 占位，列表底色与分割线取自 --kole-color-page-bg 与 --kole-color-border。"
  ],
  "bestPractices": [
    ".is-checked 加在 .box 上（勾选标记元素），加在 .kole-transfer-item 上不会变勾。",
    "搜索框是可选项，没有搜索需求时不要放 .kole-transfer-search，会多出一条分割线与高度。",
    "两侧面板结构完全同构，宿主用同一套模板渲染两侧可避免样式漂移。"
  ],
  "apiCarrier": {
    "kind": "classes",
    "note": "CSS 端没有 props/emit/slot 契约：可交付的 API 就是类名组合（基础类＋变体类＋尺寸类）、`is-*` 状态类，以及 `--kole-*` 令牌。示例代码由 site/examples 提供，本文件只给 exampleIds。",
    "table": [
      {
        "name": "kole-transfer",
        "type": "基础类",
        "desc": "根容器：左右面板横向排布（frameworks/Transfer.css:3）"
      },
      {
        "name": "kole-transfer-panel",
        "type": "结构类",
        "desc": "单侧面板：描边、圆角、纵向三段（frameworks/Transfer.css:4）"
      },
      {
        "name": "kole-transfer-search",
        "type": "结构类",
        "desc": "可选搜索框（frameworks/Transfer.css:7）"
      },
      {
        "name": "kole-transfer-item",
        "type": "结构类",
        "desc": "单条数据行，hover 底色（frameworks/Transfer.css:11）"
      },
      {
        "name": "is-disabled",
        "type": "状态类",
        "desc": "不可移动的数据项（frameworks/Transfer.css:13）"
      },
      {
        "name": "kole-transfer-ops",
        "type": "结构类",
        "desc": "中间操作按钮区（frameworks/Transfer.css:17）"
      }
    ]
  },
  "a11y": [
    "穿梭框建议左右各用 role=listbox 并配 aria-multiselectable，样式层不提供语义。",
    "移动操作按钮要有明确可读名称（如「移至右侧」），不要只用箭头符号。",
    "勾选状态同时用原生 checkbox 或 aria-checked 表达，.is-checked 只是视觉。",
    "禁用数据项与禁用操作按钮都要 aria-disabled，否则键盘仍可操作。"
  ],
  "resources": [
    {
      "file": "frameworks/Transfer.css",
      "kind": "css",
      "desc": "Kole UI 该组件的纯样式实现：类名与状态类的唯一定义处，含 :focus-visible / 令牌引用（frameworks/Transfer.css）"
    }
  ],
  "exampleIds": [
    "transfer-ex-1"
  ],
  "notes": [
    "依据 frameworks/Transfer.css:3 定义 .kole-transfer",
    "依据 frameworks/Transfer.css:4 定义 .kole-transfer-panel",
    "依据 frameworks/Transfer.css:7 定义 .kole-transfer-search",
    "依据 frameworks/Transfer.css:11 定义 .kole-transfer-item",
    "依据 frameworks/Transfer.css:13 定义 .is-disabled",
    "依据 frameworks/Transfer.css:17 定义 .kole-transfer-ops",
    "类名总表来自 frameworks/Transfer.css（facts.consumedApi.classes，13 项），本端不消费 props/emits/slots：[] / [] / []"
  ]
}