@m3e/web 2.5.4 → 2.5.5

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 - Emitted 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(:state(-with-overline))) .overline,\r\n    :host(:not(:state(-with-title))) .title,\r\n    :host(:not(:state(-with-overline)):not(:state(-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(:state(-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":";;;;;;;;;;;AAeA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;AAEI,IAAMA,iBAAiB,GAAvB,MAAMA,iBAAkB,SAAQC,QAAQ,CAACC,QAAQ,CAACC,eAAe,CAACC,IAAI,CAACC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;AAuDlG;EACmBC,MAAMA,CAACC,iBAAuC,EAAA;AAC/D,IAAA,KAAK,CAACD,MAAM,CAACC,iBAAiB,CAAC;AAE/B,IAAA,IAAIA,iBAAiB,CAACC,GAAG,CAAC,UAAU,CAAC,EAAE;MACrC,IAAI,CAACC,YAAY,GAAG,IAAI;MACxB,IAAI,CAACC,WAAW,GAAG,IAAI,CAACC,QAAQ,GAAG,MAAM,GAAG,IAAI;AAClD,IAAA;AAEA,IAAA,IAAIJ,iBAAiB,CAACC,GAAG,CAAC,MAAM,CAAC,EAAE;MACjC,IAAI,IAAI,CAACI,IAAI,EAAE;AACb,QAAA,IAAI,CAACC,KAAK,EAAEC,KAAK,CAACC,WAAW,CAAC,UAAU,EAAE,CAAA,EAAG,IAAI,CAACH,IAAI,CAACI,KAAK,GAAG,CAAC,EAAE,CAAC;AACrE,MAAA,CAAC,MAAM;QACL,IAAI,CAACH,KAAK,EAAEC,KAAK,CAACG,cAAc,CAAC,UAAU,CAAC;AAC9C,MAAA;AACF,IAAA;AACF,EAAA;AAEA;EACmBC,YAAYA,CAACC,kBAAwC,EAAA;AACtE,IAAA,KAAK,CAACD,YAAY,CAACC,kBAAkB,CAAC;AACtC,IAAA,IAAI,CAACC,WAAW,EAAEC,MAAM,CAAC,IAAI,CAAC;AAChC,EAAA;AAEA;AACSC,EAAAA,MAAMA,GAAA;AACb,IAAA,OAAOC,IAAI,CAAA,4FAAA,CAC6B;AAC1C,EAAA;;AAlFA;AACgBvB,iBAAA,CAAAwB,MAAM,GAAmBC,GAAG,iIAMGC,WAAW,CAACC,KAAK,CAACC,MAAM,CAACC,cAAc,CAAA,oWAAA,EAYpEC,SAAS,CACrB,CAAA,yDAAA,EAA4DJ,WAAW,CAACK,MAAM,CAACC,QAAQ,CAACC,KAAK,CAAA,EAAA,EAAKP,WAAW,CAACK,MAAM,CAACG,MAAM,CAACC,QAAQ,EAAE,CACvI,CAAA,uEAAA,EAG0CT,WAAW,CAACU,SAAS,CAACD,QAAQ,CAACE,IAAI,CAACC,KAAK,CAACC,QAAQ,CAAA,gDAAA,EAC9Cb,WAAW,CAACU,SAAS,CAACD,QAAQ,CAACE,IAAI,CAACC,KAAK,CAACE,UAAU,CAAA,gDAAA,EACpDd,WAAW,CAACU,SAAS,CAACD,QAAQ,CAACE,IAAI,CAACC,KAAK,CAACG,UAAU,CAAA,gDAAA,EACpDf,WAAW,CAACU,SAAS,CAACD,QAAQ,CAACE,IAAI,CAACC,KAAK,CAACI,QAAQ,CAAA,oCAAA,EAC9DhB,WAAW,CAACiB,KAAK,CAACC,gBAAgB,CAAA,2EAAA,EAGjBlB,WAAW,CAACU,SAAS,CAACS,UAAU,CAACR,IAAI,CAACC,KAAK,CAACC,QAAQ,CAAA,yDAAA,EAChDb,WAAW,CAACU,SAAS,CAACS,UAAU,CAACR,IAAI,CAACC,KAAK,CAACE,UAAU,CAAA,yDAAA,EACtDd,WAAW,CAACU,SAAS,CAACS,UAAU,CAACR,IAAI,CAACC,KAAK,CAACG,UAAU,CAAA,yDAAA,EACtDf,WAAW,CAACU,SAAS,CAACS,UAAU,CAACR,IAAI,CAACC,KAAK,CAACI,QAAQ,gDAChEhB,WAAW,CAACiB,KAAK,CAACG,SAAS,CAAA,2JAAA,CAlCrD;AAiD2BC,UAAA,CAAA,CAAhCC,KAAK,CAAC,OAAO,CAAC,CAAsC,EAAAhD,iBAAA,CAAAiD,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AACbF,UAAA,CAAA,CAAvCC,KAAK,CAAC,cAAc,CAAC,CAAqD,EAAAhD,iBAAA,CAAAiD,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AACjEF,UAAA,CAAA,CAARG,KAAK,EAAE,CAAgB,EAAAlD,iBAAA,CAAAiD,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AArD9BjD,iBAAiB,GAAA+C,UAAA,CAAA,CAD7BI,aAAa,CAAC,cAAc,CAAC,CACjB,EAAAnD,iBAAiB,CAoF7B;;;AC1GD;MACaoD,YAAY,CAAA;AACvB;;;;;AAKG;AACH,EAAA,OAAOC,QAAQA,CAACC,OAAoB,EAAEC,WAAmB,CAAC,EAAA;IACxD,MAAMC,QAAQ,GAAG,CAAC;IAClB,IAAIC,QAAQ,GAAGD,QAAQ;AACvB,IAAA,MAAME,KAAK,GAAG,IAAIC,KAAK,EAAW;IAClCL,OAAO,CACJM,gBAAgB,CACf,gMAAgM,CACjM,CACAC,OAAO,CAAEP,OAAO,IAAI;AACnB,MAAA,MAAMtC,KAAK,GAAG8C,sBAAA,CAAAC,EAAY,EAAAA,EAAA,EAAA,GAAA,EAAAC,4BAAA,CAAgB,MAA5BD,EAAY,EAAiBT,OAAO,CAAC;MACnDG,QAAQ,GAAGQ,IAAI,CAACC,GAAG,CAAClD,KAAK,EAAEyC,QAAQ,CAAC;MACpCC,KAAK,CAACS,IAAI,CAAC;AACTC,QAAAA,EAAE,EAAEd,OAAO,CAACc,EAAE,IAAIC,IAAI,EAAE;QACxBf,OAAO;QACPtC,KAAK;AACLsD,QAAAA,KAAK,EAAEC,cAAc,CAACjB,OAAO,EAAE,IAAI,CAAC;QACpCI,KAAK,EAAE,IAAIC,KAAK;AACjB,OAAA,CAAC;AACJ,IAAA,CAAC,CAAC;AAEJ,IAAA,KAAK,IAAI3C,KAAK,GAAGyC,QAAQ,GAAGF,QAAQ,GAAG,CAAC,EAAEvC,KAAK,GAAGyC,QAAQ,EAAEzC,KAAK,EAAE,EAAE;AACnE,MAAA,KAAK,IAAIwD,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGd,KAAK,CAACe,MAAM,EAAED,CAAC,EAAE,EAAE;AACrC,QAAA,MAAM5D,IAAI,GAAG8C,KAAK,CAACc,CAAC,CAAC;AACrB,QAAA,IAAI5D,IAAI,CAACI,KAAK,KAAKA,KAAK,EAAE;UACxB,KAAK,IAAI0D,CAAC,GAAGF,CAAC,EAAEE,CAAC,IAAI,CAAC,EAAEA,CAAC,EAAE,EAAE;AAC3B,YAAA,MAAMC,IAAI,GAAGjB,KAAK,CAACgB,CAAC,CAAC;AACrB,YAAA,IAAIC,IAAI,CAAC3D,KAAK,GAAGA,KAAK,EAAE;AACtB2D,cAAAA,IAAI,CAACjB,KAAK,CAACS,IAAI,CAACvD,IAAI,CAAC;AACrB,cAAA;AACF,YAAA;AACF,UAAA;AACF,QAAA;AACF,MAAA;AACF,IAAA;AAEA8C,IAAAA,KAAK,CAACG,OAAO,CAAEe,CAAC,IAAMA,CAAC,CAAC5D,KAAK,IAAIyC,QAAQ,GAAG,CAAE,CAAC;IAC/C,OAAOC,KAAK,CAACmB,MAAM,CAAED,CAAC,IAAKA,CAAC,CAAC5D,KAAK,KAAK,CAAC,CAAC;AAC3C,EAAA;AAQD;wFALwBsC,OAAoB,EAAA;AACzC,EAAA,OAAOA,OAAO,CAACwB,OAAO,CAACC,UAAU,CAAC,GAAG,CAAC,GAClCC,QAAQ,CAAC1B,OAAO,CAACwB,OAAO,CAACG,SAAS,CAAC,CAAC,CAAC,CAAC,GACtCD,QAAQ,CAAC1B,OAAO,CAAC4B,YAAY,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC;AACpD,CAAC;;;AChDH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDG;AAEI,IAAMC,aAAa,GAAnB,MAAMA,aAAc,SAAQC,OAAO,CAACjF,eAAe,CAACC,IAAI,CAACC,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;AAApFgF,EAAAA,WAAAA,GAAA;;;AA2FL;IAAiC,IAAA,CAAAC,IAAI,GAAmB,EAAE;AAE1D;AAAgBC,IAAAA,2BAAA,CAAAC,GAAA,CAAA,IAAA,EAAgB,KAAK,CAAA;AAErC;IAAyBC,+BAAA,CAAAD,GAAA,CAAA,IAAA,EAAoB,IAAIE,gBAAgB,EAAqB,CACnFC,cAAc,EAAE,CAChBC,uBAAuB,EAAE,CACzBC,qBAAqB,EAAE,CACvBC,qBAAqB,CAAC,MAAK;MAC1B,IAAI,IAAI,CAACC,gBAAgB,EAAE;AACzB,QAAA,MAAMC,IAAI,GAAGlC,sBAAA,CAAA,IAAI,EAAA2B,+BAAA,EAAA,GAAA,CAAkB,CAACQ,aAAa,CAAC,CAAC,CAAC;QACpD,IAAI,CAACD,IAAI,EAAE;AACTE,UAAAA,cAAc,CAAC,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC;AACzC,UAAA,IAAI,CAACH,gBAAgB,CAACjF,KAAK,CAACqF,GAAG,GAAG,CAAA,GAAA,CAAK;AACvC,UAAA,IAAI,CAACJ,gBAAgB,CAACjF,KAAK,CAACsF,MAAM,GAAG,CAAA,GAAA,CAAK;AAC1C,UAAA,IAAI,CAACL,gBAAgB,CAACjF,KAAK,CAACuF,UAAU,GAAG,QAAQ;AACnD,QAAA,CAAC,MAAM;AACLC,UAAAA,sBAAsB,CAACN,IAAI,EAAE,IAAI,EAAE;AAAEO,YAAAA,KAAK,EAAE,SAAS;AAAEC,YAAAA,QAAQ,EAAE;AAAQ,WAAE,CAAC;UAC5E,IAAI,CAACT,gBAAgB,CAACjF,KAAK,CAACqF,GAAG,GAAG,CAAA,EAAGH,IAAI,CAACS,SAAS,CAAA,EAAA,CAAI;UACvD,IAAI,CAACV,gBAAgB,CAACjF,KAAK,CAACsF,MAAM,GAAG,CAAA,EAAGJ,IAAI,CAACU,YAAY,CAAA,EAAA,CAAI;AAC7D,UAAA,IAAI,CAACX,gBAAgB,CAACjF,KAAK,CAACuF,UAAU,GAAGL,IAAI,CAACU,YAAY,IAAI,CAAC,GAAG,QAAQ,GAAG,EAAE;AAE/E,UAAA,IAAIC,cAAc,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE;AACvCC,YAAAA,UAAU,CAAC,MAAMV,cAAc,CAAC,IAAI,EAAE,aAAa,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC;AAClE,UAAA;AACF,QAAA;AACF,MAAA;AACF,IAAA,CAAC,CAAC,CAAA;AAEJ;IACSW,qCAAA,CAAArB,GAAA,CAAA,IAAA,EAA0B,IAAIsB,sBAAsB,CAAC,IAAI,EAAE;AAClEC,MAAAA,MAAM,EAAE,IAAI;MACZC,QAAQ,EAAGC,OAAO,IAAI;AACpB,QAAA,IAAI,CAAC,IAAI,CAACC,OAAO,IAAIpD,sBAAA,CAAA,IAAI,EAAAyB,2BAAA,EAAA,GAAA,CAAc,EAAE;AAEzC,QAAA,MAAM4B,YAAY,GAAG,IAAI,CAACD,OAAO,CAACE,SAAS;QAC3C,IAAIC,cAAc,GAAuB,IAAI;AAC7C,QAAA,IAAIC,eAAe,GAAGC,MAAM,CAACC,iBAAiB;QAE9CP,OAAO,CACJpC,MAAM,CAAED,CAAC,IAAKA,CAAC,CAAC6C,cAAc,CAAC,CAC/BC,GAAG,CAAE9C,CAAC,IAAkBA,CAAC,CAACmC,MAAM,CAAC,CACjClD,OAAO,CAAEmC,IAAI,IAAI;AAChB,UAAA,MAAMS,SAAS,GAAGT,IAAI,CAACS,SAAS;UAChC,MAAMkB,QAAQ,GAAG1D,IAAI,CAAC2D,GAAG,CAACnB,SAAS,GAAGU,YAAY,CAAC;UACnD,IAAIQ,QAAQ,GAAGL,eAAe,EAAE;AAC9BA,YAAAA,eAAe,GAAGK,QAAQ;AAC1BN,YAAAA,cAAc,GAAGrB,IAAI;AACvB,UAAA;AACF,QAAA,CAAC,CAAC;AAEJ,QAAA,IAAIqB,cAAc,EAAE;UAClB,MAAMrB,IAAI,GAAGlC,sBAAA,CAAA,IAAI,uCAAkB,CAAC+D,KAAK,CAACC,IAAI,CAAElD,CAAC,IAAKA,CAAC,CAAChE,IAAI,EAAE0C,OAAO,KAAK+D,cAAc,CAAC;AACzF,UAAA,IAAIrB,IAAI,EAAE;YACRlC,sBAAA,CAAA,IAAI,EAAA2B,+BAAA,EAAA,GAAA,CAAkB,CAACsC,MAAM,CAAC/B,IAAI,CAAC;AACrC,UAAA;AACF,QAAA;AACF,MAAA;AACD,KAAA,CAAC,CAAA;AAEF;IACSgC,+BAAA,CAAAxC,GAAA,CAAA,IAAA,EAAoB,IAAIyC,gBAAgB,CAAC,IAAI,EAAE;AACtDlB,MAAAA,MAAM,EAAE,IAAI;AACZC,MAAAA,QAAQ,EAAEA,MAAOkB,uBAAA,IAAI,EAAA3C,2BAAA,EAAiB,KAAK,EAAA,GAAA,CAAC;AAC5C4C,MAAAA,QAAQ,EAAE;AACX,KAAA,CAAC,CAAA;AAEF;IACSC,iCAAA,CAAA5C,GAAA,CAAA,IAAA,EAAsB,IAAI6C,kBAAkB,CAAC,IAAI,EAAE;AAC1DtB,MAAAA,MAAM,EAAE,IAAI;AACZuB,MAAAA,MAAM,EAAE;AACNC,QAAAA,SAAS,EAAE,IAAI;AACfC,QAAAA,OAAO,EAAE;OACV;AACDxB,MAAAA,QAAQ,EAAEA,MAAM,IAAI,CAACyB,UAAU;AAChC,KAAA,CAAC,CAAA;AAEF;;;AAGG;IACiD,IAAA,CAAAlF,QAAQ,GAAG,CAAC;AAoHlE,EAAA;AAlHE;EACSlC,MAAMA,CAAC6F,OAAoB,EAAA;AAClC,IAAA,KAAK,CAAC7F,MAAM,CAAC6F,OAAO,CAAC;IACrBpD,sBAAA,CAAA,IAAI,EAAAsE,iCAAA,EAAA,GAAA,CAAoB,CAACM,OAAO,CAACxB,OAAO,CAAC;IACzCpD,sBAAA,CAAA,IAAI,EAAAkE,+BAAA,EAAA,GAAA,CAAkB,CAACU,OAAO,CAACxB,OAAO,CAAC;AACvCpD,IAAAA,sBAAA,CAAA,IAAI,EAAA6E,wBAAA,EAAA,GAAA,EAAAC,0BAAA,CAAa,CAAAC,IAAA,CAAjB,IAAI,CAAe;AACrB,EAAA;AAEA;AACSC,EAAAA,MAAMA,GAAA;IACb,IAAI,IAAI,CAAC5B,OAAO,EAAE;AAChBpD,MAAAA,sBAAA,CAAA,IAAI,yCAAoB,CAACiF,SAAS,CAAC,IAAI,CAAC7B,OAAO,CAAC;AAChDpD,MAAAA,sBAAA,CAAA,IAAI,uCAAkB,CAACiF,SAAS,CAAC,IAAI,CAAC7B,OAAO,CAAC;AAChD,IAAA;IACA,KAAK,CAAC4B,MAAM,EAAE;AACdhF,IAAAA,sBAAA,CAAA,IAAI,EAAA6E,wBAAA,EAAA,GAAA,EAAAC,0BAAA,CAAa,CAAAC,IAAA,CAAjB,IAAI,CAAe;AACrB,EAAA;AAEA;EACmBG,UAAUA,CAACzI,iBAAuC,EAAA;AACnE,IAAA,KAAK,CAACyI,UAAU,CAACzI,iBAAiB,CAAC;AAEnC,IAAA,IAAIA,iBAAiB,CAACC,GAAG,CAAC,UAAU,CAAC,EAAE;AACrCsD,MAAAA,sBAAA,CAAA,IAAI,EAAA6E,wBAAA,EAAA,GAAA,EAAAC,0BAAA,CAAa,CAAAC,IAAA,CAAjB,IAAI,CAAe;AACrB,IAAA;AACF,EAAA;AAEA;EACmBI,OAAOA,CAAC9H,kBAAkC,EAAA;AAC3D,IAAA,KAAK,CAAC8H,OAAO,CAAC9H,kBAAkB,CAAC;AAEjC,IAAA,IAAIA,kBAAkB,CAACX,GAAG,CAAC,MAAM,CAAC,EAAE;MAClC,MAAM;QAAE0I,KAAK;AAAEC,QAAAA;OAAS,GAAGrF,sBAAA,CAAA,IAAI,EAAA2B,+BAAA,EAAA,GAAA,CAAkB,CAAC2D,QAAQ,CAAC,CACzD,IAAI,IAAI,CAACC,UAAU,EAAEzF,gBAAgB,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAC7D,CAAC;MAEF,IAAI,CAACE,sBAAA,CAAA,IAAI,uCAAkB,CAACwF,UAAU,EAAE;AACtCpD,QAAAA,cAAc,CAAC,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC;QACzCpC,sBAAA,CAAA,IAAI,uCAAkB,CAACyF,gBAAgB,CAACL,KAAK,CAACpB,IAAI,CAAElD,CAAC,IAAK,CAACA,CAAC,CAAC4E,QAAQ,CAAC,CAAC;AACzE,MAAA;AAEA,MAAA,KAAK,MAAMxD,IAAI,IAAIkD,KAAK,EAAE;QACxB,IAAIlD,IAAI,CAACpF,IAAI,EAAE;AACbkD,UAAAA,sBAAA,CAAA,IAAI,EAAA+C,qCAAA,EAAA,GAAA,CAAwB,CAAC6B,OAAO,CAAC1C,IAAI,CAACpF,IAAI,CAAC0C,OAAO,CAAC;AACzD,QAAA;AACF,MAAA;AAEA,MAAA,KAAK,MAAM0C,IAAI,IAAImD,OAAO,EAAE;QAC1B,IAAInD,IAAI,CAACpF,IAAI,EAAE;AACbkD,UAAAA,sBAAA,CAAA,IAAI,EAAA+C,qCAAA,EAAA,GAAA,CAAwB,CAACkC,SAAS,CAAC/C,IAAI,CAACpF,IAAI,CAAC0C,OAAO,CAAC;AAC3D,QAAA;AACF,MAAA;AACF,IAAA;AACF,EAAA;AAEA;AACmBhC,EAAAA,MAAMA,GAAA;IACvB,OAAOC,IAAI,gFAEgCuC,sBAAA,CAAA,IAAI,EAAA6E,wBAAA,EAAA,GAAA,EAAAc,uCAAA,CAA0B,CAAA,kEAAA,EAGjC3F,sBAAA,CAAA,IAAI,EAAA6E,wBAAA,EAAA,GAAA,EAAAe,oCAAA,CAAuB,CAAA,mDAAA,EAK7D,IAAI,CAACpE,IAAI,CAACoC,GAAG,CAAE9C,CAAC,IAAKd,sBAAA,CAAA,IAAI,EAAA6E,wBAAA,EAAA,GAAA,EAAAgB,yBAAA,CAAY,CAAAd,IAAA,CAAhB,IAAI,EAAajE,CAAC,CAAC,CAAC,CAAA,4DAAA,CAEW;AAC5D,EAAA;AAuCA;AAEQ6D,EAAAA,UAAUA,GAAA;AAChB3E,IAAAA,sBAAA,CAAA,IAAI,EAAA6E,wBAAA,EAAA,GAAA,EAAAC,0BAAA,CAAa,CAAAC,IAAA,CAAjB,IAAI,CAAe;AACrB,EAAA;;;;;;;;+DAxCYjI,IAAa,EAAA;EACvB,OAAOW,IAAI,CAAA,uCAAA,EAC4BX,IAAI,CAAA,UAAA,EAAakD,sBAAA,CAAA,IAAI,4DAAa,CAAA,EAAA,EAAKlD,IAAI,CAAC0D,KAAK,CAAA,eAAA,EACpF1D,IAAI,CAAC8C,KAAK,CAACe,MAAM,IAAI,CAAC,GACpBmF,OAAO,GACPrI,IAAI,CAAA,IAAA,EACAX,IAAI,CAAC8C,KAAK,CAACgE,GAAG,CAAE9C,CAAC,IAAKd,sBAAA,CAAA,IAAI,EAAA6E,wBAAA,EAAA,GAAA,EAAAgB,yBAAA,CAAY,CAAAd,IAAA,CAAhB,IAAI,EAAajE,CAAC,CAAC,CAAC,CAAA,KAAA,CACxC,CAAA,KAAA,CACN;AACR,CAAC;2FAGyBiF,CAAQ,EAAA;EAChC3D,cAAc,CAAC,IAAI,EAAE,gBAAgB,EAAE4D,gBAAgB,CAAkBD,CAAC,CAAC9C,MAAM,CAAC,CAAC;AACrF,CAAC;qFAGsB8C,CAAQ,EAAA;EAC7B3D,cAAc,CAAC,IAAI,EAAE,aAAa,EAAE4D,gBAAgB,CAAkBD,CAAC,CAAC9C,MAAM,CAAC,CAAC;AAClF,CAAC;iEAGY8C,CAAQ,EAAA;EACnB,IAAIA,CAAC,CAAC9C,MAAM,YAAY/G,iBAAiB,IAAI,CAAC6J,CAAC,CAAC9C,MAAM,CAACyC,QAAQ,IAAIK,CAAC,CAAC9C,MAAM,CAACnG,IAAI,EAAE0C,OAAO,EAAE;IACzF4E,sBAAA,CAAA,IAAI,EAAA3C,2BAAA,EAAiB,IAAI,EAAA,GAAA,CAAA;IACzBsE,CAAC,CAAC9C,MAAM,CAACnG,IAAI,CAAC0C,OAAO,CAACyG,cAAc,CAAC;AAAExD,MAAAA,KAAK,EAAE,OAAO;AAAEC,MAAAA,QAAQ,EAAE;AAAQ,KAAE,CAAC;AAC5E1C,IAAAA,sBAAA,CAAA,IAAI,uCAAkB,CAACyF,gBAAgB,CAACM,CAAC,CAAC9C,MAAM,CAAC;AACjDjD,IAAAA,sBAAA,CAAA,IAAI,uCAAkB,CAACiE,MAAM,CAAC8B,CAAC,CAAC9C,MAAM,CAAC;AACzC,EAAA;AACF,CAAC;;AAIC,EAAA,IAAI,CAACzB,IAAI,GAAG,IAAI,CAAC4B,OAAO,GAAG9D,YAAY,CAACC,QAAQ,CAAC,IAAI,CAAC6D,OAAO,EAAEjD,IAAI,CAAC+F,GAAG,CAAC,CAAC,EAAE/F,IAAI,CAACC,GAAG,CAAC,IAAI,CAACX,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE;AAC9G,CAAC;AAxRD;AACgB4B,aAAA,CAAA3D,MAAM,GAAmBC,GAAG,CAAA,sFAAA,EAKrBC,WAAW,CAACuI,SAAS,CAACC,SAAS,CAAA,mBAAA,EAC/BxI,WAAW,CAACuI,SAAS,CAACtH,KAAK,CAAA,2YAAA,EAyBHjB,WAAW,CAACC,KAAK,CAACC,MAAM,CAACC,cAAc,CAAA,2DAAA,EACxBH,WAAW,CAACiB,KAAK,CAACwH,OAAO,CAAA,eAAA,EACrErI,SAAS,CAAC,iEAAiEJ,WAAW,CAACK,MAAM,CAACC,QAAQ,CAACC,KAAK,CAAA;AACpH,UAAA,EAAAP,WAAW,CAACK,MAAM,CAACG,MAAM,CAACC,QAAQ,CAAA;AACsB,kEAAA,EAAAT,WAAW,CAACK,MAAM,CAACC,QAAQ,CAACC,KAAK,CAAA;AACzF,UAAA,EAAAP,WAAW,CAACK,MAAM,CAACG,MAAM,CAACC,QAAQ,CAAA;AACmB,+DAAA,EAAAT,WAAW,CAACK,MAAM,CAACC,QAAQ,CAACC,KAAK,CAAA;AACtF,UAAA,EAAAP,WAAW,CAACK,MAAM,CAACG,MAAM,CAACC,QAAQ,CAAA,CAAE,CAAC,CAAA,6qBAAA,EA4BIT,WAAW,CAACU,SAAS,CAACD,QAAQ,CAACmC,KAAK,CAAC8F,KAAK,CAAC7H,QAAQ,CAAA,oDAAA,EAC/Cb,WAAW,CAACU,SAAS,CAACD,QAAQ,CAACmC,KAAK,CAAC8F,KAAK,CAAC5H,UAAU,CAAA,oDAAA,EACrDd,WAAW,CAACU,SAAS,CAACD,QAAQ,CAACmC,KAAK,CAAC8F,KAAK,CAAC3H,UAAU,CAAA,oDAAA,EACrDf,WAAW,CAACU,SAAS,CAACD,QAAQ,CAACmC,KAAK,CAAC8F,KAAK,CAAC1H,QAAQ,CAAA,wCAAA,EAC/DhB,WAAW,CAACiB,KAAK,CAACC,gBAAgB,CAAA,2EAAA,EAG7BlB,WAAW,CAACU,SAAS,CAACD,QAAQ,CAACkI,QAAQ,CAACD,KAAK,CAAC7H,QAAQ,CAAA,iDAAA,EAClDb,WAAW,CAACU,SAAS,CAACD,QAAQ,CAACkI,QAAQ,CAACD,KAAK,CAAC5H,UAAU,CAAA,iDAAA,EACxDd,WAAW,CAACU,SAAS,CAACD,QAAQ,CAACkI,QAAQ,CAACD,KAAK,CAAC3H,UAAU,CAAA,iDAAA,EACxDf,WAAW,CAACU,SAAS,CAACD,QAAQ,CAACkI,QAAQ,CAACD,KAAK,CAAC1H,QAAQ,CAAA,qCAAA,EAClEhB,WAAW,CAACiB,KAAK,CAACG,SAAS,CAAA,mJAAA,CA7E7C;AAyFWC,UAAA,CAAA,CAAhBG,KAAK,EAAE,CAAmC,EAAAiC,aAAA,CAAAlC,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AACEF,UAAA,CAAA,CAA5CC,KAAK,CAAC,mBAAmB,CAAC,CAAiD,EAAAmC,aAAA,CAAAlC,SAAA,EAAA,kBAAA,EAAA,MAAA,CAAA;AAgFxCF,UAAA,CAAA,CAAnDuH,QAAQ,CAAC;AAAEC,EAAAA,SAAS,EAAE,WAAW;AAAEC,EAAAA,IAAI,EAAEjD;AAAM,CAAE,CAAC,CAAc,EAAApC,aAAA,CAAAlC,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAiHzDF,UAAA,CAAA,CADPoF,QAAQ,CAAC,EAAE,CAAC,CAGZ,EAAAhD,aAAA,CAAAlC,SAAA,EAAA,YAAA,EAAA,IAAA,CAAA;AA/RUkC,aAAa,GAAApC,UAAA,CAAA,CADzBI,aAAa,CAAC,SAAS,CAAC,CACZ,EAAAgC,aAAa,CAgSzB;;;;"}
+{"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 - Emitted 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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"}

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(:state(-with-overline))) .overline, :host(:not(:state(-with-title))) .title, :host(:not(:state(-with-overline)):not(:state(-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(:state(-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 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};
 //# 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 - Emitted 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(:state(-with-overline))) .overline,\r\n    :host(:not(:state(-with-title))) .title,\r\n    :host(:not(:state(-with-overline)):not(:state(-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(:state(-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":";;;;;2nBA0CO,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,iCAjFgBzB,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,ECMK,IAAMC,EAAN,cAA4BC,EAAQlF,EAAgBC,EAAKC,EAAY,iBAArEiF,WAAAA,mCA2F4B5E,KAAA6E,KAAuB,GAExCC,EAAAC,IAAA/E,MAAgB,GAEPgF,EAAAD,IAAA/E,MAAoB,IAAIiF,GAC9CC,iBACAC,0BACAC,wBACAC,sBAAsB,KACrB,GAAIrF,KAAKsF,iBAAkB,CACzB,MAAMC,EAAOlC,EAAArD,KAAIgF,EAAA,KAAmBQ,cAAc,GAC7CD,GAMHE,EAAuBF,EAAMvF,KAAM,CAAE0F,MAAO,UAAWC,SAAU,WACjE3F,KAAKsF,iBAAiBhF,MAAMsF,IAAM,GAAGL,EAAKM,cAC1C7F,KAAKsF,iBAAiBhF,MAAMwF,OAAS,GAAGP,EAAKQ,iBAC7C/F,KAAKsF,iBAAiBhF,MAAM0F,WAAkC,GAArBT,EAAKQ,aAAoB,SAAW,GAEzEE,EAAejG,KAAM,gBACvBkG,WAAW,IAAMC,EAAenG,KAAM,eAAe,GAAQ,MAX/DmG,EAAenG,KAAM,eAAe,GACpCA,KAAKsF,iBAAiBhF,MAAMsF,IAAM,MAClC5F,KAAKsF,iBAAiBhF,MAAMwF,OAAS,MACrC9F,KAAKsF,iBAAiBhF,MAAM0F,WAAa,SAW7C,KAIKI,EAAArB,IAAA/E,KAA0B,IAAIqG,EAAuBrG,KAAM,CAClEsG,OAAQ,KACRC,SAAWC,IACT,IAAKxG,KAAKyG,SAAWpD,EAAArD,KAAI8E,EAAA,KAAgB,OAEzC,MAAM4B,EAAe1G,KAAKyG,QAAQE,UAClC,IAAIC,EAAqC,KACrCC,EAAkBC,OAAOC,kBAc7B,GAZAP,EACGpC,OAAQD,GAAMA,EAAE6C,gBAChBC,IAAK9C,GAAmBA,EAAEmC,QAC1BlD,QAASmC,IACR,MAAMM,EAAYN,EAAKM,UACjBqB,EAAW1D,KAAK2D,IAAItB,EAAYa,GAClCQ,EAAWL,IACbA,EAAkBK,EAClBN,EAAiBrB,KAInBqB,EAAgB,CAClB,MAAMrB,EAAOlC,EAAArD,YAAuBoH,MAAMC,KAAMlD,GAAMA,EAAE/D,MAAM0C,UAAY8D,GACtErB,GACFlC,EAAArD,KAAIgF,EAAA,KAAmBsC,OAAO/B,EAElC,MAKKgC,EAAAxC,IAAA/E,KAAoB,IAAIwH,EAAiBxH,KAAM,CACtDsG,OAAQ,KACRC,SAAUA,IAAOkB,EAAAzH,KAAI8E,GAAiB,EAAK,KAC3C4C,UAAU,KAIHC,EAAA5C,IAAA/E,KAAsB,IAAI4H,EAAmB5H,KAAM,CAC1DsG,OAAQ,KACRuB,OAAQ,CACNC,WAAW,EACXC,SAAS,GAEXxB,SAAUA,IAAMvG,KAAKgI,gBAO6BhI,KAAA+C,SAAW,CAoHjE,CAjHWlC,MAAAA,CAAO4F,GACd3G,MAAMe,OAAO4F,GACbpD,EAAArD,KAAI2H,EAAA,KAAqBM,QAAQxB,GACjCpD,EAAArD,KAAIuH,EAAA,KAAmBU,QAAQxB,GAC/BpD,EAAArD,KAAIkI,EAAA,IAAAC,GAAaC,KAAjBpI,KACF,CAGSqI,MAAAA,GACHrI,KAAKyG,UACPpD,EAAArD,YAAyBsI,UAAUtI,KAAKyG,SACxCpD,EAAArD,YAAuBsI,UAAUtI,KAAKyG,UAExC3G,MAAMuI,SACNhF,EAAArD,KAAIkI,EAAA,IAAAC,GAAaC,KAAjBpI,KACF,CAGmBuI,UAAAA,CAAW1I,GAC5BC,MAAMyI,WAAW1I,GAEbA,EAAkBE,IAAI,aACxBsD,EAAArD,KAAIkI,EAAA,IAAAC,GAAaC,KAAjBpI,KAEJ,CAGmBwI,OAAAA,CAAQ7H,GAGzB,GAFAb,MAAM0I,QAAQ7H,GAEVA,EAAmBZ,IAAI,QAAS,CAClC,MAAM0I,MAAEA,EAAKC,QAAEA,GAAYrF,EAAArD,KAAIgF,EAAA,KAAmB2D,SAAS,IACrD3I,KAAK4I,YAAYzF,iBAAiB,iBAAmB,KAGtDE,EAAArD,YAAuB6I,aAC1B1C,EAAenG,KAAM,eAAe,GACpCqD,EAAArD,YAAuB8I,iBAAiBL,EAAMpB,KAAMlD,IAAOA,EAAE4E,YAG/D,IAAK,MAAMxD,KAAQkD,EACblD,EAAKnF,MACPiD,EAAArD,KAAIoG,EAAA,KAAyB6B,QAAQ1C,EAAKnF,KAAK0C,SAInD,IAAK,MAAMyC,KAAQmD,EACbnD,EAAKnF,MACPiD,EAAArD,KAAIoG,EAAA,KAAyBkC,UAAU/C,EAAKnF,KAAK0C,QAGvD,CACF,CAGmBhC,MAAAA,GACjB,OAAOC,CAAI,gFAEgCsC,EAAArD,KAAIkI,EAAA,IAAAc,uEAGP3F,EAAArD,KAAIkI,EAAA,IAAAe,wDAKtCjJ,KAAK6E,KAAKoC,IAAK9C,GAAMd,EAAArD,KAAIkI,EAAA,IAAAgB,GAAYd,KAAhBpI,KAAiBmE,iEAG9C,CAyCQ6D,UAAAA,GACN3E,EAAArD,KAAIkI,EAAA,IAAAC,GAAaC,KAAjBpI,KACF,oGAxCYI,GACV,OAAOW,CAAI,0CAC4BX,cAAiBiD,EAAArD,kBAAsBI,EAAKyD,uBAC1D,GAArBzD,EAAK6C,MAAMe,OACTmF,EACApI,CAAI,OACAX,EAAK6C,MAAMgE,IAAK9C,GAAMd,EAAArD,KAAIkI,EAAA,IAAAgB,GAAYd,KAAhBpI,KAAiBmE,iBAGnD,aAG0BiF,GACxBjD,EAAenG,KAAM,iBAAkBqJ,EAAkCD,EAAE9C,QAC7E,aAGuB8C,GACrBjD,EAAenG,KAAM,cAAeqJ,EAAkCD,EAAE9C,QAC1E,aAGa8C,GACPA,EAAE9C,kBAAkBhH,IAAsB8J,EAAE9C,OAAOyC,UAAYK,EAAE9C,OAAOlG,MAAM0C,UAChF2E,EAAAzH,KAAI8E,GAAiB,EAAI,KACzBsE,EAAE9C,OAAOlG,KAAK0C,QAAQwG,eAAe,CAAE5D,MAAO,QAASC,SAAU,WACjEtC,EAAArD,YAAuB8I,iBAAiBM,EAAE9C,QAC1CjD,EAAArD,YAAuBsH,OAAO8B,EAAE9C,QAEpC,eAIEtG,KAAK6E,KAAO7E,KAAKyG,QAAU7D,EAAaC,SAAS7C,KAAKyG,QAASjD,KAAK+F,IAAI,EAAG/F,KAAKC,IAAIzD,KAAK+C,SAAU,KAAO,EAC5G,EAvRgB2B,EAAA1D,OAAyBC,CAAG,yFAKrBC,EAAYsI,UAAUC,+BACtBvI,EAAYsI,UAAUrH,mZAyBEjB,EAAYC,MAAMC,OAAOC,4EACVH,EAAYiB,MAAMuH,yBAC9DpI,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,2rBA4BeT,EAAYU,UAAUD,SAASkC,MAAM8F,MAAM5H,+DACvCb,EAAYU,UAAUD,SAASkC,MAAM8F,MAAM3H,iEAC3Cd,EAAYU,UAAUD,SAASkC,MAAM8F,MAAM1H,iEAC3Cf,EAAYU,UAAUD,SAASkC,MAAM8F,MAAMzH,mDACvDhB,EAAYiB,MAAMC,8FAGblB,EAAYU,UAAUD,SAASiI,SAASD,MAAM5H,4DAC1Cb,EAAYU,UAAUD,SAASiI,SAASD,MAAM3H,8DAC9Cd,EAAYU,UAAUD,SAASiI,SAASD,MAAM1H,8DAC9Cf,EAAYU,UAAUD,SAASiI,SAASD,MAAMzH,gDAC1DhB,EAAYiB,MAAMG,+JAYzBC,EAAA,CAAhBG,KAA0CgC,EAAAjC,UAAA,eACEF,EAAA,CAA5CC,EAAM,sBAAqEkC,EAAAjC,UAAA,2BAgFxCF,EAAA,CAAnDsH,EAAS,CAAEC,UAAW,YAAaC,KAAMjD,UAAuBpC,EAAAjC,UAAA,gBAAA,GAiHzDF,EAAA,CADPmF,EAAS,KAGThD,EAAAjC,UAAA,aAAA,MA/RUiC,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 - Emitted 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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"}

package/dist/toolbar.js

@@ -111,9 +111,10 @@ _M3eToolbarElement_directionalitySubscription = new WeakMap();
 _M3eToolbarElement_focusKeyManager = new WeakMap();
 _M3eToolbarElement_instances = new WeakSet();
 _M3eToolbarElement_handleSlotChange = function _M3eToolbarElement_handleSlotChange() {
+  const items = M3eInteractivityChecker.findInteractiveElements(this, true);
   const {
     added
-  } = __classPrivateFieldGet(this, _M3eToolbarElement_focusKeyManager, "f").setItems(M3eInteractivityChecker.findInteractiveElements(this));
+  } = __classPrivateFieldGet(this, _M3eToolbarElement_focusKeyManager, "f").setItems(items);
   if (!__classPrivateFieldGet(this, _M3eToolbarElement_focusKeyManager, "f").activeItem) {
     const active = added.find(x => !x.hasAttribute("disabled"));
     if (active) {

package/dist/toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.js","sources":["../../src/toolbar/ToolbarElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, Role, Vertical } from \"@m3e/web/core\";\r\nimport { RovingTabIndexManager, M3eInteractivityChecker } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { ToolbarVariant } from \"./ToolbarVariant\";\r\nimport { ToolbarShape } from \"./ToolbarShape\";\r\n\r\n/**\r\n * Presents frequently used actions relevant to the current page.\r\n *\r\n * @description\r\n * The `m3e-toolbar` component presents contextual actions, navigation, and controls. Designed according to\r\n * Material 3 principles, it supports vertical and horizontal orientation, shape and variant customization,\r\n * and adaptive layout via CSS custom properties.\r\n *\r\n * @example\r\n * The following example illustrates a `vibrant`, `rounded` toolbar containing icon buttons.\r\n *\r\n * ```html\r\n * <m3e-toolbar variant=\"vibrant\" shape=\"rounded\">\r\n *  <m3e-icon-button>\r\n *    <m3e-icon name=\"arrow_back\"></m3e-icon>\r\n *  </m3e-icon-button>\r\n *  <m3e-icon-button>\r\n *    <m3e-icon name=\"arrow_forward\"></m3e-icon>\r\n *  </m3e-icon-button>\r\n *  <m3e-icon-button width=\"wide\" variant=\"filled\">\r\n *    <m3e-icon name=\"add\"></m3e-icon>\r\n *  </m3e-icon-button>\r\n *  <m3e-icon-button>\r\n *    <m3e-icon name=\"picture_in_picture\"></m3e-icon>\r\n *  </m3e-icon-button>\r\n *  <m3e-icon-button>\r\n *    <m3e-icon name=\"more_vert\"></m3e-icon>\r\n *  </m3e-icon-button>\r\n * </m3e-toolbar>\r\n * ```\r\n *\r\n * @tag m3e-toolbar\r\n *\r\n * @slot - Renders the content of the toolbar.\r\n *\r\n * @attr elevated - Whether the toolbar is elevated.\r\n * @attr shape - The shape of the toolbar.\r\n * @attr variant - The appearance variant of the toolbar.\r\n * @attr vertical - Whether the element is oriented vertically.\r\n *\r\n * @cssprop --m3e-toolbar-size - The size (height or width) of the toolbar.\r\n * @cssprop --m3e-toolbar-spacing - The gap between toolbar items.\r\n * @cssprop --m3e-toolbar-rounded-shape - Border radius for rounded shape.\r\n * @cssprop --m3e-toolbar-rounded-padding - Padding for rounded shape.\r\n * @cssprop --m3e-toolbar-square-padding - Padding for square shape.\r\n * @cssprop --m3e-toolbar-standard-container-color - Container color for the standard variant.\r\n * @cssprop --m3e-toolbar-standard-color - Foreground color for the standard variant.\r\n * @cssprop --m3e-toolbar-vibrant-container-color - Container color for the vibrant variant.\r\n * @cssprop --m3e-toolbar-vibrant-color - Foreground color for the vibrant variant.\r\n */\r\n@customElement(\"m3e-toolbar\")\r\nexport class M3eToolbarElement extends Vertical(Role(LitElement, \"toolbar\")) {\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    }\r\n    .base {\r\n      display: flex;\r\n      align-items: center;\r\n      box-sizing: border-box;\r\n      border-radius: inherit;\r\n    }\r\n    :host(:not([vertical])) {\r\n      height: fit-content;\r\n    }\r\n    :host(:not([vertical])) .base {\r\n      height: calc(var(--m3e-toolbar-size, 4rem) + ${DesignToken.density.calc(-3)});\r\n      column-gap: var(--m3e-toolbar-spacing, 0.25rem);\r\n    }\r\n    :host([vertical]) {\r\n      width: fit-content;\r\n    }\r\n    :host([vertical]) .base {\r\n      width: calc(var(--m3e-toolbar-size, 4rem) + ${DesignToken.density.calc(-3)});\r\n    }\r\n    :host([vertical]) .base {\r\n      flex-direction: column;\r\n      justify-content: center;\r\n      row-gap: var(--m3e-toolbar-spacing, 0.25rem);\r\n    }\r\n    :host([shape=\"rounded\"]) {\r\n      border-radius: var(--m3e-toolbar-rounded-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    :host([shape=\"rounded\"]) .base {\r\n      padding: var(--m3e-toolbar-rounded-padding, 0.5rem);\r\n    }\r\n    :host(:not([vertical])[shape=\"square\"]) .base {\r\n      padding-inline: var(--m3e-toolbar-square-padding, 1rem);\r\n    }\r\n    :host([vertical][shape=\"square\"]) .base {\r\n      padding-block: var(--m3e-toolbar-square-padding, 1rem);\r\n    }\r\n    :host([variant=\"standard\"]) .state-layer {\r\n      background-color: var(--m3e-toolbar-standard-container-color, ${DesignToken.color.surfaceContainer});\r\n    }\r\n    :host([variant=\"standard\"]) .base {\r\n      color: var(--m3e-toolbar-standard-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host([variant=\"vibrant\"]) .state-layer {\r\n      background-color: var(--m3e-toolbar-vibrant-container-color, ${DesignToken.color.primaryContainer});\r\n    }\r\n    :host([variant=\"vibrant\"]) .base {\r\n      color: var(--m3e-toolbar-vibrant-color, ${DesignToken.color.onPrimaryContainer});\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host([variant]) .state-layer {\r\n        background-color: Canvas;\r\n      }\r\n      :host([variant]) .base {\r\n        color: CanvasText;\r\n        outline: 1px solid CanvasText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n  /** @private */ #focusKeyManager = new RovingTabIndexManager()\r\n    .withHomeAndEnd()\r\n    .withDirectionality(M3eDirectionality.current);\r\n\r\n  /**\r\n   * The appearance variant of the toolbar.\r\n   * @default \"standard\"\r\n   */\r\n  @property({ reflect: true }) variant: ToolbarVariant = \"standard\";\r\n\r\n  /**\r\n   * The shape of the toolbar.\r\n   * @default \"square\"\r\n   */\r\n  @property({ reflect: true }) shape: ToolbarShape = \"square\";\r\n\r\n  /**\r\n   * Whether the toolbar is elevated.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) elevated = false;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.#directionalitySubscription = M3eDirectionality.observe(\r\n      () => (this.#focusKeyManager.directionality = M3eDirectionality.current),\r\n    );\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"vertical\")) {\r\n      this.#focusKeyManager.vertical = this.vertical;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-state-layer class=\"state-layer\"></m3e-state-layer>\r\n      <m3e-elevation class=\"elevation\" level=\"${this.elevated ? 3 : 0}\"></m3e-elevation>\r\n      <div class=\"base\">\r\n        <slot\r\n          @click=\"${this.#handleClick}\"\r\n          @keydown=\"${this.#handleKeyDown}\"\r\n          @slotchange=\"${this.#handleSlotChange}\"\r\n        ></slot>\r\n      </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    const { added } = this.#focusKeyManager.setItems(M3eInteractivityChecker.findInteractiveElements(this));\r\n    if (!this.#focusKeyManager.activeItem) {\r\n      const active = added.find((x) => !x.hasAttribute(\"disabled\"));\r\n      if (active) {\r\n        this.#focusKeyManager.updateActiveItem(active);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this.#focusKeyManager.onKeyDown(e);\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    const item = e.composedPath().find((x) => x instanceof HTMLElement && this.#focusKeyManager.items.includes(x));\r\n    if (item) {\r\n      this.#focusKeyManager.updateActiveItem(<HTMLElement>item);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-toolbar\": M3eToolbarElement;\r\n  }\r\n}\r\n"],"names":["M3eToolbarElement","Vertical","Role","LitElement","constructor","_M3eToolbarElement_directionalitySubscription","set","_M3eToolbarElement_focusKeyManager","RovingTabIndexManager","withHomeAndEnd","withDirectionality","M3eDirectionality","current","variant","shape","elevated","connectedCallback","__classPrivateFieldSet","observe","__classPrivateFieldGet","directionality","disconnectedCallback","call","update","changedProperties","has","vertical","render","html","_M3eToolbarElement_instances","_M3eToolbarElement_handleClick","_M3eToolbarElement_handleKeyDown","_M3eToolbarElement_handleSlotChange","added","setItems","M3eInteractivityChecker","findInteractiveElements","activeItem","active","find","x","hasAttribute","updateActiveItem","e","onKeyDown","item","composedPath","HTMLElement","items","includes","styles","css","DesignToken","density","calc","corner","full","color","surfaceContainer","onSurface","primaryContainer","onPrimaryContainer","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"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"}
+{"version":3,"file":"toolbar.js","sources":["../../src/toolbar/ToolbarElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, Role, Vertical } from \"@m3e/web/core\";\r\nimport { RovingTabIndexManager, M3eInteractivityChecker } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { ToolbarVariant } from \"./ToolbarVariant\";\r\nimport { ToolbarShape } from \"./ToolbarShape\";\r\n\r\n/**\r\n * Presents frequently used actions relevant to the current page.\r\n *\r\n * @description\r\n * The `m3e-toolbar` component presents contextual actions, navigation, and controls. Designed according to\r\n * Material 3 principles, it supports vertical and horizontal orientation, shape and variant customization,\r\n * and adaptive layout via CSS custom properties.\r\n *\r\n * @example\r\n * The following example illustrates a `vibrant`, `rounded` toolbar containing icon buttons.\r\n *\r\n * ```html\r\n * <m3e-toolbar variant=\"vibrant\" shape=\"rounded\">\r\n *  <m3e-icon-button>\r\n *    <m3e-icon name=\"arrow_back\"></m3e-icon>\r\n *  </m3e-icon-button>\r\n *  <m3e-icon-button>\r\n *    <m3e-icon name=\"arrow_forward\"></m3e-icon>\r\n *  </m3e-icon-button>\r\n *  <m3e-icon-button width=\"wide\" variant=\"filled\">\r\n *    <m3e-icon name=\"add\"></m3e-icon>\r\n *  </m3e-icon-button>\r\n *  <m3e-icon-button>\r\n *    <m3e-icon name=\"picture_in_picture\"></m3e-icon>\r\n *  </m3e-icon-button>\r\n *  <m3e-icon-button>\r\n *    <m3e-icon name=\"more_vert\"></m3e-icon>\r\n *  </m3e-icon-button>\r\n * </m3e-toolbar>\r\n * ```\r\n *\r\n * @tag m3e-toolbar\r\n *\r\n * @slot - Renders the content of the toolbar.\r\n *\r\n * @attr elevated - Whether the toolbar is elevated.\r\n * @attr shape - The shape of the toolbar.\r\n * @attr variant - The appearance variant of the toolbar.\r\n * @attr vertical - Whether the element is oriented vertically.\r\n *\r\n * @cssprop --m3e-toolbar-size - The size (height or width) of the toolbar.\r\n * @cssprop --m3e-toolbar-spacing - The gap between toolbar items.\r\n * @cssprop --m3e-toolbar-rounded-shape - Border radius for rounded shape.\r\n * @cssprop --m3e-toolbar-rounded-padding - Padding for rounded shape.\r\n * @cssprop --m3e-toolbar-square-padding - Padding for square shape.\r\n * @cssprop --m3e-toolbar-standard-container-color - Container color for the standard variant.\r\n * @cssprop --m3e-toolbar-standard-color - Foreground color for the standard variant.\r\n * @cssprop --m3e-toolbar-vibrant-container-color - Container color for the vibrant variant.\r\n * @cssprop --m3e-toolbar-vibrant-color - Foreground color for the vibrant variant.\r\n */\r\n@customElement(\"m3e-toolbar\")\r\nexport class M3eToolbarElement extends Vertical(Role(LitElement, \"toolbar\")) {\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    }\r\n    .base {\r\n      display: flex;\r\n      align-items: center;\r\n      box-sizing: border-box;\r\n      border-radius: inherit;\r\n    }\r\n    :host(:not([vertical])) {\r\n      height: fit-content;\r\n    }\r\n    :host(:not([vertical])) .base {\r\n      height: calc(var(--m3e-toolbar-size, 4rem) + ${DesignToken.density.calc(-3)});\r\n      column-gap: var(--m3e-toolbar-spacing, 0.25rem);\r\n    }\r\n    :host([vertical]) {\r\n      width: fit-content;\r\n    }\r\n    :host([vertical]) .base {\r\n      width: calc(var(--m3e-toolbar-size, 4rem) + ${DesignToken.density.calc(-3)});\r\n    }\r\n    :host([vertical]) .base {\r\n      flex-direction: column;\r\n      justify-content: center;\r\n      row-gap: var(--m3e-toolbar-spacing, 0.25rem);\r\n    }\r\n    :host([shape=\"rounded\"]) {\r\n      border-radius: var(--m3e-toolbar-rounded-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    :host([shape=\"rounded\"]) .base {\r\n      padding: var(--m3e-toolbar-rounded-padding, 0.5rem);\r\n    }\r\n    :host(:not([vertical])[shape=\"square\"]) .base {\r\n      padding-inline: var(--m3e-toolbar-square-padding, 1rem);\r\n    }\r\n    :host([vertical][shape=\"square\"]) .base {\r\n      padding-block: var(--m3e-toolbar-square-padding, 1rem);\r\n    }\r\n    :host([variant=\"standard\"]) .state-layer {\r\n      background-color: var(--m3e-toolbar-standard-container-color, ${DesignToken.color.surfaceContainer});\r\n    }\r\n    :host([variant=\"standard\"]) .base {\r\n      color: var(--m3e-toolbar-standard-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host([variant=\"vibrant\"]) .state-layer {\r\n      background-color: var(--m3e-toolbar-vibrant-container-color, ${DesignToken.color.primaryContainer});\r\n    }\r\n    :host([variant=\"vibrant\"]) .base {\r\n      color: var(--m3e-toolbar-vibrant-color, ${DesignToken.color.onPrimaryContainer});\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host([variant]) .state-layer {\r\n        background-color: Canvas;\r\n      }\r\n      :host([variant]) .base {\r\n        color: CanvasText;\r\n        outline: 1px solid CanvasText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n  /** @private */ #focusKeyManager = new RovingTabIndexManager()\r\n    .withHomeAndEnd()\r\n    .withDirectionality(M3eDirectionality.current);\r\n\r\n  /**\r\n   * The appearance variant of the toolbar.\r\n   * @default \"standard\"\r\n   */\r\n  @property({ reflect: true }) variant: ToolbarVariant = \"standard\";\r\n\r\n  /**\r\n   * The shape of the toolbar.\r\n   * @default \"square\"\r\n   */\r\n  @property({ reflect: true }) shape: ToolbarShape = \"square\";\r\n\r\n  /**\r\n   * Whether the toolbar is elevated.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) elevated = false;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.#directionalitySubscription = M3eDirectionality.observe(\r\n      () => (this.#focusKeyManager.directionality = M3eDirectionality.current),\r\n    );\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"vertical\")) {\r\n      this.#focusKeyManager.vertical = this.vertical;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-state-layer class=\"state-layer\"></m3e-state-layer>\r\n      <m3e-elevation class=\"elevation\" level=\"${this.elevated ? 3 : 0}\"></m3e-elevation>\r\n      <div class=\"base\">\r\n        <slot\r\n          @click=\"${this.#handleClick}\"\r\n          @keydown=\"${this.#handleKeyDown}\"\r\n          @slotchange=\"${this.#handleSlotChange}\"\r\n        ></slot>\r\n      </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    const items = M3eInteractivityChecker.findInteractiveElements(this, true);\r\n    const { added } = this.#focusKeyManager.setItems(items);\r\n    if (!this.#focusKeyManager.activeItem) {\r\n      const active = added.find((x) => !x.hasAttribute(\"disabled\"));\r\n      if (active) {\r\n        this.#focusKeyManager.updateActiveItem(active);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this.#focusKeyManager.onKeyDown(e);\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    const item = e.composedPath().find((x) => x instanceof HTMLElement && this.#focusKeyManager.items.includes(x));\r\n    if (item) {\r\n      this.#focusKeyManager.updateActiveItem(<HTMLElement>item);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-toolbar\": M3eToolbarElement;\r\n  }\r\n}\r\n"],"names":["M3eToolbarElement","Vertical","Role","LitElement","constructor","_M3eToolbarElement_directionalitySubscription","set","_M3eToolbarElement_focusKeyManager","RovingTabIndexManager","withHomeAndEnd","withDirectionality","M3eDirectionality","current","variant","shape","elevated","connectedCallback","__classPrivateFieldSet","observe","__classPrivateFieldGet","directionality","disconnectedCallback","call","update","changedProperties","has","vertical","render","html","_M3eToolbarElement_instances","_M3eToolbarElement_handleClick","_M3eToolbarElement_handleKeyDown","_M3eToolbarElement_handleSlotChange","items","M3eInteractivityChecker","findInteractiveElements","added","setItems","activeItem","active","find","x","hasAttribute","updateActiveItem","e","onKeyDown","item","composedPath","HTMLElement","includes","styles","css","DesignToken","density","calc","corner","full","color","surfaceContainer","onSurface","primaryContainer","onPrimaryContainer","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"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"}

package/dist/toolbar.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldSet as e,__classPrivateFieldGet as t,__decorate as a}from"tslib";import{LitElement as o,html as r,css as i}from"lit";import{property as s}from"lit/decorators.js";import{Vertical as n,Role as l,DesignToken as c,customElement as d}from"@m3e/web/core";import{RovingTabIndexManager as h,M3eInteractivityChecker as v}from"@m3e/web/core/a11y";import{M3eDirectionality as m}from"@m3e/web/core/bidi";var b,p,u,f,y,g;let k=class extends(n(l(o,"toolbar"))){constructor(){super(...arguments),b.add(this),p.set(this,void 0),u.set(this,(new h).withHomeAndEnd().withDirectionality(m.current)),this.variant="standard",this.shape="square",this.elevated=!1}connectedCallback(){super.connectedCallback(),e(this,p,m.observe(()=>t(this,u,"f").directionality=m.current),"f")}disconnectedCallback(){super.disconnectedCallback(),t(this,p,"f")?.call(this)}update(e){super.update(e),e.has("vertical")&&(t(this,u,"f").vertical=this.vertical)}render(){return r`<m3e-state-layer class="state-layer"></m3e-state-layer><m3e-elevation class="elevation" level="${this.elevated?3:0}"></m3e-elevation><div class="base"><slot @click="${t(this,b,"m",g)}" @keydown="${t(this,b,"m",y)}" @slotchange="${t(this,b,"m",f)}"></slot></div>`}};p=new WeakMap,u=new WeakMap,b=new WeakSet,f=function(){const{added:e}=t(this,u,"f").setItems(v.findInteractiveElements(this));if(!t(this,u,"f").activeItem){const a=e.find(e=>!e.hasAttribute("disabled"));a&&t(this,u,"f").updateActiveItem(a)}},y=function(e){t(this,u,"f").onKeyDown(e)},g=function(e){const a=e.composedPath().find(e=>e instanceof HTMLElement&&t(this,u,"f").items.includes(e));a&&t(this,u,"f").updateActiveItem(a)},k.styles=i`:host { display: inline-block; position: relative; } .base { display: flex; align-items: center; box-sizing: border-box; border-radius: inherit; } :host(:not([vertical])) { height: fit-content; } :host(:not([vertical])) .base { height: calc(var(--m3e-toolbar-size, 4rem) + ${c.density.calc(-3)}); column-gap: var(--m3e-toolbar-spacing, 0.25rem); } :host([vertical]) { width: fit-content; } :host([vertical]) .base { width: calc(var(--m3e-toolbar-size, 4rem) + ${c.density.calc(-3)}); } :host([vertical]) .base { flex-direction: column; justify-content: center; row-gap: var(--m3e-toolbar-spacing, 0.25rem); } :host([shape="rounded"]) { border-radius: var(--m3e-toolbar-rounded-shape, ${c.shape.corner.full}); } :host([shape="rounded"]) .base { padding: var(--m3e-toolbar-rounded-padding, 0.5rem); } :host(:not([vertical])[shape="square"]) .base { padding-inline: var(--m3e-toolbar-square-padding, 1rem); } :host([vertical][shape="square"]) .base { padding-block: var(--m3e-toolbar-square-padding, 1rem); } :host([variant="standard"]) .state-layer { background-color: var(--m3e-toolbar-standard-container-color, ${c.color.surfaceContainer}); } :host([variant="standard"]) .base { color: var(--m3e-toolbar-standard-color, ${c.color.onSurface}); } :host([variant="vibrant"]) .state-layer { background-color: var(--m3e-toolbar-vibrant-container-color, ${c.color.primaryContainer}); } :host([variant="vibrant"]) .base { color: var(--m3e-toolbar-vibrant-color, ${c.color.onPrimaryContainer}); } @media (forced-colors: active) { :host([variant]) .state-layer { background-color: Canvas; } :host([variant]) .base { color: CanvasText; outline: 1px solid CanvasText; } }`,a([s({reflect:!0})],k.prototype,"variant",void 0),a([s({reflect:!0})],k.prototype,"shape",void 0),a([s({type:Boolean,reflect:!0})],k.prototype,"elevated",void 0),k=a([d("m3e-toolbar")],k);export{k as M3eToolbarElement};
+import{__classPrivateFieldSet as e,__classPrivateFieldGet as t,__decorate as a}from"tslib";import{LitElement as o,html as r,css as i}from"lit";import{property as s}from"lit/decorators.js";import{Vertical as n,Role as l,DesignToken as c,customElement as d}from"@m3e/web/core";import{RovingTabIndexManager as h,M3eInteractivityChecker as v}from"@m3e/web/core/a11y";import{M3eDirectionality as m}from"@m3e/web/core/bidi";var b,p,u,f,y,g;let k=class extends(n(l(o,"toolbar"))){constructor(){super(...arguments),b.add(this),p.set(this,void 0),u.set(this,(new h).withHomeAndEnd().withDirectionality(m.current)),this.variant="standard",this.shape="square",this.elevated=!1}connectedCallback(){super.connectedCallback(),e(this,p,m.observe(()=>t(this,u,"f").directionality=m.current),"f")}disconnectedCallback(){super.disconnectedCallback(),t(this,p,"f")?.call(this)}update(e){super.update(e),e.has("vertical")&&(t(this,u,"f").vertical=this.vertical)}render(){return r`<m3e-state-layer class="state-layer"></m3e-state-layer><m3e-elevation class="elevation" level="${this.elevated?3:0}"></m3e-elevation><div class="base"><slot @click="${t(this,b,"m",g)}" @keydown="${t(this,b,"m",y)}" @slotchange="${t(this,b,"m",f)}"></slot></div>`}};p=new WeakMap,u=new WeakMap,b=new WeakSet,f=function(){const e=v.findInteractiveElements(this,!0),{added:a}=t(this,u,"f").setItems(e);if(!t(this,u,"f").activeItem){const e=a.find(e=>!e.hasAttribute("disabled"));e&&t(this,u,"f").updateActiveItem(e)}},y=function(e){t(this,u,"f").onKeyDown(e)},g=function(e){const a=e.composedPath().find(e=>e instanceof HTMLElement&&t(this,u,"f").items.includes(e));a&&t(this,u,"f").updateActiveItem(a)},k.styles=i`:host { display: inline-block; position: relative; } .base { display: flex; align-items: center; box-sizing: border-box; border-radius: inherit; } :host(:not([vertical])) { height: fit-content; } :host(:not([vertical])) .base { height: calc(var(--m3e-toolbar-size, 4rem) + ${c.density.calc(-3)}); column-gap: var(--m3e-toolbar-spacing, 0.25rem); } :host([vertical]) { width: fit-content; } :host([vertical]) .base { width: calc(var(--m3e-toolbar-size, 4rem) + ${c.density.calc(-3)}); } :host([vertical]) .base { flex-direction: column; justify-content: center; row-gap: var(--m3e-toolbar-spacing, 0.25rem); } :host([shape="rounded"]) { border-radius: var(--m3e-toolbar-rounded-shape, ${c.shape.corner.full}); } :host([shape="rounded"]) .base { padding: var(--m3e-toolbar-rounded-padding, 0.5rem); } :host(:not([vertical])[shape="square"]) .base { padding-inline: var(--m3e-toolbar-square-padding, 1rem); } :host([vertical][shape="square"]) .base { padding-block: var(--m3e-toolbar-square-padding, 1rem); } :host([variant="standard"]) .state-layer { background-color: var(--m3e-toolbar-standard-container-color, ${c.color.surfaceContainer}); } :host([variant="standard"]) .base { color: var(--m3e-toolbar-standard-color, ${c.color.onSurface}); } :host([variant="vibrant"]) .state-layer { background-color: var(--m3e-toolbar-vibrant-container-color, ${c.color.primaryContainer}); } :host([variant="vibrant"]) .base { color: var(--m3e-toolbar-vibrant-color, ${c.color.onPrimaryContainer}); } @media (forced-colors: active) { :host([variant]) .state-layer { background-color: Canvas; } :host([variant]) .base { color: CanvasText; outline: 1px solid CanvasText; } }`,a([s({reflect:!0})],k.prototype,"variant",void 0),a([s({reflect:!0})],k.prototype,"shape",void 0),a([s({type:Boolean,reflect:!0})],k.prototype,"elevated",void 0),k=a([d("m3e-toolbar")],k);export{k as M3eToolbarElement};
 //# sourceMappingURL=toolbar.min.js.map

package/dist/toolbar.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.min.js","sources":["../../src/toolbar/ToolbarElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, Role, Vertical } from \"@m3e/web/core\";\r\nimport { RovingTabIndexManager, M3eInteractivityChecker } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { ToolbarVariant } from \"./ToolbarVariant\";\r\nimport { ToolbarShape } from \"./ToolbarShape\";\r\n\r\n/**\r\n * Presents frequently used actions relevant to the current page.\r\n *\r\n * @description\r\n * The `m3e-toolbar` component presents contextual actions, navigation, and controls. Designed according to\r\n * Material 3 principles, it supports vertical and horizontal orientation, shape and variant customization,\r\n * and adaptive layout via CSS custom properties.\r\n *\r\n * @example\r\n * The following example illustrates a `vibrant`, `rounded` toolbar containing icon buttons.\r\n *\r\n * ```html\r\n * <m3e-toolbar variant=\"vibrant\" shape=\"rounded\">\r\n *  <m3e-icon-button>\r\n *    <m3e-icon name=\"arrow_back\"></m3e-icon>\r\n *  </m3e-icon-button>\r\n *  <m3e-icon-button>\r\n *    <m3e-icon name=\"arrow_forward\"></m3e-icon>\r\n *  </m3e-icon-button>\r\n *  <m3e-icon-button width=\"wide\" variant=\"filled\">\r\n *    <m3e-icon name=\"add\"></m3e-icon>\r\n *  </m3e-icon-button>\r\n *  <m3e-icon-button>\r\n *    <m3e-icon name=\"picture_in_picture\"></m3e-icon>\r\n *  </m3e-icon-button>\r\n *  <m3e-icon-button>\r\n *    <m3e-icon name=\"more_vert\"></m3e-icon>\r\n *  </m3e-icon-button>\r\n * </m3e-toolbar>\r\n * ```\r\n *\r\n * @tag m3e-toolbar\r\n *\r\n * @slot - Renders the content of the toolbar.\r\n *\r\n * @attr elevated - Whether the toolbar is elevated.\r\n * @attr shape - The shape of the toolbar.\r\n * @attr variant - The appearance variant of the toolbar.\r\n * @attr vertical - Whether the element is oriented vertically.\r\n *\r\n * @cssprop --m3e-toolbar-size - The size (height or width) of the toolbar.\r\n * @cssprop --m3e-toolbar-spacing - The gap between toolbar items.\r\n * @cssprop --m3e-toolbar-rounded-shape - Border radius for rounded shape.\r\n * @cssprop --m3e-toolbar-rounded-padding - Padding for rounded shape.\r\n * @cssprop --m3e-toolbar-square-padding - Padding for square shape.\r\n * @cssprop --m3e-toolbar-standard-container-color - Container color for the standard variant.\r\n * @cssprop --m3e-toolbar-standard-color - Foreground color for the standard variant.\r\n * @cssprop --m3e-toolbar-vibrant-container-color - Container color for the vibrant variant.\r\n * @cssprop --m3e-toolbar-vibrant-color - Foreground color for the vibrant variant.\r\n */\r\n@customElement(\"m3e-toolbar\")\r\nexport class M3eToolbarElement extends Vertical(Role(LitElement, \"toolbar\")) {\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    }\r\n    .base {\r\n      display: flex;\r\n      align-items: center;\r\n      box-sizing: border-box;\r\n      border-radius: inherit;\r\n    }\r\n    :host(:not([vertical])) {\r\n      height: fit-content;\r\n    }\r\n    :host(:not([vertical])) .base {\r\n      height: calc(var(--m3e-toolbar-size, 4rem) + ${DesignToken.density.calc(-3)});\r\n      column-gap: var(--m3e-toolbar-spacing, 0.25rem);\r\n    }\r\n    :host([vertical]) {\r\n      width: fit-content;\r\n    }\r\n    :host([vertical]) .base {\r\n      width: calc(var(--m3e-toolbar-size, 4rem) + ${DesignToken.density.calc(-3)});\r\n    }\r\n    :host([vertical]) .base {\r\n      flex-direction: column;\r\n      justify-content: center;\r\n      row-gap: var(--m3e-toolbar-spacing, 0.25rem);\r\n    }\r\n    :host([shape=\"rounded\"]) {\r\n      border-radius: var(--m3e-toolbar-rounded-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    :host([shape=\"rounded\"]) .base {\r\n      padding: var(--m3e-toolbar-rounded-padding, 0.5rem);\r\n    }\r\n    :host(:not([vertical])[shape=\"square\"]) .base {\r\n      padding-inline: var(--m3e-toolbar-square-padding, 1rem);\r\n    }\r\n    :host([vertical][shape=\"square\"]) .base {\r\n      padding-block: var(--m3e-toolbar-square-padding, 1rem);\r\n    }\r\n    :host([variant=\"standard\"]) .state-layer {\r\n      background-color: var(--m3e-toolbar-standard-container-color, ${DesignToken.color.surfaceContainer});\r\n    }\r\n    :host([variant=\"standard\"]) .base {\r\n      color: var(--m3e-toolbar-standard-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host([variant=\"vibrant\"]) .state-layer {\r\n      background-color: var(--m3e-toolbar-vibrant-container-color, ${DesignToken.color.primaryContainer});\r\n    }\r\n    :host([variant=\"vibrant\"]) .base {\r\n      color: var(--m3e-toolbar-vibrant-color, ${DesignToken.color.onPrimaryContainer});\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host([variant]) .state-layer {\r\n        background-color: Canvas;\r\n      }\r\n      :host([variant]) .base {\r\n        color: CanvasText;\r\n        outline: 1px solid CanvasText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n  /** @private */ #focusKeyManager = new RovingTabIndexManager()\r\n    .withHomeAndEnd()\r\n    .withDirectionality(M3eDirectionality.current);\r\n\r\n  /**\r\n   * The appearance variant of the toolbar.\r\n   * @default \"standard\"\r\n   */\r\n  @property({ reflect: true }) variant: ToolbarVariant = \"standard\";\r\n\r\n  /**\r\n   * The shape of the toolbar.\r\n   * @default \"square\"\r\n   */\r\n  @property({ reflect: true }) shape: ToolbarShape = \"square\";\r\n\r\n  /**\r\n   * Whether the toolbar is elevated.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) elevated = false;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.#directionalitySubscription = M3eDirectionality.observe(\r\n      () => (this.#focusKeyManager.directionality = M3eDirectionality.current),\r\n    );\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"vertical\")) {\r\n      this.#focusKeyManager.vertical = this.vertical;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-state-layer class=\"state-layer\"></m3e-state-layer>\r\n      <m3e-elevation class=\"elevation\" level=\"${this.elevated ? 3 : 0}\"></m3e-elevation>\r\n      <div class=\"base\">\r\n        <slot\r\n          @click=\"${this.#handleClick}\"\r\n          @keydown=\"${this.#handleKeyDown}\"\r\n          @slotchange=\"${this.#handleSlotChange}\"\r\n        ></slot>\r\n      </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    const { added } = this.#focusKeyManager.setItems(M3eInteractivityChecker.findInteractiveElements(this));\r\n    if (!this.#focusKeyManager.activeItem) {\r\n      const active = added.find((x) => !x.hasAttribute(\"disabled\"));\r\n      if (active) {\r\n        this.#focusKeyManager.updateActiveItem(active);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this.#focusKeyManager.onKeyDown(e);\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    const item = e.composedPath().find((x) => x instanceof HTMLElement && this.#focusKeyManager.items.includes(x));\r\n    if (item) {\r\n      this.#focusKeyManager.updateActiveItem(<HTMLElement>item);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-toolbar\": M3eToolbarElement;\r\n  }\r\n}\r\n"],"names":["M3eToolbarElement","Vertical","Role","LitElement","constructor","_M3eToolbarElement_directionalitySubscription","set","this","_M3eToolbarElement_focusKeyManager","RovingTabIndexManager","withHomeAndEnd","withDirectionality","M3eDirectionality","current","variant","shape","elevated","connectedCallback","super","__classPrivateFieldSet","observe","__classPrivateFieldGet","directionality","disconnectedCallback","call","update","changedProperties","has","vertical","render","html","_M3eToolbarElement_instances","_M3eToolbarElement_handleClick","_M3eToolbarElement_handleKeyDown","_M3eToolbarElement_handleSlotChange","added","setItems","M3eInteractivityChecker","findInteractiveElements","activeItem","active","find","x","hasAttribute","updateActiveItem","e","onKeyDown","item","composedPath","HTMLElement","items","includes","styles","css","DesignToken","density","calc","corner","full","color","surfaceContainer","onSurface","primaryContainer","onPrimaryContainer","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":";;;;;kbA6DO,IAAMA,EAAN,cAAgCC,EAASC,EAAKC,EAAY,aAA1DC,WAAAA,mCAkEWC,EAAAC,IAAAC,aACAC,EAAAF,IAAAC,MAAmB,IAAIE,GACpCC,iBACAC,mBAAmBC,EAAkBC,UAMXN,KAAAO,QAA0B,WAM1BP,KAAAQ,MAAsB,SAMPR,KAAAS,UAAW,CA8DzD,CA3DWC,iBAAAA,GACPC,MAAMD,oBAENE,EAAAZ,OAAmCK,EAAkBQ,QACnD,IAAOC,EAAAd,KAAIC,EAAA,KAAkBc,eAAiBV,EAAkBC,SACjE,IACH,CAGSU,oBAAAA,GACPL,MAAMK,uBACNF,EAAAd,KAAIF,EAAA,MAA8BmB,KAAlCjB,KACF,CAGmBkB,MAAAA,CAAOC,GACxBR,MAAMO,OAAOC,GAETA,EAAkBC,IAAI,cACxBN,EAAAd,YAAsBqB,SAAWrB,KAAKqB,SAE1C,CAGmBC,MAAAA,GACjB,OAAOC,CAAI,kGACiCvB,KAAKS,SAAW,EAAI,sDAGhDK,EAAAd,KAAIwB,EAAA,IAAAC,iBACFX,EAAAd,KAAIwB,EAAA,IAAAE,oBACDZ,EAAAd,KAAIwB,EAAA,IAAAG,mBAG3B,0DAIE,MAAMC,MAAEA,GAAUd,EAAAd,KAAIC,EAAA,KAAkB4B,SAASC,EAAwBC,wBAAwB/B,OACjG,IAAKc,EAAAd,YAAsBgC,WAAY,CACrC,MAAMC,EAASL,EAAMM,KAAMC,IAAOA,EAAEC,aAAa,aAC7CH,GACFnB,EAAAd,KAAIC,EAAA,KAAkBoC,iBAAiBJ,EAE3C,CACF,aAGeK,GACbxB,EAAAd,KAAIC,EAAA,KAAkBsC,UAAUD,EAClC,aAGaA,GACX,MAAME,EAAOF,EAAEG,eAAeP,KAAMC,GAAMA,aAAaO,aAAe5B,EAAAd,KAAIC,EAAA,KAAkB0C,MAAMC,SAAST,IACvGK,GACF1B,EAAAd,KAAIC,EAAA,KAAkBoC,iBAA8BG,EAExD,EAlJgB/C,EAAAoD,OAAyBC,CAAG,oRAeOC,EAAYC,QAAQC,iLAOrBF,EAAYC,QAAQC,MAAK,gNAQrBF,EAAYvC,MAAM0C,OAAOC,4ZAYXJ,EAAYK,MAAMC,qGAGvCN,EAAYK,MAAME,wHAGEP,EAAYK,MAAMG,mGAGvCR,EAAYK,MAAMI,qMAsBnCC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6ClE,EAAAmE,UAAA,eAAA,GAMrCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAuClE,EAAAmE,UAAA,aAAA,GAMhBH,EAAA,CAA3CC,EAAS,CAAEG,KAAMC,QAASH,SAAS,KAAyBlE,EAAAmE,UAAA,gBAAA,GAvFlDnE,EAAiBgE,EAAA,CAD7BM,EAAc,gBACFtE"}
+{"version":3,"file":"toolbar.min.js","sources":["../../src/toolbar/ToolbarElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, Role, Vertical } from \"@m3e/web/core\";\r\nimport { RovingTabIndexManager, M3eInteractivityChecker } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { ToolbarVariant } from \"./ToolbarVariant\";\r\nimport { ToolbarShape } from \"./ToolbarShape\";\r\n\r\n/**\r\n * Presents frequently used actions relevant to the current page.\r\n *\r\n * @description\r\n * The `m3e-toolbar` component presents contextual actions, navigation, and controls. Designed according to\r\n * Material 3 principles, it supports vertical and horizontal orientation, shape and variant customization,\r\n * and adaptive layout via CSS custom properties.\r\n *\r\n * @example\r\n * The following example illustrates a `vibrant`, `rounded` toolbar containing icon buttons.\r\n *\r\n * ```html\r\n * <m3e-toolbar variant=\"vibrant\" shape=\"rounded\">\r\n *  <m3e-icon-button>\r\n *    <m3e-icon name=\"arrow_back\"></m3e-icon>\r\n *  </m3e-icon-button>\r\n *  <m3e-icon-button>\r\n *    <m3e-icon name=\"arrow_forward\"></m3e-icon>\r\n *  </m3e-icon-button>\r\n *  <m3e-icon-button width=\"wide\" variant=\"filled\">\r\n *    <m3e-icon name=\"add\"></m3e-icon>\r\n *  </m3e-icon-button>\r\n *  <m3e-icon-button>\r\n *    <m3e-icon name=\"picture_in_picture\"></m3e-icon>\r\n *  </m3e-icon-button>\r\n *  <m3e-icon-button>\r\n *    <m3e-icon name=\"more_vert\"></m3e-icon>\r\n *  </m3e-icon-button>\r\n * </m3e-toolbar>\r\n * ```\r\n *\r\n * @tag m3e-toolbar\r\n *\r\n * @slot - Renders the content of the toolbar.\r\n *\r\n * @attr elevated - Whether the toolbar is elevated.\r\n * @attr shape - The shape of the toolbar.\r\n * @attr variant - The appearance variant of the toolbar.\r\n * @attr vertical - Whether the element is oriented vertically.\r\n *\r\n * @cssprop --m3e-toolbar-size - The size (height or width) of the toolbar.\r\n * @cssprop --m3e-toolbar-spacing - The gap between toolbar items.\r\n * @cssprop --m3e-toolbar-rounded-shape - Border radius for rounded shape.\r\n * @cssprop --m3e-toolbar-rounded-padding - Padding for rounded shape.\r\n * @cssprop --m3e-toolbar-square-padding - Padding for square shape.\r\n * @cssprop --m3e-toolbar-standard-container-color - Container color for the standard variant.\r\n * @cssprop --m3e-toolbar-standard-color - Foreground color for the standard variant.\r\n * @cssprop --m3e-toolbar-vibrant-container-color - Container color for the vibrant variant.\r\n * @cssprop --m3e-toolbar-vibrant-color - Foreground color for the vibrant variant.\r\n */\r\n@customElement(\"m3e-toolbar\")\r\nexport class M3eToolbarElement extends Vertical(Role(LitElement, \"toolbar\")) {\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    }\r\n    .base {\r\n      display: flex;\r\n      align-items: center;\r\n      box-sizing: border-box;\r\n      border-radius: inherit;\r\n    }\r\n    :host(:not([vertical])) {\r\n      height: fit-content;\r\n    }\r\n    :host(:not([vertical])) .base {\r\n      height: calc(var(--m3e-toolbar-size, 4rem) + ${DesignToken.density.calc(-3)});\r\n      column-gap: var(--m3e-toolbar-spacing, 0.25rem);\r\n    }\r\n    :host([vertical]) {\r\n      width: fit-content;\r\n    }\r\n    :host([vertical]) .base {\r\n      width: calc(var(--m3e-toolbar-size, 4rem) + ${DesignToken.density.calc(-3)});\r\n    }\r\n    :host([vertical]) .base {\r\n      flex-direction: column;\r\n      justify-content: center;\r\n      row-gap: var(--m3e-toolbar-spacing, 0.25rem);\r\n    }\r\n    :host([shape=\"rounded\"]) {\r\n      border-radius: var(--m3e-toolbar-rounded-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    :host([shape=\"rounded\"]) .base {\r\n      padding: var(--m3e-toolbar-rounded-padding, 0.5rem);\r\n    }\r\n    :host(:not([vertical])[shape=\"square\"]) .base {\r\n      padding-inline: var(--m3e-toolbar-square-padding, 1rem);\r\n    }\r\n    :host([vertical][shape=\"square\"]) .base {\r\n      padding-block: var(--m3e-toolbar-square-padding, 1rem);\r\n    }\r\n    :host([variant=\"standard\"]) .state-layer {\r\n      background-color: var(--m3e-toolbar-standard-container-color, ${DesignToken.color.surfaceContainer});\r\n    }\r\n    :host([variant=\"standard\"]) .base {\r\n      color: var(--m3e-toolbar-standard-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host([variant=\"vibrant\"]) .state-layer {\r\n      background-color: var(--m3e-toolbar-vibrant-container-color, ${DesignToken.color.primaryContainer});\r\n    }\r\n    :host([variant=\"vibrant\"]) .base {\r\n      color: var(--m3e-toolbar-vibrant-color, ${DesignToken.color.onPrimaryContainer});\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host([variant]) .state-layer {\r\n        background-color: Canvas;\r\n      }\r\n      :host([variant]) .base {\r\n        color: CanvasText;\r\n        outline: 1px solid CanvasText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n  /** @private */ #focusKeyManager = new RovingTabIndexManager()\r\n    .withHomeAndEnd()\r\n    .withDirectionality(M3eDirectionality.current);\r\n\r\n  /**\r\n   * The appearance variant of the toolbar.\r\n   * @default \"standard\"\r\n   */\r\n  @property({ reflect: true }) variant: ToolbarVariant = \"standard\";\r\n\r\n  /**\r\n   * The shape of the toolbar.\r\n   * @default \"square\"\r\n   */\r\n  @property({ reflect: true }) shape: ToolbarShape = \"square\";\r\n\r\n  /**\r\n   * Whether the toolbar is elevated.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) elevated = false;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.#directionalitySubscription = M3eDirectionality.observe(\r\n      () => (this.#focusKeyManager.directionality = M3eDirectionality.current),\r\n    );\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"vertical\")) {\r\n      this.#focusKeyManager.vertical = this.vertical;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-state-layer class=\"state-layer\"></m3e-state-layer>\r\n      <m3e-elevation class=\"elevation\" level=\"${this.elevated ? 3 : 0}\"></m3e-elevation>\r\n      <div class=\"base\">\r\n        <slot\r\n          @click=\"${this.#handleClick}\"\r\n          @keydown=\"${this.#handleKeyDown}\"\r\n          @slotchange=\"${this.#handleSlotChange}\"\r\n        ></slot>\r\n      </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    const items = M3eInteractivityChecker.findInteractiveElements(this, true);\r\n    const { added } = this.#focusKeyManager.setItems(items);\r\n    if (!this.#focusKeyManager.activeItem) {\r\n      const active = added.find((x) => !x.hasAttribute(\"disabled\"));\r\n      if (active) {\r\n        this.#focusKeyManager.updateActiveItem(active);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this.#focusKeyManager.onKeyDown(e);\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    const item = e.composedPath().find((x) => x instanceof HTMLElement && this.#focusKeyManager.items.includes(x));\r\n    if (item) {\r\n      this.#focusKeyManager.updateActiveItem(<HTMLElement>item);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-toolbar\": M3eToolbarElement;\r\n  }\r\n}\r\n"],"names":["M3eToolbarElement","Vertical","Role","LitElement","constructor","_M3eToolbarElement_directionalitySubscription","set","this","_M3eToolbarElement_focusKeyManager","RovingTabIndexManager","withHomeAndEnd","withDirectionality","M3eDirectionality","current","variant","shape","elevated","connectedCallback","super","__classPrivateFieldSet","observe","__classPrivateFieldGet","directionality","disconnectedCallback","call","update","changedProperties","has","vertical","render","html","_M3eToolbarElement_instances","_M3eToolbarElement_handleClick","_M3eToolbarElement_handleKeyDown","_M3eToolbarElement_handleSlotChange","items","M3eInteractivityChecker","findInteractiveElements","added","setItems","activeItem","active","find","x","hasAttribute","updateActiveItem","e","onKeyDown","item","composedPath","HTMLElement","includes","styles","css","DesignToken","density","calc","corner","full","color","surfaceContainer","onSurface","primaryContainer","onPrimaryContainer","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":";;;;;kbA6DO,IAAMA,EAAN,cAAgCC,EAASC,EAAKC,EAAY,aAA1DC,WAAAA,mCAkEWC,EAAAC,IAAAC,aACAC,EAAAF,IAAAC,MAAmB,IAAIE,GACpCC,iBACAC,mBAAmBC,EAAkBC,UAMXN,KAAAO,QAA0B,WAM1BP,KAAAQ,MAAsB,SAMPR,KAAAS,UAAW,CA+DzD,CA5DWC,iBAAAA,GACPC,MAAMD,oBAENE,EAAAZ,OAAmCK,EAAkBQ,QACnD,IAAOC,EAAAd,KAAIC,EAAA,KAAkBc,eAAiBV,EAAkBC,SACjE,IACH,CAGSU,oBAAAA,GACPL,MAAMK,uBACNF,EAAAd,KAAIF,EAAA,MAA8BmB,KAAlCjB,KACF,CAGmBkB,MAAAA,CAAOC,GACxBR,MAAMO,OAAOC,GAETA,EAAkBC,IAAI,cACxBN,EAAAd,YAAsBqB,SAAWrB,KAAKqB,SAE1C,CAGmBC,MAAAA,GACjB,OAAOC,CAAI,kGACiCvB,KAAKS,SAAW,EAAI,sDAGhDK,EAAAd,KAAIwB,EAAA,IAAAC,iBACFX,EAAAd,KAAIwB,EAAA,IAAAE,oBACDZ,EAAAd,KAAIwB,EAAA,IAAAG,mBAG3B,0DAIE,MAAMC,EAAQC,EAAwBC,wBAAwB9B,MAAM,IAC9D+B,MAAEA,GAAUjB,EAAAd,KAAIC,EAAA,KAAkB+B,SAASJ,GACjD,IAAKd,EAAAd,YAAsBiC,WAAY,CACrC,MAAMC,EAASH,EAAMI,KAAMC,IAAOA,EAAEC,aAAa,aAC7CH,GACFpB,EAAAd,KAAIC,EAAA,KAAkBqC,iBAAiBJ,EAE3C,CACF,aAGeK,GACbzB,EAAAd,KAAIC,EAAA,KAAkBuC,UAAUD,EAClC,aAGaA,GACX,MAAME,EAAOF,EAAEG,eAAeP,KAAMC,GAAMA,aAAaO,aAAe7B,EAAAd,KAAIC,EAAA,KAAkB2B,MAAMgB,SAASR,IACvGK,GACF3B,EAAAd,KAAIC,EAAA,KAAkBqC,iBAA8BG,EAExD,EAnJgBhD,EAAAoD,OAAyBC,CAAG,oRAeOC,EAAYC,QAAQC,iLAOrBF,EAAYC,QAAQC,MAAK,gNAQrBF,EAAYvC,MAAM0C,OAAOC,4ZAYXJ,EAAYK,MAAMC,qGAGvCN,EAAYK,MAAME,wHAGEP,EAAYK,MAAMG,mGAGvCR,EAAYK,MAAMI,qMAsBnCC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6ClE,EAAAmE,UAAA,eAAA,GAMrCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAuClE,EAAAmE,UAAA,aAAA,GAMhBH,EAAA,CAA3CC,EAAS,CAAEG,KAAMC,QAASH,SAAS,KAAyBlE,EAAAmE,UAAA,gBAAA,GAvFlDnE,EAAiBgE,EAAA,CAD7BM,EAAc,gBACFtE"}