职责与结构
折叠面板用于隐藏可按需查看的同页内容。帮助文字可以置于折叠内容中，但“帮助”是内容用途；导航菜单、弹层和 Tabs 分别使用对应家族。必填项与阻断错误不能只藏在折叠区域。
summary 标题 + 展开状态图标 + 内容区；点击整个标题行切换。标题只放说明，不嵌套按钮或链接。内容保留自然高度，内部表格单独处理横向滚动。
变体与 Tokens
| 项目 | 规范 |
|---|---|
| 独立折叠 | 原生 details / summary，各面板独立开合。 |
| 单开手风琴 | data-family-accordion 分组内最多一个展开；切换新项时关闭其他项。 |
| 默认展开 | 重要说明用 open 展开；可提交表单的必填内容原则上保持可见。 |
| 内容状态 | 加载、空和错误在内容区复用反馈组件；重试放在内容中，标题保持可用。不设计无法访问内容的伪禁用 summary。 |
标题行最小高度 --control-lg，内边距 --space-3 / --space-4；分隔线使用 --color-border，图标复用标准 chevron / chevronUp，内层用 --surface-data 而非再叠加模糊。
交互与状态示例
交互与无障碍
原生 summary 支持 Tab、Enter 和 Space。details 的 open 是唯一状态源，不添加易失同步的 aria-expanded。收起前若焦点位于内部，回到该标题；手风琴切换也要恢复旧面板焦点。禁止把整个内容设置固定高度；尊重减少动效，无高度过渡依赖。
接入约定
| 项目 | 规范 |
|---|---|
| details.open / toggle | open 属性决定展开；监听原生 toggle 响应业务，程序更改 open 使用同一状态源。 |
| data-family-accordion | 同一个容器下直属 details 互斥，初始最多一个 open；多个独立容器互不干扰。 |
| 命名与内容 | summary 提供具体标题；内容标题按层级递进，外部深链接应展开包含目标的面板。 |
查看最小使用示例
<details class="family-disclosure">
<summary>共享 Tokens 的使用规则<span data-family-chevron aria-hidden="true"></span></summary>
<div>按需展开的说明内容</div>
</details>维护位置：scripts/family-specimens.mjs；示例行为：scripts/family-specimens.js。组合应用见本页末尾引用。