@m3e/web 2.2.0 → 2.2.1

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

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