@m3e/web 2.5.6 → 2.5.8

package/dist/drawer-container.js

@@ -165,16 +165,10 @@ let M3eDrawerContainerElement = class M3eDrawerContainerElement extends Reconnec
     if (changedProperties.has("start")) {
       if (this.start && this.end && this._endMode !== "side") {
         this.end = false;
-        this.dispatchEvent(new Event("change", {
-          bubbles: true
-        }));
       }
     } else if (changedProperties.has("end")) {
       if (this.end && this.start && this._startMode !== "side") {
         this.start = false;
-        this.dispatchEvent(new Event("change", {
-          bubbles: true
-        }));
       }
     }
   }
@@ -250,7 +244,8 @@ _M3eDrawerContainerElement_clearMode = function _M3eDrawerContainerElement_clear
   deleteCustomState(this, "--end-push");
   deleteCustomState(this, "--end-side");
 };
-_M3eDrawerContainerElement_updateMode = function _M3eDrawerContainerElement_updateMode(breakpoints, autoClose = false) {
+_M3eDrawerContainerElement_updateMode = /** @inheritdoc */
+async function _M3eDrawerContainerElement_updateMode(breakpoints, autoClose = false) {
   let autoCloseStart = false,
     autoCloseEnd = false;
   if (this.startMode === "auto") {
@@ -293,6 +288,9 @@ _M3eDrawerContainerElement_updateMode = function _M3eDrawerContainerElement_upda
     if (autoCloseEnd) {
       this.end = false;
     }
+    if (this.isUpdatePending) {
+      await this.updateComplete;
+    }
     this.dispatchEvent(new Event("change", {
       bubbles: true
     }));
@@ -412,14 +410,22 @@ async function _M3eDrawerToggleElement_toggleDrawer() {
   if (container) {
     __classPrivateFieldSet(this, _M3eDrawerToggleElement_togglingDrawer, true, "f");
     try {
+      let changed = false;
       if (this.control.slot === "start") {
         container.start = !container.start;
+        changed = true;
       } else if (this.control.slot === "end") {
         container.end = !container.end;
+        changed = true;
       }
       if (container.isUpdatePending) {
         await container.updateComplete;
       }
+      if (changed) {
+        container.dispatchEvent(new Event("change", {
+          bubbles: true
+        }));
+      }
       await __classPrivateFieldGet(this, _M3eDrawerToggleElement_instances, "m", _M3eDrawerToggleElement_updateToggle).call(this, container, false);
     } finally {
       __classPrivateFieldSet(this, _M3eDrawerToggleElement_togglingDrawer, false, "f");

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 - 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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"}
+{"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      }\r\n    } else if (changedProperties.has(\"end\")) {\r\n      if (this.end && this.start && this._startMode !== \"side\") {\r\n        this.start = false;\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  async #updateMode(breakpoints?: Map<string, boolean>, autoClose = false): Promise<void> {\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      if (this.isUpdatePending) {\r\n        await this.updateComplete;\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        let changed = false;\r\n        if (this.control.slot === \"start\") {\r\n          container.start = !container.start;\r\n          changed = true;\r\n        } else if (this.control.slot === \"end\") {\r\n          container.end = !container.end;\r\n          changed = true;\r\n        }\r\n        if (container.isUpdatePending) {\r\n          await container.updateComplete;\r\n        }\r\n        if (changed) {\r\n          container.dispatchEvent(new Event(\"change\", { bubbles: true }));\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","reconnectedCallback","_M3eDrawerContainerElement_initialize","firstUpdated","_changedProperties","render","html","_M3eDrawerContainerElement_handleStartSlotChange","_M3eDrawerContainerElement_handleScrimClick","_M3eDrawerContainerElement_handleEndSlotChange","drawer","shadowRoot","querySelector","observe","dispatchEvent","Event","bubbles","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","isUpdatePending","updateComplete","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","changed","slot","_M3eDrawerToggleElement_updateToggle","syncToggle","selected","hasAttribute","toggleAttribute","ariaPressed"],"mappings":"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"}

package/dist/drawer-container.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldGet as t,__classPrivateFieldSet as e,__decorate as s}from"tslib";import{unsafeCSS as i,css as r,LitElement as o,html as a}from"lit";import{state as n,property as d}from"lit/decorators.js";import{DesignToken as h,ReconnectedCallback as l,AttachInternals as c,ResizeController as m,addCustomState as p,hasAssignedNodes as u,hasCustomState as v,deleteCustomState as b,customElement as g,HtmlFor as f,ActionElementBase as w}from"@m3e/web/core";import{M3eBreakpointObserver as $,Breakpoint as y}from"@m3e/web/core/layout";import{addAriaReferencedId as M,removeAriaReferencedId as _}from"@m3e/web/core/a11y";const x=i(`var(--m3e-drawer-container-color, ${h.color.surface})`),k=i(`var(--m3e-drawer-container-elevation, ${h.elevation.level0})`),E=i("var(--m3e-drawer-container-width, 22.5rem)"),z=i("var(--m3e-drawer-container-scrim-opacity, 32%)"),S=i(`var(--m3e-modal-drawer-corner-shape, ${h.shape.corner.large})`),C=i(`var(--m3e-modal-drawer-container-color, ${h.color.surfaceContainerLow})`),W=i(`var(--m3e-modal-drawer-elevation, ${h.elevation.level1})`),B=i(`var(--m3e-drawer-divider-color, ${h.color.outline})`),L=i("var(--m3e-drawer-divider-thickness, 1px)"),U=r`:host { display: block; position: relative; overflow: hidden; flex: 1 1 auto; } .start, .end { position: absolute; top: 0; bottom: 0; z-index: 3; outline: none; overflow-x: hidden; overflow-y: auto; scrollbar-width: ${h.scrollbar.thinWidth}; scrollbar-color: ${h.scrollbar.color}; box-sizing: border-box; background-color: ${x}; box-shadow: ${k}; transition: ${i(`margin ${h.motion.duration.medium4} ${h.motion.easing.standard},\n      visibility ${h.motion.duration.medium4} ${h.motion.easing.standard} allow-discrete,\n      background-color ${h.motion.duration.medium4} ${h.motion.easing.standard},\n      box-shadow ${h.motion.duration.medium4} ${h.motion.easing.standard}`)}; } .start { inset-inline-start: 0; } .end { inset-inline-end: 0; } :host(:not([start])) .start { visibility: hidden; } :host(:not([start]):not(:dir(rtl))) .start { margin-left: calc(0px - var(--_start-drawer-size, ${E})); } :host(:not([start]):dir(rtl)) .start { margin-right: calc(0px - var(--_start-drawer-size, ${E})); } :host([start]:not(:dir(rtl))) .start { margin-left: 0; } :host([start]:dir(rtl)) .start { margin-right: 0; } :host(:not([end])) .end { visibility: hidden; } :host(:not([end]):not(:dir(rtl))) .end { margin-right: calc(0px - var(--_end-drawer-size, ${E})); } :host(:not([end]):dir(rtl)) .end { margin-left: calc(0px - var(--_end-drawer-size, ${E})); } :host([end]:not(:dir(rtl))) .end { margin-right: 0; } :host([end]:dir(rtl)) .end { margin-left: 0; } ::slotted([slot="start"]), ::slotted([slot="end"]) { height: 100%; width: ${E}; box-sizing: border-box; } .content { position: relative; height: 100%; overflow: auto; margin-left: 0; margin-right: 0; transition: ${i(`margin ${h.motion.duration.medium4} ${h.motion.easing.standard}`)}; } :host(:is(:state(--start-push), :--start-push)[start]:not(:dir(rtl))) .content, :host(:is(:state(--start-side), :--start-side)[start]:not(:dir(rtl))) .content { margin-left: var(--_start-drawer-size, ${E}); } :host(:is(:state(--start-push), :--start-push)[start]:dir(rtl)) .content, :host(:is(:state(--start-side), :--start-side)[start]:dir(rtl)) .content { margin-right: var(--_start-drawer-size, ${E}); } :host(:is(:state(--end-push), :--end-push)[end]:not(:dir(rtl))) .content, :host(:is(:state(--end-side), :--end-side)[end]:not(:dir(rtl))) .content { margin-right: var(--_end-drawer-size, ${E}); } :host(:is(:state(--end-push), :--end-push)[end]:dir(rtl)) .content, :host(:is(:state(--end-side), :--end-side)[end]:dir(rtl)) .content { margin-left: var(--_end-drawer-size, ${E}); } .scrim { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; background-color: ${h.color.scrim}; opacity: 0; visibility: hidden; transition: ${i(`opacity ${h.motion.duration.medium4} ${h.motion.easing.standard}, \n        visibility ${h.motion.duration.medium4} ${h.motion.easing.standard} allow-discrete`)}; } @starting-style { .scrim { opacity: 0; } } :host(:is(:state(--start-push), :--start-push)[start]) .scrim, :host(:is(:state(--end-push), :--end-push)[end]) .scrim, :host(:is(:state(--start-over), :--start-over)[start]) .scrim, :host(:is(:state(--end-over), :--end-over)[end]) .scrim { visibility: visible; opacity: ${z}; } :host(:is(:state(--start-push), :--start-push)) .start, :host(:is(:state(--start-over), :--start-over)) .start { border-start-end-radius: ${S}; border-end-end-radius: ${S}; } :host(:is(:state(--end-push), :--end-push)) .end, :host(:is(:state(--end-over), :--end-over)) .end { border-start-start-radius: ${S}; border-end-start-radius: ${S}; } :host(:is(:state(--start-push), :--start-push)) .start, :host(:is(:state(--end-push), :--end-push)) .end, :host(:is(:state(--start-over), :--start-over)) .start, :host(:is(:state(--end-over), :--end-over)) .end { background-color: ${C}; box-shadow: ${W}; } :host([start-divider]) .start { border-inline-end-color: transparent; border-inline-end-width: ${L}; border-inline-end-style: solid; box-sizing: border-box; } :host( [start-divider]:is(:state(--start-side), :--start-side)[start]:not(:is(:state(--end-push), :--end-push)[end]):not( :is(:state(--end-over), :--end-over)[end] ) ) .start { border-inline-end-color: ${B}; } :host([end-divider]) .end { border-inline-start-color: transparent; border-inline-start-width: ${L}; border-inline-start-style: solid; box-sizing: border-box; } :host( [end-divider]:is(:state(--end-side), :--end-side)[end]:not(:is(:state(--start-push), :--start-push)[start]):not( :is(:state(--start-over), :--start-over)[start] ) ) .end { border-inline-start-color: ${B}; } :host(:is(:state(--no-animate), :--no-animate)) .start, :host(:is(:state(--no-animate), :--no-animate)) .end, :host(:is(:state(--no-animate), :--no-animate)) .content { transition: none; } @media (forced-colors: active) { .start, .end { background-color: Canvas; box-shadow: unset; transition: ${i(`margin ${h.motion.duration.medium4} ${h.motion.easing.standard},\n      visibility ${h.motion.duration.medium4} ${h.motion.easing.standard} allow-discrete`)}; } :host(:is(:state(--start-push), :--start-push)) .start, :host(:is(:state(--end-push), :--end-push)) .end, :host(:is(:state(--start-over), :--start-over)) .start, :host(:is(:state(--end-over), :--end-over)) .end { background-color: Canvas; box-shadow: unset; border-color: CanvasText; } .start, .end { border-style: solid; border-color: Canvas; border-width: 1px; } .start { border-inline-start-style: none; } .end { border-inline-end-style: none; } :host( [start-divider]:is(:state(--start-side), :--start-side)[start]:not( :is(:state(--end-push), :--end-push)[end] ):not(:is(:state(--end-over), :--end-over)[end]) ) .start { border-inline-end-color: GrayText; } :host( [end-divider]:is(:state(--end-side), :--end-side)[end]:not(:is(:state(--start-push), :--start-push)[start]):not( :is(:state(--start-over), :--start-over)[start] ) ) .end { border-inline-start-color: GrayText; } } @media (prefers-reduced-motion) { .start, .end, .content, .scrim { transition: none; } }`;var A,D,F,P,T,X,q,G,R,j,I,H,J;let K=class extends(l(c(o))){constructor(){super(...arguments),A.add(this),this._startMode="side",this._endMode="side",D.set(this,void 0),F.set(this,!1),P.set(this,!1),T.set(this,new m(this,{target:null,skipInitial:!0,callback:e=>t(this,A,"m",j).call(this,e)})),this.start=!1,this.startMode="side",this.startDivider=!1,this.end=!1,this.endMode="side",this.endDivider=!1}connectedCallback(){super.connectedCallback(),p(this,"--no-animate")}disconnectedCallback(){super.disconnectedCallback(),t(this,D,"f")?.call(this),t(this,A,"m",H).call(this)}willUpdate(e){super.willUpdate(e),(e.has("startMode")||e.has("endMode"))&&(t(this,D,"f")?.call(this),"auto"===this.startMode||"auto"===this.endMode?t(this,A,"m",I).call(this):t(this,A,"m",J).call(this)),e.has("start")?this.start&&this.end&&"side"!==this._endMode&&(this.end=!1,this.dispatchEvent(new Event("change",{bubbles:!0}))):e.has("end")&&this.end&&this.start&&"side"!==this._startMode&&(this.start=!1,this.dispatchEvent(new Event("change",{bubbles:!0})))}reconnectedCallback(){super.reconnectedCallback(),t(this,A,"m",X).call(this),"auto"!==this.startMode&&"auto"!==this.endMode||t(this,A,"m",I).call(this)}firstUpdated(e){super.firstUpdated(e),t(this,A,"m",X).call(this)}render(){return a`<div class="start"><m3e-focus-trap ?disabled="${!this.start||"side"===this._startMode||t(this,F,"f")}"><slot name="start" @slotchange="${t(this,A,"m",G)}"></slot></m3e-focus-trap></div><div class="content" .inert="${("side"!==this._startMode||"side"!==this._endMode)&&(this.start||this.end)}"><slot></slot></div><div class="scrim" @click="${t(this,A,"m",q)}"></div><div class="end"><m3e-focus-trap ?disabled="${!this.end||"side"===this._endMode||t(this,P,"f")}"><slot name="end" @slotchange="${t(this,A,"m",R)}"></slot></m3e-focus-trap></div>`}};var N,O,Q,V,Y,Z;D=new WeakMap,F=new WeakMap,P=new WeakMap,T=new WeakMap,A=new WeakSet,X=function(){let e=this.shadowRoot?.querySelector(".start");e&&t(this,T,"f").observe(e),e=this.shadowRoot?.querySelector(".end"),e&&t(this,T,"f").observe(e)},q=function(){"side"!==this._startMode&&(this.start=!1),"side"!==this._endMode&&(this.end=!1),this.dispatchEvent(new Event("change",{bubbles:!0}))},G=function(t){e(this,F,!u(t.target),"f")},R=function(t){e(this,P,!u(t.target),"f")},j=function(t){for(const e of t){const t=Array.isArray(e.borderBoxSize)?e.borderBoxSize[0]:e.borderBoxSize;e.target.classList.contains("start")?this.style.setProperty("--_start-drawer-size",`${t.inlineSize}px`):e.target.classList.contains("end")&&this.style.setProperty("--_end-drawer-size",`${t.inlineSize}px`)}v(this,"--no-animate")&&(this.offsetTop,b(this,"--no-animate"))},I=function(){e(this,D,$.observe([y.XSmall,y.Small],e=>t(this,A,"m",J).call(this,e,!0)),"f")},H=function(){b(this,"--start-over"),b(this,"--start-push"),b(this,"--start-side"),b(this,"--end-over"),b(this,"--end-push"),b(this,"--end-side")},J=function(e,s=!1){let i=!1,r=!1;"auto"===this.startMode?e?.get(y.Medium)?this._startMode="side":e?.get(y.Small)?(i="side"===this._startMode&&this.start,this._startMode="push"):e?.get(y.XSmall)?(i="over"!==this._startMode&&this.start,this._startMode="over"):this._startMode="side":this._startMode=this.startMode,"auto"===this.endMode?e?.get(y.Medium)?this._endMode="side":e?.get(y.Small)?(r="side"===this._endMode&&this.end,this._endMode="push"):e?.get(y.XSmall)?(r="over"!==this._endMode&&this.end,this._endMode="over"):this._endMode="side":this._endMode=this.endMode,t(this,A,"m",H).call(this),p(this,`--start-${this._startMode}`),p(this,`--end-${this._endMode}`),s&&(i||r)&&(i&&(this.start=!1),r&&(this.end=!1),this.dispatchEvent(new Event("change",{bubbles:!0})))},K.styles=U,s([n()],K.prototype,"_startMode",void 0),s([n()],K.prototype,"_endMode",void 0),s([d({type:Boolean,reflect:!0})],K.prototype,"start",void 0),s([d({attribute:"start-mode",reflect:!0})],K.prototype,"startMode",void 0),s([d({attribute:"start-divider",type:Boolean,reflect:!0})],K.prototype,"startDivider",void 0),s([d({type:Boolean,reflect:!0})],K.prototype,"end",void 0),s([d({attribute:"end-mode",reflect:!0})],K.prototype,"endMode",void 0),s([d({attribute:"end-divider",type:Boolean,reflect:!0})],K.prototype,"endDivider",void 0),K=s([g("m3e-drawer-container")],K);let tt=class extends(f(w)){constructor(){super(...arguments),N.add(this),O.set(this,()=>t(this,N,"m",V).call(this)),Q.set(this,!1)}attach(e){super.attach(e),this.htmlFor&&this.parentElement&&M(this.parentElement,"aria-controls",this.htmlFor);const s=e.closest("m3e-drawer-container");s&&(s.addEventListener("change",t(this,O,"f")),t(this,N,"m",Z).call(this,s,!0))}detach(){this.parentElement&&(this.htmlFor&&_(this.parentElement,"aria-controls",this.htmlFor),this.parentElement.ariaExpanded=null),this.control?.closest("m3e-drawer-container")?.removeEventListener("change",t(this,O,"f")),super.detach()}_onClick(){t(this,N,"m",Y).call(this)}};O=new WeakMap,Q=new WeakMap,N=new WeakSet,V=function(){if(this.control&&!t(this,Q,"f")){const e=this.control.closest("m3e-drawer-container");e&&t(this,N,"m",Z).call(this,e,!0)}},Y=async function(){if(!this.parentElement||!this.control)return;const s=this.control.closest("m3e-drawer-container");if(s){e(this,Q,!0,"f");try{"start"===this.control.slot?s.start=!s.start:"end"===this.control.slot&&(s.end=!s.end),s.isUpdatePending&&await s.updateComplete,await t(this,N,"m",Z).call(this,s,!1)}finally{e(this,Q,!1,"f")}}},Z=async function(t,e){if(!this.parentElement||!this.control)return;let s=!1;"start"===this.control.slot?s=t.start:"end"===this.control.slot&&(s=t.end),this.parentElement.ariaExpanded=`${s}`,e&&this.parentElement.hasAttribute("toggle")&&this.parentElement.toggleAttribute("selected",s),this.parentElement instanceof o&&(await this.parentElement.updateComplete,this.parentElement.ariaPressed=null)},tt=s([g("m3e-drawer-toggle")],tt);export{K as M3eDrawerContainerElement,tt as M3eDrawerToggleElement};
+import{__classPrivateFieldGet as t,__classPrivateFieldSet as e,__decorate as s}from"tslib";import{unsafeCSS as i,css as r,LitElement as o,html as a}from"lit";import{state as n,property as d}from"lit/decorators.js";import{DesignToken as h,ReconnectedCallback as l,AttachInternals as c,ResizeController as m,addCustomState as p,hasAssignedNodes as u,hasCustomState as v,deleteCustomState as b,customElement as g,HtmlFor as f,ActionElementBase as w}from"@m3e/web/core";import{M3eBreakpointObserver as $,Breakpoint as y}from"@m3e/web/core/layout";import{addAriaReferencedId as M,removeAriaReferencedId as _}from"@m3e/web/core/a11y";const x=i(`var(--m3e-drawer-container-color, ${h.color.surface})`),k=i(`var(--m3e-drawer-container-elevation, ${h.elevation.level0})`),E=i("var(--m3e-drawer-container-width, 22.5rem)"),z=i("var(--m3e-drawer-container-scrim-opacity, 32%)"),C=i(`var(--m3e-modal-drawer-corner-shape, ${h.shape.corner.large})`),S=i(`var(--m3e-modal-drawer-container-color, ${h.color.surfaceContainerLow})`),W=i(`var(--m3e-modal-drawer-elevation, ${h.elevation.level1})`),B=i(`var(--m3e-drawer-divider-color, ${h.color.outline})`),U=i("var(--m3e-drawer-divider-thickness, 1px)"),L=r`:host { display: block; position: relative; overflow: hidden; flex: 1 1 auto; } .start, .end { position: absolute; top: 0; bottom: 0; z-index: 3; outline: none; overflow-x: hidden; overflow-y: auto; scrollbar-width: ${h.scrollbar.thinWidth}; scrollbar-color: ${h.scrollbar.color}; box-sizing: border-box; background-color: ${x}; box-shadow: ${k}; transition: ${i(`margin ${h.motion.duration.medium4} ${h.motion.easing.standard},\n      visibility ${h.motion.duration.medium4} ${h.motion.easing.standard} allow-discrete,\n      background-color ${h.motion.duration.medium4} ${h.motion.easing.standard},\n      box-shadow ${h.motion.duration.medium4} ${h.motion.easing.standard}`)}; } .start { inset-inline-start: 0; } .end { inset-inline-end: 0; } :host(:not([start])) .start { visibility: hidden; } :host(:not([start]):not(:dir(rtl))) .start { margin-left: calc(0px - var(--_start-drawer-size, ${E})); } :host(:not([start]):dir(rtl)) .start { margin-right: calc(0px - var(--_start-drawer-size, ${E})); } :host([start]:not(:dir(rtl))) .start { margin-left: 0; } :host([start]:dir(rtl)) .start { margin-right: 0; } :host(:not([end])) .end { visibility: hidden; } :host(:not([end]):not(:dir(rtl))) .end { margin-right: calc(0px - var(--_end-drawer-size, ${E})); } :host(:not([end]):dir(rtl)) .end { margin-left: calc(0px - var(--_end-drawer-size, ${E})); } :host([end]:not(:dir(rtl))) .end { margin-right: 0; } :host([end]:dir(rtl)) .end { margin-left: 0; } ::slotted([slot="start"]), ::slotted([slot="end"]) { height: 100%; width: ${E}; box-sizing: border-box; } .content { position: relative; height: 100%; overflow: auto; margin-left: 0; margin-right: 0; transition: ${i(`margin ${h.motion.duration.medium4} ${h.motion.easing.standard}`)}; } :host(:is(:state(--start-push), :--start-push)[start]:not(:dir(rtl))) .content, :host(:is(:state(--start-side), :--start-side)[start]:not(:dir(rtl))) .content { margin-left: var(--_start-drawer-size, ${E}); } :host(:is(:state(--start-push), :--start-push)[start]:dir(rtl)) .content, :host(:is(:state(--start-side), :--start-side)[start]:dir(rtl)) .content { margin-right: var(--_start-drawer-size, ${E}); } :host(:is(:state(--end-push), :--end-push)[end]:not(:dir(rtl))) .content, :host(:is(:state(--end-side), :--end-side)[end]:not(:dir(rtl))) .content { margin-right: var(--_end-drawer-size, ${E}); } :host(:is(:state(--end-push), :--end-push)[end]:dir(rtl)) .content, :host(:is(:state(--end-side), :--end-side)[end]:dir(rtl)) .content { margin-left: var(--_end-drawer-size, ${E}); } .scrim { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; background-color: ${h.color.scrim}; opacity: 0; visibility: hidden; transition: ${i(`opacity ${h.motion.duration.medium4} ${h.motion.easing.standard}, \n        visibility ${h.motion.duration.medium4} ${h.motion.easing.standard} allow-discrete`)}; } @starting-style { .scrim { opacity: 0; } } :host(:is(:state(--start-push), :--start-push)[start]) .scrim, :host(:is(:state(--end-push), :--end-push)[end]) .scrim, :host(:is(:state(--start-over), :--start-over)[start]) .scrim, :host(:is(:state(--end-over), :--end-over)[end]) .scrim { visibility: visible; opacity: ${z}; } :host(:is(:state(--start-push), :--start-push)) .start, :host(:is(:state(--start-over), :--start-over)) .start { border-start-end-radius: ${C}; border-end-end-radius: ${C}; } :host(:is(:state(--end-push), :--end-push)) .end, :host(:is(:state(--end-over), :--end-over)) .end { border-start-start-radius: ${C}; border-end-start-radius: ${C}; } :host(:is(:state(--start-push), :--start-push)) .start, :host(:is(:state(--end-push), :--end-push)) .end, :host(:is(:state(--start-over), :--start-over)) .start, :host(:is(:state(--end-over), :--end-over)) .end { background-color: ${S}; box-shadow: ${W}; } :host([start-divider]) .start { border-inline-end-color: transparent; border-inline-end-width: ${U}; border-inline-end-style: solid; box-sizing: border-box; } :host( [start-divider]:is(:state(--start-side), :--start-side)[start]:not(:is(:state(--end-push), :--end-push)[end]):not( :is(:state(--end-over), :--end-over)[end] ) ) .start { border-inline-end-color: ${B}; } :host([end-divider]) .end { border-inline-start-color: transparent; border-inline-start-width: ${U}; border-inline-start-style: solid; box-sizing: border-box; } :host( [end-divider]:is(:state(--end-side), :--end-side)[end]:not(:is(:state(--start-push), :--start-push)[start]):not( :is(:state(--start-over), :--start-over)[start] ) ) .end { border-inline-start-color: ${B}; } :host(:is(:state(--no-animate), :--no-animate)) .start, :host(:is(:state(--no-animate), :--no-animate)) .end, :host(:is(:state(--no-animate), :--no-animate)) .content { transition: none; } @media (forced-colors: active) { .start, .end { background-color: Canvas; box-shadow: unset; transition: ${i(`margin ${h.motion.duration.medium4} ${h.motion.easing.standard},\n      visibility ${h.motion.duration.medium4} ${h.motion.easing.standard} allow-discrete`)}; } :host(:is(:state(--start-push), :--start-push)) .start, :host(:is(:state(--end-push), :--end-push)) .end, :host(:is(:state(--start-over), :--start-over)) .start, :host(:is(:state(--end-over), :--end-over)) .end { background-color: Canvas; box-shadow: unset; border-color: CanvasText; } .start, .end { border-style: solid; border-color: Canvas; border-width: 1px; } .start { border-inline-start-style: none; } .end { border-inline-end-style: none; } :host( [start-divider]:is(:state(--start-side), :--start-side)[start]:not( :is(:state(--end-push), :--end-push)[end] ):not(:is(:state(--end-over), :--end-over)[end]) ) .start { border-inline-end-color: GrayText; } :host( [end-divider]:is(:state(--end-side), :--end-side)[end]:not(:is(:state(--start-push), :--start-push)[start]):not( :is(:state(--start-over), :--start-over)[start] ) ) .end { border-inline-start-color: GrayText; } } @media (prefers-reduced-motion) { .start, .end, .content, .scrim { transition: none; } }`;var P,A,D,F,T,X,q,G,R,j,I,H,J;let K=class extends(l(c(o))){constructor(){super(...arguments),P.add(this),this._startMode="side",this._endMode="side",A.set(this,void 0),D.set(this,!1),F.set(this,!1),T.set(this,new m(this,{target:null,skipInitial:!0,callback:e=>t(this,P,"m",j).call(this,e)})),this.start=!1,this.startMode="side",this.startDivider=!1,this.end=!1,this.endMode="side",this.endDivider=!1}connectedCallback(){super.connectedCallback(),p(this,"--no-animate")}disconnectedCallback(){super.disconnectedCallback(),t(this,A,"f")?.call(this),t(this,P,"m",H).call(this)}willUpdate(e){super.willUpdate(e),(e.has("startMode")||e.has("endMode"))&&(t(this,A,"f")?.call(this),"auto"===this.startMode||"auto"===this.endMode?t(this,P,"m",I).call(this):t(this,P,"m",J).call(this)),e.has("start")?this.start&&this.end&&"side"!==this._endMode&&(this.end=!1):e.has("end")&&this.end&&this.start&&"side"!==this._startMode&&(this.start=!1)}reconnectedCallback(){super.reconnectedCallback(),t(this,P,"m",X).call(this),"auto"!==this.startMode&&"auto"!==this.endMode||t(this,P,"m",I).call(this)}firstUpdated(e){super.firstUpdated(e),t(this,P,"m",X).call(this)}render(){return a`<div class="start"><m3e-focus-trap ?disabled="${!this.start||"side"===this._startMode||t(this,D,"f")}"><slot name="start" @slotchange="${t(this,P,"m",G)}"></slot></m3e-focus-trap></div><div class="content" .inert="${("side"!==this._startMode||"side"!==this._endMode)&&(this.start||this.end)}"><slot></slot></div><div class="scrim" @click="${t(this,P,"m",q)}"></div><div class="end"><m3e-focus-trap ?disabled="${!this.end||"side"===this._endMode||t(this,F,"f")}"><slot name="end" @slotchange="${t(this,P,"m",R)}"></slot></m3e-focus-trap></div>`}};var N,O,Q,V,Y,Z;A=new WeakMap,D=new WeakMap,F=new WeakMap,T=new WeakMap,P=new WeakSet,X=function(){let e=this.shadowRoot?.querySelector(".start");e&&t(this,T,"f").observe(e),e=this.shadowRoot?.querySelector(".end"),e&&t(this,T,"f").observe(e)},q=function(){"side"!==this._startMode&&(this.start=!1),"side"!==this._endMode&&(this.end=!1),this.dispatchEvent(new Event("change",{bubbles:!0}))},G=function(t){e(this,D,!u(t.target),"f")},R=function(t){e(this,F,!u(t.target),"f")},j=function(t){for(const e of t){const t=Array.isArray(e.borderBoxSize)?e.borderBoxSize[0]:e.borderBoxSize;e.target.classList.contains("start")?this.style.setProperty("--_start-drawer-size",`${t.inlineSize}px`):e.target.classList.contains("end")&&this.style.setProperty("--_end-drawer-size",`${t.inlineSize}px`)}v(this,"--no-animate")&&(this.offsetTop,b(this,"--no-animate"))},I=function(){e(this,A,$.observe([y.XSmall,y.Small],e=>t(this,P,"m",J).call(this,e,!0)),"f")},H=function(){b(this,"--start-over"),b(this,"--start-push"),b(this,"--start-side"),b(this,"--end-over"),b(this,"--end-push"),b(this,"--end-side")},J=async function(e,s=!1){let i=!1,r=!1;"auto"===this.startMode?e?.get(y.Medium)?this._startMode="side":e?.get(y.Small)?(i="side"===this._startMode&&this.start,this._startMode="push"):e?.get(y.XSmall)?(i="over"!==this._startMode&&this.start,this._startMode="over"):this._startMode="side":this._startMode=this.startMode,"auto"===this.endMode?e?.get(y.Medium)?this._endMode="side":e?.get(y.Small)?(r="side"===this._endMode&&this.end,this._endMode="push"):e?.get(y.XSmall)?(r="over"!==this._endMode&&this.end,this._endMode="over"):this._endMode="side":this._endMode=this.endMode,t(this,P,"m",H).call(this),p(this,`--start-${this._startMode}`),p(this,`--end-${this._endMode}`),s&&(i||r)&&(i&&(this.start=!1),r&&(this.end=!1),this.isUpdatePending&&await this.updateComplete,this.dispatchEvent(new Event("change",{bubbles:!0})))},K.styles=L,s([n()],K.prototype,"_startMode",void 0),s([n()],K.prototype,"_endMode",void 0),s([d({type:Boolean,reflect:!0})],K.prototype,"start",void 0),s([d({attribute:"start-mode",reflect:!0})],K.prototype,"startMode",void 0),s([d({attribute:"start-divider",type:Boolean,reflect:!0})],K.prototype,"startDivider",void 0),s([d({type:Boolean,reflect:!0})],K.prototype,"end",void 0),s([d({attribute:"end-mode",reflect:!0})],K.prototype,"endMode",void 0),s([d({attribute:"end-divider",type:Boolean,reflect:!0})],K.prototype,"endDivider",void 0),K=s([g("m3e-drawer-container")],K);let tt=class extends(f(w)){constructor(){super(...arguments),N.add(this),O.set(this,()=>t(this,N,"m",V).call(this)),Q.set(this,!1)}attach(e){super.attach(e),this.htmlFor&&this.parentElement&&M(this.parentElement,"aria-controls",this.htmlFor);const s=e.closest("m3e-drawer-container");s&&(s.addEventListener("change",t(this,O,"f")),t(this,N,"m",Z).call(this,s,!0))}detach(){this.parentElement&&(this.htmlFor&&_(this.parentElement,"aria-controls",this.htmlFor),this.parentElement.ariaExpanded=null),this.control?.closest("m3e-drawer-container")?.removeEventListener("change",t(this,O,"f")),super.detach()}_onClick(){t(this,N,"m",Y).call(this)}};O=new WeakMap,Q=new WeakMap,N=new WeakSet,V=function(){if(this.control&&!t(this,Q,"f")){const e=this.control.closest("m3e-drawer-container");e&&t(this,N,"m",Z).call(this,e,!0)}},Y=async function(){if(!this.parentElement||!this.control)return;const s=this.control.closest("m3e-drawer-container");if(s){e(this,Q,!0,"f");try{let e=!1;"start"===this.control.slot?(s.start=!s.start,e=!0):"end"===this.control.slot&&(s.end=!s.end,e=!0),s.isUpdatePending&&await s.updateComplete,e&&s.dispatchEvent(new Event("change",{bubbles:!0})),await t(this,N,"m",Z).call(this,s,!1)}finally{e(this,Q,!1,"f")}}},Z=async function(t,e){if(!this.parentElement||!this.control)return;let s=!1;"start"===this.control.slot?s=t.start:"end"===this.control.slot&&(s=t.end),this.parentElement.ariaExpanded=`${s}`,e&&this.parentElement.hasAttribute("toggle")&&this.parentElement.toggleAttribute("selected",s),this.parentElement instanceof o&&(await this.parentElement.updateComplete,this.parentElement.ariaPressed=null)},tt=s([g("m3e-drawer-toggle")],tt);export{K as M3eDrawerContainerElement,tt as M3eDrawerToggleElement};
 //# sourceMappingURL=drawer-container.min.js.map

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 - 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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"}
+{"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      }\r\n    } else if (changedProperties.has(\"end\")) {\r\n      if (this.end && this.start && this._startMode !== \"side\") {\r\n        this.start = false;\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  async #updateMode(breakpoints?: Map<string, boolean>, autoClose = false): Promise<void> {\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      if (this.isUpdatePending) {\r\n        await this.updateComplete;\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        let changed = false;\r\n        if (this.control.slot === \"start\") {\r\n          container.start = !container.start;\r\n          changed = true;\r\n        } else if (this.control.slot === \"end\") {\r\n          container.end = !container.end;\r\n          changed = true;\r\n        }\r\n        if (container.isUpdatePending) {\r\n          await container.updateComplete;\r\n        }\r\n        if (changed) {\r\n          container.dispatchEvent(new Event(\"change\", { bubbles: true }));\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","reconnectedCallback","_M3eDrawerContainerElement_initialize","firstUpdated","_changedProperties","render","html","_M3eDrawerContainerElement_handleStartSlotChange","_M3eDrawerContainerElement_handleScrimClick","_M3eDrawerContainerElement_handleEndSlotChange","drawer","shadowRoot","querySelector","observe","dispatchEvent","Event","bubbles","e","__classPrivateFieldSet","hasAssignedNodes","entry","borderSize","Array","isArray","borderBoxSize","classList","contains","style","setProperty","inlineSize","hasCustomState","offsetTop","deleteCustomState","M3eBreakpointObserver","Breakpoint","XSmall","Small","matches","async","breakpoints","autoClose","autoCloseStart","autoCloseEnd","get","Medium","isUpdatePending","updateComplete","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","changed","slot","_M3eDrawerToggleElement_updateToggle","syncToggle","selected","hasAttribute","toggleAttribute","ariaPressed"],"mappings":";;;;;onBAQO,MAAMA,EACKC,EAAU,qCAAqCC,EAAYC,MAAMC,YADtEJ,EAESC,EAAU,yCAAyCC,EAAYG,UAAUC,WAFlFN,EAGKC,EAAU,8CAHfD,EAIGC,EAAU,kDAJbD,EAKEC,EAAU,wCAAwCC,EAAYK,MAAMC,OAAOC,UAL7ET,EAMUC,EAAU,2CAA2CC,EAAYC,MAAMO,wBANjFV,EAOcC,EAAU,qCAAqCC,EAAYG,UAAUM,WAPnFX,EAQGC,EAAU,mCAAmCC,EAAYC,MAAMS,YARlEZ,EASOC,EAAU,4CCPjBY,EAAuCC,CAAG,2NAgBhCZ,EAAYa,UAAUC,+BACtBd,EAAYa,UAAUZ,oDAErBH,kBACNA,kBACAC,EACZ,UAAUC,EAAYe,OAAOC,SAASC,WAAWjB,EAAYe,OAAOG,OAAOC,+BAC9DnB,EAAYe,OAAOC,SAASC,WAAWjB,EAAYe,OAAOG,OAAOC,oDAC3DnB,EAAYe,OAAOC,SAASC,WAAWjB,EAAYe,OAAOG,OAAOC,+BACvEnB,EAAYe,OAAOC,SAASC,WAAWjB,EAAYe,OAAOG,OAAOC,qOAa5BrB,oGAGCA,iQAYFA,6FAGDA,yLAWzCA,0IASKC,EAAU,UAAUC,EAAYe,OAAOC,SAASC,WAAWjB,EAAYe,OAAOG,OAAOC,0NAI1DrB,sMAICA,oMAIFA,uLAIDA,0HAUnBE,EAAYC,MAAMmB,sDAGxBrB,EACZ,WAAWC,EAAYe,OAAOC,SAASC,WAAWjB,EAAYe,OAAOG,OAAOC,kCAC7DnB,EAAYe,OAAOC,SAASC,WAAWjB,EAAYe,OAAOG,OAAOC,2VAavErB,kJAIgBA,6BACFA,wIAIIA,+BACFA,+OAMPA,kBACNA,uGAIaA,0QAUAA,uGAIEA,gRAUAA,8SAYbC,EACZ,UAAUC,EAAYe,OAAOC,SAASC,WAAWjB,EAAYe,OAAOG,OAAOC,+BAChEnB,EAAYe,OAAOC,SAASC,WAAWjB,EAAYe,OAAOG,OAAOC,0gCCpH7E,IAAME,EAAN,cAAwCC,EAAoBC,EAAgBC,KAA5EC,WAAAA,mCAI4BC,KAAAC,WAA0C,OAC1CD,KAAAE,SAAwC,OACzDC,EAAAC,IAAAJ,aACAK,EAAAD,IAAAJ,MAAyB,GACzBM,EAAAF,IAAAJ,MAAuB,GAGvCO,EAAAH,IAAAJ,KAAoB,IAAIQ,EAAiBR,KAAM,CAC7CS,OAAQ,KACRC,aAAa,EACbC,SAAWC,GAAYC,EAAAb,KAAIc,EAAA,IAAAC,GAAoBC,KAAxBhB,KAAyBY,MAONZ,KAAAiB,OAAQ,EAMEjB,KAAAkB,UAAwB,OAMNlB,KAAAmB,cAAe,EAM3CnB,KAAAoB,KAAM,EAMEpB,KAAAqB,QAAsB,OAMJrB,KAAAsB,YAAa,CAwMrF,CArMWC,iBAAAA,GACPC,MAAMD,oBACNE,EAAezB,KAAM,eACvB,CAGS0B,oBAAAA,GACPF,MAAME,uBAENb,EAAAb,KAAIG,EAAA,MAAuBa,KAA3BhB,MACAa,EAAAb,KAAIc,EAAA,IAAAa,GAAWX,KAAfhB,KACF,CAGmB4B,UAAAA,CAAWC,GAC5BL,MAAMI,WAAWC,IAEbA,EAAkBC,IAAI,cAAgBD,EAAkBC,IAAI,cAC9DjB,EAAAb,KAAIG,EAAA,MAAuBa,KAA3BhB,MAEuB,SAAnBA,KAAKkB,WAAyC,SAAjBlB,KAAKqB,QACpCR,EAAAb,KAAIc,EAAA,IAAAiB,GAA0Bf,KAA9BhB,MAEAa,EAAAb,KAAIc,EAAA,IAAAkB,GAAYhB,KAAhBhB,OAIA6B,EAAkBC,IAAI,SACpB9B,KAAKiB,OAASjB,KAAKoB,KAAyB,SAAlBpB,KAAKE,WACjCF,KAAKoB,KAAM,GAEJS,EAAkBC,IAAI,QAC3B9B,KAAKoB,KAAOpB,KAAKiB,OAA6B,SAApBjB,KAAKC,aACjCD,KAAKiB,OAAQ,EAGnB,CAGSgB,mBAAAA,GACPT,MAAMS,sBACNpB,EAAAb,KAAIc,EAAA,IAAAoB,GAAYlB,KAAhBhB,MAEuB,SAAnBA,KAAKkB,WAAyC,SAAjBlB,KAAKqB,SACpCR,EAAAb,KAAIc,EAAA,IAAAiB,GAA0Bf,KAA9BhB,KAEJ,CAGmBmC,YAAAA,CAAaC,GAC9BZ,MAAMW,aAAaC,GACnBvB,EAAAb,KAAIc,EAAA,IAAAoB,GAAYlB,KAAhBhB,KACF,CAGmBqC,MAAAA,GACjB,OAAOC,CAAI,kDACuBtC,KAAKiB,OAA6B,SAApBjB,KAAKC,YAAyBY,EAAAb,KAAIK,EAAA,yCAC1CQ,EAAAb,KAAIc,EAAA,IAAAyB,mEAKT,SAApBvC,KAAKC,YAA2C,SAAlBD,KAAKE,YAAyBF,KAAKiB,OAASjB,KAAKoB,uDAI/DP,EAAAb,KAAIc,EAAA,IAAA0B,0DAEDxC,KAAKoB,KAAyB,SAAlBpB,KAAKE,UAAuBW,EAAAb,KAAIM,EAAA,uCACxCO,EAAAb,KAAIc,EAAA,IAAA2B,oCAG5C,sGAIE,IAAIC,EAAS1C,KAAK2C,YAAYC,cAA2B,UACrDF,GAAQ7B,EAAAb,KAAIO,EAAA,KAAmBsC,QAAQH,GAC3CA,EAAS1C,KAAK2C,YAAYC,cAAc,QACpCF,GAAQ7B,EAAAb,KAAIO,EAAA,KAAmBsC,QAAQH,EAC7C,eAI0B,SAApB1C,KAAKC,aACPD,KAAKiB,OAAQ,GAEO,SAAlBjB,KAAKE,WACPF,KAAKoB,KAAM,GAEbpB,KAAK8C,cAAc,IAAIC,MAAM,SAAU,CAAEC,SAAS,IACpD,aAGuBC,GACrBC,EAAAlD,KAAIK,GAA2B8C,EAAkCF,EAAExC,QAAO,IAC5E,aAGqBwC,GACnBC,EAAAlD,KAAIM,GAAyB6C,EAAkCF,EAAExC,QAAO,IAC1E,aAGoBG,GAClB,IAAK,MAAMwC,KAASxC,EAAS,CAC3B,MAAMyC,EAAiCC,MAAMC,QAAQH,EAAMI,eACvDJ,EAAMI,cAAc,GACpBJ,EAAMI,cAENJ,EAAM3C,OAAOgD,UAAUC,SAAS,SAClC1D,KAAK2D,MAAMC,YAAY,uBAAwB,GAAGP,EAAWQ,gBACpDT,EAAM3C,OAAOgD,UAAUC,SAAS,QACzC1D,KAAK2D,MAAMC,YAAY,qBAAsB,GAAGP,EAAWQ,eAE/D,CAEIC,EAAe9D,KAAM,kBAElBA,KAAK+D,UACVC,EAAkBhE,KAAM,gBAE5B,eAIEkD,EAAAlD,KAAIG,EAAwB8D,EAAsBpB,QAAQ,CAACqB,EAAWC,OAAQD,EAAWE,OAASC,GAChGxD,EAAAb,KAAIc,EAAA,IAAAkB,GAAYhB,KAAhBhB,KAAiBqE,GAAS,QAE9B,eAIEL,EAAkBhE,KAAM,gBACxBgE,EAAkBhE,KAAM,gBACxBgE,EAAkBhE,KAAM,gBACxBgE,EAAkBhE,KAAM,cACxBgE,EAAkBhE,KAAM,cACxBgE,EAAkBhE,KAAM,aAC1B,IAGAsE,eAAkBC,EAAoCC,GAAY,GAChE,IAAIC,GAAiB,EACnBC,GAAe,EACM,SAAnB1E,KAAKkB,UACHqD,GAAaI,IAAIT,EAAWU,QAC9B5E,KAAKC,WAAa,OACTsE,GAAaI,IAAIT,EAAWE,QACrCK,EAAqC,SAApBzE,KAAKC,YAAyBD,KAAKiB,MACpDjB,KAAKC,WAAa,QACTsE,GAAaI,IAAIT,EAAWC,SACrCM,EAAqC,SAApBzE,KAAKC,YAAyBD,KAAKiB,MACpDjB,KAAKC,WAAa,QAElBD,KAAKC,WAAa,OAGpBD,KAAKC,WAAaD,KAAKkB,UAGJ,SAAjBlB,KAAKqB,QACHkD,GAAaI,IAAIT,EAAWU,QAC9B5E,KAAKE,SAAW,OACPqE,GAAaI,IAAIT,EAAWE,QACrCM,EAAiC,SAAlB1E,KAAKE,UAAuBF,KAAKoB,IAChDpB,KAAKE,SAAW,QACPqE,GAAaI,IAAIT,EAAWC,SACrCO,EAAiC,SAAlB1E,KAAKE,UAAuBF,KAAKoB,IAChDpB,KAAKE,SAAW,QAEhBF,KAAKE,SAAW,OAGlBF,KAAKE,SAAWF,KAAKqB,QAGvBR,EAAAb,KAAIc,EAAA,IAAAa,GAAWX,KAAfhB,MAEAyB,EAAezB,KAAM,WAAWA,KAAKC,cACrCwB,EAAezB,KAAM,SAASA,KAAKE,YAE/BsE,IAAcC,GAAkBC,KAC9BD,IACFzE,KAAKiB,OAAQ,GAEXyD,IACF1E,KAAKoB,KAAM,GAGTpB,KAAK6E,uBACD7E,KAAK8E,eAEb9E,KAAK8C,cAAc,IAAIC,MAAM,SAAU,CAAEC,SAAS,KAEtD,EAxPgBrD,EAAAoF,OAAyB9F,EAER+F,EAAA,CAAhBC,KAAiEtF,EAAAuF,UAAA,qBACjDF,EAAA,CAAhBC,KAA+DtF,EAAAuF,UAAA,mBAgBpCF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsB3F,EAAAuF,UAAA,aAAA,GAMJF,EAAA,CAArDG,EAAS,CAAEI,UAAW,aAAcD,SAAS,KAAuC3F,EAAAuF,UAAA,iBAAA,GAMbF,EAAA,CAAvEG,EAAS,CAAEI,UAAW,gBAAiBH,KAAMC,QAASC,SAAS,KAA6B3F,EAAAuF,UAAA,oBAAA,GAMjDF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAoB3F,EAAAuF,UAAA,WAAA,GAMJF,EAAA,CAAnDG,EAAS,CAAEI,UAAW,WAAYD,SAAS,KAAqC3F,EAAAuF,UAAA,eAAA,GAMXF,EAAA,CAArEG,EAAS,CAAEI,UAAW,cAAeH,KAAMC,QAASC,SAAS,KAA2B3F,EAAAuF,UAAA,kBAAA,GAnD9EvF,EAAyBqF,EAAA,CADrCQ,EAAc,yBACF7F,GCzCN,IAAM8F,GAAN,cAAqCC,EAAQC,IAA7C5F,WAAAA,mCACoB6F,EAAAxF,IAAAJ,KAAgC,IAAMa,EAAAb,KAAI6F,EAAA,IAAAC,GAA6B9E,KAAjChB,OAC/C+F,EAAA3F,IAAAJ,MAAkB,EAuGpC,CApGWgG,MAAAA,CAAOC,GACdzE,MAAMwE,OAAOC,GAETjG,KAAKkG,SAAWlG,KAAKmG,eACvBC,EAAoBpG,KAAKmG,cAAe,gBAAiBnG,KAAKkG,SAGhE,MAAMG,EAAYJ,EAAQK,QAAQ,wBAC9BD,IACFA,EAAUE,iBAAiB,SAAU1F,EAAAb,KAAI4F,EAAA,MACzC/E,EAAAb,cAAkBgB,KAAlBhB,KAAmBqG,GAAW,GAElC,CAGSG,MAAAA,GACHxG,KAAKmG,gBACHnG,KAAKkG,SACPO,EAAuBzG,KAAKmG,cAAe,gBAAiBnG,KAAKkG,SAGnElG,KAAKmG,cAAcO,aAAe,MAGpC1G,KAAKiG,SAASK,QAAQ,yBAAyBK,oBAAoB,SAAU9F,EAAAb,KAAI4F,EAAA,MAEjFpE,MAAMgF,QACR,CAGSI,QAAAA,GACP/F,EAAAb,KAAI6F,EAAA,IAAAgB,GAAc7F,KAAlBhB,KACF,0DAIE,GAAIA,KAAKiG,UAAYpF,EAAAb,KAAI+F,EAAA,KAAkB,CACzC,MAAMM,EAAYrG,KAAKiG,QAAQK,QAAQ,wBACnCD,GACFxF,EAAAb,cAAkBgB,KAAlBhB,KAAmBqG,GAAW,EAElC,CACF,IAGA/B,iBACE,IAAKtE,KAAKmG,gBAAkBnG,KAAKiG,QAC/B,OAGF,MAAMI,EAAYrG,KAAKiG,QAAQK,QAAQ,wBACvC,GAAID,EAAW,CACbnD,EAAAlD,KAAI+F,GAAmB,EAAI,KAC3B,IACE,IAAIe,GAAU,EACY,UAAtB9G,KAAKiG,QAAQc,MACfV,EAAUpF,OAASoF,EAAUpF,MAC7B6F,GAAU,GACqB,QAAtB9G,KAAKiG,QAAQc,OACtBV,EAAUjF,KAAOiF,EAAUjF,IAC3B0F,GAAU,GAERT,EAAUxB,uBACNwB,EAAUvB,eAEdgC,GACFT,EAAUvD,cAAc,IAAIC,MAAM,SAAU,CAAEC,SAAS,WAEnDnC,EAAAb,KAAI6F,EAAA,IAAAmB,GAAchG,KAAlBhB,KAAmBqG,GAAW,EACtC,CAAC,QACCnD,EAAAlD,KAAI+F,GAAmB,EAAK,IAC9B,CACF,CACF,IAGAzB,eAAoB+B,EAAsCY,GACxD,IAAKjH,KAAKmG,gBAAkBnG,KAAKiG,QAC/B,OAGF,IAAIiB,GAAW,EACW,UAAtBlH,KAAKiG,QAAQc,KACfG,EAAWb,EAAUpF,MACU,QAAtBjB,KAAKiG,QAAQc,OACtBG,EAAWb,EAAUjF,KAGvBpB,KAAKmG,cAAcO,aAAe,GAAGQ,IAEjCD,GAAcjH,KAAKmG,cAAcgB,aAAa,WAChDnH,KAAKmG,cAAciB,gBAAgB,WAAYF,GAG7ClH,KAAKmG,yBAAyBrG,UAEzBE,KAAKmG,cAA6BrB,eACzC9E,KAAKmG,cAAckB,YAAc,KAErC,EAxGW5B,GAAsBT,EAAA,CADlCQ,EAAc,sBACFC"}