@fairgarden/design 0.1.0-alpha.0 → 0.1.0-alpha.2

package/navigation/sidebar-nav/sidebar-nav.module.css

@@ -0,0 +1,270 @@
+/*
+ * Sidebar Navigation (§9.15). CVA function `sidebarNav` in SidebarNav.tsx.
+ *
+ * Parts: base (the nav), groups, group, collapsible, headingRow,
+ * headingTrigger, heading, toggle, glyph (the Collapsible module's D109
+ * glyph), panel, list, item, link, plain, label, labelText.
+ *
+ * Line-based [D202]: groups split by --role-hairline rules; pages hang on a
+ * --border-size-1 --role-hairline guide at the list's start edge; the
+ * current page draws the --border-size-2-25 --primary12 bar over the guide.
+ * No fills, no shadows. Colors are role variables only; there are no local
+ * custom properties.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.heading {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.link {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base {
+    display: block;
+    min-inline-size: 0;
+  }
+
+  .groups,
+  .list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .group,
+  .item,
+  .collapsible {
+    display: block;
+  }
+
+  /* Groups split by a hairline rule, --size-px-3 on either side [§4.4]. */
+  .group + .group {
+    margin-block-start: var(--size-px-3);
+    padding-block-start: var(--size-px-3);
+    border-block-start: var(--border-size-1) solid var(--role-hairline);
+  }
+
+  /* The caps heading (type-label, caps wayfinding [D165]): a 44 px row. */
+  .heading {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-block-size: var(--fgd-size-hit);
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  /* A collapsible group's row: the heading, then its toggle at the end. */
+  .headingRow {
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-2);
+  }
+
+  .headingRow > .heading {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+
+  /* A group without a page: the whole row is the toggle. */
+  .headingTrigger {
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-block-size: var(--fgd-size-hit);
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-1);
+    background: none;
+    color: var(--primary12);
+    text-align: start;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  .headingTrigger > .heading {
+    flex: 1 1 auto;
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-2);
+    text-underline-offset: var(--size-px-1);
+  }
+
+  /* The glyph-only toggle: a 44 px square, the glyph at the chrome tier. */
+  .toggle {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    inline-size: var(--fgd-size-hit);
+    block-size: var(--fgd-size-hit);
+    margin: 0;
+    margin-inline-end: calc(-1 * var(--size-px-3));
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-1);
+    background: none;
+    color: var(--primary12);
+    cursor: pointer;
+    appearance: none;
+  }
+
+  .glyph {
+    flex: none;
+  }
+
+  /* The clip reveal (§1.5.15) [D91]: the panel wipes open; never faded. */
+  .panel {
+    block-size: var(--collapsible-panel-height);
+    overflow: hidden;
+    overflow: clip;
+  }
+
+  /* Pages hang on a --border-size-1 hairline guide at the list's start edge. */
+  .list {
+    border-inline-start: var(--border-size-1) solid var(--role-hairline);
+  }
+
+  /* Subpages: one level in, on their own guide. */
+  .list .list {
+    margin-inline-start: var(--size-px-3);
+  }
+
+  /* A page: type-body-ui at weight 400, a 44 px row, --size-px-3 off the guide. */
+  .link {
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-block-size: var(--fgd-size-hit);
+    padding-block: var(--size-px-2);
+    padding-inline: var(--size-px-3) 0;
+    color: var(--primary12);
+    text-decoration-line: none;
+  }
+
+  .plain {
+    color: var(--role-muted);
+  }
+
+  /* The current bar, over the guide: a border, so it survives forced colors. */
+  .link::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(-1 * var(--border-size-1));
+    border-inline-start: 0 solid var(--primary12);
+    pointer-events: none;
+  }
+
+  /*
+   * The label reserves its weight-700 box: a hidden copy of its words at
+   * --font-weight-7 (`data-label`) shares the one grid cell, so the cell is
+   * always the bold setting's size and the current page never widens or
+   * rewraps a line (no layout shift on navigation or scrollspy).
+   */
+  .label {
+    display: grid;
+    min-inline-size: 0;
+  }
+
+  .label::after {
+    content: attr(data-label);
+    grid-area: 1 / 1;
+    font-weight: var(--font-weight-7);
+    visibility: hidden;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .labelText {
+    grid-area: 1 / 1;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .panel {
+      transition-property: block-size;
+      transition-duration: var(--fgd-duration-disclosure);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+@layer compounds {
+  /* Page links fill their row: a block flex box, over Link's inline `nav` row. */
+  .link {
+    display: flex;
+  }
+
+  /* Headings: a flex row over Link's inline `nav` row, the text's own 44 px. */
+  .heading {
+    display: flex;
+  }
+}
+
+@layer states {
+  /* The whole-row toggle: the bare-text underline on its words [D181]. */
+  .headingTrigger:hover > .heading {
+    text-decoration-line: underline;
+  }
+
+  .toggle:active,
+  .headingTrigger:active {
+    background-color: var(--primary12);
+    color: var(--role-inverse);
+  }
+
+  .toggle:active .glyph {
+    color: var(--role-inverse);
+  }
+
+  .toggle:focus-visible,
+  .headingTrigger:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: calc(-1 * var(--border-size-2));
+  }
+
+  /* Rows: the ring inset inside the row (the list parent raises it over Link's ring). */
+  .list .link:focus-visible,
+  .group > .heading:focus-visible,
+  .headingRow > .heading:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: calc(-1 * var(--border-size-2));
+  }
+
+  /* Current page: the --border-size-2-25 start-edge bar and weight 700 [D15]. */
+  .list .link[aria-current='page']::before {
+    border-inline-start-width: var(--border-size-2-25);
+  }
+
+  /* The bar replaces Link's current underline on a page (the list parent raises this over Link's rule). */
+  .list .link[aria-current='page'] {
+    font-weight: var(--font-weight-7);
+    text-decoration-line: none;
+  }
+
+  .panel[data-starting-style],
+  .panel[data-ending-style] {
+    block-size: 0;
+  }
+
+  @media (forced-colors: active) {
+    .headingTrigger:hover > .heading {
+      text-decoration-line: underline;
+    }
+  }
+}
+
+@layer print {
+  @media print {
+    /* Screen wayfinding: the page prints alone (§7.7). */
+    .base {
+      display: none;
+    }
+  }
+}

package/navigation/table-of-contents/TableOfContents.d.ts

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+export declare const tableOfContents: (props?: ({
+    kind?: "bar" | "list" | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TableOfContentsVariants = VariantProps<typeof tableOfContents>;
+/** How the contents draw: the full list, or the compact bar that opens it. */
+export type TableOfContentsKind = NonNullable<TableOfContentsVariants['kind']>;
+/** Heading levels the list shows: H2 at its top level, H3 and H4 nested under it. */
+export type TableOfContentsLevel = 2 | 3 | 4;
+/** One heading on the page. */
+export interface TableOfContentsItem {
+    /** The heading's `id`: the entry links to `#id`. */
+    id: string;
+    /** The heading's text. */
+    title: string;
+    /** The heading level: 2, 3 or 4. */
+    level: TableOfContentsLevel;
+}
+/**
+ * What a host tells the contents inside it. The docs layout sets
+ * `kind: 'bar'` where it pins the compact bar (below --xl-n-above), so
+ * the one `toc` it is given draws as the column there and as the bar here.
+ */
+export interface TableOfContentsContextValue {
+    /** The kind to draw when the component names none. */
+    kind?: TableOfContentsKind;
+    /** Hides the list's visible heading; it stays the landmark's name. */
+    labelHidden?: boolean;
+}
+/** Provided by a host of the contents, such as the docs layout. */
+export declare const TableOfContentsContext: React.Context<TableOfContentsContextValue>;
+/** Props for TableOfContents: `nav` props, the headings, the section in view, the kind and the color axes. */
+export type TableOfContentsProps = Omit<React.ComponentPropsWithRef<'nav'>, 'children'> & {
+    /** The page's headings in order, levels 2–4 (a level-3 nests under the level-2 before it). */
+    items: readonly TableOfContentsItem[];
+    /**
+     * The id of the section in view: its entry takes `aria-current="location"`,
+     * and the bar names it. Pass `useActiveHeading(ids)` for scrollspy.
+     * Omitted, no entry is marked and the bar names the first section.
+     */
+    activeId?: string;
+    /** The visible heading (the bar's label) and the landmark's name. Default "On this page". */
+    label?: string;
+    /**
+     * `list` (default): the full list. `bar`: one line naming the section in
+     * view, which opens the list in an anchored panel. Omitted, a host's
+     * `TableOfContentsContext` may set it (the docs layout does).
+     */
+    kind?: TableOfContentsVariants['kind'];
+    /**
+     * With `kind="bar"`: the outline morph, the bar's ring or edge growing
+     * into the panel's frame on open and back on close [D204]. Default
+     * `true`; it never runs under reduced motion, in forced colors or in
+     * print.
+     */
+    morph?: boolean;
+    /** Builds each anchor. Default: a plain `<a href="#id">`, which scrolls and writes the hash. */
+    renderLink?: (href: string) => React.ReactElement;
+    /** Override the scope's primary. Never defaulted [D133]. */
+    primary?: TableOfContentsVariants['primary'];
+    /** Override the scope's secondary. Never defaulted. */
+    secondary?: TableOfContentsVariants['secondary'];
+};
+/**
+ * The page's contents [D202, D203].
+ *
+ * `kind="list"` (default): a `nav` named by its caps heading (`type-label`)
+ * over an `ol` of in-page links in `type-caption`, H2s at the top level and
+ * H3 and H4 nested on the --role-hairline guide. The section in view
+ * (`activeId`) takes `aria-current="location"`, the --border-size-2-25
+ * start-edge bar and weight 700; every entry reserves that weight's box, so
+ * marking a section never moves the list.
+ *
+ * `kind="bar"`: one field-box line, "On this page" and the section in view
+ * (the first before scrollspy runs), truncated, with a chevron. It opens
+ * the same list in an anchored panel about a third of the viewport tall,
+ * scrolled inside so the section in view sits centered and marked, with
+ * focus on it; following an entry goes to its heading and closes the
+ * panel; Escape and an outside press close it and focus returns to the
+ * bar. The bar's ring or edge morphs into the panel's frame [D204].
+ *
+ * Presentational: pair it with `useActiveHeading` for scrollspy. The docs
+ * layout shows the list in a sticky column from --xl-n-above and the bar,
+ * pinned under the header, below. With no items it renders nothing. Hidden
+ * in print.
+ */
+export declare function TableOfContents(props: TableOfContentsProps): React.JSX.Element | null;
+export {};
+//# sourceMappingURL=TableOfContents.d.ts.map

package/navigation/table-of-contents/TableOfContents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableOfContents.d.ts","sourceRoot":"","sources":["../../src/navigation/table-of-contents/TableOfContents.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAuDjE,eAAO,MAAM,eAAe;;;;8EAa1B,CAAA;AAEF,KAAK,uBAAuB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAA;AAEnE,8EAA8E;AAC9E,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC,CAAA;AAE9E,qFAAqF;AACrF,MAAM,MAAM,oBAAoB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AAE5C,+BAA+B;AAC/B,MAAM,WAAW,mBAAmB;IAClC,oDAAoD;IACpD,EAAE,EAAE,MAAM,CAAA;IACV,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,oCAAoC;IACpC,KAAK,EAAE,oBAAoB,CAAA;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,2BAA2B;IAC1C,sDAAsD;IACtD,IAAI,CAAC,EAAE,mBAAmB,CAAA;IAC1B,sEAAsE;IACtE,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,mEAAmE;AACnE,eAAO,MAAM,sBAAsB,4CAAuD,CAAA;AAG1F,8GAA8G;AAC9G,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACtF,8FAA8F;IAC9F,KAAK,EAAE,SAAS,mBAAmB,EAAE,CAAA;IACrC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6FAA6F;IAC7F,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,uBAAuB,CAAC,MAAM,CAAC,CAAA;IACtC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gGAAgG;IAChG,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,YAAY,CAAA;IACjD,4DAA4D;IAC5D,OAAO,CAAC,EAAE,uBAAuB,CAAC,SAAS,CAAC,CAAA;IAC5C,uDAAuD;IACvD,SAAS,CAAC,EAAE,uBAAuB,CAAC,WAAW,CAAC,CAAA;CACjD,CAAA;AA6FH;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,4BAgD1D"}

package/navigation/table-of-contents/TableOfContents.js

@@ -0,0 +1,211 @@
+'use client';
+import * as React from 'react';
+import { Popover as BasePopover } from '@base-ui/react/popover';
+import { cva } from 'class-variance-authority';
+import { Link } from '../../actions/link';
+import { Icon, iconHost } from '../../foundations/icon';
+import { OutlineMorphFrame, useOutlineMorph } from '../../foundations/outline-morph';
+import { cx } from '../../utils/className';
+import { OVERLAY_COLLISION_PADDING, OVERLAY_SIDE_OFFSET, OverlayScope, overlayAttributes, overlayScaleClassName, } from '../../utils/overlay';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './table-of-contents.module.css';
+/*
+ * Table of Contents (§9.16) [D202, D203]: the page's "On this page" list,
+ * the docs layout's right column; and, as `kind="bar"`, the compact bar
+ * the layout pins at the top of the page below that column's threshold.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: table-of-contents.module.css; CVA function `tableOfContents`.
+ * - Axes: `kind` → list | bar → kindList, kindBar (the root: the nav, or
+ *   the bar's box); `primary`, `secondary` → scales module classes.
+ * - Compound variants: none. Defaults: kind list; color axes none.
+ * - Color fallback: inherits the scope; the bar's panel is a portaled
+ *   `white` overlay scope (§10.1).
+ * - States: entries are Link `kind="nav"` with `list`: `:hover` →
+ *   --role-link-hover only (plus the underline where it is --primary12)
+ *   [D181]; `aria-current="location"` (the section in view, `activeId`) →
+ *   the --border-size-2-25 start-edge bar over the guide and weight 700,
+ *   whose box every entry reserves, so scrollspy never rewraps a line;
+ *   `:focus-visible` → the ring, inset inside the row. Bar trigger:
+ *   `:hover` → the field edge steps to --primary12 [D140];
+ *   `data-popup-open` → the edge --primary12 and the chevron turned;
+ *   `:focus-visible` → the ring. The panel opens and closes by the outline
+ *   morph or at once [D205]; `data-outline-morph` → its edge takes its face
+ *   while the morph draws the frame [D204].
+ * - Parts: base (the nav, or the bar's box), heading, list, item, link,
+ *   label, labelText; the bar's trigger, barLabel, barTitle, barChevron,
+ *   positioner, panel, panelScroll, visuallyHidden.
+ * - Scope: none; the panel declares the overlay's `white` scope.
+ * - Container: none; its host sets its width (the docs layout's column, or
+ *   the page column for the bar).
+ * - Data: `items` is plain data ({ id, title, level }), the page's
+ *   headings, so it can come from the docs engine (utils/docs, planned) or
+ *   from the rendered page.
+ * - Outline morph [D204]: with `kind="bar"`, on by default (`morph={false}`
+ *   opts out; `--fgd-outline-morph: none` for a subtree): the bar's ring
+ *   or edge grows into the panel's frame and back
+ *   (foundations/outline-morph), as the Select and the Section Bar's Jump
+ *   to do.
+ */
+export const tableOfContents = cva(styles.base, {
+    variants: {
+        kind: {
+            list: styles.kindList,
+            bar: styles.kindBar,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'list',
+    },
+});
+/** Provided by a host of the contents, such as the docs layout. */
+export const TableOfContentsContext = React.createContext({});
+TableOfContentsContext.displayName = 'TableOfContentsContext';
+/** Nests the flat heading list: each entry under the nearest shallower one before it. */
+function toTree(items) {
+    const roots = [];
+    const stack = [];
+    for (const item of items) {
+        const node = { item, children: [] };
+        while (stack.length > 0 && stack[stack.length - 1].item.level >= item.level)
+            stack.pop();
+        const parent = stack[stack.length - 1];
+        if (parent)
+            parent.children.push(node);
+        else
+            roots.push(node);
+        stack.push(node);
+    }
+    return roots;
+}
+/** The heading a followed entry lands on, made focusable (as the Section Bar's Jump list does). */
+function headingFor(id) {
+    if (typeof document === 'undefined')
+        return null;
+    const target = document.getElementById(id);
+    if (target == null)
+        return null;
+    if (!target.hasAttribute('tabindex') && !target.matches('a[href], button, input, select, textarea')) {
+        target.setAttribute('tabindex', '-1');
+    }
+    return target;
+}
+/** The list: a `nav` named by its heading (or `aria-label`), over the nested `ol` of entries. */
+function ContentsList(props) {
+    const { items, activeId, label, labelHidden, renderLink, onFollow, className, rootProps } = props;
+    const headingId = React.useId();
+    const tree = React.useMemo(() => toTree(items), [items]);
+    const renderNodes = (nodes) => (React.createElement("ol", { className: styles.list }, nodes.map(({ item, children }) => {
+        const href = `#${item.id}`;
+        return (React.createElement("li", { key: item.id, className: styles.item },
+            React.createElement(Link, { kind: "nav", list: true, href: href, render: renderLink?.(href), "aria-current": item.id === activeId ? 'location' : undefined, onClick: onFollow ? () => onFollow(item.id) : undefined, className: styles.link },
+                React.createElement("span", { className: styles.label, "data-label": item.title },
+                    React.createElement("span", { className: styles.labelText }, item.title))),
+            children.length > 0 ? renderNodes(children) : null));
+    })));
+    return (React.createElement("nav", { ...rootProps, ...(labelHidden ? { 'aria-label': label } : { 'aria-labelledby': headingId }), className: className },
+        labelHidden ? null : (React.createElement("p", { id: headingId, className: styles.heading }, label)),
+        renderNodes(tree)));
+}
+/**
+ * The page's contents [D202, D203].
+ *
+ * `kind="list"` (default): a `nav` named by its caps heading (`type-label`)
+ * over an `ol` of in-page links in `type-caption`, H2s at the top level and
+ * H3 and H4 nested on the --role-hairline guide. The section in view
+ * (`activeId`) takes `aria-current="location"`, the --border-size-2-25
+ * start-edge bar and weight 700; every entry reserves that weight's box, so
+ * marking a section never moves the list.
+ *
+ * `kind="bar"`: one field-box line, "On this page" and the section in view
+ * (the first before scrollspy runs), truncated, with a chevron. It opens
+ * the same list in an anchored panel about a third of the viewport tall,
+ * scrolled inside so the section in view sits centered and marked, with
+ * focus on it; following an entry goes to its heading and closes the
+ * panel; Escape and an outside press close it and focus returns to the
+ * bar. The bar's ring or edge morphs into the panel's frame [D204].
+ *
+ * Presentational: pair it with `useActiveHeading` for scrollspy. The docs
+ * layout shows the list in a sticky column from --xl-n-above and the bar,
+ * pinned under the header, below. With no items it renders nothing. Hidden
+ * in print.
+ */
+export function TableOfContents(props) {
+    const { items, activeId, label = 'On this page', kind: kindProp, morph = true, renderLink, primary, secondary, className, ref, ...rest } = props;
+    const scope = useScopeAttributes();
+    const context = React.useContext(TableOfContentsContext);
+    const kind = kindProp ?? context.kind ?? 'list';
+    if (items.length === 0)
+        return null;
+    if (kind === 'bar') {
+        return (React.createElement(ContentsBar, { items: items, activeId: activeId, label: label, morph: morph, renderLink: renderLink, className: tableOfContents({ kind, primary, secondary, className }), scope: scope, rootRef: ref, rootProps: rest }));
+    }
+    return (React.createElement(ContentsList, { items: items, activeId: activeId, label: label, labelHidden: context.labelHidden ?? false, renderLink: renderLink, className: tableOfContents({ kind, primary, secondary, className }), rootProps: { ...rest, ...scope, ref } }));
+}
+/** `kind="bar"`: the one-line trigger and its anchored panel. */
+function ContentsBar(props) {
+    const { items, activeId, label, morph, renderLink, className, scope, rootRef, rootProps } = props;
+    const [open, setOpen] = React.useState(false);
+    const refs = useOutlineMorph({ open, enabled: morph });
+    const panelId = React.useId();
+    const scrollRef = React.useRef(null);
+    const pendingFocus = React.useRef(null);
+    // Before scrollspy runs (and on the server), the first section.
+    const current = items.find((item) => item.id === activeId) ?? items[0];
+    const follow = React.useCallback((id) => {
+        pendingFocus.current = headingFor(id);
+        setOpen(false);
+    }, []);
+    return (React.createElement("div", { ...rootProps, ...scope, ref: rootRef, className: className },
+        React.createElement(BasePopover.Root, { open: open, onOpenChange: (next) => setOpen(next) },
+            React.createElement(BasePopover.Trigger, { ref: morph ? refs.sourceRef : undefined, "aria-controls": open ? panelId : undefined, className: cx(styles.trigger, iconHost) },
+                React.createElement("span", { className: styles.barLabel }, label),
+                React.createElement("span", { className: styles.visuallyHidden }, ": "),
+                React.createElement("span", { className: styles.barTitle }, current.title),
+                React.createElement(Icon, { name: "expand_more", weight: "interactive", className: styles.barChevron })),
+            React.createElement(BasePopover.Portal, null,
+                React.createElement(BasePopover.Positioner, { className: styles.positioner, side: "bottom", align: "start", sideOffset: OVERLAY_SIDE_OFFSET, collisionPadding: OVERLAY_COLLISION_PADDING },
+                    React.createElement(BasePopover.Popup, { ref: morph ? refs.targetRef : undefined, id: panelId, ...overlayAttributes, "aria-label": label, className: cx(styles.panel, overlayScaleClassName), initialFocus: () => {
+                            const scroller = scrollRef.current;
+                            return (scroller?.querySelector('a[aria-current="location"]') ??
+                                scroller?.querySelector('a[href]') ??
+                                true);
+                        }, finalFocus: () => {
+                            const element = pendingFocus.current;
+                            pendingFocus.current = null;
+                            return element ?? true;
+                        } },
+                        React.createElement(OverlayScope, null,
+                            React.createElement(PanelScroll, { scrollRef: scrollRef },
+                                React.createElement(ContentsList, { items: items, activeId: current.id, label: label, labelHidden: true, renderLink: renderLink, onFollow: follow, className: cx(styles.base, styles.kindList) })))),
+                    morph ? React.createElement(OutlineMorphFrame, { ref: refs.frameRef }) : null))),
+        React.createElement("span", { className: styles.visuallyHidden, "aria-live": "polite", "aria-atomic": "true" }, current.title)));
+}
+/**
+ * The panel's scroller. On mount it scrolls itself, never the page, so the
+ * section in view sits centered; the panel's height is final before it
+ * paints (its fallback cap), and a second pass a frame later follows the
+ * positioner's measured room.
+ */
+function PanelScroll({ scrollRef, children, }) {
+    React.useLayoutEffect(() => {
+        const center = () => {
+            const scroller = scrollRef.current;
+            const link = scroller?.querySelector('a[aria-current="location"]');
+            if (scroller == null || link == null)
+                return;
+            const box = scroller.getBoundingClientRect();
+            const target = link.getBoundingClientRect();
+            scroller.scrollTop += target.top - box.top - (box.height - target.height) / 2;
+        };
+        center();
+        const frame = window.requestAnimationFrame(center);
+        return () => window.cancelAnimationFrame(frame);
+    }, [scrollRef]);
+    return (React.createElement("div", { ref: scrollRef, className: styles.panelScroll }, children));
+}
+//# sourceMappingURL=TableOfContents.js.map

package/navigation/table-of-contents/TableOfContents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableOfContents.js","sourceRoot":"","sources":["../../src/navigation/table-of-contents/TableOfContents.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAC/D,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAA;AACpF,OAAO,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAA;AAC1C,OAAO,EACL,yBAAyB,EACzB,mBAAmB,EACnB,YAAY,EACZ,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,MAAM,MAAM,gCAAgC,CAAA;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IAC9C,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM,CAAC,QAAQ;YACrB,GAAG,EAAE,MAAM,CAAC,OAAO;SACpB;QACD,6EAA6E;QAC7E,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;IACD,eAAe,EAAE;QACf,IAAI,EAAE,MAAM;KACb;CACF,CAAC,CAAA;AAgCF,mEAAmE;AACnE,MAAM,CAAC,MAAM,sBAAsB,GAAG,KAAK,CAAC,aAAa,CAA8B,EAAE,CAAC,CAAA;AAC1F,sBAAsB,CAAC,WAAW,GAAG,wBAAwB,CAAA;AAwC7D,yFAAyF;AACzF,SAAS,MAAM,CAAC,KAAqC;IACnD,MAAM,KAAK,GAAW,EAAE,CAAA;IACxB,MAAM,KAAK,GAAW,EAAE,CAAA;IACxB,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,MAAM,IAAI,GAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAA;QACzC,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;YAAE,KAAK,CAAC,GAAG,EAAE,CAAA;QACxF,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;QACtC,IAAI,MAAM;YAAE,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;;YACjC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACrB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IACD,OAAO,KAAK,CAAA;AACd,CAAC;AAED,mGAAmG;AACnG,SAAS,UAAU,CAAC,EAAU;IAC5B,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO,IAAI,CAAA;IAChD,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAA;IAC1C,IAAI,MAAM,IAAI,IAAI;QAAE,OAAO,IAAI,CAAA;IAC/B,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,0CAA0C,CAAC,EAAE,CAAC;QACpG,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;IACvC,CAAC;IACD,OAAO,MAAM,CAAA;AACf,CAAC;AAcD,iGAAiG;AACjG,SAAS,YAAY,CAAC,KAAwB;IAC5C,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IACjG,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,EAAE,CAAA;IAC/B,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAExD,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CACrC,4BAAI,SAAS,EAAE,MAAM,CAAC,IAAI,IACvB,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE;QAChC,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,EAAE,EAAE,CAAA;QAC1B,OAAO,CACL,4BAAI,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI;YACtC,oBAAC,IAAI,IACH,IAAI,EAAC,KAAK,EACV,IAAI,QACJ,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,kBACZ,IAAI,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAC3D,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,EACvD,SAAS,EAAE,MAAM,CAAC,IAAI;gBAEtB,8BAAM,SAAS,EAAE,MAAM,CAAC,KAAK,gBAAc,IAAI,CAAC,KAAK;oBACnD,8BAAM,SAAS,EAAE,MAAM,CAAC,SAAS,IAAG,IAAI,CAAC,KAAK,CAAQ,CACjD,CACF;YACN,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAChD,CACN,CAAA;IACH,CAAC,CAAC,CACC,CACN,CAAA;IAED,OAAO,CACL,gCACM,SAAS,KACT,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,iBAAiB,EAAE,SAAS,EAAE,CAAC,EAC9E,SAAS,EAAE,SAAS;QAEnB,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACpB,2BAAG,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,IACxC,KAAK,CACJ,CACL;QACA,WAAW,CAAC,IAAI,CAAC,CACd,CACP,CAAA;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,eAAe,CAAC,KAA2B;IACzD,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,GAAG,cAAc,EACtB,IAAI,EAAE,QAAQ,EACd,KAAK,GAAG,IAAI,EACZ,UAAU,EACV,OAAO,EACP,SAAS,EACT,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IAET,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAClC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAA;IACxD,MAAM,IAAI,GAAwB,QAAQ,IAAI,OAAO,CAAC,IAAI,IAAI,MAAM,CAAA;IAEpE,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IAEnC,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;QACnB,OAAO,CACL,oBAAC,WAAW,IACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,eAAe,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EACnE,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAA4C,EACrD,SAAS,EAAE,IAA6C,GACxD,CACH,CAAA;IACH,CAAC;IAED,OAAO,CACL,oBAAC,YAAY,IACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,OAAO,CAAC,WAAW,IAAI,KAAK,EACzC,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,eAAe,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EACnE,SAAS,EAAE,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,GACrC,CACH,CAAA;AACH,CAAC;AAcD,iEAAiE;AACjE,SAAS,WAAW,CAAC,KAAuB;IAC1C,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IACjG,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,IAAI,GAAG,eAAe,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAA;IACtD,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,EAAE,CAAA;IAC7B,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAA;IAC3D,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAqB,IAAI,CAAC,CAAA;IAE3D,gEAAgE;IAChE,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,QAAQ,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAA;IAEtE,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,EAAU,EAAE,EAAE;QAC9C,YAAY,CAAC,OAAO,GAAG,UAAU,CAAC,EAAE,CAAC,CAAA;QACrC,OAAO,CAAC,KAAK,CAAC,CAAA;IAChB,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,gCAAS,SAAS,KAAM,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS;QAC/D,oBAAC,WAAW,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;YACjE,oBAAC,WAAW,CAAC,OAAO,IAClB,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,mBACxB,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACzC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAC;gBAEvC,8BAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,IAAG,KAAK,CAAQ;gBAChD,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,SAAW;gBACjD,8BAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,IAAG,OAAO,CAAC,KAAK,CAAQ;gBACxD,oBAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAC,MAAM,EAAC,aAAa,EAAC,SAAS,EAAE,MAAM,CAAC,UAAU,GAAI,CAC1D;YACtB,oBAAC,WAAW,CAAC,MAAM;gBACjB,oBAAC,WAAW,CAAC,UAAU,IACrB,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,OAAO,EACb,UAAU,EAAE,mBAAmB,EAC/B,gBAAgB,EAAE,yBAAyB;oBAE3C,oBAAC,WAAW,CAAC,KAAK,IAChB,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACvC,EAAE,EAAE,OAAO,KACP,iBAAiB,gBACT,KAAK,EACjB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,qBAAqB,CAAC,EAClD,YAAY,EAAE,GAAG,EAAE;4BACjB,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAA;4BAClC,OAAO,CACL,QAAQ,EAAE,aAAa,CAAc,4BAA4B,CAAC;gCAClE,QAAQ,EAAE,aAAa,CAAc,SAAS,CAAC;gCAC/C,IAAI,CACL,CAAA;wBACH,CAAC,EACD,UAAU,EAAE,GAAG,EAAE;4BACf,MAAM,OAAO,GAAG,YAAY,CAAC,OAAO,CAAA;4BACpC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAA;4BAC3B,OAAO,OAAO,IAAI,IAAI,CAAA;wBACxB,CAAC;wBAED,oBAAC,YAAY;4BACX,oBAAC,WAAW,IAAC,SAAS,EAAE,SAAS;gCAC/B,oBAAC,YAAY,IACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,OAAO,CAAC,EAAE,EACpB,KAAK,EAAE,KAAK,EACZ,WAAW,QACX,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,GAC3C,CACU,CACD,CACG;oBACnB,KAAK,CAAC,CAAC,CAAC,oBAAC,iBAAiB,IAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CAAC,CAAC,CAAC,IAAI,CAClC,CACN,CACJ;QAEnB,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,eAAY,QAAQ,iBAAa,MAAM,IAC1E,OAAO,CAAC,KAAK,CACT,CACH,CACP,CAAA;AACH,CAAC;AAED;;;;;GAKG;AACH,SAAS,WAAW,CAAC,EACnB,SAAS,EACT,QAAQ,GAIT;IACC,KAAK,CAAC,eAAe,CAAC,GAAG,EAAE;QACzB,MAAM,MAAM,GAAG,GAAG,EAAE;YAClB,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAA;YAClC,MAAM,IAAI,GAAG,QAAQ,EAAE,aAAa,CAAc,4BAA4B,CAAC,CAAA;YAC/E,IAAI,QAAQ,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI;gBAAE,OAAM;YAC5C,MAAM,GAAG,GAAG,QAAQ,CAAC,qBAAqB,EAAE,CAAA;YAC5C,MAAM,MAAM,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAA;YAC3C,QAAQ,CAAC,SAAS,IAAI,MAAM,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;QAC/E,CAAC,CAAA;QACD,MAAM,EAAE,CAAA;QACR,MAAM,KAAK,GAAG,MAAM,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAA;QAClD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAA;IACjD,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO,CACL,6BAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,IAC/C,QAAQ,CACL,CACP,CAAA;AACH,CAAC"}

package/navigation/table-of-contents/index.d.ts

@@ -0,0 +1,3 @@
+export * from './TableOfContents';
+export * from './useActiveHeading';
+//# sourceMappingURL=index.d.ts.map

package/navigation/table-of-contents/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/navigation/table-of-contents/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA"}

package/navigation/table-of-contents/index.js

@@ -0,0 +1,3 @@
+export * from './TableOfContents';
+export * from './useActiveHeading';
+//# sourceMappingURL=index.js.map

package/navigation/table-of-contents/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/navigation/table-of-contents/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA"}