职责与结构
列表用于顺序呈现一组同类条目。多列对齐比较用表格，层级关系用树，导航目标集合用导航；内容管理与待办是组合业务模式，引用本列表规范。
ul / ol 容器 + li 条目；条目包含主标题、次要信息和可选独立操作。内容区自然增高，操作区在窄屏换行，不能把整个条目做成包含其他交互控件的按钮。
变体与 Tokens
| 项目 | 规范 |
|---|---|
| 普通／有序 | ul 表示无序集合，ol 表示有意义的顺序；不为了视觉强行添加编号。 |
| 选择列表 | 条目含原生 checkbox / radio 与明确名称；筛选后保留仍有效的选择，不用 listbox 模拟含按钮的复杂条目。 |
| 交互条目 | 标题用链接进行导航，独立按钮处理动作；当前条目 aria-current，选择状态由 checkbox 表达。 |
| 密度与状态 | data-density 继承统一行高和内边距；normal / loading / empty / error 共享明确的状态文案与恢复操作。 |
内容表面使用 --surface-data，分隔使用 --table-border，行高与内边距引用 --table-row-height / --table-cell-block / --table-cell-inline；选择反馈使用 --color-primary-light，不为行叠加玻璃。
交互与状态示例
已选择 0 项
有序列表
- 先确定组件职责与主要归属。
- 再引用共享 Tokens，定义变体与状态。
- 完成验证，登记独立规范与业务引用。
交互与无障碍
普通 li 不加入 Tab 顺序，链接／复选框／按钮依 DOM 顺序聚焦。列表不默认使用方向键或 listbox 角色。长内容换行，密度定义最小高度而非固定高度。加载时 aria-busy，错误与无结果提供恢复操作；数据刷新以稳定 ID 保留选择并移除已删除 ID。本页数据仅用于本地演示。
接入约定
| 项目 | 规范 |
|---|---|
| data-family-list / data-density | 列表容器；data-density 可用 compact / standard / comfortable，本页用 standard。 |
| 数据与筛选 | 条目模型含稳定 id、title、description、href；标题转义，目的地址受控；dsQueryRows 复用共享查询行为。 |
| 选择／状态 | 本地 Set 维护已选 ID；input 筛选，change 选择；状态切换不丢失查询或选择。实际分页／远程请求由业务模式提供。 |
查看最小使用示例
<ul class="family-list" aria-label="组件规范">
<li><a href="buttons.html">按钮规范</a><p>主要、次要与文字操作</p></li>
</ul>维护位置：scripts/family-specimens.mjs；示例行为：scripts/family-specimens.js。组合应用见本页末尾引用。