@m3e/web 2.5.5 → 2.5.7

package/dist/expansion-panel.js.map

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

package/dist/fab-menu.js

@@ -44,7 +44,7 @@ var _M3eFabMenuItemElement_instances, _M3eFabMenuItemElement_clickHandler, _M3eF
  * @attr rel - The relationship between the `target` of the link button and the document.
  * @attr target - The target of the link button.
  *
- * @fires click - Emitted when the element is clicked.
+ * @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.