@m3e/web 2.5.3 → 2.5.5

package/dist/drawer-container.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-container.min.js","sources":["../../src/drawer-container/styles/DrawerContainerToken.ts","../../src/drawer-container/styles/DrawerContainerStyle.ts","../../src/drawer-container/DrawerContainerElement.ts","../../src/drawer-container/DrawerToggleElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens that control `M3eDrawerContainerElement`.\r\n * @internal\r\n */\r\nexport const DrawerContainerToken = {\r\n  containerColor: unsafeCSS(`var(--m3e-drawer-container-color, ${DesignToken.color.surface})`),\r\n  containerElevation: unsafeCSS(`var(--m3e-drawer-container-elevation, ${DesignToken.elevation.level0})`),\r\n  containerWidth: unsafeCSS(`var(--m3e-drawer-container-width, 22.5rem)`),\r\n  scrimOpacity: unsafeCSS(\"var(--m3e-drawer-container-scrim-opacity, 32%)\"),\r\n  cornerShape: unsafeCSS(`var(--m3e-modal-drawer-corner-shape, ${DesignToken.shape.corner.large})`),\r\n  modalContainerColor: unsafeCSS(`var(--m3e-modal-drawer-container-color, ${DesignToken.color.surfaceContainerLow})`),\r\n  modalContainerElevation: unsafeCSS(`var(--m3e-modal-drawer-elevation, ${DesignToken.elevation.level1})`),\r\n  dividerColor: unsafeCSS(`var(--m3e-drawer-divider-color, ${DesignToken.color.outline})`),\r\n  dividerThickness: unsafeCSS(\"var(--m3e-drawer-divider-thickness, 1px)\"),\r\n} as const;\r\n","import { css, CSSResultGroup, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { DrawerContainerToken } from \"./DrawerContainerToken\";\r\n\r\n/**\r\n * Styles for `M3eDrawerContainerElement`.\r\n * @internal\r\n */\r\nexport const DrawerContainerStyle: CSSResultGroup = css`\r\n  :host {\r\n    display: block;\r\n    position: relative;\r\n    overflow: hidden;\r\n    flex: 1 1 auto;\r\n  }\r\n  .start,\r\n  .end {\r\n    position: absolute;\r\n    top: 0;\r\n    bottom: 0;\r\n    z-index: 3;\r\n    outline: none;\r\n    overflow-x: hidden;\r\n    overflow-y: auto;\r\n    scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n    scrollbar-color: ${DesignToken.scrollbar.color};\r\n    box-sizing: border-box;\r\n    background-color: ${DrawerContainerToken.containerColor};\r\n    box-shadow: ${DrawerContainerToken.containerElevation};\r\n    transition: ${unsafeCSS(\r\n      `margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},\r\n      visibility ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard} allow-discrete,\r\n      background-color ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},\r\n      box-shadow ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}`,\r\n    )};\r\n  }\r\n  .start {\r\n    inset-inline-start: 0;\r\n  }\r\n  .end {\r\n    inset-inline-end: 0;\r\n  }\r\n  :host(:not([start])) .start {\r\n    visibility: hidden;\r\n  }\r\n  :host(:not([start]):not(:dir(rtl))) .start {\r\n    margin-left: calc(0px - var(--_start-drawer-size, ${DrawerContainerToken.containerWidth}));\r\n  }\r\n  :host(:not([start]):dir(rtl)) .start {\r\n    margin-right: calc(0px - var(--_start-drawer-size, ${DrawerContainerToken.containerWidth}));\r\n  }\r\n  :host([start]:not(:dir(rtl))) .start {\r\n    margin-left: 0;\r\n  }\r\n  :host([start]:dir(rtl)) .start {\r\n    margin-right: 0;\r\n  }\r\n  :host(:not([end])) .end {\r\n    visibility: hidden;\r\n  }\r\n  :host(:not([end]):not(:dir(rtl))) .end {\r\n    margin-right: calc(0px - var(--_end-drawer-size, ${DrawerContainerToken.containerWidth}));\r\n  }\r\n  :host(:not([end]):dir(rtl)) .end {\r\n    margin-left: calc(0px - var(--_end-drawer-size, ${DrawerContainerToken.containerWidth}));\r\n  }\r\n  :host([end]:not(:dir(rtl))) .end {\r\n    margin-right: 0;\r\n  }\r\n  :host([end]:dir(rtl)) .end {\r\n    margin-left: 0;\r\n  }\r\n  ::slotted([slot=\"start\"]),\r\n  ::slotted([slot=\"end\"]) {\r\n    height: 100%;\r\n    width: ${DrawerContainerToken.containerWidth};\r\n    box-sizing: border-box;\r\n  }\r\n  .content {\r\n    position: relative;\r\n    height: 100%;\r\n    overflow: auto;\r\n    margin-left: 0;\r\n    margin-right: 0;\r\n    transition: ${unsafeCSS(`margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  :host(:state(-start-push)[start]:not(:dir(rtl))) .content,\r\n  :host(:state(-start-side)[start]:not(:dir(rtl))) .content {\r\n    margin-left: var(--_start-drawer-size, ${DrawerContainerToken.containerWidth});\r\n  }\r\n  :host(:state(-start-push)[start]:dir(rtl)) .content,\r\n  :host(:state(-start-side)[start]:dir(rtl)) .content {\r\n    margin-right: var(--_start-drawer-size, ${DrawerContainerToken.containerWidth});\r\n  }\r\n  :host(:state(-end-push)[end]:not(:dir(rtl))) .content,\r\n  :host(:state(-end-side)[end]:not(:dir(rtl))) .content {\r\n    margin-right: var(--_end-drawer-size, ${DrawerContainerToken.containerWidth});\r\n  }\r\n  :host(:state(-end-push)[end]:dir(rtl)) .content,\r\n  :host(:state(-end-side)[end]:dir(rtl)) .content {\r\n    margin-left: var(--_end-drawer-size, ${DrawerContainerToken.containerWidth});\r\n  }\r\n  .scrim {\r\n    display: block;\r\n    position: absolute;\r\n    left: 0;\r\n    right: 0;\r\n    top: 0;\r\n    bottom: 0;\r\n    z-index: 1;\r\n    background-color: ${DesignToken.color.scrim};\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transition: ${unsafeCSS(\r\n      `opacity ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}, \r\n        visibility ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n    )};\r\n  }\r\n  @starting-style {\r\n    .scrim {\r\n      opacity: 0;\r\n    }\r\n  }\r\n  :host(:state(-start-push)[start]) .scrim,\r\n  :host(:state(-end-push)[end]) .scrim,\r\n  :host(:state(-start-over)[start]) .scrim,\r\n  :host(:state(-end-over)[end]) .scrim {\r\n    visibility: visible;\r\n    opacity: ${DrawerContainerToken.scrimOpacity};\r\n  }\r\n  :host(:state(-start-push)) .start,\r\n  :host(:state(-start-over)) .start {\r\n    border-start-end-radius: ${DrawerContainerToken.cornerShape};\r\n    border-end-end-radius: ${DrawerContainerToken.cornerShape};\r\n  }\r\n  :host(:state(-end-push)) .end,\r\n  :host(:state(-end-over)) .end {\r\n    border-start-start-radius: ${DrawerContainerToken.cornerShape};\r\n    border-end-start-radius: ${DrawerContainerToken.cornerShape};\r\n  }\r\n  :host(:state(-start-push)) .start,\r\n  :host(:state(-end-push)) .end,\r\n  :host(:state(-start-over)) .start,\r\n  :host(:state(-end-over)) .end {\r\n    background-color: ${DrawerContainerToken.modalContainerColor};\r\n    box-shadow: ${DrawerContainerToken.modalContainerElevation};\r\n  }\r\n  :host([start-divider]) .start {\r\n    border-inline-end-color: transparent;\r\n    border-inline-end-width: ${DrawerContainerToken.dividerThickness};\r\n    border-inline-end-style: solid;\r\n    box-sizing: border-box;\r\n  }\r\n  :host([start-divider]:state(-start-side)[start]:not(:state(-end-push)[end]):not(:state(-end-over)[end])) .start {\r\n    border-inline-end-color: ${DrawerContainerToken.dividerColor};\r\n  }\r\n  :host([end-divider]) .end {\r\n    border-inline-start-color: transparent;\r\n    border-inline-start-width: ${DrawerContainerToken.dividerThickness};\r\n    border-inline-start-style: solid;\r\n    box-sizing: border-box;\r\n  }\r\n  :host([end-divider]:state(-end-side)[end]:not(:state(-start-push)[start]):not(:state(-start-over)[start])) .end {\r\n    border-inline-start-color: ${DrawerContainerToken.dividerColor};\r\n  }\r\n  :host(:state(-no-animate)) .start,\r\n  :host(:state(-no-animate)) .end,\r\n  :host(:state(-no-animate)) .content {\r\n    transition: none;\r\n  }\r\n  @media (forced-colors: active) {\r\n    .start,\r\n    .end {\r\n      background-color: Canvas;\r\n      box-shadow: unset;\r\n      transition: ${unsafeCSS(\r\n        `margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},\r\n      visibility ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host(:state(-start-push)) .start,\r\n    :host(:state(-end-push)) .end,\r\n    :host(:state(-start-over)) .start,\r\n    :host(:state(-end-over)) .end {\r\n      background-color: Canvas;\r\n      box-shadow: unset;\r\n      border-color: CanvasText;\r\n    }\r\n    .start,\r\n    .end {\r\n      border-style: solid;\r\n      border-color: Canvas;\r\n      border-width: 1px;\r\n    }\r\n    .start {\r\n      border-inline-start-style: none;\r\n    }\r\n    .end {\r\n      border-inline-end-style: none;\r\n    }\r\n    :host([start-divider]:state(-start-side)[start]:not(:state(-end-push)[end]):not(:state(-end-over)[end])) .start {\r\n      border-inline-end-color: GrayText;\r\n    }\r\n    :host([end-divider]:state(-end-side)[end]:not(:state(-start-push)[start]):not(:state(-start-over)[start])) .end {\r\n      border-inline-start-color: GrayText;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .start,\r\n    .end,\r\n    .content,\r\n    .scrim {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  addCustomState,\r\n  AttachInternals,\r\n  customElement,\r\n  deleteCustomState,\r\n  hasAssignedNodes,\r\n  hasCustomState,\r\n  ReconnectedCallback,\r\n  ResizeController,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { Breakpoint, M3eBreakpointObserver } from \"@m3e/web/core/layout\";\r\nimport \"@m3e/web/core/a11y\";\r\n\r\nimport { DrawerMode } from \"./DrawerMode\";\r\n\r\nimport { DrawerContainerStyle } from \"./styles\";\r\n\r\n/**\r\n * A container for one or two sliding drawers.\r\n *\r\n * @description\r\n * A responsive layout container that manages left and right drawers alongside main content.\r\n * Supports `over`, `push`, `side`, and `auto` modes, adapting drawer behavior based on breakpoint size.\r\n * Encodes spatial hierarchy, motion transitions, and accessibility semantics for modal, dismissible,\r\n * and permanent navigation.\r\n *\r\n * @example\r\n * The following example illustrates a typical drawer layout.\r\n * ```html\r\n * <m3e-drawer-container>\r\n *  <nav slot=\"start\">\r\n *    <!-- Start drawer content -->\r\n *  </nav>\r\n *  <main>\r\n *    <!-- Main content -->\r\n *  </main>\r\n *  <aside slot=\"end\">\r\n *    <!-- End drawer content -->\r\n *  </aside>\r\n * <m3e-drawer-container>\r\n * ```\r\n *\r\n * @tag m3e-drawer-container\r\n *\r\n * @slot - Renders the main content.\r\n * @slot start - Renders the start drawer.\r\n * @slot end - Renders the end drawer.\r\n *\r\n * @attr end - Whether the end drawer is open.\r\n * @attr end-mode - The behavior mode of the end drawer.\r\n * @attr end-divider - Whether to show a divider between the end drawer and content for `side` mode.\r\n * @attr start - Whether the start drawer is open.\r\n * @attr start-mode - The behavior mode of the start drawer.\r\n * @attr start-divider - Whether to show a divider between the start drawer and content for `side` mode.\r\n *\r\n * @fires change - Emitted when the state of the start or end drawers change.\r\n *\r\n * @cssprop --m3e-drawer-container-color - The background color of the drawer container.\r\n * @cssprop --m3e-drawer-container-elevation - The elevation level of the drawer container.\r\n * @cssprop --m3e-drawer-container-width - The width of the drawer container.\r\n * @cssprop --m3e-drawer-container-scrim-opacity - The opacity of the scrim behind the drawer.\r\n * @cssprop --m3e-modal-drawer-start-shape - The shape of the drawer's start edge (typically left in LTR).\r\n * @cssprop --m3e-modal-drawer-end-shape - The shape of the drawer's end edge (typically right in LTR).\r\n * @cssprop --m3e-modal-drawer-container-color - The background color of the modal drawer container.\r\n * @cssprop --m3e-modal-drawer-elevation - The elevation level of the modal drawer container.\r\n * @cssprop --m3e-drawer-divider-color - The color of the divider between drawer sections.\r\n * @cssprop --m3e-drawer-divider-thickness - The thickness of the divider line.\r\n */\r\n@customElement(\"m3e-drawer-container\")\r\nexport class M3eDrawerContainerElement extends ReconnectedCallback(AttachInternals(LitElement)) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = DrawerContainerStyle;\r\n\r\n  /** @private */ @state() private _startMode: Exclude<DrawerMode, \"auto\"> = \"side\";\r\n  /** @private */ @state() private _endMode: Exclude<DrawerMode, \"auto\"> = \"side\";\r\n  /** @private */ #breakpointUnobserve?: () => void;\r\n  /** @private */ #disableStartFocusTrap = false;\r\n  /** @private */ #disableEndFocusTrap = false;\r\n\r\n  /** @private */\r\n  #resizeController = new ResizeController(this, {\r\n    target: null,\r\n    skipInitial: true,\r\n    callback: (entries) => this.#handleDrawerResize(entries),\r\n  });\r\n\r\n  /**\r\n   * Whether the start drawer is open.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) start = false;\r\n\r\n  /**\r\n   * The behavior mode of the start drawer.\r\n   * @default \"side\"\r\n   */\r\n  @property({ attribute: \"start-mode\", reflect: true }) startMode: DrawerMode = \"side\";\r\n\r\n  /**\r\n   * Whether to show a divider between the start drawer and content for `side` mode.\r\n   * @default \"side\"\r\n   */\r\n  @property({ attribute: \"start-divider\", type: Boolean, reflect: true }) startDivider = false;\r\n\r\n  /**\r\n   * Whether the end drawer is open.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) end = false;\r\n\r\n  /**\r\n   * The behavior mode of the end drawer.\r\n   * @default \"side\"\r\n   */\r\n  @property({ attribute: \"end-mode\", reflect: true }) endMode: DrawerMode = \"side\";\r\n\r\n  /**\r\n   * Whether to show a divider between the end drawer and content for `side` mode.\r\n   * @default \"side\"\r\n   */\r\n  @property({ attribute: \"end-divider\", type: Boolean, reflect: true }) endDivider = false;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    addCustomState(this, \"-no-animate\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.#breakpointUnobserve?.();\r\n    this.#clearMode();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has(\"startMode\") || changedProperties.has(\"endMode\")) {\r\n      this.#breakpointUnobserve?.();\r\n\r\n      if (this.startMode === \"auto\" || this.endMode === \"auto\") {\r\n        this.#initBreakpointMonitoring();\r\n      } else {\r\n        this.#updateMode();\r\n      }\r\n    }\r\n\r\n    if (changedProperties.has(\"start\")) {\r\n      if (this.start && this.end && this._endMode !== \"side\") {\r\n        this.end = false;\r\n        this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n      }\r\n    } else if (changedProperties.has(\"end\")) {\r\n      if (this.end && this.start && this._startMode !== \"side\") {\r\n        this.start = false;\r\n        this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#initialize();\r\n\r\n    if (this.startMode === \"auto\" || this.endMode === \"auto\") {\r\n      this.#initBreakpointMonitoring();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#initialize();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"start\">\r\n        <m3e-focus-trap ?disabled=\"${!this.start || this._startMode === \"side\" || this.#disableStartFocusTrap}\">\r\n          <slot name=\"start\" @slotchange=\"${this.#handleStartSlotChange}\"></slot>\r\n        </m3e-focus-trap>\r\n      </div>\r\n      <div\r\n        class=\"content\"\r\n        .inert=\"${(this._startMode !== \"side\" || this._endMode !== \"side\") && (this.start || this.end)}\"\r\n      >\r\n        <slot></slot>\r\n      </div>\r\n      <div class=\"scrim\" @click=\"${this.#handleScrimClick}\"></div>\r\n      <div class=\"end\">\r\n        <m3e-focus-trap ?disabled=\"${!this.end || this._endMode === \"side\" || this.#disableEndFocusTrap}\">\r\n          <slot name=\"end\" @slotchange=\"${this.#handleEndSlotChange}\"></slot>\r\n        </m3e-focus-trap>\r\n      </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #initialize(): void {\r\n    let drawer = this.shadowRoot?.querySelector<HTMLElement>(\".start\");\r\n    if (drawer) this.#resizeController.observe(drawer);\r\n    drawer = this.shadowRoot?.querySelector(\".end\");\r\n    if (drawer) this.#resizeController.observe(drawer);\r\n  }\r\n\r\n  /** @private */\r\n  #handleScrimClick() {\r\n    if (this._startMode !== \"side\") {\r\n      this.start = false;\r\n    }\r\n    if (this._endMode !== \"side\") {\r\n      this.end = false;\r\n    }\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleStartSlotChange(e: Event): void {\r\n    this.#disableStartFocusTrap = !hasAssignedNodes(<HTMLSlotElement>e.target);\r\n  }\r\n\r\n  /** @private */\r\n  #handleEndSlotChange(e: Event): void {\r\n    this.#disableEndFocusTrap = !hasAssignedNodes(<HTMLSlotElement>e.target);\r\n  }\r\n\r\n  /** @private */\r\n  #handleDrawerResize(entries: ResizeObserverEntry[]): void {\r\n    for (const entry of entries) {\r\n      const borderSize: ResizeObserverSize = Array.isArray(entry.borderBoxSize)\r\n        ? entry.borderBoxSize[0]\r\n        : entry.borderBoxSize;\r\n\r\n      if (entry.target.classList.contains(\"start\")) {\r\n        this.style.setProperty(\"--_start-drawer-size\", `${borderSize.inlineSize}px`);\r\n      } else if (entry.target.classList.contains(\"end\")) {\r\n        this.style.setProperty(\"--_end-drawer-size\", `${borderSize.inlineSize}px`);\r\n      }\r\n    }\r\n\r\n    if (hasCustomState(this, \"-no-animate\")) {\r\n      // Force synchronous layout flush\r\n      void this.offsetTop;\r\n      deleteCustomState(this, \"-no-animate\");\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #initBreakpointMonitoring(): void {\r\n    this.#breakpointUnobserve = M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], (matches) =>\r\n      this.#updateMode(matches, true),\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #clearMode(): void {\r\n    deleteCustomState(this, \"-start-over\");\r\n    deleteCustomState(this, \"-start-push\");\r\n    deleteCustomState(this, \"-start-side\");\r\n    deleteCustomState(this, \"-end-over\");\r\n    deleteCustomState(this, \"-end-push\");\r\n    deleteCustomState(this, \"-end-side\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  #updateMode(breakpoints?: Map<string, boolean>, autoClose = false) {\r\n    let autoCloseStart = false,\r\n      autoCloseEnd = false;\r\n    if (this.startMode === \"auto\") {\r\n      if (breakpoints?.get(Breakpoint.Medium)) {\r\n        this._startMode = \"side\";\r\n      } else if (breakpoints?.get(Breakpoint.Small)) {\r\n        autoCloseStart = this._startMode === \"side\" && this.start;\r\n        this._startMode = \"push\";\r\n      } else if (breakpoints?.get(Breakpoint.XSmall)) {\r\n        autoCloseStart = this._startMode !== \"over\" && this.start;\r\n        this._startMode = \"over\";\r\n      } else {\r\n        this._startMode = \"side\";\r\n      }\r\n    } else {\r\n      this._startMode = this.startMode;\r\n    }\r\n\r\n    if (this.endMode === \"auto\") {\r\n      if (breakpoints?.get(Breakpoint.Medium)) {\r\n        this._endMode = \"side\";\r\n      } else if (breakpoints?.get(Breakpoint.Small)) {\r\n        autoCloseEnd = this._endMode === \"side\" && this.end;\r\n        this._endMode = \"push\";\r\n      } else if (breakpoints?.get(Breakpoint.XSmall)) {\r\n        autoCloseEnd = this._endMode !== \"over\" && this.end;\r\n        this._endMode = \"over\";\r\n      } else {\r\n        this._endMode = \"side\";\r\n      }\r\n    } else {\r\n      this._endMode = this.endMode;\r\n    }\r\n\r\n    this.#clearMode();\r\n\r\n    addCustomState(this, `-start-${this._startMode}`);\r\n    addCustomState(this, `-end-${this._endMode}`);\r\n\r\n    if (autoClose && (autoCloseStart || autoCloseEnd)) {\r\n      if (autoCloseStart) {\r\n        this.start = false;\r\n      }\r\n      if (autoCloseEnd) {\r\n        this.end = false;\r\n      }\r\n\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-drawer-container\": M3eDrawerContainerElement;\r\n  }\r\n}\r\n","import { LitElement } from \"lit\";\r\n\r\nimport { ActionElementBase, customElement, HtmlFor } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eDrawerContainerElement } from \"./DrawerContainerElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to toggle the opened state of a drawer.\r\n *\r\n * @example\r\n * The following example illustrates the use of a `m3e-drawer-toggle`, nested inside a `m3e-icon-button` component,\r\n * which toggles the open state of the start drawer.\r\n *\r\n * ```html\r\n * <m3e-icon-button slot=\"leading-icon\" aria-label=\"Menu\" toggle selected>\r\n *   <m3e-drawer-toggle for=\"startDrawer\"></m3e-drawer-toggle>\r\n *   <m3e-icon name=\"menu\"></m3e-icon>\r\n *   <m3e-icon slot=\"selected\" name=\"menu_open\"></m3e-icon>\r\n * </m3e-icon-button>\r\n *\r\n * <m3e-drawer-container start>\r\n *   <nav slot=\"start\" id=\"startDrawer\" aria-label=\"Navigation\">\r\n *     <!-- Start drawer content -->\r\n *   </nav>\r\n *   <!-- Container content -->\r\n * </m3e-drawer-container>\r\n * ```\r\n *\r\n * @tag m3e-drawer-toggle\r\n */\r\n@customElement(\"m3e-drawer-toggle\")\r\nexport class M3eDrawerToggleElement extends HtmlFor(ActionElementBase) {\r\n  /** @private */ readonly #drawerContainerChangeHandler = () => this.#handleDrawerContainerChange();\r\n  /** @private */ #togglingDrawer = false;\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    if (this.htmlFor && this.parentElement) {\r\n      addAriaReferencedId(this.parentElement, \"aria-controls\", this.htmlFor);\r\n    }\r\n\r\n    const container = control.closest(\"m3e-drawer-container\");\r\n    if (container) {\r\n      container.addEventListener(\"change\", this.#drawerContainerChangeHandler);\r\n      this.#updateToggle(container, true);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.parentElement) {\r\n      if (this.htmlFor) {\r\n        removeAriaReferencedId(this.parentElement, \"aria-controls\", this.htmlFor);\r\n      }\r\n\r\n      this.parentElement.ariaExpanded = null;\r\n    }\r\n\r\n    this.control?.closest(\"m3e-drawer-container\")?.removeEventListener(\"change\", this.#drawerContainerChangeHandler);\r\n\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    this.#toggleDrawer();\r\n  }\r\n\r\n  /** @private */\r\n  #handleDrawerContainerChange(): void {\r\n    if (this.control && !this.#togglingDrawer) {\r\n      const container = this.control.closest(\"m3e-drawer-container\");\r\n      if (container) {\r\n        this.#updateToggle(container, true);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  async #toggleDrawer(): Promise<void> {\r\n    if (!this.parentElement || !this.control) {\r\n      return;\r\n    }\r\n\r\n    const container = this.control.closest(\"m3e-drawer-container\");\r\n    if (container) {\r\n      this.#togglingDrawer = true;\r\n      try {\r\n        if (this.control.slot === \"start\") {\r\n          container.start = !container.start;\r\n        } else if (this.control.slot === \"end\") {\r\n          container.end = !container.end;\r\n        }\r\n        if (container.isUpdatePending) {\r\n          await container.updateComplete;\r\n        }\r\n        await this.#updateToggle(container, false);\r\n      } finally {\r\n        this.#togglingDrawer = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  async #updateToggle(container: M3eDrawerContainerElement, syncToggle: boolean): Promise<void> {\r\n    if (!this.parentElement || !this.control) {\r\n      return;\r\n    }\r\n\r\n    let selected = false;\r\n    if (this.control.slot === \"start\") {\r\n      selected = container.start;\r\n    } else if (this.control.slot === \"end\") {\r\n      selected = container.end;\r\n    }\r\n\r\n    this.parentElement.ariaExpanded = `${selected}`;\r\n\r\n    if (syncToggle && this.parentElement.hasAttribute(\"toggle\")) {\r\n      this.parentElement.toggleAttribute(\"selected\", selected);\r\n    }\r\n\r\n    if (this.parentElement instanceof LitElement) {\r\n      // Wait for update and remove aria-pressed due to use of aria-expanded.\r\n      await (this.parentElement as LitElement).updateComplete;\r\n      this.parentElement.ariaPressed = null;\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-drawer-toggle\": M3eDrawerToggleElement;\r\n  }\r\n}\r\n"],"names":["DrawerContainerToken","unsafeCSS","DesignToken","color","surface","elevation","level0","shape","corner","large","surfaceContainerLow","level1","outline","DrawerContainerStyle","css","scrollbar","thinWidth","motion","duration","medium4","easing","standard","scrim","M3eDrawerContainerElement","ReconnectedCallback","AttachInternals","LitElement","constructor","this","_startMode","_endMode","_M3eDrawerContainerElement_breakpointUnobserve","set","_M3eDrawerContainerElement_disableStartFocusTrap","_M3eDrawerContainerElement_disableEndFocusTrap","_M3eDrawerContainerElement_resizeController","ResizeController","target","skipInitial","callback","entries","__classPrivateFieldGet","_M3eDrawerContainerElement_instances","_M3eDrawerContainerElement_handleDrawerResize","call","start","startMode","startDivider","end","endMode","endDivider","connectedCallback","super","addCustomState","disconnectedCallback","_M3eDrawerContainerElement_clearMode","willUpdate","changedProperties","has","_M3eDrawerContainerElement_initBreakpointMonitoring","_M3eDrawerContainerElement_updateMode","dispatchEvent","Event","bubbles","reconnectedCallback","_M3eDrawerContainerElement_initialize","firstUpdated","_changedProperties","render","html","_M3eDrawerContainerElement_handleStartSlotChange","_M3eDrawerContainerElement_handleScrimClick","_M3eDrawerContainerElement_handleEndSlotChange","drawer","shadowRoot","querySelector","observe","e","__classPrivateFieldSet","hasAssignedNodes","entry","borderSize","Array","isArray","borderBoxSize","classList","contains","style","setProperty","inlineSize","hasCustomState","offsetTop","deleteCustomState","M3eBreakpointObserver","Breakpoint","XSmall","Small","matches","breakpoints","autoClose","autoCloseStart","autoCloseEnd","get","Medium","styles","__decorate","state","prototype","property","type","Boolean","reflect","attribute","customElement","M3eDrawerToggleElement","HtmlFor","ActionElementBase","_M3eDrawerToggleElement_drawerContainerChangeHandler","_M3eDrawerToggleElement_instances","_M3eDrawerToggleElement_handleDrawerContainerChange","_M3eDrawerToggleElement_togglingDrawer","attach","control","htmlFor","parentElement","addAriaReferencedId","container","closest","addEventListener","detach","removeAriaReferencedId","ariaExpanded","removeEventListener","_onClick","_M3eDrawerToggleElement_toggleDrawer","async","slot","isUpdatePending","updateComplete","_M3eDrawerToggleElement_updateToggle","syncToggle","selected","hasAttribute","toggleAttribute","ariaPressed"],"mappings":"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"}
+{"version":3,"file":"drawer-container.min.js","sources":["../../src/drawer-container/styles/DrawerContainerToken.ts","../../src/drawer-container/styles/DrawerContainerStyle.ts","../../src/drawer-container/DrawerContainerElement.ts","../../src/drawer-container/DrawerToggleElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens that control `M3eDrawerContainerElement`.\r\n * @internal\r\n */\r\nexport const DrawerContainerToken = {\r\n  containerColor: unsafeCSS(`var(--m3e-drawer-container-color, ${DesignToken.color.surface})`),\r\n  containerElevation: unsafeCSS(`var(--m3e-drawer-container-elevation, ${DesignToken.elevation.level0})`),\r\n  containerWidth: unsafeCSS(`var(--m3e-drawer-container-width, 22.5rem)`),\r\n  scrimOpacity: unsafeCSS(\"var(--m3e-drawer-container-scrim-opacity, 32%)\"),\r\n  cornerShape: unsafeCSS(`var(--m3e-modal-drawer-corner-shape, ${DesignToken.shape.corner.large})`),\r\n  modalContainerColor: unsafeCSS(`var(--m3e-modal-drawer-container-color, ${DesignToken.color.surfaceContainerLow})`),\r\n  modalContainerElevation: unsafeCSS(`var(--m3e-modal-drawer-elevation, ${DesignToken.elevation.level1})`),\r\n  dividerColor: unsafeCSS(`var(--m3e-drawer-divider-color, ${DesignToken.color.outline})`),\r\n  dividerThickness: unsafeCSS(\"var(--m3e-drawer-divider-thickness, 1px)\"),\r\n} as const;\r\n","import { css, CSSResultGroup, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { DrawerContainerToken } from \"./DrawerContainerToken\";\r\n\r\n/**\r\n * Styles for `M3eDrawerContainerElement`.\r\n * @internal\r\n */\r\nexport const DrawerContainerStyle: CSSResultGroup = css`\r\n  :host {\r\n    display: block;\r\n    position: relative;\r\n    overflow: hidden;\r\n    flex: 1 1 auto;\r\n  }\r\n  .start,\r\n  .end {\r\n    position: absolute;\r\n    top: 0;\r\n    bottom: 0;\r\n    z-index: 3;\r\n    outline: none;\r\n    overflow-x: hidden;\r\n    overflow-y: auto;\r\n    scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n    scrollbar-color: ${DesignToken.scrollbar.color};\r\n    box-sizing: border-box;\r\n    background-color: ${DrawerContainerToken.containerColor};\r\n    box-shadow: ${DrawerContainerToken.containerElevation};\r\n    transition: ${unsafeCSS(\r\n      `margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},\r\n      visibility ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard} allow-discrete,\r\n      background-color ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},\r\n      box-shadow ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}`,\r\n    )};\r\n  }\r\n  .start {\r\n    inset-inline-start: 0;\r\n  }\r\n  .end {\r\n    inset-inline-end: 0;\r\n  }\r\n  :host(:not([start])) .start {\r\n    visibility: hidden;\r\n  }\r\n  :host(:not([start]):not(:dir(rtl))) .start {\r\n    margin-left: calc(0px - var(--_start-drawer-size, ${DrawerContainerToken.containerWidth}));\r\n  }\r\n  :host(:not([start]):dir(rtl)) .start {\r\n    margin-right: calc(0px - var(--_start-drawer-size, ${DrawerContainerToken.containerWidth}));\r\n  }\r\n  :host([start]:not(:dir(rtl))) .start {\r\n    margin-left: 0;\r\n  }\r\n  :host([start]:dir(rtl)) .start {\r\n    margin-right: 0;\r\n  }\r\n  :host(:not([end])) .end {\r\n    visibility: hidden;\r\n  }\r\n  :host(:not([end]):not(:dir(rtl))) .end {\r\n    margin-right: calc(0px - var(--_end-drawer-size, ${DrawerContainerToken.containerWidth}));\r\n  }\r\n  :host(:not([end]):dir(rtl)) .end {\r\n    margin-left: calc(0px - var(--_end-drawer-size, ${DrawerContainerToken.containerWidth}));\r\n  }\r\n  :host([end]:not(:dir(rtl))) .end {\r\n    margin-right: 0;\r\n  }\r\n  :host([end]:dir(rtl)) .end {\r\n    margin-left: 0;\r\n  }\r\n  ::slotted([slot=\"start\"]),\r\n  ::slotted([slot=\"end\"]) {\r\n    height: 100%;\r\n    width: ${DrawerContainerToken.containerWidth};\r\n    box-sizing: border-box;\r\n  }\r\n  .content {\r\n    position: relative;\r\n    height: 100%;\r\n    overflow: auto;\r\n    margin-left: 0;\r\n    margin-right: 0;\r\n    transition: ${unsafeCSS(`margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  :host(:is(:state(--start-push), :--start-push)[start]:not(:dir(rtl))) .content,\r\n  :host(:is(:state(--start-side), :--start-side)[start]:not(:dir(rtl))) .content {\r\n    margin-left: var(--_start-drawer-size, ${DrawerContainerToken.containerWidth});\r\n  }\r\n  :host(:is(:state(--start-push), :--start-push)[start]:dir(rtl)) .content,\r\n  :host(:is(:state(--start-side), :--start-side)[start]:dir(rtl)) .content {\r\n    margin-right: var(--_start-drawer-size, ${DrawerContainerToken.containerWidth});\r\n  }\r\n  :host(:is(:state(--end-push), :--end-push)[end]:not(:dir(rtl))) .content,\r\n  :host(:is(:state(--end-side), :--end-side)[end]:not(:dir(rtl))) .content {\r\n    margin-right: var(--_end-drawer-size, ${DrawerContainerToken.containerWidth});\r\n  }\r\n  :host(:is(:state(--end-push), :--end-push)[end]:dir(rtl)) .content,\r\n  :host(:is(:state(--end-side), :--end-side)[end]:dir(rtl)) .content {\r\n    margin-left: var(--_end-drawer-size, ${DrawerContainerToken.containerWidth});\r\n  }\r\n  .scrim {\r\n    display: block;\r\n    position: absolute;\r\n    left: 0;\r\n    right: 0;\r\n    top: 0;\r\n    bottom: 0;\r\n    z-index: 1;\r\n    background-color: ${DesignToken.color.scrim};\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transition: ${unsafeCSS(\r\n      `opacity ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}, \r\n        visibility ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n    )};\r\n  }\r\n  @starting-style {\r\n    .scrim {\r\n      opacity: 0;\r\n    }\r\n  }\r\n  :host(:is(:state(--start-push), :--start-push)[start]) .scrim,\r\n  :host(:is(:state(--end-push), :--end-push)[end]) .scrim,\r\n  :host(:is(:state(--start-over), :--start-over)[start]) .scrim,\r\n  :host(:is(:state(--end-over), :--end-over)[end]) .scrim {\r\n    visibility: visible;\r\n    opacity: ${DrawerContainerToken.scrimOpacity};\r\n  }\r\n  :host(:is(:state(--start-push), :--start-push)) .start,\r\n  :host(:is(:state(--start-over), :--start-over)) .start {\r\n    border-start-end-radius: ${DrawerContainerToken.cornerShape};\r\n    border-end-end-radius: ${DrawerContainerToken.cornerShape};\r\n  }\r\n  :host(:is(:state(--end-push), :--end-push)) .end,\r\n  :host(:is(:state(--end-over), :--end-over)) .end {\r\n    border-start-start-radius: ${DrawerContainerToken.cornerShape};\r\n    border-end-start-radius: ${DrawerContainerToken.cornerShape};\r\n  }\r\n  :host(:is(:state(--start-push), :--start-push)) .start,\r\n  :host(:is(:state(--end-push), :--end-push)) .end,\r\n  :host(:is(:state(--start-over), :--start-over)) .start,\r\n  :host(:is(:state(--end-over), :--end-over)) .end {\r\n    background-color: ${DrawerContainerToken.modalContainerColor};\r\n    box-shadow: ${DrawerContainerToken.modalContainerElevation};\r\n  }\r\n  :host([start-divider]) .start {\r\n    border-inline-end-color: transparent;\r\n    border-inline-end-width: ${DrawerContainerToken.dividerThickness};\r\n    border-inline-end-style: solid;\r\n    box-sizing: border-box;\r\n  }\r\n  :host(\r\n      [start-divider]:is(:state(--start-side), :--start-side)[start]:not(:is(:state(--end-push), :--end-push)[end]):not(\r\n          :is(:state(--end-over), :--end-over)[end]\r\n        )\r\n    )\r\n    .start {\r\n    border-inline-end-color: ${DrawerContainerToken.dividerColor};\r\n  }\r\n  :host([end-divider]) .end {\r\n    border-inline-start-color: transparent;\r\n    border-inline-start-width: ${DrawerContainerToken.dividerThickness};\r\n    border-inline-start-style: solid;\r\n    box-sizing: border-box;\r\n  }\r\n  :host(\r\n      [end-divider]:is(:state(--end-side), :--end-side)[end]:not(:is(:state(--start-push), :--start-push)[start]):not(\r\n          :is(:state(--start-over), :--start-over)[start]\r\n        )\r\n    )\r\n    .end {\r\n    border-inline-start-color: ${DrawerContainerToken.dividerColor};\r\n  }\r\n  :host(:is(:state(--no-animate), :--no-animate)) .start,\r\n  :host(:is(:state(--no-animate), :--no-animate)) .end,\r\n  :host(:is(:state(--no-animate), :--no-animate)) .content {\r\n    transition: none;\r\n  }\r\n  @media (forced-colors: active) {\r\n    .start,\r\n    .end {\r\n      background-color: Canvas;\r\n      box-shadow: unset;\r\n      transition: ${unsafeCSS(\r\n        `margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},\r\n      visibility ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host(:is(:state(--start-push), :--start-push)) .start,\r\n    :host(:is(:state(--end-push), :--end-push)) .end,\r\n    :host(:is(:state(--start-over), :--start-over)) .start,\r\n    :host(:is(:state(--end-over), :--end-over)) .end {\r\n      background-color: Canvas;\r\n      box-shadow: unset;\r\n      border-color: CanvasText;\r\n    }\r\n    .start,\r\n    .end {\r\n      border-style: solid;\r\n      border-color: Canvas;\r\n      border-width: 1px;\r\n    }\r\n    .start {\r\n      border-inline-start-style: none;\r\n    }\r\n    .end {\r\n      border-inline-end-style: none;\r\n    }\r\n    :host(\r\n        [start-divider]:is(:state(--start-side), :--start-side)[start]:not(\r\n            :is(:state(--end-push), :--end-push)[end]\r\n          ):not(:is(:state(--end-over), :--end-over)[end])\r\n      )\r\n      .start {\r\n      border-inline-end-color: GrayText;\r\n    }\r\n    :host(\r\n        [end-divider]:is(:state(--end-side), :--end-side)[end]:not(:is(:state(--start-push), :--start-push)[start]):not(\r\n            :is(:state(--start-over), :--start-over)[start]\r\n          )\r\n      )\r\n      .end {\r\n      border-inline-start-color: GrayText;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .start,\r\n    .end,\r\n    .content,\r\n    .scrim {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  addCustomState,\r\n  AttachInternals,\r\n  customElement,\r\n  deleteCustomState,\r\n  hasAssignedNodes,\r\n  hasCustomState,\r\n  ReconnectedCallback,\r\n  ResizeController,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { Breakpoint, M3eBreakpointObserver } from \"@m3e/web/core/layout\";\r\nimport \"@m3e/web/core/a11y\";\r\n\r\nimport { DrawerMode } from \"./DrawerMode\";\r\n\r\nimport { DrawerContainerStyle } from \"./styles\";\r\n\r\n/**\r\n * A container for one or two sliding drawers.\r\n *\r\n * @description\r\n * A responsive layout container that manages left and right drawers alongside main content.\r\n * Supports `over`, `push`, `side`, and `auto` modes, adapting drawer behavior based on breakpoint size.\r\n * Encodes spatial hierarchy, motion transitions, and accessibility semantics for modal, dismissible,\r\n * and permanent navigation.\r\n *\r\n * @example\r\n * The following example illustrates a typical drawer layout.\r\n * ```html\r\n * <m3e-drawer-container>\r\n *  <nav slot=\"start\">\r\n *    <!-- Start drawer content -->\r\n *  </nav>\r\n *  <main>\r\n *    <!-- Main content -->\r\n *  </main>\r\n *  <aside slot=\"end\">\r\n *    <!-- End drawer content -->\r\n *  </aside>\r\n * <m3e-drawer-container>\r\n * ```\r\n *\r\n * @tag m3e-drawer-container\r\n *\r\n * @slot - Renders the main content.\r\n * @slot start - Renders the start drawer.\r\n * @slot end - Renders the end drawer.\r\n *\r\n * @attr end - Whether the end drawer is open.\r\n * @attr end-mode - The behavior mode of the end drawer.\r\n * @attr end-divider - Whether to show a divider between the end drawer and content for `side` mode.\r\n * @attr start - Whether the start drawer is open.\r\n * @attr start-mode - The behavior mode of the start drawer.\r\n * @attr start-divider - Whether to show a divider between the start drawer and content for `side` mode.\r\n *\r\n * @fires change - Emitted when the state of the start or end drawers change.\r\n *\r\n * @cssprop --m3e-drawer-container-color - The background color of the drawer container.\r\n * @cssprop --m3e-drawer-container-elevation - The elevation level of the drawer container.\r\n * @cssprop --m3e-drawer-container-width - The width of the drawer container.\r\n * @cssprop --m3e-drawer-container-scrim-opacity - The opacity of the scrim behind the drawer.\r\n * @cssprop --m3e-modal-drawer-start-shape - The shape of the drawer's start edge (typically left in LTR).\r\n * @cssprop --m3e-modal-drawer-end-shape - The shape of the drawer's end edge (typically right in LTR).\r\n * @cssprop --m3e-modal-drawer-container-color - The background color of the modal drawer container.\r\n * @cssprop --m3e-modal-drawer-elevation - The elevation level of the modal drawer container.\r\n * @cssprop --m3e-drawer-divider-color - The color of the divider between drawer sections.\r\n * @cssprop --m3e-drawer-divider-thickness - The thickness of the divider line.\r\n */\r\n@customElement(\"m3e-drawer-container\")\r\nexport class M3eDrawerContainerElement extends ReconnectedCallback(AttachInternals(LitElement)) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = DrawerContainerStyle;\r\n\r\n  /** @private */ @state() private _startMode: Exclude<DrawerMode, \"auto\"> = \"side\";\r\n  /** @private */ @state() private _endMode: Exclude<DrawerMode, \"auto\"> = \"side\";\r\n  /** @private */ #breakpointUnobserve?: () => void;\r\n  /** @private */ #disableStartFocusTrap = false;\r\n  /** @private */ #disableEndFocusTrap = false;\r\n\r\n  /** @private */\r\n  #resizeController = new ResizeController(this, {\r\n    target: null,\r\n    skipInitial: true,\r\n    callback: (entries) => this.#handleDrawerResize(entries),\r\n  });\r\n\r\n  /**\r\n   * Whether the start drawer is open.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) start = false;\r\n\r\n  /**\r\n   * The behavior mode of the start drawer.\r\n   * @default \"side\"\r\n   */\r\n  @property({ attribute: \"start-mode\", reflect: true }) startMode: DrawerMode = \"side\";\r\n\r\n  /**\r\n   * Whether to show a divider between the start drawer and content for `side` mode.\r\n   * @default \"side\"\r\n   */\r\n  @property({ attribute: \"start-divider\", type: Boolean, reflect: true }) startDivider = false;\r\n\r\n  /**\r\n   * Whether the end drawer is open.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) end = false;\r\n\r\n  /**\r\n   * The behavior mode of the end drawer.\r\n   * @default \"side\"\r\n   */\r\n  @property({ attribute: \"end-mode\", reflect: true }) endMode: DrawerMode = \"side\";\r\n\r\n  /**\r\n   * Whether to show a divider between the end drawer and content for `side` mode.\r\n   * @default \"side\"\r\n   */\r\n  @property({ attribute: \"end-divider\", type: Boolean, reflect: true }) endDivider = false;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    addCustomState(this, \"--no-animate\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.#breakpointUnobserve?.();\r\n    this.#clearMode();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has(\"startMode\") || changedProperties.has(\"endMode\")) {\r\n      this.#breakpointUnobserve?.();\r\n\r\n      if (this.startMode === \"auto\" || this.endMode === \"auto\") {\r\n        this.#initBreakpointMonitoring();\r\n      } else {\r\n        this.#updateMode();\r\n      }\r\n    }\r\n\r\n    if (changedProperties.has(\"start\")) {\r\n      if (this.start && this.end && this._endMode !== \"side\") {\r\n        this.end = false;\r\n        this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n      }\r\n    } else if (changedProperties.has(\"end\")) {\r\n      if (this.end && this.start && this._startMode !== \"side\") {\r\n        this.start = false;\r\n        this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#initialize();\r\n\r\n    if (this.startMode === \"auto\" || this.endMode === \"auto\") {\r\n      this.#initBreakpointMonitoring();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#initialize();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"start\">\r\n        <m3e-focus-trap ?disabled=\"${!this.start || this._startMode === \"side\" || this.#disableStartFocusTrap}\">\r\n          <slot name=\"start\" @slotchange=\"${this.#handleStartSlotChange}\"></slot>\r\n        </m3e-focus-trap>\r\n      </div>\r\n      <div\r\n        class=\"content\"\r\n        .inert=\"${(this._startMode !== \"side\" || this._endMode !== \"side\") && (this.start || this.end)}\"\r\n      >\r\n        <slot></slot>\r\n      </div>\r\n      <div class=\"scrim\" @click=\"${this.#handleScrimClick}\"></div>\r\n      <div class=\"end\">\r\n        <m3e-focus-trap ?disabled=\"${!this.end || this._endMode === \"side\" || this.#disableEndFocusTrap}\">\r\n          <slot name=\"end\" @slotchange=\"${this.#handleEndSlotChange}\"></slot>\r\n        </m3e-focus-trap>\r\n      </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #initialize(): void {\r\n    let drawer = this.shadowRoot?.querySelector<HTMLElement>(\".start\");\r\n    if (drawer) this.#resizeController.observe(drawer);\r\n    drawer = this.shadowRoot?.querySelector(\".end\");\r\n    if (drawer) this.#resizeController.observe(drawer);\r\n  }\r\n\r\n  /** @private */\r\n  #handleScrimClick() {\r\n    if (this._startMode !== \"side\") {\r\n      this.start = false;\r\n    }\r\n    if (this._endMode !== \"side\") {\r\n      this.end = false;\r\n    }\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleStartSlotChange(e: Event): void {\r\n    this.#disableStartFocusTrap = !hasAssignedNodes(<HTMLSlotElement>e.target);\r\n  }\r\n\r\n  /** @private */\r\n  #handleEndSlotChange(e: Event): void {\r\n    this.#disableEndFocusTrap = !hasAssignedNodes(<HTMLSlotElement>e.target);\r\n  }\r\n\r\n  /** @private */\r\n  #handleDrawerResize(entries: ResizeObserverEntry[]): void {\r\n    for (const entry of entries) {\r\n      const borderSize: ResizeObserverSize = Array.isArray(entry.borderBoxSize)\r\n        ? entry.borderBoxSize[0]\r\n        : entry.borderBoxSize;\r\n\r\n      if (entry.target.classList.contains(\"start\")) {\r\n        this.style.setProperty(\"--_start-drawer-size\", `${borderSize.inlineSize}px`);\r\n      } else if (entry.target.classList.contains(\"end\")) {\r\n        this.style.setProperty(\"--_end-drawer-size\", `${borderSize.inlineSize}px`);\r\n      }\r\n    }\r\n\r\n    if (hasCustomState(this, \"--no-animate\")) {\r\n      // Force synchronous layout flush\r\n      void this.offsetTop;\r\n      deleteCustomState(this, \"--no-animate\");\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #initBreakpointMonitoring(): void {\r\n    this.#breakpointUnobserve = M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], (matches) =>\r\n      this.#updateMode(matches, true),\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #clearMode(): void {\r\n    deleteCustomState(this, \"--start-over\");\r\n    deleteCustomState(this, \"--start-push\");\r\n    deleteCustomState(this, \"--start-side\");\r\n    deleteCustomState(this, \"--end-over\");\r\n    deleteCustomState(this, \"--end-push\");\r\n    deleteCustomState(this, \"--end-side\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  #updateMode(breakpoints?: Map<string, boolean>, autoClose = false) {\r\n    let autoCloseStart = false,\r\n      autoCloseEnd = false;\r\n    if (this.startMode === \"auto\") {\r\n      if (breakpoints?.get(Breakpoint.Medium)) {\r\n        this._startMode = \"side\";\r\n      } else if (breakpoints?.get(Breakpoint.Small)) {\r\n        autoCloseStart = this._startMode === \"side\" && this.start;\r\n        this._startMode = \"push\";\r\n      } else if (breakpoints?.get(Breakpoint.XSmall)) {\r\n        autoCloseStart = this._startMode !== \"over\" && this.start;\r\n        this._startMode = \"over\";\r\n      } else {\r\n        this._startMode = \"side\";\r\n      }\r\n    } else {\r\n      this._startMode = this.startMode;\r\n    }\r\n\r\n    if (this.endMode === \"auto\") {\r\n      if (breakpoints?.get(Breakpoint.Medium)) {\r\n        this._endMode = \"side\";\r\n      } else if (breakpoints?.get(Breakpoint.Small)) {\r\n        autoCloseEnd = this._endMode === \"side\" && this.end;\r\n        this._endMode = \"push\";\r\n      } else if (breakpoints?.get(Breakpoint.XSmall)) {\r\n        autoCloseEnd = this._endMode !== \"over\" && this.end;\r\n        this._endMode = \"over\";\r\n      } else {\r\n        this._endMode = \"side\";\r\n      }\r\n    } else {\r\n      this._endMode = this.endMode;\r\n    }\r\n\r\n    this.#clearMode();\r\n\r\n    addCustomState(this, `--start-${this._startMode}`);\r\n    addCustomState(this, `--end-${this._endMode}`);\r\n\r\n    if (autoClose && (autoCloseStart || autoCloseEnd)) {\r\n      if (autoCloseStart) {\r\n        this.start = false;\r\n      }\r\n      if (autoCloseEnd) {\r\n        this.end = false;\r\n      }\r\n\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-drawer-container\": M3eDrawerContainerElement;\r\n  }\r\n}\r\n","import { LitElement } from \"lit\";\r\n\r\nimport { ActionElementBase, customElement, HtmlFor } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eDrawerContainerElement } from \"./DrawerContainerElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to toggle the opened state of a drawer.\r\n *\r\n * @example\r\n * The following example illustrates the use of a `m3e-drawer-toggle`, nested inside a `m3e-icon-button` component,\r\n * which toggles the open state of the start drawer.\r\n *\r\n * ```html\r\n * <m3e-icon-button slot=\"leading-icon\" aria-label=\"Menu\" toggle selected>\r\n *   <m3e-drawer-toggle for=\"startDrawer\"></m3e-drawer-toggle>\r\n *   <m3e-icon name=\"menu\"></m3e-icon>\r\n *   <m3e-icon slot=\"selected\" name=\"menu_open\"></m3e-icon>\r\n * </m3e-icon-button>\r\n *\r\n * <m3e-drawer-container start>\r\n *   <nav slot=\"start\" id=\"startDrawer\" aria-label=\"Navigation\">\r\n *     <!-- Start drawer content -->\r\n *   </nav>\r\n *   <!-- Container content -->\r\n * </m3e-drawer-container>\r\n * ```\r\n *\r\n * @tag m3e-drawer-toggle\r\n */\r\n@customElement(\"m3e-drawer-toggle\")\r\nexport class M3eDrawerToggleElement extends HtmlFor(ActionElementBase) {\r\n  /** @private */ readonly #drawerContainerChangeHandler = () => this.#handleDrawerContainerChange();\r\n  /** @private */ #togglingDrawer = false;\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    if (this.htmlFor && this.parentElement) {\r\n      addAriaReferencedId(this.parentElement, \"aria-controls\", this.htmlFor);\r\n    }\r\n\r\n    const container = control.closest(\"m3e-drawer-container\");\r\n    if (container) {\r\n      container.addEventListener(\"change\", this.#drawerContainerChangeHandler);\r\n      this.#updateToggle(container, true);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.parentElement) {\r\n      if (this.htmlFor) {\r\n        removeAriaReferencedId(this.parentElement, \"aria-controls\", this.htmlFor);\r\n      }\r\n\r\n      this.parentElement.ariaExpanded = null;\r\n    }\r\n\r\n    this.control?.closest(\"m3e-drawer-container\")?.removeEventListener(\"change\", this.#drawerContainerChangeHandler);\r\n\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    this.#toggleDrawer();\r\n  }\r\n\r\n  /** @private */\r\n  #handleDrawerContainerChange(): void {\r\n    if (this.control && !this.#togglingDrawer) {\r\n      const container = this.control.closest(\"m3e-drawer-container\");\r\n      if (container) {\r\n        this.#updateToggle(container, true);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  async #toggleDrawer(): Promise<void> {\r\n    if (!this.parentElement || !this.control) {\r\n      return;\r\n    }\r\n\r\n    const container = this.control.closest(\"m3e-drawer-container\");\r\n    if (container) {\r\n      this.#togglingDrawer = true;\r\n      try {\r\n        if (this.control.slot === \"start\") {\r\n          container.start = !container.start;\r\n        } else if (this.control.slot === \"end\") {\r\n          container.end = !container.end;\r\n        }\r\n        if (container.isUpdatePending) {\r\n          await container.updateComplete;\r\n        }\r\n        await this.#updateToggle(container, false);\r\n      } finally {\r\n        this.#togglingDrawer = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  async #updateToggle(container: M3eDrawerContainerElement, syncToggle: boolean): Promise<void> {\r\n    if (!this.parentElement || !this.control) {\r\n      return;\r\n    }\r\n\r\n    let selected = false;\r\n    if (this.control.slot === \"start\") {\r\n      selected = container.start;\r\n    } else if (this.control.slot === \"end\") {\r\n      selected = container.end;\r\n    }\r\n\r\n    this.parentElement.ariaExpanded = `${selected}`;\r\n\r\n    if (syncToggle && this.parentElement.hasAttribute(\"toggle\")) {\r\n      this.parentElement.toggleAttribute(\"selected\", selected);\r\n    }\r\n\r\n    if (this.parentElement instanceof LitElement) {\r\n      // Wait for update and remove aria-pressed due to use of aria-expanded.\r\n      await (this.parentElement as LitElement).updateComplete;\r\n      this.parentElement.ariaPressed = null;\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-drawer-toggle\": M3eDrawerToggleElement;\r\n  }\r\n}\r\n"],"names":["DrawerContainerToken","unsafeCSS","DesignToken","color","surface","elevation","level0","shape","corner","large","surfaceContainerLow","level1","outline","DrawerContainerStyle","css","scrollbar","thinWidth","motion","duration","medium4","easing","standard","scrim","M3eDrawerContainerElement","ReconnectedCallback","AttachInternals","LitElement","constructor","this","_startMode","_endMode","_M3eDrawerContainerElement_breakpointUnobserve","set","_M3eDrawerContainerElement_disableStartFocusTrap","_M3eDrawerContainerElement_disableEndFocusTrap","_M3eDrawerContainerElement_resizeController","ResizeController","target","skipInitial","callback","entries","__classPrivateFieldGet","_M3eDrawerContainerElement_instances","_M3eDrawerContainerElement_handleDrawerResize","call","start","startMode","startDivider","end","endMode","endDivider","connectedCallback","super","addCustomState","disconnectedCallback","_M3eDrawerContainerElement_clearMode","willUpdate","changedProperties","has","_M3eDrawerContainerElement_initBreakpointMonitoring","_M3eDrawerContainerElement_updateMode","dispatchEvent","Event","bubbles","reconnectedCallback","_M3eDrawerContainerElement_initialize","firstUpdated","_changedProperties","render","html","_M3eDrawerContainerElement_handleStartSlotChange","_M3eDrawerContainerElement_handleScrimClick","_M3eDrawerContainerElement_handleEndSlotChange","drawer","shadowRoot","querySelector","observe","e","__classPrivateFieldSet","hasAssignedNodes","entry","borderSize","Array","isArray","borderBoxSize","classList","contains","style","setProperty","inlineSize","hasCustomState","offsetTop","deleteCustomState","M3eBreakpointObserver","Breakpoint","XSmall","Small","matches","breakpoints","autoClose","autoCloseStart","autoCloseEnd","get","Medium","styles","__decorate","state","prototype","property","type","Boolean","reflect","attribute","customElement","M3eDrawerToggleElement","HtmlFor","ActionElementBase","_M3eDrawerToggleElement_drawerContainerChangeHandler","_M3eDrawerToggleElement_instances","_M3eDrawerToggleElement_handleDrawerContainerChange","_M3eDrawerToggleElement_togglingDrawer","attach","control","htmlFor","parentElement","addAriaReferencedId","container","closest","addEventListener","detach","removeAriaReferencedId","ariaExpanded","removeEventListener","_onClick","_M3eDrawerToggleElement_toggleDrawer","async","slot","isUpdatePending","updateComplete","_M3eDrawerToggleElement_updateToggle","syncToggle","selected","hasAttribute","toggleAttribute","ariaPressed"],"mappings":"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"}

