@m3e/web 2.5.12 → 2.5.14

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(: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 - Dispatched 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 - Dispatched when the expansion panel begins to open.\r\n * @fires opened - Dispatched when the expansion panel has opened.\r\n * @fires closing - Dispatched when the expansion panel begins to close.\r\n * @fires closed - Dispatched 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    contain: layout style;\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    min-width: 0;\r\n  }\r\n  .toggle {\r\n    contain: layout style paint;\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    contain: layout style;\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 - Dispatched 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        <m3e-text-overflow><slot></slot></m3e-text-overflow>\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 - Dispatched when the expansion panel begins to open.\r\n * @fires opened - Dispatched when the expansion panel has opened.\r\n * @fires closing - Dispatched when the expansion panel begins to close.\r\n * @fires closed - Dispatched 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      case \" \":\r\n        e.preventDefault();\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

@@ -3,107 +3,15 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import { __classPrivateFieldGet, __decorate, __classPrivateFieldSet } from 'tslib';
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from 'tslib';
 import { LitElement, html, unsafeCSS, css } from 'lit';
-import { query, property } from 'lit/decorators.js';
-import { KeyboardClick, LinkButton, Disabled, AttachInternals, Role, renderPseudoLink, DesignToken, customElement, SuppressInitialAnimation, ScrollController, setCustomState, HtmlFor, ActionElementBase } from '@m3e/web/core';
+import { property, query } from 'lit/decorators.js';
+import { SuppressInitialAnimation, AttachInternals, Role, ScrollController, ClickOutsideController, setCustomState, DesignToken, customElement, KeyboardClick, LinkButton, Disabled, renderPseudoLink, HtmlFor, ActionElementBase } from '@m3e/web/core';
 import { RovingTabIndexManager, addAriaReferencedId, removeAriaReferencedId } from '@m3e/web/core/a11y';
 import { M3eDirectionality } from '@m3e/web/core/bidi';
 import { positionAnchor } from '@m3e/web/core/anchoring';
 
-var _M3eFabMenuItemElement_instances, _M3eFabMenuItemElement_clickHandler, _M3eFabMenuItemElement_handleClick;
-/**
- * An item of a floating action button (FAB) menu.
- *
- * @example
- * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.
- * ```html
- * <m3e-fab variant="primary" size="large">
- *  <m3e-fab-menu-trigger for="fabmenu">
- *    <m3e-icon name="edit"></m3e-icon>
- *  </m3e-fab-menu-trigger>
- * </m3e-fab>
- * <m3e-fab-menu id="fabmenu" variant="secondary">
- *  <m3e-fab-menu-item>First</m3e-fab-menu-item>
- *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>
- *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>
- *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>
- *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>
- *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>
- * </m3e-fab-menu>
- * ```
- *
- * @tag m3e-menu-item
- *
- * @slot - Renders the label of the item.
- * @slot icon - Renders an icon before the items's label.
- *
- * @attr disabled - Whether the element is disabled.
- * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.
- * @attr href - The URL to which the link button points.
- * @attr rel - The relationship between the `target` of the link button and the document.
- * @attr target - The target of the link button.
- *
- * @fires click - Dispatched when the element is clicked.
- *
- * @cssprop --m3e-fab-menu-item-height - Height of the menu item.
- * @cssprop --m3e-fab-menu-item-font-size - Font size of the menu item label.
- * @cssprop --m3e-fab-menu-item-font-weight - Font weight of the menu item label.
- * @cssprop --m3e-fab-menu-item-line-height - Line height of the menu item label.
- * @cssprop --m3e-fab-menu-item-tracking - Letter spacing of the menu item label.
- * @cssprop --m3e-fab-menu-item-shape - Border radius of the menu item.
- * @cssprop --m3e-fab-menu-item-leading-space - Padding at the start of the menu item.
- * @cssprop --m3e-fab-menu-item-trailing-space - Padding at the end of the menu item.
- * @cssprop --m3e-fab-menu-item-spacing - Gap between icon and label.
- * @cssprop --m3e-fab-menu-item-icon-size - Size of the icon in the menu item.
- */
-let M3eFabMenuItemElement = class M3eFabMenuItemElement extends KeyboardClick(LinkButton(Disabled(AttachInternals(Role(LitElement, "menuitem"), true)))) {
-  constructor() {
-    super(...arguments);
-    _M3eFabMenuItemElement_instances.add(this);
-    /** @private */
-    _M3eFabMenuItemElement_clickHandler.set(this, e => __classPrivateFieldGet(this, _M3eFabMenuItemElement_instances, "m", _M3eFabMenuItemElement_handleClick).call(this, e));
-  }
-  /** The floating action button (FAB) menu to which this item belongs. */
-  get menu() {
-    return this.closest("m3e-fab-menu");
-  }
-  /** @inheritdoc */
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("click", __classPrivateFieldGet(this, _M3eFabMenuItemElement_clickHandler, "f"));
-  }
-  /** @inheritdoc */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("click", __classPrivateFieldGet(this, _M3eFabMenuItemElement_clickHandler, "f"));
-  }
-  /** @inheritdoc */
-  firstUpdated(_changedProperties) {
-    super.firstUpdated(_changedProperties);
-    [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach(x => x?.attach(this));
-  }
-  /** @inheritdoc */
-  render() {
-    return html`<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[renderPseudoLink]()}<div class="wrapper"><slot class="icon" name="icon" aria-hidden="true"></slot><div class="label"><slot></slot></div></div></div>`;
-  }
-};
-_M3eFabMenuItemElement_clickHandler = new WeakMap();
-_M3eFabMenuItemElement_instances = new WeakSet();
-_M3eFabMenuItemElement_handleClick = function _M3eFabMenuItemElement_handleClick(e) {
-  if (!e.defaultPrevented) {
-    this.menu?.hide(true);
-  }
-};
-/** The styles of the element. */
-M3eFabMenuItemElement.styles = css`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; height: var(--m3e-fab-menu-item-height, 3.5rem); font-size: var(--m3e-fab-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-fab-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-fab-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-fab-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking}); border-radius: var(--m3e-fab-menu-item-shape, ${DesignToken.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, ${DesignToken.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, ${DesignToken.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: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .icon { font-size: var(--m3e-fab-menu-item-icon-size, 1.5rem); transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.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; } }`;
-__decorate([query(".elevation")], M3eFabMenuItemElement.prototype, "_elevation", void 0);
-__decorate([query(".focus-ring")], M3eFabMenuItemElement.prototype, "_focusRing", void 0);
-__decorate([query(".state-layer")], M3eFabMenuItemElement.prototype, "_stateLayer", void 0);
-__decorate([query(".ripple")], M3eFabMenuItemElement.prototype, "_ripple", void 0);
-M3eFabMenuItemElement = __decorate([customElement("m3e-fab-menu-item")], M3eFabMenuItemElement);
-
-var _M3eFabMenuElement_instances, _M3eFabMenuElement_fabTabIndex, _M3eFabMenuElement_trigger, _M3eFabMenuElement_anchoringCleanup, _M3eFabMenuElement_listManager, _M3eFabMenuElement_keyDownHandler, _M3eFabMenuElement_documentClickHandler, _M3eFabMenuElement_scrollController, _M3eFabMenuElement_toggleHandler, _M3eFabMenuElement_handleSlotChange, _M3eFabMenuElement_handleKeyDown, _M3eFabMenuElement_handleDocumentClick, _M3eFabMenuElement_attachFab, _M3eFabMenuElement_detachFab;
+var _M3eFabMenuElement_instances, _M3eFabMenuElement_fabTabIndex, _M3eFabMenuElement_trigger, _M3eFabMenuElement_anchoringCleanup, _M3eFabMenuElement_listManager, _M3eFabMenuElement_keyDownHandler, _M3eFabMenuElement_scrollController, _M3eFabMenuElement_clickOutsideController, _M3eFabMenuElement_toggleHandler, _M3eFabMenuElement_handleSlotChange, _M3eFabMenuElement_handleKeyDown, _M3eFabMenuElement_attachFab, _M3eFabMenuElement_detachFab;
 /**
  * A menu, opened from a floating action button (FAB), used to display multiple related actions.
  *
@@ -172,21 +80,30 @@ let M3eFabMenuElement = class M3eFabMenuElement extends SuppressInitialAnimation
     /** @private */
     _M3eFabMenuElement_keyDownHandler.set(this, e => __classPrivateFieldGet(this, _M3eFabMenuElement_instances, "m", _M3eFabMenuElement_handleKeyDown).call(this, e));
     /** @private */
