@m3e/toc 1.0.0-rc.1 → 1.0.0-rc.2

package/dist/src/TocItemElement.d.ts

@@ -1,47 +0,0 @@
-import { CSSResultGroup, LitElement, PropertyValues } from "lit";
-import { TocNode } from "./TocGenerator";
-declare const M3eTocItemElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").SelectedMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
-/**
- * An item in a table of contents.
- * @tag m3e-toc-item
- *
- * @slot - Renders the label of the item.
- *
- * @attr disabled - A value indicating whether the element is disabled.
- *
- * @cssprop --m3e-toc-item-shape - Border radius of the TOC item.
- * @cssprop --m3e-toc-item-padding-block - Block padding for the TOC item.
- * @cssprop --m3e-toc-item-padding - Inline padding for the TOC item.
- * @cssprop --m3e-toc-item-inset - Indentation per level for the TOC item.
- * @cssprop --m3e-toc-active-indicator-animation-duration - Animation duration for the active indicator.
- * @cssprop --m3e-toc-item-font-size - Font size for unselected items.
- * @cssprop --m3e-toc-item-font-weight - Font weight for unselected items.
- * @cssprop --m3e-toc-item-line-height - Line height for unselected items.
- * @cssprop --m3e-toc-item-tracking - Letter spacing for unselected items.
- * @cssprop --m3e-toc-item-color - Text color for unselected items.
- * @cssprop --m3e-toc-item-selected-font-size - Font size for selected items.
- * @cssprop --m3e-toc-item-selected-font-weight - Font weight for selected items.
- * @cssprop --m3e-toc-item-selected-line-height - Line height for selected items.
- * @cssprop --m3e-toc-item-selected-tracking - Letter spacing for selected items.
- * @cssprop --m3e-toc-item-selected-color - Text color for selected items.
- */
-export declare class M3eTocItemElement extends M3eTocItemElement_base {
-    /** The styles of the element. */
-    static styles: CSSResultGroup;
-    /** @private */ private readonly _base?;
-    /** @private */ private readonly _stateLayer?;
-    /** @internal */ node?: TocNode;
-    /** @internal */
-    protected update(changedProperties: PropertyValues<this>): void;
-    /** @inheritdoc */
-    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
-    /** @inheritdoc */
-    render(): unknown;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "m3e-toc-item": M3eTocItemElement;
-    }
-}
-export {};
-//# sourceMappingURL=TocItemElement.d.ts.map

package/dist/src/TocItemElement.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TocItemElement.d.ts","sourceRoot":"","sources":["../../src/TocItemElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAKvF,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;;AAEzC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,iBAAkB,SAAQ,sBAA6D;IAClG,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA6CpC;IAEF,eAAe,CAAiB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAc;IACrE,eAAe,CAAwB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAuB;IAC3F,gBAAgB,CAAU,IAAI,CAAC,EAAE,OAAO,CAAC;IAEzC,gBAAgB;cACG,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAiBxE,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAK/E,kBAAkB;IACT,MAAM,IAAI,OAAO;CAI3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,iBAAiB,CAAC;KACnC;CACF"}

package/dist/src/index.d.ts

@@ -1,4 +0,0 @@
-export * from "./TocElement";
-export * from "./TocGenerator";
-export * from "./TocItemElement";
-//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}

package/eslint.config.mjs

@@ -1,13 +0,0 @@
-import eslint from "@eslint/js";
-import tseslint from "typescript-eslint";
-import { fileURLToPath } from "url";
-import { dirname } from "path";
-
-export default tseslint.config(eslint.configs.recommended, tseslint.configs.recommended, {
-  languageOptions: {
-    parserOptions: {
-      project: true,
-      tsconfigRootDir: dirname(fileURLToPath(import.meta.url)),
-    },
-  },
-});

package/rollup.config.js

@@ -1,32 +0,0 @@
-import resolve from "@rollup/plugin-node-resolve";
-import terser from "@rollup/plugin-terser";
-import typescript from "@rollup/plugin-typescript";
-
-const banner = `/**
- * @license MIT
- * Copyright (c) 2025 matraic
- * See LICENSE file in the project root for full license text.
- */`;
-
-export default [
-  {
-    input: "src/index.ts",
-    output: [
-      {
-        file: "dist/index.js",
-        format: "esm",
-        sourcemap: true,
-        banner: banner,
-      },
-      {
-        file: "dist/index.min.js",
-        format: "esm",
-        sourcemap: true,
-        banner: banner,
-        plugins: [terser({ mangle: true })],
-      },
-    ],
-    external: ["@m3e/core", "@m3e/core/a11y", "lit"],
-    plugins: [resolve(), typescript()],
-  },
-];