package/dist/expansion-panel.js

@@ -6,7 +6,7 @@
 import { __decorate, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
 import { css, LitElement, html, unsafeCSS, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import { DesignToken, customElement, KeyboardClick, Focusable, Disabled, AttachInternals, Role, EventAttribute, ReconnectedCallback, setCustomState, hasAssignedNodes } from '@m3e/web/core';
+import { DesignToken, customElement, KeyboardClick, Focusable, Disabled, AttachInternals, Role, ReconnectedCallback, setCustomState, hasAssignedNodes } from '@m3e/web/core';
 import { M3eDirectionality } from '@m3e/web/core/bidi';
 
 var _M3eAccordionElement_instances, _M3eAccordionElement_panels, _M3eAccordionElement_handleSlotChange, _M3eAccordionElement_handleOpening;
@@ -142,7 +142,7 @@ const ExpansionPanelToken = {
  * @internal
  */
 const ExpansionPanelStyle = css`:host { display: block; } .base { background-color: ${ExpansionPanelToken.containerColor}; transition: ${unsafeCSS(`box-shadow var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
-        ${DesignToken.motion.easing.standard}`)}; } :host(:not(:disabled)) .base { color: ${ExpansionPanelToken.textColor}; } :host(:disabled) .base { color: color-mix( in srgb, ${ExpansionPanelToken.disabledTextColor} ${ExpansionPanelToken.disabledTextOpacity}, transparent ); } :host(:not([open])) .base { box-shadow: ${ExpansionPanelToken.collapsedElevation}; border-radius: ${ExpansionPanelToken.collapsedShape}; } :host([open]) .base { box-shadow: ${ExpansionPanelToken.expandedElevation}; border-radius: ${ExpansionPanelToken.expandedShape}; margin-block: ${ExpansionPanelToken.expandedSpace}; } .toggle { display: flex; align-items: center; justify-content: center; font-size: ${ExpansionHeaderToken.toggleIconSize}; } ::slotted([slot="toggle-icon"]) { font-size: inherit !important; flex: none; } .toggle svg, ::slotted(svg[slot="toggle-icon"]) { width: 1em; height: 1em; } .content { padding: ${ExpansionPanelToken.contentPadding}; } :host(:not(:state(-with-actions))) .actions { display: none; } .actions { padding: ${ExpansionPanelToken.actionsPadding}; border-top-style: solid; border-top-width: ${ExpansionPanelToken.actionsDividerThickness}; border-top-color: ${ExpansionPanelToken.actionsDividerColor}; } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; column-gap: ${ExpansionPanelToken.actionsSpacing}; } ::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; } }`;
+        ${DesignToken.motion.easing.standard}`)}; } :host(:not(:disabled)) .base { color: ${ExpansionPanelToken.textColor}; } :host(:disabled) .base { color: color-mix( in srgb, ${ExpansionPanelToken.disabledTextColor} ${ExpansionPanelToken.disabledTextOpacity}, transparent ); } :host(:not([open])) .base { box-shadow: ${ExpansionPanelToken.collapsedElevation}; border-radius: ${ExpansionPanelToken.collapsedShape}; } :host([open]) .base { box-shadow: ${ExpansionPanelToken.expandedElevation}; border-radius: ${ExpansionPanelToken.expandedShape}; margin-block: ${ExpansionPanelToken.expandedSpace}; } .toggle { display: flex; align-items: center; justify-content: center; font-size: ${ExpansionHeaderToken.toggleIconSize}; } ::slotted([slot="toggle-icon"]) { font-size: inherit !important; flex: none; } .toggle svg, ::slotted(svg[slot="toggle-icon"]) { width: 1em; height: 1em; } .content { padding: ${ExpansionPanelToken.contentPadding}; } :host(:not(:is(:state(--with-actions), :--with-actions))) .actions { display: none; } .actions { padding: ${ExpansionPanelToken.actionsPadding}; border-top-style: solid; border-top-width: ${ExpansionPanelToken.actionsDividerThickness}; border-top-color: ${ExpansionPanelToken.actionsDividerColor}; } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; column-gap: ${ExpansionPanelToken.actionsSpacing}; } ::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 _M3eExpansionHeaderElement_instances, _M3eExpansionHeaderElement_renderToggle;
 /**
@@ -294,7 +294,7 @@ var M3eExpansionPanelElement_1;
  * @cssprop --m3e-expansion-panel-actions-divider-thickness - Thickness of the divider above actions.
  * @cssprop --m3e-expansion-panel-actions-divider-color - Color of the divider above actions.
  */
-let M3eExpansionPanelElement = M3eExpansionPanelElement_1 = class M3eExpansionPanelElement extends EventAttribute(Disabled(ReconnectedCallback(AttachInternals(LitElement, true))), "opening", "opened", "closing", "closed") {
+let M3eExpansionPanelElement = M3eExpansionPanelElement_1 = class M3eExpansionPanelElement extends Disabled(ReconnectedCallback(AttachInternals(LitElement, true))) {
   constructor() {
     super(...arguments);
     _M3eExpansionPanelElement_instances.add(this);
@@ -414,7 +414,7 @@ _M3eExpansionPanelElement_handleCollapsibleEvent = function _M3eExpansionPanelEl
   }));
 };
 _M3eExpansionPanelElement_handleActionsSlotChange = function _M3eExpansionPanelElement_handleActionsSlotChange(e) {
-  setCustomState(this, "-with-actions", hasAssignedNodes(e.target));
+  setCustomState(this, "--with-actions", hasAssignedNodes(e.target));
 };
 _M3eExpansionPanelElement_updateHeaderToggleRotation = function _M3eExpansionPanelElement_updateHeaderToggleRotation() {
   if (M3eDirectionality.current === "rtl") {

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":"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"}
+{"version":3,"file":"expansion-panel.js","sources":["../../src/expansion-panel/AccordionElement.ts","../../src/expansion-panel/styles/ExpansionHeaderToken.ts","../../src/expansion-panel/styles/ExpansionHeaderStyle.ts","../../src/expansion-panel/styles/ExpansionPanelToken.ts","../../src/expansion-panel/styles/ExpansionPanelStyle.ts","../../src/expansion-panel/ExpansionHeaderElement.ts","../../src/expansion-panel/ExpansionPanelElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { M3eExpansionPanelElement } from \"./ExpansionPanelElement\";\r\n\r\n/**\r\n * Combines multiple expansion panels in to an accordion.\r\n *\r\n * @description\r\n * The `m3e-accordion` component organizes multiple expansion panels into a coordinated, accessible group.\r\n * It supports single or multiple open panels via the `multi` attribute, and provides expressive theming\r\n * and shape control for grouped layouts. The accordion manages open/close state across its child panels,\r\n * enabling interactive disclosure patterns for complex content.\r\n *\r\n * @example\r\n * The following example illustrates the basic use of the `m3e-accordion` and `m3e-expansion-panel` components.\r\n *\r\n * ```html\r\n * <m3e-accordion>\r\n *   <m3e-expansion-panel>\r\n *     <span slot=\"header\">Panel 1</span>\r\n *     I am content for the first expansion panel\r\n *   </m3e-expansion-panel>\r\n *   <m3e-expansion-panel>\r\n *     <span slot=\"header\">Panel 2</span>\r\n *     I am content for the second expansion panel\r\n *   </m3e-expansion-panel>\r\n * </m3e-accordion>\r\n * ```\r\n *\r\n * @tag m3e-accordion\r\n *\r\n * @slot - Renders the panels of the accordion.\r\n *\r\n * @attr multi - Whether multiple expansion panels can be open at the same time.\r\n */\r\n@customElement(\"m3e-accordion\")\r\nexport class M3eAccordionElement extends LitElement {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n    ::slotted(m3e-expansion-panel) {\r\n      --m3e-expansion-panel-container-color: ${DesignToken.color.surface};\r\n      --m3e-expansion-panel-elevation: ${DesignToken.elevation.level2};\r\n      --m3e-expansion-panel-open-shape: ${DesignToken.shape.corner.medium};\r\n      --_expansion-panel-open-spacing: 1rem;\r\n    }\r\n    ::slotted(m3e-expansion-panel:first-of-type:last-of-type) {\r\n      --m3e-expansion-panel-shape: ${DesignToken.shape.corner.medium};\r\n    }\r\n    ::slotted(m3e-expansion-panel:first-of-type:not(:last-of-type)) {\r\n      --m3e-expansion-panel-shape: ${DesignToken.shape.corner.value.medium} ${DesignToken.shape.corner.value.medium}\r\n        ${DesignToken.shape.corner.value.none} ${DesignToken.shape.corner.value.none};\r\n    }\r\n    ::slotted(m3e-expansion-panel:last-of-type:not(:first-of-type)) {\r\n      --m3e-expansion-panel-shape: ${DesignToken.shape.corner.value.none} ${DesignToken.shape.corner.value.none}\r\n        ${DesignToken.shape.corner.value.medium} ${DesignToken.shape.corner.value.medium};\r\n    }\r\n  `;\r\n\r\n  /** @private */ #panels: Array<M3eExpansionPanelElement> = [];\r\n\r\n  /**\r\n   * Whether multiple expansion panels can be open at the same time.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) multi = false;\r\n\r\n  /** The panels of the accordion. */\r\n  get panels() {\r\n    return this.#panels;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot @slotchange=\"${this.#handleSlotChange}\" @opening=\"${this.#handleOpening}\"></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange() {\r\n    this.#panels = [...this.querySelectorAll(\"m3e-expansion-panel\")];\r\n\r\n    if (this.multi) {\r\n      return;\r\n    }\r\n\r\n    let alreadyOpen = false;\r\n    for (const panel of this.#panels.filter((x) => !x.open)) {\r\n      if (alreadyOpen) {\r\n        panel.open = false;\r\n      }\r\n      alreadyOpen = true;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleOpening(e: Event): void {\r\n    if (!this.multi) {\r\n      for (const panel of this.#panels.filter((x) => x !== e.target && x.open)) {\r\n        panel.open = false;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-accordion\": M3eAccordionElement;\r\n  }\r\n}\r\n","import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens for `M3eExpansionHeaderElement`.\r\n * @internal\r\n */\r\nexport const ExpansionHeaderToken = {\r\n  collapsedHeight: unsafeCSS(\"var(--m3e-expansion-header-collapsed-height, 3rem)\"),\r\n  expandedHeight: unsafeCSS(\"var(--m3e-expansion-header-expanded-height, 4rem)\"),\r\n  paddingLeft: unsafeCSS(\"var(--m3e-expansion-header-padding-left, 1.5rem)\"),\r\n  paddingRight: unsafeCSS(\"var(--m3e-expansion-header-padding-right, 1.5rem)\"),\r\n  spacing: unsafeCSS(\"var(--m3e-expansion-header-spacing, 0.5rem)\"),\r\n  toggleIconSize: unsafeCSS(\"var(--m3e-expansion-header-toggle-icon-size, 1.5rem)\"),\r\n  fontSize: unsafeCSS(`var(--m3e-expansion-header-font-size, ${DesignToken.typescale.standard.title.medium.fontSize})`),\r\n  fontWeight: unsafeCSS(\r\n    `var(--m3e-expansion-header-font-weight, ${DesignToken.typescale.standard.title.medium.fontWeight})`,\r\n  ),\r\n  lineHeight: unsafeCSS(\r\n    `var(--m3e-expansion-header-line-height, ${DesignToken.typescale.standard.title.medium.lineHeight})`,\r\n  ),\r\n  tracking: unsafeCSS(`var(--m3e-expansion-header-tracking, ${DesignToken.typescale.standard.title.medium.tracking})`),\r\n} as const;\r\n","import { css, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { ExpansionHeaderToken } from \"./ExpansionHeaderToken\";\r\n\r\n/**\r\n * Styles for `M3eExpansionHeaderElement`.\r\n * @internal\r\n */\r\nexport const ExpansionHeaderStyle = css`\r\n  :host {\r\n    display: block;\r\n    border-radius: inherit;\r\n    outline: none;\r\n    user-select: none;\r\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    transition: ${unsafeCSS(`height var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})\r\n        ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  .base {\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    border-radius: inherit;\r\n    outline: none;\r\n    position: relative;\r\n    padding-inline-start: ${ExpansionHeaderToken.paddingLeft};\r\n    padding-inline-end: ${ExpansionHeaderToken.paddingRight};\r\n    font-size: ${ExpansionHeaderToken.fontSize};\r\n    font-weight: ${ExpansionHeaderToken.fontWeight};\r\n    line-height: ${ExpansionHeaderToken.lineHeight};\r\n    letter-spacing: ${ExpansionHeaderToken.tracking};\r\n    column-gap: ${ExpansionHeaderToken.spacing};\r\n  }\r\n  :host(:not(:disabled)) {\r\n    cursor: pointer;\r\n  }\r\n  :host(:not([aria-expanded=\"true\"])) {\r\n    height: ${ExpansionHeaderToken.collapsedHeight};\r\n  }\r\n  :host([aria-expanded=\"true\"]) {\r\n    height: ${ExpansionHeaderToken.expandedHeight};\r\n  }\r\n  :host(:not(:focus-visible)) .state-layer {\r\n    --m3e-state-layer-focus-color: transparent;\r\n  }\r\n  :host([aria-expanded=\"true\"]) .state-layer {\r\n    --m3e-state-layer-hover-color: transparent;\r\n  }\r\n  :host([aria-expanded=\"true\"]) [part=\"background\"],\r\n  .content {\r\n    flex: 1 1 auto;\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  .toggle {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    vertical-align: middle;\r\n    font-size: ${ExpansionHeaderToken.toggleIconSize};\r\n    transition: ${unsafeCSS(`transform var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})\r\n        ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  :host([toggle-direction=\"vertical\"][aria-expanded=\"true\"]) .toggle {\r\n    transform: rotate(180deg);\r\n  }\r\n  :host([toggle-direction=\"horizontal\"][aria-expanded=\"true\"]) .toggle {\r\n    transform: rotate(var(--_expansion-header-horizontal-expanded-toggle-rotation, 90deg));\r\n  }\r\n  :host([toggle-position=\"before\"]) .toggle {\r\n    margin-inline-start: calc(0px - ${ExpansionHeaderToken.spacing});\r\n  }\r\n  :host([toggle-position=\"after\"]) .toggle {\r\n    margin-inline-end: calc(0px - ${ExpansionHeaderToken.spacing});\r\n  }\r\n  :host([hide-toggle]) .toggle {\r\n    display: none;\r\n  }\r\n  ::slotted([slot=\"toggle-icon\"]) {\r\n    font-size: inherit !important;\r\n    flex: none;\r\n  }\r\n  ::slotted(svg[slot=\"toggle-icon\"]) {\r\n    width: 1em;\r\n    height: 1em;\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    :host,\r\n    .toggle {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens for `M3eExpansionPanelElement`.\r\n * @internal\r\n */\r\nexport const ExpansionPanelToken = {\r\n  textColor: unsafeCSS(`var(--m3e-expansion-panel-text-color, ${DesignToken.color.onSurface})`),\r\n  disabledTextColor: unsafeCSS(`var(--m3e-expansion-panel-disabled-text-color, ${DesignToken.color.onSurface})`),\r\n  disabledTextOpacity: unsafeCSS(`var(--m3e-expansion-panel-disabled-text-opacity, 38%)`),\r\n  containerColor: unsafeCSS(\"var(--m3e-expansion-panel-container-color)\"),\r\n  collapsedElevation: unsafeCSS(\"var(--m3e-expansion-panel-elevation)\"),\r\n  collapsedShape: unsafeCSS(\"var(--m3e-expansion-panel-shape)\"),\r\n  expandedElevation: unsafeCSS(\"var(--m3e-expansion-panel-open-elevation, var(--m3e-expansion-panel-elevation))\"),\r\n  expandedShape: unsafeCSS(\"var(--m3e-expansion-panel-open-shape, var(--m3e-expansion-panel-shape))\"),\r\n  expandedSpace: unsafeCSS(\"var(--_expansion-panel-open-spacing)\"),\r\n  contentPadding: unsafeCSS(\"var(--m3e-expansion-panel-content-padding, 0 1.5rem 1rem 1.5rem)\"),\r\n  actionsSpacing: unsafeCSS(\"var(--m3e-expansion-panel-actions-spacing, 0.5rem)\"),\r\n  actionsPadding: unsafeCSS(\"var(--m3e-expansion-panel-actions-padding, 1rem 1.5rem 1rem 1.5rem)\"),\r\n  actionsDividerThickness: unsafeCSS(\r\n    \"var(--m3e-expansion-panel-actions-divider-thickness, var(--m3e-divider-thickness, 1px))\",\r\n  ),\r\n  actionsDividerColor: unsafeCSS(\r\n    `var(--m3e-expansion-panel-actions-divider-color, var(--m3e-divider-color, ${DesignToken.color.outlineVariant}))`,\r\n  ),\r\n} as const;\r\n","import { css, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { ExpansionPanelToken } from \"./ExpansionPanelToken\";\r\nimport { ExpansionHeaderToken } from \"./ExpansionHeaderToken\";\r\n\r\n/**\r\n * Styles for `M3eExpansionPanelElement`.\r\n * @internal\r\n */\r\nexport const ExpansionPanelStyle = css`\r\n  :host {\r\n    display: block;\r\n  }\r\n  .base {\r\n    background-color: ${ExpansionPanelToken.containerColor};\r\n    transition: ${unsafeCSS(`box-shadow var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})\r\n        ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  :host(:not(:disabled)) .base {\r\n    color: ${ExpansionPanelToken.textColor};\r\n  }\r\n  :host(:disabled) .base {\r\n    color: color-mix(\r\n      in srgb,\r\n      ${ExpansionPanelToken.disabledTextColor} ${ExpansionPanelToken.disabledTextOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host(:not([open])) .base {\r\n    box-shadow: ${ExpansionPanelToken.collapsedElevation};\r\n    border-radius: ${ExpansionPanelToken.collapsedShape};\r\n  }\r\n  :host([open]) .base {\r\n    box-shadow: ${ExpansionPanelToken.expandedElevation};\r\n    border-radius: ${ExpansionPanelToken.expandedShape};\r\n    margin-block: ${ExpansionPanelToken.expandedSpace};\r\n  }\r\n  .toggle {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: ${ExpansionHeaderToken.toggleIconSize};\r\n  }\r\n  ::slotted([slot=\"toggle-icon\"]) {\r\n    font-size: inherit !important;\r\n    flex: none;\r\n  }\r\n  .toggle svg,\r\n  ::slotted(svg[slot=\"toggle-icon\"]) {\r\n    width: 1em;\r\n    height: 1em;\r\n  }\r\n  .content {\r\n    padding: ${ExpansionPanelToken.contentPadding};\r\n  }\r\n  :host(:not(:is(:state(--with-actions), :--with-actions))) .actions {\r\n    display: none;\r\n  }\r\n  .actions {\r\n    padding: ${ExpansionPanelToken.actionsPadding};\r\n    border-top-style: solid;\r\n    border-top-width: ${ExpansionPanelToken.actionsDividerThickness};\r\n    border-top-color: ${ExpansionPanelToken.actionsDividerColor};\r\n  }\r\n  ::slotted([slot=\"actions\"]) {\r\n    flex: none;\r\n    display: flex;\r\n    align-items: center;\r\n    column-gap: ${ExpansionPanelToken.actionsSpacing};\r\n  }\r\n  ::slotted([slot=\"actions\"][end]) {\r\n    justify-content: flex-end;\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .base {\r\n      transition: none;\r\n    }\r\n  }\r\n  @media (forced-colors: active) {\r\n    .base {\r\n      border: 1px solid CanvasText;\r\n    }\r\n    :host(:disabled) .base {\r\n      color: GrayText;\r\n    }\r\n    .actions {\r\n      border-top-color: GrayText;\r\n    }\r\n  }\r\n`;\r\n","import { CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  Disabled,\r\n  Focusable,\r\n  KeyboardClick,\r\n  M3eFocusRingElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { ExpansionTogglePosition } from \"./ExpansionTogglePosition\";\r\nimport { ExpansionToggleDirection } from \"./ExpansionToggleDirection\";\r\n\r\nimport { ExpansionHeaderStyle } from \"./styles\";\r\n\r\n/**\r\n * A button used to toggle the expanded state of an expansion panel.\r\n *\r\n * @tag m3e-expansion-header\r\n *\r\n * @slot - Renders the content of the header.\r\n * @slot toggle-icon - Renders the icon of the expansion toggle.\r\n *\r\n * @attr hide-toggle - Whether to hide the expansion toggle.\r\n * @attr toggle-direction - The direction of the expansion toggle.\r\n * @attr toggle-position - The position of the expansion toggle.\r\n *\r\n * @fires click - 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,w,k,_;let z=class extends n{constructor(){super(...arguments),y.add(this),w.set(this,[]),this.multi=!1}get panels(){return t(this,w,"f")}render(){return a`<slot @slotchange="${t(this,y,"m",k)}" @opening="${t(this,y,"m",_)}"></slot>`}};w=new WeakMap,y=new WeakSet,k=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},_=function(e){if(!this.multi)for(const o of t(this,w,"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(:is(:state(--with-actions), :--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