@m3e/web 2.5.13 → 2.5.15

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  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 - Dispatched when the dialog begins to open.\r\n * @fires opened - Dispatched when the dialog has opened.\r\n * @fires cancel - Dispatched when the dialog is cancelled.\r\n * @fires closing - Dispatched when the dialog begins to close.\r\n * @fires closed - Dispatched 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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"}
+{"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 - Dispatched when the dialog begins to open.\r\n * @fires opened - Dispatched when the dialog has opened.\r\n * @fires cancel - Dispatched when the dialog is cancelled.\r\n * @fires closing - Dispatched when the dialog begins to close.\r\n * @fires closed - Dispatched 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      contain: layout style;\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/divider.js

@@ -66,7 +66,7 @@ let M3eDividerElement = class M3eDividerElement extends Role(LitElement, "separa
   }
 };
 /** The styles of the element. */
-M3eDividerElement.styles = css`:host { display: block; position: relative; } :host(:not([vertical])) { height: var(--m3e-divider-thickness, 1px); width: 100%; } :host([vertical]) { width: var(--m3e-divider-thickness, 1px); height: 100%; } .line { box-sizing: border-box; position: absolute; } :host(:not([vertical])) .line { border-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); height: inherit; } :host([vertical]) .line { border-right: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); width: inherit; } :host([vertical][inset]) .line, :host([vertical][inset-start]) .line { top: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem)); } :host(:not([vertical])[inset]) .line, :host(:not([vertical])[inset-start]) .line { left: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem)); } :host([vertical][inset]) .line, :host([vertical][inset-end]) .line { bottom: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem)); } :host(:not([vertical])[inset]) .line, :host(:not([vertical])[inset-end]) .line { right: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem)); } :host([vertical]:not([inset]):not([inset-start])) .line { top: 0; } :host(:not([vertical]):not([inset]):not([inset-start])) .line { left: 0; } :host([vertical]:not([inset]):not([inset-end])) .line { bottom: 0; } :host(:not([vertical]):not([inset]):not([inset-end])) .line { right: 0; } @media (forced-colors: active) { .line { border-color: GrayText; } }`;
+M3eDividerElement.styles = css`:host { display: block; position: relative; } :host(:not([vertical])) { height: var(--m3e-divider-thickness, 1px); width: 100%; } :host([vertical]) { width: var(--m3e-divider-thickness, 1px); height: 100%; } .line { contain: layout style paint; box-sizing: border-box; position: absolute; } :host(:not([vertical])) .line { border-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); height: inherit; } :host([vertical]) .line { border-right: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); width: inherit; } :host([vertical][inset]) .line, :host([vertical][inset-start]) .line { top: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem)); } :host(:not([vertical])[inset]) .line, :host(:not([vertical])[inset-start]) .line { left: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem)); } :host([vertical][inset]) .line, :host([vertical][inset-end]) .line { bottom: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem)); } :host(:not([vertical])[inset]) .line, :host(:not([vertical])[inset-end]) .line { right: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem)); } :host([vertical]:not([inset]):not([inset-start])) .line { top: 0; } :host(:not([vertical]):not([inset]):not([inset-start])) .line { left: 0; } :host([vertical]:not([inset]):not([inset-end])) .line { bottom: 0; } :host(:not([vertical]):not([inset]):not([inset-end])) .line { right: 0; } @media (forced-colors: active) { .line { border-color: GrayText; } }`;
 __decorate([property({
   type: Boolean,
   reflect: true

package/dist/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sources":["../../src/divider/DividerElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, Role } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A thin line that separates content in lists or other containers.\r\n *\r\n * @description\r\n * The `m3e-divider` component visually separates content within layouts, lists, or containers using a thin, unobtrusive line.\r\n * It supports horizontal and vertical orientation, with optional inset variants to align with layout padding and visual hierarchy.\r\n * The divider thickness, color, and inset behavior are customizable via CSS properties to maintain consistency across surfaces.\r\n * It is designed to reinforce spatial relationships without drawing attention, preserving focus on primary content.\r\n *\r\n * @example\r\n * The following example illustrates a basic horizontal divider.\r\n * ```html\r\n * <m3e-divider></m3e-divider>\r\n * ```\r\n *\r\n * @tag m3e-divider\r\n *\r\n * @attr inset - Whether the divider is indented with equal padding on both sides.\r\n * @attr inset-start - Whether the divider is indented with padding on the leading side.\r\n * @attr inset-end - Whether the divider is indented with padding on the trailing side.\r\n * @attr vertical - Whether the divider is vertically aligned with adjacent content.\r\n *\r\n * @cssprop --m3e-divider-thickness - Thickness of the divider line.\r\n * @cssprop --m3e-divider-color - Color of the divider line.\r\n * @cssprop --m3e-divider-inset-size - When inset, fallback inset size used when no specific start or end inset is provided.\r\n * @cssprop --m3e-divider-inset-start-size - When inset, leading inset size.\r\n * @cssprop --m3e-divider-inset-end-size - When inset, trailing inset size.\r\n */\r\n@customElement(\"m3e-divider\")\r\nexport class M3eDividerElement extends Role(LitElement, \"separator\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      position: relative;\r\n    }\r\n    :host(:not([vertical])) {\r\n      height: var(--m3e-divider-thickness, 1px);\r\n      width: 100%;\r\n    }\r\n    :host([vertical]) {\r\n      width: var(--m3e-divider-thickness, 1px);\r\n      height: 100%;\r\n    }\r\n    .line {\r\n      box-sizing: border-box;\r\n      position: absolute;\r\n    }\r\n    :host(:not([vertical])) .line {\r\n      border-bottom: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n      height: inherit;\r\n    }\r\n    :host([vertical]) .line {\r\n      border-right: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n      width: inherit;\r\n    }\r\n    :host([vertical][inset]) .line,\r\n    :host([vertical][inset-start]) .line {\r\n      top: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem));\r\n    }\r\n    :host(:not([vertical])[inset]) .line,\r\n    :host(:not([vertical])[inset-start]) .line {\r\n      left: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem));\r\n    }\r\n    :host([vertical][inset]) .line,\r\n    :host([vertical][inset-end]) .line {\r\n      bottom: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem));\r\n    }\r\n    :host(:not([vertical])[inset]) .line,\r\n    :host(:not([vertical])[inset-end]) .line {\r\n      right: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem));\r\n    }\r\n    :host([vertical]:not([inset]):not([inset-start])) .line {\r\n      top: 0;\r\n    }\r\n    :host(:not([vertical]):not([inset]):not([inset-start])) .line {\r\n      left: 0;\r\n    }\r\n    :host([vertical]:not([inset]):not([inset-end])) .line {\r\n      bottom: 0;\r\n    }\r\n    :host(:not([vertical]):not([inset]):not([inset-end])) .line {\r\n      right: 0;\r\n    }\r\n    @media (forced-colors: active) {\r\n      .line {\r\n        border-color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /**\r\n   * Whether the divider is vertically aligned with adjacent content.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) vertical = false;\r\n\r\n  /**\r\n   * Whether the divider is indented with equal padding on both sides.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) inset = false;\r\n\r\n  /**\r\n   * Whether the divider is indented with padding on the leading side.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"inset-start\", type: Boolean, reflect: true }) insetStart = false;\r\n\r\n  /**\r\n   * Whether the divider is indented with padding on the trailing side.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"inset-end\", type: Boolean, reflect: true }) insetEnd = false;\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"line\"></div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-divider\": M3eDividerElement;\r\n  }\r\n}\r\n"],"names":["M3eDividerElement","Role","LitElement","constructor","vertical","inset","insetStart","insetEnd","render","html","styles","css","DesignToken","color","outlineVariant","__decorate","property","type","Boolean","reflect","prototype","attribute","customElement"],"mappings":";;;;;;;;;;AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;AAEI,IAAMA,iBAAiB,GAAvB,MAAMA,iBAAkB,SAAQC,IAAI,CAACC,UAAU,EAAE,WAAW,CAAC,CAAA;AAA7DC,EAAAA,WAAAA,GAAA;;AAgEL;;;AAGG;IACyC,IAAA,CAAAC,QAAQ,GAAG,KAAK;AAE5D;;;AAGG;IACyC,IAAA,CAAAC,KAAK,GAAG,KAAK;AAEzD;;;AAGG;IACmE,IAAA,CAAAC,UAAU,GAAG,KAAK;AAExF;;;AAGG;IACiE,IAAA,CAAAC,QAAQ,GAAG,KAAK;AAMtF,EAAA;AAJE;AACmBC,EAAAA,MAAMA,GAAA;AACvB,IAAA,OAAOC,IAAI,CAAA,wBAAA,CAA0B;AACvC,EAAA;;AA1FA;AACgBT,iBAAA,CAAAU,MAAM,GAAmBC,GAAG,CAAA,sXAAA,EAmBXC,WAAW,CAACC,KAAK,CAACC,cAAc,kIAKhCF,WAAW,CAACC,KAAK,CAACC,cAAc,CAAA,6+BAAA,CAxB3C;AAkEsBC,UAAA,CAAA,CAA3CC,QAAQ,CAAC;AAAEC,EAAAA,IAAI,EAAEC,OAAO;AAAEC,EAAAA,OAAO,EAAE;AAAI,CAAE,CAAC,CAAkB,EAAAnB,iBAAA,CAAAoB,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAMjBL,UAAA,CAAA,CAA3CC,QAAQ,CAAC;AAAEC,EAAAA,IAAI,EAAEC,OAAO;AAAEC,EAAAA,OAAO,EAAE;AAAI,CAAE,CAAC,CAAe,EAAAnB,iBAAA,CAAAoB,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAMYL,UAAA,CAAA,CAArEC,QAAQ,CAAC;AAAEK,EAAAA,SAAS,EAAE,aAAa;AAAEJ,EAAAA,IAAI,EAAEC,OAAO;AAAEC,EAAAA,OAAO,EAAE;CAAM,CAAC,CAAoB,EAAAnB,iBAAA,CAAAoB,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAMrBL,UAAA,CAAA,CAAnEC,QAAQ,CAAC;AAAEK,EAAAA,SAAS,EAAE,WAAW;AAAEJ,EAAAA,IAAI,EAAEC,OAAO;AAAEC,EAAAA,OAAO,EAAE;CAAM,CAAC,CAAkB,EAAAnB,iBAAA,CAAAoB,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAtF1EpB,iBAAiB,GAAAe,UAAA,CAAA,CAD7BO,aAAa,CAAC,aAAa,CAAC,CAChB,EAAAtB,iBAAiB,CA4F7B;;;;"}
+{"version":3,"file":"divider.js","sources":["../../src/divider/DividerElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, Role } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A thin line that separates content in lists or other containers.\r\n *\r\n * @description\r\n * The `m3e-divider` component visually separates content within layouts, lists, or containers using a thin, unobtrusive line.\r\n * It supports horizontal and vertical orientation, with optional inset variants to align with layout padding and visual hierarchy.\r\n * The divider thickness, color, and inset behavior are customizable via CSS properties to maintain consistency across surfaces.\r\n * It is designed to reinforce spatial relationships without drawing attention, preserving focus on primary content.\r\n *\r\n * @example\r\n * The following example illustrates a basic horizontal divider.\r\n * ```html\r\n * <m3e-divider></m3e-divider>\r\n * ```\r\n *\r\n * @tag m3e-divider\r\n *\r\n * @attr inset - Whether the divider is indented with equal padding on both sides.\r\n * @attr inset-start - Whether the divider is indented with padding on the leading side.\r\n * @attr inset-end - Whether the divider is indented with padding on the trailing side.\r\n * @attr vertical - Whether the divider is vertically aligned with adjacent content.\r\n *\r\n * @cssprop --m3e-divider-thickness - Thickness of the divider line.\r\n * @cssprop --m3e-divider-color - Color of the divider line.\r\n * @cssprop --m3e-divider-inset-size - When inset, fallback inset size used when no specific start or end inset is provided.\r\n * @cssprop --m3e-divider-inset-start-size - When inset, leading inset size.\r\n * @cssprop --m3e-divider-inset-end-size - When inset, trailing inset size.\r\n */\r\n@customElement(\"m3e-divider\")\r\nexport class M3eDividerElement extends Role(LitElement, \"separator\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      position: relative;\r\n    }\r\n    :host(:not([vertical])) {\r\n      height: var(--m3e-divider-thickness, 1px);\r\n      width: 100%;\r\n    }\r\n    :host([vertical]) {\r\n      width: var(--m3e-divider-thickness, 1px);\r\n      height: 100%;\r\n    }\r\n    .line {\r\n      contain: layout style paint;\r\n      box-sizing: border-box;\r\n      position: absolute;\r\n    }\r\n    :host(:not([vertical])) .line {\r\n      border-bottom: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n      height: inherit;\r\n    }\r\n    :host([vertical]) .line {\r\n      border-right: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n      width: inherit;\r\n    }\r\n    :host([vertical][inset]) .line,\r\n    :host([vertical][inset-start]) .line {\r\n      top: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem));\r\n    }\r\n    :host(:not([vertical])[inset]) .line,\r\n    :host(:not([vertical])[inset-start]) .line {\r\n      left: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem));\r\n    }\r\n    :host([vertical][inset]) .line,\r\n    :host([vertical][inset-end]) .line {\r\n      bottom: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem));\r\n    }\r\n    :host(:not([vertical])[inset]) .line,\r\n    :host(:not([vertical])[inset-end]) .line {\r\n      right: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem));\r\n    }\r\n    :host([vertical]:not([inset]):not([inset-start])) .line {\r\n      top: 0;\r\n    }\r\n    :host(:not([vertical]):not([inset]):not([inset-start])) .line {\r\n      left: 0;\r\n    }\r\n    :host([vertical]:not([inset]):not([inset-end])) .line {\r\n      bottom: 0;\r\n    }\r\n    :host(:not([vertical]):not([inset]):not([inset-end])) .line {\r\n      right: 0;\r\n    }\r\n    @media (forced-colors: active) {\r\n      .line {\r\n        border-color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /**\r\n   * Whether the divider is vertically aligned with adjacent content.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) vertical = false;\r\n\r\n  /**\r\n   * Whether the divider is indented with equal padding on both sides.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) inset = false;\r\n\r\n  /**\r\n   * Whether the divider is indented with padding on the leading side.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"inset-start\", type: Boolean, reflect: true }) insetStart = false;\r\n\r\n  /**\r\n   * Whether the divider is indented with padding on the trailing side.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"inset-end\", type: Boolean, reflect: true }) insetEnd = false;\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"line\"></div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-divider\": M3eDividerElement;\r\n  }\r\n}\r\n"],"names":["M3eDividerElement","Role","LitElement","constructor","vertical","inset","insetStart","insetEnd","render","html","styles","css","DesignToken","color","outlineVariant","__decorate","property","type","Boolean","reflect","prototype","attribute","customElement"],"mappings":";;;;;;;;;;AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;AAEI,IAAMA,iBAAiB,GAAvB,MAAMA,iBAAkB,SAAQC,IAAI,CAACC,UAAU,EAAE,WAAW,CAAC,CAAA;AAA7DC,EAAAA,WAAAA,GAAA;;AAiEL;;;AAGG;IACyC,IAAA,CAAAC,QAAQ,GAAG,KAAK;AAE5D;;;AAGG;IACyC,IAAA,CAAAC,KAAK,GAAG,KAAK;AAEzD;;;AAGG;IACmE,IAAA,CAAAC,UAAU,GAAG,KAAK;AAExF;;;AAGG;IACiE,IAAA,CAAAC,QAAQ,GAAG,KAAK;AAMtF,EAAA;AAJE;AACmBC,EAAAA,MAAMA,GAAA;AACvB,IAAA,OAAOC,IAAI,CAAA,wBAAA,CAA0B;AACvC,EAAA;;AA3FA;AACgBT,iBAAA,CAAAU,MAAM,GAAmBC,GAAG,CAAA,mZAAA,EAoBXC,WAAW,CAACC,KAAK,CAACC,cAAc,kIAKhCF,WAAW,CAACC,KAAK,CAACC,cAAc,CAAA,6+BAAA,CAzB3C;AAmEsBC,UAAA,CAAA,CAA3CC,QAAQ,CAAC;AAAEC,EAAAA,IAAI,EAAEC,OAAO;AAAEC,EAAAA,OAAO,EAAE;AAAI,CAAE,CAAC,CAAkB,EAAAnB,iBAAA,CAAAoB,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAMjBL,UAAA,CAAA,CAA3CC,QAAQ,CAAC;AAAEC,EAAAA,IAAI,EAAEC,OAAO;AAAEC,EAAAA,OAAO,EAAE;AAAI,CAAE,CAAC,CAAe,EAAAnB,iBAAA,CAAAoB,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAMYL,UAAA,CAAA,CAArEC,QAAQ,CAAC;AAAEK,EAAAA,SAAS,EAAE,aAAa;AAAEJ,EAAAA,IAAI,EAAEC,OAAO;AAAEC,EAAAA,OAAO,EAAE;CAAM,CAAC,CAAoB,EAAAnB,iBAAA,CAAAoB,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAMrBL,UAAA,CAAA,CAAnEC,QAAQ,CAAC;AAAEK,EAAAA,SAAS,EAAE,WAAW;AAAEJ,EAAAA,IAAI,EAAEC,OAAO;AAAEC,EAAAA,OAAO,EAAE;CAAM,CAAC,CAAkB,EAAAnB,iBAAA,CAAAoB,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAvF1EpB,iBAAiB,GAAAe,UAAA,CAAA,CAD7BO,aAAa,CAAC,aAAa,CAAC,CAChB,EAAAtB,iBAAiB,CA6F7B;;;;"}

package/dist/divider.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__decorate as t}from"tslib";import{LitElement as e,html as i,css as r}from"lit";import{property as o}from"lit/decorators.js";import{Role as s,DesignToken as n,customElement as l}from"@m3e/web/core";let a=class extends(s(e,"separator")){constructor(){super(...arguments),this.vertical=!1,this.inset=!1,this.insetStart=!1,this.insetEnd=!1}render(){return i`<div class="line"></div>`}};a.styles=r`:host { display: block; position: relative; } :host(:not([vertical])) { height: var(--m3e-divider-thickness, 1px); width: 100%; } :host([vertical]) { width: var(--m3e-divider-thickness, 1px); height: 100%; } .line { box-sizing: border-box; position: absolute; } :host(:not([vertical])) .line { border-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${n.color.outlineVariant}); height: inherit; } :host([vertical]) .line { border-right: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${n.color.outlineVariant}); width: inherit; } :host([vertical][inset]) .line, :host([vertical][inset-start]) .line { top: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem)); } :host(:not([vertical])[inset]) .line, :host(:not([vertical])[inset-start]) .line { left: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem)); } :host([vertical][inset]) .line, :host([vertical][inset-end]) .line { bottom: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem)); } :host(:not([vertical])[inset]) .line, :host(:not([vertical])[inset-end]) .line { right: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem)); } :host([vertical]:not([inset]):not([inset-start])) .line { top: 0; } :host(:not([vertical]):not([inset]):not([inset-start])) .line { left: 0; } :host([vertical]:not([inset]):not([inset-end])) .line { bottom: 0; } :host(:not([vertical]):not([inset]):not([inset-end])) .line { right: 0; } @media (forced-colors: active) { .line { border-color: GrayText; } }`,t([o({type:Boolean,reflect:!0})],a.prototype,"vertical",void 0),t([o({type:Boolean,reflect:!0})],a.prototype,"inset",void 0),t([o({attribute:"inset-start",type:Boolean,reflect:!0})],a.prototype,"insetStart",void 0),t([o({attribute:"inset-end",type:Boolean,reflect:!0})],a.prototype,"insetEnd",void 0),a=t([l("m3e-divider")],a);export{a as M3eDividerElement};
+import{__decorate as t}from"tslib";import{LitElement as e,html as i,css as r}from"lit";import{property as o}from"lit/decorators.js";import{Role as n,DesignToken as s,customElement as l}from"@m3e/web/core";let a=class extends(n(e,"separator")){constructor(){super(...arguments),this.vertical=!1,this.inset=!1,this.insetStart=!1,this.insetEnd=!1}render(){return i`<div class="line"></div>`}};a.styles=r`:host { display: block; position: relative; } :host(:not([vertical])) { height: var(--m3e-divider-thickness, 1px); width: 100%; } :host([vertical]) { width: var(--m3e-divider-thickness, 1px); height: 100%; } .line { contain: layout style paint; box-sizing: border-box; position: absolute; } :host(:not([vertical])) .line { border-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${s.color.outlineVariant}); height: inherit; } :host([vertical]) .line { border-right: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${s.color.outlineVariant}); width: inherit; } :host([vertical][inset]) .line, :host([vertical][inset-start]) .line { top: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem)); } :host(:not([vertical])[inset]) .line, :host(:not([vertical])[inset-start]) .line { left: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem)); } :host([vertical][inset]) .line, :host([vertical][inset-end]) .line { bottom: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem)); } :host(:not([vertical])[inset]) .line, :host(:not([vertical])[inset-end]) .line { right: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem)); } :host([vertical]:not([inset]):not([inset-start])) .line { top: 0; } :host(:not([vertical]):not([inset]):not([inset-start])) .line { left: 0; } :host([vertical]:not([inset]):not([inset-end])) .line { bottom: 0; } :host(:not([vertical]):not([inset]):not([inset-end])) .line { right: 0; } @media (forced-colors: active) { .line { border-color: GrayText; } }`,t([o({type:Boolean,reflect:!0})],a.prototype,"vertical",void 0),t([o({type:Boolean,reflect:!0})],a.prototype,"inset",void 0),t([o({attribute:"inset-start",type:Boolean,reflect:!0})],a.prototype,"insetStart",void 0),t([o({attribute:"inset-end",type:Boolean,reflect:!0})],a.prototype,"insetEnd",void 0),a=t([l("m3e-divider")],a);export{a as M3eDividerElement};
 //# sourceMappingURL=divider.min.js.map

package/dist/divider.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.min.js","sources":["../../src/divider/DividerElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, Role } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A thin line that separates content in lists or other containers.\r\n *\r\n * @description\r\n * The `m3e-divider` component visually separates content within layouts, lists, or containers using a thin, unobtrusive line.\r\n * It supports horizontal and vertical orientation, with optional inset variants to align with layout padding and visual hierarchy.\r\n * The divider thickness, color, and inset behavior are customizable via CSS properties to maintain consistency across surfaces.\r\n * It is designed to reinforce spatial relationships without drawing attention, preserving focus on primary content.\r\n *\r\n * @example\r\n * The following example illustrates a basic horizontal divider.\r\n * ```html\r\n * <m3e-divider></m3e-divider>\r\n * ```\r\n *\r\n * @tag m3e-divider\r\n *\r\n * @attr inset - Whether the divider is indented with equal padding on both sides.\r\n * @attr inset-start - Whether the divider is indented with padding on the leading side.\r\n * @attr inset-end - Whether the divider is indented with padding on the trailing side.\r\n * @attr vertical - Whether the divider is vertically aligned with adjacent content.\r\n *\r\n * @cssprop --m3e-divider-thickness - Thickness of the divider line.\r\n * @cssprop --m3e-divider-color - Color of the divider line.\r\n * @cssprop --m3e-divider-inset-size - When inset, fallback inset size used when no specific start or end inset is provided.\r\n * @cssprop --m3e-divider-inset-start-size - When inset, leading inset size.\r\n * @cssprop --m3e-divider-inset-end-size - When inset, trailing inset size.\r\n */\r\n@customElement(\"m3e-divider\")\r\nexport class M3eDividerElement extends Role(LitElement, \"separator\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      position: relative;\r\n    }\r\n    :host(:not([vertical])) {\r\n      height: var(--m3e-divider-thickness, 1px);\r\n      width: 100%;\r\n    }\r\n    :host([vertical]) {\r\n      width: var(--m3e-divider-thickness, 1px);\r\n      height: 100%;\r\n    }\r\n    .line {\r\n      box-sizing: border-box;\r\n      position: absolute;\r\n    }\r\n    :host(:not([vertical])) .line {\r\n      border-bottom: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n      height: inherit;\r\n    }\r\n    :host([vertical]) .line {\r\n      border-right: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n      width: inherit;\r\n    }\r\n    :host([vertical][inset]) .line,\r\n    :host([vertical][inset-start]) .line {\r\n      top: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem));\r\n    }\r\n    :host(:not([vertical])[inset]) .line,\r\n    :host(:not([vertical])[inset-start]) .line {\r\n      left: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem));\r\n    }\r\n    :host([vertical][inset]) .line,\r\n    :host([vertical][inset-end]) .line {\r\n      bottom: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem));\r\n    }\r\n    :host(:not([vertical])[inset]) .line,\r\n    :host(:not([vertical])[inset-end]) .line {\r\n      right: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem));\r\n    }\r\n    :host([vertical]:not([inset]):not([inset-start])) .line {\r\n      top: 0;\r\n    }\r\n    :host(:not([vertical]):not([inset]):not([inset-start])) .line {\r\n      left: 0;\r\n    }\r\n    :host([vertical]:not([inset]):not([inset-end])) .line {\r\n      bottom: 0;\r\n    }\r\n    :host(:not([vertical]):not([inset]):not([inset-end])) .line {\r\n      right: 0;\r\n    }\r\n    @media (forced-colors: active) {\r\n      .line {\r\n        border-color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /**\r\n   * Whether the divider is vertically aligned with adjacent content.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) vertical = false;\r\n\r\n  /**\r\n   * Whether the divider is indented with equal padding on both sides.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) inset = false;\r\n\r\n  /**\r\n   * Whether the divider is indented with padding on the leading side.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"inset-start\", type: Boolean, reflect: true }) insetStart = false;\r\n\r\n  /**\r\n   * Whether the divider is indented with padding on the trailing side.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"inset-end\", type: Boolean, reflect: true }) insetEnd = false;\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"line\"></div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-divider\": M3eDividerElement;\r\n  }\r\n}\r\n"],"names":["M3eDividerElement","Role","LitElement","constructor","this","vertical","inset","insetStart","insetEnd","render","html","styles","css","DesignToken","color","outlineVariant","__decorate","property","type","Boolean","reflect","prototype","attribute","customElement"],"mappings":";;;;;6MAkCO,IAAMA,EAAN,cAAgCC,EAAKC,EAAY,cAAjDC,WAAAA,uBAoEuCC,KAAAC,UAAW,EAMXD,KAAAE,OAAQ,EAMkBF,KAAAG,YAAa,EAMfH,KAAAI,UAAW,CAMjF,CAHqBC,MAAAA,GACjB,OAAOC,CAAI,0BACb,GAzFgBV,EAAAW,OAAyBC,CAAG,yXAmBXC,EAAYC,MAAMC,gJAKlBF,EAAYC,MAAMC,8/BA0CPC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAyBpB,EAAAqB,UAAA,gBAAA,GAMjBL,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsBpB,EAAAqB,UAAA,aAAA,GAMYL,EAAA,CAArEC,EAAS,CAAEK,UAAW,cAAeJ,KAAMC,QAASC,SAAS,KAA2BpB,EAAAqB,UAAA,kBAAA,GAMrBL,EAAA,CAAnEC,EAAS,CAAEK,UAAW,YAAaJ,KAAMC,QAASC,SAAS,KAAyBpB,EAAAqB,UAAA,gBAAA,GAtF1ErB,EAAiBgB,EAAA,CAD7BO,EAAc,gBACFvB"}
+{"version":3,"file":"divider.min.js","sources":["../../src/divider/DividerElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, Role } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A thin line that separates content in lists or other containers.\r\n *\r\n * @description\r\n * The `m3e-divider` component visually separates content within layouts, lists, or containers using a thin, unobtrusive line.\r\n * It supports horizontal and vertical orientation, with optional inset variants to align with layout padding and visual hierarchy.\r\n * The divider thickness, color, and inset behavior are customizable via CSS properties to maintain consistency across surfaces.\r\n * It is designed to reinforce spatial relationships without drawing attention, preserving focus on primary content.\r\n *\r\n * @example\r\n * The following example illustrates a basic horizontal divider.\r\n * ```html\r\n * <m3e-divider></m3e-divider>\r\n * ```\r\n *\r\n * @tag m3e-divider\r\n *\r\n * @attr inset - Whether the divider is indented with equal padding on both sides.\r\n * @attr inset-start - Whether the divider is indented with padding on the leading side.\r\n * @attr inset-end - Whether the divider is indented with padding on the trailing side.\r\n * @attr vertical - Whether the divider is vertically aligned with adjacent content.\r\n *\r\n * @cssprop --m3e-divider-thickness - Thickness of the divider line.\r\n * @cssprop --m3e-divider-color - Color of the divider line.\r\n * @cssprop --m3e-divider-inset-size - When inset, fallback inset size used when no specific start or end inset is provided.\r\n * @cssprop --m3e-divider-inset-start-size - When inset, leading inset size.\r\n * @cssprop --m3e-divider-inset-end-size - When inset, trailing inset size.\r\n */\r\n@customElement(\"m3e-divider\")\r\nexport class M3eDividerElement extends Role(LitElement, \"separator\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      position: relative;\r\n    }\r\n    :host(:not([vertical])) {\r\n      height: var(--m3e-divider-thickness, 1px);\r\n      width: 100%;\r\n    }\r\n    :host([vertical]) {\r\n      width: var(--m3e-divider-thickness, 1px);\r\n      height: 100%;\r\n    }\r\n    .line {\r\n      contain: layout style paint;\r\n      box-sizing: border-box;\r\n      position: absolute;\r\n    }\r\n    :host(:not([vertical])) .line {\r\n      border-bottom: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n      height: inherit;\r\n    }\r\n    :host([vertical]) .line {\r\n      border-right: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n      width: inherit;\r\n    }\r\n    :host([vertical][inset]) .line,\r\n    :host([vertical][inset-start]) .line {\r\n      top: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem));\r\n    }\r\n    :host(:not([vertical])[inset]) .line,\r\n    :host(:not([vertical])[inset-start]) .line {\r\n      left: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem));\r\n    }\r\n    :host([vertical][inset]) .line,\r\n    :host([vertical][inset-end]) .line {\r\n      bottom: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem));\r\n    }\r\n    :host(:not([vertical])[inset]) .line,\r\n    :host(:not([vertical])[inset-end]) .line {\r\n      right: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem));\r\n    }\r\n    :host([vertical]:not([inset]):not([inset-start])) .line {\r\n      top: 0;\r\n    }\r\n    :host(:not([vertical]):not([inset]):not([inset-start])) .line {\r\n      left: 0;\r\n    }\r\n    :host([vertical]:not([inset]):not([inset-end])) .line {\r\n      bottom: 0;\r\n    }\r\n    :host(:not([vertical]):not([inset]):not([inset-end])) .line {\r\n      right: 0;\r\n    }\r\n    @media (forced-colors: active) {\r\n      .line {\r\n        border-color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /**\r\n   * Whether the divider is vertically aligned with adjacent content.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) vertical = false;\r\n\r\n  /**\r\n   * Whether the divider is indented with equal padding on both sides.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) inset = false;\r\n\r\n  /**\r\n   * Whether the divider is indented with padding on the leading side.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"inset-start\", type: Boolean, reflect: true }) insetStart = false;\r\n\r\n  /**\r\n   * Whether the divider is indented with padding on the trailing side.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"inset-end\", type: Boolean, reflect: true }) insetEnd = false;\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"line\"></div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-divider\": M3eDividerElement;\r\n  }\r\n}\r\n"],"names":["M3eDividerElement","Role","LitElement","constructor","this","vertical","inset","insetStart","insetEnd","render","html","styles","css","DesignToken","color","outlineVariant","__decorate","property","type","Boolean","reflect","prototype","attribute","customElement"],"mappings":";;;;;6MAkCO,IAAMA,EAAN,cAAgCC,EAAKC,EAAY,cAAjDC,WAAAA,uBAqEuCC,KAAAC,UAAW,EAMXD,KAAAE,OAAQ,EAMkBF,KAAAG,YAAa,EAMfH,KAAAI,UAAW,CAMjF,CAHqBC,MAAAA,GACjB,OAAOC,CAAI,0BACb,GA1FgBV,EAAAW,OAAyBC,CAAG,sZAoBXC,EAAYC,MAAMC,gJAKlBF,EAAYC,MAAMC,8/BA0CPC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAyBpB,EAAAqB,UAAA,gBAAA,GAMjBL,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsBpB,EAAAqB,UAAA,aAAA,GAMYL,EAAA,CAArEC,EAAS,CAAEK,UAAW,cAAeJ,KAAMC,QAASC,SAAS,KAA2BpB,EAAAqB,UAAA,kBAAA,GAMrBL,EAAA,CAAnEC,EAAS,CAAEK,UAAW,YAAaJ,KAAMC,QAASC,SAAS,KAAyBpB,EAAAqB,UAAA,gBAAA,GAvF1ErB,EAAiBgB,EAAA,CAD7BO,EAAc,gBACFvB"}

package/dist/drawer-container.js

@@ -30,10 +30,10 @@ const DrawerContainerToken = {
  * Styles for `M3eDrawerContainerElement`.
  * @internal
  */
-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},
+const DrawerContainerStyle = css`:host { display: block; position: relative; overflow: hidden; flex: 1 1 auto; } .start, .end { contain: layout style; 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(: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}, 
+      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 { contain: layout style; 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; } }`;
 

package/dist/drawer-container.js.map

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

package/dist/drawer-container.min.js

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