package/src/TocElement.ts

@@ -1,370 +0,0 @@
-import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
-
-import {
-  AttachInternals,
-  debounce,
-  DesignToken,
-  hasAssignedNodes,
-  HtmlFor,
-  IntersectionController,
-  MutationController,
-  Role,
-  ScrollController,
-} from "@m3e/core";
-
-import { SelectionManager } from "@m3e/core/a11y";
-
-import { M3eTocItemElement } from "./TocItemElement";
-import { TocGenerator, TocNode } from "./TocGenerator";
-
-/**
- * @summary
- * A table of contents that provides in-page scroll navigation.
- *
- * @description
- * The `m3e-toc` component generates a hierarchical table of contents for in-page navigation.
- * It automatically detects headings or sections in a target element, builds a navigable list,
- * and highlights the active section as the user scrolls. The component supports custom header
- * slots, depth limiting, smooth scrolling, and extensive theming via CSS custom properties.
- *
- * To exclude a heading from the generated table of contents, add the `m3e-toc-ignore` attribute
- * to that heading element.
- *
- * @example
- * ```html
- * <m3e-toc for="content" max-depth="3">
- *   <span slot="overline">Contents</span>
- *   <span slot="title">Documentation</span>
- * </m3e-toc>
- * <div id="content">
- *   <h2>Introduction</h2>
- *   <h2>Getting Started</h2>
- *   <h3>Installation</h3>
- *   <h3>Usage</h3>
- *   <h2>API Reference</h2>
- * </div>
- * ```
- *
- * @tag m3e-toc
- *
- * @slot - Renders content between the header and items.
- * @slot overline - Renders the overline of the table of contents.
- * @slot title - Renders the title of the table of contents.
- *
- * @attr for - The query selector used to specify the element related to this element.
- * @attr max-depth - The maximum depth of the table of contents.
- *
- * @cssprop --m3e-toc-width - Width of the table of contents.
- * @cssprop --m3e-toc-item-shape - Border radius of TOC items and active indicator.
- * @cssprop --m3e-toc-active-indicator-color - Border color of the active indicator.
- * @cssprop --m3e-toc-active-indicator-animation-duration - Animation duration for the active indicator.
- * @cssprop --m3e-toc-item-padding - Inline padding for TOC items and header.
- * @cssprop --m3e-toc-header-space - Block space below and between header elements.
- * @cssprop --m3e-toc-overline-font-size - Font size for the overline slot.
- * @cssprop --m3e-toc-overline-font-weight - Font weight for the overline slot.
- * @cssprop --m3e-toc-overline-line-height - Line height for the overline slot.
- * @cssprop --m3e-toc-overline-tracking - Letter spacing for the overline slot.
- * @cssprop --m3e-toc-overline-color - Text color for the overline slot.
- * @cssprop --m3e-toc-title-font-size - Font size for the title slot.
- * @cssprop --m3e-toc-title-font-weight - Font weight for the title slot.
- * @cssprop --m3e-toc-title-line-height - Line height for the title slot.
- * @cssprop --m3e-toc-title-tracking - Letter spacing for the title slot.
- * @cssprop --m3e-toc-title-color - Text color for the title slot.
- */
-@customElement("m3e-toc")
-export class M3eTocElement extends HtmlFor(AttachInternals(Role(LitElement, "navigation"))) {
-  /** The styles of the element. */
-  static override styles: CSSResultGroup = css`
-    :host {
-      display: inline-block;
-      position: relative;
-      overflow-y: auto;
-      scrollbar-width: ${DesignToken.scrollbar.thinWidth};
-      scrollbar-color: ${DesignToken.scrollbar.color};
-      width: var(--m3e-toc-width, 9.75rem);
-    }
-    ul {
-      list-style: none;
-      padding-inline-start: unset;
-      margin-block-start: unset;
-      margin-block-end: unset;
-    }
-    ul,
-    li {
-      display: flex;
-      flex-direction: column;
-      align-items: stretch;
-    }
-    m3e-toc-item {
-      flex: none;
-    }
-    .active-indicator {
-      position: absolute;
-      pointer-events: none;
-      box-sizing: border-box;
-      left: 0;
-      right: 0;
-
-      border-radius: var(--m3e-toc-item-shape, ${DesignToken.shape.corner.largeIncreased});
-      border: 1px solid var(--m3e-toc-active-indicator-color, ${DesignToken.color.outline});
-      transition: ${unsafeCSS(`visibility var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})
-          ${DesignToken.motion.easing.standard},
-        height var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})
-          ${DesignToken.motion.easing.standard},
-        top var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})
-          ${DesignToken.motion.easing.standard}`)};
-    }
-    .header {
-      display: flex;
-      flex-direction: column;
-      align-items: stretch;
-      padding-inline-start: var(--m3e-toc-item-padding, 1rem);
-      padding-block-end: var(--m3e-toc-header-space, 0.5rem);
-      row-gap: var(--m3e-toc-header-space, 0.5rem);
-    }
-    .overline {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .title {
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      line-clamp: 2;
-    }
-    :host(:not(.-with-overline)) .overline,
-    :host(:not(.-with-title)) .title,
-    :host(:not(.-with-overline):not(.-with-title)) .header {
-      display: none;
-    }
-    ::slotted([slot="overline"]) {
-      font-size: var(--m3e-toc-overline-font-size, ${DesignToken.typescale.standard.label.small.fontSize});
-      font-weight: var(--m3e-toc-overline-font-weight, ${DesignToken.typescale.standard.label.small.fontWeight});
-      line-height: var(--m3e-toc-overline-line-height, ${DesignToken.typescale.standard.label.small.lineHeight});
-      letter-spacing: var(--m3e-toc-overline-tracking, ${DesignToken.typescale.standard.label.small.tracking});
-      color: var(--m3e-toc-overline-color, ${DesignToken.color.onSurfaceVariant});
-    }
-    ::slotted([slot="title"]) {
-      font-size: var(--m3e-toc-title-font-size, ${DesignToken.typescale.standard.headline.small.fontSize});
-      font-weight: var(--m3e-toc-title-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight});
-      line-height: var(--m3e-toc-title-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight});
-      letter-spacing: var(--m3e-toc-title-tracking, ${DesignToken.typescale.standard.headline.small.tracking});
-      color: var(--m3e-toc-title-color, ${DesignToken.color.onSurface});
-    }
-    :host(.-no-animate) .active-indicator {
-      transition: none;
-    }
-    @media (prefers-reduced-motion) {
-      .active-indicator {
-        transition: none;
-      }
-    }
-  `;
-
-  /** @private */ @state() private _toc: Array<TocNode> = [];
-  /** @private */ @query(".active-indicator") private readonly _activeIndicator!: HTMLElement;
-  /** @private */ #ignoreScroll = false;
-
-  /** @private */ readonly #selectionManager = new SelectionManager<M3eTocItemElement>()
-    .withHomeAndEnd()
-    .withVerticalOrientation()
-    .disableRovingTabIndex()
-    .onSelectedItemsChange(() => {
-      if (this._activeIndicator) {
-        const item = this.#selectionManager.selectedItems[0];
-        if (!item) {
-          this.classList.toggle("-no-animate", true);
-          this._activeIndicator.style.top = `0px`;
-          this._activeIndicator.style.height = `0px`;
-          this._activeIndicator.style.visibility = "hidden";
-        } else {
-          this._activeIndicator.style.top = `${item.offsetTop}px`;
-          this._activeIndicator.style.height = `${item.clientHeight}px`;
-          this._activeIndicator.style.visibility = "";
-
-          if (this.classList.contains("-no-animate")) {
-            setTimeout(() => this.classList.toggle("-no-animate", false), 40);
-          }
-        }
-      }
-    });
-
-  /** @private */
-  readonly #intersectionController = new IntersectionController(this, {
-    target: null,
-    callback: (entries) => {
-      if (!this.control || this.#ignoreScroll) return;
-
-      const targetOffset = this.control.scrollTop;
-      let closestElement: HTMLElement | null = null;
-      let closestDistance = Number.POSITIVE_INFINITY;
-
-      entries
-        .filter((x) => x.isIntersecting)
-        .map((x) => <HTMLElement>x.target)
-        .forEach((item) => {
-          const offsetTop = item.offsetTop;
-          const distance = Math.abs(offsetTop - targetOffset);
-          if (distance < closestDistance) {
-            closestDistance = distance;
-            closestElement = item;
-          }
-        });
-
-      if (closestElement) {
-        const item = this.#selectionManager.items.find((x) => x.node?.element === closestElement);
-        if (item) {
-          this.#selectionManager.select(item);
-        }
-      }
-    },
-  });
-
-  /** @private */
-  readonly #scrollController = new ScrollController(this, {
-    target: null,
-    callback: () => (this.#ignoreScroll = false),
-    debounce: true,
-  });
-
-  /** @private */
-  readonly #mutationController = new MutationController(this, {
-    target: null,
-    config: {
-      childList: true,
-      subtree: true,
-    },
-    callback: () => this._updateToc(),
-  });
-
-  /**
-   * The maximum depth of the table of contents.
-   * @default 2
-   */
-  @property({ attribute: "max-depth", type: Number }) maxDepth = 2;
-
-  /** @inheritdoc */
-  override attach(control: HTMLElement): void {
-    super.attach(control);
-    this.#mutationController.observe(control);
-    this.#scrollController.observe(control);
-    this.#generateToc();
-  }
-
-  /** @inheritdoc */
-  override detach(): void {
-    if (this.control) {
-      this.#mutationController.unobserve(this.control);
-      this.#scrollController.unobserve(this.control);
-    }
-    super.detach();
-    this.#generateToc();
-  }
-
-  /** @inheritdoc */
-  protected override update(changedProperties: PropertyValues<this>): void {
-    super.update(changedProperties);
-
-    if (changedProperties.has("maxDepth")) {
-      this.#generateToc();
-    }
-  }
-
-  /** @inheritdoc */
-  protected override updated(_changedProperties: PropertyValues): void {
-    super.updated(_changedProperties);
-
-    if (_changedProperties.has("_toc")) {
-      const { added, removed } = this.#selectionManager.setItems([
-        ...(this.shadowRoot?.querySelectorAll("m3e-toc-item") ?? []),
-      ]);
-
-      if (!this.#selectionManager.activeItem) {
-        this.classList.toggle("-no-animate", true);
-        this.#selectionManager.updateActiveItem(added.find((x) => !x.disabled));
-      }
-
-      for (const item of added) {
-        if (item.node) {
-          this.#intersectionController.observe(item.node.element);
-        }
-      }
-
-      for (const item of removed) {
-        if (item.node) {
-          this.#intersectionController.unobserve(item.node.element);
-        }
-      }
-    }
-  }
-
-  /** @inheritdoc */
-  protected override render(): unknown {
-    return html`<div class="header">
-        <div class="overline">
-          <slot name="overline" @slotchange="${this.#handleOverlineSlotChange}"></slot>
-        </div>
-        <div class="title">
-          <slot name="title" @slotchange="${this.#handleTitleSlotChange}"></slot>
-        </div>
-      </div>
-      <slot></slot>
-      <ul class="list">
-        ${this._toc.map((x) => this.#renderNode(x))}
-      </ul>
-      <div class="active-indicator" aria-hidden="true"></div>`;
-  }
-
-  /** @private */
-  #renderNode(node: TocNode): unknown {
-    return html`<li>
-      <m3e-toc-item tabindex="-1" .node="${node}" @click="${this.#handleClick}">${node.label}</m3e-toc-item>
-      ${node.nodes.length == 0
-        ? nothing
-        : html`<ul>
-            ${node.nodes.map((x) => this.#renderNode(x))}
-          </ul>`}
-    </li>`;
-  }
-
-  /** @private */
-  #handleOverlineSlotChange(e: Event): void {
-    this.classList.toggle("-with-overline", hasAssignedNodes(<HTMLSlotElement>e.target));
-  }
-
-  /** @private */
-  #handleTitleSlotChange(e: Event): void {
-    this.classList.toggle("-with-title", hasAssignedNodes(<HTMLSlotElement>e.target));
-  }
-
-  /** @private */
-  #handleClick(e: Event): void {
-    if (e.target instanceof M3eTocItemElement && !e.target.disabled && e.target.node?.element) {
-      this.#ignoreScroll = true;
-      e.target.node.element.scrollIntoView({ block: "start", inline: "start", behavior: "smooth" });
-      this.#selectionManager.updateActiveItem(e.target);
-      this.#selectionManager.select(e.target);
-    }
-  }
-
-  /** @private */
-  #generateToc(): void {
-    this._toc = this.control ? TocGenerator.generate(this.control, Math.max(1, Math.min(this.maxDepth, 6))) : [];
-    this.requestUpdate();
-  }
-
-  /** @private */
-  @debounce(40)
-  private _updateToc(): void {
-    this.#generateToc();
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "m3e-toc": M3eTocElement;
-  }
-}

