@m3e/web 2.5.4 → 2.5.6

package/dist/tooltip.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.min.js","sources":["../../src/tooltip/RichTooltipActionElement.ts","../../src/tooltip/TooltipElementBase.ts","../../src/tooltip/RichTooltipElement.ts","../../src/tooltip/TooltipElement.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\r\n\r\nimport { ActionElementBase, customElement } from \"@m3e/web/core\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to dismiss a parenting rich tooltip.\r\n * @tag m3e-rich-tooltip-action\r\n *\r\n * @slot - Renders the content of the action.\r\n *\r\n * @attr disable-restore-focus - Whether to focus should not be restored to the trigger when activated.\r\n */\r\n@customElement(\"m3e-rich-tooltip-action\")\r\nexport class M3eRichTooltipActionElement extends ActionElementBase {\r\n  /** Whether to focus should not be restored to the trigger when activated. */\r\n  @property({ attribute: \"disable-restore-focus\", type: Boolean }) disableRestoreFocus = false;\r\n\r\n  /** @inheritdoc */\r\n  protected override _onClick(): void {\r\n    this.closest(\"m3e-rich-tooltip\")?.hide(!this.disableRestoreFocus);\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-rich-tooltip-action\": M3eRichTooltipActionElement;\r\n  }\r\n}\r\n","import { LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  HoverController,\r\n  HtmlFor,\r\n  isDisabledMixin,\r\n  LongPressController,\r\n  ReconnectedCallback,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3ePlatform } from \"@m3e/web/core/platform\";\r\nimport { AnchorPosition, positionAnchor } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { TooltipTouchGestures } from \"./TooltipTouchGestures\";\r\n\r\n/** The space, in pixels, between the tooltip and anchor. */\r\nconst TOOLTIP_OFFSET = 4;\r\n\r\n/** The default time, in milliseconds, before hiding a tooltip. */\r\nconst TOOLTIP_HIDE_DELAY = 200;\r\n\r\n/** Provides a base implementation for a tooltip. This class must be inherited. */\r\nexport abstract class TooltipElementBase extends HtmlFor(ReconnectedCallback(AttachInternals(LitElement))) {\r\n  /** @private */ private static __openTooltips = new Array<TooltipElementBase>();\r\n\r\n  /** @internal */ @query(\".base\") protected readonly _base!: HTMLElement;\r\n  /** @private */ #for: HTMLElement | null = null;\r\n  /** @private */ #anchorCleanup?: () => void;\r\n  /** @private */ #tooltipHovering = false;\r\n\r\n  /** @private */ readonly #controlClickHandler = () => this.#handleControlClick();\r\n\r\n  /** @private */\r\n  readonly #hoverController = new HoverController(this, {\r\n    target: null,\r\n    endDelay: TOOLTIP_HIDE_DELAY,\r\n    callback: (hovering, target) => {\r\n      if (this._isInteractive) return;\r\n      if (hovering) {\r\n        if (target === this._base) {\r\n          this.#tooltipHovering = true;\r\n          return;\r\n        }\r\n        this.show();\r\n      } else if (!this.#tooltipHovering || target === this._base) {\r\n        this.#tooltipHovering = false;\r\n        this.hide();\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */\r\n  readonly #longPressController = new LongPressController(this, {\r\n    target: null,\r\n    callback: (pressed) => {\r\n      if (this._isInteractive) return;\r\n      if (pressed) {\r\n        this.show();\r\n      } else {\r\n        this.hide();\r\n      }\r\n    },\r\n  });\r\n\r\n  /**\r\n   * Whether the element is disabled.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) disabled = false;\r\n\r\n  /**\r\n   * The amount of time, in milliseconds, before showing the tooltip.\r\n   * @default 0\r\n   */\r\n  @property({ attribute: \"show-delay\", type: Number }) get showDelay(): number {\r\n    return this.#hoverController.startDelay;\r\n  }\r\n  set showDelay(value: number) {\r\n    this.#hoverController.startDelay = value;\r\n  }\r\n\r\n  /**\r\n   * The amount of time, in milliseconds, before hiding the tooltip.\r\n   * @default 200\r\n   */\r\n  @property({ attribute: \"hide-delay\", type: Number }) get hideDelay(): number {\r\n    return this.#hoverController.endDelay;\r\n  }\r\n  set hideDelay(value: number) {\r\n    this.#hoverController.endDelay = value;\r\n  }\r\n\r\n  /**\r\n   * The mode in which to handle touch gestures.\r\n   * @default \"auto\"\r\n   */\r\n  @property({ attribute: \"touch-gestures\" }) touchGestures: TooltipTouchGestures = \"auto\";\r\n\r\n  /** Whether the tooltip is currently open. */\r\n  get isOpen(): boolean {\r\n    return TooltipElementBase.__openTooltips.includes(this);\r\n  }\r\n\r\n  /**\r\n   * Whether the tooltip is interactive.\r\n   * @internal\r\n   */\r\n  protected get _isInteractive() {\r\n    return false;\r\n  }\r\n\r\n  /**\r\n   * The position in which to anchor the tooltip relative to its trigger.\r\n   * @internal\r\n   */\r\n  protected abstract get _anchorPosition(): AnchorPosition;\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    if (M3ePlatform.iOS || M3ePlatform.Android) {\r\n      this.#longPressController.observe(control);\r\n      this.#disableNativeGesturesIfNecessary();\r\n    } else {\r\n      this.#hoverController.observe(control);\r\n    }\r\n\r\n    control.addEventListener(\"click\", this.#controlClickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.control) {\r\n      this.#hoverController.unobserve(this.control);\r\n      this.#longPressController.unobserve(this.control);\r\n      this.control.removeEventListener(\"click\", this.#controlClickHandler);\r\n      this.hide();\r\n    }\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"disabled\") && this.disabled) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#initialize();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#initialize();\r\n  }\r\n\r\n  /** @private */\r\n  #initialize(): void {\r\n    if (this._base) {\r\n      this.#hoverController.observe(this._base);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Manually shows the tooltip.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the tooltip is shown.\r\n   */\r\n  async show(): Promise<void> {\r\n    if (!this.control || this.disabled || (isDisabledMixin(this.control) && this.control.disabled)) return;\r\n\r\n    TooltipElementBase.__openTooltips.filter((x) => x !== this).forEach((x) => x.hide());\r\n\r\n    this._base.showPopover();\r\n\r\n    this.#anchorCleanup = await positionAnchor(\r\n      this._base,\r\n      this.control,\r\n      {\r\n        position: this._anchorPosition,\r\n        inline: true,\r\n        flip: true,\r\n        shift: \"main\",\r\n        offset: TOOLTIP_OFFSET,\r\n      },\r\n      (x, y) => this._updatePosition(this._base, x, y),\r\n    );\r\n\r\n    if (!TooltipElementBase.__openTooltips.includes(this)) {\r\n      TooltipElementBase.__openTooltips.push(this);\r\n    }\r\n  }\r\n\r\n  /** Manually hides the tooltip. */\r\n  hide(): void {\r\n    this._base.hidePopover();\r\n    this.#anchorCleanup?.();\r\n    this.#anchorCleanup = undefined;\r\n    this.#hoverController.clearDelays();\r\n\r\n    if (TooltipElementBase.__openTooltips.includes(this)) {\r\n      TooltipElementBase.__openTooltips = TooltipElementBase.__openTooltips.filter((x) => x !== this);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Updates the position of the tooltip.\r\n   * @internal\r\n   * @param {HTMLElement} base The internal element of the tooltip to position.\r\n   * @param {number} x The x-coordinate, in pixels, to which to position `base`.\r\n   * @param {number} y The y-coordinate, in pixels, to which to position `base`.\r\n   */\r\n  protected abstract _updatePosition(base: HTMLElement, x: number, y: number): void;\r\n\r\n  /** @private */\r\n  #handleControlClick(): void {\r\n    if (this._isInteractive) {\r\n      if (TooltipElementBase.__openTooltips.includes(this)) {\r\n        this.hide();\r\n      } else {\r\n        this.show();\r\n      }\r\n    } else {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #disableNativeGesturesIfNecessary() {\r\n    if (this.touchGestures !== \"off\" && this.#for) {\r\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n      const style: any = this.#for.style;\r\n\r\n      // If gestures are set to `auto`, we don't disable text selection on inputs and\r\n      // textareas, because it prevents the user from typing into them on iOS Safari.\r\n\r\n      if (this.touchGestures === \"on\" || (this.#for.nodeName !== \"INPUT\" && this.#for.nodeName !== \"TEXTAREA\")) {\r\n        style.userSelect = style.msUserSelect = style.webkitUserSelect = style.MozUserSelect = \"none\";\r\n      }\r\n\r\n      // If we have `auto` gestures and the element uses native HTML dragging,\r\n      // we don't set `-webkit-user-drag` because it prevents the native behavior.\r\n\r\n      if (this.touchGestures === \"on\" || !this.#for.draggable) {\r\n        style.webkitUserDrag = \"none\";\r\n      }\r\n\r\n      style.touchAction = \"none\";\r\n      style.webkitTapHighlightColor = \"transparent\";\r\n    }\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport { customElement, DesignToken, getTextContent, hasAssignedNodes } from \"@m3e/web/core\";\r\nimport { M3eAriaDescriber, M3eInteractivityChecker } from \"@m3e/web/core/a11y\";\r\nimport { AnchorPosition } from \"@m3e/web/core/anchoring\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { RichTooltipPosition } from \"./RichTooltipPosition\";\r\nimport { TooltipElementBase } from \"./TooltipElementBase\";\r\n\r\n/**\r\n * Provides contextual details for a control, such as explaining the value or purpose of a feature.\r\n *\r\n * @description\r\n * The `m3e-rich-tooltip` component provides contextual guidance for a control. It supports an optional\r\n * subhead, multi-line supporting text, and optional action elements. When non‑interactive, it behaves\r\n * as a standard tooltip and contributes an `aria-describedby` message to its control. When interactive,\r\n * it becomes a lightweight anchored dialog with manual popover behavior, keyboard dismissal, and\r\n * click‑outside light‑dismiss.\r\n *\r\n * @example\r\n * The following example illustrates connecting an interactive rich tooltip to a button using the `for` attribute.\r\n * ```html\r\n * <m3e-icon-button id=\"btnSettings\">\r\n *  <m3e-icon name=\"settings\"></m3e-icon>\r\n * </m3e-icon-button>\r\n * <m3e-rich-tooltip for=\"btnSettings\">\r\n *  <span slot=\"subhead\">New settings available</span>\r\n *  Now you can adjust the uploaded image quality, and upgrade your available storage space.\r\n *  <div slot=\"actions\">\r\n *    <m3e-button>\r\n *      <m3e-rich-tooltip-action>Learn more</m3e-rich-tooltip-action>\r\n *    </m3e-button>\r\n *  </div>\r\n * </m3e-rich-tooltip>\r\n * ```\r\n *\r\n * @tag m3e-rich-tooltip\r\n *\r\n * @slot - The main supporting text of the tooltip.\r\n * @slot subhead - Optional subhead text displayed above the supporting content.\r\n * @slot actions - Optional action elements displayed at the bottom of the tooltip.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr for - The identifier of the interactive control to which this element is attached.\r\n * @attr hide-delay - The amount of time, in milliseconds, before hiding the tooltip.\r\n * @attr position - The position of the tooltip.\r\n * @attr show-delay - The amount of time, in milliseconds, before showing the tooltip.\r\n *\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-rich-tooltip-padding-top - Top padding of the tooltip container.\r\n * @cssprop --m3e-rich-tooltip-padding-bottom - Bottom padding of the tooltip container (when no actions are present).\r\n * @cssprop --m3e-rich-tooltip-padding-inline - Horizontal padding of the tooltip container.\r\n * @cssprop --m3e-rich-tooltip-max-width - Maximum width of the tooltip surface.\r\n * @cssprop --m3e-rich-tooltip-shape - Border‑radius of the tooltip container.\r\n * @cssprop --m3e-rich-tooltip-container-color - Background color of the tooltip surface.\r\n * @cssprop --m3e-rich-tooltip-subhead-color - Color of the subhead text.\r\n * @cssprop --m3e-rich-tooltip-subhead-font-size - Font size of the subhead text.\r\n * @cssprop --m3e-rich-tooltip-subhead-font-weight - Font weight of the subhead text.\r\n * @cssprop --m3e-rich-tooltip-subhead-line-height - Line height of the subhead text.\r\n * @cssprop --m3e-rich-tooltip-subhead-tracking - Letter‑spacing of the subhead text.\r\n * @cssprop --m3e-rich-tooltip-subhead-bottom-space - Space below the subhead before the supporting text.\r\n * @cssprop --m3e-rich-tooltip-supporting-text-color - Color of the supporting text.\r\n * @cssprop --m3e-rich-tooltip-supporting-text-font-size - Font size of the supporting text.\r\n * @cssprop --m3e-rich-tooltip-supporting-text-font-weight - Font weight of the supporting text.\r\n * @cssprop --m3e-rich-tooltip-supporting-text-line-height - Line height of the supporting text.\r\n * @cssprop --m3e-rich-tooltip-supporting-text-tracking - Letter‑spacing of the supporting text.\r\n * @cssprop --m3e-rich-tooltip-actions-padding-inline - Horizontal padding applied to the actions slot area.\r\n * @cssprop --m3e-rich-tooltip-actions-top-space - Space above the actions slot.\r\n * @cssprop --m3e-rich-tooltip-actions-bottom-space - Space below the actions slot.\r\n */\r\n@customElement(\"m3e-rich-tooltip\")\r\nexport class M3eRichTooltipElement extends TooltipElementBase {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: contents;\r\n    }\r\n    .base {\r\n      flex-direction: column;\r\n      position: absolute;\r\n      padding: unset;\r\n      margin: unset;\r\n      border: unset;\r\n      padding-block-start: var(--m3e-rich-tooltip-padding-top, 0.75rem);\r\n      padding-inline: var(--m3e-rich-tooltip-padding-inline, 1rem);\r\n      max-width: var(--m3e-rich-tooltip-max-width, 20rem);\r\n      box-sizing: border-box;\r\n      overflow: visible;\r\n      border-radius: var(--m3e-rich-tooltip-shape, ${DesignToken.shape.corner.medium});\r\n      background-color: var(--m3e-rich-tooltip-container-color, ${DesignToken.color.surfaceContainer});\r\n      display: none;\r\n      opacity: 0;\r\n      transform: scale(0.8);\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n            transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},\r\n            overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n            display ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    .base:not(.has-actions) {\r\n      padding-block-end: var(--m3e-rich-tooltip-padding-bottom, 0.75rem);\r\n    }\r\n    .base::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    .base:popover-open {\r\n      display: flex;\r\n      opacity: 1;\r\n      transform: scale(1);\r\n    }\r\n    .base:not(.has-subhead) .subhead,\r\n    .base:not(.has-actions) .actions {\r\n      display: none;\r\n    }\r\n    .subhead {\r\n      color: var(--m3e-rich-tooltip-subhead-color, ${DesignToken.color.onSurfaceVariant});\r\n      font-size: var(--m3e-rich-tooltip-subhead-font-size, ${DesignToken.typescale.standard.title.small.fontSize});\r\n      font-weight: var(\r\n        --m3e-rich-tooltip-subhead-font-weight,\r\n        ${DesignToken.typescale.standard.title.small.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-rich-tooltip-subhead-line-height,\r\n        ${DesignToken.typescale.standard.title.small.lineHeight}\r\n      );\r\n      letter-spacing: var(--m3e-rich-tooltip-subhead-tracking, ${DesignToken.typescale.standard.title.small.tracking});\r\n      padding-block-end: var(--m3e-rich-tooltip-subhead-bottom-space, 0.25rem);\r\n    }\r\n    .content {\r\n      color: var(--m3e-rich-tooltip-supporting-text-color, ${DesignToken.color.onSurfaceVariant});\r\n      font-size: var(\r\n        --m3e-rich-tooltip-supporting-text-font-size,\r\n        ${DesignToken.typescale.standard.body.medium.fontSize}\r\n      );\r\n      font-weight: var(\r\n        --m3e-rich-tooltip-supporting-text-font-weight,\r\n        ${DesignToken.typescale.standard.body.medium.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-rich-tooltip-supporting-text-line-height,\r\n        ${DesignToken.typescale.standard.body.medium.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-rich-tooltip-supporting-text-tracking,\r\n        ${DesignToken.typescale.standard.body.medium.tracking}\r\n      );\r\n    }\r\n    .actions {\r\n      margin-inline: calc(\r\n        0px - calc(\r\n            var(--m3e-rich-tooltip-padding-inline, 1rem) - var(--m3e-rich-tooltip-actions-padding-inline, 0.25rem)\r\n          )\r\n      );\r\n      padding-block-start: var(--m3e-rich-tooltip-actions-top-space, 0.75rem);\r\n      padding-block-end: var(--m3e-rich-tooltip-actions-bottom-space, 0.5rem);\r\n    }\r\n    ::slotted([slot=\"actions\"]) {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      min-height: 1.5rem;\r\n      column-gap: 0.5rem;\r\n    }\r\n    ::slotted([slot=\"actions\"][end]) {\r\n      justify-content: flex-end;\r\n    }\r\n    @starting-style {\r\n      .base:popover-open {\r\n        opacity: 0;\r\n        transform: scale(0.8);\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base {\r\n        background-color: Canvas;\r\n        color: CanvasText;\r\n        box-sizing: border-box;\r\n        border: 1px solid CanvasText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ #id = M3eRichTooltipElement.__nextId++;\r\n  /** @private */ #subheadText = \"\";\r\n  /** @private */ #contentText = \"\";\r\n  /** @private */ #message = \"\";\r\n  /** @private */ #messageRegistered = false;\r\n\r\n  /** @private */ @state() private _hasSubhead = false;\r\n  /** @private */ @state() private _interactive = false;\r\n\r\n  /** @private */ readonly #documentClickHandler = (e: MouseEvent) => this.#handleDocumentClick(e);\r\n\r\n  /**\r\n   * The position of the tooltip.\r\n   * @default \"below-after\"\r\n   */\r\n  @property() position: RichTooltipPosition = \"below-after\";\r\n\r\n  /** @inheritdoc */\r\n  protected override get _isInteractive() {\r\n    return this._interactive;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override get _anchorPosition(): AnchorPosition {\r\n    switch (this.position) {\r\n      case \"above\":\r\n        return \"top\";\r\n      case \"above-after\":\r\n        return M3eDirectionality.current === \"rtl\" ? \"top-start\" : \"top-end\";\r\n      case \"above-before\":\r\n        return M3eDirectionality.current === \"rtl\" ? \"top-end\" : \"top-start\";\r\n      case \"after\":\r\n        return M3eDirectionality.current === \"rtl\" ? \"left\" : \"right\";\r\n      case \"before\":\r\n        return M3eDirectionality.current === \"rtl\" ? \"right\" : \"left\";\r\n      case \"below\":\r\n        return \"bottom\";\r\n      case \"below-after\":\r\n        return M3eDirectionality.current === \"rtl\" ? \"bottom-start\" : \"bottom-end\";\r\n      case \"below-before\":\r\n        return M3eDirectionality.current === \"rtl\" ? \"bottom-end\" : \"bottom-start\";\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    const subheadId = this._interactive && this._hasSubhead ? `m3e-rich-tooltip-${this.#id}-subhead` : undefined;\r\n    return html`<div\r\n      class=\"base\"\r\n      popover=\"manual\"\r\n      role=\"${ifDefined(this._interactive ? \"dialog\" : undefined)}\"\r\n      aria-labelledby=\"${ifDefined(subheadId)}\"\r\n      @keydown=\"${this.#handleKeyDown}\"\r\n      @beforetoggle=\"${this.#handleBeforeToggle}\"\r\n      @toggle=\"${this.#handleToggle}\"\r\n    >\r\n      <m3e-elevation level=\"3\"></m3e-elevation>\r\n      <div class=\"subhead\" id=\"${ifDefined(subheadId)}\">\r\n        <slot name=\"subhead\" @slotchange=\"${this.#handleSubheadSlotChange}\"></slot>\r\n      </div>\r\n      <div class=\"content\"><slot @slotchange=\"${this.#handleContentSlotChange}\"></slot></div>\r\n      <div class=\"actions\">\r\n        <slot name=\"actions\" @slotchange=\"${this.#handleActionsSlotChange}\"></slot>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override show(): Promise<void> {\r\n    if (this._interactive) {\r\n      document.addEventListener(\"click\", this.#documentClickHandler);\r\n    }\r\n\r\n    return super.show();\r\n  }\r\n\r\n  /**\r\n   * Manually hides the tooltip.\r\n   * @param [restoreFocus=true] Whether to restore focus to the element that triggered the interactive tooltip.\r\n   */\r\n  override hide(restoreFocus = true): void {\r\n    if (this._interactive) {\r\n      document.removeEventListener(\"click\", this.#documentClickHandler);\r\n    }\r\n\r\n    super.hide();\r\n\r\n    if (restoreFocus && this._interactive && this.control && M3eInteractivityChecker.isFocusable(this.control)) {\r\n      this.control.focus();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    this.#updateMessage();\r\n\r\n    if (this._interactive) {\r\n      control.ariaHasPopup = \"dialog\";\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"_interactive\")) {\r\n      this.ariaHidden = this._interactive ? null : \"true\";\r\n      this.#updateMessage();\r\n\r\n      if (this.control && this._interactive) {\r\n        this.control.ariaHasPopup = \"dialog\";\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override _updatePosition(base: HTMLElement, x: number, y: number): void {\r\n    if (this.position.includes(\"before\") && this.position !== \"before\") {\r\n      if (M3eDirectionality.current === \"rtl\") {\r\n        x += this.control?.clientWidth ?? 0;\r\n      } else {\r\n        x -= this.control?.clientWidth ?? 0;\r\n      }\r\n    }\r\n    if (this.position.includes(\"after\") && this.position !== \"after\") {\r\n      if (M3eDirectionality.current === \"rtl\") {\r\n        x -= this.control?.clientWidth ?? 0;\r\n      } else {\r\n        x += this.control?.clientWidth ?? 0;\r\n      }\r\n    }\r\n\r\n    if (M3eDirectionality.current === \"rtl\") {\r\n      base.style.right = `${window.innerWidth - x - base.clientWidth}px`;\r\n      base.style.left = \"\";\r\n    } else {\r\n      base.style.left = `${x}px`;\r\n      base.style.right = \"\";\r\n    }\r\n\r\n    base.style.top = `${y}px`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleBeforeToggle(e: ToggleEvent): void {\r\n    const forwarded = new ToggleEvent(\"beforetoggle\", {\r\n      oldState: e.oldState,\r\n      newState: e.newState,\r\n      bubbles: true,\r\n      composed: true,\r\n      cancelable: e.cancelable,\r\n    });\r\n\r\n    if (!this.dispatchEvent(forwarded)) {\r\n      e.preventDefault();\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleToggle(e: ToggleEvent): void {\r\n    const forwarded = new ToggleEvent(\"toggle\", {\r\n      oldState: e.oldState,\r\n      newState: e.newState,\r\n      bubbles: true,\r\n      composed: true,\r\n    });\r\n    this.dispatchEvent(forwarded);\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentClick(e: MouseEvent): void {\r\n    if (!e.composedPath().some((x) => x instanceof M3eRichTooltipElement || x === this.control)) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n      e.preventDefault();\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleSubheadSlotChange(e: Event): void {\r\n    this._hasSubhead = hasAssignedNodes(e.target as HTMLSlotElement);\r\n    this.shadowRoot?.querySelector(\".base\")?.classList.toggle(\"has-subhead\", this._hasSubhead);\r\n    this.#subheadText = this._hasSubhead ? getTextContent(e.target as HTMLSlotElement, true) : \"\";\r\n    this.#updateMessage();\r\n  }\r\n\r\n  /** @private */\r\n  #handleContentSlotChange(e: Event): void {\r\n    this._interactive = M3eInteractivityChecker.findInteractiveElements(this, true).length > 0;\r\n    this.#contentText = getTextContent(e.target as HTMLSlotElement, true);\r\n    this.#updateMessage();\r\n  }\r\n\r\n  /** @private */\r\n  #handleActionsSlotChange(e: Event): void {\r\n    this.shadowRoot\r\n      ?.querySelector(\".base\")\r\n      ?.classList.toggle(\"has-actions\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n\r\n    this._interactive = M3eInteractivityChecker.findInteractiveElements(this, true).length > 0;\r\n    this.#updateMessage();\r\n  }\r\n\r\n  /** @private */\r\n  #updateMessage() {\r\n    const message = this.#subheadText ? `${this.#subheadText}/n${this.#contentText}` : this.#contentText;\r\n    if (this.isConnected && this.control) {\r\n      if (this.#message && this.#messageRegistered) {\r\n        M3eAriaDescriber.removeDescription(this.control, this.#message);\r\n        this.#messageRegistered = false;\r\n      }\r\n\r\n      this.#message = message;\r\n\r\n      if (this.#message && !this._interactive) {\r\n        M3eAriaDescriber.describe(this.control, this.#message);\r\n        this.#messageRegistered = true;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eRichTooltipElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eRichTooltipElement {\r\n  addEventListener<K extends keyof M3eRichTooltipElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eRichTooltipElement, ev: M3eRichTooltipElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eRichTooltipElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eRichTooltipElement, ev: M3eRichTooltipElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-rich-tooltip\": M3eRichTooltipElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, getTextContent, setCustomState } from \"@m3e/web/core\";\r\nimport { M3eAriaDescriber } from \"@m3e/web/core/a11y\";\r\nimport { AnchorPosition } from \"@m3e/web/core/anchoring\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { TooltipPosition } from \"./TooltipPosition\";\r\nimport { TooltipElementBase } from \"./TooltipElementBase\";\r\n\r\n/**\r\n * Adds additional context to a button or other UI element.\r\n *\r\n * @description\r\n * The `m3e-tooltip` component provides contextual information in response to user interaction, enhancing comprehension\r\n * and reducing ambiguity. Tooltips are positioned relative to a target element and support configurable delays for\r\n * show and hide behavior. The component is designed to reinforce accessibility and usability, especially in dense or\r\n * icon-driven interfaces. Use the `for` attribute to designate the element for which to provide a tooltip.\r\n *\r\n * @example\r\n * The following example illustrates connecting a tooltip to a button using the `for` attribute.\r\n * ```html\r\n * <m3e-icon-button id=\"button\" aria-label=\"Back\">\r\n *  <m3e-icon name=\"arrow_back\"></m3e-icon>\r\n * </m3e-icon-button>\r\n * <m3e-tooltip for=\"button\">Go Back</m3e-tooltip>\r\n * ```\r\n *\r\n * @tag m3e-tooltip\r\n *\r\n * @slot - Renders the content of the tooltip.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr for - The identifier of the interactive control to which this element is attached.\r\n * @attr hide-delay - The amount of time, in milliseconds, before hiding the tooltip.\r\n * @attr position - The position of the tooltip.\r\n * @attr show-delay - The amount of time, in milliseconds, before showing the tooltip.\r\n *\r\n * @cssprop --m3e-tooltip-padding - Internal spacing of the tooltip container.\r\n * @cssprop --m3e-tooltip-min-width - Minimum width of the tooltip.\r\n * @cssprop --m3e-tooltip-max-width - Maximum width of the tooltip.\r\n * @cssprop --m3e-tooltip-min-height - Minimum height of the tooltip container.\r\n * @cssprop --m3e-tooltip-max-height - Maximum height of the tooltip.\r\n * @cssprop --m3e-tooltip-shape - Border radius of the tooltip container.\r\n * @cssprop --m3e-tooltip-container-color - Background color of the tooltip.\r\n * @cssprop --m3e-tooltip-supporting-text-color - Text color of supporting text.\r\n * @cssprop --m3e-tooltip-supporting-text-font-size - Font size of supporting text.\r\n * @cssprop --m3e-tooltip-supporting-text-font-weight - Font weight of supporting text.\r\n * @cssprop --m3e-tooltip-supporting-text-line-height - Line height of supporting text.\r\n * @cssprop --m3e-tooltip-supporting-text-tracking - Letter spacing of supporting text.\r\n */\r\n@customElement(\"m3e-tooltip\")\r\nexport class M3eTooltipElement extends TooltipElementBase {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: contents;\r\n    }\r\n    .base {\r\n      position: absolute;\r\n      pointer-events: none;\r\n      margin: unset;\r\n      border: unset;\r\n      word-break: normal;\r\n      overflow-wrap: anywhere;\r\n      padding: var(--m3e-tooltip-padding, 0.25rem 0.5rem);\r\n      min-width: var(--m3e-tooltip-min-width, 2.5rem);\r\n      max-width: var(--m3e-tooltip-max-width, 12.5rem);\r\n      min-height: var(--m3e-tooltip-min-height, 1.5rem);\r\n      max-height: var(--m3e-tooltip-max-height, 40vh);\r\n      box-sizing: border-box;\r\n      overflow: hidden;\r\n      text-align: center;\r\n      border-radius: var(--m3e-tooltip-shape, ${DesignToken.shape.corner.extraSmall});\r\n      background-color: var(--m3e-tooltip-container-color, ${DesignToken.color.inverseSurface});\r\n      color: var(--m3e-tooltip-supporting-text-color, ${DesignToken.color.inverseOnSurface});\r\n      font-size: var(--m3e-tooltip-supporting-text-font-size, ${DesignToken.typescale.standard.body.small.fontSize});\r\n      font-weight: var(\r\n        --m3e-tooltip-supporting-text-font-weight,\r\n        ${DesignToken.typescale.standard.body.small.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-tooltip-supporting-text-line-height,\r\n        ${DesignToken.typescale.standard.body.small.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-tooltip-supporting-text-tracking,\r\n        ${DesignToken.typescale.standard.body.small.tracking}\r\n      );\r\n      display: none;\r\n      opacity: 0;\r\n      transform: scale(0.8);\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n        transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},\r\n        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        display ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host(:state(-multiline)) .base {\r\n      text-align: start;\r\n    }\r\n    .base::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    .base:popover-open {\r\n      display: block;\r\n      opacity: 1;\r\n      transform: scale(1);\r\n    }\r\n    @starting-style {\r\n      .base:popover-open {\r\n        opacity: 0;\r\n        transform: scale(0.8);\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base {\r\n        background-color: Canvas;\r\n        color: CanvasText;\r\n        box-sizing: border-box;\r\n        border: 1px solid CanvasText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #message?: string | null;\r\n\r\n  /**\r\n   * The position of the tooltip.\r\n   * @default \"below\"\r\n   */\r\n  @property() position: TooltipPosition = \"below\";\r\n\r\n  /** @inheritdoc */\r\n  protected get _anchorPosition(): AnchorPosition {\r\n    return this.position === \"above\"\r\n      ? \"top\"\r\n      : this.position === \"below\"\r\n        ? \"bottom\"\r\n        : this.position === \"before\"\r\n          ? M3eDirectionality.current === \"ltr\"\r\n            ? \"left\"\r\n            : \"right\"\r\n          : M3eDirectionality.current === \"ltr\"\r\n            ? \"right\"\r\n            : \"left\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    if (this.#message) {\r\n      M3eAriaDescriber.describe(control, this.#message);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.control && this.#message) {\r\n      M3eAriaDescriber.removeDescription(this.control, this.#message);\r\n    }\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.ariaHidden = \"true\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\" popover=\"manual\" @toggle=\"${this.#handleToggle}\">\r\n      <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected _updatePosition(base: HTMLElement, x: number, y: number): void {\r\n    if (M3eDirectionality.current === \"rtl\") {\r\n      base.style.right = `${window.innerWidth - x - base.clientWidth}px`;\r\n      base.style.left = \"\";\r\n    } else {\r\n      base.style.left = `${x}px`;\r\n      base.style.right = \"\";\r\n    }\r\n    base.style.top = `${y}px`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    const message = getTextContent(e.target as HTMLSlotElement, true);\r\n    if (this.isConnected && this.control) {\r\n      if (this.#message) {\r\n        M3eAriaDescriber.removeDescription(this.control, this.#message);\r\n      }\r\n\r\n      this.#message = message;\r\n\r\n      if (this.#message) {\r\n        M3eAriaDescriber.describe(this.control, this.#message);\r\n      }\r\n    } else {\r\n      this.#message = message;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleToggle(e: ToggleEvent): void {\r\n    if (e.newState === \"open\") {\r\n      const multiline = this._base.getBoundingClientRect().height > parseFloat(getComputedStyle(this._base).minHeight);\r\n      setCustomState(this, \"-multiline\", multiline);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-tooltip\": M3eTooltipElement;\r\n  }\r\n}\r\n"],"names":["M3eRichTooltipActionElement","ActionElementBase","constructor","this","disableRestoreFocus","_onClick","closest","hide","__decorate","property","attribute","type","Boolean","prototype","customElement","TooltipElementBase","HtmlFor","ReconnectedCallback","AttachInternals","LitElement","_TooltipElementBase_for","set","_TooltipElementBase_anchorCleanup","_TooltipElementBase_tooltipHovering","_TooltipElementBase_controlClickHandler","__classPrivateFieldGet","_TooltipElementBase_instances","_TooltipElementBase_handleControlClick","call","_TooltipElementBase_hoverController","HoverController","target","endDelay","callback","hovering","_isInteractive","_base","__classPrivateFieldSet","show","_TooltipElementBase_longPressController","LongPressController","pressed","disabled","touchGestures","showDelay","startDelay","value","hideDelay","isOpen","_a","__openTooltips","includes","attach","control","super","M3ePlatform","iOS","Android","observe","_TooltipElementBase_disableNativeGesturesIfNecessary","addEventListener","detach","unobserve","removeEventListener","update","changedProperties","has","reconnectedCallback","_TooltipElementBase_initialize","firstUpdated","_changedProperties","isDisabledMixin","filter","x","forEach","showPopover","positionAnchor","position","_anchorPosition","inline","flip","shift","offset","y","_updatePosition","push","hidePopover","undefined","clearDelays","style","nodeName","userSelect","msUserSelect","webkitUserSelect","MozUserSelect","draggable","webkitUserDrag","touchAction","webkitTapHighlightColor","Array","query","reflect","Number","M3eRichTooltipElement","M3eRichTooltipElement_1","_M3eRichTooltipElement_id","__nextId","_M3eRichTooltipElement_subheadText","_M3eRichTooltipElement_contentText","_M3eRichTooltipElement_message","_M3eRichTooltipElement_messageRegistered","_hasSubhead","_interactive","_M3eRichTooltipElement_documentClickHandler","e","M3eDirectionality","current","render","subheadId","html","ifDefined","_M3eRichTooltipElement_instances","_M3eRichTooltipElement_handleKeyDown","_M3eRichTooltipElement_handleBeforeToggle","_M3eRichTooltipElement_handleToggle","_M3eRichTooltipElement_handleSubheadSlotChange","_M3eRichTooltipElement_handleContentSlotChange","_M3eRichTooltipElement_handleActionsSlotChange","document","restoreFocus","M3eInteractivityChecker","isFocusable","focus","_M3eRichTooltipElement_updateMessage","ariaHasPopup","ariaHidden","base","clientWidth","right","window","innerWidth","left","top","forwarded","ToggleEvent","oldState","newState","bubbles","composed","cancelable","dispatchEvent","preventDefault","composedPath","some","key","shiftKey","ctrlKey","hasAssignedNodes","shadowRoot","querySelector","classList","toggle","getTextContent","findInteractiveElements","length","message","isConnected","M3eAriaDescriber","removeDescription","describe","styles","css","DesignToken","shape","corner","medium","color","surfaceContainer","unsafeCSS","motion","duration","short3","easing","standard","onSurfaceVariant","typescale","title","small","fontSize","fontWeight","lineHeight","tracking","body","state","M3eTooltipElement","_M3eTooltipElement_message","connectedCallback","_M3eTooltipElement_instances","_M3eTooltipElement_handleToggle","_M3eTooltipElement_handleSlotChange","multiline","getBoundingClientRect","height","parseFloat","getComputedStyle","minHeight","setCustomState","extraSmall","inverseSurface","inverseOnSurface"],"mappings":"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"}
+{"version":3,"file":"tooltip.min.js","sources":["../../src/tooltip/RichTooltipActionElement.ts","../../src/tooltip/TooltipElementBase.ts","../../src/tooltip/RichTooltipElement.ts","../../src/tooltip/TooltipElement.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\r\n\r\nimport { ActionElementBase, customElement } from \"@m3e/web/core\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to dismiss a parenting rich tooltip.\r\n * @tag m3e-rich-tooltip-action\r\n *\r\n * @slot - Renders the content of the action.\r\n *\r\n * @attr disable-restore-focus - Whether to focus should not be restored to the trigger when activated.\r\n */\r\n@customElement(\"m3e-rich-tooltip-action\")\r\nexport class M3eRichTooltipActionElement extends ActionElementBase {\r\n  /** Whether to focus should not be restored to the trigger when activated. */\r\n  @property({ attribute: \"disable-restore-focus\", type: Boolean }) disableRestoreFocus = false;\r\n\r\n  /** @inheritdoc */\r\n  protected override _onClick(): void {\r\n    this.closest(\"m3e-rich-tooltip\")?.hide(!this.disableRestoreFocus);\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-rich-tooltip-action\": M3eRichTooltipActionElement;\r\n  }\r\n}\r\n","import { LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  HoverController,\r\n  HtmlFor,\r\n  isDisabledMixin,\r\n  LongPressController,\r\n  ReconnectedCallback,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3ePlatform } from \"@m3e/web/core/platform\";\r\nimport { AnchorPosition, positionAnchor } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { TooltipTouchGestures } from \"./TooltipTouchGestures\";\r\n\r\n/** The space, in pixels, between the tooltip and anchor. */\r\nconst TOOLTIP_OFFSET = 4;\r\n\r\n/** The default time, in milliseconds, before hiding a tooltip. */\r\nconst TOOLTIP_HIDE_DELAY = 200;\r\n\r\n/** Provides a base implementation for a tooltip. This class must be inherited. */\r\nexport abstract class TooltipElementBase extends HtmlFor(ReconnectedCallback(AttachInternals(LitElement))) {\r\n  /** @private */ private static __openTooltips = new Array<TooltipElementBase>();\r\n\r\n  /** @internal */ @query(\".base\") protected readonly _base!: HTMLElement;\r\n  /** @private */ #for: HTMLElement | null = null;\r\n  /** @private */ #anchorCleanup?: () => void;\r\n  /** @private */ #tooltipHovering = false;\r\n\r\n  /** @private */ readonly #controlClickHandler = () => this.#handleControlClick();\r\n\r\n  /** @private */\r\n  readonly #hoverController = new HoverController(this, {\r\n    target: null,\r\n    endDelay: TOOLTIP_HIDE_DELAY,\r\n    callback: (hovering, target) => {\r\n      if (this._isInteractive) return;\r\n      if (hovering) {\r\n        if (target === this._base) {\r\n          this.#tooltipHovering = true;\r\n          return;\r\n        }\r\n        this.show();\r\n      } else if (!this.#tooltipHovering || target === this._base) {\r\n        this.#tooltipHovering = false;\r\n        this.hide();\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */\r\n  readonly #longPressController = new LongPressController(this, {\r\n    target: null,\r\n    callback: (pressed) => {\r\n      if (this._isInteractive) return;\r\n      if (pressed) {\r\n        this.show();\r\n      } else {\r\n        this.hide();\r\n      }\r\n    },\r\n  });\r\n\r\n  /**\r\n   * Whether the element is disabled.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) disabled = false;\r\n\r\n  /**\r\n   * The amount of time, in milliseconds, before showing the tooltip.\r\n   * @default 0\r\n   */\r\n  @property({ attribute: \"show-delay\", type: Number }) get showDelay(): number {\r\n    return this.#hoverController.startDelay;\r\n  }\r\n  set showDelay(value: number) {\r\n    this.#hoverController.startDelay = value;\r\n  }\r\n\r\n  /**\r\n   * The amount of time, in milliseconds, before hiding the tooltip.\r\n   * @default 200\r\n   */\r\n  @property({ attribute: \"hide-delay\", type: Number }) get hideDelay(): number {\r\n    return this.#hoverController.endDelay;\r\n  }\r\n  set hideDelay(value: number) {\r\n    this.#hoverController.endDelay = value;\r\n  }\r\n\r\n  /**\r\n   * The mode in which to handle touch gestures.\r\n   * @default \"auto\"\r\n   */\r\n  @property({ attribute: \"touch-gestures\" }) touchGestures: TooltipTouchGestures = \"auto\";\r\n\r\n  /** Whether the tooltip is currently open. */\r\n  get isOpen(): boolean {\r\n    return TooltipElementBase.__openTooltips.includes(this);\r\n  }\r\n\r\n  /**\r\n   * Whether the tooltip is interactive.\r\n   * @internal\r\n   */\r\n  protected get _isInteractive() {\r\n    return false;\r\n  }\r\n\r\n  /**\r\n   * The position in which to anchor the tooltip relative to its trigger.\r\n   * @internal\r\n   */\r\n  protected abstract get _anchorPosition(): AnchorPosition;\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    if (M3ePlatform.iOS || M3ePlatform.Android) {\r\n      this.#longPressController.observe(control);\r\n      this.#disableNativeGesturesIfNecessary();\r\n    } else {\r\n      this.#hoverController.observe(control);\r\n    }\r\n\r\n    control.addEventListener(\"click\", this.#controlClickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.control) {\r\n      this.#hoverController.unobserve(this.control);\r\n      this.#longPressController.unobserve(this.control);\r\n      this.control.removeEventListener(\"click\", this.#controlClickHandler);\r\n      this.hide();\r\n    }\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"disabled\") && this.disabled) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#initialize();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#initialize();\r\n  }\r\n\r\n  /** @private */\r\n  #initialize(): void {\r\n    if (this._base) {\r\n      this.#hoverController.observe(this._base);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Manually shows the tooltip.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the tooltip is shown.\r\n   */\r\n  async show(): Promise<void> {\r\n    if (!this.control || this.disabled || (isDisabledMixin(this.control) && this.control.disabled)) return;\r\n\r\n    TooltipElementBase.__openTooltips.filter((x) => x !== this).forEach((x) => x.hide());\r\n\r\n    this._base.showPopover();\r\n\r\n    this.#anchorCleanup = await positionAnchor(\r\n      this._base,\r\n      this.control,\r\n      {\r\n        position: this._anchorPosition,\r\n        inline: true,\r\n        flip: true,\r\n        shift: \"main\",\r\n        offset: TOOLTIP_OFFSET,\r\n      },\r\n      (x, y) => this._updatePosition(this._base, x, y),\r\n    );\r\n\r\n    if (!TooltipElementBase.__openTooltips.includes(this)) {\r\n      TooltipElementBase.__openTooltips.push(this);\r\n    }\r\n  }\r\n\r\n  /** Manually hides the tooltip. */\r\n  hide(): void {\r\n    this._base.hidePopover();\r\n    this.#anchorCleanup?.();\r\n    this.#anchorCleanup = undefined;\r\n    this.#hoverController.clearDelays();\r\n\r\n    if (TooltipElementBase.__openTooltips.includes(this)) {\r\n      TooltipElementBase.__openTooltips = TooltipElementBase.__openTooltips.filter((x) => x !== this);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Updates the position of the tooltip.\r\n   * @internal\r\n   * @param {HTMLElement} base The internal element of the tooltip to position.\r\n   * @param {number} x The x-coordinate, in pixels, to which to position `base`.\r\n   * @param {number} y The y-coordinate, in pixels, to which to position `base`.\r\n   */\r\n  protected abstract _updatePosition(base: HTMLElement, x: number, y: number): void;\r\n\r\n  /** @private */\r\n  #handleControlClick(): void {\r\n    if (this._isInteractive) {\r\n      if (TooltipElementBase.__openTooltips.includes(this)) {\r\n        this.hide();\r\n      } else {\r\n        this.show();\r\n      }\r\n    } else {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #disableNativeGesturesIfNecessary() {\r\n    if (this.touchGestures !== \"off\" && this.#for) {\r\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n      const style: any = this.#for.style;\r\n\r\n      // If gestures are set to `auto`, we don't disable text selection on inputs and\r\n      // textareas, because it prevents the user from typing into them on iOS Safari.\r\n\r\n      if (this.touchGestures === \"on\" || (this.#for.nodeName !== \"INPUT\" && this.#for.nodeName !== \"TEXTAREA\")) {\r\n        style.userSelect = style.msUserSelect = style.webkitUserSelect = style.MozUserSelect = \"none\";\r\n      }\r\n\r\n      // If we have `auto` gestures and the element uses native HTML dragging,\r\n      // we don't set `-webkit-user-drag` because it prevents the native behavior.\r\n\r\n      if (this.touchGestures === \"on\" || !this.#for.draggable) {\r\n        style.webkitUserDrag = \"none\";\r\n      }\r\n\r\n      style.touchAction = \"none\";\r\n      style.webkitTapHighlightColor = \"transparent\";\r\n    }\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport { customElement, DesignToken, getTextContent, hasAssignedNodes } from \"@m3e/web/core\";\r\nimport { M3eAriaDescriber, M3eInteractivityChecker } from \"@m3e/web/core/a11y\";\r\nimport { AnchorPosition } from \"@m3e/web/core/anchoring\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { RichTooltipPosition } from \"./RichTooltipPosition\";\r\nimport { TooltipElementBase } from \"./TooltipElementBase\";\r\n\r\n/**\r\n * Provides contextual details for a control, such as explaining the value or purpose of a feature.\r\n *\r\n * @description\r\n * The `m3e-rich-tooltip` component provides contextual guidance for a control. It supports an optional\r\n * subhead, multi-line supporting text, and optional action elements. When non‑interactive, it behaves\r\n * as a standard tooltip and contributes an `aria-describedby` message to its control. When interactive,\r\n * it becomes a lightweight anchored dialog with manual popover behavior, keyboard dismissal, and\r\n * click‑outside light‑dismiss.\r\n *\r\n * @example\r\n * The following example illustrates connecting an interactive rich tooltip to a button using the `for` attribute.\r\n * ```html\r\n * <m3e-icon-button id=\"btnSettings\">\r\n *  <m3e-icon name=\"settings\"></m3e-icon>\r\n * </m3e-icon-button>\r\n * <m3e-rich-tooltip for=\"btnSettings\">\r\n *  <span slot=\"subhead\">New settings available</span>\r\n *  Now you can adjust the uploaded image quality, and upgrade your available storage space.\r\n *  <div slot=\"actions\">\r\n *    <m3e-button>\r\n *      <m3e-rich-tooltip-action>Learn more</m3e-rich-tooltip-action>\r\n *    </m3e-button>\r\n *  </div>\r\n * </m3e-rich-tooltip>\r\n * ```\r\n *\r\n * @tag m3e-rich-tooltip\r\n *\r\n * @slot - The main supporting text of the tooltip.\r\n * @slot subhead - Optional subhead text displayed above the supporting content.\r\n * @slot actions - Optional action elements displayed at the bottom of the tooltip.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr for - The identifier of the interactive control to which this element is attached.\r\n * @attr hide-delay - The amount of time, in milliseconds, before hiding the tooltip.\r\n * @attr position - The position of the tooltip.\r\n * @attr show-delay - The amount of time, in milliseconds, before showing the tooltip.\r\n *\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-rich-tooltip-padding-top - Top padding of the tooltip container.\r\n * @cssprop --m3e-rich-tooltip-padding-bottom - Bottom padding of the tooltip container (when no actions are present).\r\n * @cssprop --m3e-rich-tooltip-padding-inline - Horizontal padding of the tooltip container.\r\n * @cssprop --m3e-rich-tooltip-max-width - Maximum width of the tooltip surface.\r\n * @cssprop --m3e-rich-tooltip-shape - Border‑radius of the tooltip container.\r\n * @cssprop --m3e-rich-tooltip-container-color - Background color of the tooltip surface.\r\n * @cssprop --m3e-rich-tooltip-subhead-color - Color of the subhead text.\r\n * @cssprop --m3e-rich-tooltip-subhead-font-size - Font size of the subhead text.\r\n * @cssprop --m3e-rich-tooltip-subhead-font-weight - Font weight of the subhead text.\r\n * @cssprop --m3e-rich-tooltip-subhead-line-height - Line height of the subhead text.\r\n * @cssprop --m3e-rich-tooltip-subhead-tracking - Letter‑spacing of the subhead text.\r\n * @cssprop --m3e-rich-tooltip-subhead-bottom-space - Space below the subhead before the supporting text.\r\n * @cssprop --m3e-rich-tooltip-supporting-text-color - Color of the supporting text.\r\n * @cssprop --m3e-rich-tooltip-supporting-text-font-size - Font size of the supporting text.\r\n * @cssprop --m3e-rich-tooltip-supporting-text-font-weight - Font weight of the supporting text.\r\n * @cssprop --m3e-rich-tooltip-supporting-text-line-height - Line height of the supporting text.\r\n * @cssprop --m3e-rich-tooltip-supporting-text-tracking - Letter‑spacing of the supporting text.\r\n * @cssprop --m3e-rich-tooltip-actions-padding-inline - Horizontal padding applied to the actions slot area.\r\n * @cssprop --m3e-rich-tooltip-actions-top-space - Space above the actions slot.\r\n * @cssprop --m3e-rich-tooltip-actions-bottom-space - Space below the actions slot.\r\n */\r\n@customElement(\"m3e-rich-tooltip\")\r\nexport class M3eRichTooltipElement extends TooltipElementBase {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: contents;\r\n    }\r\n    .base {\r\n      flex-direction: column;\r\n      position: absolute;\r\n      padding: unset;\r\n      margin: unset;\r\n      border: unset;\r\n      padding-block-start: var(--m3e-rich-tooltip-padding-top, 0.75rem);\r\n      padding-inline: var(--m3e-rich-tooltip-padding-inline, 1rem);\r\n      max-width: var(--m3e-rich-tooltip-max-width, 20rem);\r\n      box-sizing: border-box;\r\n      overflow: visible;\r\n      border-radius: var(--m3e-rich-tooltip-shape, ${DesignToken.shape.corner.medium});\r\n      background-color: var(--m3e-rich-tooltip-container-color, ${DesignToken.color.surfaceContainer});\r\n      display: none;\r\n      opacity: 0;\r\n      transform: scale(0.8);\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n            transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},\r\n            overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n            display ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    .base:not(.has-actions) {\r\n      padding-block-end: var(--m3e-rich-tooltip-padding-bottom, 0.75rem);\r\n    }\r\n    .base::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    .base:popover-open {\r\n      display: flex;\r\n      opacity: 1;\r\n      transform: scale(1);\r\n    }\r\n    .base:not(.has-subhead) .subhead,\r\n    .base:not(.has-actions) .actions {\r\n      display: none;\r\n    }\r\n    .subhead {\r\n      color: var(--m3e-rich-tooltip-subhead-color, ${DesignToken.color.onSurfaceVariant});\r\n      font-size: var(--m3e-rich-tooltip-subhead-font-size, ${DesignToken.typescale.standard.title.small.fontSize});\r\n      font-weight: var(\r\n        --m3e-rich-tooltip-subhead-font-weight,\r\n        ${DesignToken.typescale.standard.title.small.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-rich-tooltip-subhead-line-height,\r\n        ${DesignToken.typescale.standard.title.small.lineHeight}\r\n      );\r\n      letter-spacing: var(--m3e-rich-tooltip-subhead-tracking, ${DesignToken.typescale.standard.title.small.tracking});\r\n      padding-block-end: var(--m3e-rich-tooltip-subhead-bottom-space, 0.25rem);\r\n    }\r\n    .content {\r\n      color: var(--m3e-rich-tooltip-supporting-text-color, ${DesignToken.color.onSurfaceVariant});\r\n      font-size: var(\r\n        --m3e-rich-tooltip-supporting-text-font-size,\r\n        ${DesignToken.typescale.standard.body.medium.fontSize}\r\n      );\r\n      font-weight: var(\r\n        --m3e-rich-tooltip-supporting-text-font-weight,\r\n        ${DesignToken.typescale.standard.body.medium.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-rich-tooltip-supporting-text-line-height,\r\n        ${DesignToken.typescale.standard.body.medium.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-rich-tooltip-supporting-text-tracking,\r\n        ${DesignToken.typescale.standard.body.medium.tracking}\r\n      );\r\n    }\r\n    .actions {\r\n      margin-inline: calc(\r\n        0px - calc(\r\n            var(--m3e-rich-tooltip-padding-inline, 1rem) - var(--m3e-rich-tooltip-actions-padding-inline, 0.25rem)\r\n          )\r\n      );\r\n      padding-block-start: var(--m3e-rich-tooltip-actions-top-space, 0.75rem);\r\n      padding-block-end: var(--m3e-rich-tooltip-actions-bottom-space, 0.5rem);\r\n    }\r\n    ::slotted([slot=\"actions\"]) {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      min-height: 1.5rem;\r\n      column-gap: 0.5rem;\r\n    }\r\n    ::slotted([slot=\"actions\"][end]) {\r\n      justify-content: flex-end;\r\n    }\r\n    @starting-style {\r\n      .base:popover-open {\r\n        opacity: 0;\r\n        transform: scale(0.8);\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base {\r\n        background-color: Canvas;\r\n        color: CanvasText;\r\n        box-sizing: border-box;\r\n        border: 1px solid CanvasText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ #id = M3eRichTooltipElement.__nextId++;\r\n  /** @private */ #subheadText = \"\";\r\n  /** @private */ #contentText = \"\";\r\n  /** @private */ #message = \"\";\r\n  /** @private */ #messageRegistered = false;\r\n\r\n  /** @private */ @state() private _hasSubhead = false;\r\n  /** @private */ @state() private _interactive = false;\r\n\r\n  /** @private */ readonly #documentClickHandler = (e: MouseEvent) => this.#handleDocumentClick(e);\r\n\r\n  /**\r\n   * The position of the tooltip.\r\n   * @default \"below-after\"\r\n   */\r\n  @property() position: RichTooltipPosition = \"below-after\";\r\n\r\n  /** @inheritdoc */\r\n  protected override get _isInteractive() {\r\n    return this._interactive;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override get _anchorPosition(): AnchorPosition {\r\n    switch (this.position) {\r\n      case \"above\":\r\n        return \"top\";\r\n      case \"above-after\":\r\n        return M3eDirectionality.current === \"rtl\" ? \"top-start\" : \"top-end\";\r\n      case \"above-before\":\r\n        return M3eDirectionality.current === \"rtl\" ? \"top-end\" : \"top-start\";\r\n      case \"after\":\r\n        return M3eDirectionality.current === \"rtl\" ? \"left\" : \"right\";\r\n      case \"before\":\r\n        return M3eDirectionality.current === \"rtl\" ? \"right\" : \"left\";\r\n      case \"below\":\r\n        return \"bottom\";\r\n      case \"below-after\":\r\n        return M3eDirectionality.current === \"rtl\" ? \"bottom-start\" : \"bottom-end\";\r\n      case \"below-before\":\r\n        return M3eDirectionality.current === \"rtl\" ? \"bottom-end\" : \"bottom-start\";\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    const subheadId = this._interactive && this._hasSubhead ? `m3e-rich-tooltip-${this.#id}-subhead` : undefined;\r\n    return html`<div\r\n      class=\"base\"\r\n      popover=\"manual\"\r\n      role=\"${ifDefined(this._interactive ? \"dialog\" : undefined)}\"\r\n      aria-labelledby=\"${ifDefined(subheadId)}\"\r\n      @keydown=\"${this.#handleKeyDown}\"\r\n      @beforetoggle=\"${this.#handleBeforeToggle}\"\r\n      @toggle=\"${this.#handleToggle}\"\r\n    >\r\n      <m3e-elevation level=\"3\"></m3e-elevation>\r\n      <div class=\"subhead\" id=\"${ifDefined(subheadId)}\">\r\n        <slot name=\"subhead\" @slotchange=\"${this.#handleSubheadSlotChange}\"></slot>\r\n      </div>\r\n      <div class=\"content\"><slot @slotchange=\"${this.#handleContentSlotChange}\"></slot></div>\r\n      <div class=\"actions\">\r\n        <slot name=\"actions\" @slotchange=\"${this.#handleActionsSlotChange}\"></slot>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override show(): Promise<void> {\r\n    if (this._interactive) {\r\n      document.addEventListener(\"click\", this.#documentClickHandler);\r\n    }\r\n\r\n    return super.show();\r\n  }\r\n\r\n  /**\r\n   * Manually hides the tooltip.\r\n   * @param [restoreFocus=true] Whether to restore focus to the element that triggered the interactive tooltip.\r\n   */\r\n  override hide(restoreFocus = true): void {\r\n    if (this._interactive) {\r\n      document.removeEventListener(\"click\", this.#documentClickHandler);\r\n    }\r\n\r\n    super.hide();\r\n\r\n    if (restoreFocus && this._interactive && this.control && M3eInteractivityChecker.isFocusable(this.control)) {\r\n      this.control.focus();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    this.#updateMessage();\r\n\r\n    if (this._interactive) {\r\n      control.ariaHasPopup = \"dialog\";\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"_interactive\")) {\r\n      this.ariaHidden = this._interactive ? null : \"true\";\r\n      this.#updateMessage();\r\n\r\n      if (this.control && this._interactive) {\r\n        this.control.ariaHasPopup = \"dialog\";\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override _updatePosition(base: HTMLElement, x: number, y: number): void {\r\n    if (this.position.includes(\"before\") && this.position !== \"before\") {\r\n      if (M3eDirectionality.current === \"rtl\") {\r\n        x += this.control?.clientWidth ?? 0;\r\n      } else {\r\n        x -= this.control?.clientWidth ?? 0;\r\n      }\r\n    }\r\n    if (this.position.includes(\"after\") && this.position !== \"after\") {\r\n      if (M3eDirectionality.current === \"rtl\") {\r\n        x -= this.control?.clientWidth ?? 0;\r\n      } else {\r\n        x += this.control?.clientWidth ?? 0;\r\n      }\r\n    }\r\n\r\n    if (M3eDirectionality.current === \"rtl\") {\r\n      base.style.right = `${window.innerWidth - x - base.clientWidth}px`;\r\n      base.style.left = \"\";\r\n    } else {\r\n      base.style.left = `${x}px`;\r\n      base.style.right = \"\";\r\n    }\r\n\r\n    base.style.top = `${y}px`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleBeforeToggle(e: ToggleEvent): void {\r\n    const forwarded = new ToggleEvent(\"beforetoggle\", {\r\n      oldState: e.oldState,\r\n      newState: e.newState,\r\n      bubbles: true,\r\n      composed: true,\r\n      cancelable: e.cancelable,\r\n    });\r\n\r\n    if (!this.dispatchEvent(forwarded)) {\r\n      e.preventDefault();\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleToggle(e: ToggleEvent): void {\r\n    const forwarded = new ToggleEvent(\"toggle\", {\r\n      oldState: e.oldState,\r\n      newState: e.newState,\r\n      bubbles: true,\r\n      composed: true,\r\n    });\r\n    this.dispatchEvent(forwarded);\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentClick(e: MouseEvent): void {\r\n    if (!e.composedPath().some((x) => x instanceof M3eRichTooltipElement || x === this.control)) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n      e.preventDefault();\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleSubheadSlotChange(e: Event): void {\r\n    this._hasSubhead = hasAssignedNodes(e.target as HTMLSlotElement);\r\n    this.shadowRoot?.querySelector(\".base\")?.classList.toggle(\"has-subhead\", this._hasSubhead);\r\n    this.#subheadText = this._hasSubhead ? getTextContent(e.target as HTMLSlotElement, true) : \"\";\r\n    this.#updateMessage();\r\n  }\r\n\r\n  /** @private */\r\n  #handleContentSlotChange(e: Event): void {\r\n    this._interactive = M3eInteractivityChecker.findInteractiveElements(this, true).length > 0;\r\n    this.#contentText = getTextContent(e.target as HTMLSlotElement, true);\r\n    this.#updateMessage();\r\n  }\r\n\r\n  /** @private */\r\n  #handleActionsSlotChange(e: Event): void {\r\n    this.shadowRoot\r\n      ?.querySelector(\".base\")\r\n      ?.classList.toggle(\"has-actions\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n\r\n    this._interactive = M3eInteractivityChecker.findInteractiveElements(this, true).length > 0;\r\n    this.#updateMessage();\r\n  }\r\n\r\n  /** @private */\r\n  #updateMessage() {\r\n    const message = this.#subheadText ? `${this.#subheadText}/n${this.#contentText}` : this.#contentText;\r\n    if (this.isConnected && this.control) {\r\n      if (this.#message && this.#messageRegistered) {\r\n        M3eAriaDescriber.removeDescription(this.control, this.#message);\r\n        this.#messageRegistered = false;\r\n      }\r\n\r\n      this.#message = message;\r\n\r\n      if (this.#message && !this._interactive) {\r\n        M3eAriaDescriber.describe(this.control, this.#message);\r\n        this.#messageRegistered = true;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eRichTooltipElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eRichTooltipElement {\r\n  addEventListener<K extends keyof M3eRichTooltipElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eRichTooltipElement, ev: M3eRichTooltipElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eRichTooltipElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eRichTooltipElement, ev: M3eRichTooltipElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-rich-tooltip\": M3eRichTooltipElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, getTextContent, setCustomState } from \"@m3e/web/core\";\r\nimport { M3eAriaDescriber } from \"@m3e/web/core/a11y\";\r\nimport { AnchorPosition } from \"@m3e/web/core/anchoring\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { TooltipPosition } from \"./TooltipPosition\";\r\nimport { TooltipElementBase } from \"./TooltipElementBase\";\r\n\r\n/**\r\n * Adds additional context to a button or other UI element.\r\n *\r\n * @description\r\n * The `m3e-tooltip` component provides contextual information in response to user interaction, enhancing comprehension\r\n * and reducing ambiguity. Tooltips are positioned relative to a target element and support configurable delays for\r\n * show and hide behavior. The component is designed to reinforce accessibility and usability, especially in dense or\r\n * icon-driven interfaces. Use the `for` attribute to designate the element for which to provide a tooltip.\r\n *\r\n * @example\r\n * The following example illustrates connecting a tooltip to a button using the `for` attribute.\r\n * ```html\r\n * <m3e-icon-button id=\"button\" aria-label=\"Back\">\r\n *  <m3e-icon name=\"arrow_back\"></m3e-icon>\r\n * </m3e-icon-button>\r\n * <m3e-tooltip for=\"button\">Go Back</m3e-tooltip>\r\n * ```\r\n *\r\n * @tag m3e-tooltip\r\n *\r\n * @slot - Renders the content of the tooltip.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr for - The identifier of the interactive control to which this element is attached.\r\n * @attr hide-delay - The amount of time, in milliseconds, before hiding the tooltip.\r\n * @attr position - The position of the tooltip.\r\n * @attr show-delay - The amount of time, in milliseconds, before showing the tooltip.\r\n *\r\n * @cssprop --m3e-tooltip-padding - Internal spacing of the tooltip container.\r\n * @cssprop --m3e-tooltip-min-width - Minimum width of the tooltip.\r\n * @cssprop --m3e-tooltip-max-width - Maximum width of the tooltip.\r\n * @cssprop --m3e-tooltip-min-height - Minimum height of the tooltip container.\r\n * @cssprop --m3e-tooltip-max-height - Maximum height of the tooltip.\r\n * @cssprop --m3e-tooltip-shape - Border radius of the tooltip container.\r\n * @cssprop --m3e-tooltip-container-color - Background color of the tooltip.\r\n * @cssprop --m3e-tooltip-supporting-text-color - Text color of supporting text.\r\n * @cssprop --m3e-tooltip-supporting-text-font-size - Font size of supporting text.\r\n * @cssprop --m3e-tooltip-supporting-text-font-weight - Font weight of supporting text.\r\n * @cssprop --m3e-tooltip-supporting-text-line-height - Line height of supporting text.\r\n * @cssprop --m3e-tooltip-supporting-text-tracking - Letter spacing of supporting text.\r\n */\r\n@customElement(\"m3e-tooltip\")\r\nexport class M3eTooltipElement extends TooltipElementBase {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: contents;\r\n    }\r\n    .base {\r\n      position: absolute;\r\n      pointer-events: none;\r\n      margin: unset;\r\n      border: unset;\r\n      word-break: normal;\r\n      overflow-wrap: break-word;\r\n      padding: var(--m3e-tooltip-padding, 0.25rem 0.5rem);\r\n      min-width: var(--m3e-tooltip-min-width, 2.5rem);\r\n      max-width: var(--m3e-tooltip-max-width, 12.5rem);\r\n      min-height: var(--m3e-tooltip-min-height, 1.5rem);\r\n      max-height: var(--m3e-tooltip-max-height, 40vh);\r\n      box-sizing: border-box;\r\n      overflow: hidden;\r\n      text-align: center;\r\n      border-radius: var(--m3e-tooltip-shape, ${DesignToken.shape.corner.extraSmall});\r\n      background-color: var(--m3e-tooltip-container-color, ${DesignToken.color.inverseSurface});\r\n      color: var(--m3e-tooltip-supporting-text-color, ${DesignToken.color.inverseOnSurface});\r\n      font-size: var(--m3e-tooltip-supporting-text-font-size, ${DesignToken.typescale.standard.body.small.fontSize});\r\n      font-weight: var(\r\n        --m3e-tooltip-supporting-text-font-weight,\r\n        ${DesignToken.typescale.standard.body.small.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-tooltip-supporting-text-line-height,\r\n        ${DesignToken.typescale.standard.body.small.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-tooltip-supporting-text-tracking,\r\n        ${DesignToken.typescale.standard.body.small.tracking}\r\n      );\r\n      display: none;\r\n      opacity: 0;\r\n      transform: scale(0.8);\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n        transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},\r\n        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        display ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host(:is(:state(--multiline), :--multiline)) .base {\r\n      text-align: start;\r\n    }\r\n    .base::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    .base:popover-open {\r\n      display: block;\r\n      opacity: 1;\r\n      transform: scale(1);\r\n    }\r\n    @starting-style {\r\n      .base:popover-open {\r\n        opacity: 0;\r\n        transform: scale(0.8);\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base {\r\n        background-color: Canvas;\r\n        color: CanvasText;\r\n        box-sizing: border-box;\r\n        border: 1px solid CanvasText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #message?: string | null;\r\n\r\n  /**\r\n   * The position of the tooltip.\r\n   * @default \"below\"\r\n   */\r\n  @property() position: TooltipPosition = \"below\";\r\n\r\n  /** @inheritdoc */\r\n  protected get _anchorPosition(): AnchorPosition {\r\n    return this.position === \"above\"\r\n      ? \"top\"\r\n      : this.position === \"below\"\r\n        ? \"bottom\"\r\n        : this.position === \"before\"\r\n          ? M3eDirectionality.current === \"ltr\"\r\n            ? \"left\"\r\n            : \"right\"\r\n          : M3eDirectionality.current === \"ltr\"\r\n            ? \"right\"\r\n            : \"left\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    if (this.#message) {\r\n      M3eAriaDescriber.describe(control, this.#message);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.control && this.#message) {\r\n      M3eAriaDescriber.removeDescription(this.control, this.#message);\r\n    }\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.ariaHidden = \"true\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\" popover=\"manual\" @toggle=\"${this.#handleToggle}\">\r\n      <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected _updatePosition(base: HTMLElement, x: number, y: number): void {\r\n    if (M3eDirectionality.current === \"rtl\") {\r\n      base.style.right = `${window.innerWidth - x - base.clientWidth}px`;\r\n      base.style.left = \"\";\r\n    } else {\r\n      base.style.left = `${x}px`;\r\n      base.style.right = \"\";\r\n    }\r\n    base.style.top = `${y}px`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    const message = getTextContent(e.target as HTMLSlotElement, true);\r\n    if (this.isConnected && this.control) {\r\n      if (this.#message) {\r\n        M3eAriaDescriber.removeDescription(this.control, this.#message);\r\n      }\r\n\r\n      this.#message = message;\r\n\r\n      if (this.#message) {\r\n        M3eAriaDescriber.describe(this.control, this.#message);\r\n      }\r\n    } else {\r\n      this.#message = message;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleToggle(e: ToggleEvent): void {\r\n    if (e.newState === \"open\") {\r\n      const multiline = this._base.getBoundingClientRect().height > parseFloat(getComputedStyle(this._base).minHeight);\r\n      setCustomState(this, \"--multiline\", multiline);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-tooltip\": M3eTooltipElement;\r\n  }\r\n}\r\n"],"names":["M3eRichTooltipActionElement","ActionElementBase","constructor","this","disableRestoreFocus","_onClick","closest","hide","__decorate","property","attribute","type","Boolean","prototype","customElement","TooltipElementBase","HtmlFor","ReconnectedCallback","AttachInternals","LitElement","_TooltipElementBase_for","set","_TooltipElementBase_anchorCleanup","_TooltipElementBase_tooltipHovering","_TooltipElementBase_controlClickHandler","__classPrivateFieldGet","_TooltipElementBase_instances","_TooltipElementBase_handleControlClick","call","_TooltipElementBase_hoverController","HoverController","target","endDelay","callback","hovering","_isInteractive","_base","__classPrivateFieldSet","show","_TooltipElementBase_longPressController","LongPressController","pressed","disabled","touchGestures","showDelay","startDelay","value","hideDelay","isOpen","_a","__openTooltips","includes","attach","control","super","M3ePlatform","iOS","Android","observe","_TooltipElementBase_disableNativeGesturesIfNecessary","addEventListener","detach","unobserve","removeEventListener","update","changedProperties","has","reconnectedCallback","_TooltipElementBase_initialize","firstUpdated","_changedProperties","isDisabledMixin","filter","x","forEach","showPopover","positionAnchor","position","_anchorPosition","inline","flip","shift","offset","y","_updatePosition","push","hidePopover","undefined","clearDelays","style","nodeName","userSelect","msUserSelect","webkitUserSelect","MozUserSelect","draggable","webkitUserDrag","touchAction","webkitTapHighlightColor","Array","query","reflect","Number","M3eRichTooltipElement","M3eRichTooltipElement_1","_M3eRichTooltipElement_id","__nextId","_M3eRichTooltipElement_subheadText","_M3eRichTooltipElement_contentText","_M3eRichTooltipElement_message","_M3eRichTooltipElement_messageRegistered","_hasSubhead","_interactive","_M3eRichTooltipElement_documentClickHandler","e","M3eDirectionality","current","render","subheadId","html","ifDefined","_M3eRichTooltipElement_instances","_M3eRichTooltipElement_handleKeyDown","_M3eRichTooltipElement_handleBeforeToggle","_M3eRichTooltipElement_handleToggle","_M3eRichTooltipElement_handleSubheadSlotChange","_M3eRichTooltipElement_handleContentSlotChange","_M3eRichTooltipElement_handleActionsSlotChange","document","restoreFocus","M3eInteractivityChecker","isFocusable","focus","_M3eRichTooltipElement_updateMessage","ariaHasPopup","ariaHidden","base","clientWidth","right","window","innerWidth","left","top","forwarded","ToggleEvent","oldState","newState","bubbles","composed","cancelable","dispatchEvent","preventDefault","composedPath","some","key","shiftKey","ctrlKey","hasAssignedNodes","shadowRoot","querySelector","classList","toggle","getTextContent","findInteractiveElements","length","message","isConnected","M3eAriaDescriber","removeDescription","describe","styles","css","DesignToken","shape","corner","medium","color","surfaceContainer","unsafeCSS","motion","duration","short3","easing","standard","onSurfaceVariant","typescale","title","small","fontSize","fontWeight","lineHeight","tracking","body","state","M3eTooltipElement","_M3eTooltipElement_message","connectedCallback","_M3eTooltipElement_instances","_M3eTooltipElement_handleToggle","_M3eTooltipElement_handleSlotChange","multiline","getBoundingClientRect","height","parseFloat","getComputedStyle","minHeight","setCustomState","extraSmall","inverseSurface","inverseOnSurface"],"mappings":"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"}

