@m3e/web 2.5.12 → 2.5.13

package/dist/fab-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"fab-menu.js","sources":["../../src/fab-menu/FabMenuItemElement.ts","../../src/fab-menu/FabMenuElement.ts","../../src/fab-menu/FabMenuTriggerElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  KeyboardClick,\r\n  LinkButton,\r\n  M3eElevationElement,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  renderPseudoLink,\r\n  Role,\r\n} from \"@m3e/web/core\";\r\n\r\nimport type { M3eFabMenuElement } from \"./FabMenuElement\";\r\n\r\n/**\r\n * An item of a floating action button (FAB) menu.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-menu-item\r\n *\r\n * @slot - Renders the label of the item.\r\n * @slot icon - Renders an icon before the items's label.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.\r\n * @attr href - The URL to which the link button points.\r\n * @attr rel - The relationship between the `target` of the link button and the document.\r\n * @attr target - The target of the link button.\r\n *\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-fab-menu-item-height - Height of the menu item.\r\n * @cssprop --m3e-fab-menu-item-font-size - Font size of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-font-weight - Font weight of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-line-height - Line height of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-tracking - Letter spacing of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-shape - Border radius of the menu item.\r\n * @cssprop --m3e-fab-menu-item-leading-space - Padding at the start of the menu item.\r\n * @cssprop --m3e-fab-menu-item-trailing-space - Padding at the end of the menu item.\r\n * @cssprop --m3e-fab-menu-item-spacing - Gap between icon and label.\r\n * @cssprop --m3e-fab-menu-item-icon-size - Size of the icon in the menu item.\r\n */\r\n@customElement(\"m3e-fab-menu-item\")\r\nexport class M3eFabMenuItemElement extends KeyboardClick(\r\n  LinkButton(Disabled(AttachInternals(Role(LitElement, \"menuitem\"), true))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      outline: none;\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n      height: var(--m3e-fab-menu-item-height, 3.5rem);\r\n      font-size: var(--m3e-fab-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-fab-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-fab-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-fab-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      border-radius: var(--m3e-fab-menu-item-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    :host(:not(:disabled)) .label,\r\n    :host(:not(:disabled)) .icon {\r\n      color: var(--_fab-menu-item-color);\r\n    }\r\n    :host(:not(:disabled)) .base {\r\n      background-color: var(--_fab-menu-item-container-color);\r\n      --m3e-state-layer-hover-color: var(--_fab-menu-background-hover-color);\r\n      --m3e-state-layer-focus-color: var(--_fab-menu-background-focus-color);\r\n      --m3e-ripple-color: var(--_fab-menu-ripple-color);\r\n    }\r\n    :host(:disabled) .base {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-fab-menu-item-disabled-container-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-fab-menu-item-disabled-container-opacity, 10%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:disabled) .label,\r\n    :host(:disabled) .icon {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-fab-menu-item-disabled-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-fab-menu-item-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .wrapper {\r\n      width: 100%;\r\n      overflow: hidden;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      padding-inline-start: var(--m3e-fab-menu-item-leading-space, 1.5rem);\r\n      padding-inline-end: var(--m3e-fab-menu-item-trailing-space, 1.5rem);\r\n      column-gap: var(--m3e-fab-menu-item-spacing, 0.5rem);\r\n    }\r\n    .label {\r\n      justify-self: center;\r\n      flex: 1 1 auto;\r\n      text-align: center;\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    .icon {\r\n      font-size: var(--m3e-fab-menu-item-icon-size, 1.5rem);\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    ::slotted([slot=\"icon\"]) {\r\n      font-size: inherit !important;\r\n      flex: none;\r\n    }\r\n    ::slotted(svg[slot=\"icon\"]) {\r\n      width: 1em;\r\n      height: 1em;\r\n    }\r\n    a {\r\n      all: unset;\r\n      display: block;\r\n      position: absolute;\r\n      top: 0px;\r\n      left: 0px;\r\n      right: 0px;\r\n      bottom: 0px;\r\n      z-index: 1;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base,\r\n      .label,\r\n      .icon {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base,\r\n      .label,\r\n      .icon {\r\n        transition: none;\r\n      }\r\n      :host(:not(:disabled)) .base {\r\n        background-color: Menu;\r\n      }\r\n      :host(:not(:disabled)) .label,\r\n      :host(:not(:disabled)) .icon {\r\n        color: MenuText;\r\n      }\r\n      :host(:disabled) .label,\r\n      :host(:disabled) .icon {\r\n        color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".elevation\") private readonly _elevation?: M3eElevationElement;\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** The floating action button (FAB) menu to which this item belongs. */\r\n  get menu(): M3eFabMenuElement | null {\r\n    return this.closest(\"m3e-fab-menu\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-elevation class=\"elevation\" ?disabled=\"${this.disabled}\"></m3e-elevation>\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      ${this[renderPseudoLink]()}\r\n      <div class=\"wrapper\">\r\n        <slot class=\"icon\" name=\"icon\" aria-hidden=\"true\"></slot>\r\n        <div class=\"label\"><slot></slot></div>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (!e.defaultPrevented) {\r\n      this.menu?.hide(true);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-fab-menu-item\": M3eFabMenuItemElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  DisabledMixin,\r\n  Role,\r\n  ScrollController,\r\n  setCustomState,\r\n  SuppressInitialAnimation,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { RovingTabIndexManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { M3eFabElement } from \"@m3e/web/fab\";\r\n\r\nimport { FabMenuVariant } from \"./FabMenuVariant\";\r\nimport { M3eFabMenuItemElement } from \"./FabMenuItemElement\";\r\n\r\n/**\r\n * A menu, opened from a floating action button (FAB), used to display multiple related actions.\r\n *\r\n * @description\r\n * The `m3e-fab-menu` component presents a dynamic menu of related actions, elegantly revealed from a\r\n * floating action button (FAB). Designed using expressive, adaptive surfaces, it enables seamless access\r\n * to contextual actions in modern, visually rich interfaces.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-fab-menu\r\n *\r\n * @slot - Renders the contents of the menu.\r\n *\r\n * @attr variant - The appearance variant of the menu.\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-fab-menu-spacing - Vertical gap between menu items.\r\n * @cssprop --m3e-fab-menu-max-width - Maximum width of the menu.\r\n * @cssprop --m3e-primary-fab-color - Foreground color for primary variant items.\r\n * @cssprop --m3e-primary-fab-container-color - Container color for primary variant items.\r\n * @cssprop --m3e-primary-fab-hover-color - Hover background color for primary variant items.\r\n * @cssprop --m3e-primary-fab-focus-color - Focus background color for primary variant items.\r\n * @cssprop --m3e-primary-fab-ripple-color - Ripple color for primary variant items.\r\n * @cssprop --m3e-secondary-fab-color - Foreground color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-container-color - Container color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-hover-color - Hover background color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-focus-color - Focus background color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-ripple-color - Ripple color for secondary variant items.\r\n * @cssprop --m3e-tertiary-fab-color - Foreground color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-container-color - Container color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-hover-color - Hover background color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-focus-color - Focus background color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-ripple-color - Ripple color for tertiary variant items.\r\n */\r\n@customElement(\"m3e-fab-menu\")\r\nexport class M3eFabMenuElement extends SuppressInitialAnimation(AttachInternals(Role(LitElement, \"menu\"))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      position: absolute;\r\n      flex-direction: column;\r\n      row-gap: var(--m3e-fab-menu-spacing, 0.25rem);\r\n      padding: unset;\r\n      margin: unset;\r\n      border: unset;\r\n      overflow: visible;\r\n      max-width: var(--m3e-fab-menu-max-width, 17.5rem);\r\n      opacity: 0;\r\n      background-color: transparent;\r\n      display: none;\r\n    }\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.spring.fastEffects}, \r\n        transform ${DesignToken.motion.spring.fastSpatial},\r\n        overlay ${DesignToken.motion.spring.fastEffects} allow-discrete,\r\n        display ${DesignToken.motion.spring.fastEffects} allow-discrete`,\r\n      )};\r\n    }\r\n    .base {\r\n      display: contents;\r\n    }\r\n    :host([variant=\"primary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-primary-fab-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-item-container-color: var(--m3e-primary-fab-container-color, ${DesignToken.color.primaryContainer});\r\n      --_fab-menu-background-hover-color: var(--m3e-primary-fab-hover-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-background-focus-color: var(--m3e-primary-fab-focus-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-ripple-color: var(--m3e-primary-fab-ripple-color, ${DesignToken.color.onPrimaryContainer});\r\n    }\r\n    :host([variant=\"secondary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-secondary-fab-color, ${DesignToken.color.onSecondaryContainer});\r\n      --_fab-menu-item-container-color: var(\r\n        --m3e-secondary-fab-container-color,\r\n        ${DesignToken.color.secondaryContainer}\r\n      );\r\n      --_fab-menu-background-hover-color: var(\r\n        --m3e-secondary-fab-hover-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --_fab-menu-background-focus-color: var(\r\n        --m3e-secondary-fab-focus-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --_fab-menu-ripple-color: var(--m3e-secondary-fab-ripple-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([variant=\"tertiary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-tertiary-fab-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-item-container-color: var(--m3e-tertiary-fab-container-color, ${DesignToken.color.tertiaryContainer});\r\n      --_fab-menu-background-hover-color: var(--m3e-tertiary-fab-hover-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-background-focus-color: var(--m3e-tertiary-fab-focus-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-ripple-color: var(--m3e-tertiary-fab-ripple-color, ${DesignToken.color.onTertiaryContainer});\r\n    }\r\n    :host {\r\n      transform: scaleX(0.8);\r\n    }\r\n    :host(:is(:state(--left), :--left)) {\r\n      align-items: flex-start;\r\n      transform-origin: left;\r\n    }\r\n    :host(:is(:state(--right), :--right)) {\r\n      align-items: flex-end;\r\n      transform-origin: right;\r\n    }\r\n    :host(:popover-open) {\r\n      transform: scaleX(1);\r\n      display: inline-flex;\r\n      opacity: 1;\r\n    }\r\n    :host::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    @starting-style {\r\n      :host(:popover-open) {\r\n        opacity: 0;\r\n      }\r\n      :host(:popover-open) {\r\n        transform: scaleX(0.8);\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host {\r\n        border-radius: ${DesignToken.shape.corner.medium};\r\n        outline: 1px solid MenuText;\r\n        background-color: Menu;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #fabTabIndex?: number;\r\n  /** @private */ #trigger?: HTMLElement;\r\n  /** @private */ #anchoringCleanup?: () => void;\r\n\r\n  /** @private */\r\n  readonly #listManager = new RovingTabIndexManager<LitElement & DisabledMixin>()\r\n    .withWrap()\r\n    .withHomeAndEnd()\r\n    .withVerticalOrientation();\r\n\r\n  /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n  /** @private */ readonly #documentClickHandler = (e: MouseEvent) => this.#handleDocumentClick(e);\r\n\r\n  /** @private */\r\n  readonly #scrollController = new ScrollController(this, { target: null, callback: () => this.hide() });\r\n\r\n  /** @private */\r\n  readonly #toggleHandler = (e: ToggleEvent) => {\r\n    if (e.newState === \"closed\") {\r\n      this.#anchoringCleanup?.();\r\n      this.#anchoringCleanup = undefined;\r\n    } else {\r\n      setTimeout(() => {\r\n        this.#listManager.setActiveItem(this.#listManager.items.find((x) => !x.disabled));\r\n      }, 40);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * The appearance variant of the menu.\r\n   * @default \"primary\"\r\n   */\r\n  @property({ reflect: true }) variant: FabMenuVariant = \"primary\";\r\n\r\n  /** Whether the menu is open. */\r\n  get isOpen() {\r\n    return this.#trigger !== undefined;\r\n  }\r\n\r\n  /**\r\n   * Opens the menu.\r\n   * @param {HTMLElement} trigger The element that triggered the menu.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened.\r\n   */\r\n  async show(trigger: HTMLElement): Promise<void> {\r\n    if (this.#trigger && this.#trigger !== trigger) {\r\n      this.hide();\r\n    }\r\n\r\n    this.#anchoringCleanup?.();\r\n    this.#anchoringCleanup = await positionAnchor(\r\n      this,\r\n      trigger,\r\n      {\r\n        position: \"top-end\",\r\n        inline: true,\r\n        shift: \"main\",\r\n        flip: true,\r\n        offset: 8,\r\n      },\r\n      (x, y, position) => {\r\n        setCustomState(this, \"--right\", position.includes(\"end\"));\r\n        setCustomState(this, \"--left\", position.includes(\"start\"));\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          this.style.right = `${window.innerWidth - x - this.clientWidth}px`;\r\n          this.style.left = \"\";\r\n        } else {\r\n          this.style.left = `${x}px`;\r\n          this.style.right = \"\";\r\n        }\r\n        this.style.top = `${y}px`;\r\n      },\r\n    );\r\n\r\n    this.showPopover();\r\n\r\n    this.#trigger = trigger;\r\n    this.#trigger.ariaExpanded = \"true\";\r\n    this.#scrollController.observe(this.#trigger);\r\n\r\n    this.#attachFab();\r\n  }\r\n\r\n  /**\r\n   * Hides the menu.\r\n   * @param {boolean} [restoreFocus=false] A value indicating whether to restore focus to the menu's trigger.\r\n   */\r\n  hide(restoreFocus: boolean = false): void {\r\n    this.#anchoringCleanup?.();\r\n    this.#anchoringCleanup = undefined;\r\n\r\n    if (this.#trigger) {\r\n      this.#trigger.ariaExpanded = \"false\";\r\n      if (restoreFocus) {\r\n        this.#trigger.focus();\r\n      }\r\n\r\n      this.#detachFab();\r\n\r\n      this.#scrollController.unobserve(this.#trigger);\r\n      this.#trigger = undefined;\r\n    }\r\n    this.hidePopover();\r\n  }\r\n\r\n  /**\r\n   * Toggles the menu.\r\n   * @param {HTMLElement} trigger The element that triggered the menu.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened or closed.\r\n   */\r\n  async toggle(trigger: HTMLElement): Promise<void> {\r\n    if (this.#trigger) {\r\n      this.hide();\r\n    } else {\r\n      await this.show(trigger);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.tabIndex = -1;\r\n    this.setAttribute(\"popover\", \"manual\");\r\n    this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.addEventListener(\"toggle\", this.#toggleHandler);\r\n    document.addEventListener(\"click\", this.#documentClickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.removeEventListener(\"toggle\", this.#toggleHandler);\r\n    document.removeEventListener(\"click\", this.#documentClickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\"><slot @slotchange=\"${this.#handleSlotChange}\"></slot></div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    const { added } = this.#listManager.setItems([...this.querySelectorAll(\"m3e-fab-menu-item\")]);\r\n    if (!this.#listManager.activeItem) {\r\n      this.#listManager.updateActiveItem(added.find((x) => !x.disabled));\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    switch (e.key) {\r\n      case \"Tab\":\r\n        this.hide();\r\n        break;\r\n\r\n      case \"Escape\":\r\n        if (!e.shiftKey && !e.ctrlKey) {\r\n          this.hide(true);\r\n        }\r\n        break;\r\n\r\n      default:\r\n        this.#listManager.onKeyDown(e);\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentClick(e: MouseEvent): void {\r\n    if (!e.composedPath().some((x) => x instanceof M3eFabMenuItemElement || x === this.#trigger)) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #attachFab(): void {\r\n    const fab = this.#trigger?.closest<M3eFabElement>(\"m3e-fab\");\r\n    if (fab) {\r\n      this.#fabTabIndex = fab.tabIndex;\r\n      fab.addEventListener(\"keydown\", this.#keyDownHandler);\r\n      this.#listManager.setItems([...this.#listManager.items, fab]);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #detachFab(): void {\r\n    const fab = this.#trigger?.closest<M3eFabElement>(\"m3e-fab\");\r\n    if (fab) {\r\n      if (this.#fabTabIndex !== undefined) {\r\n        fab.tabIndex = this.#fabTabIndex;\r\n      }\r\n      fab.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n      this.#listManager.setItems([...this.#listManager.items.filter((x) => x !== fab)]);\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eFabMenuElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eFabMenuElement {\r\n  addEventListener<K extends keyof M3eFabMenuElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eFabMenuElement, ev: M3eFabMenuElementEventMap[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 M3eFabMenuElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eFabMenuElement, ev: M3eFabMenuElementEventMap[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-fab-menu\": M3eFabMenuElement;\r\n  }\r\n}\r\n","import { ActionElementBase, customElement, HtmlFor } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eFabMenuElement } from \"./FabMenuElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to open a floating action button (FAB) menu.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-fab-menu-trigger\r\n */\r\n@customElement(\"m3e-fab-menu-trigger\")\r\nexport class M3eFabMenuTriggerElement extends HtmlFor(ActionElementBase) {\r\n  /** The menu triggered by the element. */\r\n  get menu(): M3eFabMenuElement | null {\r\n    return this.control instanceof M3eFabMenuElement ? this.control : null;\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.parentElement && control instanceof M3eFabMenuElement) {\r\n      this.parentElement.ariaHasPopup = \"menu\";\r\n      this.parentElement.ariaExpanded = \"false\";\r\n      if (control.id) {\r\n        addAriaReferencedId(this.parentElement, \"aria-controls\", control.id);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = null;\r\n      this.parentElement.ariaExpanded = null;\r\n      if (this.control?.id) {\r\n        removeAriaReferencedId(this.parentElement, \"aria-controls\", this.control.id);\r\n      }\r\n    }\r\n\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    if (this.parentElement) {\r\n      this.menu?.toggle(this.parentElement);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-fab-menu-trigger\": M3eFabMenuTriggerElement;\r\n  }\r\n}\r\n"],"names":["M3eFabMenuItemElement","KeyboardClick","LinkButton","Disabled","AttachInternals","Role","LitElement","constructor","_M3eFabMenuItemElement_clickHandler","set","e","__classPrivateFieldGet","call","menu","closest","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_elevation","_focusRing","_stateLayer","_ripple","forEach","x","attach","render","html","disabled","renderPseudoLink","defaultPrevented","hide","styles","css","unsafeCSS","DesignToken","motion","duration","short4","easing","standard","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","shape","corner","full","color","onSurface","__decorate","query","prototype","customElement","M3eFabMenuElement","SuppressInitialAnimation","_M3eFabMenuElement_fabTabIndex","_M3eFabMenuElement_trigger","_M3eFabMenuElement_anchoringCleanup","_M3eFabMenuElement_listManager","RovingTabIndexManager","withWrap","withHomeAndEnd","withVerticalOrientation","_M3eFabMenuElement_keyDownHandler","_M3eFabMenuElement_documentClickHandler","_M3eFabMenuElement_scrollController","ScrollController","target","callback","_M3eFabMenuElement_toggleHandler","newState","__classPrivateFieldSet","undefined","setTimeout","setActiveItem","items","find","variant","isOpen","show","trigger","positionAnchor","position","inline","shift","flip","offset","y","setCustomState","includes","M3eDirectionality","current","style","right","window","innerWidth","clientWidth","left","top","showPopover","ariaExpanded","observe","_M3eFabMenuElement_instances","_M3eFabMenuElement_attachFab","restoreFocus","focus","_M3eFabMenuElement_detachFab","unobserve","hidePopover","toggle","tabIndex","setAttribute","document","_M3eFabMenuElement_handleSlotChange","added","setItems","querySelectorAll","activeItem","updateActiveItem","key","shiftKey","ctrlKey","onKeyDown","composedPath","some","fab","filter","spring","fastEffects","fastSpatial","onPrimaryContainer","primaryContainer","onSecondaryContainer","secondaryContainer","onTertiaryContainer","tertiaryContainer","medium","property","reflect","M3eFabMenuTriggerElement","HtmlFor","ActionElementBase","control","parentElement","ariaHasPopup","id","addAriaReferencedId","detach","removeAriaReferencedId","_onClick"],"mappings":"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"}
+{"version":3,"file":"fab-menu.js","sources":["../../src/fab-menu/FabMenuElement.ts","../../src/fab-menu/FabMenuItemElement.ts","../../src/fab-menu/FabMenuTriggerElement.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  ClickOutsideController,\r\n  customElement,\r\n  DesignToken,\r\n  DisabledMixin,\r\n  Role,\r\n  ScrollController,\r\n  setCustomState,\r\n  SuppressInitialAnimation,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { RovingTabIndexManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { M3eFabElement } from \"@m3e/web/fab\";\r\n\r\nimport { FabMenuVariant } from \"./FabMenuVariant\";\r\n\r\n/**\r\n * A menu, opened from a floating action button (FAB), used to display multiple related actions.\r\n *\r\n * @description\r\n * The `m3e-fab-menu` component presents a dynamic menu of related actions, elegantly revealed from a\r\n * floating action button (FAB). Designed using expressive, adaptive surfaces, it enables seamless access\r\n * to contextual actions in modern, visually rich interfaces.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-fab-menu\r\n *\r\n * @slot - Renders the contents of the menu.\r\n *\r\n * @attr variant - The appearance variant of the menu.\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-fab-menu-spacing - Vertical gap between menu items.\r\n * @cssprop --m3e-fab-menu-max-width - Maximum width of the menu.\r\n * @cssprop --m3e-primary-fab-color - Foreground color for primary variant items.\r\n * @cssprop --m3e-primary-fab-container-color - Container color for primary variant items.\r\n * @cssprop --m3e-primary-fab-hover-color - Hover background color for primary variant items.\r\n * @cssprop --m3e-primary-fab-focus-color - Focus background color for primary variant items.\r\n * @cssprop --m3e-primary-fab-ripple-color - Ripple color for primary variant items.\r\n * @cssprop --m3e-secondary-fab-color - Foreground color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-container-color - Container color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-hover-color - Hover background color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-focus-color - Focus background color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-ripple-color - Ripple color for secondary variant items.\r\n * @cssprop --m3e-tertiary-fab-color - Foreground color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-container-color - Container color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-hover-color - Hover background color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-focus-color - Focus background color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-ripple-color - Ripple color for tertiary variant items.\r\n */\r\n@customElement(\"m3e-fab-menu\")\r\nexport class M3eFabMenuElement extends SuppressInitialAnimation(AttachInternals(Role(LitElement, \"menu\"))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      position: absolute;\r\n      flex-direction: column;\r\n      row-gap: var(--m3e-fab-menu-spacing, 0.25rem);\r\n      padding: unset;\r\n      margin: unset;\r\n      border: unset;\r\n      overflow: visible;\r\n      max-width: var(--m3e-fab-menu-max-width, 17.5rem);\r\n      opacity: 0;\r\n      background-color: transparent;\r\n      display: none;\r\n    }\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.spring.fastEffects}, \r\n        transform ${DesignToken.motion.spring.fastSpatial},\r\n        overlay ${DesignToken.motion.spring.fastEffects} allow-discrete,\r\n        display ${DesignToken.motion.spring.fastEffects} allow-discrete`,\r\n      )};\r\n    }\r\n    .base {\r\n      display: contents;\r\n    }\r\n    :host([variant=\"primary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-primary-fab-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-item-container-color: var(--m3e-primary-fab-container-color, ${DesignToken.color.primaryContainer});\r\n      --_fab-menu-background-hover-color: var(--m3e-primary-fab-hover-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-background-focus-color: var(--m3e-primary-fab-focus-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-ripple-color: var(--m3e-primary-fab-ripple-color, ${DesignToken.color.onPrimaryContainer});\r\n    }\r\n    :host([variant=\"secondary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-secondary-fab-color, ${DesignToken.color.onSecondaryContainer});\r\n      --_fab-menu-item-container-color: var(\r\n        --m3e-secondary-fab-container-color,\r\n        ${DesignToken.color.secondaryContainer}\r\n      );\r\n      --_fab-menu-background-hover-color: var(\r\n        --m3e-secondary-fab-hover-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --_fab-menu-background-focus-color: var(\r\n        --m3e-secondary-fab-focus-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --_fab-menu-ripple-color: var(--m3e-secondary-fab-ripple-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([variant=\"tertiary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-tertiary-fab-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-item-container-color: var(--m3e-tertiary-fab-container-color, ${DesignToken.color.tertiaryContainer});\r\n      --_fab-menu-background-hover-color: var(--m3e-tertiary-fab-hover-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-background-focus-color: var(--m3e-tertiary-fab-focus-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-ripple-color: var(--m3e-tertiary-fab-ripple-color, ${DesignToken.color.onTertiaryContainer});\r\n    }\r\n    :host {\r\n      transform: scaleX(0.8);\r\n    }\r\n    :host(:is(:state(--left), :--left)) {\r\n      align-items: flex-start;\r\n      transform-origin: left;\r\n    }\r\n    :host(:is(:state(--right), :--right)) {\r\n      align-items: flex-end;\r\n      transform-origin: right;\r\n    }\r\n    :host(:popover-open) {\r\n      transform: scaleX(1);\r\n      display: inline-flex;\r\n      opacity: 1;\r\n    }\r\n    :host::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    @starting-style {\r\n      :host(:popover-open) {\r\n        opacity: 0;\r\n      }\r\n      :host(:popover-open) {\r\n        transform: scaleX(0.8);\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host {\r\n        border-radius: ${DesignToken.shape.corner.medium};\r\n        outline: 1px solid MenuText;\r\n        background-color: Menu;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #fabTabIndex?: number;\r\n  /** @private */ #trigger?: HTMLElement;\r\n  /** @private */ #anchoringCleanup?: () => void;\r\n\r\n  /** @private */\r\n  readonly #listManager = new RovingTabIndexManager<LitElement & DisabledMixin>()\r\n    .withWrap()\r\n    .withHomeAndEnd()\r\n    .withVerticalOrientation();\r\n\r\n  /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n\r\n  /** @private */\r\n  readonly #scrollController = new ScrollController(this, { target: null, callback: () => this.hide() });\r\n\r\n  /** @private */ readonly #clickOutsideController = new ClickOutsideController(this, {\r\n    target: null,\r\n    callback: () => this.hide(),\r\n  });\r\n\r\n  /** @private */\r\n  readonly #toggleHandler = (e: ToggleEvent) => {\r\n    switch (e.newState) {\r\n      case \"open\":\r\n        this.#clickOutsideController.observe(this);\r\n        if (this.#trigger) {\r\n          this.#clickOutsideController.observe(this.#trigger);\r\n        }\r\n        setTimeout(() => this.#listManager.setActiveItem(this.#listManager.items.find((x) => !x.disabled)), 40);\r\n        break;\r\n\r\n      case \"closed\":\r\n        this.#clickOutsideController.unobserveAll();\r\n        this.#anchoringCleanup?.();\r\n        this.#anchoringCleanup = undefined;\r\n        break;\r\n    }\r\n  };\r\n\r\n  /**\r\n   * The appearance variant of the menu.\r\n   * @default \"primary\"\r\n   */\r\n  @property({ reflect: true }) variant: FabMenuVariant = \"primary\";\r\n\r\n  /** Whether the menu is open. */\r\n  get isOpen() {\r\n    return this.#trigger !== undefined;\r\n  }\r\n\r\n  /**\r\n   * Opens the menu.\r\n   * @param {HTMLElement} trigger The element that triggered the menu.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened.\r\n   */\r\n  async show(trigger: HTMLElement): Promise<void> {\r\n    if (this.#trigger && this.#trigger !== trigger) {\r\n      this.hide();\r\n    }\r\n\r\n    this.#anchoringCleanup?.();\r\n    this.#anchoringCleanup = await positionAnchor(\r\n      this,\r\n      trigger,\r\n      {\r\n        position: \"top-end\",\r\n        inline: true,\r\n        shift: \"main\",\r\n        flip: true,\r\n        offset: 8,\r\n      },\r\n      (x, y, position) => {\r\n        setCustomState(this, \"--right\", position.includes(\"end\"));\r\n        setCustomState(this, \"--left\", position.includes(\"start\"));\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          this.style.right = `${window.innerWidth - x - this.clientWidth}px`;\r\n          this.style.left = \"\";\r\n        } else {\r\n          this.style.left = `${x}px`;\r\n          this.style.right = \"\";\r\n        }\r\n        this.style.top = `${y}px`;\r\n      },\r\n    );\r\n\r\n    this.showPopover();\r\n\r\n    this.#trigger = trigger;\r\n    this.#trigger.ariaExpanded = \"true\";\r\n    this.#scrollController.observe(this.#trigger);\r\n\r\n    this.#attachFab();\r\n  }\r\n\r\n  /**\r\n   * Hides the menu.\r\n   * @param {boolean} [restoreFocus=false] A value indicating whether to restore focus to the menu's trigger.\r\n   */\r\n  hide(restoreFocus: boolean = false): void {\r\n    this.#anchoringCleanup?.();\r\n    this.#anchoringCleanup = undefined;\r\n\r\n    if (this.#trigger) {\r\n      this.#trigger.ariaExpanded = \"false\";\r\n      if (restoreFocus) {\r\n        this.#trigger.focus();\r\n      }\r\n\r\n      this.#detachFab();\r\n\r\n      this.#scrollController.unobserve(this.#trigger);\r\n      this.#trigger = undefined;\r\n    }\r\n    this.hidePopover();\r\n  }\r\n\r\n  /**\r\n   * Toggles the menu.\r\n   * @param {HTMLElement} trigger The element that triggered the menu.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened or closed.\r\n   */\r\n  async toggle(trigger: HTMLElement): Promise<void> {\r\n    if (this.#trigger) {\r\n      this.hide();\r\n    } else {\r\n      await this.show(trigger);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.tabIndex = -1;\r\n    this.setAttribute(\"popover\", \"manual\");\r\n    this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.addEventListener(\"toggle\", this.#toggleHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.removeEventListener(\"toggle\", this.#toggleHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\"><slot @slotchange=\"${this.#handleSlotChange}\"></slot></div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    const { added } = this.#listManager.setItems([...this.querySelectorAll(\"m3e-fab-menu-item\")]);\r\n    if (!this.#listManager.activeItem) {\r\n      this.#listManager.updateActiveItem(added.find((x) => !x.disabled));\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    switch (e.key) {\r\n      case \"Tab\":\r\n        this.hide();\r\n        break;\r\n\r\n      case \"Escape\":\r\n        if (!e.shiftKey && !e.ctrlKey) {\r\n          this.hide(true);\r\n        }\r\n        break;\r\n\r\n      default:\r\n        this.#listManager.onKeyDown(e);\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #attachFab(): void {\r\n    const fab = this.#trigger?.closest<M3eFabElement>(\"m3e-fab\");\r\n    if (fab) {\r\n      this.#fabTabIndex = fab.tabIndex;\r\n      fab.addEventListener(\"keydown\", this.#keyDownHandler);\r\n      this.#listManager.setItems([...this.#listManager.items, fab]);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #detachFab(): void {\r\n    const fab = this.#trigger?.closest<M3eFabElement>(\"m3e-fab\");\r\n    if (fab) {\r\n      if (this.#fabTabIndex !== undefined) {\r\n        fab.tabIndex = this.#fabTabIndex;\r\n      }\r\n      fab.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n      this.#listManager.setItems([...this.#listManager.items.filter((x) => x !== fab)]);\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eFabMenuElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eFabMenuElement {\r\n  addEventListener<K extends keyof M3eFabMenuElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eFabMenuElement, ev: M3eFabMenuElementEventMap[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 M3eFabMenuElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eFabMenuElement, ev: M3eFabMenuElementEventMap[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-fab-menu\": M3eFabMenuElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  KeyboardClick,\r\n  LinkButton,\r\n  M3eElevationElement,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  renderPseudoLink,\r\n  Role,\r\n} from \"@m3e/web/core\";\r\n\r\nimport type { M3eFabMenuElement } from \"./FabMenuElement\";\r\n\r\n/**\r\n * An item of a floating action button (FAB) menu.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-menu-item\r\n *\r\n * @slot - Renders the label of the item.\r\n * @slot icon - Renders an icon before the items's label.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.\r\n * @attr href - The URL to which the link button points.\r\n * @attr rel - The relationship between the `target` of the link button and the document.\r\n * @attr target - The target of the link button.\r\n *\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-fab-menu-item-height - Height of the menu item.\r\n * @cssprop --m3e-fab-menu-item-font-size - Font size of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-font-weight - Font weight of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-line-height - Line height of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-tracking - Letter spacing of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-shape - Border radius of the menu item.\r\n * @cssprop --m3e-fab-menu-item-leading-space - Padding at the start of the menu item.\r\n * @cssprop --m3e-fab-menu-item-trailing-space - Padding at the end of the menu item.\r\n * @cssprop --m3e-fab-menu-item-spacing - Gap between icon and label.\r\n * @cssprop --m3e-fab-menu-item-icon-size - Size of the icon in the menu item.\r\n */\r\n@customElement(\"m3e-fab-menu-item\")\r\nexport class M3eFabMenuItemElement extends KeyboardClick(\r\n  LinkButton(Disabled(AttachInternals(Role(LitElement, \"menuitem\"), true))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      outline: none;\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n      height: var(--m3e-fab-menu-item-height, 3.5rem);\r\n      font-size: var(--m3e-fab-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-fab-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-fab-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-fab-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      border-radius: var(--m3e-fab-menu-item-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    :host(:not(:disabled)) .label,\r\n    :host(:not(:disabled)) .icon {\r\n      color: var(--_fab-menu-item-color);\r\n    }\r\n    :host(:not(:disabled)) .base {\r\n      background-color: var(--_fab-menu-item-container-color);\r\n      --m3e-state-layer-hover-color: var(--_fab-menu-background-hover-color);\r\n      --m3e-state-layer-focus-color: var(--_fab-menu-background-focus-color);\r\n      --m3e-ripple-color: var(--_fab-menu-ripple-color);\r\n    }\r\n    :host(:disabled) .base {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-fab-menu-item-disabled-container-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-fab-menu-item-disabled-container-opacity, 10%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:disabled) .label,\r\n    :host(:disabled) .icon {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-fab-menu-item-disabled-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-fab-menu-item-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .wrapper {\r\n      width: 100%;\r\n      overflow: hidden;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      padding-inline-start: var(--m3e-fab-menu-item-leading-space, 1.5rem);\r\n      padding-inline-end: var(--m3e-fab-menu-item-trailing-space, 1.5rem);\r\n      column-gap: var(--m3e-fab-menu-item-spacing, 0.5rem);\r\n    }\r\n    .label {\r\n      justify-self: center;\r\n      flex: 1 1 auto;\r\n      text-align: center;\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    .icon {\r\n      font-size: var(--m3e-fab-menu-item-icon-size, 1.5rem);\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    ::slotted([slot=\"icon\"]) {\r\n      font-size: inherit !important;\r\n      flex: none;\r\n    }\r\n    ::slotted(svg[slot=\"icon\"]) {\r\n      width: 1em;\r\n      height: 1em;\r\n    }\r\n    a {\r\n      all: unset;\r\n      display: block;\r\n      position: absolute;\r\n      top: 0px;\r\n      left: 0px;\r\n      right: 0px;\r\n      bottom: 0px;\r\n      z-index: 1;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base,\r\n      .label,\r\n      .icon {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base,\r\n      .label,\r\n      .icon {\r\n        transition: none;\r\n      }\r\n      :host(:not(:disabled)) .base {\r\n        background-color: Menu;\r\n      }\r\n      :host(:not(:disabled)) .label,\r\n      :host(:not(:disabled)) .icon {\r\n        color: MenuText;\r\n      }\r\n      :host(:disabled) .label,\r\n      :host(:disabled) .icon {\r\n        color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".elevation\") private readonly _elevation?: M3eElevationElement;\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** The floating action button (FAB) menu to which this item belongs. */\r\n  get menu(): M3eFabMenuElement | null {\r\n    return this.closest(\"m3e-fab-menu\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-elevation class=\"elevation\" ?disabled=\"${this.disabled}\"></m3e-elevation>\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      ${this[renderPseudoLink]()}\r\n      <div class=\"wrapper\">\r\n        <slot class=\"icon\" name=\"icon\" aria-hidden=\"true\"></slot>\r\n        <div class=\"label\"><slot></slot></div>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (!e.defaultPrevented) {\r\n      this.menu?.hide(true);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-fab-menu-item\": M3eFabMenuItemElement;\r\n  }\r\n}\r\n","import { ActionElementBase, customElement, HtmlFor } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eFabMenuElement } from \"./FabMenuElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to open a floating action button (FAB) menu.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-fab-menu-trigger\r\n */\r\n@customElement(\"m3e-fab-menu-trigger\")\r\nexport class M3eFabMenuTriggerElement extends HtmlFor(ActionElementBase) {\r\n  /** The menu triggered by the element. */\r\n  get menu(): M3eFabMenuElement | null {\r\n    return this.control instanceof M3eFabMenuElement ? this.control : null;\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.parentElement && control instanceof M3eFabMenuElement) {\r\n      this.parentElement.ariaHasPopup = \"menu\";\r\n      this.parentElement.ariaExpanded = \"false\";\r\n      if (control.id) {\r\n        addAriaReferencedId(this.parentElement, \"aria-controls\", control.id);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = null;\r\n      this.parentElement.ariaExpanded = null;\r\n      if (this.control?.id) {\r\n        removeAriaReferencedId(this.parentElement, \"aria-controls\", this.control.id);\r\n      }\r\n    }\r\n\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    if (this.parentElement) {\r\n      this.menu?.toggle(this.parentElement);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-fab-menu-trigger\": M3eFabMenuTriggerElement;\r\n  }\r\n}\r\n"],"names":["M3eFabMenuElement","SuppressInitialAnimation","AttachInternals","Role","LitElement","constructor","_M3eFabMenuElement_fabTabIndex","set","_M3eFabMenuElement_trigger","_M3eFabMenuElement_anchoringCleanup","_M3eFabMenuElement_listManager","RovingTabIndexManager","withWrap","withHomeAndEnd","withVerticalOrientation","_M3eFabMenuElement_keyDownHandler","e","__classPrivateFieldGet","call","_M3eFabMenuElement_scrollController","ScrollController","target","callback","hide","_M3eFabMenuElement_clickOutsideController","ClickOutsideController","_M3eFabMenuElement_toggleHandler","newState","observe","setTimeout","setActiveItem","items","find","x","disabled","unobserveAll","__classPrivateFieldSet","undefined","variant","isOpen","show","trigger","positionAnchor","position","inline","shift","flip","offset","y","setCustomState","includes","M3eDirectionality","current","style","right","window","innerWidth","clientWidth","left","top","showPopover","ariaExpanded","_M3eFabMenuElement_instances","_M3eFabMenuElement_attachFab","restoreFocus","focus","_M3eFabMenuElement_detachFab","unobserve","hidePopover","toggle","connectedCallback","tabIndex","setAttribute","addEventListener","disconnectedCallback","removeEventListener","render","html","_M3eFabMenuElement_handleSlotChange","added","setItems","querySelectorAll","activeItem","updateActiveItem","key","shiftKey","ctrlKey","onKeyDown","fab","closest","filter","styles","css","unsafeCSS","DesignToken","motion","spring","fastEffects","fastSpatial","color","onPrimaryContainer","primaryContainer","onSecondaryContainer","secondaryContainer","onTertiaryContainer","tertiaryContainer","shape","corner","medium","__decorate","property","reflect","prototype","customElement","M3eFabMenuItemElement","KeyboardClick","LinkButton","Disabled","_M3eFabMenuItemElement_clickHandler","menu","firstUpdated","_changedProperties","_elevation","_focusRing","_stateLayer","_ripple","forEach","attach","renderPseudoLink","defaultPrevented","duration","short4","easing","standard","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","full","onSurface","query","M3eFabMenuTriggerElement","HtmlFor","ActionElementBase","control","parentElement","ariaHasPopup","id","addAriaReferencedId","detach","removeAriaReferencedId","_onClick"],"mappings":";;;;;;;;;;;;;;AAwBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDG;AAEI,IAAMA,iBAAiB,GAAvB,MAAMA,iBAAkB,SAAQC,wBAAwB,CAACC,eAAe,CAACC,IAAI,CAACC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,CAAA;AAAnGC,EAAAA,WAAAA,GAAA;;;AAkGL;AAAgBC,IAAAA,8BAAA,CAAAC,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;AAChB;AAAgBC,IAAAA,0BAAA,CAAAD,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;AAChB;AAAgBE,IAAAA,mCAAA,CAAAF,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;AAEhB;IACSG,8BAAA,CAAAH,GAAA,CAAA,IAAA,EAAe,IAAII,qBAAqB,EAA8B,CAC5EC,QAAQ,EAAE,CACVC,cAAc,EAAE,CAChBC,uBAAuB,EAAE,CAAA;AAE5B;IAAyBC,iCAAA,CAAAR,GAAA,CAAA,IAAA,EAAmBS,CAAgB,IAAKC,sBAAA,CAAA,IAAI,sEAAe,CAAAC,IAAA,CAAnB,IAAI,EAAgBF,CAAC,CAAC,CAAA;AAEvF;IACSG,mCAAA,CAAAZ,GAAA,CAAA,IAAA,EAAoB,IAAIa,gBAAgB,CAAC,IAAI,EAAE;AAAEC,MAAAA,MAAM,EAAE,IAAI;AAAEC,MAAAA,QAAQ,EAAEA,MAAM,IAAI,CAACC,IAAI;AAAE,KAAE,CAAC,CAAA;AAEtG;IAAyBC,yCAAA,CAAAjB,GAAA,CAAA,IAAA,EAA0B,IAAIkB,sBAAsB,CAAC,IAAI,EAAE;AAClFJ,MAAAA,MAAM,EAAE,IAAI;AACZC,MAAAA,QAAQ,EAAEA,MAAM,IAAI,CAACC,IAAI;AAC1B,KAAA,CAAC,CAAA;AAEF;AACSG,IAAAA,gCAAA,CAAAnB,GAAA,CAAA,IAAA,EAAkBS,CAAc,IAAI;MAC3C,QAAQA,CAAC,CAACW,QAAQ;AAChB,QAAA,KAAK,MAAM;UACTV,sBAAA,CAAA,IAAI,EAAAO,yCAAA,EAAA,GAAA,CAAwB,CAACI,OAAO,CAAC,IAAI,CAAC;UAC1C,IAAIX,sBAAA,CAAA,IAAI,EAAAT,0BAAA,EAAA,GAAA,CAAS,EAAE;AACjBS,YAAAA,sBAAA,CAAA,IAAI,iDAAwB,CAACW,OAAO,CAACX,sBAAA,CAAA,IAAI,EAAAT,0BAAA,EAAA,GAAA,CAAS,CAAC;AACrD,UAAA;AACAqB,UAAAA,UAAU,CAAC,MAAMZ,uBAAA,IAAI,EAAAP,8BAAA,EAAA,GAAA,CAAa,CAACoB,aAAa,CAACb,sBAAA,CAAA,IAAI,EAAAP,8BAAA,EAAA,GAAA,CAAa,CAACqB,KAAK,CAACC,IAAI,CAAEC,CAAC,IAAK,CAACA,CAAC,CAACC,QAAQ,CAAC,CAAC,EAAE,EAAE,CAAC;AACvG,UAAA;AAEF,QAAA,KAAK,QAAQ;UACXjB,sBAAA,CAAA,IAAI,EAAAO,yCAAA,EAAA,GAAA,CAAwB,CAACW,YAAY,EAAE;UAC3ClB,sBAAA,CAAA,IAAI,EAAAR,mCAAA,EAAA,GAAA,CAAkB,EAAES,IAAA,CAAxB,IAAI,CAAsB;UAC1BkB,sBAAA,CAAA,IAAI,EAAA3B,mCAAA,EAAqB4B,SAAS,EAAA,GAAA,CAAA;AAClC,UAAA;AACJ;AACF,IAAA,CAAC,CAAA;AAED;;;AAGG;IAC0B,IAAA,CAAAC,OAAO,GAAmB,SAAS;AA6JlE,EAAA;AA3JE;EACA,IAAIC,MAAMA,GAAA;IACR,OAAOtB,sBAAA,CAAA,IAAI,EAAAT,0BAAA,EAAA,GAAA,CAAS,KAAK6B,SAAS;AACpC,EAAA;AAEA;;;;AAIG;EACH,MAAMG,IAAIA,CAACC,OAAoB,EAAA;AAC7B,IAAA,IAAIxB,sBAAA,CAAA,IAAI,EAAAT,0BAAA,EAAA,GAAA,CAAS,IAAIS,sBAAA,CAAA,IAAI,EAAAT,0BAAA,EAAA,GAAA,CAAS,KAAKiC,OAAO,EAAE;MAC9C,IAAI,CAAClB,IAAI,EAAE;AACb,IAAA;IAEAN,sBAAA,CAAA,IAAI,EAAAR,mCAAA,EAAA,GAAA,CAAkB,EAAES,IAAA,CAAxB,IAAI,CAAsB;IAC1BkB,sBAAA,CAAA,IAAI,uCAAqB,MAAMM,cAAc,CAC3C,IAAI,EACJD,OAAO,EACP;AACEE,MAAAA,QAAQ,EAAE,SAAS;AACnBC,MAAAA,MAAM,EAAE,IAAI;AACZC,MAAAA,KAAK,EAAE,MAAM;AACbC,MAAAA,IAAI,EAAE,IAAI;AACVC,MAAAA,MAAM,EAAE;AACT,KAAA,EACD,CAACd,CAAC,EAAEe,CAAC,EAAEL,QAAQ,KAAI;MACjBM,cAAc,CAAC,IAAI,EAAE,SAAS,EAAEN,QAAQ,CAACO,QAAQ,CAAC,KAAK,CAAC,CAAC;MACzDD,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAEN,QAAQ,CAACO,QAAQ,CAAC,OAAO,CAAC,CAAC;AAC1D,MAAA,IAAIC,iBAAiB,CAACC,OAAO,KAAK,KAAK,EAAE;AACvC,QAAA,IAAI,CAACC,KAAK,CAACC,KAAK,GAAG,CAAA,EAAGC,MAAM,CAACC,UAAU,GAAGvB,CAAC,GAAG,IAAI,CAACwB,WAAW,CAAA,EAAA,CAAI;AAClE,QAAA,IAAI,CAACJ,KAAK,CAACK,IAAI,GAAG,EAAE;AACtB,MAAA,CAAC,MAAM;AACL,QAAA,IAAI,CAACL,KAAK,CAACK,IAAI,GAAG,CAAA,EAAGzB,CAAC,CAAA,EAAA,CAAI;AAC1B,QAAA,IAAI,CAACoB,KAAK,CAACC,KAAK,GAAG,EAAE;AACvB,MAAA;AACA,MAAA,IAAI,CAACD,KAAK,CAACM,GAAG,GAAG,CAAA,EAAGX,CAAC,CAAA,EAAA,CAAI;IAC3B,CAAC,CACF,MAAA;IAED,IAAI,CAACY,WAAW,EAAE;IAElBxB,sBAAA,CAAA,IAAI,EAAA5B,0BAAA,EAAYiC,OAAO,EAAA,GAAA,CAAA;IACvBxB,sBAAA,CAAA,IAAI,EAAAT,0BAAA,EAAA,GAAA,CAAS,CAACqD,YAAY,GAAG,MAAM;AACnC5C,IAAAA,sBAAA,CAAA,IAAI,2CAAkB,CAACW,OAAO,CAACX,sBAAA,CAAA,IAAI,EAAAT,0BAAA,EAAA,GAAA,CAAS,CAAC;AAE7CS,IAAAA,sBAAA,CAAA,IAAI,EAAA6C,4BAAA,EAAA,GAAA,EAAAC,4BAAA,CAAW,CAAA7C,IAAA,CAAf,IAAI,CAAa;AACnB,EAAA;AAEA;;;AAGG;AACHK,EAAAA,IAAIA,CAACyC,eAAwB,KAAK,EAAA;IAChC/C,sBAAA,CAAA,IAAI,EAAAR,mCAAA,EAAA,GAAA,CAAkB,EAAES,IAAA,CAAxB,IAAI,CAAsB;IAC1BkB,sBAAA,CAAA,IAAI,EAAA3B,mCAAA,EAAqB4B,SAAS,EAAA,GAAA,CAAA;IAElC,IAAIpB,sBAAA,CAAA,IAAI,EAAAT,0BAAA,EAAA,GAAA,CAAS,EAAE;MACjBS,sBAAA,CAAA,IAAI,EAAAT,0BAAA,EAAA,GAAA,CAAS,CAACqD,YAAY,GAAG,OAAO;AACpC,MAAA,IAAIG,YAAY,EAAE;QAChB/C,sBAAA,CAAA,IAAI,EAAAT,0BAAA,EAAA,GAAA,CAAS,CAACyD,KAAK,EAAE;AACvB,MAAA;AAEAhD,MAAAA,sBAAA,CAAA,IAAI,EAAA6C,4BAAA,EAAA,GAAA,EAAAI,4BAAA,CAAW,CAAAhD,IAAA,CAAf,IAAI,CAAa;AAEjBD,MAAAA,sBAAA,CAAA,IAAI,2CAAkB,CAACkD,SAAS,CAAClD,sBAAA,CAAA,IAAI,EAAAT,0BAAA,EAAA,GAAA,CAAS,CAAC;MAC/C4B,sBAAA,CAAA,IAAI,EAAA5B,0BAAA,EAAY6B,SAAS,EAAA,GAAA,CAAA;AAC3B,IAAA;IACA,IAAI,CAAC+B,WAAW,EAAE;AACpB,EAAA;AAEA;;;;AAIG;EACH,MAAMC,MAAMA,CAAC5B,OAAoB,EAAA;IAC/B,IAAIxB,sBAAA,CAAA,IAAI,EAAAT,0BAAA,EAAA,GAAA,CAAS,EAAE;MACjB,IAAI,CAACe,IAAI,EAAE;AACb,IAAA,CAAC,MAAM;AACL,MAAA,MAAM,IAAI,CAACiB,IAAI,CAACC,OAAO,CAAC;AAC1B,IAAA;AACF,EAAA;AAEA;AACS6B,EAAAA,iBAAiBA,GAAA;IACxB,KAAK,CAACA,iBAAiB,EAAE;AAEzB,IAAA,IAAI,CAACC,QAAQ,GAAG,EAAE;AAClB,IAAA,IAAI,CAACC,YAAY,CAAC,SAAS,EAAE,QAAQ,CAAC;AACtC,IAAA,IAAI,CAACC,gBAAgB,CAAC,SAAS,EAAExD,sBAAA,CAAA,IAAI,EAAAF,iCAAA,EAAA,GAAA,CAAgB,CAAC;AACtD,IAAA,IAAI,CAAC0D,gBAAgB,CAAC,QAAQ,EAAExD,sBAAA,CAAA,IAAI,EAAAS,gCAAA,EAAA,GAAA,CAAe,CAAC;AACtD,EAAA;AAEA;AACSgD,EAAAA,oBAAoBA,GAAA;IAC3B,KAAK,CAACA,oBAAoB,EAAE;AAE5B,IAAA,IAAI,CAACC,mBAAmB,CAAC,SAAS,EAAE1D,sBAAA,CAAA,IAAI,EAAAF,iCAAA,EAAA,GAAA,CAAgB,CAAC;AACzD,IAAA,IAAI,CAAC4D,mBAAmB,CAAC,QAAQ,EAAE1D,sBAAA,CAAA,IAAI,EAAAS,gCAAA,EAAA,GAAA,CAAe,CAAC;AACzD,EAAA;AAEA;AACmBkD,EAAAA,MAAMA,GAAA;AACvB,IAAA,OAAOC,IAAI,CAAA,qCAAA,EAAwC5D,uBAAA,IAAI,EAAA6C,4BAAA,EAAA,GAAA,EAAAgB,mCAAA,CAAkB,CAAA,eAAA,CAAiB;AAC5F,EAAA;;;;;;;;;;;;EAIE,MAAM;AAAEC,IAAAA;GAAO,GAAG9D,uBAAA,IAAI,EAAAP,8BAAA,EAAA,GAAA,CAAa,CAACsE,QAAQ,CAAC,CAAC,GAAG,IAAI,CAACC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;EAC7F,IAAI,CAAChE,sBAAA,CAAA,IAAI,sCAAa,CAACiE,UAAU,EAAE;IACjCjE,sBAAA,CAAA,IAAI,sCAAa,CAACkE,gBAAgB,CAACJ,KAAK,CAAC/C,IAAI,CAAEC,CAAC,IAAK,CAACA,CAAC,CAACC,QAAQ,CAAC,CAAC;AACpE,EAAA;AACF,CAAC;6EAGclB,CAAgB,EAAA;EAC7B,QAAQA,CAAC,CAACoE,GAAG;AACX,IAAA,KAAK,KAAK;MACR,IAAI,CAAC7D,IAAI,EAAE;AACX,MAAA;AAEF,IAAA,KAAK,QAAQ;MACX,IAAI,CAACP,CAAC,CAACqE,QAAQ,IAAI,CAACrE,CAAC,CAACsE,OAAO,EAAE;AAC7B,QAAA,IAAI,CAAC/D,IAAI,CAAC,IAAI,CAAC;AACjB,MAAA;AACA,MAAA;AAEF,IAAA;MACEN,sBAAA,CAAA,IAAI,EAAAP,8BAAA,EAAA,GAAA,CAAa,CAAC6E,SAAS,CAACvE,CAAC,CAAC;AAC9B,MAAA;AACJ;AACF,CAAC;;AAIC,EAAA,MAAMwE,GAAG,GAAGvE,sBAAA,CAAA,IAAI,EAAAT,0BAAA,EAAA,GAAA,CAAS,EAAEiF,OAAO,CAAgB,SAAS,CAAC;AAC5D,EAAA,IAAID,GAAG,EAAE;IACPpD,sBAAA,CAAA,IAAI,EAAA9B,8BAAA,EAAgBkF,GAAG,CAACjB,QAAQ,MAAA;AAChCiB,IAAAA,GAAG,CAACf,gBAAgB,CAAC,SAAS,EAAExD,sBAAA,CAAA,IAAI,EAAAF,iCAAA,EAAA,GAAA,CAAgB,CAAC;IACrDE,sBAAA,CAAA,IAAI,EAAAP,8BAAA,EAAA,GAAA,CAAa,CAACsE,QAAQ,CAAC,CAAC,GAAG/D,sBAAA,CAAA,IAAI,EAAAP,8BAAA,EAAA,GAAA,CAAa,CAACqB,KAAK,EAAEyD,GAAG,CAAC,CAAC;AAC/D,EAAA;AACF,CAAC;;AAIC,EAAA,MAAMA,GAAG,GAAGvE,sBAAA,CAAA,IAAI,EAAAT,0BAAA,EAAA,GAAA,CAAS,EAAEiF,OAAO,CAAgB,SAAS,CAAC;AAC5D,EAAA,IAAID,GAAG,EAAE;IACP,IAAIvE,uBAAA,IAAI,EAAAX,8BAAA,EAAA,GAAA,CAAa,KAAK+B,SAAS,EAAE;MACnCmD,GAAG,CAACjB,QAAQ,GAAGtD,sBAAA,CAAA,IAAI,sCAAa;AAClC,IAAA;AACAuE,IAAAA,GAAG,CAACb,mBAAmB,CAAC,SAAS,EAAE1D,sBAAA,CAAA,IAAI,EAAAF,iCAAA,EAAA,GAAA,CAAgB,CAAC;AACxDE,IAAAA,sBAAA,CAAA,IAAI,EAAAP,8BAAA,EAAA,GAAA,CAAa,CAACsE,QAAQ,CAAC,CAAC,GAAG/D,sBAAA,CAAA,IAAI,EAAAP,8BAAA,EAAA,GAAA,CAAa,CAACqB,KAAK,CAAC2D,MAAM,CAAEzD,CAAC,IAAKA,CAAC,KAAKuD,GAAG,CAAC,CAAC,CAAC;AACnF,EAAA;AACF,CAAC;AAxSD;AACgBxF,iBAAA,CAAA2F,MAAM,GAAmBC,GAAG,0VAe1BC,SAAS,CACrB,CAAA,QAAA,EAAWC,WAAW,CAACC,MAAM,CAACC,MAAM,CAACC,WAAW,CAAA;AACpC,kBAAA,EAAAH,WAAW,CAACC,MAAM,CAACC,MAAM,CAACE,WAAW,CAAA;AACvC,gBAAA,EAAAJ,WAAW,CAACC,MAAM,CAACC,MAAM,CAACC,WAAW,CAAA;AACrC,gBAAA,EAAAH,WAAW,CAACC,MAAM,CAACC,MAAM,CAACC,WAAW,CAAA,eAAA,CAAiB,CACjE,CAAA,yHAAA,EAMsDH,WAAW,CAACK,KAAK,CAACC,kBAAkB,CAAA,4EAAA,EAChBN,WAAW,CAACK,KAAK,CAACE,gBAAgB,CAAA,0EAAA,EACpCP,WAAW,CAACK,KAAK,CAACC,kBAAkB,CAAA,0EAAA,EACpCN,WAAW,CAACK,KAAK,CAACC,kBAAkB,CAAA,iEAAA,EAC7CN,WAAW,CAACK,KAAK,CAACC,kBAAkB,oGAG3CN,WAAW,CAACK,KAAK,CAACG,oBAAoB,CAAA,+EAAA,EAG3FR,WAAW,CAACK,KAAK,CAACI,kBAAkB,CAAA,8EAAA,EAIpCT,WAAW,CAACK,KAAK,CAACG,oBAAoB,CAAA,8EAAA,EAItCR,WAAW,CAACK,KAAK,CAACG,oBAAoB,CAAA,oEAAA,EAEwBR,WAAW,CAACK,KAAK,CAACG,oBAAoB,CAAA,+FAAA,EAGhDR,WAAW,CAACK,KAAK,CAACK,mBAAmB,CAAA,6EAAA,EACjBV,WAAW,CAACK,KAAK,CAACM,iBAAiB,8EACrCX,WAAW,CAACK,KAAK,CAACK,mBAAmB,CAAA,2EAAA,EACrCV,WAAW,CAACK,KAAK,CAACK,mBAAmB,CAAA,kEAAA,EAC9CV,WAAW,CAACK,KAAK,CAACK,mBAAmB,CAAA,gnBAAA,EAoCnFV,WAAW,CAACY,KAAK,CAACC,MAAM,CAACC,MAAM,CAAA,0DAAA,CAzFhC;AA2IOC,UAAA,CAAA,CAA5BC,QAAQ,CAAC;AAAEC,EAAAA,OAAO,EAAE;CAAM,CAAC,CAAqC,EAAA/G,iBAAA,CAAAgH,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AA7ItDhH,iBAAiB,GAAA6G,UAAA,CAAA,CAD7BI,aAAa,CAAC,cAAc,CAAC,CACjB,EAAAjH,iBAAiB,CA0S7B;;;ACpWD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CG;AAEI,IAAMkH,qBAAqB,GAA3B,MAAMA,qBAAsB,SAAQC,aAAa,CACtDC,UAAU,CAACC,QAAQ,CAACnH,eAAe,CAACC,IAAI,CAACC,UAAU,EAAE,UAAU,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAC1E,CAAA;AAFMC,EAAAA,WAAAA,GAAA;;;AAyIL;IAAyBiH,mCAAA,CAAA/G,GAAA,CAAA,IAAA,EAAiBS,CAAQ,IAAKC,sBAAA,CAAA,IAAI,4EAAa,CAAAC,IAAA,CAAjB,IAAI,EAAcF,CAAC,CAAC,CAAA;AA+C7E,EAAA;AA7CE;EACA,IAAIuG,IAAIA,GAAA;AACN,IAAA,OAAO,IAAI,CAAC9B,OAAO,CAAC,cAAc,CAAC;AACrC,EAAA;AAEA;AACSnB,EAAAA,iBAAiBA,GAAA;IACxB,KAAK,CAACA,iBAAiB,EAAE;AACzB,IAAA,IAAI,CAACG,gBAAgB,CAAC,OAAO,EAAExD,sBAAA,CAAA,IAAI,EAAAqG,mCAAA,EAAA,GAAA,CAAc,CAAC;AACpD,EAAA;AAEA;AACS5C,EAAAA,oBAAoBA,GAAA;IAC3B,KAAK,CAACA,oBAAoB,EAAE;AAC5B,IAAA,IAAI,CAACC,mBAAmB,CAAC,OAAO,EAAE1D,sBAAA,CAAA,IAAI,EAAAqG,mCAAA,EAAA,GAAA,CAAc,CAAC;AACvD,EAAA;AAEA;EACmBE,YAAYA,CAACC,kBAAwC,EAAA;AACtE,IAAA,KAAK,CAACD,YAAY,CAACC,kBAAkB,CAAC;IACtC,CAAC,IAAI,CAACC,UAAU,EAAE,IAAI,CAACC,UAAU,EAAE,IAAI,CAACC,WAAW,EAAE,IAAI,CAACC,OAAO,CAAC,CAACC,OAAO,CAAE7F,CAAC,IAAKA,CAAC,EAAE8F,MAAM,CAAC,IAAI,CAAC,CAAC;AACpG,EAAA;AAEA;AACSnD,EAAAA,MAAMA,GAAA;IACb,OAAOC,IAAI,CAAA,8DAAA,EACqC,IAAI,CAAC3C,QAAQ,qEACT,IAAI,CAACA,QAAQ,CAAA,kEAAA,EACf,IAAI,CAACA,QAAQ,CAAA,yDAAA,EACrB,IAAI,CAACA,QAAQ,CAAA,2DAAA,EAEnD,IAAI,CAAC8F,gBAAgB,CAAC,EAAE,CAAA,gIAAA,CAKrB;AACT,EAAA;;;;iFAGahH,CAAQ,EAAA;AACnB,EAAA,IAAI,CAACA,CAAC,CAACiH,gBAAgB,EAAE;AACvB,IAAA,IAAI,CAACV,IAAI,EAAEhG,IAAI,CAAC,IAAI,CAAC;AACvB,EAAA;AACF,CAAC;AApLD;AACgB2F,qBAAA,CAAAvB,MAAM,GAAmBC,GAAG,CAAA,2RAAA,EAe1BC,SAAS,CACrB,CAAA,iBAAA,EAAoBC,WAAW,CAACC,MAAM,CAACmC,QAAQ,CAACC,MAAM,CAAA,CAAA,EAAIrC,WAAW,CAACC,MAAM,CAACqC,MAAM,CAACC,QAAQ,CAAA,CAAE,CAC/F,CAAA,iGAAA,EAE+CvC,WAAW,CAACwC,SAAS,CAACD,QAAQ,CAACE,KAAK,CAACC,KAAK,CAACC,QAAQ,CAAA,qDAAA,EAC/C3C,WAAW,CAACwC,SAAS,CAACD,QAAQ,CAACE,KAAK,CAACC,KAAK,CAACE,UAAU,CAAA,qDAAA,EACrD5C,WAAW,CAACwC,SAAS,CAACD,QAAQ,CAACE,KAAK,CAACC,KAAK,CAACG,UAAU,CAAA,qDAAA,EACrD7C,WAAW,CAACwC,SAAS,CAACD,QAAQ,CAACE,KAAK,CAACC,KAAK,CAACI,QAAQ,CAAA,iDAAA,EACvD9C,WAAW,CAACY,KAAK,CAACC,MAAM,CAACkC,IAAI,0fAevB/C,WAAW,CAACK,KAAK,CAAC2C,SAAS,CAAA,kMAAA,EASrChD,WAAW,CAACK,KAAK,CAAC2C,SAAS,CAAA,0iBAAA,EA2BzDjD,SAAS,CAAC,CAAA,MAAA,EAASC,WAAW,CAACC,MAAM,CAACmC,QAAQ,CAACC,MAAM,CAAA,CAAA,EAAIrC,WAAW,CAACC,MAAM,CAACqC,MAAM,CAACC,QAAQ,CAAA,CAAE,CAAC,CAAA,+EAAA,EAI9FxC,SAAS,CAAC,CAAA,MAAA,EAASC,WAAW,CAACC,MAAM,CAACmC,QAAQ,CAACC,MAAM,IAAIrC,WAAW,CAACC,MAAM,CAACqC,MAAM,CAACC,QAAQ,CAAA,CAAE,CAAC,CAAA,4oBAAA,CA9E1F;AAgIgCxB,UAAA,CAAA,CAArCkC,KAAK,CAAC,YAAY,CAAC,CAAmD,EAAA7B,qBAAA,CAAAF,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAChCH,UAAA,CAAA,CAAtCkC,KAAK,CAAC,aAAa,CAAC,CAAmD,EAAA7B,qBAAA,CAAAF,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAChCH,UAAA,CAAA,CAAvCkC,KAAK,CAAC,cAAc,CAAC,CAAqD,EAAA7B,qBAAA,CAAAF,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AACxCH,UAAA,CAAA,CAAlCkC,KAAK,CAAC,SAAS,CAAC,CAA6C,EAAA7B,qBAAA,CAAAF,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAvInEE,qBAAqB,GAAAL,UAAA,CAAA,CADjCI,aAAa,CAAC,mBAAmB,CAAC,CACtB,EAAAC,qBAAqB,CAwLjC;;ACrPD;;;;;;;;;;;;;;;;;;;;;;AAsBG;AAEI,IAAM8B,wBAAwB,GAA9B,MAAMA,wBAAyB,SAAQC,OAAO,CAACC,iBAAiB,CAAC,CAAA;AACtE;EACA,IAAI3B,IAAIA,GAAA;IACN,OAAO,IAAI,CAAC4B,OAAO,YAAYnJ,iBAAiB,GAAG,IAAI,CAACmJ,OAAO,GAAG,IAAI;AACxE,EAAA;AAEA;EACSpB,MAAMA,CAACoB,OAAoB,EAAA;AAClC,IAAA,KAAK,CAACpB,MAAM,CAACoB,OAAO,CAAC;AAErB,IAAA,IAAI,IAAI,CAACC,aAAa,IAAID,OAAO,YAAYnJ,iBAAiB,EAAE;AAC9D,MAAA,IAAI,CAACoJ,aAAa,CAACC,YAAY,GAAG,MAAM;AACxC,MAAA,IAAI,CAACD,aAAa,CAACvF,YAAY,GAAG,OAAO;MACzC,IAAIsF,OAAO,CAACG,EAAE,EAAE;QACdC,mBAAmB,CAAC,IAAI,CAACH,aAAa,EAAE,eAAe,EAAED,OAAO,CAACG,EAAE,CAAC;AACtE,MAAA;AACF,IAAA;AACF,EAAA;AAEA;AACSE,EAAAA,MAAMA,GAAA;IACb,IAAI,IAAI,CAACJ,aAAa,EAAE;AACtB,MAAA,IAAI,CAACA,aAAa,CAACC,YAAY,GAAG,IAAI;AACtC,MAAA,IAAI,CAACD,aAAa,CAACvF,YAAY,GAAG,IAAI;AACtC,MAAA,IAAI,IAAI,CAACsF,OAAO,EAAEG,EAAE,EAAE;AACpBG,QAAAA,sBAAsB,CAAC,IAAI,CAACL,aAAa,EAAE,eAAe,EAAE,IAAI,CAACD,OAAO,CAACG,EAAE,CAAC;AAC9E,MAAA;AACF,IAAA;IAEA,KAAK,CAACE,MAAM,EAAE;AAChB,EAAA;AAEA;AACSE,EAAAA,QAAQA,GAAA;IACf,IAAI,IAAI,CAACN,aAAa,EAAE;MACtB,IAAI,CAAC7B,IAAI,EAAElD,MAAM,CAAC,IAAI,CAAC+E,aAAa,CAAC;AACvC,IAAA;AACF,EAAA;;AArCWJ,wBAAwB,GAAAnC,UAAA,CAAA,CADpCI,aAAa,CAAC,sBAAsB,CAAC,CACzB,EAAA+B,wBAAwB,CAsCpC;;;;"}

