@m3e/web 2.5.5 → 2.5.6

package/dist/drawer-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-container.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","containerColor","unsafeCSS","DesignToken","color","surface","containerElevation","elevation","level0","containerWidth","scrimOpacity","cornerShape","shape","corner","large","modalContainerColor","surfaceContainerLow","modalContainerElevation","level1","dividerColor","outline","dividerThickness","DrawerContainerStyle","css","scrollbar","thinWidth","motion","duration","medium4","easing","standard","scrim","M3eDrawerContainerElement","ReconnectedCallback","AttachInternals","LitElement","constructor","_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","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","slot","isUpdatePending","updateComplete","_M3eDrawerToggleElement_updateToggle","syncToggle","selected","hasAttribute","toggleAttribute","ariaPressed"],"mappings":";;;;;;;;;;;;AAIA;;;AAGG;AACI,MAAMA,oBAAoB,GAAG;EAClCC,cAAc,EAAEC,SAAS,CAAC,CAAA,kCAAA,EAAqCC,WAAW,CAACC,KAAK,CAACC,OAAO,CAAA,CAAA,CAAG,CAAC;EAC5FC,kBAAkB,EAAEJ,SAAS,CAAC,CAAA,sCAAA,EAAyCC,WAAW,CAACI,SAAS,CAACC,MAAM,CAAA,CAAA,CAAG,CAAC;AACvGC,EAAAA,cAAc,EAAEP,SAAS,CAAC,CAAA,0CAAA,CAA4C,CAAC;AACvEQ,EAAAA,YAAY,EAAER,SAAS,CAAC,gDAAgD,CAAC;AACzES,EAAAA,WAAW,EAAET,SAAS,CAAC,CAAA,qCAAA,EAAwCC,WAAW,CAACS,KAAK,CAACC,MAAM,CAACC,KAAK,CAAA,CAAA,CAAG,CAAC;EACjGC,mBAAmB,EAAEb,SAAS,CAAC,CAAA,wCAAA,EAA2CC,WAAW,CAACC,KAAK,CAACY,mBAAmB,CAAA,CAAA,CAAG,CAAC;EACnHC,uBAAuB,EAAEf,SAAS,CAAC,CAAA,kCAAA,EAAqCC,WAAW,CAACI,SAAS,CAACW,MAAM,CAAA,CAAA,CAAG,CAAC;EACxGC,YAAY,EAAEjB,SAAS,CAAC,CAAA,gCAAA,EAAmCC,WAAW,CAACC,KAAK,CAACgB,OAAO,CAAA,CAAA,CAAG,CAAC;EACxFC,gBAAgB,EAAEnB,SAAS,CAAC,0CAA0C;CAC9D;;ACZV;;;AAGG;AACI,MAAMoB,oBAAoB,GAAmBC,GAAG,CAAA,wNAAA,EAgBhCpB,WAAW,CAACqB,SAAS,CAACC,SAAS,CAAA,mBAAA,EAC/BtB,WAAW,CAACqB,SAAS,CAACpB,KAAK,CAAA,4CAAA,EAE1BJ,oBAAoB,CAACC,cAAc,CAAA,cAAA,EACzCD,oBAAoB,CAACM,kBAAkB,CAAA,cAAA,EACvCJ,SAAS,CACrB,CAAA,OAAA,EAAUC,WAAW,CAACuB,MAAM,CAACC,QAAQ,CAACC,OAAO,IAAIzB,WAAW,CAACuB,MAAM,CAACG,MAAM,CAACC,QAAQ,CAAA;AACtE,iBAAA,EAAA3B,WAAW,CAACuB,MAAM,CAACC,QAAQ,CAACC,OAAO,CAAA,CAAA,EAAIzB,WAAW,CAACuB,MAAM,CAACG,MAAM,CAACC,QAAQ,CAAA;AACnE,uBAAA,EAAA3B,WAAW,CAACuB,MAAM,CAACC,QAAQ,CAACC,OAAO,CAAA,CAAA,EAAIzB,WAAW,CAACuB,MAAM,CAACG,MAAM,CAACC,QAAQ,CAAA;AAC/E,iBAAA,EAAA3B,WAAW,CAACuB,MAAM,CAACC,QAAQ,CAACC,OAAO,IAAIzB,WAAW,CAACuB,MAAM,CAACG,MAAM,CAACC,QAAQ,CAAA,CAAE,CACzF,CAAA,uNAAA,EAYmD9B,oBAAoB,CAACS,cAAc,CAAA,gGAAA,EAGlCT,oBAAoB,CAACS,cAAc,CAAA,6PAAA,EAYrCT,oBAAoB,CAACS,cAAc,4FAGpCT,oBAAoB,CAACS,cAAc,CAAA,qLAAA,EAW5ET,oBAAoB,CAACS,cAAc,CAAA,sIAAA,EAS9BP,SAAS,CAAC,CAAA,OAAA,EAAUC,WAAW,CAACuB,MAAM,CAACC,QAAQ,CAACC,OAAO,CAAA,CAAA,EAAIzB,WAAW,CAACuB,MAAM,CAACG,MAAM,CAACC,QAAQ,CAAA,CAAE,CAAC,+MAIrE9B,oBAAoB,CAACS,cAAc,CAAA,kMAAA,EAIlCT,oBAAoB,CAACS,cAAc,CAAA,gMAAA,EAIrCT,oBAAoB,CAACS,cAAc,CAAA,mLAAA,EAIpCT,oBAAoB,CAACS,cAAc,yHAUtDN,WAAW,CAACC,KAAK,CAAC2B,KAAK,iDAG7B7B,SAAS,CACrB,CAAA,QAAA,EAAWC,WAAW,CAACuB,MAAM,CAACC,QAAQ,CAACC,OAAO,CAAA,CAAA,EAAIzB,WAAW,CAACuB,MAAM,CAACG,MAAM,CAACC,QAAQ,CAAA;AACrE,mBAAA,EAAA3B,WAAW,CAACuB,MAAM,CAACC,QAAQ,CAACC,OAAO,CAAA,CAAA,EAAIzB,WAAW,CAACuB,MAAM,CAACG,MAAM,CAACC,QAAQ,iBAAiB,CAC1G,CAAA,8TAAA,EAYU9B,oBAAoB,CAACU,YAAY,CAAA,8IAAA,EAIjBV,oBAAoB,CAACW,WAAW,4BAClCX,oBAAoB,CAACW,WAAW,CAAA,oIAAA,EAI5BX,oBAAoB,CAACW,WAAW,8BAClCX,oBAAoB,CAACW,WAAW,CAAA,2OAAA,EAMvCX,oBAAoB,CAACe,mBAAmB,iBAC9Cf,oBAAoB,CAACiB,uBAAuB,CAAA,mGAAA,EAI/BjB,oBAAoB,CAACqB,gBAAgB,CAAA,sQAAA,EAUrCrB,oBAAoB,CAACmB,YAAY,CAAA,mGAAA,EAI/BnB,oBAAoB,CAACqB,gBAAgB,+QAUrCrB,oBAAoB,CAACmB,YAAY,CAAA,0SAAA,EAY9CjB,SAAS,CACrB,CAAA,OAAA,EAAUC,WAAW,CAACuB,MAAM,CAACC,QAAQ,CAACC,OAAO,IAAIzB,WAAW,CAACuB,MAAM,CAACG,MAAM,CAACC,QAAQ,CAAA;AACxE,iBAAA,EAAA3B,WAAW,CAACuB,MAAM,CAACC,QAAQ,CAACC,OAAO,CAAA,CAAA,EAAIzB,WAAW,CAACuB,MAAM,CAACG,MAAM,CAACC,QAAQ,CAAA,eAAA,CAAiB,CACtG,CAAA,+8BAAA,CA+CN;;;ACxND;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDG;AAEI,IAAME,yBAAyB,GAA/B,MAAMA,yBAA0B,SAAQC,mBAAmB,CAACC,eAAe,CAACC,UAAU,CAAC,CAAC,CAAA;AAAxFC,EAAAA,WAAAA,GAAA;;;AAIL;IAAiC,IAAA,CAAAC,UAAU,GAAgC,MAAM;AACjF;IAAiC,IAAA,CAAAC,QAAQ,GAAgC,MAAM;AAC/E;AAAgBC,IAAAA,8CAAA,CAAAC,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;AAChB;AAAgBC,IAAAA,gDAAA,CAAAD,GAAA,CAAA,IAAA,EAAyB,KAAK,CAAA;AAC9C;AAAgBE,IAAAA,8CAAA,CAAAF,GAAA,CAAA,IAAA,EAAuB,KAAK,CAAA;AAE5C;IACAG,2CAAA,CAAAH,GAAA,CAAA,IAAA,EAAoB,IAAII,gBAAgB,CAAC,IAAI,EAAE;AAC7CC,MAAAA,MAAM,EAAE,IAAI;AACZC,MAAAA,WAAW,EAAE,IAAI;AACjBC,MAAAA,QAAQ,EAAGC,OAAO,IAAKC,sBAAA,CAAA,IAAI,EAAAC,oCAAA,EAAA,GAAA,EAAAC,6CAAA,CAAoB,CAAAC,IAAA,CAAxB,IAAI,EAAqBJ,OAAO;AACxD,KAAA,CAAC,CAAA;AAEF;;;AAGG;IACyC,IAAA,CAAAK,KAAK,GAAG,KAAK;AAEzD;;;AAGG;IACmD,IAAA,CAAAC,SAAS,GAAe,MAAM;AAEpF;;;AAGG;IACqE,IAAA,CAAAC,YAAY,GAAG,KAAK;AAE5F;;;AAGG;IACyC,IAAA,CAAAC,GAAG,GAAG,KAAK;AAEvD;;;AAGG;IACiD,IAAA,CAAAC,OAAO,GAAe,MAAM;AAEhF;;;AAGG;IACmE,IAAA,CAAAC,UAAU,GAAG,KAAK;AAuM1F,EAAA;AArME;AACSC,EAAAA,iBAAiBA,GAAA;IACxB,KAAK,CAACA,iBAAiB,EAAE;AACzBC,IAAAA,cAAc,CAAC,IAAI,EAAE,cAAc,CAAC;AACtC,EAAA;AAEA;AACSC,EAAAA,oBAAoBA,GAAA;IAC3B,KAAK,CAACA,oBAAoB,EAAE;IAE5BZ,sBAAA,CAAA,IAAI,EAAAV,8CAAA,EAAA,GAAA,CAAqB,EAAEa,IAAA,CAA3B,IAAI,CAAyB;AAC7BH,IAAAA,sBAAA,CAAA,IAAI,EAAAC,oCAAA,EAAA,GAAA,EAAAY,oCAAA,CAAW,CAAAV,IAAA,CAAf,IAAI,CAAa;AACnB,EAAA;AAEA;EACmBW,UAAUA,CAACC,iBAAuC,EAAA;AACnE,IAAA,KAAK,CAACD,UAAU,CAACC,iBAAiB,CAAC;AAEnC,IAAA,IAAIA,iBAAiB,CAACC,GAAG,CAAC,WAAW,CAAC,IAAID,iBAAiB,CAACC,GAAG,CAAC,SAAS,CAAC,EAAE;MAC1EhB,sBAAA,CAAA,IAAI,EAAAV,8CAAA,EAAA,GAAA,CAAqB,EAAEa,IAAA,CAA3B,IAAI,CAAyB;MAE7B,IAAI,IAAI,CAACE,SAAS,KAAK,MAAM,IAAI,IAAI,CAACG,OAAO,KAAK,MAAM,EAAE;AACxDR,QAAAA,sBAAA,CAAA,IAAI,EAAAC,oCAAA,EAAA,GAAA,EAAAgB,mDAAA,CAA0B,CAAAd,IAAA,CAA9B,IAAI,CAA4B;AAClC,MAAA,CAAC,MAAM;AACLH,QAAAA,sBAAA,CAAA,IAAI,EAAAC,oCAAA,EAAA,GAAA,EAAAiB,qCAAA,CAAY,CAAAf,IAAA,CAAhB,IAAI,CAAc;AACpB,MAAA;AACF,IAAA;AAEA,IAAA,IAAIY,iBAAiB,CAACC,GAAG,CAAC,OAAO,CAAC,EAAE;AAClC,MAAA,IAAI,IAAI,CAACZ,KAAK,IAAI,IAAI,CAACG,GAAG,IAAI,IAAI,CAAClB,QAAQ,KAAK,MAAM,EAAE;QACtD,IAAI,CAACkB,GAAG,GAAG,KAAK;AAChB,QAAA,IAAI,CAACY,aAAa,CAAC,IAAIC,KAAK,CAAC,QAAQ,EAAE;AAAEC,UAAAA,OAAO,EAAE;AAAI,SAAE,CAAC,CAAC;AAC5D,MAAA;IACF,CAAC,MAAM,IAAIN,iBAAiB,CAACC,GAAG,CAAC,KAAK,CAAC,EAAE;AACvC,MAAA,IAAI,IAAI,CAACT,GAAG,IAAI,IAAI,CAACH,KAAK,IAAI,IAAI,CAAChB,UAAU,KAAK,MAAM,EAAE;QACxD,IAAI,CAACgB,KAAK,GAAG,KAAK;AAClB,QAAA,IAAI,CAACe,aAAa,CAAC,IAAIC,KAAK,CAAC,QAAQ,EAAE;AAAEC,UAAAA,OAAO,EAAE;AAAI,SAAE,CAAC,CAAC;AAC5D,MAAA;AACF,IAAA;AACF,EAAA;AAEA;AACSC,EAAAA,mBAAmBA,GAAA;IAC1B,KAAK,CAACA,mBAAmB,EAAE;AAC3BtB,IAAAA,sBAAA,CAAA,IAAI,EAAAC,oCAAA,EAAA,GAAA,EAAAsB,qCAAA,CAAY,CAAApB,IAAA,CAAhB,IAAI,CAAc;IAElB,IAAI,IAAI,CAACE,SAAS,KAAK,MAAM,IAAI,IAAI,CAACG,OAAO,KAAK,MAAM,EAAE;AACxDR,MAAAA,sBAAA,CAAA,IAAI,EAAAC,oCAAA,EAAA,GAAA,EAAAgB,mDAAA,CAA0B,CAAAd,IAAA,CAA9B,IAAI,CAA4B;AAClC,IAAA;AACF,EAAA;AAEA;EACmBqB,YAAYA,CAACC,kBAAkC,EAAA;AAChE,IAAA,KAAK,CAACD,YAAY,CAACC,kBAAkB,CAAC;AACtCzB,IAAAA,sBAAA,CAAA,IAAI,EAAAC,oCAAA,EAAA,GAAA,EAAAsB,qCAAA,CAAY,CAAApB,IAAA,CAAhB,IAAI,CAAc;AACpB,EAAA;AAEA;AACmBuB,EAAAA,MAAMA,GAAA;IACvB,OAAOC,IAAI,iDACsB,CAAC,IAAI,CAACvB,KAAK,IAAI,IAAI,CAAChB,UAAU,KAAK,MAAM,IAAIY,sBAAA,CAAA,IAAI,EAAAR,gDAAA,EAAA,GAAA,CAAuB,CAAA,kCAAA,EACjEQ,sBAAA,CAAA,IAAI,EAAAC,oCAAA,EAAA,GAAA,EAAA2B,gDAAA,CAAuB,gEAKrD,CAAC,IAAI,CAACxC,UAAU,KAAK,MAAM,IAAI,IAAI,CAACC,QAAQ,KAAK,MAAM,MAAM,IAAI,CAACe,KAAK,IAAI,IAAI,CAACG,GAAG,CAAC,mDAInEP,sBAAA,CAAA,IAAI,EAAAC,oCAAA,EAAA,GAAA,EAAA4B,2CAAA,CAAkB,CAAA,oDAAA,EAEpB,CAAC,IAAI,CAACtB,GAAG,IAAI,IAAI,CAAClB,QAAQ,KAAK,MAAM,IAAIW,sBAAA,CAAA,IAAI,EAAAP,8CAAA,EAAA,GAAA,CAAqB,mCAC7DO,sBAAA,CAAA,IAAI,EAAAC,oCAAA,EAAA,GAAA,EAAA6B,8CAAA,CAAqB,CAAA,gCAAA,CAEtD;AACX,EAAA;;;;;;;;EAIE,IAAIC,MAAM,GAAG,IAAI,CAACC,UAAU,EAAEC,aAAa,CAAc,QAAQ,CAAC;AAClE,EAAA,IAAIF,MAAM,EAAE/B,sBAAA,CAAA,IAAI,EAAAN,2CAAA,EAAA,GAAA,CAAkB,CAACwC,OAAO,CAACH,MAAM,CAAC;EAClDA,MAAM,GAAG,IAAI,CAACC,UAAU,EAAEC,aAAa,CAAC,MAAM,CAAC;AAC/C,EAAA,IAAIF,MAAM,EAAE/B,sBAAA,CAAA,IAAI,EAAAN,2CAAA,EAAA,GAAA,CAAkB,CAACwC,OAAO,CAACH,MAAM,CAAC;AACpD,CAAC;;AAIC,EAAA,IAAI,IAAI,CAAC3C,UAAU,KAAK,MAAM,EAAE;IAC9B,IAAI,CAACgB,KAAK,GAAG,KAAK;AACpB,EAAA;AACA,EAAA,IAAI,IAAI,CAACf,QAAQ,KAAK,MAAM,EAAE;IAC5B,IAAI,CAACkB,GAAG,GAAG,KAAK;AAClB,EAAA;AACA,EAAA,IAAI,CAACY,aAAa,CAAC,IAAIC,KAAK,CAAC,QAAQ,EAAE;AAAEC,IAAAA,OAAO,EAAE;AAAI,GAAE,CAAC,CAAC;AAC5D,CAAC;6GAGsBc,CAAQ,EAAA;AAC7BC,EAAAA,sBAAA,CAAA,IAAI,EAAA5C,gDAAA,EAA0B,CAAC6C,gBAAgB,CAAkBF,CAAC,CAACvC,MAAM,CAAC,EAAA,GAAA,CAAA;AAC5E,CAAC;yGAGoBuC,CAAQ,EAAA;AAC3BC,EAAAA,sBAAA,CAAA,IAAI,EAAA3C,8CAAA,EAAwB,CAAC4C,gBAAgB,CAAkBF,CAAC,CAACvC,MAAM,CAAC,EAAA,GAAA,CAAA;AAC1E,CAAC;uGAGmBG,OAA8B,EAAA;AAChD,EAAA,KAAK,MAAMuC,KAAK,IAAIvC,OAAO,EAAE;IAC3B,MAAMwC,UAAU,GAAuBC,KAAK,CAACC,OAAO,CAACH,KAAK,CAACI,aAAa,CAAC,GACrEJ,KAAK,CAACI,aAAa,CAAC,CAAC,CAAC,GACtBJ,KAAK,CAACI,aAAa;IAEvB,IAAIJ,KAAK,CAAC1C,MAAM,CAAC+C,SAAS,CAACC,QAAQ,CAAC,OAAO,CAAC,EAAE;AAC5C,MAAA,IAAI,CAACC,KAAK,CAACC,WAAW,CAAC,sBAAsB,EAAE,CAAA,EAAGP,UAAU,CAACQ,UAAU,CAAA,EAAA,CAAI,CAAC;AAC9E,IAAA,CAAC,MAAM,IAAIT,KAAK,CAAC1C,MAAM,CAAC+C,SAAS,CAACC,QAAQ,CAAC,KAAK,CAAC,EAAE;AACjD,MAAA,IAAI,CAACC,KAAK,CAACC,WAAW,CAAC,oBAAoB,EAAE,CAAA,EAAGP,UAAU,CAACQ,UAAU,CAAA,EAAA,CAAI,CAAC;AAC5E,IAAA;AACF,EAAA;AAEA,EAAA,IAAIC,cAAc,CAAC,IAAI,EAAE,cAAc,CAAC,EAAE;AACxC;IACA,KAAK,IAAI,CAACC,SAAS;AACnBC,IAAAA,iBAAiB,CAAC,IAAI,EAAE,cAAc,CAAC;AACzC,EAAA;AACF,CAAC;;AAICd,EAAAA,sBAAA,CAAA,IAAI,EAAA9C,8CAAA,EAAwB6D,qBAAqB,CAACjB,OAAO,CAAC,CAACkB,UAAU,CAACC,MAAM,EAAED,UAAU,CAACE,KAAK,CAAC,EAAGC,OAAO,IACvGvD,sBAAA,CAAA,IAAI,EAAAC,oCAAA,EAAA,GAAA,EAAAiB,qCAAA,CAAY,CAAAf,IAAA,CAAhB,IAAI,EAAaoD,OAAO,EAAE,IAAI,CAAC,CAChC,MAAA;AACH,CAAC;;AAICL,EAAAA,iBAAiB,CAAC,IAAI,EAAE,cAAc,CAAC;AACvCA,EAAAA,iBAAiB,CAAC,IAAI,EAAE,cAAc,CAAC;AACvCA,EAAAA,iBAAiB,CAAC,IAAI,EAAE,cAAc,CAAC;AACvCA,EAAAA,iBAAiB,CAAC,IAAI,EAAE,YAAY,CAAC;AACrCA,EAAAA,iBAAiB,CAAC,IAAI,EAAE,YAAY,CAAC;AACrCA,EAAAA,iBAAiB,CAAC,IAAI,EAAE,YAAY,CAAC;AACvC,CAAC;uFAGWM,WAAkC,EAAEC,SAAS,GAAG,KAAK,EAAA;EAC/D,IAAIC,cAAc,GAAG,KAAK;AACxBC,IAAAA,YAAY,GAAG,KAAK;AACtB,EAAA,IAAI,IAAI,CAACtD,SAAS,KAAK,MAAM,EAAE;IAC7B,IAAImD,WAAW,EAAEI,GAAG,CAACR,UAAU,CAACS,MAAM,CAAC,EAAE;MACvC,IAAI,CAACzE,UAAU,GAAG,MAAM;IAC1B,CAAC,MAAM,IAAIoE,WAAW,EAAEI,GAAG,CAACR,UAAU,CAACE,KAAK,CAAC,EAAE;MAC7CI,cAAc,GAAG,IAAI,CAACtE,UAAU,KAAK,MAAM,IAAI,IAAI,CAACgB,KAAK;MACzD,IAAI,CAAChB,UAAU,GAAG,MAAM;IAC1B,CAAC,MAAM,IAAIoE,WAAW,EAAEI,GAAG,CAACR,UAAU,CAACC,MAAM,CAAC,EAAE;MAC9CK,cAAc,GAAG,IAAI,CAACtE,UAAU,KAAK,MAAM,IAAI,IAAI,CAACgB,KAAK;MACzD,IAAI,CAAChB,UAAU,GAAG,MAAM;AAC1B,IAAA,CAAC,MAAM;MACL,IAAI,CAACA,UAAU,GAAG,MAAM;AAC1B,IAAA;AACF,EAAA,CAAC,MAAM;AACL,IAAA,IAAI,CAACA,UAAU,GAAG,IAAI,CAACiB,SAAS;AAClC,EAAA;AAEA,EAAA,IAAI,IAAI,CAACG,OAAO,KAAK,MAAM,EAAE;IAC3B,IAAIgD,WAAW,EAAEI,GAAG,CAACR,UAAU,CAACS,MAAM,CAAC,EAAE;MACvC,IAAI,CAACxE,QAAQ,GAAG,MAAM;IACxB,CAAC,MAAM,IAAImE,WAAW,EAAEI,GAAG,CAACR,UAAU,CAACE,KAAK,CAAC,EAAE;MAC7CK,YAAY,GAAG,IAAI,CAACtE,QAAQ,KAAK,MAAM,IAAI,IAAI,CAACkB,GAAG;MACnD,IAAI,CAAClB,QAAQ,GAAG,MAAM;IACxB,CAAC,MAAM,IAAImE,WAAW,EAAEI,GAAG,CAACR,UAAU,CAACC,MAAM,CAAC,EAAE;MAC9CM,YAAY,GAAG,IAAI,CAACtE,QAAQ,KAAK,MAAM,IAAI,IAAI,CAACkB,GAAG;MACnD,IAAI,CAAClB,QAAQ,GAAG,MAAM;AACxB,IAAA,CAAC,MAAM;MACL,IAAI,CAACA,QAAQ,GAAG,MAAM;AACxB,IAAA;AACF,EAAA,CAAC,MAAM;AACL,IAAA,IAAI,CAACA,QAAQ,GAAG,IAAI,CAACmB,OAAO;AAC9B,EAAA;AAEAR,EAAAA,sBAAA,CAAA,IAAI,EAAAC,oCAAA,EAAA,GAAA,EAAAY,oCAAA,CAAW,CAAAV,IAAA,CAAf,IAAI,CAAa;EAEjBQ,cAAc,CAAC,IAAI,EAAE,CAAA,QAAA,EAAW,IAAI,CAACvB,UAAU,EAAE,CAAC;EAClDuB,cAAc,CAAC,IAAI,EAAE,CAAA,MAAA,EAAS,IAAI,CAACtB,QAAQ,EAAE,CAAC;AAE9C,EAAA,IAAIoE,SAAS,KAAKC,cAAc,IAAIC,YAAY,CAAC,EAAE;AACjD,IAAA,IAAID,cAAc,EAAE;MAClB,IAAI,CAACtD,KAAK,GAAG,KAAK;AACpB,IAAA;AACA,IAAA,IAAIuD,YAAY,EAAE;MAChB,IAAI,CAACpD,GAAG,GAAG,KAAK;AAClB,IAAA;AAEA,IAAA,IAAI,CAACY,aAAa,CAAC,IAAIC,KAAK,CAAC,QAAQ,EAAE;AAAEC,MAAAA,OAAO,EAAE;AAAI,KAAE,CAAC,CAAC;AAC5D,EAAA;AACF,CAAC;AAxPD;AACgBtC,yBAAA,CAAA+E,MAAM,GAAmBzF,oBAAnB;AAEW0F,UAAA,CAAA,CAAhBC,KAAK,EAAE,CAA0D,EAAAjF,yBAAA,CAAAkF,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AACjDF,UAAA,CAAA,CAAhBC,KAAK,EAAE,CAAwD,EAAAjF,yBAAA,CAAAkF,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAgBpCF,UAAA,CAAA,CAA3CG,QAAQ,CAAC;AAAEC,EAAAA,IAAI,EAAEC,OAAO;AAAEC,EAAAA,OAAO,EAAE;AAAI,CAAE,CAAC,CAAe,EAAAtF,yBAAA,CAAAkF,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAMJF,UAAA,CAAA,CAArDG,QAAQ,CAAC;AAAEI,EAAAA,SAAS,EAAE,YAAY;AAAED,EAAAA,OAAO,EAAE;AAAI,CAAE,CAAC,CAAgC,EAAAtF,yBAAA,CAAAkF,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAMbF,UAAA,CAAA,CAAvEG,QAAQ,CAAC;AAAEI,EAAAA,SAAS,EAAE,eAAe;AAAEH,EAAAA,IAAI,EAAEC,OAAO;AAAEC,EAAAA,OAAO,EAAE;CAAM,CAAC,CAAsB,EAAAtF,yBAAA,CAAAkF,SAAA,EAAA,cAAA,EAAA,MAAA,CAAA;AAMjDF,UAAA,CAAA,CAA3CG,QAAQ,CAAC;AAAEC,EAAAA,IAAI,EAAEC,OAAO;AAAEC,EAAAA,OAAO,EAAE;AAAI,CAAE,CAAC,CAAa,EAAAtF,yBAAA,CAAAkF,SAAA,EAAA,KAAA,EAAA,MAAA,CAAA;AAMJF,UAAA,CAAA,CAAnDG,QAAQ,CAAC;AAAEI,EAAAA,SAAS,EAAE,UAAU;AAAED,EAAAA,OAAO,EAAE;AAAI,CAAE,CAAC,CAA8B,EAAAtF,yBAAA,CAAAkF,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAMXF,UAAA,CAAA,CAArEG,QAAQ,CAAC;AAAEI,EAAAA,SAAS,EAAE,aAAa;AAAEH,EAAAA,IAAI,EAAEC,OAAO;AAAEC,EAAAA,OAAO,EAAE;CAAM,CAAC,CAAoB,EAAAtF,yBAAA,CAAAkF,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAnD9ElF,yBAAyB,GAAAgF,UAAA,CAAA,CADrCQ,aAAa,CAAC,sBAAsB,CAAC,CACzB,EAAAxF,yBAAyB,CA0PrC;;;AC5TD;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AAEI,IAAMyF,sBAAsB,GAA5B,MAAMA,sBAAuB,SAAQC,OAAO,CAACC,iBAAiB,CAAC,CAAA;AAA/DvF,EAAAA,WAAAA,GAAA;;;AACL;IAAyBwF,oDAAA,CAAApF,GAAA,CAAA,IAAA,EAAgC,MAAMS,sBAAA,CAAA,IAAI,EAAA4E,iCAAA,EAAA,GAAA,EAAAC,mDAAA,CAA6B,CAAA1E,IAAA,CAAjC,IAAI,CAA+B,CAAA;AAClG;AAAgB2E,IAAAA,sCAAA,CAAAvF,GAAA,CAAA,IAAA,EAAkB,KAAK,CAAA;AAiGzC,EAAA;AA/FE;EACSwF,MAAMA,CAACC,OAAoB,EAAA;AAClC,IAAA,KAAK,CAACD,MAAM,CAACC,OAAO,CAAC;AAErB,IAAA,IAAI,IAAI,CAACC,OAAO,IAAI,IAAI,CAACC,aAAa,EAAE;MACtCC,mBAAmB,CAAC,IAAI,CAACD,aAAa,EAAE,eAAe,EAAE,IAAI,CAACD,OAAO,CAAC;AACxE,IAAA;AAEA,IAAA,MAAMG,SAAS,GAAGJ,OAAO,CAACK,OAAO,CAAC,sBAAsB,CAAC;AACzD,IAAA,IAAID,SAAS,EAAE;AACbA,MAAAA,SAAS,CAACE,gBAAgB,CAAC,QAAQ,EAAEtF,sBAAA,CAAA,IAAI,EAAA2E,oDAAA,EAAA,GAAA,CAA8B,CAAC;AACxE3E,MAAAA,sBAAA,CAAA,IAAI,+EAAc,CAAAG,IAAA,CAAlB,IAAI,EAAeiF,SAAS,EAAE,IAAI,CAAC;AACrC,IAAA;AACF,EAAA;AAEA;AACSG,EAAAA,MAAMA,GAAA;IACb,IAAI,IAAI,CAACL,aAAa,EAAE;MACtB,IAAI,IAAI,CAACD,OAAO,EAAE;QAChBO,sBAAsB,CAAC,IAAI,CAACN,aAAa,EAAE,eAAe,EAAE,IAAI,CAACD,OAAO,CAAC;AAC3E,MAAA;AAEA,MAAA,IAAI,CAACC,aAAa,CAACO,YAAY,GAAG,IAAI;AACxC,IAAA;IAEA,IAAI,CAACT,OAAO,EAAEK,OAAO,CAAC,sBAAsB,CAAC,EAAEK,mBAAmB,CAAC,QAAQ,EAAE1F,sBAAA,CAAA,IAAI,EAAA2E,oDAAA,EAAA,GAAA,CAA8B,CAAC;IAEhH,KAAK,CAACY,MAAM,EAAE;AAChB,EAAA;AAEA;AACSI,EAAAA,QAAQA,GAAA;AACf3F,IAAAA,sBAAA,CAAA,IAAI,EAAA4E,iCAAA,EAAA,GAAA,EAAAgB,oCAAA,CAAc,CAAAzF,IAAA,CAAlB,IAAI,CAAgB;AACtB,EAAA;;;;;;AAIE,EAAA,IAAI,IAAI,CAAC6E,OAAO,IAAI,CAAChF,sBAAA,CAAA,IAAI,EAAA8E,sCAAA,EAAA,GAAA,CAAgB,EAAE;IACzC,MAAMM,SAAS,GAAG,IAAI,CAACJ,OAAO,CAACK,OAAO,CAAC,sBAAsB,CAAC;AAC9D,IAAA,IAAID,SAAS,EAAE;AACbpF,MAAAA,sBAAA,CAAA,IAAI,+EAAc,CAAAG,IAAA,CAAlB,IAAI,EAAeiF,SAAS,EAAE,IAAI,CAAC;AACrC,IAAA;AACF,EAAA;AACF,CAAC;;AAGD,eAAKQ,oCAAAA,GAAA;EACH,IAAI,CAAC,IAAI,CAACV,aAAa,IAAI,CAAC,IAAI,CAACF,OAAO,EAAE;AACxC,IAAA;AACF,EAAA;EAEA,MAAMI,SAAS,GAAG,IAAI,CAACJ,OAAO,CAACK,OAAO,CAAC,sBAAsB,CAAC;AAC9D,EAAA,IAAID,SAAS,EAAE;IACbhD,sBAAA,CAAA,IAAI,EAAA0C,sCAAA,EAAmB,IAAI,EAAA,GAAA,CAAA;IAC3B,IAAI;AACF,MAAA,IAAI,IAAI,CAACE,OAAO,CAACa,IAAI,KAAK,OAAO,EAAE;AACjCT,QAAAA,SAAS,CAAChF,KAAK,GAAG,CAACgF,SAAS,CAAChF,KAAK;MACpC,CAAC,MAAM,IAAI,IAAI,CAAC4E,OAAO,CAACa,IAAI,KAAK,KAAK,EAAE;AACtCT,QAAAA,SAAS,CAAC7E,GAAG,GAAG,CAAC6E,SAAS,CAAC7E,GAAG;AAChC,MAAA;MACA,IAAI6E,SAAS,CAACU,eAAe,EAAE;QAC7B,MAAMV,SAAS,CAACW,cAAc;AAChC,MAAA;AACA,MAAA,MAAM/F,sBAAA,CAAA,IAAI,EAAA4E,iCAAA,EAAA,GAAA,EAAAoB,oCAAA,CAAc,CAAA7F,IAAA,CAAlB,IAAI,EAAeiF,SAAS,EAAE,KAAK,CAAC;AAC5C,IAAA,CAAC,SAAS;MACRhD,sBAAA,CAAA,IAAI,EAAA0C,sCAAA,EAAmB,KAAK,EAAA,GAAA,CAAA;AAC9B,IAAA;AACF,EAAA;AACF,CAAC;;AAGD,eAAKkB,oCAAAA,CAAeZ,SAAoC,EAAEa,UAAmB,EAAA;EAC3E,IAAI,CAAC,IAAI,CAACf,aAAa,IAAI,CAAC,IAAI,CAACF,OAAO,EAAE;AACxC,IAAA;AACF,EAAA;EAEA,IAAIkB,QAAQ,GAAG,KAAK;AACpB,EAAA,IAAI,IAAI,CAAClB,OAAO,CAACa,IAAI,KAAK,OAAO,EAAE;IACjCK,QAAQ,GAAGd,SAAS,CAAChF,KAAK;EAC5B,CAAC,MAAM,IAAI,IAAI,CAAC4E,OAAO,CAACa,IAAI,KAAK,KAAK,EAAE;IACtCK,QAAQ,GAAGd,SAAS,CAAC7E,GAAG;AAC1B,EAAA;AAEA,EAAA,IAAI,CAAC2E,aAAa,CAACO,YAAY,GAAG,CAAA,EAAGS,QAAQ,CAAA,CAAE;EAE/C,IAAID,UAAU,IAAI,IAAI,CAACf,aAAa,CAACiB,YAAY,CAAC,QAAQ,CAAC,EAAE;IAC3D,IAAI,CAACjB,aAAa,CAACkB,eAAe,CAAC,UAAU,EAAEF,QAAQ,CAAC;AAC1D,EAAA;AAEA,EAAA,IAAI,IAAI,CAAChB,aAAa,YAAYhG,UAAU,EAAE;AAC5C;AACA,IAAA,MAAO,IAAI,CAACgG,aAA4B,CAACa,cAAc;AACvD,IAAA,IAAI,CAACb,aAAa,CAACmB,WAAW,GAAG,IAAI;AACvC,EAAA;AACF,CAAC;AAlGU7B,sBAAsB,GAAAT,UAAA,CAAA,CADlCQ,aAAa,CAAC,mBAAmB,CAAC,CACtB,EAAAC,sBAAsB,CAmGlC;;;;"}
+{"version":3,"file":"drawer-container.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 - Dispatched 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","containerColor","unsafeCSS","DesignToken","color","surface","containerElevation","elevation","level0","containerWidth","scrimOpacity","cornerShape","shape","corner","large","modalContainerColor","surfaceContainerLow","modalContainerElevation","level1","dividerColor","outline","dividerThickness","DrawerContainerStyle","css","scrollbar","thinWidth","motion","duration","medium4","easing","standard","scrim","M3eDrawerContainerElement","ReconnectedCallback","AttachInternals","LitElement","constructor","_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","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","slot","isUpdatePending","updateComplete","_M3eDrawerToggleElement_updateToggle","syncToggle","selected","hasAttribute","toggleAttribute","ariaPressed"],"mappings":"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"}

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(: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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"}
+{"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 - Dispatched 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

@@ -157,7 +157,7 @@ var _M3eExpansionHeaderElement_instances, _M3eExpansionHeaderElement_renderToggl
  * @attr toggle-direction - The direction of the expansion toggle.
  * @attr toggle-position - The position of the expansion toggle.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-expansion-header-collapsed-height - Height of the header when the panel is collapsed.
  * @cssprop --m3e-expansion-header-expanded-height - Height of the header when the panel is expanded.
@@ -265,10 +265,10 @@ var M3eExpansionPanelElement_1;
  * @attr toggle-direction - The direction of the expansion toggle.
  * @attr toggle-position - The position of the expansion toggle.
  *
- * @fires opening - Emitted when the expansion panel begins to open.
- * @fires opened - Emitted when the expansion panel has opened.
- * @fires closing - Emitted when the expansion panel begins to close.
- * @fires closed - Emitted when the expansion panel has closed.
+ * @fires opening - Dispatched when the expansion panel begins to open.
+ * @fires opened - Dispatched when the expansion panel has opened.
+ * @fires closing - Dispatched when the expansion panel begins to close.
+ * @fires closed - Dispatched when the expansion panel has closed.
  *
  * @cssprop --m3e-expansion-header-collapsed-height - Height of the header when the panel is collapsed.
  * @cssprop --m3e-expansion-header-expanded-height - Height of the header when the panel is expanded.