@m3e/web 2.5.2 → 2.5.4

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(:state(-with-actions))) .actions {\r\n    display: none;\r\n  }\r\n  .actions {\r\n    padding: ${ExpansionPanelToken.actionsPadding};\r\n    border-top-style: solid;\r\n    border-top-width: ${ExpansionPanelToken.actionsDividerThickness};\r\n    border-top-color: ${ExpansionPanelToken.actionsDividerColor};\r\n  }\r\n  ::slotted([slot=\"actions\"]) {\r\n    flex: none;\r\n    display: flex;\r\n    align-items: center;\r\n    column-gap: ${ExpansionPanelToken.actionsSpacing};\r\n  }\r\n  ::slotted([slot=\"actions\"][end]) {\r\n    justify-content: flex-end;\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .base {\r\n      transition: none;\r\n    }\r\n  }\r\n  @media (forced-colors: active) {\r\n    .base {\r\n      border: 1px solid CanvasText;\r\n    }\r\n    :host(:disabled) .base {\r\n      color: GrayText;\r\n    }\r\n    .actions {\r\n      border-top-color: GrayText;\r\n    }\r\n  }\r\n`;\r\n","import { CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  Disabled,\r\n  Focusable,\r\n  KeyboardClick,\r\n  M3eFocusRingElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { ExpansionTogglePosition } from \"./ExpansionTogglePosition\";\r\nimport { ExpansionToggleDirection } from \"./ExpansionToggleDirection\";\r\n\r\nimport { ExpansionHeaderStyle } from \"./styles\";\r\n\r\n/**\r\n * A button used to toggle the expanded state of an expansion panel.\r\n *\r\n * @tag m3e-expansion-header\r\n *\r\n * @slot - Renders the content of the header.\r\n * @slot toggle-icon - Renders the icon of the expansion toggle.\r\n *\r\n * @attr hide-toggle - Whether to hide the expansion toggle.\r\n * @attr toggle-direction - The direction of the expansion toggle.\r\n * @attr toggle-position - The position of the expansion toggle.\r\n *\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-expansion-header-collapsed-height - Height of the header when the panel is collapsed.\r\n * @cssprop --m3e-expansion-header-expanded-height - Height of the header when the panel is expanded.\r\n * @cssprop --m3e-expansion-header-padding-left - Left padding inside the header.\r\n * @cssprop --m3e-expansion-header-padding-right - Right padding inside the header.\r\n * @cssprop --m3e-expansion-header-spacing - Spacing between header elements.\r\n * @cssprop --m3e-expansion-header-toggle-icon-size - Size of the toggle icon (e.g. chevron).\r\n * @cssprop --m3e-expansion-header-font-size - The font size of the header text.\r\n * @cssprop --m3e-expansion-header-font-weight - The font weight of the header text.\r\n * @cssprop --m3e-expansion-header-line-height - The line height of the header text.\r\n * @cssprop --m3e-expansion-header-tracking - Letter spacing (tracking) of the header text.\r\n */\r\n@customElement(\"m3e-expansion-header\")\r\nexport class M3eExpansionHeaderElement extends KeyboardClick(\r\n  Focusable(Disabled(AttachInternals(Role(LitElement, \"button\"), true))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = ExpansionHeaderStyle;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n\r\n  /**\r\n   * The direction of the expansion toggle.\r\n   * @default \"vertical\"\r\n   */\r\n  @property({ attribute: \"toggle-direction\", reflect: true }) toggleDirection: ExpansionToggleDirection = \"vertical\";\r\n\r\n  /**\r\n   * The position of the expansion toggle.\r\n   * @default \"after\"\r\n   */\r\n  @property({ attribute: \"toggle-position\", reflect: true }) togglePosition: ExpansionTogglePosition = \"after\";\r\n\r\n  /**\r\n   * Whether to hide the expansion toggle.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-toggle\", type: Boolean, reflect: true }) hideToggle = false;\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      ${this.togglePosition === \"before\" ? this.#renderToggle() : nothing}\r\n      <div class=\"content\">\r\n        <slot></slot>\r\n      </div>\r\n      ${this.togglePosition === \"after\" ? this.#renderToggle() : nothing}\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderToggle(): unknown {\r\n    return html`<div class=\"toggle\" aria-hidden=\"true\">\r\n      <slot name=\"toggle-icon\"></slot>\r\n    </div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-expansion-header\": M3eExpansionHeaderElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\n\r\nimport { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  Disabled,\r\n  EventAttribute,\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 EventAttribute(\r\n  Disabled(ReconnectedCallback(AttachInternals(LitElement, true))),\r\n  \"opening\",\r\n  \"opened\",\r\n  \"closing\",\r\n  \"closed\",\r\n) {\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","EventAttribute","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":";;;;;;;;;;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BG;AAEI,IAAMA,mBAAmB,GAAzB,MAAMA,mBAAoB,SAAQC,UAAU,CAAA;AAA5CC,EAAAA,WAAAA,GAAA;;;AAyBL;AAAgBC,IAAAA,2BAAA,CAAAC,GAAA,CAAA,IAAA,EAA2C,EAAE,CAAA;AAE7D;;;AAGG;IAC0B,IAAA,CAAAC,KAAK,GAAG,KAAK;AAqC5C,EAAA;AAnCE;EACA,IAAIC,MAAMA,GAAA;AACR,IAAA,OAAOC,sBAAA,CAAA,IAAI,EAAAJ,2BAAA,EAAA,GAAA,CAAQ;AACrB,EAAA;AAEA;AACmBK,EAAAA,MAAMA,GAAA;IACvB,OAAOC,IAAI,sBAAsBF,sBAAA,CAAA,IAAI,EAAAG,8BAAA,EAAA,GAAA,EAAAC,qCAAA,CAAkB,CAAA,YAAA,EAAeJ,sBAAA,CAAA,IAAI,EAAAG,8BAAA,EAAA,GAAA,EAAAE,kCAAA,CAAe,CAAA,SAAA,CAAW;AACtG,EAAA;;;;;AAIEC,EAAAA,sBAAA,CAAA,IAAI,EAAAV,2BAAA,EAAW,CAAC,GAAG,IAAI,CAACW,gBAAgB,CAAC,qBAAqB,CAAC,CAAC,EAAA,GAAA,CAAA;EAEhE,IAAI,IAAI,CAACT,KAAK,EAAE;AACd,IAAA;AACF,EAAA;EAEA,IAAIU,WAAW,GAAG,KAAK;EACvB,KAAK,MAAMC,KAAK,IAAIT,sBAAA,CAAA,IAAI,EAAAJ,2BAAA,EAAA,GAAA,CAAQ,CAACc,MAAM,CAAEC,CAAC,IAAK,CAACA,CAAC,CAACC,IAAI,CAAC,EAAE;AACvD,IAAA,IAAIJ,WAAW,EAAE;MACfC,KAAK,CAACG,IAAI,GAAG,KAAK;AACpB,IAAA;AACAJ,IAAAA,WAAW,GAAG,IAAI;AACpB,EAAA;AACF,CAAC;iFAGcK,CAAQ,EAAA;AACrB,EAAA,IAAI,CAAC,IAAI,CAACf,KAAK,EAAE;IACf,KAAK,MAAMW,KAAK,IAAIT,sBAAA,CAAA,IAAI,mCAAQ,CAACU,MAAM,CAAEC,CAAC,IAAKA,CAAC,KAAKE,CAAC,CAACC,MAAM,IAAIH,CAAC,CAACC,IAAI,CAAC,EAAE;MACxEH,KAAK,CAACG,IAAI,GAAG,KAAK;AACpB,IAAA;AACF,EAAA;AACF,CAAC;AAlED;AACgBnB,mBAAA,CAAAsB,MAAM,GAAmBC,GAAG,CAAA,kGAAA,EAKCC,WAAW,CAACC,KAAK,CAACC,OAAO,CAAA,mCAAA,EAC/BF,WAAW,CAACG,SAAS,CAACC,MAAM,CAAA,oCAAA,EAC3BJ,WAAW,CAACK,KAAK,CAACC,MAAM,CAACC,MAAM,CAAA,oIAAA,EAIpCP,WAAW,CAACK,KAAK,CAACC,MAAM,CAACC,MAAM,CAAA,mGAAA,EAG/BP,WAAW,CAACK,KAAK,CAACC,MAAM,CAACE,KAAK,CAACD,MAAM,CAAA,CAAA,EAAIP,WAAW,CAACK,KAAK,CAACC,MAAM,CAACE,KAAK,CAACD,MAAM,CAAA,CAAA,EACzGP,WAAW,CAACK,KAAK,CAACC,MAAM,CAACE,KAAK,CAACC,IAAI,CAAA,CAAA,EAAIT,WAAW,CAACK,KAAK,CAACC,MAAM,CAACE,KAAK,CAACC,IAAI,CAAA,mGAAA,EAG/CT,WAAW,CAACK,KAAK,CAACC,MAAM,CAACE,KAAK,CAACC,IAAI,CAAA,CAAA,EAAIT,WAAW,CAACK,KAAK,CAACC,MAAM,CAACE,KAAK,CAACC,IAAI,IACrGT,WAAW,CAACK,KAAK,CAACC,MAAM,CAACE,KAAK,CAACD,MAAM,CAAA,CAAA,EAAIP,WAAW,CAACK,KAAK,CAACC,MAAM,CAACE,KAAK,CAACD,MAAM,CAAA,GAAA,CAnBhE;AA6BOG,UAAA,CAAA,CAA5BC,QAAQ,CAAC;AAAEC,EAAAA,IAAI,EAAEC;CAAS,CAAC,CAAe,EAAArC,mBAAA,CAAAsC,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AA/BhCtC,mBAAmB,GAAAkC,UAAA,CAAA,CAD/BK,aAAa,CAAC,eAAe,CAAC,CAClB,EAAAvC,mBAAmB,CAoE/B;;ACvGD;;;AAGG;AACI,MAAMwC,oBAAoB,GAAG;AAClCC,EAAAA,eAAe,EAAEC,SAAS,CAAC,oDAAoD,CAAC;AAChFC,EAAAA,cAAc,EAAED,SAAS,CAAC,mDAAmD,CAAC;AAC9EE,EAAAA,WAAW,EAAEF,SAAS,CAAC,kDAAkD,CAAC;AAC1EG,EAAAA,YAAY,EAAEH,SAAS,CAAC,mDAAmD,CAAC;AAC5EI,EAAAA,OAAO,EAAEJ,SAAS,CAAC,6CAA6C,CAAC;AACjEK,EAAAA,cAAc,EAAEL,SAAS,CAAC,sDAAsD,CAAC;AACjFM,EAAAA,QAAQ,EAAEN,SAAS,CAAC,CAAA,sCAAA,EAAyClB,WAAW,CAACyB,SAAS,CAACC,QAAQ,CAACC,KAAK,CAACpB,MAAM,CAACiB,QAAQ,GAAG,CAAC;AACrHI,EAAAA,UAAU,EAAEV,SAAS,CACnB,CAAA,wCAAA,EAA2ClB,WAAW,CAACyB,SAAS,CAACC,QAAQ,CAACC,KAAK,CAACpB,MAAM,CAACqB,UAAU,GAAG,CACrG;AACDC,EAAAA,UAAU,EAAEX,SAAS,CACnB,CAAA,wCAAA,EAA2ClB,WAAW,CAACyB,SAAS,CAACC,QAAQ,CAACC,KAAK,CAACpB,MAAM,CAACsB,UAAU,GAAG,CACrG;AACDC,EAAAA,QAAQ,EAAEZ,SAAS,CAAC,CAAA,qCAAA,EAAwClB,WAAW,CAACyB,SAAS,CAACC,QAAQ,CAACC,KAAK,CAACpB,MAAM,CAACuB,QAAQ,CAAA,CAAA,CAAG;CAC3G;;ACjBV;;;AAGG;AACI,MAAMC,oBAAoB,GAAGhC,GAAG,gJAOrBmB,SAAS,CAAC,CAAA,iDAAA,EAAoDlB,WAAW,CAACgC,MAAM,CAACC,QAAQ,CAACC,OAAO,CAAA;AACzG,QAAA,EAAAlC,WAAW,CAACgC,MAAM,CAACG,MAAM,CAACT,QAAQ,CAAA,CAAE,CAAC,CAAA,+JAAA,EAUnBV,oBAAoB,CAACI,WAAW,CAAA,sBAAA,EAClCJ,oBAAoB,CAACK,YAAY,CAAA,aAAA,EAC1CL,oBAAoB,CAACQ,QAAQ,CAAA,eAAA,EAC3BR,oBAAoB,CAACY,UAAU,CAAA,eAAA,EAC/BZ,oBAAoB,CAACa,UAAU,CAAA,kBAAA,EAC5Bb,oBAAoB,CAACc,QAAQ,CAAA,cAAA,EACjCd,oBAAoB,CAACM,OAAO,CAAA,8FAAA,EAMhCN,oBAAoB,CAACC,eAAe,CAAA,4CAAA,EAGpCD,oBAAoB,CAACG,cAAc,CAAA,sZAAA,EAmBhCH,oBAAoB,CAACO,cAAc,CAAA,cAAA,EAClCL,SAAS,CAAC,CAAA,oDAAA,EAAuDlB,WAAW,CAACgC,MAAM,CAACC,QAAQ,CAACC,OAAO,CAAA;AAC5G,QAAA,EAAAlC,WAAW,CAACgC,MAAM,CAACG,MAAM,CAACT,QAAQ,CAAA,CAAE,CAAC,CAAA,mVAAA,EASTV,oBAAoB,CAACM,OAAO,iFAG9BN,oBAAoB,CAACM,OAAO,CAAA,4QAAA,CAmB/D;;AC3FD;;;AAGG;AACI,MAAMc,mBAAmB,GAAG;EACjCC,SAAS,EAAEnB,SAAS,CAAC,CAAA,sCAAA,EAAyClB,WAAW,CAACC,KAAK,CAACqC,SAAS,CAAA,CAAA,CAAG,CAAC;EAC7FC,iBAAiB,EAAErB,SAAS,CAAC,CAAA,+CAAA,EAAkDlB,WAAW,CAACC,KAAK,CAACqC,SAAS,CAAA,CAAA,CAAG,CAAC;AAC9GE,EAAAA,mBAAmB,EAAEtB,SAAS,CAAC,CAAA,qDAAA,CAAuD,CAAC;AACvFuB,EAAAA,cAAc,EAAEvB,SAAS,CAAC,4CAA4C,CAAC;AACvEwB,EAAAA,kBAAkB,EAAExB,SAAS,CAAC,sCAAsC,CAAC;AACrEyB,EAAAA,cAAc,EAAEzB,SAAS,CAAC,kCAAkC,CAAC;AAC7D0B,EAAAA,iBAAiB,EAAE1B,SAAS,CAAC,iFAAiF,CAAC;AAC/G2B,EAAAA,aAAa,EAAE3B,SAAS,CAAC,yEAAyE,CAAC;AACnG4B,EAAAA,aAAa,EAAE5B,SAAS,CAAC,sCAAsC,CAAC;AAChE6B,EAAAA,cAAc,EAAE7B,SAAS,CAAC,kEAAkE,CAAC;AAC7F8B,EAAAA,cAAc,EAAE9B,SAAS,CAAC,oDAAoD,CAAC;AAC/E+B,EAAAA,cAAc,EAAE/B,SAAS,CAAC,qEAAqE,CAAC;AAChGgC,EAAAA,uBAAuB,EAAEhC,SAAS,CAChC,yFAAyF,CAC1F;EACDiC,mBAAmB,EAAEjC,SAAS,CAC5B,CAAA,0EAAA,EAA6ElB,WAAW,CAACC,KAAK,CAACmD,cAAc,CAAA,EAAA,CAAI;CAE3G;;ACpBV;;;AAGG;AACI,MAAMC,mBAAmB,GAAGtD,GAAG,CAAA,oDAAA,EAKdqC,mBAAmB,CAACK,cAAc,CAAA,cAAA,EACxCvB,SAAS,CAAC,wDAAwDlB,WAAW,CAACgC,MAAM,CAACC,QAAQ,CAACC,OAAO,CAAA;AAC7G,QAAA,EAAAlC,WAAW,CAACgC,MAAM,CAACG,MAAM,CAACT,QAAQ,CAAA,CAAE,CAAC,CAAA,0CAAA,EAGlCU,mBAAmB,CAACC,SAAS,CAAA,wDAAA,EAKlCD,mBAAmB,CAACG,iBAAiB,CAAA,CAAA,EAAIH,mBAAmB,CAACI,mBAAmB,CAAA,2DAAA,EAKtEJ,mBAAmB,CAACM,kBAAkB,CAAA,iBAAA,EACnCN,mBAAmB,CAACO,cAAc,yCAGrCP,mBAAmB,CAACQ,iBAAiB,CAAA,iBAAA,EAClCR,mBAAmB,CAACS,aAAa,CAAA,gBAAA,EAClCT,mBAAmB,CAACU,aAAa,CAAA,sFAAA,EAMpC9B,oBAAoB,CAACO,cAAc,CAAA,oLAAA,EAYrCa,mBAAmB,CAACW,cAAc,CAAA,uFAAA,EAMlCX,mBAAmB,CAACa,cAAc,CAAA,6CAAA,EAEzBb,mBAAmB,CAACc,uBAAuB,CAAA,oBAAA,EAC3Cd,mBAAmB,CAACe,mBAAmB,CAAA,8FAAA,EAM7Cf,mBAAmB,CAACY,cAAc,CAAA,mSAAA,CAqBnD;;;ACxED;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;AAEI,IAAMM,yBAAyB,GAA/B,MAAMA,yBAA0B,SAAQC,aAAa,CAC1DC,SAAS,CAACC,QAAQ,CAACC,eAAe,CAACC,IAAI,CAAClF,UAAU,EAAE,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CACvE,CAAA;AAFMC,EAAAA,WAAAA,GAAA;;;AASL;;;AAGG;IACyD,IAAA,CAAAkF,eAAe,GAA6B,UAAU;AAElH;;;AAGG;IACwD,IAAA,CAAAC,cAAc,GAA4B,OAAO;AAE5G;;;AAGG;IACmE,IAAA,CAAAC,UAAU,GAAG,KAAK;AA2B1F,EAAA;AAzBE;EACmBC,YAAYA,CAACC,kBAAwC,EAAA;AACtE,IAAA,KAAK,CAACD,YAAY,CAACC,kBAAkB,CAAC;AACtC,IAAA,CAAC,IAAI,CAACC,UAAU,EAAE,IAAI,CAACC,WAAW,CAAC,CAACC,OAAO,CAAEzE,CAAC,IAAKA,CAAC,EAAE0E,MAAM,CAAC,IAAI,CAAC,CAAC;AACrE,EAAA;AAEA;AACmBpF,EAAAA,MAAMA,GAAA;IACvB,OAAOC,IAAI,CAAA,gEAAA,EACuC,IAAI,CAACoF,QAAQ,CAAA,mEAAA,EACX,IAAI,CAACA,QAAQ,CAAA,oBAAA,EAC7D,IAAI,CAACR,cAAc,KAAK,QAAQ,GAAG9E,sBAAA,CAAA,IAAI,EAAAuF,oCAAA,EAAA,GAAA,EAAAC,uCAAA,CAAc,MAAlB,IAAI,CAAgB,GAAGC,OAAO,CAAA,wCAAA,EAIjE,IAAI,CAACX,cAAc,KAAK,OAAO,GAAG9E,sBAAA,CAAA,IAAI,EAAAuF,oCAAA,EAAA,GAAA,EAAAC,uCAAA,CAAc,MAAlB,IAAI,CAAgB,GAAGC,OAAO,CAAA,MAAA,CAC7D;AACT,EAAA;;;;AAIE,EAAA,OAAOvF,IAAI,CAAA,6EAAA,CAEJ;AACT,CAAC;AAhDD;AACgBqE,yBAAA,CAAAxD,MAAM,GAAmBiC,oBAAnB;AAEiCrB,UAAA,CAAA,CAAtC+D,KAAK,CAAC,aAAa,CAAC,CAAmD,EAAAnB,yBAAA,CAAAxC,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAChCJ,UAAA,CAAA,CAAvC+D,KAAK,CAAC,cAAc,CAAC,CAAqD,EAAAnB,yBAAA,CAAAxC,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AAM/BJ,UAAA,CAAA,CAA3DC,QAAQ,CAAC;AAAE+D,EAAAA,SAAS,EAAE,kBAAkB;AAAEC,EAAAA,OAAO,EAAE;AAAI,CAAE,CAAC,CAAwD,EAAArB,yBAAA,CAAAxC,SAAA,EAAA,iBAAA,EAAA,MAAA,CAAA;AAMxDJ,UAAA,CAAA,CAA1DC,QAAQ,CAAC;AAAE+D,EAAAA,SAAS,EAAE,iBAAiB;AAAEC,EAAAA,OAAO,EAAE;AAAI,CAAE,CAAC,CAAmD,EAAArB,yBAAA,CAAAxC,SAAA,EAAA,gBAAA,EAAA,MAAA,CAAA;AAMvCJ,UAAA,CAAA,CAArEC,QAAQ,CAAC;AAAE+D,EAAAA,SAAS,EAAE,aAAa;AAAE9D,EAAAA,IAAI,EAAEC,OAAO;AAAE8D,EAAAA,OAAO,EAAE;CAAM,CAAC,CAAoB,EAAArB,yBAAA,CAAAxC,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAzB9EwC,yBAAyB,GAAA5C,UAAA,CAAA,CADrCK,aAAa,CAAC,sBAAsB,CAAC,CACzB,EAAAuC,yBAAyB,CAoDrC;;ACjGD;;;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEG;AAEI,IAAMsB,wBAAwB,GAAAC,0BAAA,GAA9B,MAAMD,wBAAyB,SAAQE,cAAc,CAC1DrB,QAAQ,CAACsB,mBAAmB,CAACrB,eAAe,CAACjF,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,EAChE,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,CACT,CAAA;AANMC,EAAAA,WAAAA,GAAA;;;AAWL;IAAgBsG,4BAAA,CAAApG,GAAA,CAAA,IAAA,EAAMiG,0BAAwB,CAACI,QAAQ,EAAE,CAAA;AACzD;AAAgBC,IAAAA,mCAAA,CAAAtG,GAAA,CAAA,IAAA,EAAa,CAAA,oBAAA,EAAuBG,uBAAA,IAAI,EAAAiG,4BAAA,EAAA,GAAA,CAAI,UAAU,CAAA;AACtE;AAAgBG,IAAAA,kCAAA,CAAAvG,GAAA,CAAA,IAAA,EAAY,CAAA,oBAAA,EAAuBG,uBAAA,IAAI,EAAAiG,4BAAA,EAAA,GAAA,CAAI,SAAS,CAAA;AACpE;AAAgBI,IAAAA,oDAAA,CAAAxG,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;AAIhB;;;AAGG;IACyC,IAAA,CAAAe,IAAI,GAAG,KAAK;AAExD;;;AAGG;IACyD,IAAA,CAAAiE,eAAe,GAA6B,UAAU;AAElH;;;AAGG;IACwD,IAAA,CAAAC,cAAc,GAA4B,OAAO;AAE5G;;;AAGG;IACmE,IAAA,CAAAC,UAAU,GAAG,KAAK;AAiK1F,EAAA;AA/JE;EACSuB,KAAKA,CAACC,OAAsB,EAAA;AACnC,IAAA,IAAI,CAACC,OAAO,EAAEF,KAAK,CAACC,OAAO,CAAC;AAC9B,EAAA;AAEA;AACSE,EAAAA,IAAIA,GAAA;AACX,IAAA,IAAI,CAACD,OAAO,EAAEC,IAAI,EAAE;AACtB,EAAA;AAEA;AACSC,EAAAA,KAAKA,GAAA;AACZ,IAAA,IAAI,CAACF,OAAO,EAAEE,KAAK,EAAE;AACvB,EAAA;AAEA;AACSC,EAAAA,iBAAiBA,GAAA;IACxB,KAAK,CAACA,iBAAiB,EAAE;IACzBrG,sBAAA,CAAA,IAAI,EAAA+F,oDAAA,EAA+BO,iBAAiB,CAACC,OAAO,CAAC,MAAK;MAChE,IAAI,CAACC,aAAa,EAAE;AACpB9G,MAAAA,sBAAA,CAAA,IAAI,EAAA+G,mCAAA,EAAA,GAAA,EAAAC,oDAAA,CAA4B,CAAAC,IAAA,CAAhC,IAAI,CAA8B;IACpC,CAAC,CAAC,MAAA;AACJ,EAAA;AAEA;AACSC,EAAAA,oBAAoBA,GAAA;IAC3B,KAAK,CAACA,oBAAoB,EAAE;IAC5BlH,sBAAA,CAAA,IAAI,EAAAqG,oDAAA,EAAA,GAAA,CAA4B,EAAEY,IAAA,CAAlC,IAAI,CAAgC;AACtC,EAAA;AAEA;AACSE,EAAAA,mBAAmBA,GAAA;IAC1B,KAAK,CAACA,mBAAmB,EAAE;AAC3BnH,IAAAA,sBAAA,CAAA,IAAI,EAAA+G,mCAAA,EAAA,GAAA,EAAAC,oDAAA,CAA4B,CAAAC,IAAA,CAAhC,IAAI,CAA8B;AACpC,EAAA;AAEA;EACSjC,YAAYA,CAACC,kBAAkC,EAAA;AACtD,IAAA,KAAK,CAACD,YAAY,CAACC,kBAAkB,CAAC;AACtCjF,IAAAA,sBAAA,CAAA,IAAI,EAAA+G,mCAAA,EAAA,GAAA,EAAAC,oDAAA,CAA4B,CAAAC,IAAA,CAAhC,IAAI,CAA8B;AACpC,EAAA;AAEA;AACmBhH,EAAAA,MAAMA,GAAA;AACvB,IAAA,OAAOC,IAAI,CAAA,4CAAA,EAEDF,sBAAA,CAAA,IAAI,EAAAoG,kCAAA,EAAA,GAAA,CAAU,CAAA,oBAAA,EACA,IAAI,CAACvB,eAAe,sBACrB,IAAI,CAACC,cAAc,CAAA,gBAAA,EACtB,IAAI,CAACC,UAAU,CAAA,aAAA,EAClB,IAAI,CAACO,QAAQ,CAAA,iBAAA,EACT,IAAI,CAAC1E,IAAI,CAAA,iBAAA,EACTZ,sBAAA,CAAA,IAAI,EAAAmG,mCAAA,EAAA,GAAA,CAAW,aACtBnG,sBAAA,CAAA,IAAI,EAAA+G,mCAAA,EAAA,GAAA,EAAAK,2CAAA,CAAmB,CAAA,YAAA,EACrBpH,sBAAA,CAAA,IAAI,EAAA+G,mCAAA,EAAA,GAAA,EAAAM,uCAAA,CAAe,CAAA,kEAAA,EAGFrH,sBAAA,CAAA,IAAI,EAAA+G,mCAAA,EAAA,GAAA,EAAAO,0CAAA,CAAkB,CAAAL,IAAA,CAAtB,IAAI,CAAoB,CAAA,oFAAA,EAK/CjH,sBAAA,CAAA,IAAI,EAAAmG,mCAAA,EAAA,GAAA,CAAW,CAAA,iCAAA,EAEFnG,sBAAA,CAAA,IAAI,EAAAoG,kCAAA,EAAA,GAAA,CAAU,CAAA,SAAA,EACxB,IAAI,CAACxF,IAAI,CAAA,YAAA,EACNZ,sBAAA,CAAA,IAAI,EAAA+G,mCAAA,EAAA,GAAA,EAAAQ,gDAAA,CAAwB,CAAA,WAAA,EAC7BvH,sBAAA,CAAA,IAAI,EAAA+G,mCAAA,EAAA,GAAA,EAAAQ,gDAAA,CAAwB,CAAA,YAAA,EAC3BvH,sBAAA,CAAA,IAAI,EAAA+G,mCAAA,EAAA,GAAA,EAAAQ,gDAAA,CAAwB,CAAA,WAAA,EAC7BvH,sBAAA,CAAA,IAAI,EAAA+G,mCAAA,EAAA,GAAA,EAAAQ,gDAAA,CAAwB,oGAMDvH,sBAAA,CAAA,IAAI,EAAA+G,mCAAA,EAAA,GAAA,EAAAS,iDAAA,CAAyB,CAAA,uCAAA,CAGhE;AACT,EAAA;;;;;;;;AAIE,EAAA,OAAO,IAAI,CAAC3C,eAAe,KAAK,UAAU,GACtC3E,IAAI,CAAA,yHAAA,CAEG,GACP0G,iBAAiB,CAACa,OAAO,KAAK,KAAK,GACjCvH,IAAI,CAAA,yHAAA,CAEG,GACPA,IAAI,CAAA,yHAAA,CAEG;AACf,CAAC;;AAIC,EAAA,IAAI,CAACU,IAAI,GAAG,CAAC,IAAI,CAACA,IAAI;AACxB,CAAC;2FAGcC,CAAgB,EAAA;EAC7B,QAAQA,CAAC,CAAC6G,GAAG;AACX,IAAA,KAAK,SAAS;AACZ,MAAA;QACE7G,CAAC,CAAC8G,cAAc,EAAE;AAClB,QAAA,MAAMC,SAAS,GAAG,IAAI,CAACC,OAAO,CAAC,eAAe,CAAC;AAC/C,QAAA,IAAID,SAAS,EAAE;UACb,MAAM7H,MAAM,GAAG,CAAC,GAAG6H,SAAS,CAAC7H,MAAM,CAAC,CAAC+H,OAAO,EAAE;AAC9C,UAAA,MAAMC,KAAK,GAAGhI,MAAM,CAACiI,OAAO,CAAC,IAAI,CAAC;AAClC,UAAA,CACEjI,MAAM,CAACkI,IAAI,CAAC,CAACtH,CAAC,EAAEuH,CAAC,KAAK,CAACvH,CAAC,CAAC2E,QAAQ,IAAI4C,CAAC,GAAGH,KAAK,CAAC,IAAIhI,MAAM,CAACkI,IAAI,CAAC,CAACtH,CAAC,EAAEuH,CAAC,KAAK,CAACvH,CAAC,CAAC2E,QAAQ,IAAI4C,CAAC,GAAGH,KAAK,CAAC,GACjGvB,OAAO,EAAEF,KAAK,EAAE;AACrB,QAAA,CAAC,MAAM;UACL,IAAI,CAAC1F,IAAI,GAAG,KAAK;AACnB,QAAA;AACF,MAAA;AAEA,MAAA;AAEF,IAAA,KAAK,WAAW;AACd,MAAA;QACEC,CAAC,CAAC8G,cAAc,EAAE;AAClB,QAAA,MAAMC,SAAS,GAAG,IAAI,CAACC,OAAO,CAAC,eAAe,CAAC;AAC/C,QAAA,IAAID,SAAS,EAAE;UACb,MAAMG,KAAK,GAAGH,SAAS,CAAC7H,MAAM,CAACiI,OAAO,CAAC,IAAI,CAAC;UAC5C,CACEJ,SAAS,CAAC7H,MAAM,CAACkI,IAAI,CAAC,CAACtH,CAAC,EAAEuH,CAAC,KAAK,CAACvH,CAAC,CAAC2E,QAAQ,IAAI4C,CAAC,GAAGH,KAAK,CAAC,IACzDH,SAAS,CAAC7H,MAAM,CAACkI,IAAI,CAAC,CAACtH,CAAC,EAAEuH,CAAC,KAAK,CAACvH,CAAC,CAAC2E,QAAQ,IAAI4C,CAAC,GAAGH,KAAK,CAAC,GACxDvB,OAAO,EAAEF,KAAK,EAAE;AACrB,QAAA,CAAC,MAAM;UACL,IAAI,CAAC1F,IAAI,GAAG,IAAI;AAClB,QAAA;AACF,MAAA;AAEA,MAAA;AACJ;AACF,CAAC;6GAGuBC,CAAQ,EAAA;EAC9BA,CAAC,CAACsH,eAAe,EAAE;EACnB,IAAI,CAACC,aAAa,CAAC,IAAIC,KAAK,CAACxH,CAAC,CAACgB,IAAI,EAAE;AAAEyG,IAAAA,OAAO,EAAE;AAAI,GAAE,CAAC,CAAC;AAC1D,CAAC;+GAGwBzH,CAAQ,EAAA;EAC/B0H,cAAc,CAAC,IAAI,EAAE,eAAe,EAAEC,gBAAgB,CAAC3H,CAAC,CAACC,MAAyB,CAAC,CAAC;AACtF,CAAC;;AAIC,EAAA,IAAI8F,iBAAiB,CAACa,OAAO,KAAK,KAAK,EAAE;IACvC,IAAI,CAACjB,OAAO,EAAEiC,KAAK,CAACC,WAAW,CAAC,yDAAyD,EAAE,QAAQ,CAAC;AACtG,EAAA,CAAC,MAAM;IACL,IAAI,CAAClC,OAAO,EAAEiC,KAAK,CAACE,cAAc,CAAC,yDAAyD,CAAC;AAC/F,EAAA;AACF,CAAC;AAjMD;AACgB9C,wBAAA,CAAA9E,MAAM,GAAmBuD,mBAAnB;AAEtB;AAA+BuB,wBAAA,CAAAK,QAAQ,GAAG,CAAC;AAMqBvE,UAAA,CAAA,CAA/C+D,KAAK,CAAC,sBAAsB,CAAC,CAAsD,EAAAG,wBAAA,CAAA9D,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAMxDJ,UAAA,CAAA,CAA3CC,QAAQ,CAAC;AAAEC,EAAAA,IAAI,EAAEC,OAAO;AAAE8D,EAAAA,OAAO,EAAE;AAAI,CAAE,CAAC,CAAc,EAAAC,wBAAA,CAAA9D,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAMGJ,UAAA,CAAA,CAA3DC,QAAQ,CAAC;AAAE+D,EAAAA,SAAS,EAAE,kBAAkB;AAAEC,EAAAA,OAAO,EAAE;AAAI,CAAE,CAAC,CAAwD,EAAAC,wBAAA,CAAA9D,SAAA,EAAA,iBAAA,EAAA,MAAA,CAAA;AAMxDJ,UAAA,CAAA,CAA1DC,QAAQ,CAAC;AAAE+D,EAAAA,SAAS,EAAE,iBAAiB;AAAEC,EAAAA,OAAO,EAAE;AAAI,CAAE,CAAC,CAAmD,EAAAC,wBAAA,CAAA9D,SAAA,EAAA,gBAAA,EAAA,MAAA,CAAA;AAMvCJ,UAAA,CAAA,CAArEC,QAAQ,CAAC;AAAE+D,EAAAA,SAAS,EAAE,aAAa;AAAE9D,EAAAA,IAAI,EAAEC,OAAO;AAAE8D,EAAAA,OAAO,EAAE;CAAM,CAAC,CAAoB,EAAAC,wBAAA,CAAA9D,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAxC9E8D,wBAAwB,GAAAC,0BAAA,GAAAnE,UAAA,CAAA,CADpCK,aAAa,CAAC,qBAAqB,CAAC,CACxB,EAAA6D,wBAAwB,CAyMpC;;;;"}
+{"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(:state(-with-actions))) .actions {\r\n    display: none;\r\n  }\r\n  .actions {\r\n    padding: ${ExpansionPanelToken.actionsPadding};\r\n    border-top-style: solid;\r\n    border-top-width: ${ExpansionPanelToken.actionsDividerThickness};\r\n    border-top-color: ${ExpansionPanelToken.actionsDividerColor};\r\n  }\r\n  ::slotted([slot=\"actions\"]) {\r\n    flex: none;\r\n    display: flex;\r\n    align-items: center;\r\n    column-gap: ${ExpansionPanelToken.actionsSpacing};\r\n  }\r\n  ::slotted([slot=\"actions\"][end]) {\r\n    justify-content: flex-end;\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .base {\r\n      transition: none;\r\n    }\r\n  }\r\n  @media (forced-colors: active) {\r\n    .base {\r\n      border: 1px solid CanvasText;\r\n    }\r\n    :host(:disabled) .base {\r\n      color: GrayText;\r\n    }\r\n    .actions {\r\n      border-top-color: GrayText;\r\n    }\r\n  }\r\n`;\r\n","import { CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  Disabled,\r\n  Focusable,\r\n  KeyboardClick,\r\n  M3eFocusRingElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { ExpansionTogglePosition } from \"./ExpansionTogglePosition\";\r\nimport { ExpansionToggleDirection } from \"./ExpansionToggleDirection\";\r\n\r\nimport { ExpansionHeaderStyle } from \"./styles\";\r\n\r\n/**\r\n * A button used to toggle the expanded state of an expansion panel.\r\n *\r\n * @tag m3e-expansion-header\r\n *\r\n * @slot - Renders the content of the header.\r\n * @slot toggle-icon - Renders the icon of the expansion toggle.\r\n *\r\n * @attr hide-toggle - Whether to hide the expansion toggle.\r\n * @attr toggle-direction - The direction of the expansion toggle.\r\n * @attr toggle-position - The position of the expansion toggle.\r\n *\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-expansion-header-collapsed-height - Height of the header when the panel is collapsed.\r\n * @cssprop --m3e-expansion-header-expanded-height - Height of the header when the panel is expanded.\r\n * @cssprop --m3e-expansion-header-padding-left - Left padding inside the header.\r\n * @cssprop --m3e-expansion-header-padding-right - Right padding inside the header.\r\n * @cssprop --m3e-expansion-header-spacing - Spacing between header elements.\r\n * @cssprop --m3e-expansion-header-toggle-icon-size - Size of the toggle icon (e.g. chevron).\r\n * @cssprop --m3e-expansion-header-font-size - The font size of the header text.\r\n * @cssprop --m3e-expansion-header-font-weight - The font weight of the header text.\r\n * @cssprop --m3e-expansion-header-line-height - The line height of the header text.\r\n * @cssprop --m3e-expansion-header-tracking - Letter spacing (tracking) of the header text.\r\n */\r\n@customElement(\"m3e-expansion-header\")\r\nexport class M3eExpansionHeaderElement extends KeyboardClick(\r\n  Focusable(Disabled(AttachInternals(Role(LitElement, \"button\"), true))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = ExpansionHeaderStyle;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n\r\n  /**\r\n   * The direction of the expansion toggle.\r\n   * @default \"vertical\"\r\n   */\r\n  @property({ attribute: \"toggle-direction\", reflect: true }) toggleDirection: ExpansionToggleDirection = \"vertical\";\r\n\r\n  /**\r\n   * The position of the expansion toggle.\r\n   * @default \"after\"\r\n   */\r\n  @property({ attribute: \"toggle-position\", reflect: true }) togglePosition: ExpansionTogglePosition = \"after\";\r\n\r\n  /**\r\n   * Whether to hide the expansion toggle.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-toggle\", type: Boolean, reflect: true }) hideToggle = false;\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      ${this.togglePosition === \"before\" ? this.#renderToggle() : nothing}\r\n      <div class=\"content\">\r\n        <slot></slot>\r\n      </div>\r\n      ${this.togglePosition === \"after\" ? this.#renderToggle() : nothing}\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderToggle(): unknown {\r\n    return html`<div class=\"toggle\" aria-hidden=\"true\">\r\n      <slot name=\"toggle-icon\"></slot>\r\n    </div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-expansion-header\": M3eExpansionHeaderElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\n\r\nimport { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  Disabled,\r\n  hasAssignedNodes,\r\n  ReconnectedCallback,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { ExpansionTogglePosition } from \"./ExpansionTogglePosition\";\r\nimport { ExpansionToggleDirection } from \"./ExpansionToggleDirection\";\r\n\r\nimport { ExpansionPanelStyle } from \"./styles\";\r\nimport { M3eExpansionHeaderElement } from \"./ExpansionHeaderElement\";\r\n\r\n/**\r\n * An expandable details-summary view.\r\n *\r\n * @description\r\n * The `m3e-expansion-panel` component provides an accessible, animated details-summary view for\r\n * organizing content in collapsible sections. It supports custom header, content, actions, and\r\n * toggle icon slots, and offers configurable toggle position and direction. The panel responds to\r\n * open/close states, emits lifecycle events, and supports rich theming via CSS custom properties\r\n * for elevation, shape, spacing, and color.\r\n *\r\n * @example\r\n * The following example illustrates the basic use of the `m3e-accordion` and `m3e-expansion-panel` components.\r\n *\r\n * ```html\r\n * <m3e-accordion>\r\n *   <m3e-expansion-panel>\r\n *     <span slot=\"header\">Panel 1</span>\r\n *     I am content for the first expansion panel\r\n *   </m3e-expansion-panel>\r\n *   <m3e-expansion-panel>\r\n *     <span slot=\"header\">Panel 2</span>\r\n *     I am content for the second expansion panel\r\n *   </m3e-expansion-panel>\r\n * </m3e-accordion>\r\n * ```\r\n *\r\n * @tag m3e-expansion-panel\r\n *\r\n * @slot - Renders the detail of the panel.\r\n * @slot actions - Renders the actions bar of the panel.\r\n * @slot header - Renders the header content.\r\n * @slot toggle-icon - Renders the expansion toggle icon.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr hide-toggle - Whether to hide the expansion toggle.\r\n * @attr open - Whether the panel is expanded.\r\n * @attr toggle-direction - The direction of the expansion toggle.\r\n * @attr toggle-position - The position of the expansion toggle.\r\n *\r\n * @fires opening - Emitted when the expansion panel begins to open.\r\n * @fires opened - Emitted when the expansion panel has opened.\r\n * @fires closing - Emitted when the expansion panel begins to close.\r\n * @fires closed - Emitted when the expansion panel has closed.\r\n *\r\n * @cssprop --m3e-expansion-header-collapsed-height - Height of the header when the panel is collapsed.\r\n * @cssprop --m3e-expansion-header-expanded-height - Height of the header when the panel is expanded.\r\n * @cssprop --m3e-expansion-header-padding-left - Left padding inside the header.\r\n * @cssprop --m3e-expansion-header-padding-right - Right padding inside the header.\r\n * @cssprop --m3e-expansion-header-spacing - Spacing between header elements.\r\n * @cssprop --m3e-expansion-header-toggle-icon-size - Size of the toggle icon (e.g. chevron).\r\n * @cssprop --m3e-expansion-header-font-size - The font size of the header text.\r\n * @cssprop --m3e-expansion-header-font-weight - The font weight of the header text.\r\n * @cssprop --m3e-expansion-header-line-height - The line height of the header text.\r\n * @cssprop --m3e-expansion-header-tracking - Letter spacing (tracking) of the header text.\r\n * @cssprop --m3e-expansion-panel-text-color - Color of the panel's text content.\r\n * @cssprop --m3e-expansion-panel-disabled-text-color - Color of the panel's text content, when disabled.\r\n * @cssprop --m3e-expansion-panel-disabled-text-opacity - Opacity of the panel's text content, when disabled.\r\n * @cssprop --m3e-expansion-panel-container-color - Background color of the panel container.\r\n * @cssprop --m3e-expansion-panel-elevation - Elevation level when the panel is collapsed.\r\n * @cssprop --m3e-expansion-panel-shape - Shape (e.g. border radius) of the panel when collapsed.\r\n * @cssprop --m3e-expansion-panel-open-elevation - Elevation level when the panel is expanded.\r\n * @cssprop --m3e-expansion-panel-open-shape - Shape (e.g. border radius) of the panel when expanded.\r\n * @cssprop --m3e-expansion-panel-content-padding - Padding around the panel's content area.\r\n * @cssprop --m3e-expansion-panel-actions-spacing - Spacing between action buttons or elements.\r\n * @cssprop --m3e-expansion-panel-actions-padding - Padding around the actions section.\r\n * @cssprop --m3e-expansion-panel-actions-divider-thickness - Thickness of the divider above actions.\r\n * @cssprop --m3e-expansion-panel-actions-divider-color - Color of the divider above actions.\r\n */\r\n@customElement(\"m3e-expansion-panel\")\r\nexport class M3eExpansionPanelElement extends Disabled(ReconnectedCallback(AttachInternals(LitElement, true))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = ExpansionPanelStyle;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ #id = M3eExpansionPanelElement.__nextId++;\r\n  /** @private */ #contentId = `m3e-expansion-panel-${this.#id}-content`;\r\n  /** @private */ #headerId = `m3e-expansion-panel-${this.#id}-header`;\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n\r\n  /** @private */ @query(\"m3e-expansion-header\") private readonly _header?: M3eExpansionHeaderElement;\r\n\r\n  /**\r\n   * Whether the panel is expanded.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) open = false;\r\n\r\n  /**\r\n   * The direction of the expansion toggle.\r\n   * @default \"vertical\"\r\n   */\r\n  @property({ attribute: \"toggle-direction\", reflect: true }) toggleDirection: ExpansionToggleDirection = \"vertical\";\r\n\r\n  /**\r\n   * The position of the expansion toggle.\r\n   * @default \"after\"\r\n   */\r\n  @property({ attribute: \"toggle-position\", reflect: true }) togglePosition: ExpansionTogglePosition = \"after\";\r\n\r\n  /**\r\n   * Whether to hide the expansion toggle.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-toggle\", type: Boolean, reflect: true }) hideToggle = false;\r\n\r\n  /** @inheritdoc */\r\n  override focus(options?: FocusOptions): void {\r\n    this._header?.focus(options);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override blur(): void {\r\n    this._header?.blur();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override click(): void {\r\n    this._header?.click();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.#directionalitySubscription = M3eDirectionality.observe(() => {\r\n      this.requestUpdate();\r\n      this.#updateHeaderToggleRotation();\r\n    });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#updateHeaderToggleRotation();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#updateHeaderToggleRotation();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-expansion-header\r\n        id=\"${this.#headerId}\"\r\n        toggle-direction=\"${this.toggleDirection}\"\r\n        toggle-position=\"${this.togglePosition}\"\r\n        ?hide-toggle=\"${this.hideToggle}\"\r\n        ?disabled=\"${this.disabled}\"\r\n        aria-expanded=\"${this.open}\"\r\n        aria-controls=\"${this.#contentId}\"\r\n        @click=\"${this.#handleHeaderClick}\"\r\n        @keydown=\"${this.#handleKeyDown}\"\r\n      >\r\n        <div slot=\"toggle-icon\" class=\"toggle\">\r\n          <slot name=\"toggle-icon\">${this.#renderToggleIcon()}</slot>\r\n        </div>\r\n        <slot name=\"header\"></slot>\r\n      </m3e-expansion-header>\r\n      <m3e-collapsible\r\n        id=\"${this.#contentId}\"\r\n        role=\"region\"\r\n        aria-labelledby=\"${this.#headerId}\"\r\n        ?open=\"${this.open}\"\r\n        @opening=\"${this.#handleCollapsibleEvent}\"\r\n        @opened=\"${this.#handleCollapsibleEvent}\"\r\n        @closing=\"${this.#handleCollapsibleEvent}\"\r\n        @closed=\"${this.#handleCollapsibleEvent}\"\r\n      >\r\n        <div class=\"content\">\r\n          <slot></slot>\r\n        </div>\r\n        <div class=\"actions\">\r\n          <slot name=\"actions\" @slotchange=\"${this.#handleActionsSlotChange}\"></slot>\r\n        </div>\r\n      </m3e-collapsible>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderToggleIcon(): unknown {\r\n    return this.toggleDirection === \"vertical\"\r\n      ? html`<svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n          <path d=\"M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z\" />\r\n        </svg>`\r\n      : M3eDirectionality.current === \"ltr\"\r\n        ? html`<svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n            <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\r\n          </svg>`\r\n        : html`<svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n            <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\r\n          </svg>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleHeaderClick() {\r\n    this.open = !this.open;\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    switch (e.key) {\r\n      case \"ArrowUp\":\r\n        {\r\n          e.preventDefault();\r\n          const accordion = this.closest(\"m3e-accordion\");\r\n          if (accordion) {\r\n            const panels = [...accordion.panels].reverse();\r\n            const index = panels.indexOf(this);\r\n            (\r\n              panels.find((x, i) => !x.disabled && i > index) ?? panels.find((x, i) => !x.disabled && i < index)\r\n            )?._header?.focus();\r\n          } else {\r\n            this.open = false;\r\n          }\r\n        }\r\n\r\n        break;\r\n\r\n      case \"ArrowDown\":\r\n        {\r\n          e.preventDefault();\r\n          const accordion = this.closest(\"m3e-accordion\");\r\n          if (accordion) {\r\n            const index = accordion.panels.indexOf(this);\r\n            (\r\n              accordion.panels.find((x, i) => !x.disabled && i > index) ??\r\n              accordion.panels.find((x, i) => !x.disabled && i < index)\r\n            )?._header?.focus();\r\n          } else {\r\n            this.open = true;\r\n          }\r\n        }\r\n\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleCollapsibleEvent(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(e.type, { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleActionsSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-actions\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n  }\r\n\r\n  /** @private */\r\n  #updateHeaderToggleRotation(): void {\r\n    if (M3eDirectionality.current === \"rtl\") {\r\n      this._header?.style.setProperty(\"--_expansion-header-horizontal-expanded-toggle-rotation\", \"-90deg\");\r\n    } else {\r\n      this._header?.style.removeProperty(\"--_expansion-header-horizontal-expanded-toggle-rotation\");\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eExpansionPanelElementEventMap extends HTMLElementEventMap {\r\n  opening: Event;\r\n  opened: Event;\r\n  closing: Event;\r\n  closed: Event;\r\n}\r\n\r\nexport interface M3eExpansionPanelElement {\r\n  addEventListener<K extends keyof M3eExpansionPanelElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eExpansionPanelElement, ev: M3eExpansionPanelElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eExpansionPanelElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eExpansionPanelElement, ev: M3eExpansionPanelElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-expansion-panel\": M3eExpansionPanelElement;\r\n  }\r\n}\r\n"],"names":["M3eAccordionElement","LitElement","constructor","_M3eAccordionElement_panels","set","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

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__decorate as e,__classPrivateFieldGet as t,__classPrivateFieldSet as o}from"tslib";import{css as i,LitElement as n,html as a,unsafeCSS as s,nothing as r}from"lit";import{property as l,query as d}from"lit/decorators.js";import{DesignToken as p,customElement as c,KeyboardClick as h,Focusable as g,Disabled as m,AttachInternals as f,Role as u,EventAttribute as v,ReconnectedCallback as x,setCustomState as b,hasAssignedNodes as $}from"@m3e/web/core";import{M3eDirectionality as y}from"@m3e/web/core/bidi";var k,w,_,z;let C=class extends n{constructor(){super(...arguments),k.add(this),w.set(this,[]),this.multi=!1}get panels(){return t(this,w,"f")}render(){return a`<slot @slotchange="${t(this,k,"m",_)}" @opening="${t(this,k,"m",z)}"></slot>`}};w=new WeakMap,k=new WeakSet,_=function(){if(o(this,w,[...this.querySelectorAll("m3e-expansion-panel")],"f"),this.multi)return;let e=!1;for(const o of t(this,w,"f").filter(e=>!e.open))e&&(o.open=!1),e=!0},z=function(e){if(!this.multi)for(const o of t(this,w,"f").filter(t=>t!==e.target&&t.open))o.open=!1},C.styles=i`:host { display: block; } ::slotted(m3e-expansion-panel) { --m3e-expansion-panel-container-color: ${p.color.surface}; --m3e-expansion-panel-elevation: ${p.elevation.level2}; --m3e-expansion-panel-open-shape: ${p.shape.corner.medium}; --_expansion-panel-open-spacing: 1rem; } ::slotted(m3e-expansion-panel:first-of-type:last-of-type) { --m3e-expansion-panel-shape: ${p.shape.corner.medium}; } ::slotted(m3e-expansion-panel:first-of-type:not(:last-of-type)) { --m3e-expansion-panel-shape: ${p.shape.corner.value.medium} ${p.shape.corner.value.medium} ${p.shape.corner.value.none} ${p.shape.corner.value.none}; } ::slotted(m3e-expansion-panel:last-of-type:not(:first-of-type)) { --m3e-expansion-panel-shape: ${p.shape.corner.value.none} ${p.shape.corner.value.none} ${p.shape.corner.value.medium} ${p.shape.corner.value.medium}; }`,e([l({type:Boolean})],C.prototype,"multi",void 0),C=e([c("m3e-accordion")],C);const P=s("var(--m3e-expansion-header-collapsed-height, 3rem)"),D=s("var(--m3e-expansion-header-expanded-height, 4rem)"),W=s("var(--m3e-expansion-header-padding-left, 1.5rem)"),M=s("var(--m3e-expansion-header-padding-right, 1.5rem)"),T=s("var(--m3e-expansion-header-spacing, 0.5rem)"),B=s("var(--m3e-expansion-header-toggle-icon-size, 1.5rem)"),S=s(`var(--m3e-expansion-header-font-size, ${p.typescale.standard.title.medium.fontSize})`),U=s(`var(--m3e-expansion-header-font-weight, ${p.typescale.standard.title.medium.fontWeight})`),j=s(`var(--m3e-expansion-header-line-height, ${p.typescale.standard.title.medium.lineHeight})`),A=s(`var(--m3e-expansion-header-tracking, ${p.typescale.standard.title.medium.tracking})`),E=i`:host { display: block; border-radius: inherit; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: ${s(`height var(--m3e-collapsible-animation-duration, ${p.motion.duration.medium1})\n        ${p.motion.easing.standard}`)}; } .base { box-sizing: border-box; width: 100%; height: 100%; display: flex; border-radius: inherit; outline: none; position: relative; padding-inline-start: ${W}; padding-inline-end: ${M}; font-size: ${S}; font-weight: ${U}; line-height: ${j}; letter-spacing: ${A}; column-gap: ${T}; } :host(:not(:disabled)) { cursor: pointer; } :host(:not([aria-expanded="true"])) { height: ${P}; } :host([aria-expanded="true"]) { height: ${D}; } :host(:not(:focus-visible)) .state-layer { --m3e-state-layer-focus-color: transparent; } :host([aria-expanded="true"]) .state-layer { --m3e-state-layer-hover-color: transparent; } :host([aria-expanded="true"]) [part="background"], .content { flex: 1 1 auto; display: flex; align-items: center; } .toggle { display: flex; align-items: center; justify-content: center; vertical-align: middle; font-size: ${B}; transition: ${s(`transform var(--m3e-collapsible-animation-duration, ${p.motion.duration.medium1})\n        ${p.motion.easing.standard}`)}; } :host([toggle-direction="vertical"][aria-expanded="true"]) .toggle { transform: rotate(180deg); } :host([toggle-direction="horizontal"][aria-expanded="true"]) .toggle { transform: rotate(var(--_expansion-header-horizontal-expanded-toggle-rotation, 90deg)); } :host([toggle-position="before"]) .toggle { margin-inline-start: calc(0px - ${T}); } :host([toggle-position="after"]) .toggle { margin-inline-end: calc(0px - ${T}); } :host([hide-toggle]) .toggle { display: none; } ::slotted([slot="toggle-icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="toggle-icon"]) { width: 1em; height: 1em; } @media (prefers-reduced-motion) { :host, .toggle { transition: none; } }`,Z=s(`var(--m3e-expansion-panel-text-color, ${p.color.onSurface})`),q=s(`var(--m3e-expansion-panel-disabled-text-color, ${p.color.onSurface})`),G=s("var(--m3e-expansion-panel-disabled-text-opacity, 38%)"),I=s("var(--m3e-expansion-panel-container-color)"),L=s("var(--m3e-expansion-panel-elevation)"),O=s("var(--m3e-expansion-panel-shape)"),R=s("var(--m3e-expansion-panel-open-elevation, var(--m3e-expansion-panel-elevation))"),H=s("var(--m3e-expansion-panel-open-shape, var(--m3e-expansion-panel-shape))"),V=s("var(--_expansion-panel-open-spacing)"),F=s("var(--m3e-expansion-panel-content-padding, 0 1.5rem 1rem 1.5rem)"),J=s("var(--m3e-expansion-panel-actions-spacing, 0.5rem)"),K=s("var(--m3e-expansion-panel-actions-padding, 1rem 1.5rem 1rem 1.5rem)"),N=s("var(--m3e-expansion-panel-actions-divider-thickness, var(--m3e-divider-thickness, 1px))"),Q=s(`var(--m3e-expansion-panel-actions-divider-color, var(--m3e-divider-color, ${p.color.outlineVariant}))`),X=i`:host { display: block; } .base { background-color: ${I}; transition: ${s(`box-shadow var(--m3e-collapsible-animation-duration, ${p.motion.duration.medium1})\n        ${p.motion.easing.standard}`)}; } :host(:not(:disabled)) .base { color: ${Z}; } :host(:disabled) .base { color: color-mix( in srgb, ${q} ${G}, transparent ); } :host(:not([open])) .base { box-shadow: ${L}; border-radius: ${O}; } :host([open]) .base { box-shadow: ${R}; border-radius: ${H}; margin-block: ${V}; } .toggle { display: flex; align-items: center; justify-content: center; font-size: ${B}; } ::slotted([slot="toggle-icon"]) { font-size: inherit !important; flex: none; } .toggle svg, ::slotted(svg[slot="toggle-icon"]) { width: 1em; height: 1em; } .content { padding: ${F}; } :host(:not(:state(-with-actions))) .actions { display: none; } .actions { padding: ${K}; border-top-style: solid; border-top-width: ${N}; border-top-color: ${Q}; } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; column-gap: ${J}; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { border: 1px solid CanvasText; } :host(:disabled) .base { color: GrayText; } .actions { border-top-color: GrayText; } }`;var Y,ee;let te=class extends(h(g(m(f(u(n,"button"),!0))))){constructor(){super(...arguments),Y.add(this),this.toggleDirection="vertical",this.togglePosition="after",this.hideToggle=!1}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer].forEach(e=>e?.attach(this))}render(){return a`<div class="base"><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer>${"before"===this.togglePosition?t(this,Y,"m",ee).call(this):r}<div class="content"><slot></slot></div>${"after"===this.togglePosition?t(this,Y,"m",ee).call(this):r}</div>`}};var oe,ie,ne,ae,se,re,le,de,pe,ce,he,ge;Y=new WeakSet,ee=function(){return a`<div class="toggle" aria-hidden="true"><slot name="toggle-icon"></slot></div>`},te.styles=E,e([d(".focus-ring")],te.prototype,"_focusRing",void 0),e([d(".state-layer")],te.prototype,"_stateLayer",void 0),e([l({attribute:"toggle-direction",reflect:!0})],te.prototype,"toggleDirection",void 0),e([l({attribute:"toggle-position",reflect:!0})],te.prototype,"togglePosition",void 0),e([l({attribute:"hide-toggle",type:Boolean,reflect:!0})],te.prototype,"hideToggle",void 0),te=e([c("m3e-expansion-header")],te);let me=ge=class extends(v(m(x(f(n,!0))),"opening","opened","closing","closed")){constructor(){super(...arguments),oe.add(this),ie.set(this,ge.__nextId++),ne.set(this,`m3e-expansion-panel-${t(this,ie,"f")}-content`),ae.set(this,`m3e-expansion-panel-${t(this,ie,"f")}-header`),se.set(this,void 0),this.open=!1,this.toggleDirection="vertical",this.togglePosition="after",this.hideToggle=!1}focus(e){this._header?.focus(e)}blur(){this._header?.blur()}click(){this._header?.click()}connectedCallback(){super.connectedCallback(),o(this,se,y.observe(()=>{this.requestUpdate(),t(this,oe,"m",he).call(this)}),"f")}disconnectedCallback(){super.disconnectedCallback(),t(this,se,"f")?.call(this)}reconnectedCallback(){super.reconnectedCallback(),t(this,oe,"m",he).call(this)}firstUpdated(e){super.firstUpdated(e),t(this,oe,"m",he).call(this)}render(){return a`<div class="base"><m3e-expansion-header id="${t(this,ae,"f")}" toggle-direction="${this.toggleDirection}" toggle-position="${this.togglePosition}" ?hide-toggle="${this.hideToggle}" ?disabled="${this.disabled}" aria-expanded="${this.open}" aria-controls="${t(this,ne,"f")}" @click="${t(this,oe,"m",le)}" @keydown="${t(this,oe,"m",de)}"><div slot="toggle-icon" class="toggle"><slot name="toggle-icon">${t(this,oe,"m",re).call(this)}</slot></div><slot name="header"></slot></m3e-expansion-header><m3e-collapsible id="${t(this,ne,"f")}" role="region" aria-labelledby="${t(this,ae,"f")}" ?open="${this.open}" @opening="${t(this,oe,"m",pe)}" @opened="${t(this,oe,"m",pe)}" @closing="${t(this,oe,"m",pe)}" @closed="${t(this,oe,"m",pe)}"><div class="content"><slot></slot></div><div class="actions"><slot name="actions" @slotchange="${t(this,oe,"m",ce)}"></slot></div></m3e-collapsible></div>`}};ie=new WeakMap,ne=new WeakMap,ae=new WeakMap,se=new WeakMap,oe=new WeakSet,re=function(){return"vertical"===this.toggleDirection?a`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>`:"ltr"===y.current?a`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>`:a`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>`},le=function(){this.open=!this.open},de=function(e){switch(e.key){case"ArrowUp":{e.preventDefault();const t=this.closest("m3e-accordion");if(t){const e=[...t.panels].reverse(),o=e.indexOf(this);(e.find((e,t)=>!e.disabled&&t>o)??e.find((e,t)=>!e.disabled&&t<o))?._header?.focus()}else this.open=!1}break;case"ArrowDown":{e.preventDefault();const t=this.closest("m3e-accordion");if(t){const e=t.panels.indexOf(this);(t.panels.find((t,o)=>!t.disabled&&o>e)??t.panels.find((t,o)=>!t.disabled&&o<e))?._header?.focus()}else this.open=!0}}},pe=function(e){e.stopPropagation(),this.dispatchEvent(new Event(e.type,{bubbles:!0}))},ce=function(e){b(this,"-with-actions",$(e.target))},he=function(){"rtl"===y.current?this._header?.style.setProperty("--_expansion-header-horizontal-expanded-toggle-rotation","-90deg"):this._header?.style.removeProperty("--_expansion-header-horizontal-expanded-toggle-rotation")},me.styles=X,me.__nextId=0,e([d("m3e-expansion-header")],me.prototype,"_header",void 0),e([l({type:Boolean,reflect:!0})],me.prototype,"open",void 0),e([l({attribute:"toggle-direction",reflect:!0})],me.prototype,"toggleDirection",void 0),e([l({attribute:"toggle-position",reflect:!0})],me.prototype,"togglePosition",void 0),e([l({attribute:"hide-toggle",type:Boolean,reflect:!0})],me.prototype,"hideToggle",void 0),me=ge=e([c("m3e-expansion-panel")],me);export{C as M3eAccordionElement,te as M3eExpansionHeaderElement,me as M3eExpansionPanelElement};
+import{__decorate as e,__classPrivateFieldGet as t,__classPrivateFieldSet as o}from"tslib";import{css as i,LitElement as n,html as a,unsafeCSS as s,nothing as r}from"lit";import{property as l,query as d}from"lit/decorators.js";import{DesignToken as p,customElement as c,KeyboardClick as h,Focusable as g,Disabled as m,AttachInternals as f,Role as u,ReconnectedCallback as v,setCustomState as x,hasAssignedNodes as b}from"@m3e/web/core";import{M3eDirectionality as $}from"@m3e/web/core/bidi";var y,k,w,_;let z=class extends n{constructor(){super(...arguments),y.add(this),k.set(this,[]),this.multi=!1}get panels(){return t(this,k,"f")}render(){return a`<slot @slotchange="${t(this,y,"m",w)}" @opening="${t(this,y,"m",_)}"></slot>`}};k=new WeakMap,y=new WeakSet,w=function(){if(o(this,k,[...this.querySelectorAll("m3e-expansion-panel")],"f"),this.multi)return;let e=!1;for(const o of t(this,k,"f").filter(e=>!e.open))e&&(o.open=!1),e=!0},_=function(e){if(!this.multi)for(const o of t(this,k,"f").filter(t=>t!==e.target&&t.open))o.open=!1},z.styles=i`:host { display: block; } ::slotted(m3e-expansion-panel) { --m3e-expansion-panel-container-color: ${p.color.surface}; --m3e-expansion-panel-elevation: ${p.elevation.level2}; --m3e-expansion-panel-open-shape: ${p.shape.corner.medium}; --_expansion-panel-open-spacing: 1rem; } ::slotted(m3e-expansion-panel:first-of-type:last-of-type) { --m3e-expansion-panel-shape: ${p.shape.corner.medium}; } ::slotted(m3e-expansion-panel:first-of-type:not(:last-of-type)) { --m3e-expansion-panel-shape: ${p.shape.corner.value.medium} ${p.shape.corner.value.medium} ${p.shape.corner.value.none} ${p.shape.corner.value.none}; } ::slotted(m3e-expansion-panel:last-of-type:not(:first-of-type)) { --m3e-expansion-panel-shape: ${p.shape.corner.value.none} ${p.shape.corner.value.none} ${p.shape.corner.value.medium} ${p.shape.corner.value.medium}; }`,e([l({type:Boolean})],z.prototype,"multi",void 0),z=e([c("m3e-accordion")],z);const C=s("var(--m3e-expansion-header-collapsed-height, 3rem)"),P=s("var(--m3e-expansion-header-expanded-height, 4rem)"),D=s("var(--m3e-expansion-header-padding-left, 1.5rem)"),W=s("var(--m3e-expansion-header-padding-right, 1.5rem)"),M=s("var(--m3e-expansion-header-spacing, 0.5rem)"),T=s("var(--m3e-expansion-header-toggle-icon-size, 1.5rem)"),B=s(`var(--m3e-expansion-header-font-size, ${p.typescale.standard.title.medium.fontSize})`),S=s(`var(--m3e-expansion-header-font-weight, ${p.typescale.standard.title.medium.fontWeight})`),U=s(`var(--m3e-expansion-header-line-height, ${p.typescale.standard.title.medium.lineHeight})`),j=s(`var(--m3e-expansion-header-tracking, ${p.typescale.standard.title.medium.tracking})`),A=i`:host { display: block; border-radius: inherit; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: ${s(`height var(--m3e-collapsible-animation-duration, ${p.motion.duration.medium1})\n        ${p.motion.easing.standard}`)}; } .base { box-sizing: border-box; width: 100%; height: 100%; display: flex; border-radius: inherit; outline: none; position: relative; padding-inline-start: ${D}; padding-inline-end: ${W}; font-size: ${B}; font-weight: ${S}; line-height: ${U}; letter-spacing: ${j}; column-gap: ${M}; } :host(:not(:disabled)) { cursor: pointer; } :host(:not([aria-expanded="true"])) { height: ${C}; } :host([aria-expanded="true"]) { height: ${P}; } :host(:not(:focus-visible)) .state-layer { --m3e-state-layer-focus-color: transparent; } :host([aria-expanded="true"]) .state-layer { --m3e-state-layer-hover-color: transparent; } :host([aria-expanded="true"]) [part="background"], .content { flex: 1 1 auto; display: flex; align-items: center; } .toggle { display: flex; align-items: center; justify-content: center; vertical-align: middle; font-size: ${T}; transition: ${s(`transform var(--m3e-collapsible-animation-duration, ${p.motion.duration.medium1})\n        ${p.motion.easing.standard}`)}; } :host([toggle-direction="vertical"][aria-expanded="true"]) .toggle { transform: rotate(180deg); } :host([toggle-direction="horizontal"][aria-expanded="true"]) .toggle { transform: rotate(var(--_expansion-header-horizontal-expanded-toggle-rotation, 90deg)); } :host([toggle-position="before"]) .toggle { margin-inline-start: calc(0px - ${M}); } :host([toggle-position="after"]) .toggle { margin-inline-end: calc(0px - ${M}); } :host([hide-toggle]) .toggle { display: none; } ::slotted([slot="toggle-icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="toggle-icon"]) { width: 1em; height: 1em; } @media (prefers-reduced-motion) { :host, .toggle { transition: none; } }`,E=s(`var(--m3e-expansion-panel-text-color, ${p.color.onSurface})`),Z=s(`var(--m3e-expansion-panel-disabled-text-color, ${p.color.onSurface})`),q=s("var(--m3e-expansion-panel-disabled-text-opacity, 38%)"),G=s("var(--m3e-expansion-panel-container-color)"),I=s("var(--m3e-expansion-panel-elevation)"),L=s("var(--m3e-expansion-panel-shape)"),O=s("var(--m3e-expansion-panel-open-elevation, var(--m3e-expansion-panel-elevation))"),R=s("var(--m3e-expansion-panel-open-shape, var(--m3e-expansion-panel-shape))"),H=s("var(--_expansion-panel-open-spacing)"),V=s("var(--m3e-expansion-panel-content-padding, 0 1.5rem 1rem 1.5rem)"),F=s("var(--m3e-expansion-panel-actions-spacing, 0.5rem)"),J=s("var(--m3e-expansion-panel-actions-padding, 1rem 1.5rem 1rem 1.5rem)"),K=s("var(--m3e-expansion-panel-actions-divider-thickness, var(--m3e-divider-thickness, 1px))"),N=s(`var(--m3e-expansion-panel-actions-divider-color, var(--m3e-divider-color, ${p.color.outlineVariant}))`),Q=i`:host { display: block; } .base { background-color: ${G}; transition: ${s(`box-shadow var(--m3e-collapsible-animation-duration, ${p.motion.duration.medium1})\n        ${p.motion.easing.standard}`)}; } :host(:not(:disabled)) .base { color: ${E}; } :host(:disabled) .base { color: color-mix( in srgb, ${Z} ${q}, transparent ); } :host(:not([open])) .base { box-shadow: ${I}; border-radius: ${L}; } :host([open]) .base { box-shadow: ${O}; border-radius: ${R}; margin-block: ${H}; } .toggle { display: flex; align-items: center; justify-content: center; font-size: ${T}; } ::slotted([slot="toggle-icon"]) { font-size: inherit !important; flex: none; } .toggle svg, ::slotted(svg[slot="toggle-icon"]) { width: 1em; height: 1em; } .content { padding: ${V}; } :host(:not(:state(-with-actions))) .actions { display: none; } .actions { padding: ${J}; border-top-style: solid; border-top-width: ${K}; border-top-color: ${N}; } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; column-gap: ${F}; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { border: 1px solid CanvasText; } :host(:disabled) .base { color: GrayText; } .actions { border-top-color: GrayText; } }`;var X,Y;let ee=class extends(h(g(m(f(u(n,"button"),!0))))){constructor(){super(...arguments),X.add(this),this.toggleDirection="vertical",this.togglePosition="after",this.hideToggle=!1}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer].forEach(e=>e?.attach(this))}render(){return a`<div class="base"><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer>${"before"===this.togglePosition?t(this,X,"m",Y).call(this):r}<div class="content"><slot></slot></div>${"after"===this.togglePosition?t(this,X,"m",Y).call(this):r}</div>`}};var te,oe,ie,ne,ae,se,re,le,de,pe,ce,he;X=new WeakSet,Y=function(){return a`<div class="toggle" aria-hidden="true"><slot name="toggle-icon"></slot></div>`},ee.styles=A,e([d(".focus-ring")],ee.prototype,"_focusRing",void 0),e([d(".state-layer")],ee.prototype,"_stateLayer",void 0),e([l({attribute:"toggle-direction",reflect:!0})],ee.prototype,"toggleDirection",void 0),e([l({attribute:"toggle-position",reflect:!0})],ee.prototype,"togglePosition",void 0),e([l({attribute:"hide-toggle",type:Boolean,reflect:!0})],ee.prototype,"hideToggle",void 0),ee=e([c("m3e-expansion-header")],ee);let ge=he=class extends(m(v(f(n,!0)))){constructor(){super(...arguments),te.add(this),oe.set(this,he.__nextId++),ie.set(this,`m3e-expansion-panel-${t(this,oe,"f")}-content`),ne.set(this,`m3e-expansion-panel-${t(this,oe,"f")}-header`),ae.set(this,void 0),this.open=!1,this.toggleDirection="vertical",this.togglePosition="after",this.hideToggle=!1}focus(e){this._header?.focus(e)}blur(){this._header?.blur()}click(){this._header?.click()}connectedCallback(){super.connectedCallback(),o(this,ae,$.observe(()=>{this.requestUpdate(),t(this,te,"m",ce).call(this)}),"f")}disconnectedCallback(){super.disconnectedCallback(),t(this,ae,"f")?.call(this)}reconnectedCallback(){super.reconnectedCallback(),t(this,te,"m",ce).call(this)}firstUpdated(e){super.firstUpdated(e),t(this,te,"m",ce).call(this)}render(){return a`<div class="base"><m3e-expansion-header id="${t(this,ne,"f")}" toggle-direction="${this.toggleDirection}" toggle-position="${this.togglePosition}" ?hide-toggle="${this.hideToggle}" ?disabled="${this.disabled}" aria-expanded="${this.open}" aria-controls="${t(this,ie,"f")}" @click="${t(this,te,"m",re)}" @keydown="${t(this,te,"m",le)}"><div slot="toggle-icon" class="toggle"><slot name="toggle-icon">${t(this,te,"m",se).call(this)}</slot></div><slot name="header"></slot></m3e-expansion-header><m3e-collapsible id="${t(this,ie,"f")}" role="region" aria-labelledby="${t(this,ne,"f")}" ?open="${this.open}" @opening="${t(this,te,"m",de)}" @opened="${t(this,te,"m",de)}" @closing="${t(this,te,"m",de)}" @closed="${t(this,te,"m",de)}"><div class="content"><slot></slot></div><div class="actions"><slot name="actions" @slotchange="${t(this,te,"m",pe)}"></slot></div></m3e-collapsible></div>`}};oe=new WeakMap,ie=new WeakMap,ne=new WeakMap,ae=new WeakMap,te=new WeakSet,se=function(){return"vertical"===this.toggleDirection?a`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>`:"ltr"===$.current?a`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>`:a`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>`},re=function(){this.open=!this.open},le=function(e){switch(e.key){case"ArrowUp":{e.preventDefault();const t=this.closest("m3e-accordion");if(t){const e=[...t.panels].reverse(),o=e.indexOf(this);(e.find((e,t)=>!e.disabled&&t>o)??e.find((e,t)=>!e.disabled&&t<o))?._header?.focus()}else this.open=!1}break;case"ArrowDown":{e.preventDefault();const t=this.closest("m3e-accordion");if(t){const e=t.panels.indexOf(this);(t.panels.find((t,o)=>!t.disabled&&o>e)??t.panels.find((t,o)=>!t.disabled&&o<e))?._header?.focus()}else this.open=!0}}},de=function(e){e.stopPropagation(),this.dispatchEvent(new Event(e.type,{bubbles:!0}))},pe=function(e){x(this,"-with-actions",b(e.target))},ce=function(){"rtl"===$.current?this._header?.style.setProperty("--_expansion-header-horizontal-expanded-toggle-rotation","-90deg"):this._header?.style.removeProperty("--_expansion-header-horizontal-expanded-toggle-rotation")},ge.styles=Q,ge.__nextId=0,e([d("m3e-expansion-header")],ge.prototype,"_header",void 0),e([l({type:Boolean,reflect:!0})],ge.prototype,"open",void 0),e([l({attribute:"toggle-direction",reflect:!0})],ge.prototype,"toggleDirection",void 0),e([l({attribute:"toggle-position",reflect:!0})],ge.prototype,"togglePosition",void 0),e([l({attribute:"hide-toggle",type:Boolean,reflect:!0})],ge.prototype,"hideToggle",void 0),ge=he=e([c("m3e-expansion-panel")],ge);export{z as M3eAccordionElement,ee as M3eExpansionHeaderElement,ge as M3eExpansionPanelElement};
 //# sourceMappingURL=expansion-panel.min.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"expansion-panel.min.js","sources":["../../src/expansion-panel/AccordionElement.ts","../../src/expansion-panel/styles/ExpansionHeaderToken.ts","../../src/expansion-panel/styles/ExpansionHeaderStyle.ts","../../src/expansion-panel/styles/ExpansionPanelToken.ts","../../src/expansion-panel/styles/ExpansionPanelStyle.ts","../../src/expansion-panel/ExpansionHeaderElement.ts","../../src/expansion-panel/ExpansionPanelElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { M3eExpansionPanelElement } from \"./ExpansionPanelElement\";\r\n\r\n/**\r\n * Combines multiple expansion panels in to an accordion.\r\n *\r\n * @description\r\n * The `m3e-accordion` component organizes multiple expansion panels into a coordinated, accessible group.\r\n * It supports single or multiple open panels via the `multi` attribute, and provides expressive theming\r\n * and shape control for grouped layouts. The accordion manages open/close state across its child panels,\r\n * enabling interactive disclosure patterns for complex content.\r\n *\r\n * @example\r\n * The following example illustrates the basic use of the `m3e-accordion` and `m3e-expansion-panel` components.\r\n *\r\n * ```html\r\n * <m3e-accordion>\r\n *   <m3e-expansion-panel>\r\n *     <span slot=\"header\">Panel 1</span>\r\n *     I am content for the first expansion panel\r\n *   </m3e-expansion-panel>\r\n *   <m3e-expansion-panel>\r\n *     <span slot=\"header\">Panel 2</span>\r\n *     I am content for the second expansion panel\r\n *   </m3e-expansion-panel>\r\n * </m3e-accordion>\r\n * ```\r\n *\r\n * @tag m3e-accordion\r\n *\r\n * @slot - Renders the panels of the accordion.\r\n *\r\n * @attr multi - Whether multiple expansion panels can be open at the same time.\r\n */\r\n@customElement(\"m3e-accordion\")\r\nexport class M3eAccordionElement extends LitElement {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n    ::slotted(m3e-expansion-panel) {\r\n      --m3e-expansion-panel-container-color: ${DesignToken.color.surface};\r\n      --m3e-expansion-panel-elevation: ${DesignToken.elevation.level2};\r\n      --m3e-expansion-panel-open-shape: ${DesignToken.shape.corner.medium};\r\n      --_expansion-panel-open-spacing: 1rem;\r\n    }\r\n    ::slotted(m3e-expansion-panel:first-of-type:last-of-type) {\r\n      --m3e-expansion-panel-shape: ${DesignToken.shape.corner.medium};\r\n    }\r\n    ::slotted(m3e-expansion-panel:first-of-type:not(:last-of-type)) {\r\n      --m3e-expansion-panel-shape: ${DesignToken.shape.corner.value.medium} ${DesignToken.shape.corner.value.medium}\r\n        ${DesignToken.shape.corner.value.none} ${DesignToken.shape.corner.value.none};\r\n    }\r\n    ::slotted(m3e-expansion-panel:last-of-type:not(:first-of-type)) {\r\n      --m3e-expansion-panel-shape: ${DesignToken.shape.corner.value.none} ${DesignToken.shape.corner.value.none}\r\n        ${DesignToken.shape.corner.value.medium} ${DesignToken.shape.corner.value.medium};\r\n    }\r\n  `;\r\n\r\n  /** @private */ #panels: Array<M3eExpansionPanelElement> = [];\r\n\r\n  /**\r\n   * Whether multiple expansion panels can be open at the same time.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) multi = false;\r\n\r\n  /** The panels of the accordion. */\r\n  get panels() {\r\n    return this.#panels;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot @slotchange=\"${this.#handleSlotChange}\" @opening=\"${this.#handleOpening}\"></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange() {\r\n    this.#panels = [...this.querySelectorAll(\"m3e-expansion-panel\")];\r\n\r\n    if (this.multi) {\r\n      return;\r\n    }\r\n\r\n    let alreadyOpen = false;\r\n    for (const panel of this.#panels.filter((x) => !x.open)) {\r\n      if (alreadyOpen) {\r\n        panel.open = false;\r\n      }\r\n      alreadyOpen = true;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleOpening(e: Event): void {\r\n    if (!this.multi) {\r\n      for (const panel of this.#panels.filter((x) => x !== e.target && x.open)) {\r\n        panel.open = false;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-accordion\": M3eAccordionElement;\r\n  }\r\n}\r\n","import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens for `M3eExpansionHeaderElement`.\r\n * @internal\r\n */\r\nexport const ExpansionHeaderToken = {\r\n  collapsedHeight: unsafeCSS(\"var(--m3e-expansion-header-collapsed-height, 3rem)\"),\r\n  expandedHeight: unsafeCSS(\"var(--m3e-expansion-header-expanded-height, 4rem)\"),\r\n  paddingLeft: unsafeCSS(\"var(--m3e-expansion-header-padding-left, 1.5rem)\"),\r\n  paddingRight: unsafeCSS(\"var(--m3e-expansion-header-padding-right, 1.5rem)\"),\r\n  spacing: unsafeCSS(\"var(--m3e-expansion-header-spacing, 0.5rem)\"),\r\n  toggleIconSize: unsafeCSS(\"var(--m3e-expansion-header-toggle-icon-size, 1.5rem)\"),\r\n  fontSize: unsafeCSS(`var(--m3e-expansion-header-font-size, ${DesignToken.typescale.standard.title.medium.fontSize})`),\r\n  fontWeight: unsafeCSS(\r\n    `var(--m3e-expansion-header-font-weight, ${DesignToken.typescale.standard.title.medium.fontWeight})`,\r\n  ),\r\n  lineHeight: unsafeCSS(\r\n    `var(--m3e-expansion-header-line-height, ${DesignToken.typescale.standard.title.medium.lineHeight})`,\r\n  ),\r\n  tracking: unsafeCSS(`var(--m3e-expansion-header-tracking, ${DesignToken.typescale.standard.title.medium.tracking})`),\r\n} as const;\r\n","import { css, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { ExpansionHeaderToken } from \"./ExpansionHeaderToken\";\r\n\r\n/**\r\n * Styles for `M3eExpansionHeaderElement`.\r\n * @internal\r\n */\r\nexport const ExpansionHeaderStyle = css`\r\n  :host {\r\n    display: block;\r\n    border-radius: inherit;\r\n    outline: none;\r\n    user-select: none;\r\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    transition: ${unsafeCSS(`height var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})\r\n        ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  .base {\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    border-radius: inherit;\r\n    outline: none;\r\n    position: relative;\r\n    padding-inline-start: ${ExpansionHeaderToken.paddingLeft};\r\n    padding-inline-end: ${ExpansionHeaderToken.paddingRight};\r\n    font-size: ${ExpansionHeaderToken.fontSize};\r\n    font-weight: ${ExpansionHeaderToken.fontWeight};\r\n    line-height: ${ExpansionHeaderToken.lineHeight};\r\n    letter-spacing: ${ExpansionHeaderToken.tracking};\r\n    column-gap: ${ExpansionHeaderToken.spacing};\r\n  }\r\n  :host(:not(:disabled)) {\r\n    cursor: pointer;\r\n  }\r\n  :host(:not([aria-expanded=\"true\"])) {\r\n    height: ${ExpansionHeaderToken.collapsedHeight};\r\n  }\r\n  :host([aria-expanded=\"true\"]) {\r\n    height: ${ExpansionHeaderToken.expandedHeight};\r\n  }\r\n  :host(:not(:focus-visible)) .state-layer {\r\n    --m3e-state-layer-focus-color: transparent;\r\n  }\r\n  :host([aria-expanded=\"true\"]) .state-layer {\r\n    --m3e-state-layer-hover-color: transparent;\r\n  }\r\n  :host([aria-expanded=\"true\"]) [part=\"background\"],\r\n  .content {\r\n    flex: 1 1 auto;\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  .toggle {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    vertical-align: middle;\r\n    font-size: ${ExpansionHeaderToken.toggleIconSize};\r\n    transition: ${unsafeCSS(`transform var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})\r\n        ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  :host([toggle-direction=\"vertical\"][aria-expanded=\"true\"]) .toggle {\r\n    transform: rotate(180deg);\r\n  }\r\n  :host([toggle-direction=\"horizontal\"][aria-expanded=\"true\"]) .toggle {\r\n    transform: rotate(var(--_expansion-header-horizontal-expanded-toggle-rotation, 90deg));\r\n  }\r\n  :host([toggle-position=\"before\"]) .toggle {\r\n    margin-inline-start: calc(0px - ${ExpansionHeaderToken.spacing});\r\n  }\r\n  :host([toggle-position=\"after\"]) .toggle {\r\n    margin-inline-end: calc(0px - ${ExpansionHeaderToken.spacing});\r\n  }\r\n  :host([hide-toggle]) .toggle {\r\n    display: none;\r\n  }\r\n  ::slotted([slot=\"toggle-icon\"]) {\r\n    font-size: inherit !important;\r\n    flex: none;\r\n  }\r\n  ::slotted(svg[slot=\"toggle-icon\"]) {\r\n    width: 1em;\r\n    height: 1em;\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    :host,\r\n    .toggle {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens for `M3eExpansionPanelElement`.\r\n * @internal\r\n */\r\nexport const ExpansionPanelToken = {\r\n  textColor: unsafeCSS(`var(--m3e-expansion-panel-text-color, ${DesignToken.color.onSurface})`),\r\n  disabledTextColor: unsafeCSS(`var(--m3e-expansion-panel-disabled-text-color, ${DesignToken.color.onSurface})`),\r\n  disabledTextOpacity: unsafeCSS(`var(--m3e-expansion-panel-disabled-text-opacity, 38%)`),\r\n  containerColor: unsafeCSS(\"var(--m3e-expansion-panel-container-color)\"),\r\n  collapsedElevation: unsafeCSS(\"var(--m3e-expansion-panel-elevation)\"),\r\n  collapsedShape: unsafeCSS(\"var(--m3e-expansion-panel-shape)\"),\r\n  expandedElevation: unsafeCSS(\"var(--m3e-expansion-panel-open-elevation, var(--m3e-expansion-panel-elevation))\"),\r\n  expandedShape: unsafeCSS(\"var(--m3e-expansion-panel-open-shape, var(--m3e-expansion-panel-shape))\"),\r\n  expandedSpace: unsafeCSS(\"var(--_expansion-panel-open-spacing)\"),\r\n  contentPadding: unsafeCSS(\"var(--m3e-expansion-panel-content-padding, 0 1.5rem 1rem 1.5rem)\"),\r\n  actionsSpacing: unsafeCSS(\"var(--m3e-expansion-panel-actions-spacing, 0.5rem)\"),\r\n  actionsPadding: unsafeCSS(\"var(--m3e-expansion-panel-actions-padding, 1rem 1.5rem 1rem 1.5rem)\"),\r\n  actionsDividerThickness: unsafeCSS(\r\n    \"var(--m3e-expansion-panel-actions-divider-thickness, var(--m3e-divider-thickness, 1px))\",\r\n  ),\r\n  actionsDividerColor: unsafeCSS(\r\n    `var(--m3e-expansion-panel-actions-divider-color, var(--m3e-divider-color, ${DesignToken.color.outlineVariant}))`,\r\n  ),\r\n} as const;\r\n","import { css, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { ExpansionPanelToken } from \"./ExpansionPanelToken\";\r\nimport { ExpansionHeaderToken } from \"./ExpansionHeaderToken\";\r\n\r\n/**\r\n * Styles for `M3eExpansionPanelElement`.\r\n * @internal\r\n */\r\nexport const ExpansionPanelStyle = css`\r\n  :host {\r\n    display: block;\r\n  }\r\n  .base {\r\n    background-color: ${ExpansionPanelToken.containerColor};\r\n    transition: ${unsafeCSS(`box-shadow var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})\r\n        ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  :host(:not(:disabled)) .base {\r\n    color: ${ExpansionPanelToken.textColor};\r\n  }\r\n  :host(:disabled) .base {\r\n    color: color-mix(\r\n      in srgb,\r\n      ${ExpansionPanelToken.disabledTextColor} ${ExpansionPanelToken.disabledTextOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host(:not([open])) .base {\r\n    box-shadow: ${ExpansionPanelToken.collapsedElevation};\r\n    border-radius: ${ExpansionPanelToken.collapsedShape};\r\n  }\r\n  :host([open]) .base {\r\n    box-shadow: ${ExpansionPanelToken.expandedElevation};\r\n    border-radius: ${ExpansionPanelToken.expandedShape};\r\n    margin-block: ${ExpansionPanelToken.expandedSpace};\r\n  }\r\n  .toggle {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: ${ExpansionHeaderToken.toggleIconSize};\r\n  }\r\n  ::slotted([slot=\"toggle-icon\"]) {\r\n    font-size: inherit !important;\r\n    flex: none;\r\n  }\r\n  .toggle svg,\r\n  ::slotted(svg[slot=\"toggle-icon\"]) {\r\n    width: 1em;\r\n    height: 1em;\r\n  }\r\n  .content {\r\n    padding: ${ExpansionPanelToken.contentPadding};\r\n  }\r\n  :host(:not(:state(-with-actions))) .actions {\r\n    display: none;\r\n  }\r\n  .actions {\r\n    padding: ${ExpansionPanelToken.actionsPadding};\r\n    border-top-style: solid;\r\n    border-top-width: ${ExpansionPanelToken.actionsDividerThickness};\r\n    border-top-color: ${ExpansionPanelToken.actionsDividerColor};\r\n  }\r\n  ::slotted([slot=\"actions\"]) {\r\n    flex: none;\r\n    display: flex;\r\n    align-items: center;\r\n    column-gap: ${ExpansionPanelToken.actionsSpacing};\r\n  }\r\n  ::slotted([slot=\"actions\"][end]) {\r\n    justify-content: flex-end;\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .base {\r\n      transition: none;\r\n    }\r\n  }\r\n  @media (forced-colors: active) {\r\n    .base {\r\n      border: 1px solid CanvasText;\r\n    }\r\n    :host(:disabled) .base {\r\n      color: GrayText;\r\n    }\r\n    .actions {\r\n      border-top-color: GrayText;\r\n    }\r\n  }\r\n`;\r\n","import { CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  Disabled,\r\n  Focusable,\r\n  KeyboardClick,\r\n  M3eFocusRingElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { ExpansionTogglePosition } from \"./ExpansionTogglePosition\";\r\nimport { ExpansionToggleDirection } from \"./ExpansionToggleDirection\";\r\n\r\nimport { ExpansionHeaderStyle } from \"./styles\";\r\n\r\n/**\r\n * A button used to toggle the expanded state of an expansion panel.\r\n *\r\n * @tag m3e-expansion-header\r\n *\r\n * @slot - Renders the content of the header.\r\n * @slot toggle-icon - Renders the icon of the expansion toggle.\r\n *\r\n * @attr hide-toggle - Whether to hide the expansion toggle.\r\n * @attr toggle-direction - The direction of the expansion toggle.\r\n * @attr toggle-position - The position of the expansion toggle.\r\n *\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-expansion-header-collapsed-height - Height of the header when the panel is collapsed.\r\n * @cssprop --m3e-expansion-header-expanded-height - Height of the header when the panel is expanded.\r\n * @cssprop --m3e-expansion-header-padding-left - Left padding inside the header.\r\n * @cssprop --m3e-expansion-header-padding-right - Right padding inside the header.\r\n * @cssprop --m3e-expansion-header-spacing - Spacing between header elements.\r\n * @cssprop --m3e-expansion-header-toggle-icon-size - Size of the toggle icon (e.g. chevron).\r\n * @cssprop --m3e-expansion-header-font-size - The font size of the header text.\r\n * @cssprop --m3e-expansion-header-font-weight - The font weight of the header text.\r\n * @cssprop --m3e-expansion-header-line-height - The line height of the header text.\r\n * @cssprop --m3e-expansion-header-tracking - Letter spacing (tracking) of the header text.\r\n */\r\n@customElement(\"m3e-expansion-header\")\r\nexport class M3eExpansionHeaderElement extends KeyboardClick(\r\n  Focusable(Disabled(AttachInternals(Role(LitElement, \"button\"), true))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = ExpansionHeaderStyle;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n\r\n  /**\r\n   * The direction of the expansion toggle.\r\n   * @default \"vertical\"\r\n   */\r\n  @property({ attribute: \"toggle-direction\", reflect: true }) toggleDirection: ExpansionToggleDirection = \"vertical\";\r\n\r\n  /**\r\n   * The position of the expansion toggle.\r\n   * @default \"after\"\r\n   */\r\n  @property({ attribute: \"toggle-position\", reflect: true }) togglePosition: ExpansionTogglePosition = \"after\";\r\n\r\n  /**\r\n   * Whether to hide the expansion toggle.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-toggle\", type: Boolean, reflect: true }) hideToggle = false;\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      ${this.togglePosition === \"before\" ? this.#renderToggle() : nothing}\r\n      <div class=\"content\">\r\n        <slot></slot>\r\n      </div>\r\n      ${this.togglePosition === \"after\" ? this.#renderToggle() : nothing}\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderToggle(): unknown {\r\n    return html`<div class=\"toggle\" aria-hidden=\"true\">\r\n      <slot name=\"toggle-icon\"></slot>\r\n    </div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-expansion-header\": M3eExpansionHeaderElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\n\r\nimport { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  Disabled,\r\n  EventAttribute,\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 EventAttribute(\r\n  Disabled(ReconnectedCallback(AttachInternals(LitElement, true))),\r\n  \"opening\",\r\n  \"opened\",\r\n  \"closing\",\r\n  \"closed\",\r\n) {\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","EventAttribute","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(:state(-with-actions))) .actions {\r\n    display: none;\r\n  }\r\n  .actions {\r\n    padding: ${ExpansionPanelToken.actionsPadding};\r\n    border-top-style: solid;\r\n    border-top-width: ${ExpansionPanelToken.actionsDividerThickness};\r\n    border-top-color: ${ExpansionPanelToken.actionsDividerColor};\r\n  }\r\n  ::slotted([slot=\"actions\"]) {\r\n    flex: none;\r\n    display: flex;\r\n    align-items: center;\r\n    column-gap: ${ExpansionPanelToken.actionsSpacing};\r\n  }\r\n  ::slotted([slot=\"actions\"][end]) {\r\n    justify-content: flex-end;\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .base {\r\n      transition: none;\r\n    }\r\n  }\r\n  @media (forced-colors: active) {\r\n    .base {\r\n      border: 1px solid CanvasText;\r\n    }\r\n    :host(:disabled) .base {\r\n      color: GrayText;\r\n    }\r\n    .actions {\r\n      border-top-color: GrayText;\r\n    }\r\n  }\r\n`;\r\n","import { CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  Disabled,\r\n  Focusable,\r\n  KeyboardClick,\r\n  M3eFocusRingElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { ExpansionTogglePosition } from \"./ExpansionTogglePosition\";\r\nimport { ExpansionToggleDirection } from \"./ExpansionToggleDirection\";\r\n\r\nimport { ExpansionHeaderStyle } from \"./styles\";\r\n\r\n/**\r\n * A button used to toggle the expanded state of an expansion panel.\r\n *\r\n * @tag m3e-expansion-header\r\n *\r\n * @slot - Renders the content of the header.\r\n * @slot toggle-icon - Renders the icon of the expansion toggle.\r\n *\r\n * @attr hide-toggle - Whether to hide the expansion toggle.\r\n * @attr toggle-direction - The direction of the expansion toggle.\r\n * @attr toggle-position - The position of the expansion toggle.\r\n *\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-expansion-header-collapsed-height - Height of the header when the panel is collapsed.\r\n * @cssprop --m3e-expansion-header-expanded-height - Height of the header when the panel is expanded.\r\n * @cssprop --m3e-expansion-header-padding-left - Left padding inside the header.\r\n * @cssprop --m3e-expansion-header-padding-right - Right padding inside the header.\r\n * @cssprop --m3e-expansion-header-spacing - Spacing between header elements.\r\n * @cssprop --m3e-expansion-header-toggle-icon-size - Size of the toggle icon (e.g. chevron).\r\n * @cssprop --m3e-expansion-header-font-size - The font size of the header text.\r\n * @cssprop --m3e-expansion-header-font-weight - The font weight of the header text.\r\n * @cssprop --m3e-expansion-header-line-height - The line height of the header text.\r\n * @cssprop --m3e-expansion-header-tracking - Letter spacing (tracking) of the header text.\r\n */\r\n@customElement(\"m3e-expansion-header\")\r\nexport class M3eExpansionHeaderElement extends KeyboardClick(\r\n  Focusable(Disabled(AttachInternals(Role(LitElement, \"button\"), true))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = ExpansionHeaderStyle;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n\r\n  /**\r\n   * The direction of the expansion toggle.\r\n   * @default \"vertical\"\r\n   */\r\n  @property({ attribute: \"toggle-direction\", reflect: true }) toggleDirection: ExpansionToggleDirection = \"vertical\";\r\n\r\n  /**\r\n   * The position of the expansion toggle.\r\n   * @default \"after\"\r\n   */\r\n  @property({ attribute: \"toggle-position\", reflect: true }) togglePosition: ExpansionTogglePosition = \"after\";\r\n\r\n  /**\r\n   * Whether to hide the expansion toggle.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-toggle\", type: Boolean, reflect: true }) hideToggle = false;\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      ${this.togglePosition === \"before\" ? this.#renderToggle() : nothing}\r\n      <div class=\"content\">\r\n        <slot></slot>\r\n      </div>\r\n      ${this.togglePosition === \"after\" ? this.#renderToggle() : nothing}\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderToggle(): unknown {\r\n    return html`<div class=\"toggle\" aria-hidden=\"true\">\r\n      <slot name=\"toggle-icon\"></slot>\r\n    </div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-expansion-header\": M3eExpansionHeaderElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\n\r\nimport { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  Disabled,\r\n  hasAssignedNodes,\r\n  ReconnectedCallback,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { ExpansionTogglePosition } from \"./ExpansionTogglePosition\";\r\nimport { ExpansionToggleDirection } from \"./ExpansionToggleDirection\";\r\n\r\nimport { ExpansionPanelStyle } from \"./styles\";\r\nimport { M3eExpansionHeaderElement } from \"./ExpansionHeaderElement\";\r\n\r\n/**\r\n * An expandable details-summary view.\r\n *\r\n * @description\r\n * The `m3e-expansion-panel` component provides an accessible, animated details-summary view for\r\n * organizing content in collapsible sections. It supports custom header, content, actions, and\r\n * toggle icon slots, and offers configurable toggle position and direction. The panel responds to\r\n * open/close states, emits lifecycle events, and supports rich theming via CSS custom properties\r\n * for elevation, shape, spacing, and color.\r\n *\r\n * @example\r\n * The following example illustrates the basic use of the `m3e-accordion` and `m3e-expansion-panel` components.\r\n *\r\n * ```html\r\n * <m3e-accordion>\r\n *   <m3e-expansion-panel>\r\n *     <span slot=\"header\">Panel 1</span>\r\n *     I am content for the first expansion panel\r\n *   </m3e-expansion-panel>\r\n *   <m3e-expansion-panel>\r\n *     <span slot=\"header\">Panel 2</span>\r\n *     I am content for the second expansion panel\r\n *   </m3e-expansion-panel>\r\n * </m3e-accordion>\r\n * ```\r\n *\r\n * @tag m3e-expansion-panel\r\n *\r\n * @slot - Renders the detail of the panel.\r\n * @slot actions - Renders the actions bar of the panel.\r\n * @slot header - Renders the header content.\r\n * @slot toggle-icon - Renders the expansion toggle icon.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr hide-toggle - Whether to hide the expansion toggle.\r\n * @attr open - Whether the panel is expanded.\r\n * @attr toggle-direction - The direction of the expansion toggle.\r\n * @attr toggle-position - The position of the expansion toggle.\r\n *\r\n * @fires opening - Emitted when the expansion panel begins to open.\r\n * @fires opened - Emitted when the expansion panel has opened.\r\n * @fires closing - Emitted when the expansion panel begins to close.\r\n * @fires closed - Emitted when the expansion panel has closed.\r\n *\r\n * @cssprop --m3e-expansion-header-collapsed-height - Height of the header when the panel is collapsed.\r\n * @cssprop --m3e-expansion-header-expanded-height - Height of the header when the panel is expanded.\r\n * @cssprop --m3e-expansion-header-padding-left - Left padding inside the header.\r\n * @cssprop --m3e-expansion-header-padding-right - Right padding inside the header.\r\n * @cssprop --m3e-expansion-header-spacing - Spacing between header elements.\r\n * @cssprop --m3e-expansion-header-toggle-icon-size - Size of the toggle icon (e.g. chevron).\r\n * @cssprop --m3e-expansion-header-font-size - The font size of the header text.\r\n * @cssprop --m3e-expansion-header-font-weight - The font weight of the header text.\r\n * @cssprop --m3e-expansion-header-line-height - The line height of the header text.\r\n * @cssprop --m3e-expansion-header-tracking - Letter spacing (tracking) of the header text.\r\n * @cssprop --m3e-expansion-panel-text-color - Color of the panel's text content.\r\n * @cssprop --m3e-expansion-panel-disabled-text-color - Color of the panel's text content, when disabled.\r\n * @cssprop --m3e-expansion-panel-disabled-text-opacity - Opacity of the panel's text content, when disabled.\r\n * @cssprop --m3e-expansion-panel-container-color - Background color of the panel container.\r\n * @cssprop --m3e-expansion-panel-elevation - Elevation level when the panel is collapsed.\r\n * @cssprop --m3e-expansion-panel-shape - Shape (e.g. border radius) of the panel when collapsed.\r\n * @cssprop --m3e-expansion-panel-open-elevation - Elevation level when the panel is expanded.\r\n * @cssprop --m3e-expansion-panel-open-shape - Shape (e.g. border radius) of the panel when expanded.\r\n * @cssprop --m3e-expansion-panel-content-padding - Padding around the panel's content area.\r\n * @cssprop --m3e-expansion-panel-actions-spacing - Spacing between action buttons or elements.\r\n * @cssprop --m3e-expansion-panel-actions-padding - Padding around the actions section.\r\n * @cssprop --m3e-expansion-panel-actions-divider-thickness - Thickness of the divider above actions.\r\n * @cssprop --m3e-expansion-panel-actions-divider-color - Color of the divider above actions.\r\n */\r\n@customElement(\"m3e-expansion-panel\")\r\nexport class M3eExpansionPanelElement extends Disabled(ReconnectedCallback(AttachInternals(LitElement, true))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = ExpansionPanelStyle;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ #id = M3eExpansionPanelElement.__nextId++;\r\n  /** @private */ #contentId = `m3e-expansion-panel-${this.#id}-content`;\r\n  /** @private */ #headerId = `m3e-expansion-panel-${this.#id}-header`;\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n\r\n  /** @private */ @query(\"m3e-expansion-header\") private readonly _header?: M3eExpansionHeaderElement;\r\n\r\n  /**\r\n   * Whether the panel is expanded.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) open = false;\r\n\r\n  /**\r\n   * The direction of the expansion toggle.\r\n   * @default \"vertical\"\r\n   */\r\n  @property({ attribute: \"toggle-direction\", reflect: true }) toggleDirection: ExpansionToggleDirection = \"vertical\";\r\n\r\n  /**\r\n   * The position of the expansion toggle.\r\n   * @default \"after\"\r\n   */\r\n  @property({ attribute: \"toggle-position\", reflect: true }) togglePosition: ExpansionTogglePosition = \"after\";\r\n\r\n  /**\r\n   * Whether to hide the expansion toggle.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-toggle\", type: Boolean, reflect: true }) hideToggle = false;\r\n\r\n  /** @inheritdoc */\r\n  override focus(options?: FocusOptions): void {\r\n    this._header?.focus(options);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override blur(): void {\r\n    this._header?.blur();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override click(): void {\r\n    this._header?.click();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.#directionalitySubscription = M3eDirectionality.observe(() => {\r\n      this.requestUpdate();\r\n      this.#updateHeaderToggleRotation();\r\n    });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#updateHeaderToggleRotation();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#updateHeaderToggleRotation();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-expansion-header\r\n        id=\"${this.#headerId}\"\r\n        toggle-direction=\"${this.toggleDirection}\"\r\n        toggle-position=\"${this.togglePosition}\"\r\n        ?hide-toggle=\"${this.hideToggle}\"\r\n        ?disabled=\"${this.disabled}\"\r\n        aria-expanded=\"${this.open}\"\r\n        aria-controls=\"${this.#contentId}\"\r\n        @click=\"${this.#handleHeaderClick}\"\r\n        @keydown=\"${this.#handleKeyDown}\"\r\n      >\r\n        <div slot=\"toggle-icon\" class=\"toggle\">\r\n          <slot name=\"toggle-icon\">${this.#renderToggleIcon()}</slot>\r\n        </div>\r\n        <slot name=\"header\"></slot>\r\n      </m3e-expansion-header>\r\n      <m3e-collapsible\r\n        id=\"${this.#contentId}\"\r\n        role=\"region\"\r\n        aria-labelledby=\"${this.#headerId}\"\r\n        ?open=\"${this.open}\"\r\n        @opening=\"${this.#handleCollapsibleEvent}\"\r\n        @opened=\"${this.#handleCollapsibleEvent}\"\r\n        @closing=\"${this.#handleCollapsibleEvent}\"\r\n        @closed=\"${this.#handleCollapsibleEvent}\"\r\n      >\r\n        <div class=\"content\">\r\n          <slot></slot>\r\n        </div>\r\n        <div class=\"actions\">\r\n          <slot name=\"actions\" @slotchange=\"${this.#handleActionsSlotChange}\"></slot>\r\n        </div>\r\n      </m3e-collapsible>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderToggleIcon(): unknown {\r\n    return this.toggleDirection === \"vertical\"\r\n      ? html`<svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n          <path d=\"M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z\" />\r\n        </svg>`\r\n      : M3eDirectionality.current === \"ltr\"\r\n        ? html`<svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n            <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\r\n          </svg>`\r\n        : html`<svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n            <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\r\n          </svg>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleHeaderClick() {\r\n    this.open = !this.open;\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    switch (e.key) {\r\n      case \"ArrowUp\":\r\n        {\r\n          e.preventDefault();\r\n          const accordion = this.closest(\"m3e-accordion\");\r\n          if (accordion) {\r\n            const panels = [...accordion.panels].reverse();\r\n            const index = panels.indexOf(this);\r\n            (\r\n              panels.find((x, i) => !x.disabled && i > index) ?? panels.find((x, i) => !x.disabled && i < index)\r\n            )?._header?.focus();\r\n          } else {\r\n            this.open = false;\r\n          }\r\n        }\r\n\r\n        break;\r\n\r\n      case \"ArrowDown\":\r\n        {\r\n          e.preventDefault();\r\n          const accordion = this.closest(\"m3e-accordion\");\r\n          if (accordion) {\r\n            const index = accordion.panels.indexOf(this);\r\n            (\r\n              accordion.panels.find((x, i) => !x.disabled && i > index) ??\r\n              accordion.panels.find((x, i) => !x.disabled && i < index)\r\n            )?._header?.focus();\r\n          } else {\r\n            this.open = true;\r\n          }\r\n        }\r\n\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleCollapsibleEvent(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(e.type, { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleActionsSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-actions\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n  }\r\n\r\n  /** @private */\r\n  #updateHeaderToggleRotation(): void {\r\n    if (M3eDirectionality.current === \"rtl\") {\r\n      this._header?.style.setProperty(\"--_expansion-header-horizontal-expanded-toggle-rotation\", \"-90deg\");\r\n    } else {\r\n      this._header?.style.removeProperty(\"--_expansion-header-horizontal-expanded-toggle-rotation\");\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eExpansionPanelElementEventMap extends HTMLElementEventMap {\r\n  opening: Event;\r\n  opened: Event;\r\n  closing: Event;\r\n  closed: Event;\r\n}\r\n\r\nexport interface M3eExpansionPanelElement {\r\n  addEventListener<K extends keyof M3eExpansionPanelElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eExpansionPanelElement, ev: M3eExpansionPanelElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eExpansionPanelElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eExpansionPanelElement, ev: M3eExpansionPanelElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-expansion-panel\": M3eExpansionPanelElement;\r\n  }\r\n}\r\n"],"names":["M3eAccordionElement","LitElement","constructor","_M3eAccordionElement_panels","set","this","multi","panels","__classPrivateFieldGet","render","html","_M3eAccordionElement_instances","_M3eAccordionElement_handleSlotChange","_M3eAccordionElement_handleOpening","__classPrivateFieldSet","querySelectorAll","alreadyOpen","panel","filter","x","open","e","target","styles","css","DesignToken","color","surface","elevation","level2","shape","corner","medium","value","none","__decorate","property","type","Boolean","prototype","customElement","ExpansionHeaderToken","unsafeCSS","typescale","standard","title","fontSize","fontWeight","lineHeight","tracking","ExpansionHeaderStyle","motion","duration","medium1","easing","ExpansionPanelToken","onSurface","outlineVariant","ExpansionPanelStyle","M3eExpansionHeaderElement","KeyboardClick","Focusable","Disabled","AttachInternals","Role","toggleDirection","togglePosition","hideToggle","firstUpdated","_changedProperties","super","_focusRing","_stateLayer","forEach","attach","disabled","_M3eExpansionHeaderElement_instances","_M3eExpansionHeaderElement_renderToggle","nothing","query","attribute","reflect","M3eExpansionPanelElement","M3eExpansionPanelElement_1","ReconnectedCallback","_M3eExpansionPanelElement_id","__nextId","_M3eExpansionPanelElement_contentId","_M3eExpansionPanelElement_headerId","_M3eExpansionPanelElement_directionalitySubscription","focus","options","_header","blur","click","connectedCallback","M3eDirectionality","observe","requestUpdate","_M3eExpansionPanelElement_instances","_M3eExpansionPanelElement_updateHeaderToggleRotation","call","disconnectedCallback","reconnectedCallback","_M3eExpansionPanelElement_handleHeaderClick","_M3eExpansionPanelElement_handleKeyDown","_M3eExpansionPanelElement_renderToggleIcon","_M3eExpansionPanelElement_handleCollapsibleEvent","_M3eExpansionPanelElement_handleActionsSlotChange","current","key","preventDefault","accordion","closest","reverse","index","indexOf","find","i","stopPropagation","dispatchEvent","Event","bubbles","setCustomState","hasAssignedNodes","style","setProperty","removeProperty"],"mappings":";;;;;ufAuCO,IAAMA,EAAN,cAAkCC,EAAlCC,WAAAA,mCAyBWC,EAAAC,IAAAC,KAA2C,IAM9BA,KAAAC,OAAQ,CAqCvC,CAlCE,UAAIC,GACF,OAAOC,EAAAH,KAAIF,EAAA,IACb,CAGmBM,MAAAA,GACjB,OAAOC,CAAI,sBAAsBF,EAAAH,KAAIM,EAAA,IAAAC,iBAAiCJ,EAAAH,KAAIM,EAAA,IAAAE,aAC5E,4CAME,GAFAC,EAAAT,KAAIF,EAAW,IAAIE,KAAKU,iBAAiB,wBAAuB,KAE5DV,KAAKC,MACP,OAGF,IAAIU,GAAc,EAClB,IAAK,MAAMC,KAAST,EAAAH,KAAIF,EAAA,KAASe,OAAQC,IAAOA,EAAEC,MAC5CJ,IACFC,EAAMG,MAAO,GAEfJ,GAAc,CAElB,aAGeK,GACb,IAAKhB,KAAKC,MACR,IAAK,MAAMW,KAAST,EAAAH,YAAaa,OAAQC,GAAMA,IAAME,EAAEC,QAAUH,EAAEC,MACjEH,EAAMG,MAAO,CAGnB,EAjEgBpB,EAAAuB,OAAyBC,CAAG,qGAKCC,EAAYC,MAAMC,6CACxBF,EAAYG,UAAUC,6CACrBJ,EAAYK,MAAMC,OAAOC,6IAI9BP,EAAYK,MAAMC,OAAOC,4GAGzBP,EAAYK,MAAMC,OAAOE,MAAMD,UAAUP,EAAYK,MAAMC,OAAOE,MAAMD,UACnGP,EAAYK,MAAMC,OAAOE,MAAMC,QAAQT,EAAYK,MAAMC,OAAOE,MAAMC,0GAG3CT,EAAYK,MAAMC,OAAOE,MAAMC,QAAQT,EAAYK,MAAMC,OAAOE,MAAMC,QACjGT,EAAYK,MAAMC,OAAOE,MAAMD,UAAUP,EAAYK,MAAMC,OAAOE,MAAMD,YAUnDG,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAyBtC,EAAAuC,UAAA,aAAA,GA/BhCvC,EAAmBmC,EAAA,CAD/BK,EAAc,kBACFxC,GC/BN,MAAMyC,EACMC,EAAU,sDADhBD,EAEKC,EAAU,qDAFfD,EAGEC,EAAU,oDAHZD,EAIGC,EAAU,qDAJbD,EAKFC,EAAU,+CALRD,EAMKC,EAAU,wDANfD,EAODC,EAAU,yCAAyCjB,EAAYkB,UAAUC,SAASC,MAAMb,OAAOc,aAP9FL,EAQCC,EACV,2CAA2CjB,EAAYkB,UAAUC,SAASC,MAAMb,OAAOe,eAT9EN,EAWCC,EACV,2CAA2CjB,EAAYkB,UAAUC,SAASC,MAAMb,OAAOgB,eAZ9EP,EAcDC,EAAU,wCAAwCjB,EAAYkB,UAAUC,SAASC,MAAMb,OAAOiB,aCZ7FC,EAAuB1B,CAAG,gJAOrBkB,EAAU,oDAAoDjB,EAAY0B,OAAOC,SAASC,qBAClG5B,EAAY0B,OAAOG,OAAOV,6KAURH,0BACFA,iBACTA,mBACEA,mBACAA,sBACGA,kBACJA,kGAMJA,gDAGAA,0ZAmBGA,kBACCC,EAAU,uDAAuDjB,EAAY0B,OAAOC,SAASC,qBACrG5B,EAAY0B,OAAOG,OAAOV,iWASEH,kFAGFA,gRCpEvBc,EACAb,EAAU,yCAAyCjB,EAAYC,MAAM8B,cADrED,EAEQb,EAAU,kDAAkDjB,EAAYC,MAAM8B,cAFtFD,EAGUb,EAAU,yDAHpBa,EAIKb,EAAU,8CAJfa,EAKSb,EAAU,wCALnBa,EAMKb,EAAU,oCANfa,EAOQb,EAAU,mFAPlBa,EAQIb,EAAU,2EARda,EASIb,EAAU,wCATda,EAUKb,EAAU,oEAVfa,EAWKb,EAAU,sDAXfa,EAYKb,EAAU,uEAZfa,EAacb,EACvB,2FAdSa,EAgBUb,EACnB,6EAA6EjB,EAAYC,MAAM+B,oBCdtFC,EAAsBlC,CAAG,uDAKd+B,kBACNb,EAAU,wDAAwDjB,EAAY0B,OAAOC,SAASC,qBACtG5B,EAAY0B,OAAOG,OAAOV,wDAGvBW,4DAKLA,KAAyCA,+DAK/BA,qBACGA,0CAGHA,qBACGA,oBACDA,0FAMHd,wLAYFc,2FAMAA,iDAESA,wBACAA,kGAMNA,+SCzBX,IAAMI,GAAN,cAAwCC,EAC7CC,EAAUC,EAASC,EAAgBC,EAAK/D,EAAY,WAAW,OAD1DC,WAAAA,mCAauDG,KAAA4D,gBAA4C,WAM7C5D,KAAA6D,eAA0C,QAM/B7D,KAAA8D,YAAa,CA2BrF,CAxBqBC,YAAAA,CAAaC,GAC9BC,MAAMF,aAAaC,GACnB,CAAChE,KAAKkE,WAAYlE,KAAKmE,aAAaC,QAAStD,GAAMA,GAAGuD,OAAOrE,MAC/D,CAGmBI,MAAAA,GACjB,OAAOC,CAAI,mEACuCL,KAAKsE,8EACHtE,KAAKsE,+BAC7B,WAAxBtE,KAAK6D,eAA8B1D,EAAAH,KAAIuE,EAAA,IAAAC,QAAJxE,MAAuByE,4CAIlC,UAAxBzE,KAAK6D,eAA6B1D,EAAAH,KAAIuE,EAAA,IAAAC,QAAJxE,MAAuByE,SAE/D,sEAIE,OAAOpE,CAAI,+EAGb,EA/CgBiD,GAAApC,OAAyB2B,EAEcf,EAAA,CAAtC4C,EAAM,gBAAiEpB,GAAApB,UAAA,qBAChCJ,EAAA,CAAvC4C,EAAM,iBAAoEpB,GAAApB,UAAA,sBAM/BJ,EAAA,CAA3DC,EAAS,CAAE4C,UAAW,mBAAoBC,SAAS,KAA+DtB,GAAApB,UAAA,uBAAA,GAMxDJ,EAAA,CAA1DC,EAAS,CAAE4C,UAAW,kBAAmBC,SAAS,KAA0DtB,GAAApB,UAAA,sBAAA,GAMvCJ,EAAA,CAArEC,EAAS,CAAE4C,UAAW,cAAe3C,KAAMC,QAAS2C,SAAS,KAA2BtB,GAAApB,UAAA,kBAAA,GAzB9EoB,GAAyBxB,EAAA,CADrCK,EAAc,yBACFmB,IC8CN,IAAMuB,GAAwBC,GAA9B,cAAuCrB,EAASsB,EAAoBrB,EAAgB9D,GAAY,MAAhGC,WAAAA,oCAKWmF,GAAAjF,IAAAC,KAAM8E,GAAyBG,YAC/BC,GAAAnF,IAAAC,KAAa,uBAAuBG,EAAAH,KAAIgF,GAAA,gBACxCG,GAAApF,IAAAC,KAAY,uBAAuBG,EAAAH,KAAIgF,GAAA,eACvCI,GAAArF,IAAAC,aAQ4BA,KAAAe,MAAO,EAMSf,KAAA4D,gBAA4C,WAM7C5D,KAAA6D,eAA0C,QAM/B7D,KAAA8D,YAAa,CAiKrF,CA9JWuB,KAAAA,CAAMC,GACbtF,KAAKuF,SAASF,MAAMC,EACtB,CAGSE,IAAAA,GACPxF,KAAKuF,SAASC,MAChB,CAGSC,KAAAA,GACPzF,KAAKuF,SAASE,OAChB,CAGSC,iBAAAA,GACPzB,MAAMyB,oBACNjF,EAAAT,KAAIoF,GAA+BO,EAAkBC,QAAQ,KAC3D5F,KAAK6F,gBACL1F,EAAAH,KAAI8F,GAAA,IAAAC,IAA4BC,KAAhChG,YAEJ,CAGSiG,oBAAAA,GACPhC,MAAMgC,uBACN9F,EAAAH,KAAIoF,GAAA,MAA8BY,KAAlChG,KACF,CAGSkG,mBAAAA,GACPjC,MAAMiC,sBACN/F,EAAAH,KAAI8F,GAAA,IAAAC,IAA4BC,KAAhChG,KACF,CAGS+D,YAAAA,CAAaC,GACpBC,MAAMF,aAAaC,GACnB7D,EAAAH,KAAI8F,GAAA,IAAAC,IAA4BC,KAAhChG,KACF,CAGmBI,MAAAA,GACjB,OAAOC,CAAI,+CAEDF,EAAAH,KAAImF,GAAA,2BACUnF,KAAK4D,qCACN5D,KAAK6D,iCACR7D,KAAK8D,0BACR9D,KAAKsE,4BACDtE,KAAKe,wBACLZ,EAAAH,KAAIkF,GAAA,iBACX/E,EAAAH,KAAI8F,GAAA,IAAAK,kBACFhG,EAAAH,KAAI8F,GAAA,IAAAM,wEAGajG,EAAAH,KAAI8F,GAAA,IAAAO,IAAkBL,KAAtBhG,4FAKvBG,EAAAH,KAAIkF,GAAA,wCAES/E,EAAAH,KAAImF,GAAA,gBACdnF,KAAKe,mBACFZ,EAAAH,KAAI8F,GAAA,IAAAQ,iBACLnG,EAAAH,KAAI8F,GAAA,IAAAQ,kBACHnG,EAAAH,KAAI8F,GAAA,IAAAQ,iBACLnG,EAAAH,KAAI8F,GAAA,IAAAQ,uGAMuBnG,EAAAH,KAAI8F,GAAA,IAAAS,4CAIhD,4FAIE,MAAgC,aAAzBvG,KAAK4D,gBACRvD,CAAI,4HAG0B,QAA9BsF,EAAkBa,QAChBnG,CAAI,4HAGJA,CAAI,2HAGZ,gBAIEL,KAAKe,MAAQf,KAAKe,IACpB,cAGeC,GACb,OAAQA,EAAEyF,KACR,IAAK,UACH,CACEzF,EAAE0F,iBACF,MAAMC,EAAY3G,KAAK4G,QAAQ,iBAC/B,GAAID,EAAW,CACb,MAAMzG,EAAS,IAAIyG,EAAUzG,QAAQ2G,UAC/BC,EAAQ5G,EAAO6G,QAAQ/G,OAE3BE,EAAO8G,KAAK,CAAClG,EAAGmG,KAAOnG,EAAEwD,UAAY2C,EAAIH,IAAU5G,EAAO8G,KAAK,CAAClG,EAAGmG,KAAOnG,EAAEwD,UAAY2C,EAAIH,KAC3FvB,SAASF,OACd,MACErF,KAAKe,MAAO,CAEhB,CAEA,MAEF,IAAK,YACH,CACEC,EAAE0F,iBACF,MAAMC,EAAY3G,KAAK4G,QAAQ,iBAC/B,GAAID,EAAW,CACb,MAAMG,EAAQH,EAAUzG,OAAO6G,QAAQ/G,OAErC2G,EAAUzG,OAAO8G,KAAK,CAAClG,EAAGmG,KAAOnG,EAAEwD,UAAY2C,EAAIH,IACnDH,EAAUzG,OAAO8G,KAAK,CAAClG,EAAGmG,KAAOnG,EAAEwD,UAAY2C,EAAIH,KAClDvB,SAASF,OACd,MACErF,KAAKe,MAAO,CAEhB,EAIN,cAGwBC,GACtBA,EAAEkG,kBACFlH,KAAKmH,cAAc,IAAIC,MAAMpG,EAAEgB,KAAM,CAAEqF,SAAS,IAClD,cAGyBrG,GACvBsG,EAAetH,KAAM,gBAAiBuH,EAAiBvG,EAAEC,QAC3D,gBAIoC,QAA9B0E,EAAkBa,QACpBxG,KAAKuF,SAASiC,MAAMC,YAAY,0DAA2D,UAE3FzH,KAAKuF,SAASiC,MAAME,eAAe,0DAEvC,EAhMgB7C,GAAA3D,OAAyBmC,EAEVwB,GAAAI,SAAW,EAMsBnD,EAAA,CAA/C4C,EAAM,yBAA6EG,GAAA3C,UAAA,kBAMxDJ,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAAS2C,SAAS,KAAqBC,GAAA3C,UAAA,YAAA,GAMGJ,EAAA,CAA3DC,EAAS,CAAE4C,UAAW,mBAAoBC,SAAS,KAA+DC,GAAA3C,UAAA,uBAAA,GAMxDJ,EAAA,CAA1DC,EAAS,CAAE4C,UAAW,kBAAmBC,SAAS,KAA0DC,GAAA3C,UAAA,sBAAA,GAMvCJ,EAAA,CAArEC,EAAS,CAAE4C,UAAW,cAAe3C,KAAMC,QAAS2C,SAAS,KAA2BC,GAAA3C,UAAA,kBAAA,GAlC9E2C,GAAwBC,GAAAhD,EAAA,CADpCK,EAAc,wBACF0C"}