package/src/TocGenerator.ts

@@ -1,74 +0,0 @@
-import { getTextContent, guid } from "@m3e/core";
-
-/** A node in a table of contents. */
-export interface TocNode {
-  /** An opaque identifier that uniquely identifies the node. */
-  id: string;
-
-  /** The level of the node. */
-  level: number;
-
-  /** The text to display for the node. */
-  label: string;
-
-  /** The element of the node. */
-  element: HTMLElement;
-
-  /** The child nodes. */
-  nodes: TocNode[];
-}
-
-/** Provides functionality used to generate a table of contents used for in-page navigation. */
-export class TocGenerator {
-  /**
-   * Generates nodes from which to construct a table of contents for in-page navigation.
-   * @param {HTMLElement} element The element for which to generate a table of contents.
-   * @param {number} [maxDepth=6] The maximum depth of the table of contents.
-   * @returns {Array<TocNode>} The top-level nodes of the table of contents.
-   */
-  static generate(element: HTMLElement, maxDepth: number = 6): Array<TocNode> {
-    const maxLevel = 6;
-    let topLevel = maxLevel;
-    const nodes = new Array<TocNode>();
-    element
-      .querySelectorAll<HTMLElement>(
-        "h1:not([m3e-toc-ignore]),h2:not([m3e-toc-ignore]),h3:not([m3e-toc-ignore]),h4:not([m3e-toc-ignore]),h5:not([m3e-toc-ignore]),h6:not([m3e-toc-ignore]),m3e-heading[level]:not([m3e-toc-ignore])"
-      )
-      .forEach((element) => {
-        const level = TocGenerator.#getHeaderLevel(element);
-        topLevel = Math.min(level, topLevel);
-        nodes.push({
-          id: element.id || guid(),
-          element,
-          level,
-          label: getTextContent(element, true),
-          nodes: new Array<TocNode>(),
-        });
-      });
-
-    for (let level = topLevel + maxDepth - 1; level > topLevel; level--) {
-      for (let i = 0; i < nodes.length; i++) {
-        const node = nodes[i];
-        if (node.level === level) {
-          for (let j = i; j >= 0; j--) {
-            const prev = nodes[j];
-            if (prev.level < level) {
-              prev.nodes.push(node);
-              break;
-            }
-          }
-        }
-      }
-    }
-
-    nodes.forEach((x) => (x.level -= topLevel - 1));
-    return nodes.filter((x) => x.level === 1);
-  }
-
-  /** @internal */
-  static #getHeaderLevel(element: HTMLElement): number {
-    return element.tagName.startsWith("H")
-      ? parseInt(element.tagName.substring(1))
-      : parseInt(element.getAttribute("level") ?? "0");
-  }
-}