-    _M3eFabMenuElement_documentClickHandler.set(this, e => __classPrivateFieldGet(this, _M3eFabMenuElement_instances, "m", _M3eFabMenuElement_handleDocumentClick).call(this, e));
-    /** @private */
     _M3eFabMenuElement_scrollController.set(this, new ScrollController(this, {
       target: null,
       callback: () => this.hide()
     }));
     /** @private */
+    _M3eFabMenuElement_clickOutsideController.set(this, new ClickOutsideController(this, {
+      target: null,
+      callback: () => this.hide()
+    }));
+    /** @private */
     _M3eFabMenuElement_toggleHandler.set(this, e => {
-      if (e.newState === "closed") {
-        __classPrivateFieldGet(this, _M3eFabMenuElement_anchoringCleanup, "f")?.call(this);
-        __classPrivateFieldSet(this, _M3eFabMenuElement_anchoringCleanup, undefined, "f");
-      } else {
-        setTimeout(() => {
-          __classPrivateFieldGet(this, _M3eFabMenuElement_listManager, "f").setActiveItem(__classPrivateFieldGet(this, _M3eFabMenuElement_listManager, "f").items.find(x => !x.disabled));
-        }, 40);
+      switch (e.newState) {
+        case "open":
+          __classPrivateFieldGet(this, _M3eFabMenuElement_clickOutsideController, "f").observe(this);
+          if (__classPrivateFieldGet(this, _M3eFabMenuElement_trigger, "f")) {
+            __classPrivateFieldGet(this, _M3eFabMenuElement_clickOutsideController, "f").observe(__classPrivateFieldGet(this, _M3eFabMenuElement_trigger, "f"));
+          }
+          setTimeout(() => __classPrivateFieldGet(this, _M3eFabMenuElement_listManager, "f").setActiveItem(__classPrivateFieldGet(this, _M3eFabMenuElement_listManager, "f").items.find(x => !x.disabled)), 40);
+          break;
+        case "closed":
+          __classPrivateFieldGet(this, _M3eFabMenuElement_clickOutsideController, "f").unobserveAll();
+          __classPrivateFieldGet(this, _M3eFabMenuElement_anchoringCleanup, "f")?.call(this);
+          __classPrivateFieldSet(this, _M3eFabMenuElement_anchoringCleanup, undefined, "f");
+          break;
       }
     });
     /**
@@ -270,14 +187,12 @@ let M3eFabMenuElement = class M3eFabMenuElement extends SuppressInitialAnimation
     this.setAttribute("popover", "manual");
     this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eFabMenuElement_keyDownHandler, "f"));
     this.addEventListener("toggle", __classPrivateFieldGet(this, _M3eFabMenuElement_toggleHandler, "f"));
-    document.addEventListener("click", __classPrivateFieldGet(this, _M3eFabMenuElement_documentClickHandler, "f"));
   }
   /** @inheritdoc */
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener("keydown", __classPrivateFieldGet(this, _M3eFabMenuElement_keyDownHandler, "f"));
     this.removeEventListener("toggle", __classPrivateFieldGet(this, _M3eFabMenuElement_toggleHandler, "f"));
-    document.removeEventListener("click", __classPrivateFieldGet(this, _M3eFabMenuElement_documentClickHandler, "f"));
   }
   /** @inheritdoc */
   render() {
@@ -289,8 +204,8 @@ _M3eFabMenuElement_trigger = new WeakMap();
 _M3eFabMenuElement_anchoringCleanup = new WeakMap();
 _M3eFabMenuElement_listManager = new WeakMap();
 _M3eFabMenuElement_keyDownHandler = new WeakMap();
-_M3eFabMenuElement_documentClickHandler = new WeakMap();
 _M3eFabMenuElement_scrollController = new WeakMap();
+_M3eFabMenuElement_clickOutsideController = new WeakMap();
 _M3eFabMenuElement_toggleHandler = new WeakMap();
 _M3eFabMenuElement_instances = new WeakSet();
 _M3eFabMenuElement_handleSlotChange = function _M3eFabMenuElement_handleSlotChange() {
@@ -316,11 +231,6 @@ _M3eFabMenuElement_handleKeyDown = function _M3eFabMenuElement_handleKeyDown(e)
       break;
   }
 };
