@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/fesm2022/slotted-angular-table-of-contents.mjs

@@ -0,0 +1,750 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, TemplateRef, Directive, ElementRef, model, input, numberAttribute, booleanAttribute, output, HostAttributeToken, DestroyRef, contentChild, viewChild, computed, signal, effect, afterRenderEffect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectMessages } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { createDismissableLayer } from '@slotted/core/dismissable-layer';
+import { tableOfContentsMessages } from '@slotted/core/i18n';
+import { DEFAULT_LEVELS, collectOutline } from '@slotted/core/outline';
+import { resolveScroller, createScrollSpy, readStickyTop, landOn, prefersReducedMotion, focusTarget } from '@slotted/core/scroll-spy';
+import { createControllable } from '@slotted/core/state';
+import { SlSkeleton } from '@slotted/angular/skeleton';
+
+/** The contract's defaults. */
+const TABLE_OF_CONTENTS_FALLBACK = {
+    history: 'push',
+    landmark: true,
+    layout: 'vertical',
+    levels: DEFAULT_LEVELS,
+    numbered: false,
+    offset: 0,
+    size: 'md',
+    sticky: false,
+};
+const TABLE_OF_CONTENTS_DEFAULTS = new InjectionToken('slotted table-of-contents defaults', { providedIn: 'root', factory: () => TABLE_OF_CONTENTS_FALLBACK });
+/**
+ * An application decides once how its lists read — the levels a document
+ * outlines, whether the column pins, what a press does to the URL — rather
+ * than repeating it on every page. A list that states any of them itself
+ * still wins. Its words come from the language in force (`provideSlotted`).
+ */
+function provideTableOfContentsDefaults(defaults) {
+    return {
+        provide: TABLE_OF_CONTENTS_DEFAULTS,
+        useFactory: () => ({ ...TABLE_OF_CONTENTS_FALLBACK, ...defaults }),
+    };
+}
+function injectTableOfContentsDefaults() {
+    return inject(TABLE_OF_CONTENTS_DEFAULTS);
+}
+class SlTableOfContentsIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-table-of-contents-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableOfContentsIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableOfContentsIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableOfContentsIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * The tolerance under the reading line: a target whose top is within it is
+ * taken as reached, so a heading landed on by a press — sitting exactly at
+ * the line, give or take a subpixel — is the one marked. Ant's `bounds`.
+ */
+const TABLE_OF_CONTENTS_BOUNDS = 4;
+/** The skeleton rows the list draws while loading, by width. */
+const SKELETON_ROWS = ['72%', '56%', '80%', '48%'];
+/**
+ * The content of every link, as a template: `<ng-template slTableOfContentsLink let-entry>`.
+ * Without one the link shows the entry's label.
+ */
+class SlTableOfContentsLink {
+    template = inject(TemplateRef);
+    /* Types the template's context, so `let-entry` is an entry in the template. */
+    static ngTemplateContextGuard(_directive, context) {
+        return context !== null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableOfContentsLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTableOfContentsLink, isStandalone: true, selector: "ng-template[slTableOfContentsLink]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableOfContentsLink, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slTableOfContentsLink]', standalone: true }]
+        }] });
+/** The list's title, as a template: `<ng-template slTableOfContentsLabel>`. */
+class SlTableOfContentsLabel {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableOfContentsLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTableOfContentsLabel, isStandalone: true, selector: "ng-template[slTableOfContentsLabel]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableOfContentsLabel, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slTableOfContentsLabel]', standalone: true }]
+        }] });
+function fromOutline(entries) {
+    return entries.map((entry) => ({
+        id: entry.id,
+        label: entry.label,
+        children: fromOutline(entry.children),
+    }));
+}
+function flatten(items) {
+    const out = [];
+    const walk = (list) => {
+        for (const item of list) {
+            out.push(item);
+            if (item.children !== undefined)
+                walk(item.children);
+        }
+    };
+    walk(items);
+    return out;
+}
+function element(value) {
+    if (value === undefined || value === null)
+        return value;
+    return value instanceof ElementRef ? value.nativeElement : value;
+}
+/** A click the platform should keep: a modifier for a new tab, or a button other than the main one. */
+function platformClick(event) {
+    return event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+}
+/**
+ * A list of links into the document the reader is in, with the link of the
+ * place in view marked.
+ *
+ * The directive goes on the consumer's own element — `<nav slTableOfContents>`
+ * standing alone, `<div slTableOfContents>` inside a landmark that already has
+ * a name. `landmark` decides whether the name is written; the element is the
+ * consumer's, as it is everywhere in this ecosystem.
+ *
+ * **Two ways in, one list.** `items` as data, or `source` — a region whose
+ * headings are read after the view is built by `@slotted/core/outline` and
+ * read again when the region's subtree changes. A template Angular would not
+ * write a nested list by hand, so there are no parts to compose; a
+ * `slTableOfContentsLink` template shapes every link instead.
+ *
+ * **Two values, two models.** `value` is the current target and `open` is
+ * whether the collapsed list is shown. The spy asks `value` to move with the
+ * reason `scroll`; a press asks with `pointer` or `keyboard` before it
+ * scrolls, and the scroll happens whether or not the request is accepted.
+ */
+class SlTableOfContents {
+    /** The current target's id, without the hash. Two-way, so a template may bind it directly. */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Whether the collapsed list is shown. */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** The list as data. */
+    items = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** The region whose headings make the list, read after the view is built. */
+    source = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
+    /** The lowest and highest heading level `source` keeps. */
+    levels = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "levels" }] : /* istanbul ignore next */ []));
+    /** A heading matching this selector, or inside one, is left out of `source`. */
+    exclude = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "exclude" }] : /* istanbul ignore next */ []));
+    /** The element that scrolls. Derived from the first target when unset. */
+    scroller = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scroller" }] : /* istanbul ignore next */ []));
+    /** What to add under the page's chrome, in CSS pixels. */
+    offset = input(undefined, { ...(ngDevMode ? { debugName: "offset" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : numberAttribute(state)) });
+    layout = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    history = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "history" }] : /* istanbul ignore next */ []));
+    sticky = input(undefined, { ...(ngDevMode ? { debugName: "sticky" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    numbered = input(undefined, { ...(ngDevMode ? { debugName: "numbered" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    /** Whether the host is the navigation landmark and takes its name. */
+    landmark = input(undefined, { ...(ngDevMode ? { debugName: "landmark" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    /** The list's title, as text. A `slTableOfContentsLabel` template wins over it. */
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Rows of skeleton in the list's place. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Words laid over the catalog of the language in force: the landmark's name
+     * when no label is given, and the collapsed trigger's fixed text
+     * (`navigation`). A static `aria-label` still wins.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** One output for one transition, carrying the reason and the event. */
+    valueChangeRequest = output();
+    openChangeRequest = output();
+    defaults = injectTableOfContentsDefaults();
+    writtenLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    writtenLabelledBy = inject(new HostAttributeToken('aria-labelledby'), {
+        optional: true,
+    });
+    host = inject(ElementRef).nativeElement;
+    destroyRef = inject(DestroyRef);
+    ids = inject(SlTableOfContentsIdFactory).next();
+    panelId = `${this.ids}-panel`;
+    labelId = `${this.ids}-label`;
+    skeletonRows = SKELETON_ROWS;
+    linkTemplate = contentChild(SlTableOfContentsLink, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linkTemplate" }] : /* istanbul ignore next */ []));
+    labelTemplate = contentChild(SlTableOfContentsLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelTemplate" }] : /* istanbul ignore next */ []));
+    panel = viewChild.required('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
+    marker = viewChild.required('marker', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "marker" }] : /* istanbul ignore next */ []));
+    trigger = viewChild('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    resolvedLayout = computed(() => this.layout() ?? this.defaults.layout, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLayout" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedHistory = computed(() => this.history() ?? this.defaults.history, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedHistory" }] : /* istanbul ignore next */ []));
+    resolvedSticky = computed(() => this.sticky() ?? this.defaults.sticky, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSticky" }] : /* istanbul ignore next */ []));
+    resolvedNumbered = computed(() => this.numbered() ?? this.defaults.numbered, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedNumbered" }] : /* istanbul ignore next */ []));
+    resolvedLandmark = computed(() => this.landmark() ?? this.defaults.landmark, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLandmark" }] : /* istanbul ignore next */ []));
+    resolvedLevels = computed(() => this.levels() ?? this.defaults.levels, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLevels" }] : /* istanbul ignore next */ []));
+    resolvedOffset = computed(() => this.offset() ?? this.defaults.offset, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedOffset" }] : /* istanbul ignore next */ []));
+    /** The family's words in the language in force, with this list's `messages` laid over them. */
+    t = injectMessages(tableOfContentsMessages, this.messages);
+    collapsed = computed(() => this.resolvedLayout() === 'collapsed', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /** The headings of `source`, as the list reads them. */
+    outline = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outline" }] : /* istanbul ignore next */ []));
+    /** The list, whichever way it came. */
+    entries = computed(() => this.items() ?? fromOutline(this.outline()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
+    flat = computed(() => flatten(this.entries()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flat" }] : /* istanbul ignore next */ []));
+    empty = computed(() => !this.loading() && this.flat().length === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+    hasLabel = computed(() => this.labelTemplate() !== undefined || this.label() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasLabel" }] : /* istanbul ignore next */ []));
+    resolvedLabel = computed(() => this.label() ?? this.t('navigation'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
+    currentLabel = computed(() => {
+        const current = this.value();
+        return current === null ? '' : (this.flat().find((entry) => entry.id === current)?.label ?? '');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentLabel" }] : /* istanbul ignore next */ []));
+    ariaLabelledBy = computed(() => this.resolvedLandmark() && this.writtenLabel === null && this.hasLabel()
+        ? (this.writtenLabelledBy ?? this.labelId)
+        : this.writtenLabelledBy, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => this.resolvedLandmark() && this.writtenLabelledBy === null && !this.hasLabel()
+        ? (this.writtenLabel ?? this.t('navigation'))
+        : this.writtenLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    pendingFocus = false;
+    constructor() {
+        /* The headings of `source`, read when it is set and again when its subtree changes. */
+        effect((onCleanup) => {
+            const region = element(this.source());
+            const levels = this.resolvedLevels();
+            const exclude = this.exclude();
+            if (region === null || region === undefined)
+                return;
+            const read = () => this.outline.set(collectOutline(region, { levels, ...(exclude !== undefined ? { exclude } : {}) }));
+            read();
+            if (typeof MutationObserver === 'undefined')
+                return;
+            const observer = new MutationObserver(read);
+            observer.observe(region, { childList: true, subtree: true, characterData: true });
+            onCleanup(() => observer.disconnect());
+        });
+        /* The spy, rebuilt when the targets, the scroller or the offset change. */
+        afterRenderEffect((onCleanup) => {
+            const ids = this.flat().map((entry) => entry.id);
+            const scrollerInput = this.scroller();
+            const offset = this.resolvedOffset();
+            if (ids.length === 0)
+                return;
+            const doc = this.host.ownerDocument;
+            const targets = () => ids
+                .map((id) => doc.getElementById(id))
+                .filter((node) => node !== null)
+                .sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+            const explicit = element(scrollerInput);
+            const scroller = explicit === undefined ? resolveScroller(targets()) : explicit;
+            const handle = createScrollSpy({
+                targets,
+                scroller,
+                line: () => readStickyTop(scroller, doc) + offset + TABLE_OF_CONTENTS_BOUNDS,
+                onChange: (next) => this.requestValue(next, 'scroll'),
+                own: this.host,
+            });
+            this.spy = handle;
+            /* A deep link the browser jumped to on load landed under the chrome: land it again, instantly. */
+            const hash = doc.defaultView?.location.hash.slice(1) ?? '';
+            if (hash !== '' && ids.includes(hash)) {
+                const target = doc.getElementById(hash);
+                if (target !== null) {
+                    landOn(target, {
+                        scroller,
+                        chrome: readStickyTop(scroller, doc),
+                        offset,
+                        behavior: 'instant',
+                    });
+                }
+            }
+            onCleanup(() => {
+                handle.destroy();
+                this.spy = null;
+            });
+        });
+        /* The marker, measured against the panel from the current link's box. */
+        afterRenderEffect((onCleanup) => {
+            this.value();
+            this.entries();
+            this.open();
+            const layout = this.resolvedLayout();
+            const panel = this.panel().nativeElement;
+            const marker = this.marker().nativeElement;
+            const measure = () => this.measureMarker(panel, marker, layout);
+            measure();
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            const observer = new ResizeObserver(measure);
+            observer.observe(panel);
+            let live = true;
+            void panel.ownerDocument.fonts?.ready.then(() => {
+                if (live)
+                    measure();
+            });
+            onCleanup(() => {
+                live = false;
+                observer.disconnect();
+            });
+        });
+        /* The bar says which edge it continues past, for the stylesheet's fade. */
+        afterRenderEffect((onCleanup) => {
+            this.entries();
+            if (this.resolvedLayout() !== 'horizontal')
+                return;
+            const panel = this.panel().nativeElement;
+            const measure = () => {
+                const overflow = panel.scrollWidth - panel.clientWidth;
+                if (overflow <= 1) {
+                    panel.removeAttribute('data-overflow');
+                    return;
+                }
+                const scrolled = Math.abs(panel.scrollLeft);
+                const atStart = scrolled <= 1;
+                const atEnd = scrolled >= overflow - 1;
+                panel.setAttribute('data-overflow', atStart ? 'end' : atEnd ? 'start' : 'both');
+            };
+            measure();
+            panel.addEventListener('scroll', measure, { passive: true });
+            const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);
+            observer?.observe(panel);
+            onCleanup(() => {
+                panel.removeEventListener('scroll', measure);
+                observer?.disconnect();
+            });
+        });
+        /* The collapsed list is a dismissable layer while it is shown, with the trigger as a branch. */
+        afterRenderEffect((onCleanup) => {
+            if (!this.collapsed() || !this.open())
+                return;
+            const panel = this.panel().nativeElement;
+            const trigger = this.trigger()?.nativeElement ?? null;
+            const layer = createDismissableLayer(panel, {
+                branches: trigger === null ? [] : [trigger],
+                onDismiss: (request) => {
+                    if (request.reason !== 'escape' && request.reason !== 'outsidePress')
+                        return;
+                    this.requestOpen(false, request.reason, request.source);
+                    if (request.reason === 'escape')
+                        trigger?.focus();
+                },
+            });
+            onCleanup(() => layer.destroy());
+        });
+        /* ArrowDown on the trigger opened the list: the first link takes focus once it is drawn. */
+        afterRenderEffect(() => {
+            if (!this.open() || !this.pendingFocus)
+                return;
+            this.pendingFocus = false;
+            untracked(() => this.links()[0]?.focus());
+        });
+        this.destroyRef.onDestroy(() => this.spy?.destroy());
+    }
+    spy = null;
+    requestValue(next, reason, source) {
+        const state = createControllable({
+            initial: this.value(),
+            onRequest: (request) => this.valueChangeRequest.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.value.set(next);
+    }
+    requestOpen(next, reason, source) {
+        const state = createControllable({
+            initial: this.open(),
+            onRequest: (request) => this.openChangeRequest.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.open.set(next);
+    }
+    measureMarker(panel, marker, layout) {
+        const link = panel.querySelector('[data-part="link"][data-current]');
+        if (link === null) {
+            marker.style.removeProperty('--_marker-start');
+            marker.style.removeProperty('--_marker-size');
+            return;
+        }
+        const panelRect = panel.getBoundingClientRect();
+        const linkRect = link.getBoundingClientRect();
+        const rtl = getComputedStyle(panel).direction === 'rtl';
+        if (layout === 'horizontal') {
+            const start = rtl
+                ? panelRect.right - linkRect.right - panel.scrollLeft
+                : linkRect.left - panelRect.left + panel.scrollLeft;
+            marker.style.setProperty('--_marker-start', `${start}px`);
+            marker.style.setProperty('--_marker-size', `${linkRect.width}px`);
+            /* The current link is kept in view without moving the page: the panel alone scrolls. */
+            const from = rtl ? panelRect.right - linkRect.right : linkRect.left - panelRect.left;
+            const room = panelRect.width;
+            if (from < 0 || from + linkRect.width > room) {
+                const delta = from < 0 ? from : from + linkRect.width - room;
+                panel.scrollBy({ left: rtl ? -delta : delta, behavior: 'smooth' });
+            }
+            return;
+        }
+        const start = linkRect.top - panelRect.top + panel.scrollTop;
+        marker.style.setProperty('--_marker-start', `${start}px`);
+        marker.style.setProperty('--_marker-size', `${linkRect.height}px`);
+        const from = linkRect.top - panelRect.top;
+        if (panel.scrollHeight > panel.clientHeight) {
+            if (from < 0)
+                panel.scrollBy({ top: from, behavior: 'smooth' });
+            else if (from + linkRect.height > panelRect.height) {
+                panel.scrollBy({ top: from + linkRect.height - panelRect.height, behavior: 'smooth' });
+            }
+        }
+    }
+    /** The links the keyboard walks: every link while the list is shown, none while it is folded. */
+    links() {
+        if (this.collapsed() && !this.open())
+            return [];
+        return [...this.panel().nativeElement.querySelectorAll('[data-part="link"]')];
+    }
+    /**
+     * A press asks `value`, then the list scrolls the target under the chrome,
+     * writes the URL and focuses the target. Cmd-click, Ctrl-click and the
+     * middle button are the platform's: they open the fragment in a new tab.
+     */
+    onLinkClick(event, id) {
+        if (event.defaultPrevented || platformClick(event))
+            return;
+        event.preventDefault();
+        this.navigate(id, event.detail === 0 ? 'keyboard' : 'pointer', event);
+    }
+    navigate(id, reason, source) {
+        const doc = this.host.ownerDocument;
+        const view = doc.defaultView;
+        const target = doc.getElementById(id);
+        this.requestValue(id, reason, source);
+        if (target === null || view === null)
+            return;
+        /* The choice holds against the end-of-scroller rule until the reader scrolls by a gesture. */
+        this.spy?.pin(id);
+        const scroller = this.spy?.scroller() ?? element(this.scroller()) ?? null;
+        landOn(target, {
+            scroller,
+            chrome: readStickyTop(scroller, doc),
+            offset: this.resolvedOffset(),
+            behavior: prefersReducedMotion(view) ? 'instant' : 'smooth',
+        });
+        const history = this.resolvedHistory();
+        if (reason !== 'programmatic' && history !== 'none') {
+            const url = `#${id}`;
+            if (history === 'push')
+                view.history.pushState(null, '', url);
+            else
+                view.history.replaceState(null, '', url);
+        }
+        focusTarget(target);
+        if (this.collapsed() && this.open())
+            this.requestOpen(false, 'select', source);
+    }
+    toggle(event) {
+        this.requestOpen(!this.open(), event.detail === 0 ? 'keyboard' : 'pointer', event);
+    }
+    onKeyDown(event) {
+        if (event.defaultPrevented)
+            return;
+        const target = event.target;
+        if (target === this.trigger()?.nativeElement) {
+            if (event.key === 'ArrowDown' && !this.open()) {
+                event.preventDefault();
+                this.pendingFocus = true;
+                this.requestOpen(true, 'keyboard', event);
+            }
+            return;
+        }
+        if (!target.matches('[data-part="link"]'))
+            return;
+        const horizontal = this.resolvedLayout() === 'horizontal';
+        const forward = horizontal ? 'ArrowRight' : 'ArrowDown';
+        const backward = horizontal ? 'ArrowLeft' : 'ArrowUp';
+        const step = event.key === forward || event.key === 'ArrowDown'
+            ? 1
+            : event.key === backward || event.key === 'ArrowUp'
+                ? -1
+                : 0;
+        if (step === 0 && event.key !== 'Home' && event.key !== 'End')
+            return;
+        const all = this.links();
+        if (all.length === 0)
+            return;
+        event.preventDefault();
+        const index = all.indexOf(target);
+        const next = event.key === 'Home'
+            ? 0
+            : event.key === 'End'
+                ? all.length - 1
+                : Math.min(all.length - 1, Math.max(0, index + step));
+        all[next]?.focus();
+    }
+    /** Focuses the first link, or the trigger in the collapsed layout. */
+    focus() {
+        if (this.collapsed())
+            this.trigger()?.nativeElement.focus();
+        else
+            this.links()[0]?.focus();
+    }
+    /** Reads the headings again and measures again. */
+    refresh() {
+        const region = element(this.source());
+        if (region !== null && region !== undefined) {
+            const exclude = this.exclude();
+            this.outline.set(collectOutline(region, {
+                levels: this.resolvedLevels(),
+                ...(exclude !== undefined ? { exclude } : {}),
+            }));
+        }
+        this.spy?.refresh();
+    }
+    /** Scrolls to a target and asks `value` to move with the reason `programmatic`; the URL is left. */
+    scrollTo(id) {
+        this.navigate(id, 'programmatic');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableOfContents, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTableOfContents, isStandalone: true, selector: "[slTableOfContents]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, levels: { classPropertyName: "levels", publicName: "levels", isSignal: true, isRequired: false, transformFunction: null }, exclude: { classPropertyName: "exclude", publicName: "exclude", isSignal: true, isRequired: false, transformFunction: null }, scroller: { classPropertyName: "scroller", publicName: "scroller", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, history: { classPropertyName: "history", publicName: "history", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, numbered: { classPropertyName: "numbered", publicName: "numbered", isSignal: true, isRequired: false, transformFunction: null }, landmark: { classPropertyName: "landmark", publicName: "landmark", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", open: "openChange", valueChangeRequest: "valueChangeRequest", openChangeRequest: "openChangeRequest" }, host: { attributes: { "data-ui": "table-of-contents", "data-part": "root" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.aria-busy": "loading() ? 'true' : null", "attr.data-layout": "resolvedLayout()", "attr.data-size": "resolvedSize()", "attr.data-sticky": "resolvedSticky() && !collapsed() ? '' : null", "attr.data-numbered": "resolvedNumbered() ? '' : null", "attr.data-open": "collapsed() && open() ? '' : null", "attr.data-loading": "loading() ? '' : null", "attr.data-empty": "empty() ? '' : null" } }, queries: [{ propertyName: "linkTemplate", first: true, predicate: SlTableOfContentsLink, descendants: true, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: SlTableOfContentsLabel, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "marker", first: true, predicate: ["marker"], descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], exportAs: ["slTableOfContents"], ngImport: i0, template: `
+    @if (collapsed()) {
+      <button
+        #trigger
+        data-part="trigger"
+        type="button"
+        [attr.aria-controls]="panelId"
+        [attr.aria-expanded]="open()"
+        (click)="toggle($event)"
+      >
+        <span data-part="label" [id]="labelId">
+          @if (labelTemplate(); as label) {
+            <ng-container *ngTemplateOutlet="label.template" />
+          } @else {
+            {{ resolvedLabel() }}
+          }
+        </span>
+        <span data-part="current">{{ currentLabel() }}</span>
+        <span data-part="indicator" aria-hidden="true"
+          ><span slIcon><svg slGlyph name="chevron-down"></svg></span
+        ></span>
+      </button>
+    } @else if (hasLabel()) {
+      <div data-part="label" [id]="labelId">
+        @if (labelTemplate(); as label) {
+          <ng-container *ngTemplateOutlet="label.template" />
+        } @else {
+          {{ label() }}
+        }
+      </div>
+    }
+    <div #panel data-part="panel" [id]="panelId">
+      <div #marker data-part="marker" aria-hidden="true"></div>
+      <ol data-part="list">
+        @if (loading()) {
+          @for (width of skeletonRows; track width) {
+            <li data-part="skeleton" aria-hidden="true">
+              <span slSkeleton shape="text" [inlineSize]="width"></span>
+            </li>
+          }
+        } @else {
+          <ng-container
+            *ngTemplateOutlet="entriesTemplate; context: { $implicit: entries(), depth: 1 }"
+          />
+        }
+      </ol>
+    </div>
+
+    <ng-template #entriesTemplate let-list let-depth="depth">
+      @for (entry of list; track entry.id) {
+        <li
+          data-part="item"
+          [attr.data-depth]="depth"
+          [attr.data-value]="entry.id"
+          [attr.data-current]="value() === entry.id ? '' : null"
+        >
+          <a
+            data-part="link"
+            [attr.href]="'#' + entry.id"
+            [attr.aria-current]="value() === entry.id ? 'location' : null"
+            [attr.data-current]="value() === entry.id ? '' : null"
+            (click)="onLinkClick($event, entry.id)"
+          >
+            @if (linkTemplate(); as link) {
+              <ng-container
+                *ngTemplateOutlet="
+                  link.template;
+                  context: { $implicit: entry, current: value() === entry.id }
+                "
+              />
+            } @else {
+              {{ entry.label }}
+            }
+          </a>
+          @if (entry.children?.length) {
+            <ol data-part="group">
+              <ng-container
+                *ngTemplateOutlet="
+                  entriesTemplate;
+                  context: { $implicit: entry.children, depth: depth + 1 }
+                "
+              />
+            </ol>
+          }
+        </li>
+      }
+    </ng-template>
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui=table-of-contents]{--_text: var(--slotted-table-of-contents-color, var(--slotted-text-muted, GrayText));--_strong: var(--slotted-text, CanvasText);--_hover: var( --slotted-table-of-contents-color-hover, color-mix(in oklab, var(--_text) 30%, var(--_strong)) );--_current: var( --slotted-table-of-contents-color-current, var(--slotted-tone-accent-text, LinkText) );--_track: var(--slotted-table-of-contents-track-color, var(--slotted-border-subtle, GrayText));--_track-width: var( --slotted-table-of-contents-track-width, var(--slotted-border-width-medium, 2px) );--_marker: var( --slotted-table-of-contents-marker-color, var(--slotted-tone-accent-solid, Highlight) );--_indent: var(--slotted-table-of-contents-indent, var(--slotted-space-5, .75rem));--_line-height: var(--slotted-line-height-sm, 1.45);--_duration: var(--slotted-duration-medium);--_easing: var(--slotted-easing-standard, ease);color:var(--_text);display:block;font-family:var(--slotted-font-family-sans, inherit);font-size:var(--_font-size);line-height:var(--_line-height);min-inline-size:0}[data-ui=table-of-contents][data-size=sm]{--_row-height: var(--slotted-control-height-sm, 30px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_inset: var(--slotted-control-padding-inline-sm, 10px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=table-of-contents][data-size=md]{--_row-height: var(--slotted-control-height-md, 34px);--_font-size: var(--slotted-control-font-size-md, 13px);--_inset: var(--slotted-control-padding-inline-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px)}[data-ui=table-of-contents][data-size=lg]{--_row-height: var(--slotted-control-height-lg, 38px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_inset: var(--slotted-control-padding-inline-lg, 16px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=table-of-contents][data-empty]:not([data-loading]){display:none}[data-ui=table-of-contents]>[data-part=label]{color:var(--_strong);font-size:var(--slotted-font-size-sm, .8125rem);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-sm, 1.45);margin-block-end:var(--slotted-space-3, .375rem);padding-inline:var(--_inset)}[data-ui=table-of-contents] [data-part=panel]{position:relative}[data-ui=table-of-contents] :is([data-part=list],[data-part=group]){list-style:none;margin:0;padding:0}[data-ui=table-of-contents][data-layout=vertical] [data-part=panel]>[data-part=list]{border-inline-start:var(--_track-width) solid var(--_track)}[data-ui=table-of-contents] [data-part=group]{padding-inline-start:var(--_indent)}[data-ui=table-of-contents] [data-part=item]{display:block;min-inline-size:0}[data-ui=table-of-contents] [data-part=link]{border-radius:var(--slotted-control-radius, 4px);color:inherit;display:block;overflow-wrap:anywhere;padding-block:calc((var(--_row-height) - var(--_font-size) * var(--_line-height)) / 2);padding-inline:var(--_inset);text-decoration:none;transition:color var(--slotted-duration-short) var(--_easing),font-weight var(--slotted-duration-short) var(--_easing)}[data-ui=table-of-contents] [data-part=link]:not([data-disabled]):not([data-current]):hover{color:var(--_hover)}[data-ui=table-of-contents] [data-part=link]:not([data-disabled]):not([data-current]):active{color:var(--_strong)}[data-ui=table-of-contents] [data-part=link][data-current]{color:var(--_current);font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=table-of-contents] :is([data-part=link],[data-part=trigger]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui=table-of-contents] [data-part=marker]{background-color:var(--_marker);border-radius:var(--slotted-radius-full, 9999px);pointer-events:none;position:absolute;transition:inset-block-start var(--_duration) var(--_easing),inset-inline-start var(--_duration) var(--_easing),block-size var(--_duration) var(--_easing),inline-size var(--_duration) var(--_easing)}[data-ui=table-of-contents][data-layout=vertical] [data-part=marker]{block-size:var(--_marker-size, 0px);inline-size:var(--_track-width);inset-block-start:var(--_marker-start, 0px);inset-inline-start:0}[data-ui=table-of-contents][data-numbered] :is([data-part=list],[data-part=group]){counter-reset:slotted-table-of-contents}[data-ui=table-of-contents][data-numbered] [data-part=item]{counter-increment:slotted-table-of-contents}[data-ui=table-of-contents][data-numbered] [data-part=link]:before{content:counters(slotted-table-of-contents,\".\") \".\";display:inline-block;font-variant-numeric:tabular-nums;margin-inline-end:var(--_gap)}[data-ui=table-of-contents][data-sticky]{display:flex;flex-direction:column;inset-block-start:var(--slotted-page-sticky-top, 0px);max-block-size:calc(100dvh - var(--slotted-page-sticky-top, 0px));position:sticky}[data-ui=table-of-contents][data-sticky]>[data-part=panel]{min-block-size:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}[data-ui=table-of-contents][data-layout=horizontal]{display:flex;gap:var(--_gap)}[data-ui=table-of-contents][data-layout=horizontal]>[data-part=label]{align-self:center;flex:none;margin-block-end:0;padding-inline-end:0;white-space:nowrap}[data-ui=table-of-contents][data-layout=horizontal]>[data-part=panel]{--_fade: var(--slotted-space-9, 2rem);--_fade-angle: 90deg;background:linear-gradient(var(--_track),var(--_track)) 0 100% / 100% var(--_track-width) no-repeat;display:flex;flex:1 1 auto;min-inline-size:0;overflow-x:auto;overscroll-behavior-inline:contain;padding-block-end:var(--_track-width);scrollbar-width:none}[data-ui=table-of-contents][data-layout=horizontal]>[data-part=panel]:dir(rtl){--_fade-angle: 270deg}[data-ui=table-of-contents][data-layout=horizontal]>[data-part=panel][data-overflow=end]{-webkit-mask-image:linear-gradient(var(--_fade-angle),#000 calc(100% - var(--_fade)),transparent);mask-image:linear-gradient(var(--_fade-angle),#000 calc(100% - var(--_fade)),transparent)}[data-ui=table-of-contents][data-layout=horizontal]>[data-part=panel][data-overflow=start]{-webkit-mask-image:linear-gradient(var(--_fade-angle),transparent,#000 var(--_fade));mask-image:linear-gradient(var(--_fade-angle),transparent,#000 var(--_fade))}[data-ui=table-of-contents][data-layout=horizontal]>[data-part=panel][data-overflow=both]{-webkit-mask-image:linear-gradient(var(--_fade-angle),transparent,#000 var(--_fade),#000 calc(100% - var(--_fade)),transparent);mask-image:linear-gradient(var(--_fade-angle),transparent,#000 var(--_fade),#000 calc(100% - var(--_fade)),transparent)}[data-ui=table-of-contents][data-layout=horizontal] [data-part=list]{display:flex}[data-ui=table-of-contents][data-layout=horizontal] [data-part=item]{flex:none}[data-ui=table-of-contents][data-layout=horizontal] [data-part=link]{white-space:nowrap}[data-ui=table-of-contents][data-layout=horizontal] [data-part=group]{display:none}[data-ui=table-of-contents][data-layout=horizontal] [data-part=marker]{block-size:var(--_track-width);inline-size:var(--_marker-size, 0px);inset-block-end:0;inset-inline-start:var(--_marker-start, 0px)}[data-ui=table-of-contents][data-layout=collapsed]{position:relative}[data-ui=table-of-contents] [data-part=trigger]{align-items:center;appearance:none;background:none;border:0;border-block-end:var(--_track-width) solid var(--_track);border-radius:0;color:var(--_strong);cursor:pointer;display:flex;font:inherit;gap:var(--_gap);inline-size:100%;margin:0;min-block-size:var(--_row-height);padding-block:0;padding-inline:var(--_inset);text-align:start}[data-ui=table-of-contents] [data-part=trigger]>[data-part=label]{color:var(--_strong);flex:none;font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=table-of-contents] [data-part=current]{color:var(--_text);flex:1 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=table-of-contents] [data-part=current]:empty{display:none}[data-ui=table-of-contents] [data-part=indicator]{--slotted-icon-size: var(--_icon-size);display:flex;flex:none;margin-inline-start:auto}[data-ui=table-of-contents] [data-part=indicator]>[data-ui=icon]{transition:rotate var(--_duration) var(--_easing)}[data-ui=table-of-contents][data-open] [data-part=indicator]>[data-ui=icon]{rotate:180deg}[data-ui=table-of-contents][data-layout=collapsed]>[data-part=panel]{--_enter-distance: var(--slotted-space-2, .25rem);background-color:var(--slotted-surface-raised, Canvas);border:var(--slotted-border-width-thin, 1px) solid var(--slotted-border-subtle, GrayText);border-radius:var(--slotted-radius-md, 6px);box-shadow:var(--slotted-shadow-md, none);display:none;inset-block-start:100%;inset-inline:0;margin-block-start:var(--slotted-space-2, .25rem);max-block-size:min(60dvh,24rem);overflow-y:auto;overscroll-behavior:contain;padding-block:var(--slotted-space-2, .25rem);position:absolute;z-index:var(--slotted-z-index-popover, 1100)}[data-ui=table-of-contents][data-layout=collapsed][data-open]>[data-part=panel]{animation:slotted-table-of-contents-enter var(--slotted-duration-short) var(--slotted-easing-enter, ease-out);display:block}[data-ui=table-of-contents][data-layout=collapsed] [data-part=marker]{display:none}@keyframes slotted-table-of-contents-enter{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@media(prefers-reduced-motion:reduce){@keyframes slotted-table-of-contents-enter{0%{opacity:0}}}[data-ui=table-of-contents] [data-part=skeleton]{display:flex;min-block-size:var(--_row-height);padding-block:calc((var(--_row-height) - var(--_font-size) * var(--_line-height)) / 2);padding-inline:var(--_inset)}[data-ui=table-of-contents] [data-part=skeleton]>[data-ui=skeleton]{--slotted-skeleton-block-size: var(--_font-size)}[data-ui=table-of-contents][data-layout=horizontal] [data-part=skeleton]{flex:none;inline-size:6rem}@media(forced-colors:active){[data-ui=table-of-contents] [data-part=marker]{background-color:Highlight;forced-color-adjust:none}[data-ui=table-of-contents] [data-part=link][data-current]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlSkeleton, selector: "[slSkeleton]", inputs: ["shape", "size", "animation", "loading", "inlineSize", "blockSize"], exportAs: ["slSkeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTableOfContents, decorators: [{
+            type: Component,
+            args: [{ selector: '[slTableOfContents]', standalone: true, exportAs: 'slTableOfContents', imports: [NgTemplateOutlet, SlGlyph, SlIcon, SlSkeleton], template: `
+    @if (collapsed()) {
+      <button
+        #trigger
+        data-part="trigger"
+        type="button"
+        [attr.aria-controls]="panelId"
+        [attr.aria-expanded]="open()"
+        (click)="toggle($event)"
+      >
+        <span data-part="label" [id]="labelId">
+          @if (labelTemplate(); as label) {
+            <ng-container *ngTemplateOutlet="label.template" />
+          } @else {
+            {{ resolvedLabel() }}
+          }
+        </span>
+        <span data-part="current">{{ currentLabel() }}</span>
+        <span data-part="indicator" aria-hidden="true"
+          ><span slIcon><svg slGlyph name="chevron-down"></svg></span
+        ></span>
+      </button>
+    } @else if (hasLabel()) {
+      <div data-part="label" [id]="labelId">
+        @if (labelTemplate(); as label) {
+          <ng-container *ngTemplateOutlet="label.template" />
+        } @else {
+          {{ label() }}
+        }
+      </div>
+    }
+    <div #panel data-part="panel" [id]="panelId">
+      <div #marker data-part="marker" aria-hidden="true"></div>
+      <ol data-part="list">
+        @if (loading()) {
+          @for (width of skeletonRows; track width) {
+            <li data-part="skeleton" aria-hidden="true">
+              <span slSkeleton shape="text" [inlineSize]="width"></span>
+            </li>
+          }
+        } @else {
+          <ng-container
+            *ngTemplateOutlet="entriesTemplate; context: { $implicit: entries(), depth: 1 }"
+          />
+        }
+      </ol>
+    </div>
+
+    <ng-template #entriesTemplate let-list let-depth="depth">
+      @for (entry of list; track entry.id) {
+        <li
+          data-part="item"
+          [attr.data-depth]="depth"
+          [attr.data-value]="entry.id"
+          [attr.data-current]="value() === entry.id ? '' : null"
+        >
+          <a
+            data-part="link"
+            [attr.href]="'#' + entry.id"
+            [attr.aria-current]="value() === entry.id ? 'location' : null"
+            [attr.data-current]="value() === entry.id ? '' : null"
+            (click)="onLinkClick($event, entry.id)"
+          >
+            @if (linkTemplate(); as link) {
+              <ng-container
+                *ngTemplateOutlet="
+                  link.template;
+                  context: { $implicit: entry, current: value() === entry.id }
+                "
+              />
+            } @else {
+              {{ entry.label }}
+            }
+          </a>
+          @if (entry.children?.length) {
+            <ol data-part="group">
+              <ng-container
+                *ngTemplateOutlet="
+                  entriesTemplate;
+                  context: { $implicit: entry.children, depth: depth + 1 }
+                "
+              />
+            </ol>
+          }
+        </li>
+      }
+    </ng-template>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'table-of-contents',
+                        'data-part': 'root',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-labelledby]': 'ariaLabelledBy()',
+                        '[attr.aria-busy]': "loading() ? 'true' : null",
+                        '[attr.data-layout]': 'resolvedLayout()',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-sticky]': "resolvedSticky() && !collapsed() ? '' : null",
+                        '[attr.data-numbered]': "resolvedNumbered() ? '' : null",
+                        '[attr.data-open]': "collapsed() && open() ? '' : null",
+                        '[attr.data-loading]': "loading() ? '' : null",
+                        '[attr.data-empty]': "empty() ? '' : null",
+                        '(keydown)': 'onKeyDown($event)',
+                    }, styles: ["@layer slotted.components{[data-ui=table-of-contents]{--_text: var(--slotted-table-of-contents-color, var(--slotted-text-muted, GrayText));--_strong: var(--slotted-text, CanvasText);--_hover: var( --slotted-table-of-contents-color-hover, color-mix(in oklab, var(--_text) 30%, var(--_strong)) );--_current: var( --slotted-table-of-contents-color-current, var(--slotted-tone-accent-text, LinkText) );--_track: var(--slotted-table-of-contents-track-color, var(--slotted-border-subtle, GrayText));--_track-width: var( --slotted-table-of-contents-track-width, var(--slotted-border-width-medium, 2px) );--_marker: var( --slotted-table-of-contents-marker-color, var(--slotted-tone-accent-solid, Highlight) );--_indent: var(--slotted-table-of-contents-indent, var(--slotted-space-5, .75rem));--_line-height: var(--slotted-line-height-sm, 1.45);--_duration: var(--slotted-duration-medium);--_easing: var(--slotted-easing-standard, ease);color:var(--_text);display:block;font-family:var(--slotted-font-family-sans, inherit);font-size:var(--_font-size);line-height:var(--_line-height);min-inline-size:0}[data-ui=table-of-contents][data-size=sm]{--_row-height: var(--slotted-control-height-sm, 30px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_inset: var(--slotted-control-padding-inline-sm, 10px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=table-of-contents][data-size=md]{--_row-height: var(--slotted-control-height-md, 34px);--_font-size: var(--slotted-control-font-size-md, 13px);--_inset: var(--slotted-control-padding-inline-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px)}[data-ui=table-of-contents][data-size=lg]{--_row-height: var(--slotted-control-height-lg, 38px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_inset: var(--slotted-control-padding-inline-lg, 16px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=table-of-contents][data-empty]:not([data-loading]){display:none}[data-ui=table-of-contents]>[data-part=label]{color:var(--_strong);font-size:var(--slotted-font-size-sm, .8125rem);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-sm, 1.45);margin-block-end:var(--slotted-space-3, .375rem);padding-inline:var(--_inset)}[data-ui=table-of-contents] [data-part=panel]{position:relative}[data-ui=table-of-contents] :is([data-part=list],[data-part=group]){list-style:none;margin:0;padding:0}[data-ui=table-of-contents][data-layout=vertical] [data-part=panel]>[data-part=list]{border-inline-start:var(--_track-width) solid var(--_track)}[data-ui=table-of-contents] [data-part=group]{padding-inline-start:var(--_indent)}[data-ui=table-of-contents] [data-part=item]{display:block;min-inline-size:0}[data-ui=table-of-contents] [data-part=link]{border-radius:var(--slotted-control-radius, 4px);color:inherit;display:block;overflow-wrap:anywhere;padding-block:calc((var(--_row-height) - var(--_font-size) * var(--_line-height)) / 2);padding-inline:var(--_inset);text-decoration:none;transition:color var(--slotted-duration-short) var(--_easing),font-weight var(--slotted-duration-short) var(--_easing)}[data-ui=table-of-contents] [data-part=link]:not([data-disabled]):not([data-current]):hover{color:var(--_hover)}[data-ui=table-of-contents] [data-part=link]:not([data-disabled]):not([data-current]):active{color:var(--_strong)}[data-ui=table-of-contents] [data-part=link][data-current]{color:var(--_current);font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=table-of-contents] :is([data-part=link],[data-part=trigger]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui=table-of-contents] [data-part=marker]{background-color:var(--_marker);border-radius:var(--slotted-radius-full, 9999px);pointer-events:none;position:absolute;transition:inset-block-start var(--_duration) var(--_easing),inset-inline-start var(--_duration) var(--_easing),block-size var(--_duration) var(--_easing),inline-size var(--_duration) var(--_easing)}[data-ui=table-of-contents][data-layout=vertical] [data-part=marker]{block-size:var(--_marker-size, 0px);inline-size:var(--_track-width);inset-block-start:var(--_marker-start, 0px);inset-inline-start:0}[data-ui=table-of-contents][data-numbered] :is([data-part=list],[data-part=group]){counter-reset:slotted-table-of-contents}[data-ui=table-of-contents][data-numbered] [data-part=item]{counter-increment:slotted-table-of-contents}[data-ui=table-of-contents][data-numbered] [data-part=link]:before{content:counters(slotted-table-of-contents,\".\") \".\";display:inline-block;font-variant-numeric:tabular-nums;margin-inline-end:var(--_gap)}[data-ui=table-of-contents][data-sticky]{display:flex;flex-direction:column;inset-block-start:var(--slotted-page-sticky-top, 0px);max-block-size:calc(100dvh - var(--slotted-page-sticky-top, 0px));position:sticky}[data-ui=table-of-contents][data-sticky]>[data-part=panel]{min-block-size:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}[data-ui=table-of-contents][data-layout=horizontal]{display:flex;gap:var(--_gap)}[data-ui=table-of-contents][data-layout=horizontal]>[data-part=label]{align-self:center;flex:none;margin-block-end:0;padding-inline-end:0;white-space:nowrap}[data-ui=table-of-contents][data-layout=horizontal]>[data-part=panel]{--_fade: var(--slotted-space-9, 2rem);--_fade-angle: 90deg;background:linear-gradient(var(--_track),var(--_track)) 0 100% / 100% var(--_track-width) no-repeat;display:flex;flex:1 1 auto;min-inline-size:0;overflow-x:auto;overscroll-behavior-inline:contain;padding-block-end:var(--_track-width);scrollbar-width:none}[data-ui=table-of-contents][data-layout=horizontal]>[data-part=panel]:dir(rtl){--_fade-angle: 270deg}[data-ui=table-of-contents][data-layout=horizontal]>[data-part=panel][data-overflow=end]{-webkit-mask-image:linear-gradient(var(--_fade-angle),#000 calc(100% - var(--_fade)),transparent);mask-image:linear-gradient(var(--_fade-angle),#000 calc(100% - var(--_fade)),transparent)}[data-ui=table-of-contents][data-layout=horizontal]>[data-part=panel][data-overflow=start]{-webkit-mask-image:linear-gradient(var(--_fade-angle),transparent,#000 var(--_fade));mask-image:linear-gradient(var(--_fade-angle),transparent,#000 var(--_fade))}[data-ui=table-of-contents][data-layout=horizontal]>[data-part=panel][data-overflow=both]{-webkit-mask-image:linear-gradient(var(--_fade-angle),transparent,#000 var(--_fade),#000 calc(100% - var(--_fade)),transparent);mask-image:linear-gradient(var(--_fade-angle),transparent,#000 var(--_fade),#000 calc(100% - var(--_fade)),transparent)}[data-ui=table-of-contents][data-layout=horizontal] [data-part=list]{display:flex}[data-ui=table-of-contents][data-layout=horizontal] [data-part=item]{flex:none}[data-ui=table-of-contents][data-layout=horizontal] [data-part=link]{white-space:nowrap}[data-ui=table-of-contents][data-layout=horizontal] [data-part=group]{display:none}[data-ui=table-of-contents][data-layout=horizontal] [data-part=marker]{block-size:var(--_track-width);inline-size:var(--_marker-size, 0px);inset-block-end:0;inset-inline-start:var(--_marker-start, 0px)}[data-ui=table-of-contents][data-layout=collapsed]{position:relative}[data-ui=table-of-contents] [data-part=trigger]{align-items:center;appearance:none;background:none;border:0;border-block-end:var(--_track-width) solid var(--_track);border-radius:0;color:var(--_strong);cursor:pointer;display:flex;font:inherit;gap:var(--_gap);inline-size:100%;margin:0;min-block-size:var(--_row-height);padding-block:0;padding-inline:var(--_inset);text-align:start}[data-ui=table-of-contents] [data-part=trigger]>[data-part=label]{color:var(--_strong);flex:none;font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=table-of-contents] [data-part=current]{color:var(--_text);flex:1 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=table-of-contents] [data-part=current]:empty{display:none}[data-ui=table-of-contents] [data-part=indicator]{--slotted-icon-size: var(--_icon-size);display:flex;flex:none;margin-inline-start:auto}[data-ui=table-of-contents] [data-part=indicator]>[data-ui=icon]{transition:rotate var(--_duration) var(--_easing)}[data-ui=table-of-contents][data-open] [data-part=indicator]>[data-ui=icon]{rotate:180deg}[data-ui=table-of-contents][data-layout=collapsed]>[data-part=panel]{--_enter-distance: var(--slotted-space-2, .25rem);background-color:var(--slotted-surface-raised, Canvas);border:var(--slotted-border-width-thin, 1px) solid var(--slotted-border-subtle, GrayText);border-radius:var(--slotted-radius-md, 6px);box-shadow:var(--slotted-shadow-md, none);display:none;inset-block-start:100%;inset-inline:0;margin-block-start:var(--slotted-space-2, .25rem);max-block-size:min(60dvh,24rem);overflow-y:auto;overscroll-behavior:contain;padding-block:var(--slotted-space-2, .25rem);position:absolute;z-index:var(--slotted-z-index-popover, 1100)}[data-ui=table-of-contents][data-layout=collapsed][data-open]>[data-part=panel]{animation:slotted-table-of-contents-enter var(--slotted-duration-short) var(--slotted-easing-enter, ease-out);display:block}[data-ui=table-of-contents][data-layout=collapsed] [data-part=marker]{display:none}@keyframes slotted-table-of-contents-enter{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@media(prefers-reduced-motion:reduce){@keyframes slotted-table-of-contents-enter{0%{opacity:0}}}[data-ui=table-of-contents] [data-part=skeleton]{display:flex;min-block-size:var(--_row-height);padding-block:calc((var(--_row-height) - var(--_font-size) * var(--_line-height)) / 2);padding-inline:var(--_inset)}[data-ui=table-of-contents] [data-part=skeleton]>[data-ui=skeleton]{--slotted-skeleton-block-size: var(--_font-size)}[data-ui=table-of-contents][data-layout=horizontal] [data-part=skeleton]{flex:none;inline-size:6rem}@media(forced-colors:active){[data-ui=table-of-contents] [data-part=marker]{background-color:Highlight;forced-color-adjust:none}[data-ui=table-of-contents] [data-part=link][data-current]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], levels: [{ type: i0.Input, args: [{ isSignal: true, alias: "levels", required: false }] }], exclude: [{ type: i0.Input, args: [{ isSignal: true, alias: "exclude", required: false }] }], scroller: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroller", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], history: [{ type: i0.Input, args: [{ isSignal: true, alias: "history", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], numbered: [{ type: i0.Input, args: [{ isSignal: true, alias: "numbered", required: false }] }], landmark: [{ type: i0.Input, args: [{ isSignal: true, alias: "landmark", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], valueChangeRequest: [{ type: i0.Output, args: ["valueChangeRequest"] }], openChangeRequest: [{ type: i0.Output, args: ["openChangeRequest"] }], linkTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlTableOfContentsLink), { isSignal: true }] }], labelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlTableOfContentsLabel), { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], marker: [{ type: i0.ViewChild, args: ['marker', { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SlTableOfContents, SlTableOfContentsIdFactory, SlTableOfContentsLabel, SlTableOfContentsLink, TABLE_OF_CONTENTS_BOUNDS, TABLE_OF_CONTENTS_DEFAULTS, TABLE_OF_CONTENTS_FALLBACK, injectTableOfContentsDefaults, provideTableOfContentsDefaults };
+//# sourceMappingURL=slotted-angular-table-of-contents.mjs.map