@m3e/web 2.5.6 → 2.5.8

package/dist/toc.js

@@ -152,6 +152,9 @@ var _M3eTocElement_instances, _M3eTocElement_ignoreScroll, _M3eTocElement_select
  * @attr max-depth - The maximum depth of the table of contents.
  *
  * @cssprop --m3e-toc-width - Width of the table of contents.
+ * @cssprop --m3e-toc-container-color - Background color of the table of contents container.
+ * @cssprop --m3e-toc-container-padding-inline - Inline padding of the table of contents container.
+ * @cssprop --m3e-toc-container-padding-block - Block padding of the table of contents container.
  * @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.
@@ -186,10 +189,23 @@ let M3eTocElement = class M3eTocElement extends HtmlFor(AttachInternals(Role(Lit
           this._activeIndicator.style.height = `0px`;
           this._activeIndicator.style.visibility = "hidden";
         } else {
-          scrollIntoViewIfNeeded(item, this, {
-            block: "nearest",
-            behavior: "smooth"
-          });
+          const scrollContainer = this._scrollContainer;
+          if (item === __classPrivateFieldGet(this, _M3eTocElement_selectionManager, "f").items[0]) {
+            scrollContainer.scrollTo({
+              top: 0,
+              behavior: "smooth"
+            });
+          } else if (item === __classPrivateFieldGet(this, _M3eTocElement_selectionManager, "f").items[__classPrivateFieldGet(this, _M3eTocElement_selectionManager, "f").items.length - 1]) {
+            scrollContainer.scrollTo({
+              top: scrollContainer.scrollHeight - scrollContainer.clientHeight,
+              behavior: "smooth"
+            });
+          } else {
+            scrollIntoViewIfNeeded(item, this._scrollContainer, {
+              block: "nearest",
+              behavior: "smooth"
+            });
+          }
           this._activeIndicator.style.top = `${item.offsetTop}px`;
           this._activeIndicator.style.height = `${item.clientHeight}px`;
           this._activeIndicator.style.visibility = item.clientHeight == 0 ? "hidden" : "";
@@ -293,7 +309,7 @@ let M3eTocElement = class M3eTocElement extends HtmlFor(AttachInternals(Role(Lit
   }
   /** @inheritdoc */
   render() {
-    return html`<div class="header"><div class="overline"><slot name="overline" @slotchange="${__classPrivateFieldGet(this, _M3eTocElement_instances, "m", _M3eTocElement_handleOverlineSlotChange)}"></slot></div><div class="title"><slot name="title" @slotchange="${__classPrivateFieldGet(this, _M3eTocElement_instances, "m", _M3eTocElement_handleTitleSlotChange)}"></slot></div></div><slot></slot><ul class="list">${this._toc.map(x => __classPrivateFieldGet(this, _M3eTocElement_instances, "m", _M3eTocElement_renderNode).call(this, x))}</ul><div class="active-indicator" aria-hidden="true"></div>`;
+    return html`<div class="base"><div class="scroll-container"><div class="header"><div class="overline"><slot name="overline" @slotchange="${__classPrivateFieldGet(this, _M3eTocElement_instances, "m", _M3eTocElement_handleOverlineSlotChange)}"></slot></div><div class="title"><slot name="title" @slotchange="${__classPrivateFieldGet(this, _M3eTocElement_instances, "m", _M3eTocElement_handleTitleSlotChange)}"></slot></div></div><slot></slot><ul class="list">${this._toc.map(x => __classPrivateFieldGet(this, _M3eTocElement_instances, "m", _M3eTocElement_renderNode).call(this, x))}</ul><div class="active-indicator" aria-hidden="true"></div></div></div>`;
   }
   /** @private */
   _updateToc() {
@@ -330,7 +346,7 @@ _M3eTocElement_generateToc = function _M3eTocElement_generateToc() {
   this._toc = this.control ? TocGenerator.generate(this.control, Math.max(1, Math.min(this.maxDepth, 6))) : [];
 };
 /** The styles of the element. */
-M3eTocElement.styles = 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})
+M3eTocElement.styles = css`:host { display: inline-block; width: calc(var(--m3e-toc-width, 9.75rem)); } .base { border-radius: var(--m3e-toc-container-shape, ${DesignToken.shape.corner.none}); box-sizing: border-box; overflow: hidden; height: 100%; width: 100%; } .scroll-container { height: inherit; width: inherit; box-sizing: inherit; background-color: var(--m3e-toc-container-color, transparent); border-radius: inherit; padding-inline: var(--m3e-toc-container-padding-inline, 0px); padding-block: var(--m3e-toc-container-padding-block, 0px); position: relative; overflow-y: auto; overflow-x: hidden; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; } 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: var(--m3e-toc-container-padding-inline, 0px); right: var(--m3e-toc-container-padding-inline, 0px); 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},
@@ -338,6 +354,7 @@ M3eTocElement.styles = css`:host { display: inline-block; position: relative; ov
           ${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(:is(:state(--with-overline), :--with-overline))) .overline, :host(:not(:is(:state(--with-title), :--with-title))) .title, :host(:not(:is(:state(--with-overline), :--with-overline)):not(:is(:state(--with-title), :--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(:is(:state(--no-animate), :--no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } }`;
 __decorate([state()], M3eTocElement.prototype, "_toc", void 0);
 __decorate([query(".active-indicator")], M3eTocElement.prototype, "_activeIndicator", void 0);
+__decorate([query(".scroll-container")], M3eTocElement.prototype, "_scrollContainer", void 0);
 __decorate([property({
   attribute: "max-depth",
   type: Number

package/dist/toc.js.map

@@ -1 +1 @@
-{"version":3,"file":"toc.js","sources":["../../src/toc/TocItemElement.ts","../../src/toc/TocGenerator.ts","../../src/toc/TocElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { query, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  Selected,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { TocNode } from \"./TocGenerator\";\r\n\r\n/**\r\n * An item in a table of contents.\r\n * @tag m3e-toc-item\r\n *\r\n * @slot - Renders the label of the item.\r\n *\r\n * @attr disabled - A value indicating whether the element is disabled.\r\n *\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-toc-item-shape - Border radius of the TOC item.\r\n * @cssprop --m3e-toc-item-padding-block - Block padding for the TOC item.\r\n * @cssprop --m3e-toc-item-padding - Inline padding for the TOC item.\r\n * @cssprop --m3e-toc-item-inset - Indentation per level for the TOC item.\r\n * @cssprop --m3e-toc-active-indicator-animation-duration - Animation duration for the active indicator.\r\n * @cssprop --m3e-toc-item-font-size - Font size for unselected items.\r\n * @cssprop --m3e-toc-item-font-weight - Font weight for unselected items.\r\n * @cssprop --m3e-toc-item-line-height - Line height for unselected items.\r\n * @cssprop --m3e-toc-item-tracking - Letter spacing for unselected items.\r\n * @cssprop --m3e-toc-item-color - Text color for unselected items.\r\n * @cssprop --m3e-toc-item-selected-font-size - Font size for selected items.\r\n * @cssprop --m3e-toc-item-selected-font-weight - Font weight for selected items.\r\n * @cssprop --m3e-toc-item-selected-line-height - Line height for selected items.\r\n * @cssprop --m3e-toc-item-selected-tracking - Letter spacing for selected items.\r\n * @cssprop --m3e-toc-item-selected-color - Text color for selected items.\r\n */\r\n@customElement(\"m3e-toc-item\")\r\nexport class M3eTocItemElement extends Selected(Disabled(AttachInternals(Role(LitElement, \"link\")))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      position: relative;\r\n      user-select: none;\r\n      outline: none;\r\n      border-radius: var(--m3e-toc-item-shape, ${DesignToken.shape.corner.largeIncreased});\r\n      padding-block: var(--m3e-toc-item-padding-block, 0.5rem);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    .base {\r\n      padding-inline-start: calc(\r\n        var(--m3e-toc-item-padding, 1rem) + calc(var(--m3e-toc-item-inset, 0.75rem) * var(--_level, 0))\r\n      );\r\n      padding-inline-end: var(--m3e-toc-item-padding, 1rem);\r\n      transition: ${unsafeCSS(\r\n        `color var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1}) ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    :host(:not([selected])) {\r\n      font-size: var(--m3e-toc-item-font-size, ${DesignToken.typescale.standard.body.large.fontSize});\r\n      font-weight: var(--m3e-toc-item-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight});\r\n      line-height: var(--m3e-toc-item-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});\r\n      letter-spacing: var(--m3e-toc-item-tracking, ${DesignToken.typescale.standard.body.large.tracking});\r\n      color: var(--m3e-toc-item-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host([selected]) {\r\n      font-size: var(--m3e-toc-item-selected-font-size, ${DesignToken.typescale.emphasized.body.large.fontSize});\r\n      font-weight: var(--m3e-toc-item-selected-font-weight, ${DesignToken.typescale.emphasized.body.large.fontWeight});\r\n      line-height: var(--m3e-toc-item-selected-line-height, ${DesignToken.typescale.emphasized.body.large.lineHeight});\r\n      letter-spacing: var(--m3e-toc-item-selected-tracking, ${DesignToken.typescale.emphasized.body.large.tracking});\r\n      color: var(--m3e-toc-item-selected-color, ${DesignToken.color.onSurface});\r\n    }\r\n    .base {\r\n      justify-content: unset;\r\n    }\r\n    .state-layer {\r\n      --m3e-state-layer-focus-opacity: 0;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".base\") private readonly _base?: HTMLElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @internal */ @state() node?: TocNode;\r\n\r\n  /** @internal */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      this.ariaSelected = null;\r\n      this.ariaCurrent = this.selected ? \"true\" : null;\r\n    }\r\n\r\n    if (changedProperties.has(\"node\")) {\r\n      if (this.node) {\r\n        this._base?.style.setProperty(\"--_level\", `${this.node.level - 1}`);\r\n      } else {\r\n        this._base?.style.removeProperty(\"--_level\");\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this._stateLayer?.attach(this);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<m3e-state-layer class=\"state-layer\"></m3e-state-layer>\r\n      <div class=\"base\"><slot></slot></div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-toc-item\": M3eTocItemElement;\r\n  }\r\n}\r\n","import { getTextContent, guid } from \"@m3e/web/core\";\r\n\r\n/** A node in a table of contents. */\r\nexport interface TocNode {\r\n  /** An opaque identifier that uniquely identifies the node. */\r\n  id: string;\r\n\r\n  /** The level of the node. */\r\n  level: number;\r\n\r\n  /** The text to display for the node. */\r\n  label: string;\r\n\r\n  /** The element of the node. */\r\n  element: HTMLElement;\r\n\r\n  /** The child nodes. */\r\n  nodes: TocNode[];\r\n}\r\n\r\n/** Provides functionality used to generate a table of contents used for in-page navigation. */\r\nexport class TocGenerator {\r\n  /**\r\n   * Generates nodes from which to construct a table of contents for in-page navigation.\r\n   * @param {HTMLElement} element The element for which to generate a table of contents.\r\n   * @param {number} [maxDepth=6] The maximum depth of the table of contents.\r\n   * @returns {Array<TocNode>} The top-level nodes of the table of contents.\r\n   */\r\n  static generate(element: HTMLElement, maxDepth: number = 6): Array<TocNode> {\r\n    const maxLevel = 6;\r\n    let topLevel = maxLevel;\r\n    const nodes = new Array<TocNode>();\r\n    element\r\n      .querySelectorAll<HTMLElement>(\r\n        \"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])\",\r\n      )\r\n      .forEach((element) => {\r\n        const level = TocGenerator.#getHeaderLevel(element);\r\n        topLevel = Math.min(level, topLevel);\r\n        nodes.push({\r\n          id: element.id || guid(),\r\n          element,\r\n          level,\r\n          label: getTextContent(element, true),\r\n          nodes: new Array<TocNode>(),\r\n        });\r\n      });\r\n\r\n    for (let level = topLevel + maxDepth - 1; level > topLevel; level--) {\r\n      for (let i = 0; i < nodes.length; i++) {\r\n        const node = nodes[i];\r\n        if (node.level === level) {\r\n          for (let j = i; j >= 0; j--) {\r\n            const prev = nodes[j];\r\n            if (prev.level < level) {\r\n              prev.nodes.push(node);\r\n              break;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    nodes.forEach((x) => (x.level -= topLevel - 1));\r\n    return nodes.filter((x) => x.level === 1);\r\n  }\r\n\r\n  /** @internal */\r\n  static #getHeaderLevel(element: HTMLElement): number {\r\n    return element.tagName.startsWith(\"H\")\r\n      ? parseInt(element.tagName.substring(1))\r\n      : parseInt(element.getAttribute(\"level\") ?? \"0\");\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  debounce,\r\n  DesignToken,\r\n  hasAssignedNodes,\r\n  hasCustomState,\r\n  HtmlFor,\r\n  IntersectionController,\r\n  MutationController,\r\n  Role,\r\n  ScrollController,\r\n  scrollIntoViewIfNeeded,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eTocItemElement } from \"./TocItemElement\";\r\nimport { TocGenerator, TocNode } from \"./TocGenerator\";\r\n\r\n/**\r\n * A table of contents that provides in-page scroll navigation.\r\n *\r\n * @description\r\n * The `m3e-toc` component generates a hierarchical table of contents for in-page navigation.\r\n * It automatically detects headings or sections in a target element, builds a navigable list,\r\n * and highlights the active section as the user scrolls. The component supports custom header\r\n * slots, depth limiting, smooth scrolling, and extensive theming via CSS custom properties.\r\n *\r\n * To exclude a heading from the generated table of contents, add the `m3e-toc-ignore` attribute\r\n * to that heading element.\r\n *\r\n * @example\r\n * ```html\r\n * <m3e-toc for=\"content\" max-depth=\"3\">\r\n *   <span slot=\"overline\">Contents</span>\r\n *   <span slot=\"title\">Documentation</span>\r\n * </m3e-toc>\r\n * <div id=\"content\">\r\n *   <h2>Introduction</h2>\r\n *   <h2>Getting Started</h2>\r\n *   <h3>Installation</h3>\r\n *   <h3>Usage</h3>\r\n *   <h2>API Reference</h2>\r\n * </div>\r\n * ```\r\n *\r\n * @tag m3e-toc\r\n *\r\n * @slot - Renders content between the header and items.\r\n * @slot overline - Renders the overline of the table of contents.\r\n * @slot title - Renders the title of the table of contents.\r\n *\r\n * @attr for - The identifier of the interactive control to which this element is attached.\r\n * @attr max-depth - The maximum depth of the table of contents.\r\n *\r\n * @cssprop --m3e-toc-width - Width of the table of contents.\r\n * @cssprop --m3e-toc-item-shape - Border radius of TOC items and active indicator.\r\n * @cssprop --m3e-toc-active-indicator-color - Border color of the active indicator.\r\n * @cssprop --m3e-toc-active-indicator-animation-duration - Animation duration for the active indicator.\r\n * @cssprop --m3e-toc-item-padding - Inline padding for TOC items and header.\r\n * @cssprop --m3e-toc-header-space - Block space below and between header elements.\r\n * @cssprop --m3e-toc-overline-font-size - Font size for the overline slot.\r\n * @cssprop --m3e-toc-overline-font-weight - Font weight for the overline slot.\r\n * @cssprop --m3e-toc-overline-line-height - Line height for the overline slot.\r\n * @cssprop --m3e-toc-overline-tracking - Letter spacing for the overline slot.\r\n * @cssprop --m3e-toc-overline-color - Text color for the overline slot.\r\n * @cssprop --m3e-toc-title-font-size - Font size for the title slot.\r\n * @cssprop --m3e-toc-title-font-weight - Font weight for the title slot.\r\n * @cssprop --m3e-toc-title-line-height - Line height for the title slot.\r\n * @cssprop --m3e-toc-title-tracking - Letter spacing for the title slot.\r\n * @cssprop --m3e-toc-title-color - Text color for the title slot.\r\n */\r\n@customElement(\"m3e-toc\")\r\nexport class M3eTocElement extends HtmlFor(AttachInternals(Role(LitElement, \"navigation\"))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      position: relative;\r\n      overflow-y: auto;\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n      width: var(--m3e-toc-width, 9.75rem);\r\n    }\r\n    ul {\r\n      list-style: none;\r\n      padding-inline-start: unset;\r\n      margin-block-start: unset;\r\n      margin-block-end: unset;\r\n    }\r\n    ul,\r\n    li {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n    }\r\n    m3e-toc-item {\r\n      flex: none;\r\n    }\r\n    .active-indicator {\r\n      position: absolute;\r\n      pointer-events: none;\r\n      box-sizing: border-box;\r\n      left: 0;\r\n      right: 0;\r\n\r\n      border-radius: var(--m3e-toc-item-shape, ${DesignToken.shape.corner.largeIncreased});\r\n      border: 1px solid var(--m3e-toc-active-indicator-color, ${DesignToken.color.outline});\r\n      transition: ${unsafeCSS(`visibility var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})\r\n          ${DesignToken.motion.easing.standard},\r\n        height var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})\r\n          ${DesignToken.motion.easing.standard},\r\n        top var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})\r\n          ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    .header {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n      padding-inline-start: var(--m3e-toc-item-padding, 1rem);\r\n      padding-block-end: var(--m3e-toc-header-space, 0.5rem);\r\n      row-gap: var(--m3e-toc-header-space, 0.5rem);\r\n    }\r\n    .overline {\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n    }\r\n    .title {\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-clamp: 2;\r\n    }\r\n    :host(:not(:is(:state(--with-overline), :--with-overline))) .overline,\r\n    :host(:not(:is(:state(--with-title), :--with-title))) .title,\r\n    :host(:not(:is(:state(--with-overline), :--with-overline)):not(:is(:state(--with-title), :--with-title))) .header {\r\n      display: none;\r\n    }\r\n    ::slotted([slot=\"overline\"]) {\r\n      font-size: var(--m3e-toc-overline-font-size, ${DesignToken.typescale.standard.label.small.fontSize});\r\n      font-weight: var(--m3e-toc-overline-font-weight, ${DesignToken.typescale.standard.label.small.fontWeight});\r\n      line-height: var(--m3e-toc-overline-line-height, ${DesignToken.typescale.standard.label.small.lineHeight});\r\n      letter-spacing: var(--m3e-toc-overline-tracking, ${DesignToken.typescale.standard.label.small.tracking});\r\n      color: var(--m3e-toc-overline-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    ::slotted([slot=\"title\"]) {\r\n      font-size: var(--m3e-toc-title-font-size, ${DesignToken.typescale.standard.headline.small.fontSize});\r\n      font-weight: var(--m3e-toc-title-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight});\r\n      line-height: var(--m3e-toc-title-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight});\r\n      letter-spacing: var(--m3e-toc-title-tracking, ${DesignToken.typescale.standard.headline.small.tracking});\r\n      color: var(--m3e-toc-title-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:is(:state(--no-animate), :--no-animate)) .active-indicator {\r\n      transition: none;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .active-indicator {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @state() private _toc: Array<TocNode> = [];\r\n  /** @private */ @query(\".active-indicator\") private readonly _activeIndicator!: HTMLElement;\r\n  /** @private */ #ignoreScroll = false;\r\n\r\n  /** @private */ readonly #selectionManager = new SelectionManager<M3eTocItemElement>()\r\n    .withHomeAndEnd()\r\n    .withVerticalOrientation()\r\n    .disableRovingTabIndex()\r\n    .onSelectedItemsChange(() => {\r\n      if (this._activeIndicator) {\r\n        const item = this.#selectionManager.selectedItems[0];\r\n        if (!item) {\r\n          setCustomState(this, \"--no-animate\", true);\r\n          this._activeIndicator.style.top = `0px`;\r\n          this._activeIndicator.style.height = `0px`;\r\n          this._activeIndicator.style.visibility = \"hidden\";\r\n        } else {\r\n          scrollIntoViewIfNeeded(item, this, { block: \"nearest\", behavior: \"smooth\" });\r\n          this._activeIndicator.style.top = `${item.offsetTop}px`;\r\n          this._activeIndicator.style.height = `${item.clientHeight}px`;\r\n          this._activeIndicator.style.visibility = item.clientHeight == 0 ? \"hidden\" : \"\";\r\n\r\n          if (hasCustomState(this, \"--no-animate\")) {\r\n            setTimeout(() => setCustomState(this, \"--no-animate\", false), 40);\r\n          }\r\n        }\r\n      }\r\n    });\r\n\r\n  /** @private */\r\n  readonly #intersectionController = new IntersectionController(this, {\r\n    target: null,\r\n    callback: (entries) => {\r\n      if (!this.control || this.#ignoreScroll) return;\r\n\r\n      const targetOffset = this.control.scrollTop;\r\n      let closestElement: HTMLElement | null = null;\r\n      let closestDistance = Number.POSITIVE_INFINITY;\r\n\r\n      entries\r\n        .filter((x) => x.isIntersecting)\r\n        .map((x) => <HTMLElement>x.target)\r\n        .forEach((item) => {\r\n          const offsetTop = item.offsetTop;\r\n          const distance = Math.abs(offsetTop - targetOffset);\r\n          if (distance < closestDistance) {\r\n            closestDistance = distance;\r\n            closestElement = item;\r\n          }\r\n        });\r\n\r\n      if (closestElement) {\r\n        const item = this.#selectionManager.items.find((x) => x.node?.element === closestElement);\r\n        if (item) {\r\n          this.#selectionManager.select(item);\r\n        }\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */\r\n  readonly #scrollController = new ScrollController(this, {\r\n    target: null,\r\n    callback: () => (this.#ignoreScroll = false),\r\n    debounce: true,\r\n  });\r\n\r\n  /** @private */\r\n  readonly #mutationController = new MutationController(this, {\r\n    target: null,\r\n    config: {\r\n      childList: true,\r\n      subtree: true,\r\n    },\r\n    callback: () => this._updateToc(),\r\n  });\r\n\r\n  /**\r\n   * The maximum depth of the table of contents.\r\n   * @default 2\r\n   */\r\n  @property({ attribute: \"max-depth\", type: Number }) maxDepth = 2;\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n    this.#mutationController.observe(control);\r\n    this.#scrollController.observe(control);\r\n    this.#generateToc();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.control) {\r\n      this.#mutationController.unobserve(this.control);\r\n      this.#scrollController.unobserve(this.control);\r\n    }\r\n    super.detach();\r\n    this.#generateToc();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has(\"maxDepth\")) {\r\n      this.#generateToc();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"_toc\")) {\r\n      const { added, removed } = this.#selectionManager.setItems([\r\n        ...(this.shadowRoot?.querySelectorAll(\"m3e-toc-item\") ?? []),\r\n      ]);\r\n\r\n      if (!this.#selectionManager.activeItem) {\r\n        setCustomState(this, \"--no-animate\", true);\r\n        this.#selectionManager.updateActiveItem(added.find((x) => !x.disabled));\r\n      }\r\n\r\n      for (const item of added) {\r\n        if (item.node) {\r\n          this.#intersectionController.observe(item.node.element);\r\n        }\r\n      }\r\n\r\n      for (const item of removed) {\r\n        if (item.node) {\r\n          this.#intersectionController.unobserve(item.node.element);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"header\">\r\n        <div class=\"overline\">\r\n          <slot name=\"overline\" @slotchange=\"${this.#handleOverlineSlotChange}\"></slot>\r\n        </div>\r\n        <div class=\"title\">\r\n          <slot name=\"title\" @slotchange=\"${this.#handleTitleSlotChange}\"></slot>\r\n        </div>\r\n      </div>\r\n      <slot></slot>\r\n      <ul class=\"list\">\r\n        ${this._toc.map((x) => this.#renderNode(x))}\r\n      </ul>\r\n      <div class=\"active-indicator\" aria-hidden=\"true\"></div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderNode(node: TocNode): unknown {\r\n    return html`<li>\r\n      <m3e-toc-item tabindex=\"-1\" .node=\"${node}\" @click=\"${this.#handleClick}\">${node.label}</m3e-toc-item>\r\n      ${node.nodes.length == 0\r\n        ? nothing\r\n        : html`<ul>\r\n            ${node.nodes.map((x) => this.#renderNode(x))}\r\n          </ul>`}\r\n    </li>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleOverlineSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-overline\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleTitleSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-title\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.target instanceof M3eTocItemElement && !e.target.disabled && e.target.node?.element) {\r\n      this.#ignoreScroll = true;\r\n      e.target.node.element.scrollIntoView({ block: \"start\", behavior: \"smooth\" });\r\n      this.#selectionManager.updateActiveItem(e.target);\r\n      this.#selectionManager.select(e.target);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #generateToc(): void {\r\n    this._toc = this.control ? TocGenerator.generate(this.control, Math.max(1, Math.min(this.maxDepth, 6))) : [];\r\n  }\r\n\r\n  /** @private */\r\n  @debounce(40)\r\n  private _updateToc(): void {\r\n    this.#generateToc();\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-toc\": M3eTocElement;\r\n  }\r\n}\r\n"],"names":["M3eTocItemElement","Selected","Disabled","AttachInternals","Role","LitElement","update","changedProperties","has","ariaSelected","ariaCurrent","selected","node","_base","style","setProperty","level","removeProperty","firstUpdated","_changedProperties","_stateLayer","attach","render","html","styles","css","DesignToken","shape","corner","largeIncreased","unsafeCSS","motion","duration","long1","easing","standard","typescale","body","large","fontSize","fontWeight","lineHeight","tracking","color","onSurfaceVariant","emphasized","onSurface","__decorate","query","prototype","state","customElement","TocGenerator","generate","element","maxDepth","maxLevel","topLevel","nodes","Array","querySelectorAll","forEach","__classPrivateFieldGet","_a","_TocGenerator_getHeaderLevel","Math","min","push","id","guid","label","getTextContent","i","length","j","prev","x","filter","tagName","startsWith","parseInt","substring","getAttribute","M3eTocElement","HtmlFor","constructor","_toc","_M3eTocElement_ignoreScroll","set","_M3eTocElement_selectionManager","SelectionManager","withHomeAndEnd","withVerticalOrientation","disableRovingTabIndex","onSelectedItemsChange","_activeIndicator","item","selectedItems","setCustomState","top","height","visibility","scrollIntoViewIfNeeded","block","behavior","offsetTop","clientHeight","hasCustomState","setTimeout","_M3eTocElement_intersectionController","IntersectionController","target","callback","entries","control","targetOffset","scrollTop","closestElement","closestDistance","Number","POSITIVE_INFINITY","isIntersecting","map","distance","abs","items","find","select","_M3eTocElement_scrollController","ScrollController","__classPrivateFieldSet","debounce","_M3eTocElement_mutationController","MutationController","config","childList","subtree","_updateToc","observe","_M3eTocElement_instances","_M3eTocElement_generateToc","call","detach","unobserve","willUpdate","updated","added","removed","setItems","shadowRoot","activeItem","updateActiveItem","disabled","_M3eTocElement_handleOverlineSlotChange","_M3eTocElement_handleTitleSlotChange","_M3eTocElement_renderNode","nothing","e","hasAssignedNodes","scrollIntoView","max","scrollbar","thinWidth","outline","small","headline","property","attribute","type"],"mappings":"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"}
+{"version":3,"file":"toc.js","sources":["../../src/toc/TocItemElement.ts","../../src/toc/TocGenerator.ts","../../src/toc/TocElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { query, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  Selected,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { TocNode } from \"./TocGenerator\";\r\n\r\n/**\r\n * An item in a table of contents.\r\n * @tag m3e-toc-item\r\n *\r\n * @slot - Renders the label of the item.\r\n *\r\n * @attr disabled - A value indicating whether the element is disabled.\r\n *\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-toc-item-shape - Border radius of the TOC item.\r\n * @cssprop --m3e-toc-item-padding-block - Block padding for the TOC item.\r\n * @cssprop --m3e-toc-item-padding - Inline padding for the TOC item.\r\n * @cssprop --m3e-toc-item-inset - Indentation per level for the TOC item.\r\n * @cssprop --m3e-toc-active-indicator-animation-duration - Animation duration for the active indicator.\r\n * @cssprop --m3e-toc-item-font-size - Font size for unselected items.\r\n * @cssprop --m3e-toc-item-font-weight - Font weight for unselected items.\r\n * @cssprop --m3e-toc-item-line-height - Line height for unselected items.\r\n * @cssprop --m3e-toc-item-tracking - Letter spacing for unselected items.\r\n * @cssprop --m3e-toc-item-color - Text color for unselected items.\r\n * @cssprop --m3e-toc-item-selected-font-size - Font size for selected items.\r\n * @cssprop --m3e-toc-item-selected-font-weight - Font weight for selected items.\r\n * @cssprop --m3e-toc-item-selected-line-height - Line height for selected items.\r\n * @cssprop --m3e-toc-item-selected-tracking - Letter spacing for selected items.\r\n * @cssprop --m3e-toc-item-selected-color - Text color for selected items.\r\n */\r\n@customElement(\"m3e-toc-item\")\r\nexport class M3eTocItemElement extends Selected(Disabled(AttachInternals(Role(LitElement, \"link\")))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      position: relative;\r\n      user-select: none;\r\n      outline: none;\r\n      border-radius: var(--m3e-toc-item-shape, ${DesignToken.shape.corner.largeIncreased});\r\n      padding-block: var(--m3e-toc-item-padding-block, 0.5rem);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    .base {\r\n      padding-inline-start: calc(\r\n        var(--m3e-toc-item-padding, 1rem) + calc(var(--m3e-toc-item-inset, 0.75rem) * var(--_level, 0))\r\n      );\r\n      padding-inline-end: var(--m3e-toc-item-padding, 1rem);\r\n      transition: ${unsafeCSS(\r\n        `color var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1}) ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    :host(:not([selected])) {\r\n      font-size: var(--m3e-toc-item-font-size, ${DesignToken.typescale.standard.body.large.fontSize});\r\n      font-weight: var(--m3e-toc-item-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight});\r\n      line-height: var(--m3e-toc-item-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});\r\n      letter-spacing: var(--m3e-toc-item-tracking, ${DesignToken.typescale.standard.body.large.tracking});\r\n      color: var(--m3e-toc-item-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host([selected]) {\r\n      font-size: var(--m3e-toc-item-selected-font-size, ${DesignToken.typescale.emphasized.body.large.fontSize});\r\n      font-weight: var(--m3e-toc-item-selected-font-weight, ${DesignToken.typescale.emphasized.body.large.fontWeight});\r\n      line-height: var(--m3e-toc-item-selected-line-height, ${DesignToken.typescale.emphasized.body.large.lineHeight});\r\n      letter-spacing: var(--m3e-toc-item-selected-tracking, ${DesignToken.typescale.emphasized.body.large.tracking});\r\n      color: var(--m3e-toc-item-selected-color, ${DesignToken.color.onSurface});\r\n    }\r\n    .base {\r\n      justify-content: unset;\r\n    }\r\n    .state-layer {\r\n      --m3e-state-layer-focus-opacity: 0;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".base\") private readonly _base?: HTMLElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @internal */ @state() node?: TocNode;\r\n\r\n  /** @internal */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      this.ariaSelected = null;\r\n      this.ariaCurrent = this.selected ? \"true\" : null;\r\n    }\r\n\r\n    if (changedProperties.has(\"node\")) {\r\n      if (this.node) {\r\n        this._base?.style.setProperty(\"--_level\", `${this.node.level - 1}`);\r\n      } else {\r\n        this._base?.style.removeProperty(\"--_level\");\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this._stateLayer?.attach(this);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<m3e-state-layer class=\"state-layer\"></m3e-state-layer>\r\n      <div class=\"base\"><slot></slot></div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-toc-item\": M3eTocItemElement;\r\n  }\r\n}\r\n","import { getTextContent, guid } from \"@m3e/web/core\";\r\n\r\n/** A node in a table of contents. */\r\nexport interface TocNode {\r\n  /** An opaque identifier that uniquely identifies the node. */\r\n  id: string;\r\n\r\n  /** The level of the node. */\r\n  level: number;\r\n\r\n  /** The text to display for the node. */\r\n  label: string;\r\n\r\n  /** The element of the node. */\r\n  element: HTMLElement;\r\n\r\n  /** The child nodes. */\r\n  nodes: TocNode[];\r\n}\r\n\r\n/** Provides functionality used to generate a table of contents used for in-page navigation. */\r\nexport class TocGenerator {\r\n  /**\r\n   * Generates nodes from which to construct a table of contents for in-page navigation.\r\n   * @param {HTMLElement} element The element for which to generate a table of contents.\r\n   * @param {number} [maxDepth=6] The maximum depth of the table of contents.\r\n   * @returns {Array<TocNode>} The top-level nodes of the table of contents.\r\n   */\r\n  static generate(element: HTMLElement, maxDepth: number = 6): Array<TocNode> {\r\n    const maxLevel = 6;\r\n    let topLevel = maxLevel;\r\n    const nodes = new Array<TocNode>();\r\n    element\r\n      .querySelectorAll<HTMLElement>(\r\n        \"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])\",\r\n      )\r\n      .forEach((element) => {\r\n        const level = TocGenerator.#getHeaderLevel(element);\r\n        topLevel = Math.min(level, topLevel);\r\n        nodes.push({\r\n          id: element.id || guid(),\r\n          element,\r\n          level,\r\n          label: getTextContent(element, true),\r\n          nodes: new Array<TocNode>(),\r\n        });\r\n      });\r\n\r\n    for (let level = topLevel + maxDepth - 1; level > topLevel; level--) {\r\n      for (let i = 0; i < nodes.length; i++) {\r\n        const node = nodes[i];\r\n        if (node.level === level) {\r\n          for (let j = i; j >= 0; j--) {\r\n            const prev = nodes[j];\r\n            if (prev.level < level) {\r\n              prev.nodes.push(node);\r\n              break;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    nodes.forEach((x) => (x.level -= topLevel - 1));\r\n    return nodes.filter((x) => x.level === 1);\r\n  }\r\n\r\n  /** @internal */\r\n  static #getHeaderLevel(element: HTMLElement): number {\r\n    return element.tagName.startsWith(\"H\")\r\n      ? parseInt(element.tagName.substring(1))\r\n      : parseInt(element.getAttribute(\"level\") ?? \"0\");\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  debounce,\r\n  DesignToken,\r\n  hasAssignedNodes,\r\n  hasCustomState,\r\n  HtmlFor,\r\n  IntersectionController,\r\n  MutationController,\r\n  Role,\r\n  ScrollController,\r\n  scrollIntoViewIfNeeded,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eTocItemElement } from \"./TocItemElement\";\r\nimport { TocGenerator, TocNode } from \"./TocGenerator\";\r\n\r\n/**\r\n * A table of contents that provides in-page scroll navigation.\r\n *\r\n * @description\r\n * The `m3e-toc` component generates a hierarchical table of contents for in-page navigation.\r\n * It automatically detects headings or sections in a target element, builds a navigable list,\r\n * and highlights the active section as the user scrolls. The component supports custom header\r\n * slots, depth limiting, smooth scrolling, and extensive theming via CSS custom properties.\r\n *\r\n * To exclude a heading from the generated table of contents, add the `m3e-toc-ignore` attribute\r\n * to that heading element.\r\n *\r\n * @example\r\n * ```html\r\n * <m3e-toc for=\"content\" max-depth=\"3\">\r\n *   <span slot=\"overline\">Contents</span>\r\n *   <span slot=\"title\">Documentation</span>\r\n * </m3e-toc>\r\n * <div id=\"content\">\r\n *   <h2>Introduction</h2>\r\n *   <h2>Getting Started</h2>\r\n *   <h3>Installation</h3>\r\n *   <h3>Usage</h3>\r\n *   <h2>API Reference</h2>\r\n * </div>\r\n * ```\r\n *\r\n * @tag m3e-toc\r\n *\r\n * @slot - Renders content between the header and items.\r\n * @slot overline - Renders the overline of the table of contents.\r\n * @slot title - Renders the title of the table of contents.\r\n *\r\n * @attr for - The identifier of the interactive control to which this element is attached.\r\n * @attr max-depth - The maximum depth of the table of contents.\r\n *\r\n * @cssprop --m3e-toc-width - Width of the table of contents.\r\n * @cssprop --m3e-toc-container-color - Background color of the table of contents container.\r\n * @cssprop --m3e-toc-container-padding-inline - Inline padding of the table of contents container.\r\n * @cssprop --m3e-toc-container-padding-block - Block padding of the table of contents container.\r\n * @cssprop --m3e-toc-item-shape - Border radius of TOC items and active indicator.\r\n * @cssprop --m3e-toc-active-indicator-color - Border color of the active indicator.\r\n * @cssprop --m3e-toc-active-indicator-animation-duration - Animation duration for the active indicator.\r\n * @cssprop --m3e-toc-item-padding - Inline padding for TOC items and header.\r\n * @cssprop --m3e-toc-header-space - Block space below and between header elements.\r\n * @cssprop --m3e-toc-overline-font-size - Font size for the overline slot.\r\n * @cssprop --m3e-toc-overline-font-weight - Font weight for the overline slot.\r\n * @cssprop --m3e-toc-overline-line-height - Line height for the overline slot.\r\n * @cssprop --m3e-toc-overline-tracking - Letter spacing for the overline slot.\r\n * @cssprop --m3e-toc-overline-color - Text color for the overline slot.\r\n * @cssprop --m3e-toc-title-font-size - Font size for the title slot.\r\n * @cssprop --m3e-toc-title-font-weight - Font weight for the title slot.\r\n * @cssprop --m3e-toc-title-line-height - Line height for the title slot.\r\n * @cssprop --m3e-toc-title-tracking - Letter spacing for the title slot.\r\n * @cssprop --m3e-toc-title-color - Text color for the title slot.\r\n */\r\n@customElement(\"m3e-toc\")\r\nexport class M3eTocElement extends HtmlFor(AttachInternals(Role(LitElement, \"navigation\"))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      width: calc(var(--m3e-toc-width, 9.75rem));\r\n    }\r\n    .base {\r\n      border-radius: var(--m3e-toc-container-shape, ${DesignToken.shape.corner.none});\r\n      box-sizing: border-box;\r\n      overflow: hidden;\r\n      height: 100%;\r\n      width: 100%;\r\n    }\r\n    .scroll-container {\r\n      height: inherit;\r\n      width: inherit;\r\n      box-sizing: inherit;\r\n      background-color: var(--m3e-toc-container-color, transparent);\r\n      border-radius: inherit;\r\n      padding-inline: var(--m3e-toc-container-padding-inline, 0px);\r\n      padding-block: var(--m3e-toc-container-padding-block, 0px);\r\n      position: relative;\r\n      overflow-y: auto;\r\n      overflow-x: hidden;\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n    }\r\n    ul {\r\n      list-style: none;\r\n      padding-inline-start: unset;\r\n      margin-block-start: unset;\r\n      margin-block-end: unset;\r\n    }\r\n    ul,\r\n    li {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n    }\r\n    m3e-toc-item {\r\n      flex: none;\r\n    }\r\n    .active-indicator {\r\n      position: absolute;\r\n      pointer-events: none;\r\n      box-sizing: border-box;\r\n      left: var(--m3e-toc-container-padding-inline, 0px);\r\n      right: var(--m3e-toc-container-padding-inline, 0px);\r\n\r\n      border-radius: var(--m3e-toc-item-shape, ${DesignToken.shape.corner.largeIncreased});\r\n      border: 1px solid var(--m3e-toc-active-indicator-color, ${DesignToken.color.outline});\r\n      transition: ${unsafeCSS(`visibility var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})\r\n          ${DesignToken.motion.easing.standard},\r\n        height var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})\r\n          ${DesignToken.motion.easing.standard},\r\n        top var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})\r\n          ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    .header {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n      padding-inline-start: var(--m3e-toc-item-padding, 1rem);\r\n      padding-block-end: var(--m3e-toc-header-space, 0.5rem);\r\n      row-gap: var(--m3e-toc-header-space, 0.5rem);\r\n    }\r\n    .overline {\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n    }\r\n    .title {\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-clamp: 2;\r\n    }\r\n    :host(:not(:is(:state(--with-overline), :--with-overline))) .overline,\r\n    :host(:not(:is(:state(--with-title), :--with-title))) .title,\r\n    :host(:not(:is(:state(--with-overline), :--with-overline)):not(:is(:state(--with-title), :--with-title))) .header {\r\n      display: none;\r\n    }\r\n    ::slotted([slot=\"overline\"]) {\r\n      font-size: var(--m3e-toc-overline-font-size, ${DesignToken.typescale.standard.label.small.fontSize});\r\n      font-weight: var(--m3e-toc-overline-font-weight, ${DesignToken.typescale.standard.label.small.fontWeight});\r\n      line-height: var(--m3e-toc-overline-line-height, ${DesignToken.typescale.standard.label.small.lineHeight});\r\n      letter-spacing: var(--m3e-toc-overline-tracking, ${DesignToken.typescale.standard.label.small.tracking});\r\n      color: var(--m3e-toc-overline-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    ::slotted([slot=\"title\"]) {\r\n      font-size: var(--m3e-toc-title-font-size, ${DesignToken.typescale.standard.headline.small.fontSize});\r\n      font-weight: var(--m3e-toc-title-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight});\r\n      line-height: var(--m3e-toc-title-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight});\r\n      letter-spacing: var(--m3e-toc-title-tracking, ${DesignToken.typescale.standard.headline.small.tracking});\r\n      color: var(--m3e-toc-title-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:is(:state(--no-animate), :--no-animate)) .active-indicator {\r\n      transition: none;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .active-indicator {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @state() private _toc: Array<TocNode> = [];\r\n  /** @private */ @query(\".active-indicator\") private readonly _activeIndicator!: HTMLElement;\r\n  /** @private */ @query(\".scroll-container\") private readonly _scrollContainer!: HTMLElement;\r\n  /** @private */ #ignoreScroll = false;\r\n\r\n  /** @private */ readonly #selectionManager = new SelectionManager<M3eTocItemElement>()\r\n    .withHomeAndEnd()\r\n    .withVerticalOrientation()\r\n    .disableRovingTabIndex()\r\n    .onSelectedItemsChange(() => {\r\n      if (this._activeIndicator) {\r\n        const item = this.#selectionManager.selectedItems[0];\r\n        if (!item) {\r\n          setCustomState(this, \"--no-animate\", true);\r\n          this._activeIndicator.style.top = `0px`;\r\n          this._activeIndicator.style.height = `0px`;\r\n          this._activeIndicator.style.visibility = \"hidden\";\r\n        } else {\r\n          const scrollContainer = this._scrollContainer;\r\n\r\n          if (item === this.#selectionManager.items[0]) {\r\n            scrollContainer.scrollTo({ top: 0, behavior: \"smooth\" });\r\n          } else if (item === this.#selectionManager.items[this.#selectionManager.items.length - 1]) {\r\n            scrollContainer.scrollTo({\r\n              top: scrollContainer.scrollHeight - scrollContainer.clientHeight,\r\n              behavior: \"smooth\",\r\n            });\r\n          } else {\r\n            scrollIntoViewIfNeeded(item, this._scrollContainer, { block: \"nearest\", behavior: \"smooth\" });\r\n          }\r\n          this._activeIndicator.style.top = `${item.offsetTop}px`;\r\n          this._activeIndicator.style.height = `${item.clientHeight}px`;\r\n          this._activeIndicator.style.visibility = item.clientHeight == 0 ? \"hidden\" : \"\";\r\n\r\n          if (hasCustomState(this, \"--no-animate\")) {\r\n            setTimeout(() => setCustomState(this, \"--no-animate\", false), 40);\r\n          }\r\n        }\r\n      }\r\n    });\r\n\r\n  /** @private */\r\n  readonly #intersectionController = new IntersectionController(this, {\r\n    target: null,\r\n    callback: (entries) => {\r\n      if (!this.control || this.#ignoreScroll) return;\r\n\r\n      const targetOffset = this.control.scrollTop;\r\n      let closestElement: HTMLElement | null = null;\r\n      let closestDistance = Number.POSITIVE_INFINITY;\r\n\r\n      entries\r\n        .filter((x) => x.isIntersecting)\r\n        .map((x) => <HTMLElement>x.target)\r\n        .forEach((item) => {\r\n          const offsetTop = item.offsetTop;\r\n          const distance = Math.abs(offsetTop - targetOffset);\r\n          if (distance < closestDistance) {\r\n            closestDistance = distance;\r\n            closestElement = item;\r\n          }\r\n        });\r\n\r\n      if (closestElement) {\r\n        const item = this.#selectionManager.items.find((x) => x.node?.element === closestElement);\r\n        if (item) {\r\n          this.#selectionManager.select(item);\r\n        }\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */\r\n  readonly #scrollController = new ScrollController(this, {\r\n    target: null,\r\n    callback: () => (this.#ignoreScroll = false),\r\n    debounce: true,\r\n  });\r\n\r\n  /** @private */\r\n  readonly #mutationController = new MutationController(this, {\r\n    target: null,\r\n    config: {\r\n      childList: true,\r\n      subtree: true,\r\n    },\r\n    callback: () => this._updateToc(),\r\n  });\r\n\r\n  /**\r\n   * The maximum depth of the table of contents.\r\n   * @default 2\r\n   */\r\n  @property({ attribute: \"max-depth\", type: Number }) maxDepth = 2;\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n    this.#mutationController.observe(control);\r\n    this.#scrollController.observe(control);\r\n    this.#generateToc();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.control) {\r\n      this.#mutationController.unobserve(this.control);\r\n      this.#scrollController.unobserve(this.control);\r\n    }\r\n    super.detach();\r\n    this.#generateToc();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has(\"maxDepth\")) {\r\n      this.#generateToc();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"_toc\")) {\r\n      const { added, removed } = this.#selectionManager.setItems([\r\n        ...(this.shadowRoot?.querySelectorAll(\"m3e-toc-item\") ?? []),\r\n      ]);\r\n\r\n      if (!this.#selectionManager.activeItem) {\r\n        setCustomState(this, \"--no-animate\", true);\r\n        this.#selectionManager.updateActiveItem(added.find((x) => !x.disabled));\r\n      }\r\n\r\n      for (const item of added) {\r\n        if (item.node) {\r\n          this.#intersectionController.observe(item.node.element);\r\n        }\r\n      }\r\n\r\n      for (const item of removed) {\r\n        if (item.node) {\r\n          this.#intersectionController.unobserve(item.node.element);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <div class=\"scroll-container\">\r\n        <div class=\"header\">\r\n          <div class=\"overline\">\r\n            <slot name=\"overline\" @slotchange=\"${this.#handleOverlineSlotChange}\"></slot>\r\n          </div>\r\n          <div class=\"title\">\r\n            <slot name=\"title\" @slotchange=\"${this.#handleTitleSlotChange}\"></slot>\r\n          </div>\r\n        </div>\r\n        <slot></slot>\r\n        <ul class=\"list\">\r\n          ${this._toc.map((x) => this.#renderNode(x))}\r\n        </ul>\r\n        <div class=\"active-indicator\" aria-hidden=\"true\"></div>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderNode(node: TocNode): unknown {\r\n    return html`<li>\r\n      <m3e-toc-item tabindex=\"-1\" .node=\"${node}\" @click=\"${this.#handleClick}\">${node.label}</m3e-toc-item>\r\n      ${node.nodes.length == 0\r\n        ? nothing\r\n        : html`<ul>\r\n            ${node.nodes.map((x) => this.#renderNode(x))}\r\n          </ul>`}\r\n    </li>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleOverlineSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-overline\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleTitleSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-title\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.target instanceof M3eTocItemElement && !e.target.disabled && e.target.node?.element) {\r\n      this.#ignoreScroll = true;\r\n      e.target.node.element.scrollIntoView({ block: \"start\", behavior: \"smooth\" });\r\n      this.#selectionManager.updateActiveItem(e.target);\r\n      this.#selectionManager.select(e.target);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #generateToc(): void {\r\n    this._toc = this.control ? TocGenerator.generate(this.control, Math.max(1, Math.min(this.maxDepth, 6))) : [];\r\n  }\r\n\r\n  /** @private */\r\n  @debounce(40)\r\n  private _updateToc(): void {\r\n    this.#generateToc();\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-toc\": M3eTocElement;\r\n  }\r\n}\r\n"],"names":["M3eTocItemElement","Selected","Disabled","AttachInternals","Role","LitElement","update","changedProperties","has","ariaSelected","ariaCurrent","selected","node","_base","style","setProperty","level","removeProperty","firstUpdated","_changedProperties","_stateLayer","attach","render","html","styles","css","DesignToken","shape","corner","largeIncreased","unsafeCSS","motion","duration","long1","easing","standard","typescale","body","large","fontSize","fontWeight","lineHeight","tracking","color","onSurfaceVariant","emphasized","onSurface","__decorate","query","prototype","state","customElement","TocGenerator","generate","element","maxDepth","maxLevel","topLevel","nodes","Array","querySelectorAll","forEach","__classPrivateFieldGet","_a","_TocGenerator_getHeaderLevel","Math","min","push","id","guid","label","getTextContent","i","length","j","prev","x","filter","tagName","startsWith","parseInt","substring","getAttribute","M3eTocElement","HtmlFor","constructor","_toc","_M3eTocElement_ignoreScroll","set","_M3eTocElement_selectionManager","SelectionManager","withHomeAndEnd","withVerticalOrientation","disableRovingTabIndex","onSelectedItemsChange","_activeIndicator","item","selectedItems","setCustomState","top","height","visibility","scrollContainer","_scrollContainer","items","scrollTo","behavior","scrollHeight","clientHeight","scrollIntoViewIfNeeded","block","offsetTop","hasCustomState","setTimeout","_M3eTocElement_intersectionController","IntersectionController","target","callback","entries","control","targetOffset","scrollTop","closestElement","closestDistance","Number","POSITIVE_INFINITY","isIntersecting","map","distance","abs","find","select","_M3eTocElement_scrollController","ScrollController","__classPrivateFieldSet","debounce","_M3eTocElement_mutationController","MutationController","config","childList","subtree","_updateToc","observe","_M3eTocElement_instances","_M3eTocElement_generateToc","call","detach","unobserve","willUpdate","updated","added","removed","setItems","shadowRoot","activeItem","updateActiveItem","disabled","_M3eTocElement_handleOverlineSlotChange","_M3eTocElement_handleTitleSlotChange","_M3eTocElement_renderNode","nothing","e","hasAssignedNodes","scrollIntoView","max","none","scrollbar","thinWidth","outline","small","headline","property","attribute","type"],"mappings":"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"}

package/dist/toc.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__decorate as e,__classPrivateFieldGet as t,__classPrivateFieldSet as i}from"tslib";import{LitElement as o,html as a,unsafeCSS as n,css as s,nothing as l}from"lit";import{query as r,state as c,property as d}from"lit/decorators.js";import{Selected as h,Disabled as m,AttachInternals as p,Role as v,DesignToken as g,customElement as f,getTextContent as u,guid as b,HtmlFor as y,setCustomState as w,scrollIntoViewIfNeeded as $,hasCustomState as k,IntersectionController as x,ScrollController as I,MutationController as _,hasAssignedNodes as z,debounce as S}from"@m3e/web/core";import{SelectionManager as W}from"@m3e/web/core/a11y";let T=class extends(h(m(p(v(o,"link"))))){update(e){super.update(e),e.has("selected")&&(this.ariaSelected=null,this.ariaCurrent=this.selected?"true":null),e.has("node")&&(this.node?this._base?.style.setProperty("--_level",""+(this.node.level-1)):this._base?.style.removeProperty("--_level"))}firstUpdated(e){super.firstUpdated(e),this._stateLayer?.attach(this)}render(){return a`<m3e-state-layer class="state-layer"></m3e-state-layer><div class="base"><slot></slot></div>`}};var M,A,H,N,E,V,D,U,L,P,j,q,C;T.styles=s`:host { display: inline-block; position: relative; user-select: none; outline: none; border-radius: var(--m3e-toc-item-shape, ${g.shape.corner.largeIncreased}); padding-block: var(--m3e-toc-item-padding-block, 0.5rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :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: ${n(`color var(--m3e-toc-active-indicator-animation-duration, ${g.motion.duration.long1}) ${g.motion.easing.standard}`)}; } :host(:not([selected])) { font-size: var(--m3e-toc-item-font-size, ${g.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-toc-item-font-weight, ${g.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-toc-item-line-height, ${g.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-toc-item-tracking, ${g.typescale.standard.body.large.tracking}); color: var(--m3e-toc-item-color, ${g.color.onSurfaceVariant}); } :host([selected]) { font-size: var(--m3e-toc-item-selected-font-size, ${g.typescale.emphasized.body.large.fontSize}); font-weight: var(--m3e-toc-item-selected-font-weight, ${g.typescale.emphasized.body.large.fontWeight}); line-height: var(--m3e-toc-item-selected-line-height, ${g.typescale.emphasized.body.large.lineHeight}); letter-spacing: var(--m3e-toc-item-selected-tracking, ${g.typescale.emphasized.body.large.tracking}); color: var(--m3e-toc-item-selected-color, ${g.color.onSurface}); } .base { justify-content: unset; } .state-layer { --m3e-state-layer-focus-opacity: 0; } @media (prefers-reduced-motion) { .base { transition: none; } }`,e([r(".base")],T.prototype,"_base",void 0),e([r(".state-layer")],T.prototype,"_stateLayer",void 0),e([c()],T.prototype,"node",void 0),T=e([f("m3e-toc-item")],T);class O{static generate(e,i=6){let o=6;const a=new Array;e.querySelectorAll("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(e=>{const i=t(M,M,"m",A).call(M,e);o=Math.min(i,o),a.push({id:e.id||b(),element:e,level:i,label:u(e,!0),nodes:new Array})});for(let e=o+i-1;e>o;e--)for(let t=0;t<a.length;t++){const i=a[t];if(i.level===e)for(let o=t;o>=0;o--){const t=a[o];if(t.level<e){t.nodes.push(i);break}}}return a.forEach(e=>e.level-=o-1),a.filter(e=>1===e.level)}}M=O,A=function(e){return e.tagName.startsWith("H")?parseInt(e.tagName.substring(1)):parseInt(e.getAttribute("level")??"0")};let R=class extends(y(p(v(o,"navigation")))){constructor(){super(...arguments),H.add(this),this._toc=[],N.set(this,!1),E.set(this,(new W).withHomeAndEnd().withVerticalOrientation().disableRovingTabIndex().onSelectedItemsChange(()=>{if(this._activeIndicator){const e=t(this,E,"f").selectedItems[0];e?($(e,this,{block:"nearest",behavior:"smooth"}),this._activeIndicator.style.top=`${e.offsetTop}px`,this._activeIndicator.style.height=`${e.clientHeight}px`,this._activeIndicator.style.visibility=0==e.clientHeight?"hidden":"",k(this,"--no-animate")&&setTimeout(()=>w(this,"--no-animate",!1),40)):(w(this,"--no-animate",!0),this._activeIndicator.style.top="0px",this._activeIndicator.style.height="0px",this._activeIndicator.style.visibility="hidden")}})),V.set(this,new x(this,{target:null,callback:e=>{if(!this.control||t(this,N,"f"))return;const i=this.control.scrollTop;let o=null,a=Number.POSITIVE_INFINITY;if(e.filter(e=>e.isIntersecting).map(e=>e.target).forEach(e=>{const t=e.offsetTop,n=Math.abs(t-i);n<a&&(a=n,o=e)}),o){const e=t(this,E,"f").items.find(e=>e.node?.element===o);e&&t(this,E,"f").select(e)}}})),D.set(this,new I(this,{target:null,callback:()=>i(this,N,!1,"f"),debounce:!0})),U.set(this,new _(this,{target:null,config:{childList:!0,subtree:!0},callback:()=>this._updateToc()})),this.maxDepth=2}attach(e){super.attach(e),t(this,U,"f").observe(e),t(this,D,"f").observe(e),t(this,H,"m",C).call(this)}detach(){this.control&&(t(this,U,"f").unobserve(this.control),t(this,D,"f").unobserve(this.control)),super.detach(),t(this,H,"m",C).call(this)}willUpdate(e){super.willUpdate(e),e.has("maxDepth")&&t(this,H,"m",C).call(this)}updated(e){if(super.updated(e),e.has("_toc")){const{added:e,removed:i}=t(this,E,"f").setItems([...this.shadowRoot?.querySelectorAll("m3e-toc-item")??[]]);t(this,E,"f").activeItem||(w(this,"--no-animate",!0),t(this,E,"f").updateActiveItem(e.find(e=>!e.disabled)));for(const i of e)i.node&&t(this,V,"f").observe(i.node.element);for(const e of i)e.node&&t(this,V,"f").unobserve(e.node.element)}}render(){return a`<div class="header"><div class="overline"><slot name="overline" @slotchange="${t(this,H,"m",P)}"></slot></div><div class="title"><slot name="title" @slotchange="${t(this,H,"m",j)}"></slot></div></div><slot></slot><ul class="list">${this._toc.map(e=>t(this,H,"m",L).call(this,e))}</ul><div class="active-indicator" aria-hidden="true"></div>`}_updateToc(){t(this,H,"m",C).call(this)}};N=new WeakMap,E=new WeakMap,V=new WeakMap,D=new WeakMap,U=new WeakMap,H=new WeakSet,L=function e(i){return a`<li><m3e-toc-item tabindex="-1" .node="${i}" @click="${t(this,H,"m",q)}">${i.label}</m3e-toc-item>${0==i.nodes.length?l:a`<ul>${i.nodes.map(i=>t(this,H,"m",e).call(this,i))}</ul>`}</li>`},P=function(e){w(this,"--with-overline",z(e.target))},j=function(e){w(this,"--with-title",z(e.target))},q=function(e){e.target instanceof T&&!e.target.disabled&&e.target.node?.element&&(i(this,N,!0,"f"),e.target.node.element.scrollIntoView({block:"start",behavior:"smooth"}),t(this,E,"f").updateActiveItem(e.target),t(this,E,"f").select(e.target))},C=function(){this._toc=this.control?O.generate(this.control,Math.max(1,Math.min(this.maxDepth,6))):[]},R.styles=s`:host { display: inline-block; position: relative; overflow-y: auto; scrollbar-width: ${g.scrollbar.thinWidth}; scrollbar-color: ${g.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, ${g.shape.corner.largeIncreased}); border: 1px solid var(--m3e-toc-active-indicator-color, ${g.color.outline}); transition: ${n(`visibility var(--m3e-toc-active-indicator-animation-duration, ${g.motion.duration.long1})\n          ${g.motion.easing.standard},\n        height var(--m3e-toc-active-indicator-animation-duration, ${g.motion.duration.long1})\n          ${g.motion.easing.standard},\n        top var(--m3e-toc-active-indicator-animation-duration, ${g.motion.duration.long1})\n          ${g.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(:is(:state(--with-overline), :--with-overline))) .overline, :host(:not(:is(:state(--with-title), :--with-title))) .title, :host(:not(:is(:state(--with-overline), :--with-overline)):not(:is(:state(--with-title), :--with-title))) .header { display: none; } ::slotted([slot="overline"]) { font-size: var(--m3e-toc-overline-font-size, ${g.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-toc-overline-font-weight, ${g.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-toc-overline-line-height, ${g.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-toc-overline-tracking, ${g.typescale.standard.label.small.tracking}); color: var(--m3e-toc-overline-color, ${g.color.onSurfaceVariant}); } ::slotted([slot="title"]) { font-size: var(--m3e-toc-title-font-size, ${g.typescale.standard.headline.small.fontSize}); font-weight: var(--m3e-toc-title-font-weight, ${g.typescale.standard.headline.small.fontWeight}); line-height: var(--m3e-toc-title-line-height, ${g.typescale.standard.headline.small.lineHeight}); letter-spacing: var(--m3e-toc-title-tracking, ${g.typescale.standard.headline.small.tracking}); color: var(--m3e-toc-title-color, ${g.color.onSurface}); } :host(:is(:state(--no-animate), :--no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } }`,e([c()],R.prototype,"_toc",void 0),e([r(".active-indicator")],R.prototype,"_activeIndicator",void 0),e([d({attribute:"max-depth",type:Number})],R.prototype,"maxDepth",void 0),e([S(40)],R.prototype,"_updateToc",null),R=e([f("m3e-toc")],R);export{R as M3eTocElement,T as M3eTocItemElement,O as TocGenerator};
+import{__decorate as e,__classPrivateFieldGet as t,__classPrivateFieldSet as i}from"tslib";import{LitElement as o,html as a,unsafeCSS as n,css as r,nothing as s}from"lit";import{query as l,state as c,property as d}from"lit/decorators.js";import{Selected as h,Disabled as m,AttachInternals as p,Role as v,DesignToken as g,customElement as f,getTextContent as b,guid as u,HtmlFor as y,setCustomState as w,scrollIntoViewIfNeeded as $,hasCustomState as k,IntersectionController as x,ScrollController as _,MutationController as I,hasAssignedNodes as z,debounce as S}from"@m3e/web/core";import{SelectionManager as T}from"@m3e/web/core/a11y";let W=class extends(h(m(p(v(o,"link"))))){update(e){super.update(e),e.has("selected")&&(this.ariaSelected=null,this.ariaCurrent=this.selected?"true":null),e.has("node")&&(this.node?this._base?.style.setProperty("--_level",""+(this.node.level-1)):this._base?.style.removeProperty("--_level"))}firstUpdated(e){super.firstUpdated(e),this._stateLayer?.attach(this)}render(){return a`<m3e-state-layer class="state-layer"></m3e-state-layer><div class="base"><slot></slot></div>`}};var H,M,A,N,C,E,V,D,U,L,P,j,q;W.styles=r`:host { display: inline-block; position: relative; user-select: none; outline: none; border-radius: var(--m3e-toc-item-shape, ${g.shape.corner.largeIncreased}); padding-block: var(--m3e-toc-item-padding-block, 0.5rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :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: ${n(`color var(--m3e-toc-active-indicator-animation-duration, ${g.motion.duration.long1}) ${g.motion.easing.standard}`)}; } :host(:not([selected])) { font-size: var(--m3e-toc-item-font-size, ${g.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-toc-item-font-weight, ${g.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-toc-item-line-height, ${g.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-toc-item-tracking, ${g.typescale.standard.body.large.tracking}); color: var(--m3e-toc-item-color, ${g.color.onSurfaceVariant}); } :host([selected]) { font-size: var(--m3e-toc-item-selected-font-size, ${g.typescale.emphasized.body.large.fontSize}); font-weight: var(--m3e-toc-item-selected-font-weight, ${g.typescale.emphasized.body.large.fontWeight}); line-height: var(--m3e-toc-item-selected-line-height, ${g.typescale.emphasized.body.large.lineHeight}); letter-spacing: var(--m3e-toc-item-selected-tracking, ${g.typescale.emphasized.body.large.tracking}); color: var(--m3e-toc-item-selected-color, ${g.color.onSurface}); } .base { justify-content: unset; } .state-layer { --m3e-state-layer-focus-opacity: 0; } @media (prefers-reduced-motion) { .base { transition: none; } }`,e([l(".base")],W.prototype,"_base",void 0),e([l(".state-layer")],W.prototype,"_stateLayer",void 0),e([c()],W.prototype,"node",void 0),W=e([f("m3e-toc-item")],W);class O{static generate(e,i=6){let o=6;const a=new Array;e.querySelectorAll("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(e=>{const i=t(H,H,"m",M).call(H,e);o=Math.min(i,o),a.push({id:e.id||u(),element:e,level:i,label:b(e,!0),nodes:new Array})});for(let e=o+i-1;e>o;e--)for(let t=0;t<a.length;t++){const i=a[t];if(i.level===e)for(let o=t;o>=0;o--){const t=a[o];if(t.level<e){t.nodes.push(i);break}}}return a.forEach(e=>e.level-=o-1),a.filter(e=>1===e.level)}}H=O,M=function(e){return e.tagName.startsWith("H")?parseInt(e.tagName.substring(1)):parseInt(e.getAttribute("level")??"0")};let R=class extends(y(p(v(o,"navigation")))){constructor(){super(...arguments),A.add(this),this._toc=[],N.set(this,!1),C.set(this,(new T).withHomeAndEnd().withVerticalOrientation().disableRovingTabIndex().onSelectedItemsChange(()=>{if(this._activeIndicator){const e=t(this,C,"f").selectedItems[0];if(e){const i=this._scrollContainer;e===t(this,C,"f").items[0]?i.scrollTo({top:0,behavior:"smooth"}):e===t(this,C,"f").items[t(this,C,"f").items.length-1]?i.scrollTo({top:i.scrollHeight-i.clientHeight,behavior:"smooth"}):$(e,this._scrollContainer,{block:"nearest",behavior:"smooth"}),this._activeIndicator.style.top=`${e.offsetTop}px`,this._activeIndicator.style.height=`${e.clientHeight}px`,this._activeIndicator.style.visibility=0==e.clientHeight?"hidden":"",k(this,"--no-animate")&&setTimeout(()=>w(this,"--no-animate",!1),40)}else w(this,"--no-animate",!0),this._activeIndicator.style.top="0px",this._activeIndicator.style.height="0px",this._activeIndicator.style.visibility="hidden"}})),E.set(this,new x(this,{target:null,callback:e=>{if(!this.control||t(this,N,"f"))return;const i=this.control.scrollTop;let o=null,a=Number.POSITIVE_INFINITY;if(e.filter(e=>e.isIntersecting).map(e=>e.target).forEach(e=>{const t=e.offsetTop,n=Math.abs(t-i);n<a&&(a=n,o=e)}),o){const e=t(this,C,"f").items.find(e=>e.node?.element===o);e&&t(this,C,"f").select(e)}}})),V.set(this,new _(this,{target:null,callback:()=>i(this,N,!1,"f"),debounce:!0})),D.set(this,new I(this,{target:null,config:{childList:!0,subtree:!0},callback:()=>this._updateToc()})),this.maxDepth=2}attach(e){super.attach(e),t(this,D,"f").observe(e),t(this,V,"f").observe(e),t(this,A,"m",q).call(this)}detach(){this.control&&(t(this,D,"f").unobserve(this.control),t(this,V,"f").unobserve(this.control)),super.detach(),t(this,A,"m",q).call(this)}willUpdate(e){super.willUpdate(e),e.has("maxDepth")&&t(this,A,"m",q).call(this)}updated(e){if(super.updated(e),e.has("_toc")){const{added:e,removed:i}=t(this,C,"f").setItems([...this.shadowRoot?.querySelectorAll("m3e-toc-item")??[]]);t(this,C,"f").activeItem||(w(this,"--no-animate",!0),t(this,C,"f").updateActiveItem(e.find(e=>!e.disabled)));for(const i of e)i.node&&t(this,E,"f").observe(i.node.element);for(const e of i)e.node&&t(this,E,"f").unobserve(e.node.element)}}render(){return a`<div class="base"><div class="scroll-container"><div class="header"><div class="overline"><slot name="overline" @slotchange="${t(this,A,"m",L)}"></slot></div><div class="title"><slot name="title" @slotchange="${t(this,A,"m",P)}"></slot></div></div><slot></slot><ul class="list">${this._toc.map(e=>t(this,A,"m",U).call(this,e))}</ul><div class="active-indicator" aria-hidden="true"></div></div></div>`}_updateToc(){t(this,A,"m",q).call(this)}};N=new WeakMap,C=new WeakMap,E=new WeakMap,V=new WeakMap,D=new WeakMap,A=new WeakSet,U=function e(i){return a`<li><m3e-toc-item tabindex="-1" .node="${i}" @click="${t(this,A,"m",j)}">${i.label}</m3e-toc-item>${0==i.nodes.length?s:a`<ul>${i.nodes.map(i=>t(this,A,"m",e).call(this,i))}</ul>`}</li>`},L=function(e){w(this,"--with-overline",z(e.target))},P=function(e){w(this,"--with-title",z(e.target))},j=function(e){e.target instanceof W&&!e.target.disabled&&e.target.node?.element&&(i(this,N,!0,"f"),e.target.node.element.scrollIntoView({block:"start",behavior:"smooth"}),t(this,C,"f").updateActiveItem(e.target),t(this,C,"f").select(e.target))},q=function(){this._toc=this.control?O.generate(this.control,Math.max(1,Math.min(this.maxDepth,6))):[]},R.styles=r`:host { display: inline-block; width: calc(var(--m3e-toc-width, 9.75rem)); } .base { border-radius: var(--m3e-toc-container-shape, ${g.shape.corner.none}); box-sizing: border-box; overflow: hidden; height: 100%; width: 100%; } .scroll-container { height: inherit; width: inherit; box-sizing: inherit; background-color: var(--m3e-toc-container-color, transparent); border-radius: inherit; padding-inline: var(--m3e-toc-container-padding-inline, 0px); padding-block: var(--m3e-toc-container-padding-block, 0px); position: relative; overflow-y: auto; overflow-x: hidden; scrollbar-width: ${g.scrollbar.thinWidth}; scrollbar-color: ${g.scrollbar.color}; } 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: var(--m3e-toc-container-padding-inline, 0px); right: var(--m3e-toc-container-padding-inline, 0px); border-radius: var(--m3e-toc-item-shape, ${g.shape.corner.largeIncreased}); border: 1px solid var(--m3e-toc-active-indicator-color, ${g.color.outline}); transition: ${n(`visibility var(--m3e-toc-active-indicator-animation-duration, ${g.motion.duration.long1})\n          ${g.motion.easing.standard},\n        height var(--m3e-toc-active-indicator-animation-duration, ${g.motion.duration.long1})\n          ${g.motion.easing.standard},\n        top var(--m3e-toc-active-indicator-animation-duration, ${g.motion.duration.long1})\n          ${g.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(:is(:state(--with-overline), :--with-overline))) .overline, :host(:not(:is(:state(--with-title), :--with-title))) .title, :host(:not(:is(:state(--with-overline), :--with-overline)):not(:is(:state(--with-title), :--with-title))) .header { display: none; } ::slotted([slot="overline"]) { font-size: var(--m3e-toc-overline-font-size, ${g.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-toc-overline-font-weight, ${g.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-toc-overline-line-height, ${g.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-toc-overline-tracking, ${g.typescale.standard.label.small.tracking}); color: var(--m3e-toc-overline-color, ${g.color.onSurfaceVariant}); } ::slotted([slot="title"]) { font-size: var(--m3e-toc-title-font-size, ${g.typescale.standard.headline.small.fontSize}); font-weight: var(--m3e-toc-title-font-weight, ${g.typescale.standard.headline.small.fontWeight}); line-height: var(--m3e-toc-title-line-height, ${g.typescale.standard.headline.small.lineHeight}); letter-spacing: var(--m3e-toc-title-tracking, ${g.typescale.standard.headline.small.tracking}); color: var(--m3e-toc-title-color, ${g.color.onSurface}); } :host(:is(:state(--no-animate), :--no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } }`,e([c()],R.prototype,"_toc",void 0),e([l(".active-indicator")],R.prototype,"_activeIndicator",void 0),e([l(".scroll-container")],R.prototype,"_scrollContainer",void 0),e([d({attribute:"max-depth",type:Number})],R.prototype,"maxDepth",void 0),e([S(40)],R.prototype,"_updateToc",null),R=e([f("m3e-toc")],R);export{R as M3eTocElement,W as M3eTocItemElement,O as TocGenerator};
 //# sourceMappingURL=toc.min.js.map

package/dist/toc.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"toc.min.js","sources":["../../src/toc/TocItemElement.ts","../../src/toc/TocGenerator.ts","../../src/toc/TocElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { query, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  Selected,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { TocNode } from \"./TocGenerator\";\r\n\r\n/**\r\n * An item in a table of contents.\r\n * @tag m3e-toc-item\r\n *\r\n * @slot - Renders the label of the item.\r\n *\r\n * @attr disabled - A value indicating whether the element is disabled.\r\n *\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-toc-item-shape - Border radius of the TOC item.\r\n * @cssprop --m3e-toc-item-padding-block - Block padding for the TOC item.\r\n * @cssprop --m3e-toc-item-padding - Inline padding for the TOC item.\r\n * @cssprop --m3e-toc-item-inset - Indentation per level for the TOC item.\r\n * @cssprop --m3e-toc-active-indicator-animation-duration - Animation duration for the active indicator.\r\n * @cssprop --m3e-toc-item-font-size - Font size for unselected items.\r\n * @cssprop --m3e-toc-item-font-weight - Font weight for unselected items.\r\n * @cssprop --m3e-toc-item-line-height - Line height for unselected items.\r\n * @cssprop --m3e-toc-item-tracking - Letter spacing for unselected items.\r\n * @cssprop --m3e-toc-item-color - Text color for unselected items.\r\n * @cssprop --m3e-toc-item-selected-font-size - Font size for selected items.\r\n * @cssprop --m3e-toc-item-selected-font-weight - Font weight for selected items.\r\n * @cssprop --m3e-toc-item-selected-line-height - Line height for selected items.\r\n * @cssprop --m3e-toc-item-selected-tracking - Letter spacing for selected items.\r\n * @cssprop --m3e-toc-item-selected-color - Text color for selected items.\r\n */\r\n@customElement(\"m3e-toc-item\")\r\nexport class M3eTocItemElement extends Selected(Disabled(AttachInternals(Role(LitElement, \"link\")))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      position: relative;\r\n      user-select: none;\r\n      outline: none;\r\n      border-radius: var(--m3e-toc-item-shape, ${DesignToken.shape.corner.largeIncreased});\r\n      padding-block: var(--m3e-toc-item-padding-block, 0.5rem);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    .base {\r\n      padding-inline-start: calc(\r\n        var(--m3e-toc-item-padding, 1rem) + calc(var(--m3e-toc-item-inset, 0.75rem) * var(--_level, 0))\r\n      );\r\n      padding-inline-end: var(--m3e-toc-item-padding, 1rem);\r\n      transition: ${unsafeCSS(\r\n        `color var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1}) ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    :host(:not([selected])) {\r\n      font-size: var(--m3e-toc-item-font-size, ${DesignToken.typescale.standard.body.large.fontSize});\r\n      font-weight: var(--m3e-toc-item-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight});\r\n      line-height: var(--m3e-toc-item-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});\r\n      letter-spacing: var(--m3e-toc-item-tracking, ${DesignToken.typescale.standard.body.large.tracking});\r\n      color: var(--m3e-toc-item-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host([selected]) {\r\n      font-size: var(--m3e-toc-item-selected-font-size, ${DesignToken.typescale.emphasized.body.large.fontSize});\r\n      font-weight: var(--m3e-toc-item-selected-font-weight, ${DesignToken.typescale.emphasized.body.large.fontWeight});\r\n      line-height: var(--m3e-toc-item-selected-line-height, ${DesignToken.typescale.emphasized.body.large.lineHeight});\r\n      letter-spacing: var(--m3e-toc-item-selected-tracking, ${DesignToken.typescale.emphasized.body.large.tracking});\r\n      color: var(--m3e-toc-item-selected-color, ${DesignToken.color.onSurface});\r\n    }\r\n    .base {\r\n      justify-content: unset;\r\n    }\r\n    .state-layer {\r\n      --m3e-state-layer-focus-opacity: 0;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".base\") private readonly _base?: HTMLElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @internal */ @state() node?: TocNode;\r\n\r\n  /** @internal */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      this.ariaSelected = null;\r\n      this.ariaCurrent = this.selected ? \"true\" : null;\r\n    }\r\n\r\n    if (changedProperties.has(\"node\")) {\r\n      if (this.node) {\r\n        this._base?.style.setProperty(\"--_level\", `${this.node.level - 1}`);\r\n      } else {\r\n        this._base?.style.removeProperty(\"--_level\");\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this._stateLayer?.attach(this);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<m3e-state-layer class=\"state-layer\"></m3e-state-layer>\r\n      <div class=\"base\"><slot></slot></div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-toc-item\": M3eTocItemElement;\r\n  }\r\n}\r\n","import { getTextContent, guid } from \"@m3e/web/core\";\r\n\r\n/** A node in a table of contents. */\r\nexport interface TocNode {\r\n  /** An opaque identifier that uniquely identifies the node. */\r\n  id: string;\r\n\r\n  /** The level of the node. */\r\n  level: number;\r\n\r\n  /** The text to display for the node. */\r\n  label: string;\r\n\r\n  /** The element of the node. */\r\n  element: HTMLElement;\r\n\r\n  /** The child nodes. */\r\n  nodes: TocNode[];\r\n}\r\n\r\n/** Provides functionality used to generate a table of contents used for in-page navigation. */\r\nexport class TocGenerator {\r\n  /**\r\n   * Generates nodes from which to construct a table of contents for in-page navigation.\r\n   * @param {HTMLElement} element The element for which to generate a table of contents.\r\n   * @param {number} [maxDepth=6] The maximum depth of the table of contents.\r\n   * @returns {Array<TocNode>} The top-level nodes of the table of contents.\r\n   */\r\n  static generate(element: HTMLElement, maxDepth: number = 6): Array<TocNode> {\r\n    const maxLevel = 6;\r\n    let topLevel = maxLevel;\r\n    const nodes = new Array<TocNode>();\r\n    element\r\n      .querySelectorAll<HTMLElement>(\r\n        \"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])\",\r\n      )\r\n      .forEach((element) => {\r\n        const level = TocGenerator.#getHeaderLevel(element);\r\n        topLevel = Math.min(level, topLevel);\r\n        nodes.push({\r\n          id: element.id || guid(),\r\n          element,\r\n          level,\r\n          label: getTextContent(element, true),\r\n          nodes: new Array<TocNode>(),\r\n        });\r\n      });\r\n\r\n    for (let level = topLevel + maxDepth - 1; level > topLevel; level--) {\r\n      for (let i = 0; i < nodes.length; i++) {\r\n        const node = nodes[i];\r\n        if (node.level === level) {\r\n          for (let j = i; j >= 0; j--) {\r\n            const prev = nodes[j];\r\n            if (prev.level < level) {\r\n              prev.nodes.push(node);\r\n              break;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    nodes.forEach((x) => (x.level -= topLevel - 1));\r\n    return nodes.filter((x) => x.level === 1);\r\n  }\r\n\r\n  /** @internal */\r\n  static #getHeaderLevel(element: HTMLElement): number {\r\n    return element.tagName.startsWith(\"H\")\r\n      ? parseInt(element.tagName.substring(1))\r\n      : parseInt(element.getAttribute(\"level\") ?? \"0\");\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  debounce,\r\n  DesignToken,\r\n  hasAssignedNodes,\r\n  hasCustomState,\r\n  HtmlFor,\r\n  IntersectionController,\r\n  MutationController,\r\n  Role,\r\n  ScrollController,\r\n  scrollIntoViewIfNeeded,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eTocItemElement } from \"./TocItemElement\";\r\nimport { TocGenerator, TocNode } from \"./TocGenerator\";\r\n\r\n/**\r\n * A table of contents that provides in-page scroll navigation.\r\n *\r\n * @description\r\n * The `m3e-toc` component generates a hierarchical table of contents for in-page navigation.\r\n * It automatically detects headings or sections in a target element, builds a navigable list,\r\n * and highlights the active section as the user scrolls. The component supports custom header\r\n * slots, depth limiting, smooth scrolling, and extensive theming via CSS custom properties.\r\n *\r\n * To exclude a heading from the generated table of contents, add the `m3e-toc-ignore` attribute\r\n * to that heading element.\r\n *\r\n * @example\r\n * ```html\r\n * <m3e-toc for=\"content\" max-depth=\"3\">\r\n *   <span slot=\"overline\">Contents</span>\r\n *   <span slot=\"title\">Documentation</span>\r\n * </m3e-toc>\r\n * <div id=\"content\">\r\n *   <h2>Introduction</h2>\r\n *   <h2>Getting Started</h2>\r\n *   <h3>Installation</h3>\r\n *   <h3>Usage</h3>\r\n *   <h2>API Reference</h2>\r\n * </div>\r\n * ```\r\n *\r\n * @tag m3e-toc\r\n *\r\n * @slot - Renders content between the header and items.\r\n * @slot overline - Renders the overline of the table of contents.\r\n * @slot title - Renders the title of the table of contents.\r\n *\r\n * @attr for - The identifier of the interactive control to which this element is attached.\r\n * @attr max-depth - The maximum depth of the table of contents.\r\n *\r\n * @cssprop --m3e-toc-width - Width of the table of contents.\r\n * @cssprop --m3e-toc-item-shape - Border radius of TOC items and active indicator.\r\n * @cssprop --m3e-toc-active-indicator-color - Border color of the active indicator.\r\n * @cssprop --m3e-toc-active-indicator-animation-duration - Animation duration for the active indicator.\r\n * @cssprop --m3e-toc-item-padding - Inline padding for TOC items and header.\r\n * @cssprop --m3e-toc-header-space - Block space below and between header elements.\r\n * @cssprop --m3e-toc-overline-font-size - Font size for the overline slot.\r\n * @cssprop --m3e-toc-overline-font-weight - Font weight for the overline slot.\r\n * @cssprop --m3e-toc-overline-line-height - Line height for the overline slot.\r\n * @cssprop --m3e-toc-overline-tracking - Letter spacing for the overline slot.\r\n * @cssprop --m3e-toc-overline-color - Text color for the overline slot.\r\n * @cssprop --m3e-toc-title-font-size - Font size for the title slot.\r\n * @cssprop --m3e-toc-title-font-weight - Font weight for the title slot.\r\n * @cssprop --m3e-toc-title-line-height - Line height for the title slot.\r\n * @cssprop --m3e-toc-title-tracking - Letter spacing for the title slot.\r\n * @cssprop --m3e-toc-title-color - Text color for the title slot.\r\n */\r\n@customElement(\"m3e-toc\")\r\nexport class M3eTocElement extends HtmlFor(AttachInternals(Role(LitElement, \"navigation\"))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      position: relative;\r\n      overflow-y: auto;\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n      width: var(--m3e-toc-width, 9.75rem);\r\n    }\r\n    ul {\r\n      list-style: none;\r\n      padding-inline-start: unset;\r\n      margin-block-start: unset;\r\n      margin-block-end: unset;\r\n    }\r\n    ul,\r\n    li {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n    }\r\n    m3e-toc-item {\r\n      flex: none;\r\n    }\r\n    .active-indicator {\r\n      position: absolute;\r\n      pointer-events: none;\r\n      box-sizing: border-box;\r\n      left: 0;\r\n      right: 0;\r\n\r\n      border-radius: var(--m3e-toc-item-shape, ${DesignToken.shape.corner.largeIncreased});\r\n      border: 1px solid var(--m3e-toc-active-indicator-color, ${DesignToken.color.outline});\r\n      transition: ${unsafeCSS(`visibility var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})\r\n          ${DesignToken.motion.easing.standard},\r\n        height var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})\r\n          ${DesignToken.motion.easing.standard},\r\n        top var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})\r\n          ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    .header {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n      padding-inline-start: var(--m3e-toc-item-padding, 1rem);\r\n      padding-block-end: var(--m3e-toc-header-space, 0.5rem);\r\n      row-gap: var(--m3e-toc-header-space, 0.5rem);\r\n    }\r\n    .overline {\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n    }\r\n    .title {\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-clamp: 2;\r\n    }\r\n    :host(:not(:is(:state(--with-overline), :--with-overline))) .overline,\r\n    :host(:not(:is(:state(--with-title), :--with-title))) .title,\r\n    :host(:not(:is(:state(--with-overline), :--with-overline)):not(:is(:state(--with-title), :--with-title))) .header {\r\n      display: none;\r\n    }\r\n    ::slotted([slot=\"overline\"]) {\r\n      font-size: var(--m3e-toc-overline-font-size, ${DesignToken.typescale.standard.label.small.fontSize});\r\n      font-weight: var(--m3e-toc-overline-font-weight, ${DesignToken.typescale.standard.label.small.fontWeight});\r\n      line-height: var(--m3e-toc-overline-line-height, ${DesignToken.typescale.standard.label.small.lineHeight});\r\n      letter-spacing: var(--m3e-toc-overline-tracking, ${DesignToken.typescale.standard.label.small.tracking});\r\n      color: var(--m3e-toc-overline-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    ::slotted([slot=\"title\"]) {\r\n      font-size: var(--m3e-toc-title-font-size, ${DesignToken.typescale.standard.headline.small.fontSize});\r\n      font-weight: var(--m3e-toc-title-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight});\r\n      line-height: var(--m3e-toc-title-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight});\r\n      letter-spacing: var(--m3e-toc-title-tracking, ${DesignToken.typescale.standard.headline.small.tracking});\r\n      color: var(--m3e-toc-title-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:is(:state(--no-animate), :--no-animate)) .active-indicator {\r\n      transition: none;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .active-indicator {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @state() private _toc: Array<TocNode> = [];\r\n  /** @private */ @query(\".active-indicator\") private readonly _activeIndicator!: HTMLElement;\r\n  /** @private */ #ignoreScroll = false;\r\n\r\n  /** @private */ readonly #selectionManager = new SelectionManager<M3eTocItemElement>()\r\n    .withHomeAndEnd()\r\n    .withVerticalOrientation()\r\n    .disableRovingTabIndex()\r\n    .onSelectedItemsChange(() => {\r\n      if (this._activeIndicator) {\r\n        const item = this.#selectionManager.selectedItems[0];\r\n        if (!item) {\r\n          setCustomState(this, \"--no-animate\", true);\r\n          this._activeIndicator.style.top = `0px`;\r\n          this._activeIndicator.style.height = `0px`;\r\n          this._activeIndicator.style.visibility = \"hidden\";\r\n        } else {\r\n          scrollIntoViewIfNeeded(item, this, { block: \"nearest\", behavior: \"smooth\" });\r\n          this._activeIndicator.style.top = `${item.offsetTop}px`;\r\n          this._activeIndicator.style.height = `${item.clientHeight}px`;\r\n          this._activeIndicator.style.visibility = item.clientHeight == 0 ? \"hidden\" : \"\";\r\n\r\n          if (hasCustomState(this, \"--no-animate\")) {\r\n            setTimeout(() => setCustomState(this, \"--no-animate\", false), 40);\r\n          }\r\n        }\r\n      }\r\n    });\r\n\r\n  /** @private */\r\n  readonly #intersectionController = new IntersectionController(this, {\r\n    target: null,\r\n    callback: (entries) => {\r\n      if (!this.control || this.#ignoreScroll) return;\r\n\r\n      const targetOffset = this.control.scrollTop;\r\n      let closestElement: HTMLElement | null = null;\r\n      let closestDistance = Number.POSITIVE_INFINITY;\r\n\r\n      entries\r\n        .filter((x) => x.isIntersecting)\r\n        .map((x) => <HTMLElement>x.target)\r\n        .forEach((item) => {\r\n          const offsetTop = item.offsetTop;\r\n          const distance = Math.abs(offsetTop - targetOffset);\r\n          if (distance < closestDistance) {\r\n            closestDistance = distance;\r\n            closestElement = item;\r\n          }\r\n        });\r\n\r\n      if (closestElement) {\r\n        const item = this.#selectionManager.items.find((x) => x.node?.element === closestElement);\r\n        if (item) {\r\n          this.#selectionManager.select(item);\r\n        }\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */\r\n  readonly #scrollController = new ScrollController(this, {\r\n    target: null,\r\n    callback: () => (this.#ignoreScroll = false),\r\n    debounce: true,\r\n  });\r\n\r\n  /** @private */\r\n  readonly #mutationController = new MutationController(this, {\r\n    target: null,\r\n    config: {\r\n      childList: true,\r\n      subtree: true,\r\n    },\r\n    callback: () => this._updateToc(),\r\n  });\r\n\r\n  /**\r\n   * The maximum depth of the table of contents.\r\n   * @default 2\r\n   */\r\n  @property({ attribute: \"max-depth\", type: Number }) maxDepth = 2;\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n    this.#mutationController.observe(control);\r\n    this.#scrollController.observe(control);\r\n    this.#generateToc();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.control) {\r\n      this.#mutationController.unobserve(this.control);\r\n      this.#scrollController.unobserve(this.control);\r\n    }\r\n    super.detach();\r\n    this.#generateToc();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has(\"maxDepth\")) {\r\n      this.#generateToc();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"_toc\")) {\r\n      const { added, removed } = this.#selectionManager.setItems([\r\n        ...(this.shadowRoot?.querySelectorAll(\"m3e-toc-item\") ?? []),\r\n      ]);\r\n\r\n      if (!this.#selectionManager.activeItem) {\r\n        setCustomState(this, \"--no-animate\", true);\r\n        this.#selectionManager.updateActiveItem(added.find((x) => !x.disabled));\r\n      }\r\n\r\n      for (const item of added) {\r\n        if (item.node) {\r\n          this.#intersectionController.observe(item.node.element);\r\n        }\r\n      }\r\n\r\n      for (const item of removed) {\r\n        if (item.node) {\r\n          this.#intersectionController.unobserve(item.node.element);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"header\">\r\n        <div class=\"overline\">\r\n          <slot name=\"overline\" @slotchange=\"${this.#handleOverlineSlotChange}\"></slot>\r\n        </div>\r\n        <div class=\"title\">\r\n          <slot name=\"title\" @slotchange=\"${this.#handleTitleSlotChange}\"></slot>\r\n        </div>\r\n      </div>\r\n      <slot></slot>\r\n      <ul class=\"list\">\r\n        ${this._toc.map((x) => this.#renderNode(x))}\r\n      </ul>\r\n      <div class=\"active-indicator\" aria-hidden=\"true\"></div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderNode(node: TocNode): unknown {\r\n    return html`<li>\r\n      <m3e-toc-item tabindex=\"-1\" .node=\"${node}\" @click=\"${this.#handleClick}\">${node.label}</m3e-toc-item>\r\n      ${node.nodes.length == 0\r\n        ? nothing\r\n        : html`<ul>\r\n            ${node.nodes.map((x) => this.#renderNode(x))}\r\n          </ul>`}\r\n    </li>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleOverlineSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-overline\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleTitleSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-title\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.target instanceof M3eTocItemElement && !e.target.disabled && e.target.node?.element) {\r\n      this.#ignoreScroll = true;\r\n      e.target.node.element.scrollIntoView({ block: \"start\", behavior: \"smooth\" });\r\n      this.#selectionManager.updateActiveItem(e.target);\r\n      this.#selectionManager.select(e.target);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #generateToc(): void {\r\n    this._toc = this.control ? TocGenerator.generate(this.control, Math.max(1, Math.min(this.maxDepth, 6))) : [];\r\n  }\r\n\r\n  /** @private */\r\n  @debounce(40)\r\n  private _updateToc(): void {\r\n    this.#generateToc();\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-toc\": M3eTocElement;\r\n  }\r\n}\r\n"],"names":["M3eTocItemElement","Selected","Disabled","AttachInternals","Role","LitElement","update","changedProperties","super","has","this","ariaSelected","ariaCurrent","selected","node","_base","style","setProperty","level","removeProperty","firstUpdated","_changedProperties","_stateLayer","attach","render","html","styles","css","DesignToken","shape","corner","largeIncreased","unsafeCSS","motion","duration","long1","easing","standard","typescale","body","large","fontSize","fontWeight","lineHeight","tracking","color","onSurfaceVariant","emphasized","onSurface","__decorate","query","prototype","state","customElement","TocGenerator","generate","element","maxDepth","topLevel","nodes","Array","querySelectorAll","forEach","__classPrivateFieldGet","_a","_TocGenerator_getHeaderLevel","Math","min","push","id","guid","label","getTextContent","i","length","j","prev","x","filter","tagName","startsWith","parseInt","substring","getAttribute","M3eTocElement","HtmlFor","constructor","_toc","_M3eTocElement_ignoreScroll","set","_M3eTocElement_selectionManager","SelectionManager","withHomeAndEnd","withVerticalOrientation","disableRovingTabIndex","onSelectedItemsChange","_activeIndicator","item","selectedItems","scrollIntoViewIfNeeded","block","behavior","top","offsetTop","height","clientHeight","visibility","hasCustomState","setTimeout","setCustomState","_M3eTocElement_intersectionController","IntersectionController","target","callback","entries","control","targetOffset","scrollTop","closestElement","closestDistance","Number","POSITIVE_INFINITY","isIntersecting","map","distance","abs","items","find","select","_M3eTocElement_scrollController","ScrollController","__classPrivateFieldSet","debounce","_M3eTocElement_mutationController","MutationController","config","childList","subtree","_updateToc","observe","_M3eTocElement_instances","_M3eTocElement_generateToc","call","detach","unobserve","willUpdate","updated","added","removed","setItems","shadowRoot","activeItem","updateActiveItem","disabled","_M3eTocElement_handleOverlineSlotChange","_M3eTocElement_handleTitleSlotChange","_M3eTocElement_renderNode","nothing","e","hasAssignedNodes","scrollIntoView","max","scrollbar","thinWidth","outline","small","headline","property","attribute","type"],"mappings":"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"}
+{"version":3,"file":"toc.min.js","sources":["../../src/toc/TocItemElement.ts","../../src/toc/TocGenerator.ts","../../src/toc/TocElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { query, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  Selected,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { TocNode } from \"./TocGenerator\";\r\n\r\n/**\r\n * An item in a table of contents.\r\n * @tag m3e-toc-item\r\n *\r\n * @slot - Renders the label of the item.\r\n *\r\n * @attr disabled - A value indicating whether the element is disabled.\r\n *\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-toc-item-shape - Border radius of the TOC item.\r\n * @cssprop --m3e-toc-item-padding-block - Block padding for the TOC item.\r\n * @cssprop --m3e-toc-item-padding - Inline padding for the TOC item.\r\n * @cssprop --m3e-toc-item-inset - Indentation per level for the TOC item.\r\n * @cssprop --m3e-toc-active-indicator-animation-duration - Animation duration for the active indicator.\r\n * @cssprop --m3e-toc-item-font-size - Font size for unselected items.\r\n * @cssprop --m3e-toc-item-font-weight - Font weight for unselected items.\r\n * @cssprop --m3e-toc-item-line-height - Line height for unselected items.\r\n * @cssprop --m3e-toc-item-tracking - Letter spacing for unselected items.\r\n * @cssprop --m3e-toc-item-color - Text color for unselected items.\r\n * @cssprop --m3e-toc-item-selected-font-size - Font size for selected items.\r\n * @cssprop --m3e-toc-item-selected-font-weight - Font weight for selected items.\r\n * @cssprop --m3e-toc-item-selected-line-height - Line height for selected items.\r\n * @cssprop --m3e-toc-item-selected-tracking - Letter spacing for selected items.\r\n * @cssprop --m3e-toc-item-selected-color - Text color for selected items.\r\n */\r\n@customElement(\"m3e-toc-item\")\r\nexport class M3eTocItemElement extends Selected(Disabled(AttachInternals(Role(LitElement, \"link\")))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      position: relative;\r\n      user-select: none;\r\n      outline: none;\r\n      border-radius: var(--m3e-toc-item-shape, ${DesignToken.shape.corner.largeIncreased});\r\n      padding-block: var(--m3e-toc-item-padding-block, 0.5rem);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    .base {\r\n      padding-inline-start: calc(\r\n        var(--m3e-toc-item-padding, 1rem) + calc(var(--m3e-toc-item-inset, 0.75rem) * var(--_level, 0))\r\n      );\r\n      padding-inline-end: var(--m3e-toc-item-padding, 1rem);\r\n      transition: ${unsafeCSS(\r\n        `color var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1}) ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    :host(:not([selected])) {\r\n      font-size: var(--m3e-toc-item-font-size, ${DesignToken.typescale.standard.body.large.fontSize});\r\n      font-weight: var(--m3e-toc-item-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight});\r\n      line-height: var(--m3e-toc-item-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});\r\n      letter-spacing: var(--m3e-toc-item-tracking, ${DesignToken.typescale.standard.body.large.tracking});\r\n      color: var(--m3e-toc-item-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host([selected]) {\r\n      font-size: var(--m3e-toc-item-selected-font-size, ${DesignToken.typescale.emphasized.body.large.fontSize});\r\n      font-weight: var(--m3e-toc-item-selected-font-weight, ${DesignToken.typescale.emphasized.body.large.fontWeight});\r\n      line-height: var(--m3e-toc-item-selected-line-height, ${DesignToken.typescale.emphasized.body.large.lineHeight});\r\n      letter-spacing: var(--m3e-toc-item-selected-tracking, ${DesignToken.typescale.emphasized.body.large.tracking});\r\n      color: var(--m3e-toc-item-selected-color, ${DesignToken.color.onSurface});\r\n    }\r\n    .base {\r\n      justify-content: unset;\r\n    }\r\n    .state-layer {\r\n      --m3e-state-layer-focus-opacity: 0;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".base\") private readonly _base?: HTMLElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @internal */ @state() node?: TocNode;\r\n\r\n  /** @internal */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      this.ariaSelected = null;\r\n      this.ariaCurrent = this.selected ? \"true\" : null;\r\n    }\r\n\r\n    if (changedProperties.has(\"node\")) {\r\n      if (this.node) {\r\n        this._base?.style.setProperty(\"--_level\", `${this.node.level - 1}`);\r\n      } else {\r\n        this._base?.style.removeProperty(\"--_level\");\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this._stateLayer?.attach(this);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<m3e-state-layer class=\"state-layer\"></m3e-state-layer>\r\n      <div class=\"base\"><slot></slot></div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-toc-item\": M3eTocItemElement;\r\n  }\r\n}\r\n","import { getTextContent, guid } from \"@m3e/web/core\";\r\n\r\n/** A node in a table of contents. */\r\nexport interface TocNode {\r\n  /** An opaque identifier that uniquely identifies the node. */\r\n  id: string;\r\n\r\n  /** The level of the node. */\r\n  level: number;\r\n\r\n  /** The text to display for the node. */\r\n  label: string;\r\n\r\n  /** The element of the node. */\r\n  element: HTMLElement;\r\n\r\n  /** The child nodes. */\r\n  nodes: TocNode[];\r\n}\r\n\r\n/** Provides functionality used to generate a table of contents used for in-page navigation. */\r\nexport class TocGenerator {\r\n  /**\r\n   * Generates nodes from which to construct a table of contents for in-page navigation.\r\n   * @param {HTMLElement} element The element for which to generate a table of contents.\r\n   * @param {number} [maxDepth=6] The maximum depth of the table of contents.\r\n   * @returns {Array<TocNode>} The top-level nodes of the table of contents.\r\n   */\r\n  static generate(element: HTMLElement, maxDepth: number = 6): Array<TocNode> {\r\n    const maxLevel = 6;\r\n    let topLevel = maxLevel;\r\n    const nodes = new Array<TocNode>();\r\n    element\r\n      .querySelectorAll<HTMLElement>(\r\n        \"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])\",\r\n      )\r\n      .forEach((element) => {\r\n        const level = TocGenerator.#getHeaderLevel(element);\r\n        topLevel = Math.min(level, topLevel);\r\n        nodes.push({\r\n          id: element.id || guid(),\r\n          element,\r\n          level,\r\n          label: getTextContent(element, true),\r\n          nodes: new Array<TocNode>(),\r\n        });\r\n      });\r\n\r\n    for (let level = topLevel + maxDepth - 1; level > topLevel; level--) {\r\n      for (let i = 0; i < nodes.length; i++) {\r\n        const node = nodes[i];\r\n        if (node.level === level) {\r\n          for (let j = i; j >= 0; j--) {\r\n            const prev = nodes[j];\r\n            if (prev.level < level) {\r\n              prev.nodes.push(node);\r\n              break;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    nodes.forEach((x) => (x.level -= topLevel - 1));\r\n    return nodes.filter((x) => x.level === 1);\r\n  }\r\n\r\n  /** @internal */\r\n  static #getHeaderLevel(element: HTMLElement): number {\r\n    return element.tagName.startsWith(\"H\")\r\n      ? parseInt(element.tagName.substring(1))\r\n      : parseInt(element.getAttribute(\"level\") ?? \"0\");\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  debounce,\r\n  DesignToken,\r\n  hasAssignedNodes,\r\n  hasCustomState,\r\n  HtmlFor,\r\n  IntersectionController,\r\n  MutationController,\r\n  Role,\r\n  ScrollController,\r\n  scrollIntoViewIfNeeded,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eTocItemElement } from \"./TocItemElement\";\r\nimport { TocGenerator, TocNode } from \"./TocGenerator\";\r\n\r\n/**\r\n * A table of contents that provides in-page scroll navigation.\r\n *\r\n * @description\r\n * The `m3e-toc` component generates a hierarchical table of contents for in-page navigation.\r\n * It automatically detects headings or sections in a target element, builds a navigable list,\r\n * and highlights the active section as the user scrolls. The component supports custom header\r\n * slots, depth limiting, smooth scrolling, and extensive theming via CSS custom properties.\r\n *\r\n * To exclude a heading from the generated table of contents, add the `m3e-toc-ignore` attribute\r\n * to that heading element.\r\n *\r\n * @example\r\n * ```html\r\n * <m3e-toc for=\"content\" max-depth=\"3\">\r\n *   <span slot=\"overline\">Contents</span>\r\n *   <span slot=\"title\">Documentation</span>\r\n * </m3e-toc>\r\n * <div id=\"content\">\r\n *   <h2>Introduction</h2>\r\n *   <h2>Getting Started</h2>\r\n *   <h3>Installation</h3>\r\n *   <h3>Usage</h3>\r\n *   <h2>API Reference</h2>\r\n * </div>\r\n * ```\r\n *\r\n * @tag m3e-toc\r\n *\r\n * @slot - Renders content between the header and items.\r\n * @slot overline - Renders the overline of the table of contents.\r\n * @slot title - Renders the title of the table of contents.\r\n *\r\n * @attr for - The identifier of the interactive control to which this element is attached.\r\n * @attr max-depth - The maximum depth of the table of contents.\r\n *\r\n * @cssprop --m3e-toc-width - Width of the table of contents.\r\n * @cssprop --m3e-toc-container-color - Background color of the table of contents container.\r\n * @cssprop --m3e-toc-container-padding-inline - Inline padding of the table of contents container.\r\n * @cssprop --m3e-toc-container-padding-block - Block padding of the table of contents container.\r\n * @cssprop --m3e-toc-item-shape - Border radius of TOC items and active indicator.\r\n * @cssprop --m3e-toc-active-indicator-color - Border color of the active indicator.\r\n * @cssprop --m3e-toc-active-indicator-animation-duration - Animation duration for the active indicator.\r\n * @cssprop --m3e-toc-item-padding - Inline padding for TOC items and header.\r\n * @cssprop --m3e-toc-header-space - Block space below and between header elements.\r\n * @cssprop --m3e-toc-overline-font-size - Font size for the overline slot.\r\n * @cssprop --m3e-toc-overline-font-weight - Font weight for the overline slot.\r\n * @cssprop --m3e-toc-overline-line-height - Line height for the overline slot.\r\n * @cssprop --m3e-toc-overline-tracking - Letter spacing for the overline slot.\r\n * @cssprop --m3e-toc-overline-color - Text color for the overline slot.\r\n * @cssprop --m3e-toc-title-font-size - Font size for the title slot.\r\n * @cssprop --m3e-toc-title-font-weight - Font weight for the title slot.\r\n * @cssprop --m3e-toc-title-line-height - Line height for the title slot.\r\n * @cssprop --m3e-toc-title-tracking - Letter spacing for the title slot.\r\n * @cssprop --m3e-toc-title-color - Text color for the title slot.\r\n */\r\n@customElement(\"m3e-toc\")\r\nexport class M3eTocElement extends HtmlFor(AttachInternals(Role(LitElement, \"navigation\"))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      width: calc(var(--m3e-toc-width, 9.75rem));\r\n    }\r\n    .base {\r\n      border-radius: var(--m3e-toc-container-shape, ${DesignToken.shape.corner.none});\r\n      box-sizing: border-box;\r\n      overflow: hidden;\r\n      height: 100%;\r\n      width: 100%;\r\n    }\r\n    .scroll-container {\r\n      height: inherit;\r\n      width: inherit;\r\n      box-sizing: inherit;\r\n      background-color: var(--m3e-toc-container-color, transparent);\r\n      border-radius: inherit;\r\n      padding-inline: var(--m3e-toc-container-padding-inline, 0px);\r\n      padding-block: var(--m3e-toc-container-padding-block, 0px);\r\n      position: relative;\r\n      overflow-y: auto;\r\n      overflow-x: hidden;\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n    }\r\n    ul {\r\n      list-style: none;\r\n      padding-inline-start: unset;\r\n      margin-block-start: unset;\r\n      margin-block-end: unset;\r\n    }\r\n    ul,\r\n    li {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n    }\r\n    m3e-toc-item {\r\n      flex: none;\r\n    }\r\n    .active-indicator {\r\n      position: absolute;\r\n      pointer-events: none;\r\n      box-sizing: border-box;\r\n      left: var(--m3e-toc-container-padding-inline, 0px);\r\n      right: var(--m3e-toc-container-padding-inline, 0px);\r\n\r\n      border-radius: var(--m3e-toc-item-shape, ${DesignToken.shape.corner.largeIncreased});\r\n      border: 1px solid var(--m3e-toc-active-indicator-color, ${DesignToken.color.outline});\r\n      transition: ${unsafeCSS(`visibility var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})\r\n          ${DesignToken.motion.easing.standard},\r\n        height var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})\r\n          ${DesignToken.motion.easing.standard},\r\n        top var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})\r\n          ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    .header {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n      padding-inline-start: var(--m3e-toc-item-padding, 1rem);\r\n      padding-block-end: var(--m3e-toc-header-space, 0.5rem);\r\n      row-gap: var(--m3e-toc-header-space, 0.5rem);\r\n    }\r\n    .overline {\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n    }\r\n    .title {\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-clamp: 2;\r\n    }\r\n    :host(:not(:is(:state(--with-overline), :--with-overline))) .overline,\r\n    :host(:not(:is(:state(--with-title), :--with-title))) .title,\r\n    :host(:not(:is(:state(--with-overline), :--with-overline)):not(:is(:state(--with-title), :--with-title))) .header {\r\n      display: none;\r\n    }\r\n    ::slotted([slot=\"overline\"]) {\r\n      font-size: var(--m3e-toc-overline-font-size, ${DesignToken.typescale.standard.label.small.fontSize});\r\n      font-weight: var(--m3e-toc-overline-font-weight, ${DesignToken.typescale.standard.label.small.fontWeight});\r\n      line-height: var(--m3e-toc-overline-line-height, ${DesignToken.typescale.standard.label.small.lineHeight});\r\n      letter-spacing: var(--m3e-toc-overline-tracking, ${DesignToken.typescale.standard.label.small.tracking});\r\n      color: var(--m3e-toc-overline-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    ::slotted([slot=\"title\"]) {\r\n      font-size: var(--m3e-toc-title-font-size, ${DesignToken.typescale.standard.headline.small.fontSize});\r\n      font-weight: var(--m3e-toc-title-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight});\r\n      line-height: var(--m3e-toc-title-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight});\r\n      letter-spacing: var(--m3e-toc-title-tracking, ${DesignToken.typescale.standard.headline.small.tracking});\r\n      color: var(--m3e-toc-title-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:is(:state(--no-animate), :--no-animate)) .active-indicator {\r\n      transition: none;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .active-indicator {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @state() private _toc: Array<TocNode> = [];\r\n  /** @private */ @query(\".active-indicator\") private readonly _activeIndicator!: HTMLElement;\r\n  /** @private */ @query(\".scroll-container\") private readonly _scrollContainer!: HTMLElement;\r\n  /** @private */ #ignoreScroll = false;\r\n\r\n  /** @private */ readonly #selectionManager = new SelectionManager<M3eTocItemElement>()\r\n    .withHomeAndEnd()\r\n    .withVerticalOrientation()\r\n    .disableRovingTabIndex()\r\n    .onSelectedItemsChange(() => {\r\n      if (this._activeIndicator) {\r\n        const item = this.#selectionManager.selectedItems[0];\r\n        if (!item) {\r\n          setCustomState(this, \"--no-animate\", true);\r\n          this._activeIndicator.style.top = `0px`;\r\n          this._activeIndicator.style.height = `0px`;\r\n          this._activeIndicator.style.visibility = \"hidden\";\r\n        } else {\r\n          const scrollContainer = this._scrollContainer;\r\n\r\n          if (item === this.#selectionManager.items[0]) {\r\n            scrollContainer.scrollTo({ top: 0, behavior: \"smooth\" });\r\n          } else if (item === this.#selectionManager.items[this.#selectionManager.items.length - 1]) {\r\n            scrollContainer.scrollTo({\r\n              top: scrollContainer.scrollHeight - scrollContainer.clientHeight,\r\n              behavior: \"smooth\",\r\n            });\r\n          } else {\r\n            scrollIntoViewIfNeeded(item, this._scrollContainer, { block: \"nearest\", behavior: \"smooth\" });\r\n          }\r\n          this._activeIndicator.style.top = `${item.offsetTop}px`;\r\n          this._activeIndicator.style.height = `${item.clientHeight}px`;\r\n          this._activeIndicator.style.visibility = item.clientHeight == 0 ? \"hidden\" : \"\";\r\n\r\n          if (hasCustomState(this, \"--no-animate\")) {\r\n            setTimeout(() => setCustomState(this, \"--no-animate\", false), 40);\r\n          }\r\n        }\r\n      }\r\n    });\r\n\r\n  /** @private */\r\n  readonly #intersectionController = new IntersectionController(this, {\r\n    target: null,\r\n    callback: (entries) => {\r\n      if (!this.control || this.#ignoreScroll) return;\r\n\r\n      const targetOffset = this.control.scrollTop;\r\n      let closestElement: HTMLElement | null = null;\r\n      let closestDistance = Number.POSITIVE_INFINITY;\r\n\r\n      entries\r\n        .filter((x) => x.isIntersecting)\r\n        .map((x) => <HTMLElement>x.target)\r\n        .forEach((item) => {\r\n          const offsetTop = item.offsetTop;\r\n          const distance = Math.abs(offsetTop - targetOffset);\r\n          if (distance < closestDistance) {\r\n            closestDistance = distance;\r\n            closestElement = item;\r\n          }\r\n        });\r\n\r\n      if (closestElement) {\r\n        const item = this.#selectionManager.items.find((x) => x.node?.element === closestElement);\r\n        if (item) {\r\n          this.#selectionManager.select(item);\r\n        }\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */\r\n  readonly #scrollController = new ScrollController(this, {\r\n    target: null,\r\n    callback: () => (this.#ignoreScroll = false),\r\n    debounce: true,\r\n  });\r\n\r\n  /** @private */\r\n  readonly #mutationController = new MutationController(this, {\r\n    target: null,\r\n    config: {\r\n      childList: true,\r\n      subtree: true,\r\n    },\r\n    callback: () => this._updateToc(),\r\n  });\r\n\r\n  /**\r\n   * The maximum depth of the table of contents.\r\n   * @default 2\r\n   */\r\n  @property({ attribute: \"max-depth\", type: Number }) maxDepth = 2;\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n    this.#mutationController.observe(control);\r\n    this.#scrollController.observe(control);\r\n    this.#generateToc();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.control) {\r\n      this.#mutationController.unobserve(this.control);\r\n      this.#scrollController.unobserve(this.control);\r\n    }\r\n    super.detach();\r\n    this.#generateToc();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has(\"maxDepth\")) {\r\n      this.#generateToc();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"_toc\")) {\r\n      const { added, removed } = this.#selectionManager.setItems([\r\n        ...(this.shadowRoot?.querySelectorAll(\"m3e-toc-item\") ?? []),\r\n      ]);\r\n\r\n      if (!this.#selectionManager.activeItem) {\r\n        setCustomState(this, \"--no-animate\", true);\r\n        this.#selectionManager.updateActiveItem(added.find((x) => !x.disabled));\r\n      }\r\n\r\n      for (const item of added) {\r\n        if (item.node) {\r\n          this.#intersectionController.observe(item.node.element);\r\n        }\r\n      }\r\n\r\n      for (const item of removed) {\r\n        if (item.node) {\r\n          this.#intersectionController.unobserve(item.node.element);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <div class=\"scroll-container\">\r\n        <div class=\"header\">\r\n          <div class=\"overline\">\r\n            <slot name=\"overline\" @slotchange=\"${this.#handleOverlineSlotChange}\"></slot>\r\n          </div>\r\n          <div class=\"title\">\r\n            <slot name=\"title\" @slotchange=\"${this.#handleTitleSlotChange}\"></slot>\r\n          </div>\r\n        </div>\r\n        <slot></slot>\r\n        <ul class=\"list\">\r\n          ${this._toc.map((x) => this.#renderNode(x))}\r\n        </ul>\r\n        <div class=\"active-indicator\" aria-hidden=\"true\"></div>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderNode(node: TocNode): unknown {\r\n    return html`<li>\r\n      <m3e-toc-item tabindex=\"-1\" .node=\"${node}\" @click=\"${this.#handleClick}\">${node.label}</m3e-toc-item>\r\n      ${node.nodes.length == 0\r\n        ? nothing\r\n        : html`<ul>\r\n            ${node.nodes.map((x) => this.#renderNode(x))}\r\n          </ul>`}\r\n    </li>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleOverlineSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-overline\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleTitleSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-title\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.target instanceof M3eTocItemElement && !e.target.disabled && e.target.node?.element) {\r\n      this.#ignoreScroll = true;\r\n      e.target.node.element.scrollIntoView({ block: \"start\", behavior: \"smooth\" });\r\n      this.#selectionManager.updateActiveItem(e.target);\r\n      this.#selectionManager.select(e.target);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #generateToc(): void {\r\n    this._toc = this.control ? TocGenerator.generate(this.control, Math.max(1, Math.min(this.maxDepth, 6))) : [];\r\n  }\r\n\r\n  /** @private */\r\n  @debounce(40)\r\n  private _updateToc(): void {\r\n    this.#generateToc();\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-toc\": M3eTocElement;\r\n  }\r\n}\r\n"],"names":["M3eTocItemElement","Selected","Disabled","AttachInternals","Role","LitElement","update","changedProperties","super","has","this","ariaSelected","ariaCurrent","selected","node","_base","style","setProperty","level","removeProperty","firstUpdated","_changedProperties","_stateLayer","attach","render","html","styles","css","DesignToken","shape","corner","largeIncreased","unsafeCSS","motion","duration","long1","easing","standard","typescale","body","large","fontSize","fontWeight","lineHeight","tracking","color","onSurfaceVariant","emphasized","onSurface","__decorate","query","prototype","state","customElement","TocGenerator","generate","element","maxDepth","topLevel","nodes","Array","querySelectorAll","forEach","__classPrivateFieldGet","_a","_TocGenerator_getHeaderLevel","Math","min","push","id","guid","label","getTextContent","i","length","j","prev","x","filter","tagName","startsWith","parseInt","substring","getAttribute","M3eTocElement","HtmlFor","constructor","_toc","_M3eTocElement_ignoreScroll","set","_M3eTocElement_selectionManager","SelectionManager","withHomeAndEnd","withVerticalOrientation","disableRovingTabIndex","onSelectedItemsChange","_activeIndicator","item","selectedItems","scrollContainer","_scrollContainer","items","scrollTo","top","behavior","scrollHeight","clientHeight","scrollIntoViewIfNeeded","block","offsetTop","height","visibility","hasCustomState","setTimeout","setCustomState","_M3eTocElement_intersectionController","IntersectionController","target","callback","entries","control","targetOffset","scrollTop","closestElement","closestDistance","Number","POSITIVE_INFINITY","isIntersecting","map","distance","abs","find","select","_M3eTocElement_scrollController","ScrollController","__classPrivateFieldSet","debounce","_M3eTocElement_mutationController","MutationController","config","childList","subtree","_updateToc","observe","_M3eTocElement_instances","_M3eTocElement_generateToc","call","detach","unobserve","willUpdate","updated","added","removed","setItems","shadowRoot","activeItem","updateActiveItem","disabled","_M3eTocElement_handleOverlineSlotChange","_M3eTocElement_handleTitleSlotChange","_M3eTocElement_renderNode","nothing","e","hasAssignedNodes","scrollIntoView","max","none","scrollbar","thinWidth","outline","small","headline","property","attribute","type"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3e/web",
-  "version": "2.5.6",
+  "version": "2.5.8",
   "description": "Platform-native Web Components for M3E",
   "author": "matraic <matraic@yahoo.com>",
   "license": "MIT",
@@ -317,7 +317,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
-    "@material/material-color-utilities": "^0.3.0",
+    "@material/material-color-utilities": "^0.4.0",
     "composed-offset-position": "^0.0.6"
   },
   "peerDependencies": {