package/src/TocItemElement.ts

@@ -1,121 +0,0 @@
-import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from "lit";
-import { customElement, query, state } from "lit/decorators.js";
-
-import { AttachInternals, DesignToken, Disabled, M3eStateLayerElement, Role, Selected } from "@m3e/core";
-
-import { TocNode } from "./TocGenerator";
-
-/**
- * An item in a table of contents.
- * @tag m3e-toc-item
- *
- * @slot - Renders the label of the item.
- *
- * @attr disabled - A value indicating whether the element is disabled.
- *
- * @cssprop --m3e-toc-item-shape - Border radius of the TOC item.
- * @cssprop --m3e-toc-item-padding-block - Block padding for the TOC item.
- * @cssprop --m3e-toc-item-padding - Inline padding for the TOC item.
- * @cssprop --m3e-toc-item-inset - Indentation per level for the TOC item.
- * @cssprop --m3e-toc-active-indicator-animation-duration - Animation duration for the active indicator.
- * @cssprop --m3e-toc-item-font-size - Font size for unselected items.
- * @cssprop --m3e-toc-item-font-weight - Font weight for unselected items.
- * @cssprop --m3e-toc-item-line-height - Line height for unselected items.
- * @cssprop --m3e-toc-item-tracking - Letter spacing for unselected items.
- * @cssprop --m3e-toc-item-color - Text color for unselected items.
- * @cssprop --m3e-toc-item-selected-font-size - Font size for selected items.
- * @cssprop --m3e-toc-item-selected-font-weight - Font weight for selected items.
- * @cssprop --m3e-toc-item-selected-line-height - Line height for selected items.
- * @cssprop --m3e-toc-item-selected-tracking - Letter spacing for selected items.
- * @cssprop --m3e-toc-item-selected-color - Text color for selected items.
- */
-@customElement("m3e-toc-item")
-export class M3eTocItemElement extends Selected(Disabled(AttachInternals(Role(LitElement, "link")))) {
-  /** The styles of the element. */
-  static override styles: CSSResultGroup = css`
-    :host {
-      display: inline-block;
-      position: relative;
-      user-select: none;
-      border-radius: var(--m3e-toc-item-shape, ${DesignToken.shape.corner.largeIncreased});
-      padding-block: var(--m3e-toc-item-padding-block, 0.5rem);
-    }
-    :host(:not(:disabled)) {
-      cursor: pointer;
-    }
-    .base {
-      padding-inline-start: calc(
-        var(--m3e-toc-item-padding, 1rem) + calc(var(--m3e-toc-item-inset, 0.75rem) * var(--_level, 0))
-      );
-      padding-inline-end: var(--m3e-toc-item-padding, 1rem);
-      transition: ${unsafeCSS(
-        `color var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1}) ${DesignToken.motion.easing.standard}`
-      )};
-    }
-    :host(:not([selected])) {
-      font-size: var(--m3e-toc-item-font-size, ${DesignToken.typescale.standard.body.large.fontSize});
-      font-weight: var(--m3e-toc-item-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight});
-      line-height: var(--m3e-toc-item-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});
-      letter-spacing: var(--m3e-toc-item-tracking, ${DesignToken.typescale.standard.body.large.tracking});
-      color: var(--m3e-toc-item-color, ${DesignToken.color.onSurfaceVariant});
-    }
-    :host([selected]) {
-      font-size: var(--m3e-toc-item-selected-font-size, ${DesignToken.typescale.emphasized.body.large.fontSize});
-      font-weight: var(--m3e-toc-item-selected-font-weight, ${DesignToken.typescale.emphasized.body.large.fontWeight});
-      line-height: var(--m3e-toc-item-selected-line-height, ${DesignToken.typescale.emphasized.body.large.lineHeight});
-      letter-spacing: var(--m3e-toc-item-selected-tracking, ${DesignToken.typescale.emphasized.body.large.tracking});
-      color: var(--m3e-toc-item-selected-color, ${DesignToken.color.onSecondaryContainer});
-    }
-    .base {
-      justify-content: unset;
-    }
-    .state-layer {
-      --m3e-state-layer-focus-opacity: 0;
-    }
-    @media (prefers-reduced-motion) {
-      .base {
-        transition: none;
-      }
-    }
-  `;
-
-  /** @private */ @query(".base") private readonly _base?: HTMLElement;
-  /** @private */ @query(".state-layer") private readonly _stateLayer?: M3eStateLayerElement;
-  /** @internal */ @state() node?: TocNode;
-
-  /** @internal */
-  protected override update(changedProperties: PropertyValues<this>): void {
-    super.update(changedProperties);
-
-    if (changedProperties.has("selected")) {
-      this.ariaSelected = null;
-      this.ariaCurrent = this.selected ? "true" : null;
-    }
-
-    if (changedProperties.has("node")) {
-      if (this.node) {
-        this._base?.style.setProperty("--_level", `${this.node.level - 1}`);
-      } else {
-        this._base?.style.removeProperty("--_level");
-      }
-    }
-  }
-
-  /** @inheritdoc */
-  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {
-    super.firstUpdated(_changedProperties);
-    this._stateLayer?.attach(this);
-  }
-
-  /** @inheritdoc */
-  override render(): unknown {
-    return html`<m3e-state-layer class="state-layer"></m3e-state-layer>
-      <div class="base"><slot></slot></div>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "m3e-toc-item": M3eTocItemElement;
-  }
-}

package/src/index.ts

@@ -1,3 +0,0 @@
-export * from "./TocElement";
-export * from "./TocGenerator";
-export * from "./TocItemElement";

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "outDir": "./dist/src"
-  },
-  "include": ["src/**/*.ts", "**/*.mjs", "**/*.js"],
-  "exclude": []
-}