#页内目录

把长页面的标题层级转为可扫描导航，并在阅读过程中同步当前区段。

npm install @a3s-lab/ui@0.4.0

<nav class="table-of-contents" aria-label="On this page">
  <ol><li><a href="#overview" aria-current="location">Overview</a></li><li><a href="#contract">Contract</a></li><li><a href="#accessibility">Accessibility</a></li></ol>
</nav>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#用法

<nav class="table-of-contents" aria-label="On this page">
  <ol><li><a href="#overview" aria-current="location">Overview</a></li><li><a href="#contract">Contract</a></li><li><a href="#accessibility">Accessibility</a></li></ol>
</nav>

#独立控制器

import "@a3s-lab/ui/runtime";
import "@a3s-lab/ui/table-of-contents";

const component = document.querySelector(".table-of-contents");
component.getState();

控制器是幂等的；完整包可改为一次导入 @a3s-lab/ui/all。宿主通过可取消的 before-* 事件执行权限与业务校验。

#契约

#产品边界

页内目录不生成错误的标题结构，也不替代站点导航。宿主负责稳定 ID、内容层级和路由滚动偏移。

组件只发布可复用的交互边界。数据获取、持久化、权限、可信内容与业务实体继续由宿主产品拥有。

#可访问性

链接使用真实锚点和 aria-current，焦点顺序遵循文档。窄屏可横向滚动，但不会改变标题的阅读顺序。