-_M3eFabMenuElement_handleDocumentClick = function _M3eFabMenuElement_handleDocumentClick(e) {
-  if (!e.composedPath().some(x => x instanceof M3eFabMenuItemElement || x === __classPrivateFieldGet(this, _M3eFabMenuElement_trigger, "f"))) {
-    this.hide();
-  }
-};
 _M3eFabMenuElement_attachFab = function _M3eFabMenuElement_attachFab() {
   const fab = __classPrivateFieldGet(this, _M3eFabMenuElement_trigger, "f")?.closest("m3e-fab");
   if (fab) {
@@ -340,7 +250,7 @@ _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(:is(:state(--no-animate), :--no-animate))) { transition: ${unsafeCSS(`opacity ${DesignToken.motion.spring.fastEffects}, 
+M3eFabMenuElement.styles = css`:host { contain: layout style; 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(: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; } }`;
@@ -349,6 +259,98 @@ __decorate([property({
 })], M3eFabMenuElement.prototype, "variant", void 0);
 M3eFabMenuElement = __decorate([customElement("m3e-fab-menu")], M3eFabMenuElement);
 
+var _M3eFabMenuItemElement_instances, _M3eFabMenuItemElement_clickHandler, _M3eFabMenuItemElement_handleClick;
+/**
+ * An item of a floating action button (FAB) menu.
+ *
+ * @example
+ * The following example illustrates triggering a `m3e-fab-menu` from an `m3e-fab` using a `m3e-fab-menu-trigger`.
+ * ```html
+ * <m3e-fab variant="primary" size="large">
+ *  <m3e-fab-menu-trigger for="fabmenu">
+ *    <m3e-icon name="edit"></m3e-icon>
+ *  </m3e-fab-menu-trigger>
+ * </m3e-fab>
+ * <m3e-fab-menu id="fabmenu" variant="secondary">
+ *  <m3e-fab-menu-item>First</m3e-fab-menu-item>
+ *  <m3e-fab-menu-item>Second</m3e-fab-menu-item>
+ *  <m3e-fab-menu-item>Third</m3e-fab-menu-item>
+ *  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>
+ *  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>
+ *  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>
+ * </m3e-fab-menu>
+ * ```
+ *
+ * @tag m3e-menu-item
+ *
+ * @slot - Renders the label of the item.
+ * @slot icon - Renders an icon before the items's label.
+ *
+ * @attr disabled - Whether the element is disabled.
+ * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.
+ * @attr href - The URL to which the link button points.
+ * @attr rel - The relationship between the `target` of the link button and the document.
+ * @attr target - The target of the link button.
+ *
+ * @fires click - Dispatched when the element is clicked.
+ *
+ * @cssprop --m3e-fab-menu-item-height - Height of the menu item.
+ * @cssprop --m3e-fab-menu-item-font-size - Font size of the menu item label.
+ * @cssprop --m3e-fab-menu-item-font-weight - Font weight of the menu item label.
+ * @cssprop --m3e-fab-menu-item-line-height - Line height of the menu item label.
+ * @cssprop --m3e-fab-menu-item-tracking - Letter spacing of the menu item label.
+ * @cssprop --m3e-fab-menu-item-shape - Border radius of the menu item.
+ * @cssprop --m3e-fab-menu-item-leading-space - Padding at the start of the menu item.
+ * @cssprop --m3e-fab-menu-item-trailing-space - Padding at the end of the menu item.
+ * @cssprop --m3e-fab-menu-item-spacing - Gap between icon and label.
+ * @cssprop --m3e-fab-menu-item-icon-size - Size of the icon in the menu item.
+ */
+let M3eFabMenuItemElement = class M3eFabMenuItemElement extends KeyboardClick(LinkButton(Disabled(AttachInternals(Role(LitElement, "menuitem"), true)))) {
+  constructor() {
+    super(...arguments);
+    _M3eFabMenuItemElement_instances.add(this);
+    /** @private */
+    _M3eFabMenuItemElement_clickHandler.set(this, e => __classPrivateFieldGet(this, _M3eFabMenuItemElement_instances, "m", _M3eFabMenuItemElement_handleClick).call(this, e));
+  }
+  /** The floating action button (FAB) menu to which this item belongs. */
+  get menu() {
+    return this.closest("m3e-fab-menu");
+  }
+  /** @inheritdoc */
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", __classPrivateFieldGet(this, _M3eFabMenuItemElement_clickHandler, "f"));
+  }
+  /** @inheritdoc */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", __classPrivateFieldGet(this, _M3eFabMenuItemElement_clickHandler, "f"));
+  }
+  /** @inheritdoc */
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach(x => x?.attach(this));
+  }
+  /** @inheritdoc */
+  render() {
+    return html`<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[renderPseudoLink]()}<div class="wrapper"><slot class="icon" name="icon" aria-hidden="true"></slot><div class="label"><slot></slot></div></div></div>`;
+  }
+};
+_M3eFabMenuItemElement_clickHandler = new WeakMap();
+_M3eFabMenuItemElement_instances = new WeakSet();
+_M3eFabMenuItemElement_handleClick = function _M3eFabMenuItemElement_handleClick(e) {
+  if (!e.defaultPrevented) {
+    this.menu?.hide(true);
+  }
+};
+/** The styles of the element. */
+M3eFabMenuItemElement.styles = css`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; height: var(--m3e-fab-menu-item-height, 3.5rem); font-size: var(--m3e-fab-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-fab-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-fab-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-fab-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking}); border-radius: var(--m3e-fab-menu-item-shape, ${DesignToken.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, ${DesignToken.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, ${DesignToken.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: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .icon { font-size: var(--m3e-fab-menu-item-icon-size, 1.5rem); transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.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; } }`;
+__decorate([query(".elevation")], M3eFabMenuItemElement.prototype, "_elevation", void 0);
+__decorate([query(".focus-ring")], M3eFabMenuItemElement.prototype, "_focusRing", void 0);
+__decorate([query(".state-layer")], M3eFabMenuItemElement.prototype, "_stateLayer", void 0);
+__decorate([query(".ripple")], M3eFabMenuItemElement.prototype, "_ripple", void 0);
+M3eFabMenuItemElement = __decorate([customElement("m3e-fab-menu-item")], M3eFabMenuItemElement);
+
 /**
  * An element, nested within a clickable element, used to open a floating action button (FAB) menu.
  *