package/dist/fab-menu.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldGet as e,__decorate as t,__classPrivateFieldSet as i}from"tslib";import{LitElement as o,html as a,unsafeCSS as r,css as n}from"lit";import{query as s,property as l}from"lit/decorators.js";import{KeyboardClick as c,LinkButton as d,Disabled as m,AttachInternals as h,Role as f,renderPseudoLink as p,DesignToken as b,customElement as u,SuppressInitialAnimation as v,ScrollController as g,setCustomState as y,HtmlFor as k,ActionElementBase as w}from"@m3e/web/core";import{RovingTabIndexManager as $,addAriaReferencedId as x,removeAriaReferencedId as E}from"@m3e/web/core/a11y";import{M3eDirectionality as _}from"@m3e/web/core/bidi";import{positionAnchor as C}from"@m3e/web/core/anchoring";var W,M,L;let S=class extends(c(d(m(h(f(o,"menuitem"),!0))))){constructor(){super(...arguments),W.add(this),M.set(this,t=>e(this,W,"m",L).call(this,t))}get menu(){return this.closest("m3e-fab-menu")}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,M,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,M,"f"))}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){return a`<div class="base"><m3e-elevation class="elevation" ?disabled="${this.disabled}"></m3e-elevation><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${this[p]()}<div class="wrapper"><slot class="icon" name="icon" aria-hidden="true"></slot><div class="label"><slot></slot></div></div></div>`}};var P,I,T,z,A,H,j,K,X,O,R,U,q,D;M=new WeakMap,W=new WeakSet,L=function(e){e.defaultPrevented||this.menu?.hide(!0)},S.styles=n`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${r(`background-color ${b.motion.duration.short4} ${b.motion.easing.standard}`)}; height: var(--m3e-fab-menu-item-height, 3.5rem); font-size: var(--m3e-fab-menu-item-font-size, ${b.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-fab-menu-item-font-weight, ${b.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-fab-menu-item-line-height, ${b.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-fab-menu-item-tracking, ${b.typescale.standard.label.large.tracking}); border-radius: var(--m3e-fab-menu-item-shape, ${b.shape.corner.full}); } :host(:not(:disabled)) .label, :host(:not(:disabled)) .icon { color: var(--_fab-menu-item-color); } :host(:not(:disabled)) .base { background-color: var(--_fab-menu-item-container-color); --m3e-state-layer-hover-color: var(--_fab-menu-background-hover-color); --m3e-state-layer-focus-color: var(--_fab-menu-background-focus-color); --m3e-ripple-color: var(--_fab-menu-ripple-color); } :host(:disabled) .base { background-color: color-mix( in srgb, var(--m3e-fab-menu-item-disabled-container-color, ${b.color.onSurface}) var(--m3e-fab-menu-item-disabled-container-opacity, 10%), transparent ); } :host(:disabled) .label, :host(:disabled) .icon { color: color-mix( in srgb, var(--m3e-fab-menu-item-disabled-color, ${b.color.onSurface}) var(--m3e-fab-menu-item-disabled-opacity, 38%), transparent ); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; padding-inline-start: var(--m3e-fab-menu-item-leading-space, 1.5rem); padding-inline-end: var(--m3e-fab-menu-item-trailing-space, 1.5rem); column-gap: var(--m3e-fab-menu-item-spacing, 0.5rem); } .label { justify-self: center; flex: 1 1 auto; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${r(`color ${b.motion.duration.short4} ${b.motion.easing.standard}`)}; } .icon { font-size: var(--m3e-fab-menu-item-icon-size, 1.5rem); transition: ${r(`color ${b.motion.duration.short4} ${b.motion.easing.standard}`)}; } :host(:not(:disabled)) { cursor: pointer; } ::slotted([slot="icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]) { width: 1em; height: 1em; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (prefers-reduced-motion) { .base, .label, .icon { transition: none; } } @media (forced-colors: active) { .base, .label, .icon { transition: none; } :host(:not(:disabled)) .base { background-color: Menu; } :host(:not(:disabled)) .label, :host(:not(:disabled)) .icon { color: MenuText; } :host(:disabled) .label, :host(:disabled) .icon { color: GrayText; } }`,t([s(".elevation")],S.prototype,"_elevation",void 0),t([s(".focus-ring")],S.prototype,"_focusRing",void 0),t([s(".state-layer")],S.prototype,"_stateLayer",void 0),t([s(".ripple")],S.prototype,"_ripple",void 0),S=t([u("m3e-fab-menu-item")],S);let G=class extends(v(h(f(o,"menu")))){constructor(){super(...arguments),P.add(this),I.set(this,void 0),T.set(this,void 0),z.set(this,void 0),A.set(this,(new $).withWrap().withHomeAndEnd().withVerticalOrientation()),H.set(this,t=>e(this,P,"m",R).call(this,t)),j.set(this,t=>e(this,P,"m",U).call(this,t)),K.set(this,new g(this,{target:null,callback:()=>this.hide()})),X.set(this,t=>{"closed"===t.newState?(e(this,z,"f")?.call(this),i(this,z,void 0,"f")):setTimeout(()=>{e(this,A,"f").setActiveItem(e(this,A,"f").items.find(e=>!e.disabled))},40)}),this.variant="primary"}get isOpen(){return void 0!==e(this,T,"f")}async show(t){e(this,T,"f")&&e(this,T,"f")!==t&&this.hide(),e(this,z,"f")?.call(this),i(this,z,await C(this,t,{position:"top-end",inline:!0,shift:"main",flip:!0,offset:8},(e,t,i)=>{y(this,"--right",i.includes("end")),y(this,"--left",i.includes("start")),"rtl"===_.current?(this.style.right=window.innerWidth-e-this.clientWidth+"px",this.style.left=""):(this.style.left=`${e}px`,this.style.right=""),this.style.top=`${t}px`}),"f"),this.showPopover(),i(this,T,t,"f"),e(this,T,"f").ariaExpanded="true",e(this,K,"f").observe(e(this,T,"f")),e(this,P,"m",q).call(this)}hide(t=!1){e(this,z,"f")?.call(this),i(this,z,void 0,"f"),e(this,T,"f")&&(e(this,T,"f").ariaExpanded="false",t&&e(this,T,"f").focus(),e(this,P,"m",D).call(this),e(this,K,"f").unobserve(e(this,T,"f")),i(this,T,void 0,"f")),this.hidePopover()}async toggle(t){e(this,T,"f")?this.hide():await this.show(t)}connectedCallback(){super.connectedCallback(),this.tabIndex=-1,this.setAttribute("popover","manual"),this.addEventListener("keydown",e(this,H,"f")),this.addEventListener("toggle",e(this,X,"f")),document.addEventListener("click",e(this,j,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",e(this,H,"f")),this.removeEventListener("toggle",e(this,X,"f")),document.removeEventListener("click",e(this,j,"f"))}render(){return a`<div class="base"><slot @slotchange="${e(this,P,"m",O)}"></slot></div>`}};I=new WeakMap,T=new WeakMap,z=new WeakMap,A=new WeakMap,H=new WeakMap,j=new WeakMap,K=new WeakMap,X=new WeakMap,P=new WeakSet,O=function(){const{added:t}=e(this,A,"f").setItems([...this.querySelectorAll("m3e-fab-menu-item")]);e(this,A,"f").activeItem||e(this,A,"f").updateActiveItem(t.find(e=>!e.disabled))},R=function(t){switch(t.key){case"Tab":this.hide();break;case"Escape":t.shiftKey||t.ctrlKey||this.hide(!0);break;default:e(this,A,"f").onKeyDown(t)}},U=function(t){t.composedPath().some(t=>t instanceof S||t===e(this,T,"f"))||this.hide()},q=function(){const t=e(this,T,"f")?.closest("m3e-fab");t&&(i(this,I,t.tabIndex,"f"),t.addEventListener("keydown",e(this,H,"f")),e(this,A,"f").setItems([...e(this,A,"f").items,t]))},D=function(){const t=e(this,T,"f")?.closest("m3e-fab");t&&(void 0!==e(this,I,"f")&&(t.tabIndex=e(this,I,"f")),t.removeEventListener("keydown",e(this,H,"f")),e(this,A,"f").setItems([...e(this,A,"f").items.filter(e=>e!==t)]))},G.styles=n`:host { position: absolute; flex-direction: column; row-gap: var(--m3e-fab-menu-spacing, 0.25rem); padding: unset; margin: unset; border: unset; overflow: visible; max-width: var(--m3e-fab-menu-max-width, 17.5rem); opacity: 0; background-color: transparent; display: none; } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${r(`opacity ${b.motion.spring.fastEffects}, \n        transform ${b.motion.spring.fastSpatial},\n        overlay ${b.motion.spring.fastEffects} allow-discrete,\n        display ${b.motion.spring.fastEffects} allow-discrete`)}; } .base { display: contents; } :host([variant="primary"]) .base { --_fab-menu-item-color: var(--m3e-primary-fab-color, ${b.color.onPrimaryContainer}); --_fab-menu-item-container-color: var(--m3e-primary-fab-container-color, ${b.color.primaryContainer}); --_fab-menu-background-hover-color: var(--m3e-primary-fab-hover-color, ${b.color.onPrimaryContainer}); --_fab-menu-background-focus-color: var(--m3e-primary-fab-focus-color, ${b.color.onPrimaryContainer}); --_fab-menu-ripple-color: var(--m3e-primary-fab-ripple-color, ${b.color.onPrimaryContainer}); } :host([variant="secondary"]) .base { --_fab-menu-item-color: var(--m3e-secondary-fab-color, ${b.color.onSecondaryContainer}); --_fab-menu-item-container-color: var( --m3e-secondary-fab-container-color, ${b.color.secondaryContainer} ); --_fab-menu-background-hover-color: var( --m3e-secondary-fab-hover-color, ${b.color.onSecondaryContainer} ); --_fab-menu-background-focus-color: var( --m3e-secondary-fab-focus-color, ${b.color.onSecondaryContainer} ); --_fab-menu-ripple-color: var(--m3e-secondary-fab-ripple-color, ${b.color.onSecondaryContainer}); } :host([variant="tertiary"]) .base { --_fab-menu-item-color: var(--m3e-tertiary-fab-color, ${b.color.onTertiaryContainer}); --_fab-menu-item-container-color: var(--m3e-tertiary-fab-container-color, ${b.color.tertiaryContainer}); --_fab-menu-background-hover-color: var(--m3e-tertiary-fab-hover-color, ${b.color.onTertiaryContainer}); --_fab-menu-background-focus-color: var(--m3e-tertiary-fab-focus-color, ${b.color.onTertiaryContainer}); --_fab-menu-ripple-color: var(--m3e-tertiary-fab-ripple-color, ${b.color.onTertiaryContainer}); } :host { transform: scaleX(0.8); } :host(:is(:state(--left), :--left)) { align-items: flex-start; transform-origin: left; } :host(:is(:state(--right), :--right)) { align-items: flex-end; transform-origin: right; } :host(:popover-open) { transform: scaleX(1); display: inline-flex; opacity: 1; } :host::backdrop { background-color: transparent; } @starting-style { :host(:popover-open) { opacity: 0; } :host(:popover-open) { transform: scaleX(0.8); } } @media (prefers-reduced-motion) { :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: none; } } @media (forced-colors: active) { :host { border-radius: ${b.shape.corner.medium}; outline: 1px solid MenuText; background-color: Menu; } }`,t([l({reflect:!0})],G.prototype,"variant",void 0),G=t([u("m3e-fab-menu")],G);let V=class extends(k(w)){get menu(){return this.control instanceof G?this.control:null}attach(e){super.attach(e),this.parentElement&&e instanceof G&&(this.parentElement.ariaHasPopup="menu",this.parentElement.ariaExpanded="false",e.id&&x(this.parentElement,"aria-controls",e.id))}detach(){this.parentElement&&(this.parentElement.ariaHasPopup=null,this.parentElement.ariaExpanded=null,this.control?.id&&E(this.parentElement,"aria-controls",this.control.id)),super.detach()}_onClick(){this.parentElement&&this.menu?.toggle(this.parentElement)}};V=t([u("m3e-fab-menu-trigger")],V);export{G as M3eFabMenuElement,S as M3eFabMenuItemElement,V as M3eFabMenuTriggerElement};
+import{__classPrivateFieldGet as e,__classPrivateFieldSet as t,__decorate as i}from"tslib";import{LitElement as o,html as a,unsafeCSS as r,css as n}from"lit";import{property as s,query as l}from"lit/decorators.js";import{SuppressInitialAnimation as c,AttachInternals as d,Role as h,ScrollController as m,ClickOutsideController as f,setCustomState as p,DesignToken as b,customElement as u,KeyboardClick as v,LinkButton as g,Disabled as y,renderPseudoLink as w,HtmlFor as k,ActionElementBase as $}from"@m3e/web/core";import{RovingTabIndexManager as x,addAriaReferencedId as _,removeAriaReferencedId as E}from"@m3e/web/core/a11y";import{M3eDirectionality as C}from"@m3e/web/core/bidi";import{positionAnchor as W}from"@m3e/web/core/anchoring";var M,S,L,I,P,T,z,A,H,j,K,X,O;let R=class extends(c(d(h(o,"menu")))){constructor(){super(...arguments),M.add(this),S.set(this,void 0),L.set(this,void 0),I.set(this,void 0),P.set(this,(new x).withWrap().withHomeAndEnd().withVerticalOrientation()),T.set(this,t=>e(this,M,"m",K).call(this,t)),z.set(this,new m(this,{target:null,callback:()=>this.hide()})),A.set(this,new f(this,{target:null,callback:()=>this.hide()})),H.set(this,i=>{switch(i.newState){case"open":e(this,A,"f").observe(this),e(this,L,"f")&&e(this,A,"f").observe(e(this,L,"f")),setTimeout(()=>e(this,P,"f").setActiveItem(e(this,P,"f").items.find(e=>!e.disabled)),40);break;case"closed":e(this,A,"f").unobserveAll(),e(this,I,"f")?.call(this),t(this,I,void 0,"f")}}),this.variant="primary"}get isOpen(){return void 0!==e(this,L,"f")}async show(i){e(this,L,"f")&&e(this,L,"f")!==i&&this.hide(),e(this,I,"f")?.call(this),t(this,I,await W(this,i,{position:"top-end",inline:!0,shift:"main",flip:!0,offset:8},(e,t,i)=>{p(this,"--right",i.includes("end")),p(this,"--left",i.includes("start")),"rtl"===C.current?(this.style.right=window.innerWidth-e-this.clientWidth+"px",this.style.left=""):(this.style.left=`${e}px`,this.style.right=""),this.style.top=`${t}px`}),"f"),this.showPopover(),t(this,L,i,"f"),e(this,L,"f").ariaExpanded="true",e(this,z,"f").observe(e(this,L,"f")),e(this,M,"m",X).call(this)}hide(i=!1){e(this,I,"f")?.call(this),t(this,I,void 0,"f"),e(this,L,"f")&&(e(this,L,"f").ariaExpanded="false",i&&e(this,L,"f").focus(),e(this,M,"m",O).call(this),e(this,z,"f").unobserve(e(this,L,"f")),t(this,L,void 0,"f")),this.hidePopover()}async toggle(t){e(this,L,"f")?this.hide():await this.show(t)}connectedCallback(){super.connectedCallback(),this.tabIndex=-1,this.setAttribute("popover","manual"),this.addEventListener("keydown",e(this,T,"f")),this.addEventListener("toggle",e(this,H,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",e(this,T,"f")),this.removeEventListener("toggle",e(this,H,"f"))}render(){return a`<div class="base"><slot @slotchange="${e(this,M,"m",j)}"></slot></div>`}};var U,q,D;S=new WeakMap,L=new WeakMap,I=new WeakMap,P=new WeakMap,T=new WeakMap,z=new WeakMap,A=new WeakMap,H=new WeakMap,M=new WeakSet,j=function(){const{added:t}=e(this,P,"f").setItems([...this.querySelectorAll("m3e-fab-menu-item")]);e(this,P,"f").activeItem||e(this,P,"f").updateActiveItem(t.find(e=>!e.disabled))},K=function(t){switch(t.key){case"Tab":this.hide();break;case"Escape":t.shiftKey||t.ctrlKey||this.hide(!0);break;default:e(this,P,"f").onKeyDown(t)}},X=function(){const i=e(this,L,"f")?.closest("m3e-fab");i&&(t(this,S,i.tabIndex,"f"),i.addEventListener("keydown",e(this,T,"f")),e(this,P,"f").setItems([...e(this,P,"f").items,i]))},O=function(){const t=e(this,L,"f")?.closest("m3e-fab");t&&(void 0!==e(this,S,"f")&&(t.tabIndex=e(this,S,"f")),t.removeEventListener("keydown",e(this,T,"f")),e(this,P,"f").setItems([...e(this,P,"f").items.filter(e=>e!==t)]))},R.styles=n`:host { position: absolute; flex-direction: column; row-gap: var(--m3e-fab-menu-spacing, 0.25rem); padding: unset; margin: unset; border: unset; overflow: visible; max-width: var(--m3e-fab-menu-max-width, 17.5rem); opacity: 0; background-color: transparent; display: none; } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${r(`opacity ${b.motion.spring.fastEffects}, \n        transform ${b.motion.spring.fastSpatial},\n        overlay ${b.motion.spring.fastEffects} allow-discrete,\n        display ${b.motion.spring.fastEffects} allow-discrete`)}; } .base { display: contents; } :host([variant="primary"]) .base { --_fab-menu-item-color: var(--m3e-primary-fab-color, ${b.color.onPrimaryContainer}); --_fab-menu-item-container-color: var(--m3e-primary-fab-container-color, ${b.color.primaryContainer}); --_fab-menu-background-hover-color: var(--m3e-primary-fab-hover-color, ${b.color.onPrimaryContainer}); --_fab-menu-background-focus-color: var(--m3e-primary-fab-focus-color, ${b.color.onPrimaryContainer}); --_fab-menu-ripple-color: var(--m3e-primary-fab-ripple-color, ${b.color.onPrimaryContainer}); } :host([variant="secondary"]) .base { --_fab-menu-item-color: var(--m3e-secondary-fab-color, ${b.color.onSecondaryContainer}); --_fab-menu-item-container-color: var( --m3e-secondary-fab-container-color, ${b.color.secondaryContainer} ); --_fab-menu-background-hover-color: var( --m3e-secondary-fab-hover-color, ${b.color.onSecondaryContainer} ); --_fab-menu-background-focus-color: var( --m3e-secondary-fab-focus-color, ${b.color.onSecondaryContainer} ); --_fab-menu-ripple-color: var(--m3e-secondary-fab-ripple-color, ${b.color.onSecondaryContainer}); } :host([variant="tertiary"]) .base { --_fab-menu-item-color: var(--m3e-tertiary-fab-color, ${b.color.onTertiaryContainer}); --_fab-menu-item-container-color: var(--m3e-tertiary-fab-container-color, ${b.color.tertiaryContainer}); --_fab-menu-background-hover-color: var(--m3e-tertiary-fab-hover-color, ${b.color.onTertiaryContainer}); --_fab-menu-background-focus-color: var(--m3e-tertiary-fab-focus-color, ${b.color.onTertiaryContainer}); --_fab-menu-ripple-color: var(--m3e-tertiary-fab-ripple-color, ${b.color.onTertiaryContainer}); } :host { transform: scaleX(0.8); } :host(:is(:state(--left), :--left)) { align-items: flex-start; transform-origin: left; } :host(:is(:state(--right), :--right)) { align-items: flex-end; transform-origin: right; } :host(:popover-open) { transform: scaleX(1); display: inline-flex; opacity: 1; } :host::backdrop { background-color: transparent; } @starting-style { :host(:popover-open) { opacity: 0; } :host(:popover-open) { transform: scaleX(0.8); } } @media (prefers-reduced-motion) { :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: none; } } @media (forced-colors: active) { :host { border-radius: ${b.shape.corner.medium}; outline: 1px solid MenuText; background-color: Menu; } }`,i([s({reflect:!0})],R.prototype,"variant",void 0),R=i([u("m3e-fab-menu")],R);let G=class extends(v(g(y(d(h(o,"menuitem"),!0))))){constructor(){super(...arguments),U.add(this),q.set(this,t=>e(this,U,"m",D).call(this,t))}get menu(){return this.closest("m3e-fab-menu")}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,q,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,q,"f"))}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){return a`<div class="base"><m3e-elevation class="elevation" ?disabled="${this.disabled}"></m3e-elevation><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${this[w]()}<div class="wrapper"><slot class="icon" name="icon" aria-hidden="true"></slot><div class="label"><slot></slot></div></div></div>`}};q=new WeakMap,U=new WeakSet,D=function(e){e.defaultPrevented||this.menu?.hide(!0)},G.styles=n`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${r(`background-color ${b.motion.duration.short4} ${b.motion.easing.standard}`)}; height: var(--m3e-fab-menu-item-height, 3.5rem); font-size: var(--m3e-fab-menu-item-font-size, ${b.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-fab-menu-item-font-weight, ${b.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-fab-menu-item-line-height, ${b.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-fab-menu-item-tracking, ${b.typescale.standard.label.large.tracking}); border-radius: var(--m3e-fab-menu-item-shape, ${b.shape.corner.full}); } :host(:not(:disabled)) .label, :host(:not(:disabled)) .icon { color: var(--_fab-menu-item-color); } :host(:not(:disabled)) .base { background-color: var(--_fab-menu-item-container-color); --m3e-state-layer-hover-color: var(--_fab-menu-background-hover-color); --m3e-state-layer-focus-color: var(--_fab-menu-background-focus-color); --m3e-ripple-color: var(--_fab-menu-ripple-color); } :host(:disabled) .base { background-color: color-mix( in srgb, var(--m3e-fab-menu-item-disabled-container-color, ${b.color.onSurface}) var(--m3e-fab-menu-item-disabled-container-opacity, 10%), transparent ); } :host(:disabled) .label, :host(:disabled) .icon { color: color-mix( in srgb, var(--m3e-fab-menu-item-disabled-color, ${b.color.onSurface}) var(--m3e-fab-menu-item-disabled-opacity, 38%), transparent ); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; padding-inline-start: var(--m3e-fab-menu-item-leading-space, 1.5rem); padding-inline-end: var(--m3e-fab-menu-item-trailing-space, 1.5rem); column-gap: var(--m3e-fab-menu-item-spacing, 0.5rem); } .label { justify-self: center; flex: 1 1 auto; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${r(`color ${b.motion.duration.short4} ${b.motion.easing.standard}`)}; } .icon { font-size: var(--m3e-fab-menu-item-icon-size, 1.5rem); transition: ${r(`color ${b.motion.duration.short4} ${b.motion.easing.standard}`)}; } :host(:not(:disabled)) { cursor: pointer; } ::slotted([slot="icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]) { width: 1em; height: 1em; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (prefers-reduced-motion) { .base, .label, .icon { transition: none; } } @media (forced-colors: active) { .base, .label, .icon { transition: none; } :host(:not(:disabled)) .base { background-color: Menu; } :host(:not(:disabled)) .label, :host(:not(:disabled)) .icon { color: MenuText; } :host(:disabled) .label, :host(:disabled) .icon { color: GrayText; } }`,i([l(".elevation")],G.prototype,"_elevation",void 0),i([l(".focus-ring")],G.prototype,"_focusRing",void 0),i([l(".state-layer")],G.prototype,"_stateLayer",void 0),i([l(".ripple")],G.prototype,"_ripple",void 0),G=i([u("m3e-fab-menu-item")],G);let V=class extends(k($)){get menu(){return this.control instanceof R?this.control:null}attach(e){super.attach(e),this.parentElement&&e instanceof R&&(this.parentElement.ariaHasPopup="menu",this.parentElement.ariaExpanded="false",e.id&&_(this.parentElement,"aria-controls",e.id))}detach(){this.parentElement&&(this.parentElement.ariaHasPopup=null,this.parentElement.ariaExpanded=null,this.control?.id&&E(this.parentElement,"aria-controls",this.control.id)),super.detach()}_onClick(){this.parentElement&&this.menu?.toggle(this.parentElement)}};V=i([u("m3e-fab-menu-trigger")],V);export{R as M3eFabMenuElement,G as M3eFabMenuItemElement,V as M3eFabMenuTriggerElement};
 //# sourceMappingURL=fab-menu.min.js.map

package/dist/fab-menu.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"fab-menu.min.js","sources":["../../src/fab-menu/FabMenuItemElement.ts","../../src/fab-menu/FabMenuElement.ts","../../src/fab-menu/FabMenuTriggerElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  KeyboardClick,\r\n  LinkButton,\r\n  M3eElevationElement,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  renderPseudoLink,\r\n  Role,\r\n} from \"@m3e/web/core\";\r\n\r\nimport type { M3eFabMenuElement } from \"./FabMenuElement\";\r\n\r\n/**\r\n * An item of a floating action button (FAB) menu.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-menu-item\r\n *\r\n * @slot - Renders the label of the item.\r\n * @slot icon - Renders an icon before the items's label.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.\r\n * @attr href - The URL to which the link button points.\r\n * @attr rel - The relationship between the `target` of the link button and the document.\r\n * @attr target - The target of the link button.\r\n *\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-fab-menu-item-height - Height of the menu item.\r\n * @cssprop --m3e-fab-menu-item-font-size - Font size of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-font-weight - Font weight of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-line-height - Line height of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-tracking - Letter spacing of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-shape - Border radius of the menu item.\r\n * @cssprop --m3e-fab-menu-item-leading-space - Padding at the start of the menu item.\r\n * @cssprop --m3e-fab-menu-item-trailing-space - Padding at the end of the menu item.\r\n * @cssprop --m3e-fab-menu-item-spacing - Gap between icon and label.\r\n * @cssprop --m3e-fab-menu-item-icon-size - Size of the icon in the menu item.\r\n */\r\n@customElement(\"m3e-fab-menu-item\")\r\nexport class M3eFabMenuItemElement extends KeyboardClick(\r\n  LinkButton(Disabled(AttachInternals(Role(LitElement, \"menuitem\"), true))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      outline: none;\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n      height: var(--m3e-fab-menu-item-height, 3.5rem);\r\n      font-size: var(--m3e-fab-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-fab-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-fab-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-fab-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      border-radius: var(--m3e-fab-menu-item-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    :host(:not(:disabled)) .label,\r\n    :host(:not(:disabled)) .icon {\r\n      color: var(--_fab-menu-item-color);\r\n    }\r\n    :host(:not(:disabled)) .base {\r\n      background-color: var(--_fab-menu-item-container-color);\r\n      --m3e-state-layer-hover-color: var(--_fab-menu-background-hover-color);\r\n      --m3e-state-layer-focus-color: var(--_fab-menu-background-focus-color);\r\n      --m3e-ripple-color: var(--_fab-menu-ripple-color);\r\n    }\r\n    :host(:disabled) .base {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-fab-menu-item-disabled-container-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-fab-menu-item-disabled-container-opacity, 10%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:disabled) .label,\r\n    :host(:disabled) .icon {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-fab-menu-item-disabled-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-fab-menu-item-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .wrapper {\r\n      width: 100%;\r\n      overflow: hidden;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      padding-inline-start: var(--m3e-fab-menu-item-leading-space, 1.5rem);\r\n      padding-inline-end: var(--m3e-fab-menu-item-trailing-space, 1.5rem);\r\n      column-gap: var(--m3e-fab-menu-item-spacing, 0.5rem);\r\n    }\r\n    .label {\r\n      justify-self: center;\r\n      flex: 1 1 auto;\r\n      text-align: center;\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    .icon {\r\n      font-size: var(--m3e-fab-menu-item-icon-size, 1.5rem);\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    ::slotted([slot=\"icon\"]) {\r\n      font-size: inherit !important;\r\n      flex: none;\r\n    }\r\n    ::slotted(svg[slot=\"icon\"]) {\r\n      width: 1em;\r\n      height: 1em;\r\n    }\r\n    a {\r\n      all: unset;\r\n      display: block;\r\n      position: absolute;\r\n      top: 0px;\r\n      left: 0px;\r\n      right: 0px;\r\n      bottom: 0px;\r\n      z-index: 1;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base,\r\n      .label,\r\n      .icon {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base,\r\n      .label,\r\n      .icon {\r\n        transition: none;\r\n      }\r\n      :host(:not(:disabled)) .base {\r\n        background-color: Menu;\r\n      }\r\n      :host(:not(:disabled)) .label,\r\n      :host(:not(:disabled)) .icon {\r\n        color: MenuText;\r\n      }\r\n      :host(:disabled) .label,\r\n      :host(:disabled) .icon {\r\n        color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".elevation\") private readonly _elevation?: M3eElevationElement;\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** The floating action button (FAB) menu to which this item belongs. */\r\n  get menu(): M3eFabMenuElement | null {\r\n    return this.closest(\"m3e-fab-menu\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-elevation class=\"elevation\" ?disabled=\"${this.disabled}\"></m3e-elevation>\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      ${this[renderPseudoLink]()}\r\n      <div class=\"wrapper\">\r\n        <slot class=\"icon\" name=\"icon\" aria-hidden=\"true\"></slot>\r\n        <div class=\"label\"><slot></slot></div>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (!e.defaultPrevented) {\r\n      this.menu?.hide(true);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-fab-menu-item\": M3eFabMenuItemElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  DisabledMixin,\r\n  Role,\r\n  ScrollController,\r\n  setCustomState,\r\n  SuppressInitialAnimation,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { RovingTabIndexManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { M3eFabElement } from \"@m3e/web/fab\";\r\n\r\nimport { FabMenuVariant } from \"./FabMenuVariant\";\r\nimport { M3eFabMenuItemElement } from \"./FabMenuItemElement\";\r\n\r\n/**\r\n * A menu, opened from a floating action button (FAB), used to display multiple related actions.\r\n *\r\n * @description\r\n * The `m3e-fab-menu` component presents a dynamic menu of related actions, elegantly revealed from a\r\n * floating action button (FAB). Designed using expressive, adaptive surfaces, it enables seamless access\r\n * to contextual actions in modern, visually rich interfaces.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-fab-menu\r\n *\r\n * @slot - Renders the contents of the menu.\r\n *\r\n * @attr variant - The appearance variant of the menu.\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-fab-menu-spacing - Vertical gap between menu items.\r\n * @cssprop --m3e-fab-menu-max-width - Maximum width of the menu.\r\n * @cssprop --m3e-primary-fab-color - Foreground color for primary variant items.\r\n * @cssprop --m3e-primary-fab-container-color - Container color for primary variant items.\r\n * @cssprop --m3e-primary-fab-hover-color - Hover background color for primary variant items.\r\n * @cssprop --m3e-primary-fab-focus-color - Focus background color for primary variant items.\r\n * @cssprop --m3e-primary-fab-ripple-color - Ripple color for primary variant items.\r\n * @cssprop --m3e-secondary-fab-color - Foreground color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-container-color - Container color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-hover-color - Hover background color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-focus-color - Focus background color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-ripple-color - Ripple color for secondary variant items.\r\n * @cssprop --m3e-tertiary-fab-color - Foreground color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-container-color - Container color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-hover-color - Hover background color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-focus-color - Focus background color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-ripple-color - Ripple color for tertiary variant items.\r\n */\r\n@customElement(\"m3e-fab-menu\")\r\nexport class M3eFabMenuElement extends SuppressInitialAnimation(AttachInternals(Role(LitElement, \"menu\"))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      position: absolute;\r\n      flex-direction: column;\r\n      row-gap: var(--m3e-fab-menu-spacing, 0.25rem);\r\n      padding: unset;\r\n      margin: unset;\r\n      border: unset;\r\n      overflow: visible;\r\n      max-width: var(--m3e-fab-menu-max-width, 17.5rem);\r\n      opacity: 0;\r\n      background-color: transparent;\r\n      display: none;\r\n    }\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.spring.fastEffects}, \r\n        transform ${DesignToken.motion.spring.fastSpatial},\r\n        overlay ${DesignToken.motion.spring.fastEffects} allow-discrete,\r\n        display ${DesignToken.motion.spring.fastEffects} allow-discrete`,\r\n      )};\r\n    }\r\n    .base {\r\n      display: contents;\r\n    }\r\n    :host([variant=\"primary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-primary-fab-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-item-container-color: var(--m3e-primary-fab-container-color, ${DesignToken.color.primaryContainer});\r\n      --_fab-menu-background-hover-color: var(--m3e-primary-fab-hover-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-background-focus-color: var(--m3e-primary-fab-focus-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-ripple-color: var(--m3e-primary-fab-ripple-color, ${DesignToken.color.onPrimaryContainer});\r\n    }\r\n    :host([variant=\"secondary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-secondary-fab-color, ${DesignToken.color.onSecondaryContainer});\r\n      --_fab-menu-item-container-color: var(\r\n        --m3e-secondary-fab-container-color,\r\n        ${DesignToken.color.secondaryContainer}\r\n      );\r\n      --_fab-menu-background-hover-color: var(\r\n        --m3e-secondary-fab-hover-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --_fab-menu-background-focus-color: var(\r\n        --m3e-secondary-fab-focus-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --_fab-menu-ripple-color: var(--m3e-secondary-fab-ripple-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([variant=\"tertiary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-tertiary-fab-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-item-container-color: var(--m3e-tertiary-fab-container-color, ${DesignToken.color.tertiaryContainer});\r\n      --_fab-menu-background-hover-color: var(--m3e-tertiary-fab-hover-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-background-focus-color: var(--m3e-tertiary-fab-focus-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-ripple-color: var(--m3e-tertiary-fab-ripple-color, ${DesignToken.color.onTertiaryContainer});\r\n    }\r\n    :host {\r\n      transform: scaleX(0.8);\r\n    }\r\n    :host(:is(:state(--left), :--left)) {\r\n      align-items: flex-start;\r\n      transform-origin: left;\r\n    }\r\n    :host(:is(:state(--right), :--right)) {\r\n      align-items: flex-end;\r\n      transform-origin: right;\r\n    }\r\n    :host(:popover-open) {\r\n      transform: scaleX(1);\r\n      display: inline-flex;\r\n      opacity: 1;\r\n    }\r\n    :host::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    @starting-style {\r\n      :host(:popover-open) {\r\n        opacity: 0;\r\n      }\r\n      :host(:popover-open) {\r\n        transform: scaleX(0.8);\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host {\r\n        border-radius: ${DesignToken.shape.corner.medium};\r\n        outline: 1px solid MenuText;\r\n        background-color: Menu;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #fabTabIndex?: number;\r\n  /** @private */ #trigger?: HTMLElement;\r\n  /** @private */ #anchoringCleanup?: () => void;\r\n\r\n  /** @private */\r\n  readonly #listManager = new RovingTabIndexManager<LitElement & DisabledMixin>()\r\n    .withWrap()\r\n    .withHomeAndEnd()\r\n    .withVerticalOrientation();\r\n\r\n  /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n  /** @private */ readonly #documentClickHandler = (e: MouseEvent) => this.#handleDocumentClick(e);\r\n\r\n  /** @private */\r\n  readonly #scrollController = new ScrollController(this, { target: null, callback: () => this.hide() });\r\n\r\n  /** @private */\r\n  readonly #toggleHandler = (e: ToggleEvent) => {\r\n    if (e.newState === \"closed\") {\r\n      this.#anchoringCleanup?.();\r\n      this.#anchoringCleanup = undefined;\r\n    } else {\r\n      setTimeout(() => {\r\n        this.#listManager.setActiveItem(this.#listManager.items.find((x) => !x.disabled));\r\n      }, 40);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * The appearance variant of the menu.\r\n   * @default \"primary\"\r\n   */\r\n  @property({ reflect: true }) variant: FabMenuVariant = \"primary\";\r\n\r\n  /** Whether the menu is open. */\r\n  get isOpen() {\r\n    return this.#trigger !== undefined;\r\n  }\r\n\r\n  /**\r\n   * Opens the menu.\r\n   * @param {HTMLElement} trigger The element that triggered the menu.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened.\r\n   */\r\n  async show(trigger: HTMLElement): Promise<void> {\r\n    if (this.#trigger && this.#trigger !== trigger) {\r\n      this.hide();\r\n    }\r\n\r\n    this.#anchoringCleanup?.();\r\n    this.#anchoringCleanup = await positionAnchor(\r\n      this,\r\n      trigger,\r\n      {\r\n        position: \"top-end\",\r\n        inline: true,\r\n        shift: \"main\",\r\n        flip: true,\r\n        offset: 8,\r\n      },\r\n      (x, y, position) => {\r\n        setCustomState(this, \"--right\", position.includes(\"end\"));\r\n        setCustomState(this, \"--left\", position.includes(\"start\"));\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          this.style.right = `${window.innerWidth - x - this.clientWidth}px`;\r\n          this.style.left = \"\";\r\n        } else {\r\n          this.style.left = `${x}px`;\r\n          this.style.right = \"\";\r\n        }\r\n        this.style.top = `${y}px`;\r\n      },\r\n    );\r\n\r\n    this.showPopover();\r\n\r\n    this.#trigger = trigger;\r\n    this.#trigger.ariaExpanded = \"true\";\r\n    this.#scrollController.observe(this.#trigger);\r\n\r\n    this.#attachFab();\r\n  }\r\n\r\n  /**\r\n   * Hides the menu.\r\n   * @param {boolean} [restoreFocus=false] A value indicating whether to restore focus to the menu's trigger.\r\n   */\r\n  hide(restoreFocus: boolean = false): void {\r\n    this.#anchoringCleanup?.();\r\n    this.#anchoringCleanup = undefined;\r\n\r\n    if (this.#trigger) {\r\n      this.#trigger.ariaExpanded = \"false\";\r\n      if (restoreFocus) {\r\n        this.#trigger.focus();\r\n      }\r\n\r\n      this.#detachFab();\r\n\r\n      this.#scrollController.unobserve(this.#trigger);\r\n      this.#trigger = undefined;\r\n    }\r\n    this.hidePopover();\r\n  }\r\n\r\n  /**\r\n   * Toggles the menu.\r\n   * @param {HTMLElement} trigger The element that triggered the menu.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened or closed.\r\n   */\r\n  async toggle(trigger: HTMLElement): Promise<void> {\r\n    if (this.#trigger) {\r\n      this.hide();\r\n    } else {\r\n      await this.show(trigger);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.tabIndex = -1;\r\n    this.setAttribute(\"popover\", \"manual\");\r\n    this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.addEventListener(\"toggle\", this.#toggleHandler);\r\n    document.addEventListener(\"click\", this.#documentClickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.removeEventListener(\"toggle\", this.#toggleHandler);\r\n    document.removeEventListener(\"click\", this.#documentClickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\"><slot @slotchange=\"${this.#handleSlotChange}\"></slot></div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    const { added } = this.#listManager.setItems([...this.querySelectorAll(\"m3e-fab-menu-item\")]);\r\n    if (!this.#listManager.activeItem) {\r\n      this.#listManager.updateActiveItem(added.find((x) => !x.disabled));\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    switch (e.key) {\r\n      case \"Tab\":\r\n        this.hide();\r\n        break;\r\n\r\n      case \"Escape\":\r\n        if (!e.shiftKey && !e.ctrlKey) {\r\n          this.hide(true);\r\n        }\r\n        break;\r\n\r\n      default:\r\n        this.#listManager.onKeyDown(e);\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentClick(e: MouseEvent): void {\r\n    if (!e.composedPath().some((x) => x instanceof M3eFabMenuItemElement || x === this.#trigger)) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #attachFab(): void {\r\n    const fab = this.#trigger?.closest<M3eFabElement>(\"m3e-fab\");\r\n    if (fab) {\r\n      this.#fabTabIndex = fab.tabIndex;\r\n      fab.addEventListener(\"keydown\", this.#keyDownHandler);\r\n      this.#listManager.setItems([...this.#listManager.items, fab]);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #detachFab(): void {\r\n    const fab = this.#trigger?.closest<M3eFabElement>(\"m3e-fab\");\r\n    if (fab) {\r\n      if (this.#fabTabIndex !== undefined) {\r\n        fab.tabIndex = this.#fabTabIndex;\r\n      }\r\n      fab.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n      this.#listManager.setItems([...this.#listManager.items.filter((x) => x !== fab)]);\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eFabMenuElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eFabMenuElement {\r\n  addEventListener<K extends keyof M3eFabMenuElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eFabMenuElement, ev: M3eFabMenuElementEventMap[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 M3eFabMenuElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eFabMenuElement, ev: M3eFabMenuElementEventMap[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-fab-menu\": M3eFabMenuElement;\r\n  }\r\n}\r\n","import { ActionElementBase, customElement, HtmlFor } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eFabMenuElement } from \"./FabMenuElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to open a floating action button (FAB) menu.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-fab-menu-trigger\r\n */\r\n@customElement(\"m3e-fab-menu-trigger\")\r\nexport class M3eFabMenuTriggerElement extends HtmlFor(ActionElementBase) {\r\n  /** The menu triggered by the element. */\r\n  get menu(): M3eFabMenuElement | null {\r\n    return this.control instanceof M3eFabMenuElement ? this.control : null;\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.parentElement && control instanceof M3eFabMenuElement) {\r\n      this.parentElement.ariaHasPopup = \"menu\";\r\n      this.parentElement.ariaExpanded = \"false\";\r\n      if (control.id) {\r\n        addAriaReferencedId(this.parentElement, \"aria-controls\", control.id);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = null;\r\n      this.parentElement.ariaExpanded = null;\r\n      if (this.control?.id) {\r\n        removeAriaReferencedId(this.parentElement, \"aria-controls\", this.control.id);\r\n      }\r\n    }\r\n\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    if (this.parentElement) {\r\n      this.menu?.toggle(this.parentElement);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-fab-menu-trigger\": M3eFabMenuTriggerElement;\r\n  }\r\n}\r\n"],"names":["M3eFabMenuItemElement","KeyboardClick","LinkButton","Disabled","AttachInternals","Role","LitElement","constructor","_M3eFabMenuItemElement_clickHandler","set","this","e","__classPrivateFieldGet","call","menu","closest","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_elevation","_focusRing","_stateLayer","_ripple","forEach","x","attach","render","html","disabled","renderPseudoLink","defaultPrevented","hide","styles","css","unsafeCSS","DesignToken","motion","duration","short4","easing","standard","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","shape","corner","full","color","onSurface","__decorate","query","prototype","customElement","M3eFabMenuElement","SuppressInitialAnimation","_M3eFabMenuElement_fabTabIndex","_M3eFabMenuElement_trigger","_M3eFabMenuElement_anchoringCleanup","_M3eFabMenuElement_listManager","RovingTabIndexManager","withWrap","withHomeAndEnd","withVerticalOrientation","_M3eFabMenuElement_keyDownHandler","_M3eFabMenuElement_documentClickHandler","_M3eFabMenuElement_scrollController","ScrollController","target","callback","_M3eFabMenuElement_toggleHandler","newState","__classPrivateFieldSet","undefined","setTimeout","setActiveItem","items","find","variant","isOpen","show","trigger","positionAnchor","position","inline","shift","flip","offset","y","setCustomState","includes","M3eDirectionality","current","style","right","window","innerWidth","clientWidth","left","top","showPopover","ariaExpanded","observe","_M3eFabMenuElement_instances","_M3eFabMenuElement_attachFab","restoreFocus","focus","_M3eFabMenuElement_detachFab","unobserve","hidePopover","toggle","tabIndex","setAttribute","document","_M3eFabMenuElement_handleSlotChange","added","setItems","querySelectorAll","activeItem","updateActiveItem","key","shiftKey","ctrlKey","onKeyDown","composedPath","some","fab","filter","spring","fastEffects","fastSpatial","onPrimaryContainer","primaryContainer","onSecondaryContainer","secondaryContainer","onTertiaryContainer","tertiaryContainer","medium","property","reflect","M3eFabMenuTriggerElement","HtmlFor","ActionElementBase","control","parentElement","ariaHasPopup","id","addAriaReferencedId","detach","removeAriaReferencedId","_onClick"],"mappings":"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"}
+{"version":3,"file":"fab-menu.min.js","sources":["../../src/fab-menu/FabMenuElement.ts","../../src/fab-menu/FabMenuItemElement.ts","../../src/fab-menu/FabMenuTriggerElement.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  ClickOutsideController,\r\n  customElement,\r\n  DesignToken,\r\n  DisabledMixin,\r\n  Role,\r\n  ScrollController,\r\n  setCustomState,\r\n  SuppressInitialAnimation,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { RovingTabIndexManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { M3eFabElement } from \"@m3e/web/fab\";\r\n\r\nimport { FabMenuVariant } from \"./FabMenuVariant\";\r\n\r\n/**\r\n * A menu, opened from a floating action button (FAB), used to display multiple related actions.\r\n *\r\n * @description\r\n * The `m3e-fab-menu` component presents a dynamic menu of related actions, elegantly revealed from a\r\n * floating action button (FAB). Designed using expressive, adaptive surfaces, it enables seamless access\r\n * to contextual actions in modern, visually rich interfaces.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-fab-menu\r\n *\r\n * @slot - Renders the contents of the menu.\r\n *\r\n * @attr variant - The appearance variant of the menu.\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-fab-menu-spacing - Vertical gap between menu items.\r\n * @cssprop --m3e-fab-menu-max-width - Maximum width of the menu.\r\n * @cssprop --m3e-primary-fab-color - Foreground color for primary variant items.\r\n * @cssprop --m3e-primary-fab-container-color - Container color for primary variant items.\r\n * @cssprop --m3e-primary-fab-hover-color - Hover background color for primary variant items.\r\n * @cssprop --m3e-primary-fab-focus-color - Focus background color for primary variant items.\r\n * @cssprop --m3e-primary-fab-ripple-color - Ripple color for primary variant items.\r\n * @cssprop --m3e-secondary-fab-color - Foreground color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-container-color - Container color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-hover-color - Hover background color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-focus-color - Focus background color for secondary variant items.\r\n * @cssprop --m3e-secondary-fab-ripple-color - Ripple color for secondary variant items.\r\n * @cssprop --m3e-tertiary-fab-color - Foreground color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-container-color - Container color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-hover-color - Hover background color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-focus-color - Focus background color for tertiary variant items.\r\n * @cssprop --m3e-tertiary-fab-ripple-color - Ripple color for tertiary variant items.\r\n */\r\n@customElement(\"m3e-fab-menu\")\r\nexport class M3eFabMenuElement extends SuppressInitialAnimation(AttachInternals(Role(LitElement, \"menu\"))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      position: absolute;\r\n      flex-direction: column;\r\n      row-gap: var(--m3e-fab-menu-spacing, 0.25rem);\r\n      padding: unset;\r\n      margin: unset;\r\n      border: unset;\r\n      overflow: visible;\r\n      max-width: var(--m3e-fab-menu-max-width, 17.5rem);\r\n      opacity: 0;\r\n      background-color: transparent;\r\n      display: none;\r\n    }\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.spring.fastEffects}, \r\n        transform ${DesignToken.motion.spring.fastSpatial},\r\n        overlay ${DesignToken.motion.spring.fastEffects} allow-discrete,\r\n        display ${DesignToken.motion.spring.fastEffects} allow-discrete`,\r\n      )};\r\n    }\r\n    .base {\r\n      display: contents;\r\n    }\r\n    :host([variant=\"primary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-primary-fab-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-item-container-color: var(--m3e-primary-fab-container-color, ${DesignToken.color.primaryContainer});\r\n      --_fab-menu-background-hover-color: var(--m3e-primary-fab-hover-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-background-focus-color: var(--m3e-primary-fab-focus-color, ${DesignToken.color.onPrimaryContainer});\r\n      --_fab-menu-ripple-color: var(--m3e-primary-fab-ripple-color, ${DesignToken.color.onPrimaryContainer});\r\n    }\r\n    :host([variant=\"secondary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-secondary-fab-color, ${DesignToken.color.onSecondaryContainer});\r\n      --_fab-menu-item-container-color: var(\r\n        --m3e-secondary-fab-container-color,\r\n        ${DesignToken.color.secondaryContainer}\r\n      );\r\n      --_fab-menu-background-hover-color: var(\r\n        --m3e-secondary-fab-hover-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --_fab-menu-background-focus-color: var(\r\n        --m3e-secondary-fab-focus-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --_fab-menu-ripple-color: var(--m3e-secondary-fab-ripple-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([variant=\"tertiary\"]) .base {\r\n      --_fab-menu-item-color: var(--m3e-tertiary-fab-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-item-container-color: var(--m3e-tertiary-fab-container-color, ${DesignToken.color.tertiaryContainer});\r\n      --_fab-menu-background-hover-color: var(--m3e-tertiary-fab-hover-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-background-focus-color: var(--m3e-tertiary-fab-focus-color, ${DesignToken.color.onTertiaryContainer});\r\n      --_fab-menu-ripple-color: var(--m3e-tertiary-fab-ripple-color, ${DesignToken.color.onTertiaryContainer});\r\n    }\r\n    :host {\r\n      transform: scaleX(0.8);\r\n    }\r\n    :host(:is(:state(--left), :--left)) {\r\n      align-items: flex-start;\r\n      transform-origin: left;\r\n    }\r\n    :host(:is(:state(--right), :--right)) {\r\n      align-items: flex-end;\r\n      transform-origin: right;\r\n    }\r\n    :host(:popover-open) {\r\n      transform: scaleX(1);\r\n      display: inline-flex;\r\n      opacity: 1;\r\n    }\r\n    :host::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    @starting-style {\r\n      :host(:popover-open) {\r\n        opacity: 0;\r\n      }\r\n      :host(:popover-open) {\r\n        transform: scaleX(0.8);\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host {\r\n        border-radius: ${DesignToken.shape.corner.medium};\r\n        outline: 1px solid MenuText;\r\n        background-color: Menu;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #fabTabIndex?: number;\r\n  /** @private */ #trigger?: HTMLElement;\r\n  /** @private */ #anchoringCleanup?: () => void;\r\n\r\n  /** @private */\r\n  readonly #listManager = new RovingTabIndexManager<LitElement & DisabledMixin>()\r\n    .withWrap()\r\n    .withHomeAndEnd()\r\n    .withVerticalOrientation();\r\n\r\n  /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n\r\n  /** @private */\r\n  readonly #scrollController = new ScrollController(this, { target: null, callback: () => this.hide() });\r\n\r\n  /** @private */ readonly #clickOutsideController = new ClickOutsideController(this, {\r\n    target: null,\r\n    callback: () => this.hide(),\r\n  });\r\n\r\n  /** @private */\r\n  readonly #toggleHandler = (e: ToggleEvent) => {\r\n    switch (e.newState) {\r\n      case \"open\":\r\n        this.#clickOutsideController.observe(this);\r\n        if (this.#trigger) {\r\n          this.#clickOutsideController.observe(this.#trigger);\r\n        }\r\n        setTimeout(() => this.#listManager.setActiveItem(this.#listManager.items.find((x) => !x.disabled)), 40);\r\n        break;\r\n\r\n      case \"closed\":\r\n        this.#clickOutsideController.unobserveAll();\r\n        this.#anchoringCleanup?.();\r\n        this.#anchoringCleanup = undefined;\r\n        break;\r\n    }\r\n  };\r\n\r\n  /**\r\n   * The appearance variant of the menu.\r\n   * @default \"primary\"\r\n   */\r\n  @property({ reflect: true }) variant: FabMenuVariant = \"primary\";\r\n\r\n  /** Whether the menu is open. */\r\n  get isOpen() {\r\n    return this.#trigger !== undefined;\r\n  }\r\n\r\n  /**\r\n   * Opens the menu.\r\n   * @param {HTMLElement} trigger The element that triggered the menu.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened.\r\n   */\r\n  async show(trigger: HTMLElement): Promise<void> {\r\n    if (this.#trigger && this.#trigger !== trigger) {\r\n      this.hide();\r\n    }\r\n\r\n    this.#anchoringCleanup?.();\r\n    this.#anchoringCleanup = await positionAnchor(\r\n      this,\r\n      trigger,\r\n      {\r\n        position: \"top-end\",\r\n        inline: true,\r\n        shift: \"main\",\r\n        flip: true,\r\n        offset: 8,\r\n      },\r\n      (x, y, position) => {\r\n        setCustomState(this, \"--right\", position.includes(\"end\"));\r\n        setCustomState(this, \"--left\", position.includes(\"start\"));\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          this.style.right = `${window.innerWidth - x - this.clientWidth}px`;\r\n          this.style.left = \"\";\r\n        } else {\r\n          this.style.left = `${x}px`;\r\n          this.style.right = \"\";\r\n        }\r\n        this.style.top = `${y}px`;\r\n      },\r\n    );\r\n\r\n    this.showPopover();\r\n\r\n    this.#trigger = trigger;\r\n    this.#trigger.ariaExpanded = \"true\";\r\n    this.#scrollController.observe(this.#trigger);\r\n\r\n    this.#attachFab();\r\n  }\r\n\r\n  /**\r\n   * Hides the menu.\r\n   * @param {boolean} [restoreFocus=false] A value indicating whether to restore focus to the menu's trigger.\r\n   */\r\n  hide(restoreFocus: boolean = false): void {\r\n    this.#anchoringCleanup?.();\r\n    this.#anchoringCleanup = undefined;\r\n\r\n    if (this.#trigger) {\r\n      this.#trigger.ariaExpanded = \"false\";\r\n      if (restoreFocus) {\r\n        this.#trigger.focus();\r\n      }\r\n\r\n      this.#detachFab();\r\n\r\n      this.#scrollController.unobserve(this.#trigger);\r\n      this.#trigger = undefined;\r\n    }\r\n    this.hidePopover();\r\n  }\r\n\r\n  /**\r\n   * Toggles the menu.\r\n   * @param {HTMLElement} trigger The element that triggered the menu.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the menu is opened or closed.\r\n   */\r\n  async toggle(trigger: HTMLElement): Promise<void> {\r\n    if (this.#trigger) {\r\n      this.hide();\r\n    } else {\r\n      await this.show(trigger);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.tabIndex = -1;\r\n    this.setAttribute(\"popover\", \"manual\");\r\n    this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.addEventListener(\"toggle\", this.#toggleHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n    this.removeEventListener(\"toggle\", this.#toggleHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\"><slot @slotchange=\"${this.#handleSlotChange}\"></slot></div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    const { added } = this.#listManager.setItems([...this.querySelectorAll(\"m3e-fab-menu-item\")]);\r\n    if (!this.#listManager.activeItem) {\r\n      this.#listManager.updateActiveItem(added.find((x) => !x.disabled));\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    switch (e.key) {\r\n      case \"Tab\":\r\n        this.hide();\r\n        break;\r\n\r\n      case \"Escape\":\r\n        if (!e.shiftKey && !e.ctrlKey) {\r\n          this.hide(true);\r\n        }\r\n        break;\r\n\r\n      default:\r\n        this.#listManager.onKeyDown(e);\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #attachFab(): void {\r\n    const fab = this.#trigger?.closest<M3eFabElement>(\"m3e-fab\");\r\n    if (fab) {\r\n      this.#fabTabIndex = fab.tabIndex;\r\n      fab.addEventListener(\"keydown\", this.#keyDownHandler);\r\n      this.#listManager.setItems([...this.#listManager.items, fab]);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #detachFab(): void {\r\n    const fab = this.#trigger?.closest<M3eFabElement>(\"m3e-fab\");\r\n    if (fab) {\r\n      if (this.#fabTabIndex !== undefined) {\r\n        fab.tabIndex = this.#fabTabIndex;\r\n      }\r\n      fab.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n      this.#listManager.setItems([...this.#listManager.items.filter((x) => x !== fab)]);\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eFabMenuElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eFabMenuElement {\r\n  addEventListener<K extends keyof M3eFabMenuElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eFabMenuElement, ev: M3eFabMenuElementEventMap[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 M3eFabMenuElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eFabMenuElement, ev: M3eFabMenuElementEventMap[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-fab-menu\": M3eFabMenuElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  KeyboardClick,\r\n  LinkButton,\r\n  M3eElevationElement,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  renderPseudoLink,\r\n  Role,\r\n} from \"@m3e/web/core\";\r\n\r\nimport type { M3eFabMenuElement } from \"./FabMenuElement\";\r\n\r\n/**\r\n * An item of a floating action button (FAB) menu.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-menu-item\r\n *\r\n * @slot - Renders the label of the item.\r\n * @slot icon - Renders an icon before the items's label.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.\r\n * @attr href - The URL to which the link button points.\r\n * @attr rel - The relationship between the `target` of the link button and the document.\r\n * @attr target - The target of the link button.\r\n *\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-fab-menu-item-height - Height of the menu item.\r\n * @cssprop --m3e-fab-menu-item-font-size - Font size of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-font-weight - Font weight of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-line-height - Line height of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-tracking - Letter spacing of the menu item label.\r\n * @cssprop --m3e-fab-menu-item-shape - Border radius of the menu item.\r\n * @cssprop --m3e-fab-menu-item-leading-space - Padding at the start of the menu item.\r\n * @cssprop --m3e-fab-menu-item-trailing-space - Padding at the end of the menu item.\r\n * @cssprop --m3e-fab-menu-item-spacing - Gap between icon and label.\r\n * @cssprop --m3e-fab-menu-item-icon-size - Size of the icon in the menu item.\r\n */\r\n@customElement(\"m3e-fab-menu-item\")\r\nexport class M3eFabMenuItemElement extends KeyboardClick(\r\n  LinkButton(Disabled(AttachInternals(Role(LitElement, \"menuitem\"), true))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      outline: none;\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n      height: var(--m3e-fab-menu-item-height, 3.5rem);\r\n      font-size: var(--m3e-fab-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-fab-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-fab-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-fab-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      border-radius: var(--m3e-fab-menu-item-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    :host(:not(:disabled)) .label,\r\n    :host(:not(:disabled)) .icon {\r\n      color: var(--_fab-menu-item-color);\r\n    }\r\n    :host(:not(:disabled)) .base {\r\n      background-color: var(--_fab-menu-item-container-color);\r\n      --m3e-state-layer-hover-color: var(--_fab-menu-background-hover-color);\r\n      --m3e-state-layer-focus-color: var(--_fab-menu-background-focus-color);\r\n      --m3e-ripple-color: var(--_fab-menu-ripple-color);\r\n    }\r\n    :host(:disabled) .base {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-fab-menu-item-disabled-container-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-fab-menu-item-disabled-container-opacity, 10%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:disabled) .label,\r\n    :host(:disabled) .icon {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-fab-menu-item-disabled-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-fab-menu-item-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .wrapper {\r\n      width: 100%;\r\n      overflow: hidden;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      padding-inline-start: var(--m3e-fab-menu-item-leading-space, 1.5rem);\r\n      padding-inline-end: var(--m3e-fab-menu-item-trailing-space, 1.5rem);\r\n      column-gap: var(--m3e-fab-menu-item-spacing, 0.5rem);\r\n    }\r\n    .label {\r\n      justify-self: center;\r\n      flex: 1 1 auto;\r\n      text-align: center;\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    .icon {\r\n      font-size: var(--m3e-fab-menu-item-icon-size, 1.5rem);\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    ::slotted([slot=\"icon\"]) {\r\n      font-size: inherit !important;\r\n      flex: none;\r\n    }\r\n    ::slotted(svg[slot=\"icon\"]) {\r\n      width: 1em;\r\n      height: 1em;\r\n    }\r\n    a {\r\n      all: unset;\r\n      display: block;\r\n      position: absolute;\r\n      top: 0px;\r\n      left: 0px;\r\n      right: 0px;\r\n      bottom: 0px;\r\n      z-index: 1;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base,\r\n      .label,\r\n      .icon {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base,\r\n      .label,\r\n      .icon {\r\n        transition: none;\r\n      }\r\n      :host(:not(:disabled)) .base {\r\n        background-color: Menu;\r\n      }\r\n      :host(:not(:disabled)) .label,\r\n      :host(:not(:disabled)) .icon {\r\n        color: MenuText;\r\n      }\r\n      :host(:disabled) .label,\r\n      :host(:disabled) .icon {\r\n        color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".elevation\") private readonly _elevation?: M3eElevationElement;\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** The floating action button (FAB) menu to which this item belongs. */\r\n  get menu(): M3eFabMenuElement | null {\r\n    return this.closest(\"m3e-fab-menu\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-elevation class=\"elevation\" ?disabled=\"${this.disabled}\"></m3e-elevation>\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      ${this[renderPseudoLink]()}\r\n      <div class=\"wrapper\">\r\n        <slot class=\"icon\" name=\"icon\" aria-hidden=\"true\"></slot>\r\n        <div class=\"label\"><slot></slot></div>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (!e.defaultPrevented) {\r\n      this.menu?.hide(true);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-fab-menu-item\": M3eFabMenuItemElement;\r\n  }\r\n}\r\n","import { ActionElementBase, customElement, HtmlFor } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eFabMenuElement } from \"./FabMenuElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to open a floating action button (FAB) menu.\r\n *\r\n * @example\r\n * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.\r\n * ```html\r\n * <m3e-fab variant=\"primary\" size=\"large\">\r\n *  <m3e-fab-menu-trigger for=\"fabmenu\">\r\n *    <m3e-icon name=\"edit\"></m3e-icon>\r\n *  </m3e-fab-menu-trigger>\r\n * </m3e-fab>\r\n * <m3e-fab-menu id=\"fabmenu\" variant=\"secondary\">\r\n *  <m3e-fab-menu-item>First</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>\r\n *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>\r\n * </m3e-fab-menu>\r\n * ```\r\n *\r\n * @tag m3e-fab-menu-trigger\r\n */\r\n@customElement(\"m3e-fab-menu-trigger\")\r\nexport class M3eFabMenuTriggerElement extends HtmlFor(ActionElementBase) {\r\n  /** The menu triggered by the element. */\r\n  get menu(): M3eFabMenuElement | null {\r\n    return this.control instanceof M3eFabMenuElement ? this.control : null;\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.parentElement && control instanceof M3eFabMenuElement) {\r\n      this.parentElement.ariaHasPopup = \"menu\";\r\n      this.parentElement.ariaExpanded = \"false\";\r\n      if (control.id) {\r\n        addAriaReferencedId(this.parentElement, \"aria-controls\", control.id);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = null;\r\n      this.parentElement.ariaExpanded = null;\r\n      if (this.control?.id) {\r\n        removeAriaReferencedId(this.parentElement, \"aria-controls\", this.control.id);\r\n      }\r\n    }\r\n\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    if (this.parentElement) {\r\n      this.menu?.toggle(this.parentElement);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-fab-menu-trigger\": M3eFabMenuTriggerElement;\r\n  }\r\n}\r\n"],"names":["M3eFabMenuElement","SuppressInitialAnimation","AttachInternals","Role","LitElement","constructor","_M3eFabMenuElement_fabTabIndex","set","this","_M3eFabMenuElement_trigger","_M3eFabMenuElement_anchoringCleanup","_M3eFabMenuElement_listManager","RovingTabIndexManager","withWrap","withHomeAndEnd","withVerticalOrientation","_M3eFabMenuElement_keyDownHandler","e","__classPrivateFieldGet","call","_M3eFabMenuElement_scrollController","ScrollController","target","callback","hide","_M3eFabMenuElement_clickOutsideController","ClickOutsideController","_M3eFabMenuElement_toggleHandler","newState","observe","setTimeout","setActiveItem","items","find","x","disabled","unobserveAll","__classPrivateFieldSet","undefined","variant","isOpen","show","trigger","positionAnchor","position","inline","shift","flip","offset","y","setCustomState","includes","M3eDirectionality","current","style","right","window","innerWidth","clientWidth","left","top","showPopover","ariaExpanded","_M3eFabMenuElement_instances","_M3eFabMenuElement_attachFab","restoreFocus","focus","_M3eFabMenuElement_detachFab","unobserve","hidePopover","toggle","connectedCallback","super","tabIndex","setAttribute","addEventListener","disconnectedCallback","removeEventListener","render","html","_M3eFabMenuElement_handleSlotChange","added","setItems","querySelectorAll","activeItem","updateActiveItem","key","shiftKey","ctrlKey","onKeyDown","fab","closest","filter","styles","css","unsafeCSS","DesignToken","motion","spring","fastEffects","fastSpatial","color","onPrimaryContainer","primaryContainer","onSecondaryContainer","secondaryContainer","onTertiaryContainer","tertiaryContainer","shape","corner","medium","__decorate","property","reflect","prototype","customElement","M3eFabMenuItemElement","KeyboardClick","LinkButton","Disabled","_M3eFabMenuItemElement_clickHandler","menu","firstUpdated","_changedProperties","_elevation","_focusRing","_stateLayer","_ripple","forEach","attach","renderPseudoLink","defaultPrevented","duration","short4","easing","standard","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","full","onSurface","query","M3eFabMenuTriggerElement","HtmlFor","ActionElementBase","control","parentElement","ariaHasPopup","id","addAriaReferencedId","detach","removeAriaReferencedId","_onClick"],"mappings":";;;;;iwBA8EO,IAAMA,EAAN,cAAgCC,EAAyBC,EAAgBC,EAAKC,EAAY,WAA1FC,WAAAA,mCAkGWC,EAAAC,IAAAC,aACAC,EAAAF,IAAAC,aACAE,EAAAH,IAAAC,aAGPG,EAAAJ,IAAAC,MAAe,IAAII,GACzBC,WACAC,iBACAC,2BAEsBC,EAAAT,IAAAC,KAAmBS,GAAqBC,EAAAV,cAAmBW,KAAnBX,KAAoBS,IAG5EG,EAAAb,IAAAC,KAAoB,IAAIa,EAAiBb,KAAM,CAAEc,OAAQ,KAAMC,SAAUA,IAAMf,KAAKgB,UAEpEC,EAAAlB,IAAAC,KAA0B,IAAIkB,EAAuBlB,KAAM,CAClFc,OAAQ,KACRC,SAAUA,IAAMf,KAAKgB,UAIdG,EAAApB,IAAAC,KAAkBS,IACzB,OAAQA,EAAEW,UACR,IAAK,OACHV,EAAAV,KAAIiB,EAAA,KAAyBI,QAAQrB,MACjCU,EAAAV,KAAIC,EAAA,MACNS,EAAAV,YAA6BqB,QAAQX,EAAAV,KAAIC,EAAA,MAE3CqB,WAAW,IAAMZ,EAAAV,KAAIG,EAAA,KAAcoB,cAAcb,EAAAV,KAAIG,EAAA,KAAcqB,MAAMC,KAAMC,IAAOA,EAAEC,WAAY,IACpG,MAEF,IAAK,SACHjB,EAAAV,KAAIiB,EAAA,KAAyBW,eAC7BlB,EAAAV,KAAIE,EAAA,MAAoBS,KAAxBX,MACA6B,EAAA7B,KAAIE,OAAqB4B,EAAS,QASX9B,KAAA+B,QAA0B,SA6JzD,CA1JE,UAAIC,GACF,YAAyBF,IAAlBpB,EAAAV,KAAIC,EAAA,IACb,CAOA,UAAMgC,CAAKC,GACLxB,EAAAV,KAAIC,EAAA,MAAaS,EAAAV,KAAIC,EAAA,OAAciC,GACrClC,KAAKgB,OAGPN,EAAAV,KAAIE,EAAA,MAAoBS,KAAxBX,MACA6B,EAAA7B,aAA+BmC,EAC7BnC,KACAkC,EACA,CACEE,SAAU,UACVC,QAAQ,EACRC,MAAO,OACPC,MAAM,EACNC,OAAQ,GAEV,CAACd,EAAGe,EAAGL,KACLM,EAAe1C,KAAM,UAAWoC,EAASO,SAAS,QAClDD,EAAe1C,KAAM,SAAUoC,EAASO,SAAS,UACf,QAA9BC,EAAkBC,SACpB7C,KAAK8C,MAAMC,MAAWC,OAAOC,WAAavB,EAAI1B,KAAKkD,YAAhC,KACnBlD,KAAK8C,MAAMK,KAAO,KAElBnD,KAAK8C,MAAMK,KAAO,GAAGzB,MACrB1B,KAAK8C,MAAMC,MAAQ,IAErB/C,KAAK8C,MAAMM,IAAM,GAAGX,aAIxBzC,KAAKqD,cAELxB,EAAA7B,KAAIC,EAAYiC,EAAO,KACvBxB,EAAAV,KAAIC,EAAA,KAAUqD,aAAe,OAC7B5C,EAAAV,YAAuBqB,QAAQX,EAAAV,KAAIC,EAAA,MAEnCS,EAAAV,KAAIuD,EAAA,IAAAC,GAAW7C,KAAfX,KACF,CAMAgB,IAAAA,CAAKyC,GAAwB,GAC3B/C,EAAAV,KAAIE,EAAA,MAAoBS,KAAxBX,MACA6B,EAAA7B,KAAIE,OAAqB4B,EAAS,KAE9BpB,EAAAV,KAAIC,EAAA,OACNS,EAAAV,KAAIC,EAAA,KAAUqD,aAAe,QACzBG,GACF/C,EAAAV,KAAIC,EAAA,KAAUyD,QAGhBhD,EAAAV,KAAIuD,EAAA,IAAAI,GAAWhD,KAAfX,MAEAU,EAAAV,YAAuB4D,UAAUlD,EAAAV,KAAIC,EAAA,MACrC4B,EAAA7B,KAAIC,OAAY6B,EAAS,MAE3B9B,KAAK6D,aACP,CAOA,YAAMC,CAAO5B,GACPxB,EAAAV,KAAIC,EAAA,KACND,KAAKgB,aAEChB,KAAKiC,KAAKC,EAEpB,CAGS6B,iBAAAA,GACPC,MAAMD,oBAEN/D,KAAKiE,UAAW,EAChBjE,KAAKkE,aAAa,UAAW,UAC7BlE,KAAKmE,iBAAiB,UAAWzD,EAAAV,KAAIQ,EAAA,MACrCR,KAAKmE,iBAAiB,SAAUzD,EAAAV,KAAImB,EAAA,KACtC,CAGSiD,oBAAAA,GACPJ,MAAMI,uBAENpE,KAAKqE,oBAAoB,UAAW3D,EAAAV,KAAIQ,EAAA,MACxCR,KAAKqE,oBAAoB,SAAU3D,EAAAV,KAAImB,EAAA,KACzC,CAGmBmD,MAAAA,GACjB,OAAOC,CAAI,wCAAwC7D,EAAAV,KAAIuD,EAAA,IAAAiB,mBACzD,wJAIE,MAAMC,MAAEA,GAAU/D,EAAAV,KAAIG,EAAA,KAAcuE,SAAS,IAAI1E,KAAK2E,iBAAiB,uBAClEjE,EAAAV,YAAkB4E,YACrBlE,EAAAV,YAAkB6E,iBAAiBJ,EAAMhD,KAAMC,IAAOA,EAAEC,UAE5D,aAGelB,GACb,OAAQA,EAAEqE,KACR,IAAK,MACH9E,KAAKgB,OACL,MAEF,IAAK,SACEP,EAAEsE,UAAatE,EAAEuE,SACpBhF,KAAKgB,MAAK,GAEZ,MAEF,QACEN,EAAAV,KAAIG,EAAA,KAAc8E,UAAUxE,GAGlC,eAIE,MAAMyE,EAAMxE,EAAAV,KAAIC,EAAA,MAAWkF,QAAuB,WAC9CD,IACFrD,EAAA7B,KAAIF,EAAgBoF,EAAIjB,cACxBiB,EAAIf,iBAAiB,UAAWzD,EAAAV,KAAIQ,EAAA,MACpCE,EAAAV,KAAIG,EAAA,KAAcuE,SAAS,IAAIhE,EAAAV,KAAIG,EAAA,KAAcqB,MAAO0D,IAE5D,eAIE,MAAMA,EAAMxE,EAAAV,KAAIC,EAAA,MAAWkF,QAAuB,WAC9CD,SACwBpD,IAAtBpB,EAAAV,KAAIF,EAAA,OACNoF,EAAIjB,SAAWvD,EAAAV,aAEjBkF,EAAIb,oBAAoB,UAAW3D,EAAAV,KAAIQ,EAAA,MACvCE,EAAAV,KAAIG,EAAA,KAAcuE,SAAS,IAAIhE,EAAAV,KAAIG,EAAA,KAAcqB,MAAM4D,OAAQ1D,GAAMA,IAAMwD,KAE/E,EAvSgB1F,EAAA6F,OAAyBC,CAAG,0VAe1BC,EACZ,WAAWC,EAAYC,OAAOC,OAAOC,oCACzBH,EAAYC,OAAOC,OAAOE,iCAC5BJ,EAAYC,OAAOC,OAAOC,gDAC1BH,EAAYC,OAAOC,OAAOC,yJAOiBH,EAAYK,MAAMC,iGACEN,EAAYK,MAAME,6FACpBP,EAAYK,MAAMC,+FAClBN,EAAYK,MAAMC,sFAC3BN,EAAYK,MAAMC,sHAGzBN,EAAYK,MAAMG,sGAGvER,EAAYK,MAAMI,mGAIlBT,EAAYK,MAAMG,qGAIlBR,EAAYK,MAAMG,2FAE4CR,EAAYK,MAAMG,sHAG5BR,EAAYK,MAAMK,mGACEV,EAAYK,MAAMM,+FACpBX,EAAYK,MAAMK,iGAClBV,EAAYK,MAAMK,wFAC3BV,EAAYK,MAAMK,soBAoChEV,EAAYY,MAAMC,OAAOC,mEAkDnBC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA4CjH,EAAAkH,UAAA,eAAA,GA7ItDlH,EAAiB+G,EAAA,CAD7BI,EAAc,iBACFnH,GCZN,IAAMoH,EAAN,cAAoCC,EACzCC,EAAWC,EAASrH,EAAgBC,EAAKC,EAAY,aAAa,OAD7DC,WAAAA,mCAyIoBmH,EAAAjH,IAAAC,KAAiBS,GAAaC,EAAAV,cAAiBW,KAAjBX,KAAkBS,GA+C3E,CA5CE,QAAIwG,GACF,OAAOjH,KAAKmF,QAAQ,eACtB,CAGSpB,iBAAAA,GACPC,MAAMD,oBACN/D,KAAKmE,iBAAiB,QAASzD,EAAAV,KAAIgH,EAAA,KACrC,CAGS5C,oBAAAA,GACPJ,MAAMI,uBACNpE,KAAKqE,oBAAoB,QAAS3D,EAAAV,KAAIgH,EAAA,KACxC,CAGmBE,YAAAA,CAAaC,GAC9BnD,MAAMkD,aAAaC,GACnB,CAACnH,KAAKoH,WAAYpH,KAAKqH,WAAYrH,KAAKsH,YAAatH,KAAKuH,SAASC,QAAS9F,GAAMA,GAAG+F,OAAOzH,MAC9F,CAGSsE,MAAAA,GACP,OAAOC,CAAI,iEACqCvE,KAAK2B,6EACD3B,KAAK2B,6EACP3B,KAAK2B,oEACb3B,KAAK2B,sEAE3C3B,KAAK0H,sIAMX,0CAGajH,GACNA,EAAEkH,kBACL3H,KAAKiH,MAAMjG,MAAK,EAEpB,EAnLgB4F,EAAAvB,OAAyBC,CAAG,8RAe1BC,EACZ,oBAAoBC,EAAYC,OAAOmC,SAASC,UAAUrC,EAAYC,OAAOqC,OAAOC,+GAGtCvC,EAAYwC,UAAUD,SAASE,MAAMC,MAAMC,gEACvC3C,EAAYwC,UAAUD,SAASE,MAAMC,MAAME,kEAC3C5C,EAAYwC,UAAUD,SAASE,MAAMC,MAAMG,kEAC3C7C,EAAYwC,UAAUD,SAASE,MAAMC,MAAMI,4DAC/C9C,EAAYY,MAAMC,OAAOkC,8fAenB/C,EAAYK,MAAM2C,8MAS5BhD,EAAYK,MAAM2C,sjBA2BhDjD,EAAU,SAASC,EAAYC,OAAOmC,SAASC,UAAUrC,EAAYC,OAAOqC,OAAOC,6FAInFxC,EAAU,SAASC,EAAYC,OAAOmC,SAASC,UAAUrC,EAAYC,OAAOqC,OAAOC,0pBAkD/CxB,EAAA,CAArCkC,EAAM,eAAgE7B,EAAAF,UAAA,qBAChCH,EAAA,CAAtCkC,EAAM,gBAAiE7B,EAAAF,UAAA,qBAChCH,EAAA,CAAvCkC,EAAM,iBAAoE7B,EAAAF,UAAA,sBACxCH,EAAA,CAAlCkC,EAAM,YAAuD7B,EAAAF,UAAA,kBAvInEE,EAAqBL,EAAA,CADjCI,EAAc,sBACFC,GCrCN,IAAM8B,EAAN,cAAuCC,EAAQC,IAEpD,QAAI3B,GACF,OAAOjH,KAAK6I,mBAAmBrJ,EAAoBQ,KAAK6I,QAAU,IACpE,CAGSpB,MAAAA,CAAOoB,GACd7E,MAAMyD,OAAOoB,GAET7I,KAAK8I,eAAiBD,aAAmBrJ,IAC3CQ,KAAK8I,cAAcC,aAAe,OAClC/I,KAAK8I,cAAcxF,aAAe,QAC9BuF,EAAQG,IACVC,EAAoBjJ,KAAK8I,cAAe,gBAAiBD,EAAQG,IAGvE,CAGSE,MAAAA,GACHlJ,KAAK8I,gBACP9I,KAAK8I,cAAcC,aAAe,KAClC/I,KAAK8I,cAAcxF,aAAe,KAC9BtD,KAAK6I,SAASG,IAChBG,EAAuBnJ,KAAK8I,cAAe,gBAAiB9I,KAAK6I,QAAQG,KAI7EhF,MAAMkF,QACR,CAGSE,QAAAA,GACHpJ,KAAK8I,eACP9I,KAAKiH,MAAMnD,OAAO9D,KAAK8I,cAE3B,GArCWJ,EAAwBnC,EAAA,CADpCI,EAAc,yBACF+B"}

package/dist/form-field.js

@@ -56,7 +56,7 @@ function findFormFieldControl(slot) {
  * Copyright (c) 2025 Google LLC
  * See LICENSE file in the project root for full license text.
  */
-var _M3eFormFieldElement_instances, _M3eFormFieldElement_control, _M3eFormFieldElement_removeValueInterceptor, _M3eFormFieldElement_formResetHandler, _M3eFormFieldElement_controlInvalidHandler, _M3eFormFieldElement_controlMutationController, _M3eFormFieldElement_resizeController, _M3eFormFieldElement_focusController, _M3eFormFieldElement_hintMutationController, _M3eFormFieldElement_errorMutationController, _M3eFormFieldElement_pressedController, _M3eFormFieldElement_focused, _M3eFormFieldElement_hintText, _M3eFormFieldElement_errorText, _M3eFormFieldElement_shouldFloatLabel_get, _M3eFormFieldElement_initialize, _M3eFormFieldElement_stopPropagation, _M3eFormFieldElement_handleLabelSlotChange, _M3eFormFieldElement_handlePrefixSlotChange, _M3eFormFieldElement_handleSuffixSlotChange, _M3eFormFieldElement_handlePrefixResize, _M3eFormFieldElement_handleSlotChange, _M3eFormFieldElement_handleContainerClick, _M3eFormFieldElement_handleControlInvalid, _M3eFormFieldElement_handleControlChange, _M3eFormFieldElement_handleFormReset, _M3eFormFieldElement_changeControl, _M3eFormFieldElement_bindValueInterceptor, _M3eFormFieldElement_handleHintChange, _M3eFormFieldElement_handleErrorChange;
+var _M3eFormFieldElement_instances, _M3eFormFieldElement_control, _M3eFormFieldElement_removeValueInterceptor, _M3eFormFieldElement_formResetHandler, _M3eFormFieldElement_controlInvalidHandler, _M3eFormFieldElement_controlMutationController, _M3eFormFieldElement_resizeController, _M3eFormFieldElement_focusController, _M3eFormFieldElement_hintMutationController, _M3eFormFieldElement_errorMutationController, _M3eFormFieldElement_pressedController, _M3eFormFieldElement_focused, _M3eFormFieldElement_hintText, _M3eFormFieldElement_errorText, _M3eFormFieldElement_shouldFloatLabel_get, _M3eFormFieldElement_initialize, _M3eFormFieldElement_handleLabelSlotChange, _M3eFormFieldElement_handlePrefixSlotChange, _M3eFormFieldElement_handleSuffixSlotChange, _M3eFormFieldElement_handlePrefixResize, _M3eFormFieldElement_handleSlotChange, _M3eFormFieldElement_handleContainerClick, _M3eFormFieldElement_handleControlInvalid, _M3eFormFieldElement_handleControlChange, _M3eFormFieldElement_handleFormReset, _M3eFormFieldElement_ignoreEvent, _M3eFormFieldElement_changeControl, _M3eFormFieldElement_bindValueInterceptor, _M3eFormFieldElement_handleHintChange, _M3eFormFieldElement_handleErrorChange;
 /**
  * A container for form controls that applies Material Design styling and behavior.
  *
@@ -156,6 +156,7 @@ let M3eFormFieldElement = class M3eFormFieldElement extends ReconnectedCallback(
     /** @private */
     _M3eFormFieldElement_focusController.set(this, new FocusController(this, {
       target: null,
+      filter: e => __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_ignoreEvent).call(this, e),
       callback: focused => {
         focused = focused && !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.disabled ?? true);
         setCustomState(this, "--no-animate", false);
@@ -189,6 +190,7 @@ let M3eFormFieldElement = class M3eFormFieldElement extends ReconnectedCallback(
     /** @private */
     _M3eFormFieldElement_pressedController.set(this, new PressedController(this, {
       target: null,
+      filter: e => __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_ignoreEvent).call(this, e),
       callback: pressed => setCustomState(this, "--pressed", pressed && !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.disabled ?? true))
     }));
     /** @private */
@@ -295,7 +297,7 @@ let M3eFormFieldElement = class M3eFormFieldElement extends ReconnectedCallback(
   }
   /** @inheritdoc */
   render() {
-    return html`<div class="base" @click="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleContainerClick)}">${this.variant === "outlined" ? html`<div class="outline" aria-hidden="true"><div class="outline-start"></div><div class="outline-notch"><div class="pseudo-label">${this._pseudoLabel} ${!this.hideRequiredMarker && this._required ? html`&nbsp;*` : nothing}</div></div><div class="outline-end"></div></div>` : nothing}<div class="prefix"><slot name="prefix" @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handlePrefixSlotChange)}"></slot></div><div class="content"><span class="prefix-text"><slot name="prefix-text"></slot></span><span class="input"><slot @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleSlotChange)}" @change="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleControlChange)}"></slot></span><span class="suffix-text"><slot name="suffix-text"></slot></span><span class="label"><slot name="label" @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleLabelSlotChange)}"></slot>${!this.hideRequiredMarker && this._required ? html`<span class="required-marker" aria-hidden="true">&nbsp;*</span>` : nothing}</span></div><div class="suffix" @click="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_stopPropagation)}" @focusin="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_stopPropagation)}" @focusout="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_stopPropagation)}" @pointerdown="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_stopPropagation)}" @keydown="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_stopPropagation)}" @keyup="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_stopPropagation)}"><slot name="suffix" @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleSuffixSlotChange)}"></slot></div></div><span class="subscript" aria-hidden="true"><span class="error"><slot name="error">${this._validationMessage}</slot></span><span class="hint"><slot name="hint"></slot></span></span>`;
+    return html`<div class="base" @click="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleContainerClick)}">${this.variant === "outlined" ? html`<div class="outline" aria-hidden="true"><div class="outline-start"></div><div class="outline-notch"><div class="pseudo-label">${this._pseudoLabel} ${!this.hideRequiredMarker && this._required ? html`&nbsp;*` : nothing}</div></div><div class="outline-end"></div></div>` : nothing}<div class="prefix"><slot name="prefix" @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handlePrefixSlotChange)}"></slot></div><div class="content"><span class="prefix-text"><slot name="prefix-text"></slot></span><span class="input"><slot @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleSlotChange)}" @change="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleControlChange)}"></slot></span><span class="suffix-text"><slot name="suffix-text"></slot></span><span class="label"><slot name="label" @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleLabelSlotChange)}"></slot>${!this.hideRequiredMarker && this._required ? html`<span class="required-marker" aria-hidden="true">&nbsp;*</span>` : nothing}</span></div><div class="suffix"><slot name="suffix" @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleSuffixSlotChange)}"></slot></div></div><span class="subscript" aria-hidden="true"><span class="error"><slot name="error">${this._validationMessage}</slot></span><span class="hint"><slot name="hint"></slot></span></span>`;
   }
 };
 _M3eFormFieldElement_control = new WeakMap();
@@ -323,10 +325,6 @@ _M3eFormFieldElement_initialize = function _M3eFormFieldElement_initialize() {
   __classPrivateFieldGet(this, _M3eFormFieldElement_errorMutationController, "f").observe(this._error);
   __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleErrorChange).call(this);
 };
-_M3eFormFieldElement_stopPropagation = function _M3eFormFieldElement_stopPropagation(e) {
-  e.stopImmediatePropagation();
-  e.stopPropagation();
-};
 _M3eFormFieldElement_handleLabelSlotChange = function _M3eFormFieldElement_handleLabelSlotChange(e) {
   const assignedElements = e.target.assignedElements({
     flatten: true
@@ -350,6 +348,7 @@ _M3eFormFieldElement_handleSlotChange = function _M3eFormFieldElement_handleSlot
   __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_changeControl).call(this, findFormFieldControl(e.target));
 };
 _M3eFormFieldElement_handleContainerClick = function _M3eFormFieldElement_handleContainerClick(e) {
+  if (__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_ignoreEvent).call(this, e)) return;
   if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f") && !__classPrivateFieldGet(this, _M3eFormFieldElement_focused, "f") && !__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").disabled) {
     if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").onContainerClick) {
       __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").onContainerClick(e);
@@ -370,6 +369,9 @@ _M3eFormFieldElement_handleFormReset = function _M3eFormFieldElement_handleFormR
   this._invalid = false;
   setTimeout(() => this.notifyControlStateChange());
 };
+_M3eFormFieldElement_ignoreEvent = function _M3eFormFieldElement_ignoreEvent(e) {
+  return e.composed && e.composedPath().includes(this._suffix);
+};
 _M3eFormFieldElement_changeControl = function _M3eFormFieldElement_changeControl(control) {
   if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f") === control) return;
   if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")) {
@@ -453,6 +455,7 @@ M3eFormFieldElement.styles = css`:host { display: inline-flex; flex-direction: c
         transform ${DesignToken.motion.duration.short4}`)}; } :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid)):focus-within) .subscript, :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid)):is(:state(--pressed), :--pressed)) .subscript { opacity: 1; transform: translateY(0); } :host(:is(:state(--invalid), :--invalid)) .hint { display: none; } :host(:not(:is(:state(--invalid), :--invalid))) .error { display: none; } ::slotted(input), ::slotted(textarea), ::slotted(select) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(textarea) { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; } ::slotted(m3e-select), ::slotted(m3e-input-chip-set) { flex: 1 1 auto; min-width: 0; } :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not(:is(:state(--pressed), :--pressed))) .label { font-size: inherit; } :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label)) .prefix-text, :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label)) .suffix-text { opacity: 0; transition: opacity 0s; } .prefix { margin-inline-start: 1rem; } :host(:is(:state(--with-prefix), :--with-prefix)) .prefix { margin-inline-end: 1rem; margin-inline-start: 0.75rem; } .suffix { margin-inline-end: 1rem; } :host(:is(:state(--with-suffix), :--with-suffix)) .suffix { margin-inline-start: 0.25rem; margin-inline-end: 0.5rem; } :host(:is(:state(--with-suffix), :--with-suffix):is(:state(--with-select), :--with-select)) .suffix { margin-inline-start: unset; } :host(:is(:state(--with-select), :--with-select)) .suffix-text { display: none; } :host([variant="outlined"]) .label { margin-top: calc(0px - var(--_form-field-label-line-height) / 2); } :host([variant="outlined"]) .outline { position: absolute; display: flex; pointer-events: none; left: 0; top: 0; bottom: 0; right: 0; } :host([variant="outlined"]) .pseudo-label { visibility: hidden; margin-inline-end: 0.5rem; font-size: var(--_form-field-label-font-size); line-height: var(--_form-field-label-line-height); letter-spacing: var(--_form-field-label-tracking); max-width: 100%; transition-property: max-width, margin-inline-end; transition-duration: 1ms; } :host( :is(:state(--required), :--required):not([hide-required-marker]):not(:is(:state(--with-label), :--with-label)) ) .pseudo-label, :host( :is(:state(--required), :--required):not([hide-required-marker]):not(:is(:state(--with-label), :--with-label)) ) .required-marker { display: none; } :host([variant="outlined"]:is(:state(--required), :--required):not([hide-required-marker])) .pseudo-label { margin-inline-end: 0.25rem; } :host( [variant="outlined"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .pseudo-label { max-width: 0; margin-inline-end: 0px; transition-delay: ${DesignToken.motion.duration.short2}; } :host([variant="outlined"]) .outline-start, :host([variant="outlined"]) .outline-notch, :host([variant="outlined"]) .outline-end { box-sizing: border-box; border-width: var(--_form-field-outline-size, 1px); border-color: var(--_form-field-outline-color); transition: border-color ${DesignToken.motion.duration.short4}; } :host([variant="outlined"]:not(:is(:state(--with-label), :--with-label))) .outline-notch { display: none; } :host([variant="outlined"]) .outline-start { min-width: 0.75rem; border-top-style: solid; border-inline-start-style: solid; border-bottom-style: solid; border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); } :host([variant="outlined"]) .outline-notch { border-bottom-style: solid; } :host([variant="outlined"]) .outline-end { flex-grow: 1; min-width: 1rem; border-top-style: solid; border-inline-end-style: solid; border-bottom-style: solid; border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); } :host([variant="outlined"]:is(:state(--with-prefix), :--with-prefix)) .outline-start { min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem); } :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled))) .base:hover .outline, :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):focus-within) .outline, :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .outline { --_form-field-outline-size: 2px; } :host([variant="outlined"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="outlined"]) .content { min-height: calc(3.5rem + ${DesignToken.density.calc(-3)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); } :host( [variant="outlined"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .label { margin-top: unset; line-height: calc(3.5rem + ${DesignToken.density.calc(-3)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); } :host([variant="filled"]) .base { --_select-arrow-margin-top: calc( 0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1)) ); } :host([variant="filled"]) .base::before { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; border-bottom-style: solid; border-width: 1px; border-radius: var(--m3e-form-field-container-shape, ${DesignToken.shape.corner.extraSmallTop}); border-color: var(--_form-field-outline-color); background-color: var(--_form-field-container-color); } :host([variant="filled"]:not(:is(:state(--disabled), :--disabled))) .base:hover::before, :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):focus-within) .base::before, :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .base::before { border-width: 3px; } :host([variant="filled"]) .base::after { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--_form-field-hover-container-color); transition: background-color ${DesignToken.motion.duration.short4}; } :host([variant="filled"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="filled"]) .content { padding-top: calc(1.5rem + ${DesignToken.density.calc(-3)}); margin-bottom: 0.5rem; } :host([variant="filled"]) .label { top: max(0px, calc(0.5rem + ${DesignToken.density.calc(-3)})); } :host( [variant="filled"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .label { top: 0px; line-height: calc(3.5rem + ${DesignToken.density.calc(-3)} - 0.0625rem); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); } :host(:not(:is(:state(--disabled), :--disabled)):not(:focus-within):not(:is(:state(--pressed), :--pressed))) .base:hover { --_form-field-hover-container-color: color-mix( in srgb, var(--m3e-form-field-hover-container-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-hover-container-opacity, 8%), transparent ); } :host(:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) { color: var(--m3e-form-field-color, ${DesignToken.color.onSurface}); } :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.outline}); } :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.onSurfaceVariant}); } :host( [variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not( :is(:state(--invalid), :--invalid) ):focus-within ) .base, :host( [variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is( :state(--pressed), :--pressed ) ) .base, :host( [variant="filled"]:not(:is(:state(--disabled), :--disabled)):not( :is(:state(--invalid), :--invalid) ):focus-within ) .base, :host( [variant="filled"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is( :state(--pressed), :--pressed ) ) .base { --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${DesignToken.color.primary}); --_form-field-label-color: var(--m3e-form-field-focused-color, ${DesignToken.color.primary}); } :host(:not(:is(:state(--disabled), :--disabled))) .base { --_form-field-container-color: var( --m3e-form-field-container-color, ${DesignToken.color.surfaceContainerHighest} ); } :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .base { --_form-field-label-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error}); --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error}); } :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .subscript { color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error}); } :host(:is(:state(--disabled), :--disabled)) { color: color-mix( in srgb, var(--m3e-form-field-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%), transparent ); } :host(:is(:state(--disabled), :--disabled)) .base { --_form-field-container-color: color-mix( in srgb, var(--m3e-form-field-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-disabled-container-opacity, 4%), transparent ); } :host(:is(:state(--no-animate), :--no-animate)) *, :host(:is(:state(--no-animate), :--no-animate)) *::before, :host(:is(:state(--no-animate), :--no-animate)) *::after { transition: none !important; } @media (forced-colors: active) { :host([variant="filled"]) .base::after { transition: none; } :host { --_form-field-outline-color: CanvasText; } :host(:is(:state(--disabled), :--disabled)) { --_form-field-input-color: GrayText; --_form-field-color: GrayText; --_form-field-label-color: GrayText; --_form-field-outline-color: GrayText; } } @media (prefers-reduced-motion) { .base::before, .prefix-text, .suffix-text, .label, .subscript, .outline-start, .outline-notch, .outline-end, .pseudo-label { transition: none !important; } }`;
 __decorate([query(".base")], M3eFormFieldElement.prototype, "_base", void 0);
 __decorate([query(".prefix")], M3eFormFieldElement.prototype, "_prefix", void 0);
+__decorate([query(".suffix")], M3eFormFieldElement.prototype, "_suffix", void 0);
 __decorate([query(".error")], M3eFormFieldElement.prototype, "_error", void 0);
 __decorate([query(".hint")], M3eFormFieldElement.prototype, "_hint", void 0);
 __decorate([state()], M3eFormFieldElement.prototype, "_pseudoLabel", void 0);