@m3e/web 2.5.4 → 2.5.5

package/dist/expansion-panel.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"expansion-panel.min.js","sources":["../../src/expansion-panel/AccordionElement.ts","../../src/expansion-panel/styles/ExpansionHeaderToken.ts","../../src/expansion-panel/styles/ExpansionHeaderStyle.ts","../../src/expansion-panel/styles/ExpansionPanelToken.ts","../../src/expansion-panel/styles/ExpansionPanelStyle.ts","../../src/expansion-panel/ExpansionHeaderElement.ts","../../src/expansion-panel/ExpansionPanelElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { M3eExpansionPanelElement } from \"./ExpansionPanelElement\";\r\n\r\n/**\r\n * Combines multiple expansion panels in to an accordion.\r\n *\r\n * @description\r\n * The `m3e-accordion` component organizes multiple expansion panels into a coordinated, accessible group.\r\n * It supports single or multiple open panels via the `multi` attribute, and provides expressive theming\r\n * and shape control for grouped layouts. The accordion manages open/close state across its child panels,\r\n * enabling interactive disclosure patterns for complex content.\r\n *\r\n * @example\r\n * The following example illustrates the basic use of the `m3e-accordion` and `m3e-expansion-panel` components.\r\n *\r\n * ```html\r\n * <m3e-accordion>\r\n *   <m3e-expansion-panel>\r\n *     <span slot=\"header\">Panel 1</span>\r\n *     I am content for the first expansion panel\r\n *   </m3e-expansion-panel>\r\n *   <m3e-expansion-panel>\r\n *     <span slot=\"header\">Panel 2</span>\r\n *     I am content for the second expansion panel\r\n *   </m3e-expansion-panel>\r\n * </m3e-accordion>\r\n * ```\r\n *\r\n * @tag m3e-accordion\r\n *\r\n * @slot - Renders the panels of the accordion.\r\n *\r\n * @attr multi - Whether multiple expansion panels can be open at the same time.\r\n */\r\n@customElement(\"m3e-accordion\")\r\nexport class M3eAccordionElement extends LitElement {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n    ::slotted(m3e-expansion-panel) {\r\n      --m3e-expansion-panel-container-color: ${DesignToken.color.surface};\r\n      --m3e-expansion-panel-elevation: ${DesignToken.elevation.level2};\r\n      --m3e-expansion-panel-open-shape: ${DesignToken.shape.corner.medium};\r\n      --_expansion-panel-open-spacing: 1rem;\r\n    }\r\n    ::slotted(m3e-expansion-panel:first-of-type:last-of-type) {\r\n      --m3e-expansion-panel-shape: ${DesignToken.shape.corner.medium};\r\n    }\r\n    ::slotted(m3e-expansion-panel:first-of-type:not(:last-of-type)) {\r\n      --m3e-expansion-panel-shape: ${DesignToken.shape.corner.value.medium} ${DesignToken.shape.corner.value.medium}\r\n        ${DesignToken.shape.corner.value.none} ${DesignToken.shape.corner.value.none};\r\n    }\r\n    ::slotted(m3e-expansion-panel:last-of-type:not(:first-of-type)) {\r\n      --m3e-expansion-panel-shape: ${DesignToken.shape.corner.value.none} ${DesignToken.shape.corner.value.none}\r\n        ${DesignToken.shape.corner.value.medium} ${DesignToken.shape.corner.value.medium};\r\n    }\r\n  `;\r\n\r\n  /** @private */ #panels: Array<M3eExpansionPanelElement> = [];\r\n\r\n  /**\r\n   * Whether multiple expansion panels can be open at the same time.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) multi = false;\r\n\r\n  /** The panels of the accordion. */\r\n  get panels() {\r\n    return this.#panels;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot @slotchange=\"${this.#handleSlotChange}\" @opening=\"${this.#handleOpening}\"></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange() {\r\n    this.#panels = [...this.querySelectorAll(\"m3e-expansion-panel\")];\r\n\r\n    if (this.multi) {\r\n      return;\r\n    }\r\n\r\n    let alreadyOpen = false;\r\n    for (const panel of this.#panels.filter((x) => !x.open)) {\r\n      if (alreadyOpen) {\r\n        panel.open = false;\r\n      }\r\n      alreadyOpen = true;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleOpening(e: Event): void {\r\n    if (!this.multi) {\r\n      for (const panel of this.#panels.filter((x) => x !== e.target && x.open)) {\r\n        panel.open = false;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-accordion\": M3eAccordionElement;\r\n  }\r\n}\r\n","import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens for `M3eExpansionHeaderElement`.\r\n * @internal\r\n */\r\nexport const ExpansionHeaderToken = {\r\n  collapsedHeight: unsafeCSS(\"var(--m3e-expansion-header-collapsed-height, 3rem)\"),\r\n  expandedHeight: unsafeCSS(\"var(--m3e-expansion-header-expanded-height, 4rem)\"),\r\n  paddingLeft: unsafeCSS(\"var(--m3e-expansion-header-padding-left, 1.5rem)\"),\r\n  paddingRight: unsafeCSS(\"var(--m3e-expansion-header-padding-right, 1.5rem)\"),\r\n  spacing: unsafeCSS(\"var(--m3e-expansion-header-spacing, 0.5rem)\"),\r\n  toggleIconSize: unsafeCSS(\"var(--m3e-expansion-header-toggle-icon-size, 1.5rem)\"),\r\n  fontSize: unsafeCSS(`var(--m3e-expansion-header-font-size, ${DesignToken.typescale.standard.title.medium.fontSize})`),\r\n  fontWeight: unsafeCSS(\r\n    `var(--m3e-expansion-header-font-weight, ${DesignToken.typescale.standard.title.medium.fontWeight})`,\r\n  ),\r\n  lineHeight: unsafeCSS(\r\n    `var(--m3e-expansion-header-line-height, ${DesignToken.typescale.standard.title.medium.lineHeight})`,\r\n  ),\r\n  tracking: unsafeCSS(`var(--m3e-expansion-header-tracking, ${DesignToken.typescale.standard.title.medium.tracking})`),\r\n} as const;\r\n","import { css, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { ExpansionHeaderToken } from \"./ExpansionHeaderToken\";\r\n\r\n/**\r\n * Styles for `M3eExpansionHeaderElement`.\r\n * @internal\r\n */\r\nexport const ExpansionHeaderStyle = css`\r\n  :host {\r\n    display: block;\r\n    border-radius: inherit;\r\n    outline: none;\r\n    user-select: none;\r\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    transition: ${unsafeCSS(`height var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})\r\n        ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  .base {\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    border-radius: inherit;\r\n    outline: none;\r\n    position: relative;\r\n    padding-inline-start: ${ExpansionHeaderToken.paddingLeft};\r\n    padding-inline-end: ${ExpansionHeaderToken.paddingRight};\r\n    font-size: ${ExpansionHeaderToken.fontSize};\r\n    font-weight: ${ExpansionHeaderToken.fontWeight};\r\n    line-height: ${ExpansionHeaderToken.lineHeight};\r\n    letter-spacing: ${ExpansionHeaderToken.tracking};\r\n    column-gap: ${ExpansionHeaderToken.spacing};\r\n  }\r\n  :host(:not(:disabled)) {\r\n    cursor: pointer;\r\n  }\r\n  :host(:not([aria-expanded=\"true\"])) {\r\n    height: ${ExpansionHeaderToken.collapsedHeight};\r\n  }\r\n  :host([aria-expanded=\"true\"]) {\r\n    height: ${ExpansionHeaderToken.expandedHeight};\r\n  }\r\n  :host(:not(:focus-visible)) .state-layer {\r\n    --m3e-state-layer-focus-color: transparent;\r\n  }\r\n  :host([aria-expanded=\"true\"]) .state-layer {\r\n    --m3e-state-layer-hover-color: transparent;\r\n  }\r\n  :host([aria-expanded=\"true\"]) [part=\"background\"],\r\n  .content {\r\n    flex: 1 1 auto;\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  .toggle {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    vertical-align: middle;\r\n    font-size: ${ExpansionHeaderToken.toggleIconSize};\r\n    transition: ${unsafeCSS(`transform var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})\r\n        ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  :host([toggle-direction=\"vertical\"][aria-expanded=\"true\"]) .toggle {\r\n    transform: rotate(180deg);\r\n  }\r\n  :host([toggle-direction=\"horizontal\"][aria-expanded=\"true\"]) .toggle {\r\n    transform: rotate(var(--_expansion-header-horizontal-expanded-toggle-rotation, 90deg));\r\n  }\r\n  :host([toggle-position=\"before\"]) .toggle {\r\n    margin-inline-start: calc(0px - ${ExpansionHeaderToken.spacing});\r\n  }\r\n  :host([toggle-position=\"after\"]) .toggle {\r\n    margin-inline-end: calc(0px - ${ExpansionHeaderToken.spacing});\r\n  }\r\n  :host([hide-toggle]) .toggle {\r\n    display: none;\r\n  }\r\n  ::slotted([slot=\"toggle-icon\"]) {\r\n    font-size: inherit !important;\r\n    flex: none;\r\n  }\r\n  ::slotted(svg[slot=\"toggle-icon\"]) {\r\n    width: 1em;\r\n    height: 1em;\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    :host,\r\n    .toggle {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens for `M3eExpansionPanelElement`.\r\n * @internal\r\n */\r\nexport const ExpansionPanelToken = {\r\n  textColor: unsafeCSS(`var(--m3e-expansion-panel-text-color, ${DesignToken.color.onSurface})`),\r\n  disabledTextColor: unsafeCSS(`var(--m3e-expansion-panel-disabled-text-color, ${DesignToken.color.onSurface})`),\r\n  disabledTextOpacity: unsafeCSS(`var(--m3e-expansion-panel-disabled-text-opacity, 38%)`),\r\n  containerColor: unsafeCSS(\"var(--m3e-expansion-panel-container-color)\"),\r\n  collapsedElevation: unsafeCSS(\"var(--m3e-expansion-panel-elevation)\"),\r\n  collapsedShape: unsafeCSS(\"var(--m3e-expansion-panel-shape)\"),\r\n  expandedElevation: unsafeCSS(\"var(--m3e-expansion-panel-open-elevation, var(--m3e-expansion-panel-elevation))\"),\r\n  expandedShape: unsafeCSS(\"var(--m3e-expansion-panel-open-shape, var(--m3e-expansion-panel-shape))\"),\r\n  expandedSpace: unsafeCSS(\"var(--_expansion-panel-open-spacing)\"),\r\n  contentPadding: unsafeCSS(\"var(--m3e-expansion-panel-content-padding, 0 1.5rem 1rem 1.5rem)\"),\r\n  actionsSpacing: unsafeCSS(\"var(--m3e-expansion-panel-actions-spacing, 0.5rem)\"),\r\n  actionsPadding: unsafeCSS(\"var(--m3e-expansion-panel-actions-padding, 1rem 1.5rem 1rem 1.5rem)\"),\r\n  actionsDividerThickness: unsafeCSS(\r\n    \"var(--m3e-expansion-panel-actions-divider-thickness, var(--m3e-divider-thickness, 1px))\",\r\n  ),\r\n  actionsDividerColor: unsafeCSS(\r\n    `var(--m3e-expansion-panel-actions-divider-color, var(--m3e-divider-color, ${DesignToken.color.outlineVariant}))`,\r\n  ),\r\n} as const;\r\n","import { css, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { ExpansionPanelToken } from \"./ExpansionPanelToken\";\r\nimport { ExpansionHeaderToken } from \"./ExpansionHeaderToken\";\r\n\r\n/**\r\n * Styles for `M3eExpansionPanelElement`.\r\n * @internal\r\n */\r\nexport const ExpansionPanelStyle = css`\r\n  :host {\r\n    display: block;\r\n  }\r\n  .base {\r\n    background-color: ${ExpansionPanelToken.containerColor};\r\n    transition: ${unsafeCSS(`box-shadow var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})\r\n        ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  :host(:not(:disabled)) .base {\r\n    color: ${ExpansionPanelToken.textColor};\r\n  }\r\n  :host(:disabled) .base {\r\n    color: color-mix(\r\n      in srgb,\r\n      ${ExpansionPanelToken.disabledTextColor} ${ExpansionPanelToken.disabledTextOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host(:not([open])) .base {\r\n    box-shadow: ${ExpansionPanelToken.collapsedElevation};\r\n    border-radius: ${ExpansionPanelToken.collapsedShape};\r\n  }\r\n  :host([open]) .base {\r\n    box-shadow: ${ExpansionPanelToken.expandedElevation};\r\n    border-radius: ${ExpansionPanelToken.expandedShape};\r\n    margin-block: ${ExpansionPanelToken.expandedSpace};\r\n  }\r\n  .toggle {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: ${ExpansionHeaderToken.toggleIconSize};\r\n  }\r\n  ::slotted([slot=\"toggle-icon\"]) {\r\n    font-size: inherit !important;\r\n    flex: none;\r\n  }\r\n  .toggle svg,\r\n  ::slotted(svg[slot=\"toggle-icon\"]) {\r\n    width: 1em;\r\n    height: 1em;\r\n  }\r\n  .content {\r\n    padding: ${ExpansionPanelToken.contentPadding};\r\n  }\r\n  :host(:not(:state(-with-actions))) .actions {\r\n    display: none;\r\n  }\r\n  .actions {\r\n    padding: ${ExpansionPanelToken.actionsPadding};\r\n    border-top-style: solid;\r\n    border-top-width: ${ExpansionPanelToken.actionsDividerThickness};\r\n    border-top-color: ${ExpansionPanelToken.actionsDividerColor};\r\n  }\r\n  ::slotted([slot=\"actions\"]) {\r\n    flex: none;\r\n    display: flex;\r\n    align-items: center;\r\n    column-gap: ${ExpansionPanelToken.actionsSpacing};\r\n  }\r\n  ::slotted([slot=\"actions\"][end]) {\r\n    justify-content: flex-end;\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .base {\r\n      transition: none;\r\n    }\r\n  }\r\n  @media (forced-colors: active) {\r\n    .base {\r\n      border: 1px solid CanvasText;\r\n    }\r\n    :host(:disabled) .base {\r\n      color: GrayText;\r\n    }\r\n    .actions {\r\n      border-top-color: GrayText;\r\n    }\r\n  }\r\n`;\r\n","import { CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  Disabled,\r\n  Focusable,\r\n  KeyboardClick,\r\n  M3eFocusRingElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { ExpansionTogglePosition } from \"./ExpansionTogglePosition\";\r\nimport { ExpansionToggleDirection } from \"./ExpansionToggleDirection\";\r\n\r\nimport { ExpansionHeaderStyle } from \"./styles\";\r\n\r\n/**\r\n * A button used to toggle the expanded state of an expansion panel.\r\n *\r\n * @tag m3e-expansion-header\r\n *\r\n * @slot - Renders the content of the header.\r\n * @slot toggle-icon - Renders the icon of the expansion toggle.\r\n *\r\n * @attr hide-toggle - Whether to hide the expansion toggle.\r\n * @attr toggle-direction - The direction of the expansion toggle.\r\n * @attr toggle-position - The position of the expansion toggle.\r\n *\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-expansion-header-collapsed-height - Height of the header when the panel is collapsed.\r\n * @cssprop --m3e-expansion-header-expanded-height - Height of the header when the panel is expanded.\r\n * @cssprop --m3e-expansion-header-padding-left - Left padding inside the header.\r\n * @cssprop --m3e-expansion-header-padding-right - Right padding inside the header.\r\n * @cssprop --m3e-expansion-header-spacing - Spacing between header elements.\r\n * @cssprop --m3e-expansion-header-toggle-icon-size - Size of the toggle icon (e.g. chevron).\r\n * @cssprop --m3e-expansion-header-font-size - The font size of the header text.\r\n * @cssprop --m3e-expansion-header-font-weight - The font weight of the header text.\r\n * @cssprop --m3e-expansion-header-line-height - The line height of the header text.\r\n * @cssprop --m3e-expansion-header-tracking - Letter spacing (tracking) of the header text.\r\n */\r\n@customElement(\"m3e-expansion-header\")\r\nexport class M3eExpansionHeaderElement extends KeyboardClick(\r\n  Focusable(Disabled(AttachInternals(Role(LitElement, \"button\"), true))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = ExpansionHeaderStyle;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n\r\n  /**\r\n   * The direction of the expansion toggle.\r\n   * @default \"vertical\"\r\n   */\r\n  @property({ attribute: \"toggle-direction\", reflect: true }) toggleDirection: ExpansionToggleDirection = \"vertical\";\r\n\r\n  /**\r\n   * The position of the expansion toggle.\r\n   * @default \"after\"\r\n   */\r\n  @property({ attribute: \"toggle-position\", reflect: true }) togglePosition: ExpansionTogglePosition = \"after\";\r\n\r\n  /**\r\n   * Whether to hide the expansion toggle.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-toggle\", type: Boolean, reflect: true }) hideToggle = false;\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      ${this.togglePosition === \"before\" ? this.#renderToggle() : nothing}\r\n      <div class=\"content\">\r\n        <slot></slot>\r\n      </div>\r\n      ${this.togglePosition === \"after\" ? this.#renderToggle() : nothing}\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderToggle(): unknown {\r\n    return html`<div class=\"toggle\" aria-hidden=\"true\">\r\n      <slot name=\"toggle-icon\"></slot>\r\n    </div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-expansion-header\": M3eExpansionHeaderElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\n\r\nimport { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  Disabled,\r\n  hasAssignedNodes,\r\n  ReconnectedCallback,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { ExpansionTogglePosition } from \"./ExpansionTogglePosition\";\r\nimport { ExpansionToggleDirection } from \"./ExpansionToggleDirection\";\r\n\r\nimport { ExpansionPanelStyle } from \"./styles\";\r\nimport { M3eExpansionHeaderElement } from \"./ExpansionHeaderElement\";\r\n\r\n/**\r\n * An expandable details-summary view.\r\n *\r\n * @description\r\n * The `m3e-expansion-panel` component provides an accessible, animated details-summary view for\r\n * organizing content in collapsible sections. It supports custom header, content, actions, and\r\n * toggle icon slots, and offers configurable toggle position and direction. The panel responds to\r\n * open/close states, emits lifecycle events, and supports rich theming via CSS custom properties\r\n * for elevation, shape, spacing, and color.\r\n *\r\n * @example\r\n * The following example illustrates the basic use of the `m3e-accordion` and `m3e-expansion-panel` components.\r\n *\r\n * ```html\r\n * <m3e-accordion>\r\n *   <m3e-expansion-panel>\r\n *     <span slot=\"header\">Panel 1</span>\r\n *     I am content for the first expansion panel\r\n *   </m3e-expansion-panel>\r\n *   <m3e-expansion-panel>\r\n *     <span slot=\"header\">Panel 2</span>\r\n *     I am content for the second expansion panel\r\n *   </m3e-expansion-panel>\r\n * </m3e-accordion>\r\n * ```\r\n *\r\n * @tag m3e-expansion-panel\r\n *\r\n * @slot - Renders the detail of the panel.\r\n * @slot actions - Renders the actions bar of the panel.\r\n * @slot header - Renders the header content.\r\n * @slot toggle-icon - Renders the expansion toggle icon.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr hide-toggle - Whether to hide the expansion toggle.\r\n * @attr open - Whether the panel is expanded.\r\n * @attr toggle-direction - The direction of the expansion toggle.\r\n * @attr toggle-position - The position of the expansion toggle.\r\n *\r\n * @fires opening - Emitted when the expansion panel begins to open.\r\n * @fires opened - Emitted when the expansion panel has opened.\r\n * @fires closing - Emitted when the expansion panel begins to close.\r\n * @fires closed - Emitted when the expansion panel has closed.\r\n *\r\n * @cssprop --m3e-expansion-header-collapsed-height - Height of the header when the panel is collapsed.\r\n * @cssprop --m3e-expansion-header-expanded-height - Height of the header when the panel is expanded.\r\n * @cssprop --m3e-expansion-header-padding-left - Left padding inside the header.\r\n * @cssprop --m3e-expansion-header-padding-right - Right padding inside the header.\r\n * @cssprop --m3e-expansion-header-spacing - Spacing between header elements.\r\n * @cssprop --m3e-expansion-header-toggle-icon-size - Size of the toggle icon (e.g. chevron).\r\n * @cssprop --m3e-expansion-header-font-size - The font size of the header text.\r\n * @cssprop --m3e-expansion-header-font-weight - The font weight of the header text.\r\n * @cssprop --m3e-expansion-header-line-height - The line height of the header text.\r\n * @cssprop --m3e-expansion-header-tracking - Letter spacing (tracking) of the header text.\r\n * @cssprop --m3e-expansion-panel-text-color - Color of the panel's text content.\r\n * @cssprop --m3e-expansion-panel-disabled-text-color - Color of the panel's text content, when disabled.\r\n * @cssprop --m3e-expansion-panel-disabled-text-opacity - Opacity of the panel's text content, when disabled.\r\n * @cssprop --m3e-expansion-panel-container-color - Background color of the panel container.\r\n * @cssprop --m3e-expansion-panel-elevation - Elevation level when the panel is collapsed.\r\n * @cssprop --m3e-expansion-panel-shape - Shape (e.g. border radius) of the panel when collapsed.\r\n * @cssprop --m3e-expansion-panel-open-elevation - Elevation level when the panel is expanded.\r\n * @cssprop --m3e-expansion-panel-open-shape - Shape (e.g. border radius) of the panel when expanded.\r\n * @cssprop --m3e-expansion-panel-content-padding - Padding around the panel's content area.\r\n * @cssprop --m3e-expansion-panel-actions-spacing - Spacing between action buttons or elements.\r\n * @cssprop --m3e-expansion-panel-actions-padding - Padding around the actions section.\r\n * @cssprop --m3e-expansion-panel-actions-divider-thickness - Thickness of the divider above actions.\r\n * @cssprop --m3e-expansion-panel-actions-divider-color - Color of the divider above actions.\r\n */\r\n@customElement(\"m3e-expansion-panel\")\r\nexport class M3eExpansionPanelElement extends Disabled(ReconnectedCallback(AttachInternals(LitElement, true))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = ExpansionPanelStyle;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ #id = M3eExpansionPanelElement.__nextId++;\r\n  /** @private */ #contentId = `m3e-expansion-panel-${this.#id}-content`;\r\n  /** @private */ #headerId = `m3e-expansion-panel-${this.#id}-header`;\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n\r\n  /** @private */ @query(\"m3e-expansion-header\") private readonly _header?: M3eExpansionHeaderElement;\r\n\r\n  /**\r\n   * Whether the panel is expanded.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) open = false;\r\n\r\n  /**\r\n   * The direction of the expansion toggle.\r\n   * @default \"vertical\"\r\n   */\r\n  @property({ attribute: \"toggle-direction\", reflect: true }) toggleDirection: ExpansionToggleDirection = \"vertical\";\r\n\r\n  /**\r\n   * The position of the expansion toggle.\r\n   * @default \"after\"\r\n   */\r\n  @property({ attribute: \"toggle-position\", reflect: true }) togglePosition: ExpansionTogglePosition = \"after\";\r\n\r\n  /**\r\n   * Whether to hide the expansion toggle.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-toggle\", type: Boolean, reflect: true }) hideToggle = false;\r\n\r\n  /** @inheritdoc */\r\n  override focus(options?: FocusOptions): void {\r\n    this._header?.focus(options);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override blur(): void {\r\n    this._header?.blur();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override click(): void {\r\n    this._header?.click();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.#directionalitySubscription = M3eDirectionality.observe(() => {\r\n      this.requestUpdate();\r\n      this.#updateHeaderToggleRotation();\r\n    });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#updateHeaderToggleRotation();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#updateHeaderToggleRotation();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-expansion-header\r\n        id=\"${this.#headerId}\"\r\n        toggle-direction=\"${this.toggleDirection}\"\r\n        toggle-position=\"${this.togglePosition}\"\r\n        ?hide-toggle=\"${this.hideToggle}\"\r\n        ?disabled=\"${this.disabled}\"\r\n        aria-expanded=\"${this.open}\"\r\n        aria-controls=\"${this.#contentId}\"\r\n        @click=\"${this.#handleHeaderClick}\"\r\n        @keydown=\"${this.#handleKeyDown}\"\r\n      >\r\n        <div slot=\"toggle-icon\" class=\"toggle\">\r\n          <slot name=\"toggle-icon\">${this.#renderToggleIcon()}</slot>\r\n        </div>\r\n        <slot name=\"header\"></slot>\r\n      </m3e-expansion-header>\r\n      <m3e-collapsible\r\n        id=\"${this.#contentId}\"\r\n        role=\"region\"\r\n        aria-labelledby=\"${this.#headerId}\"\r\n        ?open=\"${this.open}\"\r\n        @opening=\"${this.#handleCollapsibleEvent}\"\r\n        @opened=\"${this.#handleCollapsibleEvent}\"\r\n        @closing=\"${this.#handleCollapsibleEvent}\"\r\n        @closed=\"${this.#handleCollapsibleEvent}\"\r\n      >\r\n        <div class=\"content\">\r\n          <slot></slot>\r\n        </div>\r\n        <div class=\"actions\">\r\n          <slot name=\"actions\" @slotchange=\"${this.#handleActionsSlotChange}\"></slot>\r\n        </div>\r\n      </m3e-collapsible>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderToggleIcon(): unknown {\r\n    return this.toggleDirection === \"vertical\"\r\n      ? html`<svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n          <path d=\"M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z\" />\r\n        </svg>`\r\n      : M3eDirectionality.current === \"ltr\"\r\n        ? html`<svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n            <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\r\n          </svg>`\r\n        : html`<svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n            <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\r\n          </svg>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleHeaderClick() {\r\n    this.open = !this.open;\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    switch (e.key) {\r\n      case \"ArrowUp\":\r\n        {\r\n          e.preventDefault();\r\n          const accordion = this.closest(\"m3e-accordion\");\r\n          if (accordion) {\r\n            const panels = [...accordion.panels].reverse();\r\n            const index = panels.indexOf(this);\r\n            (\r\n              panels.find((x, i) => !x.disabled && i > index) ?? panels.find((x, i) => !x.disabled && i < index)\r\n            )?._header?.focus();\r\n          } else {\r\n            this.open = false;\r\n          }\r\n        }\r\n\r\n        break;\r\n\r\n      case \"ArrowDown\":\r\n        {\r\n          e.preventDefault();\r\n          const accordion = this.closest(\"m3e-accordion\");\r\n          if (accordion) {\r\n            const index = accordion.panels.indexOf(this);\r\n            (\r\n              accordion.panels.find((x, i) => !x.disabled && i > index) ??\r\n              accordion.panels.find((x, i) => !x.disabled && i < index)\r\n            )?._header?.focus();\r\n          } else {\r\n            this.open = true;\r\n          }\r\n        }\r\n\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleCollapsibleEvent(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(e.type, { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleActionsSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-actions\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n  }\r\n\r\n  /** @private */\r\n  #updateHeaderToggleRotation(): void {\r\n    if (M3eDirectionality.current === \"rtl\") {\r\n      this._header?.style.setProperty(\"--_expansion-header-horizontal-expanded-toggle-rotation\", \"-90deg\");\r\n    } else {\r\n      this._header?.style.removeProperty(\"--_expansion-header-horizontal-expanded-toggle-rotation\");\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eExpansionPanelElementEventMap extends HTMLElementEventMap {\r\n  opening: Event;\r\n  opened: Event;\r\n  closing: Event;\r\n  closed: Event;\r\n}\r\n\r\nexport interface M3eExpansionPanelElement {\r\n  addEventListener<K extends keyof M3eExpansionPanelElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eExpansionPanelElement, ev: M3eExpansionPanelElementEventMap[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 M3eExpansionPanelElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eExpansionPanelElement, ev: M3eExpansionPanelElementEventMap[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-expansion-panel\": M3eExpansionPanelElement;\r\n  }\r\n}\r\n"],"names":["M3eAccordionElement","LitElement","constructor","_M3eAccordionElement_panels","set","this","multi","panels","__classPrivateFieldGet","render","html","_M3eAccordionElement_instances","_M3eAccordionElement_handleSlotChange","_M3eAccordionElement_handleOpening","__classPrivateFieldSet","querySelectorAll","alreadyOpen","panel","filter","x","open","e","target","styles","css","DesignToken","color","surface","elevation","level2","shape","corner","medium","value","none","__decorate","property","type","Boolean","prototype","customElement","ExpansionHeaderToken","unsafeCSS","typescale","standard","title","fontSize","fontWeight","lineHeight","tracking","ExpansionHeaderStyle","motion","duration","medium1","easing","ExpansionPanelToken","onSurface","outlineVariant","ExpansionPanelStyle","M3eExpansionHeaderElement","KeyboardClick","Focusable","Disabled","AttachInternals","Role","toggleDirection","togglePosition","hideToggle","firstUpdated","_changedProperties","super","_focusRing","_stateLayer","forEach","attach","disabled","_M3eExpansionHeaderElement_instances","_M3eExpansionHeaderElement_renderToggle","nothing","query","attribute","reflect","M3eExpansionPanelElement","M3eExpansionPanelElement_1","ReconnectedCallback","_M3eExpansionPanelElement_id","__nextId","_M3eExpansionPanelElement_contentId","_M3eExpansionPanelElement_headerId","_M3eExpansionPanelElement_directionalitySubscription","focus","options","_header","blur","click","connectedCallback","M3eDirectionality","observe","requestUpdate","_M3eExpansionPanelElement_instances","_M3eExpansionPanelElement_updateHeaderToggleRotation","call","disconnectedCallback","reconnectedCallback","_M3eExpansionPanelElement_handleHeaderClick","_M3eExpansionPanelElement_handleKeyDown","_M3eExpansionPanelElement_renderToggleIcon","_M3eExpansionPanelElement_handleCollapsibleEvent","_M3eExpansionPanelElement_handleActionsSlotChange","current","key","preventDefault","accordion","closest","reverse","index","indexOf","find","i","stopPropagation","dispatchEvent","Event","bubbles","setCustomState","hasAssignedNodes","style","setProperty","removeProperty"],"mappings":"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"}
+{"version":3,"file":"expansion-panel.min.js","sources":["../../src/expansion-panel/AccordionElement.ts","../../src/expansion-panel/styles/ExpansionHeaderToken.ts","../../src/expansion-panel/styles/ExpansionHeaderStyle.ts","../../src/expansion-panel/styles/ExpansionPanelToken.ts","../../src/expansion-panel/styles/ExpansionPanelStyle.ts","../../src/expansion-panel/ExpansionHeaderElement.ts","../../src/expansion-panel/ExpansionPanelElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { M3eExpansionPanelElement } from \"./ExpansionPanelElement\";\r\n\r\n/**\r\n * Combines multiple expansion panels in to an accordion.\r\n *\r\n * @description\r\n * The `m3e-accordion` component organizes multiple expansion panels into a coordinated, accessible group.\r\n * It supports single or multiple open panels via the `multi` attribute, and provides expressive theming\r\n * and shape control for grouped layouts. The accordion manages open/close state across its child panels,\r\n * enabling interactive disclosure patterns for complex content.\r\n *\r\n * @example\r\n * The following example illustrates the basic use of the `m3e-accordion` and `m3e-expansion-panel` components.\r\n *\r\n * ```html\r\n * <m3e-accordion>\r\n *   <m3e-expansion-panel>\r\n *     <span slot=\"header\">Panel 1</span>\r\n *     I am content for the first expansion panel\r\n *   </m3e-expansion-panel>\r\n *   <m3e-expansion-panel>\r\n *     <span slot=\"header\">Panel 2</span>\r\n *     I am content for the second expansion panel\r\n *   </m3e-expansion-panel>\r\n * </m3e-accordion>\r\n * ```\r\n *\r\n * @tag m3e-accordion\r\n *\r\n * @slot - Renders the panels of the accordion.\r\n *\r\n * @attr multi - Whether multiple expansion panels can be open at the same time.\r\n */\r\n@customElement(\"m3e-accordion\")\r\nexport class M3eAccordionElement extends LitElement {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n    ::slotted(m3e-expansion-panel) {\r\n      --m3e-expansion-panel-container-color: ${DesignToken.color.surface};\r\n      --m3e-expansion-panel-elevation: ${DesignToken.elevation.level2};\r\n      --m3e-expansion-panel-open-shape: ${DesignToken.shape.corner.medium};\r\n      --_expansion-panel-open-spacing: 1rem;\r\n    }\r\n    ::slotted(m3e-expansion-panel:first-of-type:last-of-type) {\r\n      --m3e-expansion-panel-shape: ${DesignToken.shape.corner.medium};\r\n    }\r\n    ::slotted(m3e-expansion-panel:first-of-type:not(:last-of-type)) {\r\n      --m3e-expansion-panel-shape: ${DesignToken.shape.corner.value.medium} ${DesignToken.shape.corner.value.medium}\r\n        ${DesignToken.shape.corner.value.none} ${DesignToken.shape.corner.value.none};\r\n    }\r\n    ::slotted(m3e-expansion-panel:last-of-type:not(:first-of-type)) {\r\n      --m3e-expansion-panel-shape: ${DesignToken.shape.corner.value.none} ${DesignToken.shape.corner.value.none}\r\n        ${DesignToken.shape.corner.value.medium} ${DesignToken.shape.corner.value.medium};\r\n    }\r\n  `;\r\n\r\n  /** @private */ #panels: Array<M3eExpansionPanelElement> = [];\r\n\r\n  /**\r\n   * Whether multiple expansion panels can be open at the same time.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) multi = false;\r\n\r\n  /** The panels of the accordion. */\r\n  get panels() {\r\n    return this.#panels;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot @slotchange=\"${this.#handleSlotChange}\" @opening=\"${this.#handleOpening}\"></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange() {\r\n    this.#panels = [...this.querySelectorAll(\"m3e-expansion-panel\")];\r\n\r\n    if (this.multi) {\r\n      return;\r\n    }\r\n\r\n    let alreadyOpen = false;\r\n    for (const panel of this.#panels.filter((x) => !x.open)) {\r\n      if (alreadyOpen) {\r\n        panel.open = false;\r\n      }\r\n      alreadyOpen = true;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleOpening(e: Event): void {\r\n    if (!this.multi) {\r\n      for (const panel of this.#panels.filter((x) => x !== e.target && x.open)) {\r\n        panel.open = false;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-accordion\": M3eAccordionElement;\r\n  }\r\n}\r\n","import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens for `M3eExpansionHeaderElement`.\r\n * @internal\r\n */\r\nexport const ExpansionHeaderToken = {\r\n  collapsedHeight: unsafeCSS(\"var(--m3e-expansion-header-collapsed-height, 3rem)\"),\r\n  expandedHeight: unsafeCSS(\"var(--m3e-expansion-header-expanded-height, 4rem)\"),\r\n  paddingLeft: unsafeCSS(\"var(--m3e-expansion-header-padding-left, 1.5rem)\"),\r\n  paddingRight: unsafeCSS(\"var(--m3e-expansion-header-padding-right, 1.5rem)\"),\r\n  spacing: unsafeCSS(\"var(--m3e-expansion-header-spacing, 0.5rem)\"),\r\n  toggleIconSize: unsafeCSS(\"var(--m3e-expansion-header-toggle-icon-size, 1.5rem)\"),\r\n  fontSize: unsafeCSS(`var(--m3e-expansion-header-font-size, ${DesignToken.typescale.standard.title.medium.fontSize})`),\r\n  fontWeight: unsafeCSS(\r\n    `var(--m3e-expansion-header-font-weight, ${DesignToken.typescale.standard.title.medium.fontWeight})`,\r\n  ),\r\n  lineHeight: unsafeCSS(\r\n    `var(--m3e-expansion-header-line-height, ${DesignToken.typescale.standard.title.medium.lineHeight})`,\r\n  ),\r\n  tracking: unsafeCSS(`var(--m3e-expansion-header-tracking, ${DesignToken.typescale.standard.title.medium.tracking})`),\r\n} as const;\r\n","import { css, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { ExpansionHeaderToken } from \"./ExpansionHeaderToken\";\r\n\r\n/**\r\n * Styles for `M3eExpansionHeaderElement`.\r\n * @internal\r\n */\r\nexport const ExpansionHeaderStyle = css`\r\n  :host {\r\n    display: block;\r\n    border-radius: inherit;\r\n    outline: none;\r\n    user-select: none;\r\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    transition: ${unsafeCSS(`height var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})\r\n        ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  .base {\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    border-radius: inherit;\r\n    outline: none;\r\n    position: relative;\r\n    padding-inline-start: ${ExpansionHeaderToken.paddingLeft};\r\n    padding-inline-end: ${ExpansionHeaderToken.paddingRight};\r\n    font-size: ${ExpansionHeaderToken.fontSize};\r\n    font-weight: ${ExpansionHeaderToken.fontWeight};\r\n    line-height: ${ExpansionHeaderToken.lineHeight};\r\n    letter-spacing: ${ExpansionHeaderToken.tracking};\r\n    column-gap: ${ExpansionHeaderToken.spacing};\r\n  }\r\n  :host(:not(:disabled)) {\r\n    cursor: pointer;\r\n  }\r\n  :host(:not([aria-expanded=\"true\"])) {\r\n    height: ${ExpansionHeaderToken.collapsedHeight};\r\n  }\r\n  :host([aria-expanded=\"true\"]) {\r\n    height: ${ExpansionHeaderToken.expandedHeight};\r\n  }\r\n  :host(:not(:focus-visible)) .state-layer {\r\n    --m3e-state-layer-focus-color: transparent;\r\n  }\r\n  :host([aria-expanded=\"true\"]) .state-layer {\r\n    --m3e-state-layer-hover-color: transparent;\r\n  }\r\n  :host([aria-expanded=\"true\"]) [part=\"background\"],\r\n  .content {\r\n    flex: 1 1 auto;\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  .toggle {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    vertical-align: middle;\r\n    font-size: ${ExpansionHeaderToken.toggleIconSize};\r\n    transition: ${unsafeCSS(`transform var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})\r\n        ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  :host([toggle-direction=\"vertical\"][aria-expanded=\"true\"]) .toggle {\r\n    transform: rotate(180deg);\r\n  }\r\n  :host([toggle-direction=\"horizontal\"][aria-expanded=\"true\"]) .toggle {\r\n    transform: rotate(var(--_expansion-header-horizontal-expanded-toggle-rotation, 90deg));\r\n  }\r\n  :host([toggle-position=\"before\"]) .toggle {\r\n    margin-inline-start: calc(0px - ${ExpansionHeaderToken.spacing});\r\n  }\r\n  :host([toggle-position=\"after\"]) .toggle {\r\n    margin-inline-end: calc(0px - ${ExpansionHeaderToken.spacing});\r\n  }\r\n  :host([hide-toggle]) .toggle {\r\n    display: none;\r\n  }\r\n  ::slotted([slot=\"toggle-icon\"]) {\r\n    font-size: inherit !important;\r\n    flex: none;\r\n  }\r\n  ::slotted(svg[slot=\"toggle-icon\"]) {\r\n    width: 1em;\r\n    height: 1em;\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    :host,\r\n    .toggle {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens for `M3eExpansionPanelElement`.\r\n * @internal\r\n */\r\nexport const ExpansionPanelToken = {\r\n  textColor: unsafeCSS(`var(--m3e-expansion-panel-text-color, ${DesignToken.color.onSurface})`),\r\n  disabledTextColor: unsafeCSS(`var(--m3e-expansion-panel-disabled-text-color, ${DesignToken.color.onSurface})`),\r\n  disabledTextOpacity: unsafeCSS(`var(--m3e-expansion-panel-disabled-text-opacity, 38%)`),\r\n  containerColor: unsafeCSS(\"var(--m3e-expansion-panel-container-color)\"),\r\n  collapsedElevation: unsafeCSS(\"var(--m3e-expansion-panel-elevation)\"),\r\n  collapsedShape: unsafeCSS(\"var(--m3e-expansion-panel-shape)\"),\r\n  expandedElevation: unsafeCSS(\"var(--m3e-expansion-panel-open-elevation, var(--m3e-expansion-panel-elevation))\"),\r\n  expandedShape: unsafeCSS(\"var(--m3e-expansion-panel-open-shape, var(--m3e-expansion-panel-shape))\"),\r\n  expandedSpace: unsafeCSS(\"var(--_expansion-panel-open-spacing)\"),\r\n  contentPadding: unsafeCSS(\"var(--m3e-expansion-panel-content-padding, 0 1.5rem 1rem 1.5rem)\"),\r\n  actionsSpacing: unsafeCSS(\"var(--m3e-expansion-panel-actions-spacing, 0.5rem)\"),\r\n  actionsPadding: unsafeCSS(\"var(--m3e-expansion-panel-actions-padding, 1rem 1.5rem 1rem 1.5rem)\"),\r\n  actionsDividerThickness: unsafeCSS(\r\n    \"var(--m3e-expansion-panel-actions-divider-thickness, var(--m3e-divider-thickness, 1px))\",\r\n  ),\r\n  actionsDividerColor: unsafeCSS(\r\n    `var(--m3e-expansion-panel-actions-divider-color, var(--m3e-divider-color, ${DesignToken.color.outlineVariant}))`,\r\n  ),\r\n} as const;\r\n","import { css, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { ExpansionPanelToken } from \"./ExpansionPanelToken\";\r\nimport { ExpansionHeaderToken } from \"./ExpansionHeaderToken\";\r\n\r\n/**\r\n * Styles for `M3eExpansionPanelElement`.\r\n * @internal\r\n */\r\nexport const ExpansionPanelStyle = css`\r\n  :host {\r\n    display: block;\r\n  }\r\n  .base {\r\n    background-color: ${ExpansionPanelToken.containerColor};\r\n    transition: ${unsafeCSS(`box-shadow var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})\r\n        ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  :host(:not(:disabled)) .base {\r\n    color: ${ExpansionPanelToken.textColor};\r\n  }\r\n  :host(:disabled) .base {\r\n    color: color-mix(\r\n      in srgb,\r\n      ${ExpansionPanelToken.disabledTextColor} ${ExpansionPanelToken.disabledTextOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host(:not([open])) .base {\r\n    box-shadow: ${ExpansionPanelToken.collapsedElevation};\r\n    border-radius: ${ExpansionPanelToken.collapsedShape};\r\n  }\r\n  :host([open]) .base {\r\n    box-shadow: ${ExpansionPanelToken.expandedElevation};\r\n    border-radius: ${ExpansionPanelToken.expandedShape};\r\n    margin-block: ${ExpansionPanelToken.expandedSpace};\r\n  }\r\n  .toggle {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: ${ExpansionHeaderToken.toggleIconSize};\r\n  }\r\n  ::slotted([slot=\"toggle-icon\"]) {\r\n    font-size: inherit !important;\r\n    flex: none;\r\n  }\r\n  .toggle svg,\r\n  ::slotted(svg[slot=\"toggle-icon\"]) {\r\n    width: 1em;\r\n    height: 1em;\r\n  }\r\n  .content {\r\n    padding: ${ExpansionPanelToken.contentPadding};\r\n  }\r\n  :host(:not(:is(:state(--with-actions), :--with-actions))) .actions {\r\n    display: none;\r\n  }\r\n  .actions {\r\n    padding: ${ExpansionPanelToken.actionsPadding};\r\n    border-top-style: solid;\r\n    border-top-width: ${ExpansionPanelToken.actionsDividerThickness};\r\n    border-top-color: ${ExpansionPanelToken.actionsDividerColor};\r\n  }\r\n  ::slotted([slot=\"actions\"]) {\r\n    flex: none;\r\n    display: flex;\r\n    align-items: center;\r\n    column-gap: ${ExpansionPanelToken.actionsSpacing};\r\n  }\r\n  ::slotted([slot=\"actions\"][end]) {\r\n    justify-content: flex-end;\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .base {\r\n      transition: none;\r\n    }\r\n  }\r\n  @media (forced-colors: active) {\r\n    .base {\r\n      border: 1px solid CanvasText;\r\n    }\r\n    :host(:disabled) .base {\r\n      color: GrayText;\r\n    }\r\n    .actions {\r\n      border-top-color: GrayText;\r\n    }\r\n  }\r\n`;\r\n","import { CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  Disabled,\r\n  Focusable,\r\n  KeyboardClick,\r\n  M3eFocusRingElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { ExpansionTogglePosition } from \"./ExpansionTogglePosition\";\r\nimport { ExpansionToggleDirection } from \"./ExpansionToggleDirection\";\r\n\r\nimport { ExpansionHeaderStyle } from \"./styles\";\r\n\r\n/**\r\n * A button used to toggle the expanded state of an expansion panel.\r\n *\r\n * @tag m3e-expansion-header\r\n *\r\n * @slot - Renders the content of the header.\r\n * @slot toggle-icon - Renders the icon of the expansion toggle.\r\n *\r\n * @attr hide-toggle - Whether to hide the expansion toggle.\r\n * @attr toggle-direction - The direction of the expansion toggle.\r\n * @attr toggle-position - The position of the expansion toggle.\r\n *\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-expansion-header-collapsed-height - Height of the header when the panel is collapsed.\r\n * @cssprop --m3e-expansion-header-expanded-height - Height of the header when the panel is expanded.\r\n * @cssprop --m3e-expansion-header-padding-left - Left padding inside the header.\r\n * @cssprop --m3e-expansion-header-padding-right - Right padding inside the header.\r\n * @cssprop --m3e-expansion-header-spacing - Spacing between header elements.\r\n * @cssprop --m3e-expansion-header-toggle-icon-size - Size of the toggle icon (e.g. chevron).\r\n * @cssprop --m3e-expansion-header-font-size - The font size of the header text.\r\n * @cssprop --m3e-expansion-header-font-weight - The font weight of the header text.\r\n * @cssprop --m3e-expansion-header-line-height - The line height of the header text.\r\n * @cssprop --m3e-expansion-header-tracking - Letter spacing (tracking) of the header text.\r\n */\r\n@customElement(\"m3e-expansion-header\")\r\nexport class M3eExpansionHeaderElement extends KeyboardClick(\r\n  Focusable(Disabled(AttachInternals(Role(LitElement, \"button\"), true))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = ExpansionHeaderStyle;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n\r\n  /**\r\n   * The direction of the expansion toggle.\r\n   * @default \"vertical\"\r\n   */\r\n  @property({ attribute: \"toggle-direction\", reflect: true }) toggleDirection: ExpansionToggleDirection = \"vertical\";\r\n\r\n  /**\r\n   * The position of the expansion toggle.\r\n   * @default \"after\"\r\n   */\r\n  @property({ attribute: \"toggle-position\", reflect: true }) togglePosition: ExpansionTogglePosition = \"after\";\r\n\r\n  /**\r\n   * Whether to hide the expansion toggle.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-toggle\", type: Boolean, reflect: true }) hideToggle = false;\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      ${this.togglePosition === \"before\" ? this.#renderToggle() : nothing}\r\n      <div class=\"content\">\r\n        <slot></slot>\r\n      </div>\r\n      ${this.togglePosition === \"after\" ? this.#renderToggle() : nothing}\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderToggle(): unknown {\r\n    return html`<div class=\"toggle\" aria-hidden=\"true\">\r\n      <slot name=\"toggle-icon\"></slot>\r\n    </div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-expansion-header\": M3eExpansionHeaderElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\n\r\nimport { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  Disabled,\r\n  hasAssignedNodes,\r\n  ReconnectedCallback,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { ExpansionTogglePosition } from \"./ExpansionTogglePosition\";\r\nimport { ExpansionToggleDirection } from \"./ExpansionToggleDirection\";\r\n\r\nimport { ExpansionPanelStyle } from \"./styles\";\r\nimport { M3eExpansionHeaderElement } from \"./ExpansionHeaderElement\";\r\n\r\n/**\r\n * An expandable details-summary view.\r\n *\r\n * @description\r\n * The `m3e-expansion-panel` component provides an accessible, animated details-summary view for\r\n * organizing content in collapsible sections. It supports custom header, content, actions, and\r\n * toggle icon slots, and offers configurable toggle position and direction. The panel responds to\r\n * open/close states, emits lifecycle events, and supports rich theming via CSS custom properties\r\n * for elevation, shape, spacing, and color.\r\n *\r\n * @example\r\n * The following example illustrates the basic use of the `m3e-accordion` and `m3e-expansion-panel` components.\r\n *\r\n * ```html\r\n * <m3e-accordion>\r\n *   <m3e-expansion-panel>\r\n *     <span slot=\"header\">Panel 1</span>\r\n *     I am content for the first expansion panel\r\n *   </m3e-expansion-panel>\r\n *   <m3e-expansion-panel>\r\n *     <span slot=\"header\">Panel 2</span>\r\n *     I am content for the second expansion panel\r\n *   </m3e-expansion-panel>\r\n * </m3e-accordion>\r\n * ```\r\n *\r\n * @tag m3e-expansion-panel\r\n *\r\n * @slot - Renders the detail of the panel.\r\n * @slot actions - Renders the actions bar of the panel.\r\n * @slot header - Renders the header content.\r\n * @slot toggle-icon - Renders the expansion toggle icon.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr hide-toggle - Whether to hide the expansion toggle.\r\n * @attr open - Whether the panel is expanded.\r\n * @attr toggle-direction - The direction of the expansion toggle.\r\n * @attr toggle-position - The position of the expansion toggle.\r\n *\r\n * @fires opening - Emitted when the expansion panel begins to open.\r\n * @fires opened - Emitted when the expansion panel has opened.\r\n * @fires closing - Emitted when the expansion panel begins to close.\r\n * @fires closed - Emitted when the expansion panel has closed.\r\n *\r\n * @cssprop --m3e-expansion-header-collapsed-height - Height of the header when the panel is collapsed.\r\n * @cssprop --m3e-expansion-header-expanded-height - Height of the header when the panel is expanded.\r\n * @cssprop --m3e-expansion-header-padding-left - Left padding inside the header.\r\n * @cssprop --m3e-expansion-header-padding-right - Right padding inside the header.\r\n * @cssprop --m3e-expansion-header-spacing - Spacing between header elements.\r\n * @cssprop --m3e-expansion-header-toggle-icon-size - Size of the toggle icon (e.g. chevron).\r\n * @cssprop --m3e-expansion-header-font-size - The font size of the header text.\r\n * @cssprop --m3e-expansion-header-font-weight - The font weight of the header text.\r\n * @cssprop --m3e-expansion-header-line-height - The line height of the header text.\r\n * @cssprop --m3e-expansion-header-tracking - Letter spacing (tracking) of the header text.\r\n * @cssprop --m3e-expansion-panel-text-color - Color of the panel's text content.\r\n * @cssprop --m3e-expansion-panel-disabled-text-color - Color of the panel's text content, when disabled.\r\n * @cssprop --m3e-expansion-panel-disabled-text-opacity - Opacity of the panel's text content, when disabled.\r\n * @cssprop --m3e-expansion-panel-container-color - Background color of the panel container.\r\n * @cssprop --m3e-expansion-panel-elevation - Elevation level when the panel is collapsed.\r\n * @cssprop --m3e-expansion-panel-shape - Shape (e.g. border radius) of the panel when collapsed.\r\n * @cssprop --m3e-expansion-panel-open-elevation - Elevation level when the panel is expanded.\r\n * @cssprop --m3e-expansion-panel-open-shape - Shape (e.g. border radius) of the panel when expanded.\r\n * @cssprop --m3e-expansion-panel-content-padding - Padding around the panel's content area.\r\n * @cssprop --m3e-expansion-panel-actions-spacing - Spacing between action buttons or elements.\r\n * @cssprop --m3e-expansion-panel-actions-padding - Padding around the actions section.\r\n * @cssprop --m3e-expansion-panel-actions-divider-thickness - Thickness of the divider above actions.\r\n * @cssprop --m3e-expansion-panel-actions-divider-color - Color of the divider above actions.\r\n */\r\n@customElement(\"m3e-expansion-panel\")\r\nexport class M3eExpansionPanelElement extends Disabled(ReconnectedCallback(AttachInternals(LitElement, true))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = ExpansionPanelStyle;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ #id = M3eExpansionPanelElement.__nextId++;\r\n  /** @private */ #contentId = `m3e-expansion-panel-${this.#id}-content`;\r\n  /** @private */ #headerId = `m3e-expansion-panel-${this.#id}-header`;\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n\r\n  /** @private */ @query(\"m3e-expansion-header\") private readonly _header?: M3eExpansionHeaderElement;\r\n\r\n  /**\r\n   * Whether the panel is expanded.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) open = false;\r\n\r\n  /**\r\n   * The direction of the expansion toggle.\r\n   * @default \"vertical\"\r\n   */\r\n  @property({ attribute: \"toggle-direction\", reflect: true }) toggleDirection: ExpansionToggleDirection = \"vertical\";\r\n\r\n  /**\r\n   * The position of the expansion toggle.\r\n   * @default \"after\"\r\n   */\r\n  @property({ attribute: \"toggle-position\", reflect: true }) togglePosition: ExpansionTogglePosition = \"after\";\r\n\r\n  /**\r\n   * Whether to hide the expansion toggle.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-toggle\", type: Boolean, reflect: true }) hideToggle = false;\r\n\r\n  /** @inheritdoc */\r\n  override focus(options?: FocusOptions): void {\r\n    this._header?.focus(options);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override blur(): void {\r\n    this._header?.blur();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override click(): void {\r\n    this._header?.click();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.#directionalitySubscription = M3eDirectionality.observe(() => {\r\n      this.requestUpdate();\r\n      this.#updateHeaderToggleRotation();\r\n    });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#updateHeaderToggleRotation();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#updateHeaderToggleRotation();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-expansion-header\r\n        id=\"${this.#headerId}\"\r\n        toggle-direction=\"${this.toggleDirection}\"\r\n        toggle-position=\"${this.togglePosition}\"\r\n        ?hide-toggle=\"${this.hideToggle}\"\r\n        ?disabled=\"${this.disabled}\"\r\n        aria-expanded=\"${this.open}\"\r\n        aria-controls=\"${this.#contentId}\"\r\n        @click=\"${this.#handleHeaderClick}\"\r\n        @keydown=\"${this.#handleKeyDown}\"\r\n      >\r\n        <div slot=\"toggle-icon\" class=\"toggle\">\r\n          <slot name=\"toggle-icon\">${this.#renderToggleIcon()}</slot>\r\n        </div>\r\n        <slot name=\"header\"></slot>\r\n      </m3e-expansion-header>\r\n      <m3e-collapsible\r\n        id=\"${this.#contentId}\"\r\n        role=\"region\"\r\n        aria-labelledby=\"${this.#headerId}\"\r\n        ?open=\"${this.open}\"\r\n        @opening=\"${this.#handleCollapsibleEvent}\"\r\n        @opened=\"${this.#handleCollapsibleEvent}\"\r\n        @closing=\"${this.#handleCollapsibleEvent}\"\r\n        @closed=\"${this.#handleCollapsibleEvent}\"\r\n      >\r\n        <div class=\"content\">\r\n          <slot></slot>\r\n        </div>\r\n        <div class=\"actions\">\r\n          <slot name=\"actions\" @slotchange=\"${this.#handleActionsSlotChange}\"></slot>\r\n        </div>\r\n      </m3e-collapsible>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderToggleIcon(): unknown {\r\n    return this.toggleDirection === \"vertical\"\r\n      ? html`<svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n          <path d=\"M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z\" />\r\n        </svg>`\r\n      : M3eDirectionality.current === \"ltr\"\r\n        ? html`<svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n            <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\r\n          </svg>`\r\n        : html`<svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n            <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\r\n          </svg>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleHeaderClick() {\r\n    this.open = !this.open;\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    switch (e.key) {\r\n      case \"ArrowUp\":\r\n        {\r\n          e.preventDefault();\r\n          const accordion = this.closest(\"m3e-accordion\");\r\n          if (accordion) {\r\n            const panels = [...accordion.panels].reverse();\r\n            const index = panels.indexOf(this);\r\n            (\r\n              panels.find((x, i) => !x.disabled && i > index) ?? panels.find((x, i) => !x.disabled && i < index)\r\n            )?._header?.focus();\r\n          } else {\r\n            this.open = false;\r\n          }\r\n        }\r\n\r\n        break;\r\n\r\n      case \"ArrowDown\":\r\n        {\r\n          e.preventDefault();\r\n          const accordion = this.closest(\"m3e-accordion\");\r\n          if (accordion) {\r\n            const index = accordion.panels.indexOf(this);\r\n            (\r\n              accordion.panels.find((x, i) => !x.disabled && i > index) ??\r\n              accordion.panels.find((x, i) => !x.disabled && i < index)\r\n            )?._header?.focus();\r\n          } else {\r\n            this.open = true;\r\n          }\r\n        }\r\n\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleCollapsibleEvent(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(e.type, { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleActionsSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-actions\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n  }\r\n\r\n  /** @private */\r\n  #updateHeaderToggleRotation(): void {\r\n    if (M3eDirectionality.current === \"rtl\") {\r\n      this._header?.style.setProperty(\"--_expansion-header-horizontal-expanded-toggle-rotation\", \"-90deg\");\r\n    } else {\r\n      this._header?.style.removeProperty(\"--_expansion-header-horizontal-expanded-toggle-rotation\");\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eExpansionPanelElementEventMap extends HTMLElementEventMap {\r\n  opening: Event;\r\n  opened: Event;\r\n  closing: Event;\r\n  closed: Event;\r\n}\r\n\r\nexport interface M3eExpansionPanelElement {\r\n  addEventListener<K extends keyof M3eExpansionPanelElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eExpansionPanelElement, ev: M3eExpansionPanelElementEventMap[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 M3eExpansionPanelElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eExpansionPanelElement, ev: M3eExpansionPanelElementEventMap[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-expansion-panel\": M3eExpansionPanelElement;\r\n  }\r\n}\r\n"],"names":["M3eAccordionElement","LitElement","constructor","_M3eAccordionElement_panels","set","this","multi","panels","__classPrivateFieldGet","render","html","_M3eAccordionElement_instances","_M3eAccordionElement_handleSlotChange","_M3eAccordionElement_handleOpening","__classPrivateFieldSet","querySelectorAll","alreadyOpen","panel","filter","x","open","e","target","styles","css","DesignToken","color","surface","elevation","level2","shape","corner","medium","value","none","__decorate","property","type","Boolean","prototype","customElement","ExpansionHeaderToken","unsafeCSS","typescale","standard","title","fontSize","fontWeight","lineHeight","tracking","ExpansionHeaderStyle","motion","duration","medium1","easing","ExpansionPanelToken","onSurface","outlineVariant","ExpansionPanelStyle","M3eExpansionHeaderElement","KeyboardClick","Focusable","Disabled","AttachInternals","Role","toggleDirection","togglePosition","hideToggle","firstUpdated","_changedProperties","super","_focusRing","_stateLayer","forEach","attach","disabled","_M3eExpansionHeaderElement_instances","_M3eExpansionHeaderElement_renderToggle","nothing","query","attribute","reflect","M3eExpansionPanelElement","M3eExpansionPanelElement_1","ReconnectedCallback","_M3eExpansionPanelElement_id","__nextId","_M3eExpansionPanelElement_contentId","_M3eExpansionPanelElement_headerId","_M3eExpansionPanelElement_directionalitySubscription","focus","options","_header","blur","click","connectedCallback","M3eDirectionality","observe","requestUpdate","_M3eExpansionPanelElement_instances","_M3eExpansionPanelElement_updateHeaderToggleRotation","call","disconnectedCallback","reconnectedCallback","_M3eExpansionPanelElement_handleHeaderClick","_M3eExpansionPanelElement_handleKeyDown","_M3eExpansionPanelElement_renderToggleIcon","_M3eExpansionPanelElement_handleCollapsibleEvent","_M3eExpansionPanelElement_handleActionsSlotChange","current","key","preventDefault","accordion","closest","reverse","index","indexOf","find","i","stopPropagation","dispatchEvent","Event","bubbles","setCustomState","hasAssignedNodes","style","setProperty","removeProperty"],"mappings":"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"}

