@m3e/web 2.5.12 → 2.5.14

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  ResizeController,\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      for (const target of this.#resizeController.targets) {\r\n        this.#resizeController.unobserve(target);\r\n      }\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          this.#resizeController.observe(item);\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  /** @private */ readonly #resizeController = new ResizeController(this, {\r\n    target: null,\r\n    callback: () => {\r\n      const item = this.#selectionManager.selectedItems[0];\r\n      if (item && this._activeIndicator) {\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    },\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","target","_M3eTocElement_resizeController","targets","unobserve","_activeIndicator","item","selectedItems","observe","scrollContainer","_scrollContainer","items","scrollTo","top","behavior","scrollHeight","clientHeight","scrollIntoViewIfNeeded","block","offsetTop","height","visibility","hasCustomState","setTimeout","setCustomState","_M3eTocElement_intersectionController","IntersectionController","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","ResizeController","_M3eTocElement_instances","_M3eTocElement_generateToc","call","detach","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":";;;;;ipBA0CO,IAAMA,EAAN,cAAgCC,EAASC,EAASC,EAAgBC,EAAKC,EAAY,YAwDrEC,MAAAA,CAAOC,GACxBC,MAAMF,OAAOC,GAETA,EAAkBE,IAAI,cACxBC,KAAKC,aAAe,KACpBD,KAAKE,YAAcF,KAAKG,SAAW,OAAS,MAG1CN,EAAkBE,IAAI,UACpBC,KAAKI,KACPJ,KAAKK,OAAOC,MAAMC,YAAY,WAAY,IAAGP,KAAKI,KAAKI,MAAQ,IAE/DR,KAAKK,OAAOC,MAAMG,eAAe,YAGvC,CAGmBC,YAAAA,CAAaC,GAC9Bb,MAAMY,aAAaC,GACnBX,KAAKY,aAAaC,OAAOb,KAC3B,CAGSc,MAAAA,GACP,OAAOC,CAAI,8FAEb,mCAjFgBzB,EAAA0B,OAAyBC,CAAG,iIAMGC,EAAYC,MAAMC,OAAOC,qXAYtDC,EACZ,4DAA4DJ,EAAYK,OAAOC,SAASC,UAAUP,EAAYK,OAAOG,OAAOC,qFAInFT,EAAYU,UAAUD,SAASE,KAAKC,MAAMC,2DACtCb,EAAYU,UAAUD,SAASE,KAAKC,MAAME,6DAC1Cd,EAAYU,UAAUD,SAASE,KAAKC,MAAMG,6DAC1Cf,EAAYU,UAAUD,SAASE,KAAKC,MAAMI,+CACtDhB,EAAYiB,MAAMC,8FAGDlB,EAAYU,UAAUS,WAAWR,KAAKC,MAAMC,oEACxCb,EAAYU,UAAUS,WAAWR,KAAKC,MAAME,sEAC5Cd,EAAYU,UAAUS,WAAWR,KAAKC,MAAMG,sEAC5Cf,EAAYU,UAAUS,WAAWR,KAAKC,MAAMI,wDACxDhB,EAAYiB,MAAMG,uKAejBC,EAAA,CAAhCC,EAAM,UAA8ClD,EAAAmD,UAAA,gBACbF,EAAA,CAAvCC,EAAM,iBAAoElD,EAAAmD,UAAA,sBACjEF,EAAA,CAARG,KAAuBpD,EAAAmD,UAAA,eArD9BnD,EAAiBiD,EAAA,CAD7BI,EAAc,iBACFrD,SCrBAsD,EAOX,eAAOC,CAASC,EAAsBC,EAAmB,GAEvD,IAAIC,EADa,EAEjB,MAAMC,EAAQ,IAAIC,MAClBJ,EACGK,iBACC,kMAEDC,QAASN,IACR,MAAMtC,EAAQ6C,EAAAC,EAAYA,EAAA,IAAAC,QAAZD,EAA6BR,GAC3CE,EAAWQ,KAAKC,IAAIjD,EAAOwC,GAC3BC,EAAMS,KAAK,CACTC,GAAIb,EAAQa,IAAMC,IAClBd,UACAtC,QACAqD,MAAOC,EAAehB,GAAS,GAC/BG,MAAO,IAAIC,UAIjB,IAAK,IAAI1C,EAAQwC,EAAWD,EAAW,EAAGvC,EAAQwC,EAAUxC,IAC1D,IAAK,IAAIuD,EAAI,EAAGA,EAAId,EAAMe,OAAQD,IAAK,CACrC,MAAM3D,EAAO6C,EAAMc,GACnB,GAAI3D,EAAKI,QAAUA,EACjB,IAAK,IAAIyD,EAAIF,EAAGE,GAAK,EAAGA,IAAK,CAC3B,MAAMC,EAAOjB,EAAMgB,GACnB,GAAIC,EAAK1D,MAAQA,EAAO,CACtB0D,EAAKjB,MAAMS,KAAKtD,GAChB,KACF,CACF,CAEJ,CAIF,OADA6C,EAAMG,QAASe,GAAOA,EAAE3D,OAASwC,EAAW,GACrCC,EAAMmB,OAAQD,GAAkB,IAAZA,EAAE3D,MAC/B,iBAGuBsC,GACrB,OAAOA,EAAQuB,QAAQC,WAAW,KAC9BC,SAASzB,EAAQuB,QAAQG,UAAU,IACnCD,SAASzB,EAAQ2B,aAAa,UAAY,IAChD,ECUK,IAAMC,EAAN,cAA4BC,EAAQlF,EAAgBC,EAAKC,EAAY,iBAArEiF,WAAAA,mCA4G4B5E,KAAA6E,KAAuB,GAGxCC,EAAAC,IAAA/E,MAAgB,GAEPgF,EAAAD,IAAA/E,MAAoB,IAAIiF,GAC9CC,iBACAC,0BACAC,wBACAC,sBAAsB,KACrB,IAAK,MAAMC,KAAUjC,EAAArD,KAAIuF,EAAA,KAAmBC,QAC1CnC,EAAArD,KAAIuF,EAAA,KAAmBE,UAAUH,GAEnC,GAAItF,KAAK0F,iBAAkB,CACzB,MAAMC,EAAOtC,EAAArD,KAAIgF,EAAA,KAAmBY,cAAc,GAClD,GAAKD,EAKE,CACLtC,EAAArD,KAAIuF,EAAA,KAAmBM,QAAQF,GAC/B,MAAMG,EAAkB9F,KAAK+F,iBAEzBJ,IAAStC,EAAArD,KAAIgF,EAAA,KAAmBgB,MAAM,GACxCF,EAAgBG,SAAS,CAAEC,IAAK,EAAGC,SAAU,WACpCR,IAAStC,EAAArD,KAAIgF,EAAA,KAAmBgB,MAAM3C,EAAArD,KAAIgF,EAAA,KAAmBgB,MAAMhC,OAAS,GACrF8B,EAAgBG,SAAS,CACvBC,IAAKJ,EAAgBM,aAAeN,EAAgBO,aACpDF,SAAU,WAGZG,EAAuBX,EAAM3F,KAAK+F,iBAAkB,CAAEQ,MAAO,UAAWJ,SAAU,WAEpFnG,KAAK0F,iBAAiBpF,MAAM4F,IAAM,GAAGP,EAAKa,cAC1CxG,KAAK0F,iBAAiBpF,MAAMmG,OAAS,GAAGd,EAAKU,iBAC7CrG,KAAK0F,iBAAiBpF,MAAMoG,WAAkC,GAArBf,EAAKU,aAAoB,SAAW,GAEzEM,EAAe3G,KAAM,iBACvB4G,WAAW,IAAMC,EAAe7G,KAAM,gBAAgB,GAAQ,GAElE,MAzBE6G,EAAe7G,KAAM,gBAAgB,GACrCA,KAAK0F,iBAAiBpF,MAAM4F,IAAM,MAClClG,KAAK0F,iBAAiBpF,MAAMmG,OAAS,MACrCzG,KAAK0F,iBAAiBpF,MAAMoG,WAAa,QAuB7C,KAIKI,EAAA/B,IAAA/E,KAA0B,IAAI+G,EAAuB/G,KAAM,CAClEsF,OAAQ,KACR0B,SAAWC,IACT,IAAKjH,KAAKkH,SAAW7D,EAAArD,KAAI8E,EAAA,KAAgB,OAEzC,MAAMqC,EAAenH,KAAKkH,QAAQE,UAClC,IAAIC,EAAqC,KACrCC,EAAkBC,OAAOC,kBAc7B,GAZAP,EACG7C,OAAQD,GAAMA,EAAEsD,gBAChBC,IAAKvD,GAAmBA,EAAEmB,QAC1BlC,QAASuC,IACR,MAAMa,EAAYb,EAAKa,UACjBmB,EAAWnE,KAAKoE,IAAIpB,EAAYW,GAClCQ,EAAWL,IACbA,EAAkBK,EAClBN,EAAiB1B,KAInB0B,EAAgB,CAClB,MAAM1B,EAAOtC,EAAArD,YAAuBgG,MAAM6B,KAAM1D,GAAMA,EAAE/D,MAAM0C,UAAYuE,GACtE1B,GACFtC,EAAArD,KAAIgF,EAAA,KAAmB8C,OAAOnC,EAElC,MAKKoC,EAAAhD,IAAA/E,KAAoB,IAAIgI,EAAiBhI,KAAM,CACtDsF,OAAQ,KACR0B,SAAUA,IAAOiB,EAAAjI,KAAI8E,GAAiB,EAAK,KAC3CoD,UAAU,KAIHC,EAAApD,IAAA/E,KAAsB,IAAIoI,EAAmBpI,KAAM,CAC1DsF,OAAQ,KACR+C,OAAQ,CACNC,WAAW,EACXC,SAAS,GAEXvB,SAAUA,IAAMhH,KAAKwI,gBAGEjD,EAAAR,IAAA/E,KAAoB,IAAIyI,EAAiBzI,KAAM,CACtEsF,OAAQ,KACR0B,SAAUA,KACR,MAAMrB,EAAOtC,EAAArD,KAAIgF,EAAA,KAAmBY,cAAc,GAC9CD,GAAQ3F,KAAK0F,mBACf1F,KAAK0F,iBAAiBpF,MAAM4F,IAAM,GAAGP,EAAKa,cAC1CxG,KAAK0F,iBAAiBpF,MAAMmG,OAAS,GAAGd,EAAKU,iBAC7CrG,KAAK0F,iBAAiBpF,MAAMoG,WAAkC,GAArBf,EAAKU,aAAoB,SAAW,QAS/BrG,KAAA+C,SAAW,CAwHjE,CArHWlC,MAAAA,CAAOqG,GACdpH,MAAMe,OAAOqG,GACb7D,EAAArD,KAAImI,EAAA,KAAqBtC,QAAQqB,GACjC7D,EAAArD,KAAI+H,EAAA,KAAmBlC,QAAQqB,GAC/B7D,EAAArD,KAAI0I,EAAA,IAAAC,GAAaC,KAAjB5I,KACF,CAGS6I,MAAAA,GACH7I,KAAKkH,UACP7D,EAAArD,YAAyByF,UAAUzF,KAAKkH,SACxC7D,EAAArD,YAAuByF,UAAUzF,KAAKkH,UAExCpH,MAAM+I,SACNxF,EAAArD,KAAI0I,EAAA,IAAAC,GAAaC,KAAjB5I,KACF,CAGmB8I,UAAAA,CAAWjJ,GAC5BC,MAAMgJ,WAAWjJ,GAEbA,EAAkBE,IAAI,aACxBsD,EAAArD,KAAI0I,EAAA,IAAAC,GAAaC,KAAjB5I,KAEJ,CAGmB+I,OAAAA,CAAQpI,GAGzB,GAFAb,MAAMiJ,QAAQpI,GAEVA,EAAmBZ,IAAI,QAAS,CAClC,MAAMiJ,MAAEA,EAAKC,QAAEA,GAAY5F,EAAArD,KAAIgF,EAAA,KAAmBkE,SAAS,IACrDlJ,KAAKmJ,YAAYhG,iBAAiB,iBAAmB,KAGtDE,EAAArD,YAAuBoJ,aAC1BvC,EAAe7G,KAAM,gBAAgB,GACrCqD,EAAArD,YAAuBqJ,iBAAiBL,EAAMnB,KAAM1D,IAAOA,EAAEmF,YAG/D,IAAK,MAAM3D,KAAQqD,EACbrD,EAAKvF,MACPiD,EAAArD,KAAI8G,EAAA,KAAyBjB,QAAQF,EAAKvF,KAAK0C,SAInD,IAAK,MAAM6C,KAAQsD,EACbtD,EAAKvF,MACPiD,EAAArD,KAAI8G,EAAA,KAAyBrB,UAAUE,EAAKvF,KAAK0C,QAGvD,CACF,CAGmBhC,MAAAA,GACjB,OAAOC,CAAI,gIAIkCsC,EAAArD,KAAI0I,EAAA,IAAAa,uEAGPlG,EAAArD,KAAI0I,EAAA,IAAAc,wDAKtCxJ,KAAK6E,KAAK6C,IAAKvD,GAAMd,EAAArD,KAAI0I,EAAA,IAAAe,GAAYb,KAAhB5I,KAAiBmE,6EAKhD,CAyCQqE,UAAAA,GACNnF,EAAArD,KAAI0I,EAAA,IAAAC,GAAaC,KAAjB5I,KACF,kHAxCYI,GACV,OAAOW,CAAI,0CAC4BX,cAAiBiD,EAAArD,kBAAsBI,EAAKyD,uBAC1D,GAArBzD,EAAK6C,MAAMe,OACT0F,EACA3I,CAAI,OACAX,EAAK6C,MAAMyE,IAAKvD,GAAMd,EAAArD,KAAI0I,EAAA,IAAAe,GAAYb,KAAhB5I,KAAiBmE,iBAGnD,aAG0BwF,GACxB9C,EAAe7G,KAAM,kBAAmB4J,EAAkCD,EAAErE,QAC9E,aAGuBqE,GACrB9C,EAAe7G,KAAM,eAAgB4J,EAAkCD,EAAErE,QAC3E,aAGaqE,GACPA,EAAErE,kBAAkBhG,IAAsBqK,EAAErE,OAAOgE,UAAYK,EAAErE,OAAOlF,MAAM0C,UAChFmF,EAAAjI,KAAI8E,GAAiB,EAAI,KACzB6E,EAAErE,OAAOlF,KAAK0C,QAAQ+G,eAAe,CAAEtD,MAAO,QAASJ,SAAU,WACjE9C,EAAArD,YAAuBqJ,iBAAiBM,EAAErE,QAC1CjC,EAAArD,YAAuB8H,OAAO6B,EAAErE,QAEpC,eAIEtF,KAAK6E,KAAO7E,KAAKkH,QAAUtE,EAAaC,SAAS7C,KAAKkH,QAAS1D,KAAKsG,IAAI,EAAGtG,KAAKC,IAAIzD,KAAK+C,SAAU,KAAO,EAC5G,EAxUgB2B,EAAA1D,OAAyBC,CAAG,sIAMQC,EAAYC,MAAMC,OAAO2I,ubAiBtD7I,EAAY8I,UAAUC,+BACtB/I,EAAY8I,UAAU7H,mcAwBEjB,EAAYC,MAAMC,OAAOC,4EACVH,EAAYiB,MAAM+H,yBAC9D5I,EAAU,iEAAiEJ,EAAYK,OAAOC,SAASC,qBAC/GP,EAAYK,OAAOG,OAAOC,gFAC8BT,EAAYK,OAAOC,SAASC,qBACpFP,EAAYK,OAAOG,OAAOC,6EAC2BT,EAAYK,OAAOC,SAASC,qBACjFP,EAAYK,OAAOG,OAAOC,qxBA4BeT,EAAYU,UAAUD,SAASkC,MAAMsG,MAAMpI,+DACvCb,EAAYU,UAAUD,SAASkC,MAAMsG,MAAMnI,iEAC3Cd,EAAYU,UAAUD,SAASkC,MAAMsG,MAAMlI,iEAC3Cf,EAAYU,UAAUD,SAASkC,MAAMsG,MAAMjI,mDACvDhB,EAAYiB,MAAMC,8FAGblB,EAAYU,UAAUD,SAASyI,SAASD,MAAMpI,4DAC1Cb,EAAYU,UAAUD,SAASyI,SAASD,MAAMnI,8DAC9Cd,EAAYU,UAAUD,SAASyI,SAASD,MAAMlI,8DAC9Cf,EAAYU,UAAUD,SAASyI,SAASD,MAAMjI,gDAC1DhB,EAAYiB,MAAMG,oLAYzBC,EAAA,CAAhBG,KAA0CgC,EAAAjC,UAAA,eACEF,EAAA,CAA5CC,EAAM,sBAAqEkC,EAAAjC,UAAA,2BAC/BF,EAAA,CAA5CC,EAAM,sBAAqEkC,EAAAjC,UAAA,2BA2GxCF,EAAA,CAAnD8H,EAAS,CAAEC,UAAW,YAAaC,KAAMhD,UAAuB7C,EAAAjC,UAAA,gBAAA,GAqHzDF,EAAA,CADP2F,EAAS,KAGTxD,EAAAjC,UAAA,aAAA,MAhVUiC,EAAanC,EAAA,CADzBI,EAAc,YACF+B"}
+{"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      contain: layout style paint;\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  ResizeController,\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      contain: layout style paint;\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      contain: layout style paint;\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      for (const target of this.#resizeController.targets) {\r\n        this.#resizeController.unobserve(target);\r\n      }\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          this.#resizeController.observe(item);\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  /** @private */ readonly #resizeController = new ResizeController(this, {\r\n    target: null,\r\n    callback: () => {\r\n      const item = this.#selectionManager.selectedItems[0];\r\n      if (item && this._activeIndicator) {\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    },\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","target","_M3eTocElement_resizeController","targets","unobserve","_activeIndicator","item","selectedItems","observe","scrollContainer","_scrollContainer","items","scrollTo","top","behavior","scrollHeight","clientHeight","scrollIntoViewIfNeeded","block","offsetTop","height","visibility","hasCustomState","setTimeout","setCustomState","_M3eTocElement_intersectionController","IntersectionController","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","ResizeController","_M3eTocElement_instances","_M3eTocElement_generateToc","call","detach","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/tooltip.js

@@ -5,7 +5,7 @@
  */
 import { __decorate, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
 import { property, query, state } from 'lit/decorators.js';
-import { customElement, ActionElementBase, HtmlFor, ReconnectedCallback, AttachInternals, HoverController, LongPressController, isDisabledMixin, DesignToken, hasAssignedNodes, getTextContent, setCustomState } from '@m3e/web/core';
+import { customElement, ActionElementBase, HtmlFor, ReconnectedCallback, AttachInternals, HoverController, LongPressController, isDisabledMixin, DesignToken, ClickOutsideController, hasAssignedNodes, getTextContent, setCustomState } from '@m3e/web/core';
 import { LitElement, unsafeCSS, css, html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { M3eInteractivityChecker, M3eAriaDescriber } from '@m3e/web/core/a11y';
@@ -247,7 +247,7 @@ __decorate([property({
   attribute: "touch-gestures"
 })], TooltipElementBase.prototype, "touchGestures", void 0);
 
-var _M3eRichTooltipElement_instances, _M3eRichTooltipElement_id, _M3eRichTooltipElement_subheadText, _M3eRichTooltipElement_contentText, _M3eRichTooltipElement_message, _M3eRichTooltipElement_messageRegistered, _M3eRichTooltipElement_documentClickHandler, _M3eRichTooltipElement_handleBeforeToggle, _M3eRichTooltipElement_handleToggle, _M3eRichTooltipElement_handleDocumentClick, _M3eRichTooltipElement_handleKeyDown, _M3eRichTooltipElement_handleSubheadSlotChange, _M3eRichTooltipElement_handleContentSlotChange, _M3eRichTooltipElement_handleActionsSlotChange, _M3eRichTooltipElement_updateMessage;
+var _M3eRichTooltipElement_instances, _M3eRichTooltipElement_id, _M3eRichTooltipElement_subheadText, _M3eRichTooltipElement_contentText, _M3eRichTooltipElement_message, _M3eRichTooltipElement_messageRegistered, _M3eRichTooltipElement_anchorLastPosition, _M3eRichTooltipElement_clickOutsideController, _M3eRichTooltipElement_handleBeforeToggle, _M3eRichTooltipElement_handleToggle, _M3eRichTooltipElement_handleKeyDown, _M3eRichTooltipElement_handleSubheadSlotChange, _M3eRichTooltipElement_handleContentSlotChange, _M3eRichTooltipElement_handleActionsSlotChange, _M3eRichTooltipElement_updateMessage;
 var M3eRichTooltipElement_1;
 /**
  * Provides contextual details for a control, such as explaining the value or purpose of a feature.
@@ -327,11 +327,16 @@ let M3eRichTooltipElement = M3eRichTooltipElement_1 = class M3eRichTooltipElemen
     /** @private */
     _M3eRichTooltipElement_messageRegistered.set(this, false);
     /** @private */
+    _M3eRichTooltipElement_anchorLastPosition.set(this, void 0);
+    /** @private */
     this._hasSubhead = false;
     /** @private */
     this._interactive = false;
     /** @private */
-    _M3eRichTooltipElement_documentClickHandler.set(this, e => __classPrivateFieldGet(this, _M3eRichTooltipElement_instances, "m", _M3eRichTooltipElement_handleDocumentClick).call(this, e));
+    _M3eRichTooltipElement_clickOutsideController.set(this, new ClickOutsideController(this, {
+      target: null,
+      callback: () => this.hide()
+    }));
     /**
      * The position of the tooltip.
      * @default "below-after"
@@ -370,9 +375,7 @@ let M3eRichTooltipElement = M3eRichTooltipElement_1 = class M3eRichTooltipElemen
   }
   /** @inheritdoc */
   show() {
-    if (this._interactive) {
-      document.addEventListener("click", __classPrivateFieldGet(this, _M3eRichTooltipElement_documentClickHandler, "f"));
-    }
+    __classPrivateFieldSet(this, _M3eRichTooltipElement_anchorLastPosition, undefined, "f");
     return super.show();
   }
   /**
@@ -380,10 +383,8 @@ let M3eRichTooltipElement = M3eRichTooltipElement_1 = class M3eRichTooltipElemen
    * @param [restoreFocus=true] Whether to restore focus to the element that triggered the interactive tooltip.
    */
   hide(restoreFocus = true) {
-    if (this._interactive) {
-      document.removeEventListener("click", __classPrivateFieldGet(this, _M3eRichTooltipElement_documentClickHandler, "f"));
-    }
     super.hide();
+    __classPrivateFieldSet(this, _M3eRichTooltipElement_anchorLastPosition, undefined, "f");
     if (restoreFocus && this._interactive && this.control && M3eInteractivityChecker.isFocusable(this.control)) {
       this.control.focus();
     }
@@ -423,14 +424,23 @@ let M3eRichTooltipElement = M3eRichTooltipElement_1 = class M3eRichTooltipElemen
         x += this.control?.clientWidth ?? 0;
       }
     }
-    if (M3eDirectionality.current === "rtl") {
-      base.style.right = `${window.innerWidth - x - base.clientWidth}px`;
-      base.style.left = "";
-    } else {
-      base.style.left = `${x}px`;
-      base.style.right = "";
+    if (__classPrivateFieldGet(this, _M3eRichTooltipElement_anchorLastPosition, "f")?.dir !== M3eDirectionality.current || __classPrivateFieldGet(this, _M3eRichTooltipElement_anchorLastPosition, "f").x !== x) {
+      if (M3eDirectionality.current === "rtl") {
+        base.style.right = `${window.innerWidth - x - base.clientWidth}px`;
+        base.style.left = "";
+      } else {
+        base.style.left = `${x}px`;
+        base.style.right = "";
+      }
+    }
+    if (__classPrivateFieldGet(this, _M3eRichTooltipElement_anchorLastPosition, "f")?.y !== y) {
+      base.style.top = `${y}px`;
     }
-    base.style.top = `${y}px`;
+    __classPrivateFieldSet(this, _M3eRichTooltipElement_anchorLastPosition, {
+      x,
+      y,
+      dir: M3eDirectionality.current
+    }, "f");
   }
 };
 _M3eRichTooltipElement_id = new WeakMap();
@@ -438,34 +448,41 @@ _M3eRichTooltipElement_subheadText = new WeakMap();
 _M3eRichTooltipElement_contentText = new WeakMap();
 _M3eRichTooltipElement_message = new WeakMap();
 _M3eRichTooltipElement_messageRegistered = new WeakMap();
-_M3eRichTooltipElement_documentClickHandler = new WeakMap();
+_M3eRichTooltipElement_anchorLastPosition = new WeakMap();
+_M3eRichTooltipElement_clickOutsideController = new WeakMap();
 _M3eRichTooltipElement_instances = new WeakSet();
 _M3eRichTooltipElement_handleBeforeToggle = function _M3eRichTooltipElement_handleBeforeToggle(e) {
-  const forwarded = new ToggleEvent("beforetoggle", {
+  if (!this.dispatchEvent(new ToggleEvent("beforetoggle", {
     oldState: e.oldState,
     newState: e.newState,
     bubbles: true,
     composed: true,
     cancelable: e.cancelable
-  });
-  if (!this.dispatchEvent(forwarded)) {
+  }))) {
     e.preventDefault();
     this.hide();
   }
 };
 _M3eRichTooltipElement_handleToggle = function _M3eRichTooltipElement_handleToggle(e) {
-  const forwarded = new ToggleEvent("toggle", {
+  switch (e.newState) {
+    case "open":
+      if (this._interactive) {
+        __classPrivateFieldGet(this, _M3eRichTooltipElement_clickOutsideController, "f").observe(this);
+        if (this.control) {
+          __classPrivateFieldGet(this, _M3eRichTooltipElement_clickOutsideController, "f").observe(this.control);
+        }
+      }
+      break;
+    case "closed":
+      __classPrivateFieldGet(this, _M3eRichTooltipElement_clickOutsideController, "f").unobserveAll();
+      break;
+  }
+  this.dispatchEvent(new ToggleEvent("toggle", {
     oldState: e.oldState,
     newState: e.newState,
     bubbles: true,
     composed: true
-  });
-  this.dispatchEvent(forwarded);
-};
-_M3eRichTooltipElement_handleDocumentClick = function _M3eRichTooltipElement_handleDocumentClick(e) {
-  if (!e.composedPath().some(x => x instanceof M3eRichTooltipElement_1 || x === this.control)) {
-    this.hide();
-  }
+  }));
 };
 _M3eRichTooltipElement_handleKeyDown = function _M3eRichTooltipElement_handleKeyDown(e) {
   if (e.key === "Escape" && !e.shiftKey && !e.ctrlKey) {
@@ -504,7 +521,7 @@ _M3eRichTooltipElement_updateMessage = function _M3eRichTooltipElement_updateMes
   }
 };
 /** The styles of the element. */
-M3eRichTooltipElement.styles = css`:host { display: contents; } .base { flex-direction: column; position: absolute; padding: unset; margin: unset; border: unset; padding-block-start: var(--m3e-rich-tooltip-padding-top, 0.75rem); padding-inline: var(--m3e-rich-tooltip-padding-inline, 1rem); max-width: var(--m3e-rich-tooltip-max-width, 20rem); box-sizing: border-box; overflow: visible; border-radius: var(--m3e-rich-tooltip-shape, ${DesignToken.shape.corner.medium}); background-color: var(--m3e-rich-tooltip-container-color, ${DesignToken.color.surfaceContainer}); display: none; opacity: 0; transform: scale(0.8); transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
+M3eRichTooltipElement.styles = css`:host { display: contents; } .base { contain: layout style; flex-direction: column; position: absolute; padding: unset; margin: unset; border: unset; padding-block-start: var(--m3e-rich-tooltip-padding-top, 0.75rem); padding-inline: var(--m3e-rich-tooltip-padding-inline, 1rem); max-width: var(--m3e-rich-tooltip-max-width, 20rem); box-sizing: border-box; overflow: visible; border-radius: var(--m3e-rich-tooltip-shape, ${DesignToken.shape.corner.medium}); background-color: var(--m3e-rich-tooltip-container-color, ${DesignToken.color.surfaceContainer}); display: none; opacity: 0; transform: scale(0.8); transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
             transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
             overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,
             display ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } .base:not(.has-actions) { padding-block-end: var(--m3e-rich-tooltip-padding-bottom, 0.75rem); } .base::backdrop { background-color: transparent; } .base:popover-open { display: flex; opacity: 1; transform: scale(1); } .base:not(.has-subhead) .subhead, .base:not(.has-actions) .actions { display: none; } .subhead { color: var(--m3e-rich-tooltip-subhead-color, ${DesignToken.color.onSurfaceVariant}); font-size: var(--m3e-rich-tooltip-subhead-font-size, ${DesignToken.typescale.standard.title.small.fontSize}); font-weight: var( --m3e-rich-tooltip-subhead-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight} ); line-height: var( --m3e-rich-tooltip-subhead-line-height, ${DesignToken.typescale.standard.title.small.lineHeight} ); letter-spacing: var(--m3e-rich-tooltip-subhead-tracking, ${DesignToken.typescale.standard.title.small.tracking}); padding-block-end: var(--m3e-rich-tooltip-subhead-bottom-space, 0.25rem); } .content { color: var(--m3e-rich-tooltip-supporting-text-color, ${DesignToken.color.onSurfaceVariant}); font-size: var( --m3e-rich-tooltip-supporting-text-font-size, ${DesignToken.typescale.standard.body.medium.fontSize} ); font-weight: var( --m3e-rich-tooltip-supporting-text-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-rich-tooltip-supporting-text-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-rich-tooltip-supporting-text-tracking, ${DesignToken.typescale.standard.body.medium.tracking} ); } .actions { margin-inline: calc( 0px - calc( var(--m3e-rich-tooltip-padding-inline, 1rem) - var(--m3e-rich-tooltip-actions-padding-inline, 0.25rem) ) ); padding-block-start: var(--m3e-rich-tooltip-actions-top-space, 0.75rem); padding-block-end: var(--m3e-rich-tooltip-actions-bottom-space, 0.5rem); } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; min-height: 1.5rem; column-gap: 0.5rem; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } @starting-style { .base:popover-open { opacity: 0; transform: scale(0.8); } } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Canvas; color: CanvasText; box-sizing: border-box; border: 1px solid CanvasText; } }`;
@@ -515,7 +532,7 @@ __decorate([state()], M3eRichTooltipElement.prototype, "_interactive", void 0);
 __decorate([property()], M3eRichTooltipElement.prototype, "position", void 0);
 M3eRichTooltipElement = M3eRichTooltipElement_1 = __decorate([customElement("m3e-rich-tooltip")], M3eRichTooltipElement);
 
-var _M3eTooltipElement_instances, _M3eTooltipElement_message, _M3eTooltipElement_handleSlotChange, _M3eTooltipElement_handleToggle;
+var _M3eTooltipElement_instances, _M3eTooltipElement_message, _M3eTooltipElement_anchorLastPosition, _M3eTooltipElement_handleSlotChange, _M3eTooltipElement_handleToggle;
 /**
  * Adds additional context to a button or other UI element.
  *
@@ -563,6 +580,8 @@ let M3eTooltipElement = class M3eTooltipElement extends TooltipElementBase {
     _M3eTooltipElement_instances.add(this);
     /** @private */
     _M3eTooltipElement_message.set(this, void 0);
+    /** @private */
+    _M3eTooltipElement_anchorLastPosition.set(this, void 0);
     /**
      * The position of the tooltip.
      * @default "below"
@@ -593,22 +612,42 @@ let M3eTooltipElement = class M3eTooltipElement extends TooltipElementBase {
     this.ariaHidden = "true";
   }
   /** @inheritdoc */
+  show() {
+    __classPrivateFieldSet(this, _M3eTooltipElement_anchorLastPosition, undefined, "f");
+    return super.show();
+  }
+  /** @inheritdoc */
+  hide() {
+    super.hide();
+    __classPrivateFieldSet(this, _M3eTooltipElement_anchorLastPosition, undefined, "f");
+  }
+  /** @inheritdoc */
   render() {
     return html`<div class="base" popover="manual" @toggle="${__classPrivateFieldGet(this, _M3eTooltipElement_instances, "m", _M3eTooltipElement_handleToggle)}"><slot @slotchange="${__classPrivateFieldGet(this, _M3eTooltipElement_instances, "m", _M3eTooltipElement_handleSlotChange)}"></slot></div>`;
   }
   /** @inheritdoc */
   _updatePosition(base, x, y) {
-    if (M3eDirectionality.current === "rtl") {
-      base.style.right = `${window.innerWidth - x - base.clientWidth}px`;
-      base.style.left = "";
-    } else {
-      base.style.left = `${x}px`;
-      base.style.right = "";
+    if (__classPrivateFieldGet(this, _M3eTooltipElement_anchorLastPosition, "f")?.dir !== M3eDirectionality.current || __classPrivateFieldGet(this, _M3eTooltipElement_anchorLastPosition, "f")?.x !== x) {
+      if (M3eDirectionality.current === "rtl") {
+        base.style.right = `${window.innerWidth - x - base.clientWidth}px`;
+        base.style.left = "";
+      } else {
+        base.style.left = `${x}px`;
+        base.style.right = "";
+      }
+    }
+    if (__classPrivateFieldGet(this, _M3eTooltipElement_anchorLastPosition, "f")?.y !== y) {
+      base.style.top = `${y}px`;
     }
-    base.style.top = `${y}px`;
+    __classPrivateFieldSet(this, _M3eTooltipElement_anchorLastPosition, {
+      x,
+      y,
+      dir: M3eDirectionality.current
+    }, "f");
   }
 };
 _M3eTooltipElement_message = new WeakMap();
+_M3eTooltipElement_anchorLastPosition = new WeakMap();
 _M3eTooltipElement_instances = new WeakSet();
 _M3eTooltipElement_handleSlotChange = function _M3eTooltipElement_handleSlotChange(e) {
   const message = getTextContent(e.target, true);
@@ -631,7 +670,7 @@ _M3eTooltipElement_handleToggle = function _M3eTooltipElement_handleToggle(e) {
   }
 };
 /** The styles of the element. */
-M3eTooltipElement.styles = css`:host { display: contents; } .base { position: absolute; pointer-events: none; margin: unset; border: unset; word-break: normal; overflow-wrap: break-word; padding: var(--m3e-tooltip-padding, 0.25rem 0.5rem); min-width: var(--m3e-tooltip-min-width, 2.5rem); max-width: var(--m3e-tooltip-max-width, 12.5rem); min-height: var(--m3e-tooltip-min-height, 1.5rem); max-height: var(--m3e-tooltip-max-height, 40vh); box-sizing: border-box; overflow: hidden; text-align: center; border-radius: var(--m3e-tooltip-shape, ${DesignToken.shape.corner.extraSmall}); background-color: var(--m3e-tooltip-container-color, ${DesignToken.color.inverseSurface}); color: var(--m3e-tooltip-supporting-text-color, ${DesignToken.color.inverseOnSurface}); font-size: var(--m3e-tooltip-supporting-text-font-size, ${DesignToken.typescale.standard.body.small.fontSize}); font-weight: var( --m3e-tooltip-supporting-text-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight} ); line-height: var( --m3e-tooltip-supporting-text-line-height, ${DesignToken.typescale.standard.body.small.lineHeight} ); letter-spacing: var( --m3e-tooltip-supporting-text-tracking, ${DesignToken.typescale.standard.body.small.tracking} ); display: none; opacity: 0; transform: scale(0.8); transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
+M3eTooltipElement.styles = css`:host { display: contents; } .base { contain: layout style paint; position: absolute; pointer-events: none; margin: unset; border: unset; word-break: normal; overflow-wrap: break-word; padding: var(--m3e-tooltip-padding, 0.25rem 0.5rem); min-width: var(--m3e-tooltip-min-width, 2.5rem); max-width: var(--m3e-tooltip-max-width, 12.5rem); min-height: var(--m3e-tooltip-min-height, 1.5rem); max-height: var(--m3e-tooltip-max-height, 40vh); box-sizing: border-box; overflow: hidden; text-align: center; border-radius: var(--m3e-tooltip-shape, ${DesignToken.shape.corner.extraSmall}); background-color: var(--m3e-tooltip-container-color, ${DesignToken.color.inverseSurface}); color: var(--m3e-tooltip-supporting-text-color, ${DesignToken.color.inverseOnSurface}); font-size: var(--m3e-tooltip-supporting-text-font-size, ${DesignToken.typescale.standard.body.small.fontSize}); font-weight: var( --m3e-tooltip-supporting-text-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight} ); line-height: var( --m3e-tooltip-supporting-text-line-height, ${DesignToken.typescale.standard.body.small.lineHeight} ); letter-spacing: var( --m3e-tooltip-supporting-text-tracking, ${DesignToken.typescale.standard.body.small.tracking} ); display: none; opacity: 0; transform: scale(0.8); transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
         transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
         overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,
         display ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host(:is(:state(--multiline), :--multiline)) .base { text-align: start; } .base::backdrop { background-color: transparent; } .base:popover-open { display: block; opacity: 1; transform: scale(1); } @starting-style { .base:popover-open { opacity: 0; transform: scale(0.8); } } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Canvas; color: CanvasText; box-sizing: border-box; border: 1px solid CanvasText; } }`;