## 25 · 折叠面板 Collapse

### 25.1 用途
把长内容按主题收起来，让用户先看到标题、按需展开某一段；移动端屏幕窄，展开后内容会顶走上下文，因此一次只展开一个（手风琴）是默认推荐形态，展开态必须明确到不靠颜色也能看出。

### 25.2 结构（anatomy）
- `collapse`：根元素，一组面板的容器
- `item`：单个面板，含标题行与内容区
- `header`：标题行，整行可点，高度不小于 44px
- `arrow`：标题行右侧箭头，展开时旋转 90°
- `panel`：内容区，展开时可见（收起时高度为 0 或 `hidden`）
- `content`：内容区内的正文节点

### 25.3 变体维度
- `accordion`：`false`（多面板可同时展开）/ `true`（手风琴，同时只展开一个）
- `bordered`：`true`（面板之间有分隔线与外框）/ `false`（无边框，靠留白分隔）

### 25.4 状态
- collapsed：收起（默认）
- expanded：展开
- disabled：标题行置灰且不响应

### 25.5 交互与触控
- 标题行整行都是热区，高度不小于 44px
- 视觉箭头转 90°（180ms 过渡），展开时 `aria-expanded` 同步为 `true`
- 手风琴模式下展开新面板会收起当前展开项；`accordion=false` 时互不影响
- 内容区不做高度动画，直接切换 `hidden`（省电，读屏也不会读到中间态）；减少动态偏好下箭头同样瞬时切换

### 25.6 无障碍
- 标题行用原生 `button` 并带 `aria-expanded` / `aria-controls`
- 内容区与标题用 `id` / `aria-controls` 建立关联，收起时用 `hidden` 属性隐藏（而不是只靠 CSS 高度）
- 禁用项置 `aria-disabled="true"` 且不可聚焦

### 25.7 doNotInvent
- 展开动画的高度换算公式（内容高度由浏览器决定）
- 嵌套折叠面板的层级样式

### 25.8 unknowns
- 默认是否展开第一项
- 标题行右侧是否允许放额外操作

---