package/dist/fab-menu.js

@@ -216,8 +216,8 @@ let M3eFabMenuElement = class M3eFabMenuElement extends SuppressInitialAnimation
       flip: true,
       offset: 8
     }, (x, y, position) => {
-      setCustomState(this, "-right", position.includes("end"));
-      setCustomState(this, "-left", position.includes("start"));
+      setCustomState(this, "--right", position.includes("end"));
+      setCustomState(this, "--left", position.includes("start"));
       if (M3eDirectionality.current === "rtl") {
         this.style.right = `${window.innerWidth - x - this.clientWidth}px`;
         this.style.left = "";
@@ -340,10 +340,10 @@ _M3eFabMenuElement_detachFab = function _M3eFabMenuElement_detachFab() {
   }
 };
 /** The styles of the element. */
-M3eFabMenuElement.styles = css`: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(:state(-no-animate))) { transition: ${unsafeCSS(`opacity ${DesignToken.motion.spring.fastEffects}, 
+M3eFabMenuElement.styles = css`: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: ${unsafeCSS(`opacity ${DesignToken.motion.spring.fastEffects}, 
         transform ${DesignToken.motion.spring.fastSpatial},
         overlay ${DesignToken.motion.spring.fastEffects} allow-discrete,
-        display ${DesignToken.motion.spring.fastEffects} allow-discrete`)}; } .base { display: contents; } :host([variant="primary"]) .base { --_fab-menu-item-color: var(--m3e-primary-fab-color, ${DesignToken.color.onPrimaryContainer}); --_fab-menu-item-container-color: var(--m3e-primary-fab-container-color, ${DesignToken.color.primaryContainer}); --_fab-menu-background-hover-color: var(--m3e-primary-fab-hover-color, ${DesignToken.color.onPrimaryContainer}); --_fab-menu-background-focus-color: var(--m3e-primary-fab-focus-color, ${DesignToken.color.onPrimaryContainer}); --_fab-menu-ripple-color: var(--m3e-primary-fab-ripple-color, ${DesignToken.color.onPrimaryContainer}); } :host([variant="secondary"]) .base { --_fab-menu-item-color: var(--m3e-secondary-fab-color, ${DesignToken.color.onSecondaryContainer}); --_fab-menu-item-container-color: var( --m3e-secondary-fab-container-color, ${DesignToken.color.secondaryContainer} ); --_fab-menu-background-hover-color: var( --m3e-secondary-fab-hover-color, ${DesignToken.color.onSecondaryContainer} ); --_fab-menu-background-focus-color: var( --m3e-secondary-fab-focus-color, ${DesignToken.color.onSecondaryContainer} ); --_fab-menu-ripple-color: var(--m3e-secondary-fab-ripple-color, ${DesignToken.color.onSecondaryContainer}); } :host([variant="tertiary"]) .base { --_fab-menu-item-color: var(--m3e-tertiary-fab-color, ${DesignToken.color.onTertiaryContainer}); --_fab-menu-item-container-color: var(--m3e-tertiary-fab-container-color, ${DesignToken.color.tertiaryContainer}); --_fab-menu-background-hover-color: var(--m3e-tertiary-fab-hover-color, ${DesignToken.color.onTertiaryContainer}); --_fab-menu-background-focus-color: var(--m3e-tertiary-fab-focus-color, ${DesignToken.color.onTertiaryContainer}); --_fab-menu-ripple-color: var(--m3e-tertiary-fab-ripple-color, ${DesignToken.color.onTertiaryContainer}); } :host { transform: scaleX(0.8); } :host(:state(-left)) { align-items: flex-start; transform-origin: left; } :host(:state(-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(:state(-no-animate))) { transition: none; } } @media (forced-colors: active) { :host { border-radius: ${DesignToken.shape.corner.medium}; outline: 1px solid MenuText; background-color: Menu; } }`;
+        display ${DesignToken.motion.spring.fastEffects} allow-discrete`)}; } .base { display: contents; } :host([variant="primary"]) .base { --_fab-menu-item-color: var(--m3e-primary-fab-color, ${DesignToken.color.onPrimaryContainer}); --_fab-menu-item-container-color: var(--m3e-primary-fab-container-color, ${DesignToken.color.primaryContainer}); --_fab-menu-background-hover-color: var(--m3e-primary-fab-hover-color, ${DesignToken.color.onPrimaryContainer}); --_fab-menu-background-focus-color: var(--m3e-primary-fab-focus-color, ${DesignToken.color.onPrimaryContainer}); --_fab-menu-ripple-color: var(--m3e-primary-fab-ripple-color, ${DesignToken.color.onPrimaryContainer}); } :host([variant="secondary"]) .base { --_fab-menu-item-color: var(--m3e-secondary-fab-color, ${DesignToken.color.onSecondaryContainer}); --_fab-menu-item-container-color: var( --m3e-secondary-fab-container-color, ${DesignToken.color.secondaryContainer} ); --_fab-menu-background-hover-color: var( --m3e-secondary-fab-hover-color, ${DesignToken.color.onSecondaryContainer} ); --_fab-menu-background-focus-color: var( --m3e-secondary-fab-focus-color, ${DesignToken.color.onSecondaryContainer} ); --_fab-menu-ripple-color: var(--m3e-secondary-fab-ripple-color, ${DesignToken.color.onSecondaryContainer}); } :host([variant="tertiary"]) .base { --_fab-menu-item-color: var(--m3e-tertiary-fab-color, ${DesignToken.color.onTertiaryContainer}); --_fab-menu-item-container-color: var(--m3e-tertiary-fab-container-color, ${DesignToken.color.tertiaryContainer}); --_fab-menu-background-hover-color: var(--m3e-tertiary-fab-hover-color, ${DesignToken.color.onTertiaryContainer}); --_fab-menu-background-focus-color: var(--m3e-tertiary-fab-focus-color, ${DesignToken.color.onTertiaryContainer}); --_fab-menu-ripple-color: var(--m3e-tertiary-fab-ripple-color, ${DesignToken.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: ${DesignToken.shape.corner.medium}; outline: 1px solid MenuText; background-color: Menu; } }`;
 __decorate([property({
   reflect: true
 })], M3eFabMenuElement.prototype, "variant", void 0);

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 - 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","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/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","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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"}

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(:state(-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(:state(-left)) { align-items: flex-start; transform-origin: left; } :host(:state(-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(:state(-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,__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};
 //# sourceMappingURL=fab-menu.min.js.map