@m3e/web 2.5.3 → 2.5.5

package/dist/dialog.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.min.js","sources":["../../src/dialog/DialogActionElement.ts","../../src/dialog/DialogElement.ts","../../src/dialog/DialogTriggerElement.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\r\n\r\nimport { ActionElementBase, customElement } from \"@m3e/web/core\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to close a parenting dialog.\r\n * @tag m3e-dialog-action\r\n *\r\n * @slot - Renders the content of the action.\r\n *\r\n * @attr return-value - The value to return from the dialog.\r\n */\r\n@customElement(\"m3e-dialog-action\")\r\nexport class M3eDialogActionElement extends ActionElementBase {\r\n  /**\r\n   * The value to return from the dialog.\r\n   * @default \"\"\r\n   */\r\n  @property({ attribute: \"return-value\" }) returnValue = \"\";\r\n\r\n  /** @inheritdoc */\r\n  protected override _onClick(): void {\r\n    this.closest(\"m3e-dialog\")?.hide(this.returnValue);\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-dialog-action\": M3eDialogActionElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, nothing, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  EventAttribute,\r\n  focusWhenReady,\r\n  ScrollLockController,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport \"@m3e/web/core/a11y\";\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * A dialog that provides important prompts in a user flow.\r\n *\r\n * @description\r\n * The `m3e-dialog` component presents important prompts, alerts, and actions in user flows.\r\n * Designed according to Material 3 principles, it supports custom header, content, and\r\n * close icon slots, ARIA accessibility, focus management, and theming via CSS custom properties.\r\n *\r\n * @example\r\n * ```html\r\n * <m3e-button variant=\"filled\">\r\n *   <m3e-dialog-trigger for=\"dlg\">Open Dialog</m3e-dialog-trigger>\r\n * </m3e-button>\r\n * <m3e-dialog id=\"dlg\" dismissible onclosed=\"console.log(this.returnValue)\">\r\n *   <span slot=\"header\">Dialog Title</span>\r\n *   Dialog content goes here.\r\n *   <div slot=\"actions\" end>\r\n *     <m3e-button autofocus><m3e-dialog-action return-value=\"ok\">Close</m3e-dialog-action></m3e-button>\r\n *   </div>\r\n * </m3e-dialog>\r\n * ```\r\n *\r\n * @tag m3e-dialog\r\n *\r\n * @slot - Renders the content of the dialog.\r\n * @slot header - Renders the header of the dialog.\r\n * @slot actions - Renders the actions of the dialog.\r\n * @slot close-icon - Renders the icon of the button used to close the dialog.\r\n *\r\n * @attr alert - Whether the dialog is an alert.\r\n * @attr close-label - The accessible label given to the button used to dismiss the dialog.\r\n * @attr disable-close -Whether users cannot click the backdrop or press escape to dismiss the dialog.\r\n * @attr dismissible - Whether a button is presented that can be used to close the dialog.\r\n * @attr no-focus-trap - Whether to disable focus trapping, which keeps keyboard `Tab` navigation within the dialog.\r\n * @attr open - Whether the dialog is open.\r\n *\r\n * @fires opening - Emitted when the dialog begins to open.\r\n * @fires opened - Emitted when the dialog has opened.\r\n * @fires cancel - Emitted when the dialog is cancelled.\r\n * @fires closing - Emitted when the dialog begins to close.\r\n * @fires closed - Emitted when the dialog has closed.\r\n *\r\n * @cssprop --m3e-dialog-shape - Border radius of the dialog container.\r\n * @cssprop --m3e-dialog-min-width - Minimum width of the dialog.\r\n * @cssprop --m3e-dialog-max-width - Maximum width of the dialog.\r\n * @cssprop --m3e-dialog-color - Foreground color of the dialog.\r\n * @cssprop --m3e-dialog-container-color - Background color of the dialog container.\r\n * @cssprop --m3e-dialog-scrim-color - Color of the scrim (backdrop overlay).\r\n * @cssprop --m3e-dialog-scrim-opacity - Opacity of the scrim when open.\r\n * @cssprop --m3e-dialog-header-container-color - Background color of the dialog header.\r\n * @cssprop --m3e-dialog-header-color - Foreground color of the dialog header.\r\n * @cssprop --m3e-dialog-header-font-size - Font size for the dialog header.\r\n * @cssprop --m3e-dialog-header-font-weight - Font weight for the dialog header.\r\n * @cssprop --m3e-dialog-header-line-height - Line height for the dialog header.\r\n * @cssprop --m3e-dialog-header-tracking - Letter spacing for the dialog header.\r\n * @cssprop --m3e-dialog-content-color - Foreground color of the dialog content.\r\n * @cssprop --m3e-dialog-content-font-size - Font size for the dialog content.\r\n * @cssprop --m3e-dialog-content-font-weight - Font weight for the dialog content.\r\n * @cssprop --m3e-dialog-content-line-height - Line height for the dialog content.\r\n * @cssprop --m3e-dialog-content-tracking - Letter spacing for the dialog content.\r\n */\r\n@customElement(\"m3e-dialog\")\r\nexport class M3eDialogElement extends EventAttribute(\r\n  AttachInternals(LitElement),\r\n  \"opening\",\r\n  \"opened\",\r\n  \"cancel\",\r\n  \"closing\",\r\n  \"closed\",\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: contents;\r\n    }\r\n    .base {\r\n      font: inherit;\r\n      border: unset;\r\n      outline: unset;\r\n      padding: unset;\r\n      display: flex;\r\n      flex-direction: column;\r\n      position: fixed;\r\n      overflow: visible;\r\n      border-radius: var(--m3e-dialog-shape, ${DesignToken.shape.corner.extraLarge});\r\n      min-width: var(--m3e-dialog-min-width, 17.5rem);\r\n      max-width: var(--m3e-dialog-max-width, 35rem);\r\n      color: var(--m3e-dialog-color, ${DesignToken.color.onSurface});\r\n      background-color: var(--m3e-dialog-container-color, ${DesignToken.color.surfaceContainerHigh});\r\n      visibility: hidden;\r\n      opacity: 0;\r\n      transform-origin: top;\r\n      transform: translateY(-3.125rem) scaleY(0.8);\r\n    }\r\n    .base::backdrop {\r\n      background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) 0%, transparent);\r\n      margin-inline-end: -20px;\r\n    }\r\n    .base:not([open]) {\r\n      visibility: hidden;\r\n      opacity: 0;\r\n      transform: translateY(-3.125rem) scaleY(0.8);\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized}, \r\n        transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized},\r\n        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized} allow-discrete`,\r\n      )};\r\n    }\r\n    .base[open] {\r\n      visibility: visible;\r\n      opacity: 1;\r\n      transform: translateY(0) scaleY(1);\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized}, \r\n        transform ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized},\r\n        overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized} allow-discrete`,\r\n      )};\r\n    }\r\n    .base:not([open])::backdrop {\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    .base[open]::backdrop {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) var(--m3e-dialog-scrim-opacity, 32%),\r\n        transparent\r\n      );\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}, \r\n        overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    @starting-style {\r\n      .base[open] {\r\n        opacity: 0;\r\n        transform: translateY(-3.125rem) scaleY(0.8);\r\n      }\r\n      .base[open]::backdrop {\r\n        background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) 0%, transparent);\r\n      }\r\n    }\r\n    .header {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      padding: 1.5rem 1.5rem 1rem 1.5rem;\r\n      background-color: var(--m3e-dialog-header-container-color, transparent);\r\n    }\r\n    ::slotted([slot=\"header\"]) {\r\n      margin: unset;\r\n      flex: 1 1 auto;\r\n      color: var(--m3e-dialog-header-color, inherit);\r\n      font-size: var(--m3e-dialog-header-font-size, ${DesignToken.typescale.standard.headline.small.fontSize});\r\n      font-weight: var(--m3e-dialog-header-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight});\r\n      line-height: var(--m3e-dialog-header-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight});\r\n      letter-spacing: var(--m3e-dialog-header-tracking, ${DesignToken.typescale.standard.headline.small.tracking});\r\n    }\r\n    .content {\r\n      padding-inline: 1.5rem;\r\n      color: var(--m3e-dialog-content-color, ${DesignToken.color.onSurfaceVariant});\r\n      font-size: var(--m3e-dialog-content-font-size, ${DesignToken.typescale.standard.body.medium.fontSize});\r\n      font-weight: var(--m3e-dialog-content-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight});\r\n      line-height: var(--m3e-dialog-content-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight});\r\n      letter-spacing: var(--m3e-dialog-content-tracking, ${DesignToken.typescale.standard.body.medium.tracking});\r\n    }\r\n    .actions {\r\n      padding: 1.5rem;\r\n    }\r\n    ::slotted([slot=\"actions\"]) {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      min-height: 1.5rem;\r\n      column-gap: 0.5rem;\r\n    }\r\n    ::slotted([slot=\"actions\"][end]) {\r\n      justify-content: flex-end;\r\n    }\r\n    :host(:not(:state(-with-actions))) .content {\r\n      margin-bottom: 1.5rem;\r\n    }\r\n    :host(:not(:state(-with-actions))) .actions {\r\n      display: none;\r\n    }\r\n    .close {\r\n      margin-inline-start: 0.5rem;\r\n    }\r\n    ::slotted([slot=\"close-icon\"]),\r\n    .close-icon {\r\n      width: 1em;\r\n      font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important;\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base:not([open])::backdrop,\r\n      .base[open]::backdrop {\r\n        transition: none;\r\n      }\r\n      .base {\r\n        border-style: solid;\r\n        border-width: 1px;\r\n        border-color: CanvasText;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base:not([open]),\r\n      .base[open],\r\n      .base:not([open])::backdrop,\r\n      .base[open]::backdrop {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ #id = M3eDialogElement.__nextId++;\r\n\r\n  /** @private */ #open = false;\r\n  /** @private */ #escapePressedWithoutCancel = false;\r\n  /** @private */ @state() private _withActions = false;\r\n  /** @private */ @query(\".base\") private readonly _base!: HTMLDialogElement;\r\n  /** @private */ @query(\".content\") private readonly _content!: HTMLDialogElement;\r\n\r\n  /** @private */ readonly #scrollLockController = new ScrollLockController(this);\r\n\r\n  /**\r\n   * Whether the dialog is an alert.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) alert = false;\r\n\r\n  /**\r\n   * Whether the dialog is open.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) get open() {\r\n    return this.#open;\r\n  }\r\n  set open(value: boolean) {\r\n    if (value === this.#open) return;\r\n    this.#open = value;\r\n    if (this.#open) {\r\n      this.show();\r\n    } else {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Whether a button is presented that can be used to close the dialog.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) dismissible = false;\r\n\r\n  /**\r\n   * Whether users cannot click the backdrop or press ESC to dismiss the dialog.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"disable-close\", type: Boolean }) disableClose = false;\r\n\r\n  /**\r\n   * Whether to disable focus trapping, which keeps keyboard `Tab` navigation within the dialog.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"no-focus-trap\", type: Boolean }) noFocusTrap = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to dismiss the dialog.\r\n   * @default \"Close\"\r\n   */\r\n  @property({ attribute: \"close-label\" }) closeLabel = \"Close\";\r\n\r\n  /**\r\n   * The return value of the dialog.\r\n   * @default \"\"\r\n   */\r\n  returnValue = \"\";\r\n\r\n  /**\r\n   * Asynchronously opens the dialog.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the dialog is open.\r\n   */\r\n  async show(): Promise<void> {\r\n    await this.updateComplete;\r\n\r\n    if (this._base.open) {\r\n      return;\r\n    }\r\n\r\n    if (!this.dispatchEvent(new Event(\"opening\", { cancelable: true }))) {\r\n      this.open = false;\r\n      return;\r\n    }\r\n\r\n    this.#scrollLockController.lock();\r\n    this._base.showModal();\r\n    this._content.scrollTop = 0;\r\n    const focusable = this.querySelector<HTMLElement>(\"[autofocus]\");\r\n\r\n    if (focusable) {\r\n      focusWhenReady(focusable);\r\n    }\r\n\r\n    this.dispatchEvent(new Event(\"opened\"));\r\n  }\r\n\r\n  /**\r\n   * Asynchronously closes the dialog.\r\n   * @param {string} returnValue The value to return.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the dialog is closed.\r\n   */\r\n  async hide(returnValue: string = this.returnValue): Promise<void> {\r\n    if (!this.isConnected) {\r\n      this.open = false;\r\n      return;\r\n    }\r\n\r\n    await this.updateComplete;\r\n\r\n    this.#scrollLockController.unlock();\r\n\r\n    if (!this._base.open) {\r\n      this.open = false;\r\n      return;\r\n    }\r\n\r\n    const prevReturnValue = this.returnValue;\r\n    this.returnValue = returnValue;\r\n\r\n    if (!this.dispatchEvent(new Event(\"closing\", { cancelable: true }))) {\r\n      this.returnValue = prevReturnValue;\r\n      return;\r\n    }\r\n\r\n    this.open = false;\r\n    this._base.close(returnValue);\r\n    this.dispatchEvent(new Event(\"closed\"));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<dialog\r\n      class=\"base\"\r\n      role=\"${ifDefined(this.alert ? \"alertdialog\" : undefined)}\"\r\n      aria-labelledby=\"m3e-dialog-${this.#id}-header\"\r\n      .returnValue=\"${this.returnValue}\"\r\n      @close=\"${this.#handleClose}\"\r\n      @cancel=\"${this.#handleCancel}\"\r\n      @click=\"${this.#handleClick}\"\r\n      @keydown=\"${this.#handleKeyDown}\"\r\n    >\r\n      <m3e-elevation level=\"3\"></m3e-elevation>\r\n      <m3e-focus-trap ?disabled=\"${this.noFocusTrap}\">\r\n        <div class=\"header\">\r\n          <slot name=\"header\" id=\"m3e-dialog-${this.#id}-header\"></slot>\r\n          ${this.#renderCloseButton()}\r\n        </div>\r\n        <m3e-scroll-container class=\"content\" dividers=\"${this._withActions ? \"above-below\" : \"above\"}\">\r\n          <slot></slot>\r\n        </m3e-scroll-container>\r\n        <div class=\"actions\">\r\n          <slot name=\"actions\" @slotchange=\"${this.#handleActionsSlotChange}\"></slot>\r\n        </div>\r\n      </m3e-focus-trap>\r\n    </dialog>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderCloseButton(): unknown {\r\n    return !this.dismissible\r\n      ? nothing\r\n      : html`<m3e-icon-button aria-label=\"${this.closeLabel}\" class=\"close\" @click=\"${this.hide}\">\r\n          <slot name=\"close-icon\">\r\n            <svg class=\"close-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path\r\n                d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"\r\n              />\r\n            </svg>\r\n          </slot>\r\n        </m3e-icon-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClose(): void {\r\n    if (!this.#escapePressedWithoutCancel) {\r\n      return;\r\n    }\r\n    this.#escapePressedWithoutCancel = true;\r\n    this._base?.dispatchEvent(new Event(\"cancel\", { cancelable: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleCancel(e: Event): void {\r\n    if (e.target !== this._base) return;\r\n    this.#escapePressedWithoutCancel = false;\r\n    e.preventDefault();\r\n    if (this.dispatchEvent(new Event(\"cancel\", { cancelable: true }))) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (!this.disableClose && e.target === this._base) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n      e.preventDefault();\r\n      if (!this.disableClose) {\r\n        this.hide();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleActionsSlotChange(e: Event): void {\r\n    this._withActions = (<HTMLSlotElement>e.target).assignedNodes({ flatten: true }).length > 0;\r\n    setCustomState(this, \"-with-actions\", this._withActions);\r\n  }\r\n}\r\n\r\ninterface M3eDialogElementEventMap extends HTMLElementEventMap {\r\n  opening: Event;\r\n  opened: Event;\r\n  closing: Event;\r\n  closed: Event;\r\n  cancel: Event;\r\n}\r\n\r\nexport interface M3eDialogElement {\r\n  addEventListener<K extends keyof M3eDialogElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eDialogElement, ev: M3eDialogElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eDialogElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eDialogElement, ev: M3eDialogElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-dialog\": M3eDialogElement;\r\n  }\r\n}\r\n","import { ActionElementBase, customElement, HtmlFor } from \"@m3e/web/core\";\r\n\r\nimport { M3eDialogElement } from \"./DialogElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to open a dialog.\r\n * @tag m3e-dialog-trigger\r\n */\r\n@customElement(\"m3e-dialog-trigger\")\r\nexport class M3eDialogTriggerElement extends HtmlFor(ActionElementBase) {\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = \"dialog\";\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = null;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    if (this.control instanceof M3eDialogElement) {\r\n      this.control.show();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-dialog-trigger\": M3eDialogTriggerElement;\r\n  }\r\n}\r\n"],"names":["M3eDialogActionElement","ActionElementBase","constructor","this","returnValue","_onClick","closest","hide","__decorate","property","attribute","prototype","customElement","M3eDialogElement","EventAttribute","AttachInternals","LitElement","_M3eDialogElement_id","set","M3eDialogElement_1","__nextId","_M3eDialogElement_open","_M3eDialogElement_escapePressedWithoutCancel","_withActions","_M3eDialogElement_scrollLockController","ScrollLockController","alert","dismissible","disableClose","noFocusTrap","closeLabel","open","__classPrivateFieldGet","value","__classPrivateFieldSet","show","updateComplete","_base","dispatchEvent","Event","cancelable","lock","showModal","_content","scrollTop","focusable","querySelector","focusWhenReady","isConnected","unlock","prevReturnValue","close","render","html","ifDefined","undefined","_M3eDialogElement_instances","_M3eDialogElement_handleClose","_M3eDialogElement_handleCancel","_M3eDialogElement_handleClick","_M3eDialogElement_handleKeyDown","_M3eDialogElement_renderCloseButton","call","_M3eDialogElement_handleActionsSlotChange","nothing","e","target","preventDefault","key","shiftKey","ctrlKey","assignedNodes","flatten","length","setCustomState","styles","css","DesignToken","shape","corner","extraLarge","color","onSurface","surfaceContainerHigh","scrim","unsafeCSS","motion","duration","short3","easing","emphasized","long2","standard","typescale","headline","small","fontSize","fontWeight","lineHeight","tracking","onSurfaceVariant","body","medium","state","query","type","Boolean","reflect","M3eDialogTriggerElement","HtmlFor","connectedCallback","super","parentElement","ariaHasPopup","disconnectedCallback","control"],"mappings":"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"}
+{"version":3,"file":"dialog.min.js","sources":["../../src/dialog/DialogActionElement.ts","../../src/dialog/DialogElement.ts","../../src/dialog/DialogTriggerElement.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\r\n\r\nimport { ActionElementBase, customElement } from \"@m3e/web/core\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to close a parenting dialog.\r\n * @tag m3e-dialog-action\r\n *\r\n * @slot - Renders the content of the action.\r\n *\r\n * @attr return-value - The value to return from the dialog.\r\n */\r\n@customElement(\"m3e-dialog-action\")\r\nexport class M3eDialogActionElement extends ActionElementBase {\r\n  /**\r\n   * The value to return from the dialog.\r\n   * @default \"\"\r\n   */\r\n  @property({ attribute: \"return-value\" }) returnValue = \"\";\r\n\r\n  /** @inheritdoc */\r\n  protected override _onClick(): void {\r\n    this.closest(\"m3e-dialog\")?.hide(this.returnValue);\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-dialog-action\": M3eDialogActionElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, nothing, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  focusWhenReady,\r\n  ScrollLockController,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport \"@m3e/web/core/a11y\";\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * A dialog that provides important prompts in a user flow.\r\n *\r\n * @description\r\n * The `m3e-dialog` component presents important prompts, alerts, and actions in user flows.\r\n * Designed according to Material 3 principles, it supports custom header, content, and\r\n * close icon slots, ARIA accessibility, focus management, and theming via CSS custom properties.\r\n *\r\n * @example\r\n * ```html\r\n * <m3e-button variant=\"filled\">\r\n *   <m3e-dialog-trigger for=\"dlg\">Open Dialog</m3e-dialog-trigger>\r\n * </m3e-button>\r\n * <m3e-dialog id=\"dlg\" dismissible onclosed=\"console.log(this.returnValue)\">\r\n *   <span slot=\"header\">Dialog Title</span>\r\n *   Dialog content goes here.\r\n *   <div slot=\"actions\" end>\r\n *     <m3e-button autofocus><m3e-dialog-action return-value=\"ok\">Close</m3e-dialog-action></m3e-button>\r\n *   </div>\r\n * </m3e-dialog>\r\n * ```\r\n *\r\n * @tag m3e-dialog\r\n *\r\n * @slot - Renders the content of the dialog.\r\n * @slot header - Renders the header of the dialog.\r\n * @slot actions - Renders the actions of the dialog.\r\n * @slot close-icon - Renders the icon of the button used to close the dialog.\r\n *\r\n * @attr alert - Whether the dialog is an alert.\r\n * @attr close-label - The accessible label given to the button used to dismiss the dialog.\r\n * @attr disable-close -Whether users cannot click the backdrop or press escape to dismiss the dialog.\r\n * @attr dismissible - Whether a button is presented that can be used to close the dialog.\r\n * @attr no-focus-trap - Whether to disable focus trapping, which keeps keyboard `Tab` navigation within the dialog.\r\n * @attr open - Whether the dialog is open.\r\n *\r\n * @fires opening - Emitted when the dialog begins to open.\r\n * @fires opened - Emitted when the dialog has opened.\r\n * @fires cancel - Emitted when the dialog is cancelled.\r\n * @fires closing - Emitted when the dialog begins to close.\r\n * @fires closed - Emitted when the dialog has closed.\r\n *\r\n * @cssprop --m3e-dialog-shape - Border radius of the dialog container.\r\n * @cssprop --m3e-dialog-min-width - Minimum width of the dialog.\r\n * @cssprop --m3e-dialog-max-width - Maximum width of the dialog.\r\n * @cssprop --m3e-dialog-color - Foreground color of the dialog.\r\n * @cssprop --m3e-dialog-container-color - Background color of the dialog container.\r\n * @cssprop --m3e-dialog-scrim-color - Color of the scrim (backdrop overlay).\r\n * @cssprop --m3e-dialog-scrim-opacity - Opacity of the scrim when open.\r\n * @cssprop --m3e-dialog-header-container-color - Background color of the dialog header.\r\n * @cssprop --m3e-dialog-header-color - Foreground color of the dialog header.\r\n * @cssprop --m3e-dialog-header-font-size - Font size for the dialog header.\r\n * @cssprop --m3e-dialog-header-font-weight - Font weight for the dialog header.\r\n * @cssprop --m3e-dialog-header-line-height - Line height for the dialog header.\r\n * @cssprop --m3e-dialog-header-tracking - Letter spacing for the dialog header.\r\n * @cssprop --m3e-dialog-content-color - Foreground color of the dialog content.\r\n * @cssprop --m3e-dialog-content-font-size - Font size for the dialog content.\r\n * @cssprop --m3e-dialog-content-font-weight - Font weight for the dialog content.\r\n * @cssprop --m3e-dialog-content-line-height - Line height for the dialog content.\r\n * @cssprop --m3e-dialog-content-tracking - Letter spacing for the dialog content.\r\n */\r\n@customElement(\"m3e-dialog\")\r\nexport class M3eDialogElement extends AttachInternals(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: contents;\r\n    }\r\n    .base {\r\n      font: inherit;\r\n      border: unset;\r\n      outline: unset;\r\n      padding: unset;\r\n      display: flex;\r\n      flex-direction: column;\r\n      position: fixed;\r\n      overflow: visible;\r\n      border-radius: var(--m3e-dialog-shape, ${DesignToken.shape.corner.extraLarge});\r\n      min-width: var(--m3e-dialog-min-width, 17.5rem);\r\n      max-width: var(--m3e-dialog-max-width, 35rem);\r\n      color: var(--m3e-dialog-color, ${DesignToken.color.onSurface});\r\n      background-color: var(--m3e-dialog-container-color, ${DesignToken.color.surfaceContainerHigh});\r\n      visibility: hidden;\r\n      opacity: 0;\r\n      transform-origin: top;\r\n      transform: translateY(-3.125rem) scaleY(0.8);\r\n    }\r\n    .base::backdrop {\r\n      background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) 0%, transparent);\r\n      margin-inline-end: -20px;\r\n    }\r\n    .base:not([open]) {\r\n      visibility: hidden;\r\n      opacity: 0;\r\n      transform: translateY(-3.125rem) scaleY(0.8);\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized}, \r\n        transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized},\r\n        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.emphasized} allow-discrete`,\r\n      )};\r\n    }\r\n    .base[open] {\r\n      visibility: visible;\r\n      opacity: 1;\r\n      transform: translateY(0) scaleY(1);\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized}, \r\n        transform ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized},\r\n        overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.emphasized} allow-discrete`,\r\n      )};\r\n    }\r\n    .base:not([open])::backdrop {\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    .base[open]::backdrop {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) var(--m3e-dialog-scrim-opacity, 32%),\r\n        transparent\r\n      );\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}, \r\n        overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    @starting-style {\r\n      .base[open] {\r\n        opacity: 0;\r\n        transform: translateY(-3.125rem) scaleY(0.8);\r\n      }\r\n      .base[open]::backdrop {\r\n        background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) 0%, transparent);\r\n      }\r\n    }\r\n    .header {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      padding: 1.5rem 1.5rem 1rem 1.5rem;\r\n      background-color: var(--m3e-dialog-header-container-color, transparent);\r\n    }\r\n    ::slotted([slot=\"header\"]) {\r\n      margin: unset;\r\n      flex: 1 1 auto;\r\n      color: var(--m3e-dialog-header-color, inherit);\r\n      font-size: var(--m3e-dialog-header-font-size, ${DesignToken.typescale.standard.headline.small.fontSize});\r\n      font-weight: var(--m3e-dialog-header-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight});\r\n      line-height: var(--m3e-dialog-header-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight});\r\n      letter-spacing: var(--m3e-dialog-header-tracking, ${DesignToken.typescale.standard.headline.small.tracking});\r\n    }\r\n    .content {\r\n      padding-inline: 1.5rem;\r\n      color: var(--m3e-dialog-content-color, ${DesignToken.color.onSurfaceVariant});\r\n      font-size: var(--m3e-dialog-content-font-size, ${DesignToken.typescale.standard.body.medium.fontSize});\r\n      font-weight: var(--m3e-dialog-content-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight});\r\n      line-height: var(--m3e-dialog-content-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight});\r\n      letter-spacing: var(--m3e-dialog-content-tracking, ${DesignToken.typescale.standard.body.medium.tracking});\r\n    }\r\n    .actions {\r\n      padding: 1.5rem;\r\n    }\r\n    ::slotted([slot=\"actions\"]) {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      min-height: 1.5rem;\r\n      column-gap: 0.5rem;\r\n    }\r\n    ::slotted([slot=\"actions\"][end]) {\r\n      justify-content: flex-end;\r\n    }\r\n    :host(:not(:is(:state(--with-actions), :--with-actions))) .content {\r\n      margin-bottom: 1.5rem;\r\n    }\r\n    :host(:not(:is(:state(--with-actions), :--with-actions))) .actions {\r\n      display: none;\r\n    }\r\n    .close {\r\n      margin-inline-start: 0.5rem;\r\n    }\r\n    ::slotted([slot=\"close-icon\"]),\r\n    .close-icon {\r\n      width: 1em;\r\n      font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important;\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base:not([open])::backdrop,\r\n      .base[open]::backdrop {\r\n        transition: none;\r\n      }\r\n      .base {\r\n        border-style: solid;\r\n        border-width: 1px;\r\n        border-color: CanvasText;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base:not([open]),\r\n      .base[open],\r\n      .base:not([open])::backdrop,\r\n      .base[open]::backdrop {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ #id = M3eDialogElement.__nextId++;\r\n\r\n  /** @private */ #open = false;\r\n  /** @private */ #escapePressedWithoutCancel = false;\r\n  /** @private */ @state() private _withActions = false;\r\n  /** @private */ @query(\".base\") private readonly _base!: HTMLDialogElement;\r\n  /** @private */ @query(\".content\") private readonly _content!: HTMLDialogElement;\r\n\r\n  /** @private */ readonly #scrollLockController = new ScrollLockController(this);\r\n\r\n  /**\r\n   * Whether the dialog is an alert.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) alert = false;\r\n\r\n  /**\r\n   * Whether the dialog is open.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) get open() {\r\n    return this.#open;\r\n  }\r\n  set open(value: boolean) {\r\n    if (value === this.#open) return;\r\n    this.#open = value;\r\n    if (this.#open) {\r\n      this.show();\r\n    } else {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Whether a button is presented that can be used to close the dialog.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) dismissible = false;\r\n\r\n  /**\r\n   * Whether users cannot click the backdrop or press ESC to dismiss the dialog.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"disable-close\", type: Boolean }) disableClose = false;\r\n\r\n  /**\r\n   * Whether to disable focus trapping, which keeps keyboard `Tab` navigation within the dialog.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"no-focus-trap\", type: Boolean }) noFocusTrap = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to dismiss the dialog.\r\n   * @default \"Close\"\r\n   */\r\n  @property({ attribute: \"close-label\" }) closeLabel = \"Close\";\r\n\r\n  /**\r\n   * The return value of the dialog.\r\n   * @default \"\"\r\n   */\r\n  returnValue = \"\";\r\n\r\n  /**\r\n   * Asynchronously opens the dialog.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the dialog is open.\r\n   */\r\n  async show(): Promise<void> {\r\n    await this.updateComplete;\r\n\r\n    if (this._base.open) {\r\n      return;\r\n    }\r\n\r\n    if (!this.dispatchEvent(new Event(\"opening\", { cancelable: true }))) {\r\n      this.open = false;\r\n      return;\r\n    }\r\n\r\n    this.#scrollLockController.lock();\r\n    this._base.showModal();\r\n    this._content.scrollTop = 0;\r\n    const focusable = this.querySelector<HTMLElement>(\"[autofocus]\");\r\n\r\n    if (focusable) {\r\n      focusWhenReady(focusable);\r\n    }\r\n\r\n    this.dispatchEvent(new Event(\"opened\"));\r\n  }\r\n\r\n  /**\r\n   * Asynchronously closes the dialog.\r\n   * @param {string} returnValue The value to return.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the dialog is closed.\r\n   */\r\n  async hide(returnValue: string = this.returnValue): Promise<void> {\r\n    if (!this.isConnected) {\r\n      this.open = false;\r\n      return;\r\n    }\r\n\r\n    await this.updateComplete;\r\n\r\n    this.#scrollLockController.unlock();\r\n\r\n    if (!this._base.open) {\r\n      this.open = false;\r\n      return;\r\n    }\r\n\r\n    const prevReturnValue = this.returnValue;\r\n    this.returnValue = returnValue;\r\n\r\n    if (!this.dispatchEvent(new Event(\"closing\", { cancelable: true }))) {\r\n      this.returnValue = prevReturnValue;\r\n      return;\r\n    }\r\n\r\n    this.open = false;\r\n    this._base.close(returnValue);\r\n    this.dispatchEvent(new Event(\"closed\"));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<dialog\r\n      class=\"base\"\r\n      role=\"${ifDefined(this.alert ? \"alertdialog\" : undefined)}\"\r\n      aria-labelledby=\"m3e-dialog-${this.#id}-header\"\r\n      .returnValue=\"${this.returnValue}\"\r\n      @close=\"${this.#handleClose}\"\r\n      @cancel=\"${this.#handleCancel}\"\r\n      @click=\"${this.#handleClick}\"\r\n      @keydown=\"${this.#handleKeyDown}\"\r\n    >\r\n      <m3e-elevation level=\"3\"></m3e-elevation>\r\n      <m3e-focus-trap ?disabled=\"${this.noFocusTrap}\">\r\n        <div class=\"header\">\r\n          <slot name=\"header\" id=\"m3e-dialog-${this.#id}-header\"></slot>\r\n          ${this.#renderCloseButton()}\r\n        </div>\r\n        <m3e-scroll-container class=\"content\" dividers=\"${this._withActions ? \"above-below\" : \"above\"}\">\r\n          <slot></slot>\r\n        </m3e-scroll-container>\r\n        <div class=\"actions\">\r\n          <slot name=\"actions\" @slotchange=\"${this.#handleActionsSlotChange}\"></slot>\r\n        </div>\r\n      </m3e-focus-trap>\r\n    </dialog>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderCloseButton(): unknown {\r\n    return !this.dismissible\r\n      ? nothing\r\n      : html`<m3e-icon-button aria-label=\"${this.closeLabel}\" class=\"close\" @click=\"${this.hide}\">\r\n          <slot name=\"close-icon\">\r\n            <svg class=\"close-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path\r\n                d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"\r\n              />\r\n            </svg>\r\n          </slot>\r\n        </m3e-icon-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClose(): void {\r\n    if (!this.#escapePressedWithoutCancel) {\r\n      return;\r\n    }\r\n    this.#escapePressedWithoutCancel = true;\r\n    this._base?.dispatchEvent(new Event(\"cancel\", { cancelable: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleCancel(e: Event): void {\r\n    if (e.target !== this._base) return;\r\n    this.#escapePressedWithoutCancel = false;\r\n    e.preventDefault();\r\n    if (this.dispatchEvent(new Event(\"cancel\", { cancelable: true }))) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (!this.disableClose && e.target === this._base) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n      e.preventDefault();\r\n      if (!this.disableClose) {\r\n        this.hide();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleActionsSlotChange(e: Event): void {\r\n    this._withActions = (<HTMLSlotElement>e.target).assignedNodes({ flatten: true }).length > 0;\r\n    setCustomState(this, \"--with-actions\", this._withActions);\r\n  }\r\n}\r\n\r\ninterface M3eDialogElementEventMap extends HTMLElementEventMap {\r\n  opening: Event;\r\n  opened: Event;\r\n  closing: Event;\r\n  closed: Event;\r\n  cancel: Event;\r\n}\r\n\r\nexport interface M3eDialogElement {\r\n  addEventListener<K extends keyof M3eDialogElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eDialogElement, ev: M3eDialogElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eDialogElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eDialogElement, ev: M3eDialogElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-dialog\": M3eDialogElement;\r\n  }\r\n}\r\n","import { ActionElementBase, customElement, HtmlFor } from \"@m3e/web/core\";\r\n\r\nimport { M3eDialogElement } from \"./DialogElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to open a dialog.\r\n * @tag m3e-dialog-trigger\r\n */\r\n@customElement(\"m3e-dialog-trigger\")\r\nexport class M3eDialogTriggerElement extends HtmlFor(ActionElementBase) {\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = \"dialog\";\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = null;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    if (this.control instanceof M3eDialogElement) {\r\n      this.control.show();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-dialog-trigger\": M3eDialogTriggerElement;\r\n  }\r\n}\r\n"],"names":["M3eDialogActionElement","ActionElementBase","constructor","this","returnValue","_onClick","closest","hide","__decorate","property","attribute","prototype","customElement","M3eDialogElement","AttachInternals","LitElement","_M3eDialogElement_id","set","M3eDialogElement_1","__nextId","_M3eDialogElement_open","_M3eDialogElement_escapePressedWithoutCancel","_withActions","_M3eDialogElement_scrollLockController","ScrollLockController","alert","dismissible","disableClose","noFocusTrap","closeLabel","open","__classPrivateFieldGet","value","__classPrivateFieldSet","show","updateComplete","_base","dispatchEvent","Event","cancelable","lock","showModal","_content","scrollTop","focusable","querySelector","focusWhenReady","isConnected","unlock","prevReturnValue","close","render","html","ifDefined","undefined","_M3eDialogElement_instances","_M3eDialogElement_handleClose","_M3eDialogElement_handleCancel","_M3eDialogElement_handleClick","_M3eDialogElement_handleKeyDown","_M3eDialogElement_renderCloseButton","call","_M3eDialogElement_handleActionsSlotChange","nothing","e","target","preventDefault","key","shiftKey","ctrlKey","assignedNodes","flatten","length","setCustomState","styles","css","DesignToken","shape","corner","extraLarge","color","onSurface","surfaceContainerHigh","scrim","unsafeCSS","motion","duration","short3","easing","emphasized","long2","standard","typescale","headline","small","fontSize","fontWeight","lineHeight","tracking","onSurfaceVariant","body","medium","state","query","type","Boolean","reflect","M3eDialogTriggerElement","HtmlFor","connectedCallback","super","parentElement","ariaHasPopup","disconnectedCallback","control"],"mappings":"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"}

package/dist/drawer-container.js

@@ -33,9 +33,9 @@ const DrawerContainerToken = {
 const DrawerContainerStyle = css`: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: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; box-sizing: border-box; background-color: ${DrawerContainerToken.containerColor}; box-shadow: ${DrawerContainerToken.containerElevation}; transition: ${unsafeCSS(`margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},
       visibility ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard} allow-discrete,
       background-color ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},
-      box-shadow ${DesignToken.motion.duration.medium4} ${DesignToken.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, ${DrawerContainerToken.containerWidth})); } :host(:not([start]):dir(rtl)) .start { margin-right: calc(0px - var(--_start-drawer-size, ${DrawerContainerToken.containerWidth})); } :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, ${DrawerContainerToken.containerWidth})); } :host(:not([end]):dir(rtl)) .end { margin-left: calc(0px - var(--_end-drawer-size, ${DrawerContainerToken.containerWidth})); } :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: ${DrawerContainerToken.containerWidth}; box-sizing: border-box; } .content { position: relative; height: 100%; overflow: auto; margin-left: 0; margin-right: 0; transition: ${unsafeCSS(`margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}`)}; } :host(:state(-start-push)[start]:not(:dir(rtl))) .content, :host(:state(-start-side)[start]:not(:dir(rtl))) .content { margin-left: var(--_start-drawer-size, ${DrawerContainerToken.containerWidth}); } :host(:state(-start-push)[start]:dir(rtl)) .content, :host(:state(-start-side)[start]:dir(rtl)) .content { margin-right: var(--_start-drawer-size, ${DrawerContainerToken.containerWidth}); } :host(:state(-end-push)[end]:not(:dir(rtl))) .content, :host(:state(-end-side)[end]:not(:dir(rtl))) .content { margin-right: var(--_end-drawer-size, ${DrawerContainerToken.containerWidth}); } :host(:state(-end-push)[end]:dir(rtl)) .content, :host(:state(-end-side)[end]:dir(rtl)) .content { margin-left: var(--_end-drawer-size, ${DrawerContainerToken.containerWidth}); } .scrim { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; background-color: ${DesignToken.color.scrim}; opacity: 0; visibility: hidden; transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}, 
-        visibility ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard} allow-discrete`)}; } @starting-style { .scrim { opacity: 0; } } :host(:state(-start-push)[start]) .scrim, :host(:state(-end-push)[end]) .scrim, :host(:state(-start-over)[start]) .scrim, :host(:state(-end-over)[end]) .scrim { visibility: visible; opacity: ${DrawerContainerToken.scrimOpacity}; } :host(:state(-start-push)) .start, :host(:state(-start-over)) .start { border-start-end-radius: ${DrawerContainerToken.cornerShape}; border-end-end-radius: ${DrawerContainerToken.cornerShape}; } :host(:state(-end-push)) .end, :host(:state(-end-over)) .end { border-start-start-radius: ${DrawerContainerToken.cornerShape}; border-end-start-radius: ${DrawerContainerToken.cornerShape}; } :host(:state(-start-push)) .start, :host(:state(-end-push)) .end, :host(:state(-start-over)) .start, :host(:state(-end-over)) .end { background-color: ${DrawerContainerToken.modalContainerColor}; box-shadow: ${DrawerContainerToken.modalContainerElevation}; } :host([start-divider]) .start { border-inline-end-color: transparent; border-inline-end-width: ${DrawerContainerToken.dividerThickness}; border-inline-end-style: solid; box-sizing: border-box; } :host([start-divider]:state(-start-side)[start]:not(:state(-end-push)[end]):not(:state(-end-over)[end])) .start { border-inline-end-color: ${DrawerContainerToken.dividerColor}; } :host([end-divider]) .end { border-inline-start-color: transparent; border-inline-start-width: ${DrawerContainerToken.dividerThickness}; border-inline-start-style: solid; box-sizing: border-box; } :host([end-divider]:state(-end-side)[end]:not(:state(-start-push)[start]):not(:state(-start-over)[start])) .end { border-inline-start-color: ${DrawerContainerToken.dividerColor}; } :host(:state(-no-animate)) .start, :host(:state(-no-animate)) .end, :host(:state(-no-animate)) .content { transition: none; } @media (forced-colors: active) { .start, .end { background-color: Canvas; box-shadow: unset; transition: ${unsafeCSS(`margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},
-      visibility ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host(:state(-start-push)) .start, :host(:state(-end-push)) .end, :host(:state(-start-over)) .start, :host(:state(-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]:state(-start-side)[start]:not(:state(-end-push)[end]):not(:state(-end-over)[end])) .start { border-inline-end-color: GrayText; } :host([end-divider]:state(-end-side)[end]:not(:state(-start-push)[start]):not(:state(-start-over)[start])) .end { border-inline-start-color: GrayText; } } @media (prefers-reduced-motion) { .start, .end, .content, .scrim { transition: none; } }`;
+      box-shadow ${DesignToken.motion.duration.medium4} ${DesignToken.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, ${DrawerContainerToken.containerWidth})); } :host(:not([start]):dir(rtl)) .start { margin-right: calc(0px - var(--_start-drawer-size, ${DrawerContainerToken.containerWidth})); } :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, ${DrawerContainerToken.containerWidth})); } :host(:not([end]):dir(rtl)) .end { margin-left: calc(0px - var(--_end-drawer-size, ${DrawerContainerToken.containerWidth})); } :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: ${DrawerContainerToken.containerWidth}; box-sizing: border-box; } .content { position: relative; height: 100%; overflow: auto; margin-left: 0; margin-right: 0; transition: ${unsafeCSS(`margin ${DesignToken.motion.duration.medium4} ${DesignToken.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, ${DrawerContainerToken.containerWidth}); } :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, ${DrawerContainerToken.containerWidth}); } :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, ${DrawerContainerToken.containerWidth}); } :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, ${DrawerContainerToken.containerWidth}); } .scrim { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; background-color: ${DesignToken.color.scrim}; opacity: 0; visibility: hidden; transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard}, 
+        visibility ${DesignToken.motion.duration.medium4} ${DesignToken.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: ${DrawerContainerToken.scrimOpacity}; } :host(:is(:state(--start-push), :--start-push)) .start, :host(:is(:state(--start-over), :--start-over)) .start { border-start-end-radius: ${DrawerContainerToken.cornerShape}; border-end-end-radius: ${DrawerContainerToken.cornerShape}; } :host(:is(:state(--end-push), :--end-push)) .end, :host(:is(:state(--end-over), :--end-over)) .end { border-start-start-radius: ${DrawerContainerToken.cornerShape}; border-end-start-radius: ${DrawerContainerToken.cornerShape}; } :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: ${DrawerContainerToken.modalContainerColor}; box-shadow: ${DrawerContainerToken.modalContainerElevation}; } :host([start-divider]) .start { border-inline-end-color: transparent; border-inline-end-width: ${DrawerContainerToken.dividerThickness}; 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: ${DrawerContainerToken.dividerColor}; } :host([end-divider]) .end { border-inline-start-color: transparent; border-inline-start-width: ${DrawerContainerToken.dividerThickness}; 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: ${DrawerContainerToken.dividerColor}; } :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: ${unsafeCSS(`margin ${DesignToken.motion.duration.medium4} ${DesignToken.motion.easing.standard},
+      visibility ${DesignToken.motion.duration.medium4} ${DesignToken.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 _M3eDrawerContainerElement_instances, _M3eDrawerContainerElement_breakpointUnobserve, _M3eDrawerContainerElement_disableStartFocusTrap, _M3eDrawerContainerElement_disableEndFocusTrap, _M3eDrawerContainerElement_resizeController, _M3eDrawerContainerElement_initialize, _M3eDrawerContainerElement_handleScrimClick, _M3eDrawerContainerElement_handleStartSlotChange, _M3eDrawerContainerElement_handleEndSlotChange, _M3eDrawerContainerElement_handleDrawerResize, _M3eDrawerContainerElement_initBreakpointMonitoring, _M3eDrawerContainerElement_clearMode, _M3eDrawerContainerElement_updateMode;
 /**
@@ -143,7 +143,7 @@ let M3eDrawerContainerElement = class M3eDrawerContainerElement extends Reconnec
   /** @inheritdoc */
   connectedCallback() {
     super.connectedCallback();
-    addCustomState(this, "-no-animate");
+    addCustomState(this, "--no-animate");
   }
   /** @inheritdoc */
   disconnectedCallback() {
@@ -233,22 +233,22 @@ _M3eDrawerContainerElement_handleDrawerResize = function _M3eDrawerContainerElem
       this.style.setProperty("--_end-drawer-size", `${borderSize.inlineSize}px`);
     }
   }
-  if (hasCustomState(this, "-no-animate")) {
+  if (hasCustomState(this, "--no-animate")) {
     // Force synchronous layout flush
     void this.offsetTop;
-    deleteCustomState(this, "-no-animate");
+    deleteCustomState(this, "--no-animate");
   }
 };
 _M3eDrawerContainerElement_initBreakpointMonitoring = function _M3eDrawerContainerElement_initBreakpointMonitoring() {
   __classPrivateFieldSet(this, _M3eDrawerContainerElement_breakpointUnobserve, M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], matches => __classPrivateFieldGet(this, _M3eDrawerContainerElement_instances, "m", _M3eDrawerContainerElement_updateMode).call(this, matches, true)), "f");
 };
 _M3eDrawerContainerElement_clearMode = function _M3eDrawerContainerElement_clearMode() {
-  deleteCustomState(this, "-start-over");
-  deleteCustomState(this, "-start-push");
-  deleteCustomState(this, "-start-side");
-  deleteCustomState(this, "-end-over");
-  deleteCustomState(this, "-end-push");
-  deleteCustomState(this, "-end-side");
+  deleteCustomState(this, "--start-over");
+  deleteCustomState(this, "--start-push");
+  deleteCustomState(this, "--start-side");
+  deleteCustomState(this, "--end-over");
+  deleteCustomState(this, "--end-push");
+  deleteCustomState(this, "--end-side");
 };
 _M3eDrawerContainerElement_updateMode = function _M3eDrawerContainerElement_updateMode(breakpoints, autoClose = false) {
   let autoCloseStart = false,
@@ -284,8 +284,8 @@ _M3eDrawerContainerElement_updateMode = function _M3eDrawerContainerElement_upda
     this._endMode = this.endMode;
   }
   __classPrivateFieldGet(this, _M3eDrawerContainerElement_instances, "m", _M3eDrawerContainerElement_clearMode).call(this);
-  addCustomState(this, `-start-${this._startMode}`);
-  addCustomState(this, `-end-${this._endMode}`);
+  addCustomState(this, `--start-${this._startMode}`);
+  addCustomState(this, `--end-${this._endMode}`);
   if (autoClose && (autoCloseStart || autoCloseEnd)) {
     if (autoCloseStart) {
       this.start = false;

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