package/dist/tree.js

@@ -36,11 +36,11 @@ var M3eTreeItemElement_1;
  * @attr open - Whether the item is expanded.
  * @attr selected - Whether the item is selected.
  *
- * @fires opening - Emitted when the item begins to open.
- * @fires opened - Emitted when the item has opened.
- * @fires closing - Emitted when the item begins to close.
- * @fires closed - Emitted when the item has closed.
- * @fires click - Emitted when the element is clicked.
+ * @fires opening - Dispatched when the item begins to open.
+ * @fires opened - Dispatched when the item has opened.
+ * @fires closing - Dispatched when the item begins to close.
+ * @fires closed - Dispatched when the item has closed.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-tree-item-font-size - Font size for the item label.
  * @cssprop --m3e-tree-item-font-weight - Font weight for the item label.
@@ -231,10 +231,10 @@ _M3eTreeItemElement_renderIcon = function _M3eTreeItemElement_renderIcon() {
   return this.selected && !this.hasChildItems ? html`<slot name="selected-icon" @slotchange="${__classPrivateFieldGet(this, _M3eTreeItemElement_instances, "m", _M3eTreeItemElement_handleIconSlotChange)}">${icon}</slot>` : icon;
 };
 _M3eTreeItemElement_handleOpenToggleIconSlotChange = function _M3eTreeItemElement_handleOpenToggleIconSlotChange(e) {
-  setCustomState(this, "-with-open-toggle-icon", hasAssignedNodes(e.target));
+  setCustomState(this, "--with-open-toggle-icon", hasAssignedNodes(e.target));
 };
 _M3eTreeItemElement_handleIconSlotChange = function _M3eTreeItemElement_handleIconSlotChange(e) {
-  setCustomState(this, "-with-icon", hasAssignedNodes(e.target));
+  setCustomState(this, "--with-icon", hasAssignedNodes(e.target));
 };
 _M3eTreeItemElement_handleSlotChange = function _M3eTreeItemElement_handleSlotChange(e) {
   __classPrivateFieldSet(this, _M3eTreeItemElement_link, e.target.assignedElements({
@@ -248,7 +248,7 @@ _M3eTreeItemElement_handleItemSlotChange = function _M3eTreeItemElement_handleIt
   }).filter(x => x instanceof M3eTreeItemElement_1), "f");
   const hadChildItems = this._hasChildItems;
   this._hasChildItems = __classPrivateFieldGet(this, _M3eTreeItemElement_items, "f").length > 0;
-  setCustomState(this, "-with-items", this._hasChildItems);
+  setCustomState(this, "--with-items", this._hasChildItems);
   if (hadChildItems || this._hasChildItems) {
     if (this._multi && __classPrivateFieldGet(this, _M3eTreeItemElement_tree, "f")?.cascade) {
       let anySelected = false,
@@ -272,7 +272,7 @@ _M3eTreeItemElement_handleItemSlotChange = function _M3eTreeItemElement_handleIt
 };
 _M3eTreeItemElement_handleTreeChange = function _M3eTreeItemElement_handleTreeChange() {
   this._multi = __classPrivateFieldGet(this, _M3eTreeItemElement_tree, "f")?.multi === true;
-  setCustomState(this, "-multi", this._multi);
+  setCustomState(this, "--multi", this._multi);
 };
 _M3eTreeItemElement_handleClick = function _M3eTreeItemElement_handleClick() {
   if (this.disabled) return;
@@ -311,8 +311,8 @@ _M3eTreeItemElement_handleCollapsibleEvent = function _M3eTreeItemElement_handle
 };
 /** The styles of the element. */
 M3eTreeItemElement.styles = css`:host { display: block; flex: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: flex; align-items: center; position: relative; height: calc(var(--m3e-tree-item-height, 3rem) + ${DesignToken.density.calc(-3)}); padding-inline: var(--m3e-tree-item-padding, 1rem); font-size: var(--m3e-tree-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-tree-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-tree-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-tree-item-tracking, ${DesignToken.typescale.standard.label.large.tracking}); transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
-        background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .base, .focus-ring { border-radius: var(--m3e-tree-item-shape, ${DesignToken.shape.corner.none}); } .label { flex: 1 1 auto; display: flex; align-items: center; position: relative; overflow: hidden; vertical-align: middle; } .checkbox { flex: none; margin-inline-end: 0.5rem; } .icon, .toggle { flex: none; align-items: center; justify-content: center; position: relative; vertical-align: middle; margin-inline-end: 0.5rem; } .toggle { display: var(--_tree-item-toggle-display, none); } :host(:not(:state(-with-icon))) .icon { display: none; } .inset { margin-inline-start: calc(var(--m3e-tree-item-inset, 2rem) * var(--_tree-item-level, 0)); } :host([open]) .toggle-icon { transform: rotate(90deg); } :host(:not(:state(-with-items))) .toggle { visibility: hidden; } :host(:not(:state(-with-items))) .group { display: none; } ::slotted([slot="selected-icon"]), ::slotted([slot="icon"]), ::slotted([slot="toggle-icon"]), ::slotted([slot="open-toggle-icon"]), .toggle-icon { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-tree-item-icon-size, 1.5rem); } .toggle-icon { transition: ${unsafeCSS(`transform var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
-        ${DesignToken.motion.easing.standard}`)}; } :host(:state(-with-open-toggle-icon)[open]) slot[name="toggle-icon"], :host(:state(-with-open-toggle-icon):not([open])) slot[name="open-toggle-icon"] { display: none; } :host(:not(:disabled)) .base { cursor: pointer; } :host(:not(:disabled)) .base { color: var(--m3e-tree-item-label-color, ${DesignToken.color.onSurfaceVariant}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-tree-item-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-tree-item-disabled-color-opacity, 38%), transparent ); } :host([selected]:not(:disabled)) .base { color: var(--m3e-tree-item-selected-label-color, ${DesignToken.color.onSecondaryContainer}); background-color: var(--m3e-tree-item-selected-container-color, ${DesignToken.color.secondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-tree-item-selected-container-focus-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-tree-item-selected-container-hover-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-tree-item-selected-ripple-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not([selected]):not(:disabled)) .base { --m3e-state-layer-focus-color: var( --m3e-tree-item-unselected-container-focus-color, ${DesignToken.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-tree-item-unselected-container-hover-color, ${DesignToken.color.onSurface} ); --m3e-ripple-color: var(--m3e-tree-item-unselected-ripple-color, ${DesignToken.color.onSurface}); } .state-layer { margin-inline: auto; } ::slotted(a[slot="label"]) { all: unset; } @media (prefers-reduced-motion) { .base, .toggle, .state-layer { transition: none !important; } } @media (forced-colors: active) { .base, .state-layer { transition: none !important; } :host(:disabled) .base { color: GrayText; } :host(:not(:disabled)) .base { color: CanvasText; background-color: Canvas; } :host([selected]:not(:state(-multi)):not(:disabled)) slot[name="icon"], :host([selected]:not(:state(-multi)):not(:disabled)) slot[name="label"] { color: Highlight; } }`;
+        background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .base, .focus-ring { border-radius: var(--m3e-tree-item-shape, ${DesignToken.shape.corner.none}); } .label { flex: 1 1 auto; display: flex; align-items: center; position: relative; overflow: hidden; vertical-align: middle; } .checkbox { flex: none; margin-inline-end: 0.5rem; } .icon, .toggle { flex: none; align-items: center; justify-content: center; position: relative; vertical-align: middle; margin-inline-end: 0.5rem; } .toggle { display: var(--_tree-item-toggle-display, none); } :host(:not(:is(:state(--with-icon), :--with-icon))) .icon { display: none; } .inset { margin-inline-start: calc(var(--m3e-tree-item-inset, 2rem) * var(--_tree-item-level, 0)); } :host([open]) .toggle-icon { transform: rotate(90deg); } :host(:not(:is(:state(--with-items), :--with-items))) .toggle { visibility: hidden; } :host(:not(:is(:state(--with-items), :--with-items))) .group { display: none; } ::slotted([slot="selected-icon"]), ::slotted([slot="icon"]), ::slotted([slot="toggle-icon"]), ::slotted([slot="open-toggle-icon"]), .toggle-icon { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-tree-item-icon-size, 1.5rem); } .toggle-icon { transition: ${unsafeCSS(`transform var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
+        ${DesignToken.motion.easing.standard}`)}; } :host(:is(:state(--with-open-toggle-icon), :--with-open-toggle-icon)[open]) slot[name="toggle-icon"], :host(:is(:state(--with-open-toggle-icon), :--with-open-toggle-icon):not([open])) slot[name="open-toggle-icon"] { display: none; } :host(:not(:disabled)) .base { cursor: pointer; } :host(:not(:disabled)) .base { color: var(--m3e-tree-item-label-color, ${DesignToken.color.onSurfaceVariant}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-tree-item-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-tree-item-disabled-color-opacity, 38%), transparent ); } :host([selected]:not(:disabled)) .base { color: var(--m3e-tree-item-selected-label-color, ${DesignToken.color.onSecondaryContainer}); background-color: var(--m3e-tree-item-selected-container-color, ${DesignToken.color.secondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-tree-item-selected-container-focus-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-tree-item-selected-container-hover-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-tree-item-selected-ripple-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not([selected]):not(:disabled)) .base { --m3e-state-layer-focus-color: var( --m3e-tree-item-unselected-container-focus-color, ${DesignToken.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-tree-item-unselected-container-hover-color, ${DesignToken.color.onSurface} ); --m3e-ripple-color: var(--m3e-tree-item-unselected-ripple-color, ${DesignToken.color.onSurface}); } .state-layer { margin-inline: auto; } ::slotted(a[slot="label"]) { all: unset; } @media (prefers-reduced-motion) { .base, .toggle, .state-layer { transition: none !important; } } @media (forced-colors: active) { .base, .state-layer { transition: none !important; } :host(:disabled) .base { color: GrayText; } :host(:not(:disabled)) .base { color: CanvasText; background-color: Canvas; } :host([selected]:not(:is(:state(--multi), :--multi)):not(:disabled)) slot[name="icon"], :host([selected]:not(:is(:state(--multi), :--multi)):not(:disabled)) slot[name="label"] { color: Highlight; } }`;
 __decorate([query(".state-layer")], M3eTreeItemElement.prototype, "stateLayer", void 0);
 __decorate([query(".focus-ring")], M3eTreeItemElement.prototype, "focusRing", void 0);
 __decorate([query(".ripple")], M3eTreeItemElement.prototype, "ripple", void 0);
@@ -401,7 +401,7 @@ var M3eTreeElement_1;
  * @attr multi - Whether multiple items can be selected.
  * @attr cascade -Whether multiple item selection cascades to child items.
  *
- * @fires change - Emitted when the selected state changes.
+ * @fires change - Dispatched when the selected state changes.
  *
  * @cssprop --m3e-tree-scrollbar-width - Width of the tree scrollbar.
  * @cssprop --m3e-tree-scrollbar-color - Color of the tree scrollbar.
@@ -715,7 +715,7 @@ _M3eTreeElement_cascadeAncestorSelected = function _M3eTreeElement_cascadeAncest
 };
 (() => {
   // NOTE: unsafeCSS used here due to linting error with use of '>'.
-  registerStyleSheet(css`${unsafeCSS(`m3e-tree:has(> m3e-tree-item:state(-with-items)) {
+  registerStyleSheet(css`${unsafeCSS(`m3e-tree:has(> m3e-tree-item:is(:state(--with-items), :--with-items)) {
         --_tree-item-toggle-display: flex;
       }`)}`);
 })();