@m3e/web 2.5.3 → 2.5.5

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 - Emitted 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(:state(-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(:state(-left)) {\r\n      align-items: flex-start;\r\n      transform-origin: left;\r\n    }\r\n    :host(:state(-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(:state(-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/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 - Emitted 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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"}

package/dist/fab.js

@@ -12,7 +12,7 @@ import { DesignToken, KeyboardClick, LinkButton, FormSubmitter, Focusable, Disab
  * Baseline styles for `M3eFabElement`.
  * @internal
  */
-const FabStyle = css`: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: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; } .label { justify-self: center; flex: 1 1 auto; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .close-icon, ::slotted(:not([slot])), ::slotted([slot="close-icon"]) { font-size: inherit !important; flex: none; } .close-icon, ::slotted(svg:not([slot])), ::slotted(svg[slot="close-icon"]) { width: 1em; height: 1em; } :host(:not([extended])) ::slotted([slot="label"]), .base.with-menu ::slotted([slot="label"]), .base:not(.with-menu) ::slotted([slot="close-icon"]), .base:not(.with-menu) .close-icon, :host([aria-expanded="true"]) .base.with-menu ::slotted(:not([slot])), :host([aria-expanded="false"]) .base.with-menu ::slotted([slot="close-icon"]), :host([aria-expanded="false"]) .base.with-menu .close-icon { display: none; } :host([aria-expanded="true"]) .base.with-menu { border-radius: var(--m3e-fab-menu-close-button-container-shape, ${DesignToken.shape.corner.full}); height: calc(var(--m3e-fab-menu-close-button-container-height, 3.5rem) + ${DesignToken.density.calc(-3)}); } :host([aria-expanded="true"]) .base.with-menu .wrapper { padding-inline-start: calc(var(--m3e-fab-menu-close-button-leading-space, 1rem) + ${DesignToken.density.calc(-3)}); padding-inline-end: calc(var(--m3e-fab-menu-close-button-trailing-space, 1rem) + ${DesignToken.density.calc(-3)}); } :host([aria-expanded="true"]) .base.with-menu .icon { font-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken.density.calc(-3)}); --m3e-icon-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken.density.calc(-3)}); } .base.with-menu { transition: height ${DesignToken.motion.spring.fastSpatial}; } .base.with-menu .wrapper { transition: padding ${DesignToken.motion.spring.fastSpatial}; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { .base, .icon { transition: none; } .base { outline-style: solid; } :host([variant]:not(:disabled):not([disabled-interactive])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])) .label, :host([variant]:not(:disabled):not([disabled-interactive])) .icon { color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-button-small-outline-thickness, 1px)); outline-width: var(--m3e-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-button-large-outline-thickness, 2px)); outline-width: var(--m3e-button-large-outline-thickness, 2px); } } @media (prefers-reduced-motion) { .base, .base.resting, .base.pressed, .label, .icon { transition: none; } }`;
+const FabStyle = css`: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: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; } .label { white-space: nowrap; transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .close-icon, ::slotted(:not([slot])), ::slotted([slot="close-icon"]) { font-size: inherit !important; flex: none; } .close-icon, ::slotted(svg:not([slot])), ::slotted(svg[slot="close-icon"]) { width: 1em; height: 1em; } .base.with-menu ::slotted([slot="label"]), .base:not(.with-menu) ::slotted([slot="close-icon"]), .base:not(.with-menu) .close-icon, :host([aria-expanded="true"]) .base.with-menu ::slotted(:not([slot])), :host([aria-expanded="false"]) .base.with-menu ::slotted([slot="close-icon"]), :host([aria-expanded="false"]) .base.with-menu .close-icon { display: none; } :host([aria-expanded="true"]) .base.with-menu { border-radius: var(--m3e-fab-menu-close-button-container-shape, ${DesignToken.shape.corner.full}); height: calc(var(--m3e-fab-menu-close-button-container-height, 3.5rem) + ${DesignToken.density.calc(-3)}); } :host([aria-expanded="true"]) .base.with-menu .wrapper { padding-inline-start: calc(var(--m3e-fab-menu-close-button-leading-space, 1rem) + ${DesignToken.density.calc(-3)}); padding-inline-end: calc(var(--m3e-fab-menu-close-button-trailing-space, 1rem) + ${DesignToken.density.calc(-3)}); } :host([aria-expanded="true"]) .base.with-menu .icon { font-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken.density.calc(-3)}); --m3e-icon-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken.density.calc(-3)}); } .base.with-menu { transition: height ${DesignToken.motion.spring.fastSpatial}; } .base.with-menu .wrapper { transition: padding ${DesignToken.motion.spring.fastSpatial}; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { .base, .icon { transition: none; } .base { outline-style: solid; } :host([variant]:not(:disabled):not([disabled-interactive])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])) .label, :host([variant]:not(:disabled):not([disabled-interactive])) .icon { color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-button-small-outline-thickness, 1px)); outline-width: var(--m3e-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-button-large-outline-thickness, 2px)); outline-width: var(--m3e-button-large-outline-thickness, 2px); } } @media (prefers-reduced-motion) { .base, .base.resting, .base.pressed, .label, .icon { transition: none; } }`;
 
 /**
  * Component design tokens that control the `M3eFabElement` for all size variants.
@@ -1040,7 +1040,7 @@ let M3eFabElement = class M3eFabElement extends KeyboardClick(LinkButton(FormSub
   }
   /** @inheritdoc */
   render() {
-    return html`<div class="base"><m3e-elevation class="elevation" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-elevation><m3e-state-layer class="state-layer" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?centered="${!this.extended}" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${this[renderPseudoLink]()}<div class="wrapper"><slot class="icon" aria-hidden="true" @slotchange="${__classPrivateFieldGet(this, _M3eFabElement_instances, "m", _M3eFabElement_handleSlotChange)}"></slot><slot class="icon" aria-hidden="true" name="close-icon"><svg class="close-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></slot><div class="label"><slot name="label" @slotchange="${__classPrivateFieldGet(this, _M3eFabElement_instances, "m", _M3eFabElement_handleSlotChange)}"></slot></div></div></div>`;
+    return html`<div class="base"><m3e-elevation class="elevation" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-elevation><m3e-state-layer class="state-layer" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?centered="${!this.extended}" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${this[renderPseudoLink]()}<div class="wrapper"><slot class="icon" aria-hidden="true" @slotchange="${__classPrivateFieldGet(this, _M3eFabElement_instances, "m", _M3eFabElement_handleSlotChange)}"></slot><slot class="icon" aria-hidden="true" name="close-icon"><svg class="close-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></slot><m3e-collapsible class="label-wrapper" orientation="horizontal" ?open="${this.extended}"><div class="label"><slot name="label" @slotchange="${__classPrivateFieldGet(this, _M3eFabElement_instances, "m", _M3eFabElement_handleSlotChange)}"></slot></div></m3e-collapsible></div></div>`;
   }
 };
 _M3eFabElement_instances = new WeakSet();