For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.4.1/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.4.1/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.4.1/en/components/table-of-contents.md.
A3S UI
  • English
  • v0.4.1

      • Table of Contents

      Turns a long page heading hierarchy into scannable navigation and follows the current section as reading progresses.

      Live preview

      Usage

      <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>

      Standalone controller

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

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

      The controller is idempotent; the complete package can instead import @a3s-lab/ui/all once. The host performs permission and business validation through cancelable before-* events.

      Contract

      SurfaceValue
      Root selector.table-of-contents
      Native root<nav>
      Statesready, current
      Eventsa3s:table-of-contents-change
      MethodsgetState, refresh, setCurrent

      Product boundary

      It does not repair an invalid heading outline or replace site navigation. The host owns stable IDs, content hierarchy, and route scroll offsets.

      The component publishes a reusable interaction boundary only. Data fetching, persistence, permission, trusted content, and business entities remain host-owned.

      Accessibility

      Links use real anchors and aria-current, with focus order matching the document. Narrow screens may scroll the list horizontally without changing reading order.