@carbon/web-components 2.54.0 → 2.55.0-rc.0

package/es/components/modal/modal.js

@@ -5,15 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { selectorTabbable } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
 import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import HostListener from "../../globals/decorators/host-listener.js";
-import HostListenerMixin from "../../globals/mixins/host-listener.js";
 import { MODAL_SIZE } from "./defs.js";
 import modal_default$1 from "./modal.scss.js";
-import "../inline-loading/index.js";
-import { LitElement, html } from "lit";
+import { CDSModalBase } from "./modal-base.js";
+import "../dialog/dialog.js";
+import { html } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 //#region src/components/modal/modal.ts
@@ -33,19 +33,17 @@ import { classMap } from "lit/directives/class-map.js";
 *   Cancellation of this event stops the user-initiated action of closing this modal.
 * @fires cds-modal-closed - The custom event fired after this modal is closed upon a user gesture.
 */
-let CDSModal = class CDSModal extends HostListenerMixin(LitElement) {
+let CDSModal = class CDSModal extends CDSModalBase {
 	constructor(..._args) {
 		super(..._args);
-		this._launcher = null;
-		this._loadingEl = null;
-		this.WORKING_LOADING_STATUSES = [
-			"active",
-			"finished",
-			"error"
-		];
+		this.enableDialogElement = false;
 		this._handleClick = (event) => {
 			if (event.composedPath().indexOf(this.shadowRoot) < 0 && !this.preventCloseOnClickOutside) this._handleUserInitiatedClose(event.target);
 		};
+		this._handleKeydown = ({ key, target }) => {
+			if (!this.open || this.enableDialogElement) return;
+			if (key === "Esc" || key === "Escape") this._handleUserInitiatedClose(target);
+		};
 		this._handleHostKeydown = (event) => {
 			const target = event.target;
 			const { primaryButton } = this._getFooterElements();
@@ -56,6 +54,7 @@ let CDSModal = class CDSModal extends HostListenerMixin(LitElement) {
 					return;
 				}
 			}
+			if (this.enableDialogElement) return;
 			if (event.key === "Tab") {
 				const { first: _firstElement, last: _lastElement } = this.getFocusable();
 				if (event.shiftKey && (this.shadowRoot?.activeElement === _firstElement || document.activeElement === _firstElement)) {
@@ -67,9 +66,25 @@ let CDSModal = class CDSModal extends HostListenerMixin(LitElement) {
 				}
 			}
 		};
-		this._handleKeydown = ({ key, target }) => {
-			if (!this.open) return;
-			if (key === "Esc" || key === "Escape") this._handleUserInitiatedClose(target);
+		this._handleDialogClosed = (event) => {
+			event.stopPropagation();
+			this.open = false;
+			this.dispatchEvent(new CustomEvent(this.constructor.eventClose, {
+				bubbles: true,
+				cancelable: true,
+				composed: true,
+				detail: event.detail
+			}));
+		};
+		this._handleDialogBeingClosed = (event) => {
+			event.stopPropagation();
+			const modalEvent = new CustomEvent(this.constructor.eventBeforeClose, {
+				bubbles: true,
+				cancelable: true,
+				composed: true,
+				detail: event.detail
+			});
+			if (!this.dispatchEvent(modalEvent)) event.preventDefault();
 		};
 		this.alert = false;
 		this.ariaLabel = null;
@@ -78,110 +93,7 @@ let CDSModal = class CDSModal extends HostListenerMixin(LitElement) {
 		this.hasScrollingContent = false;
 		this.open = false;
 		this.size = "md";
-		this.preventCloseOnClickOutside = false;
-		this.loadingStatus = "inactive";
-		this.loadingDescription = "";
-		this.loadingSuccessDelay = 1500;
-		this.loadingIconDescription = "Loading";
 		this.shouldSubmitOnEnter = false;
-		this.preventClose = false;
-	}
-	/**
-	* Get focusable elements.
-	*
-	* Querying all tabbable items.
-	*
-	* @returns {{first: HTMLElement, last: HTMLElement, all: HTMLElement[]}} Returns an object with various elements.
-	*/
-	getFocusable() {
-		const elements = [];
-		const tabbableItems = this.querySelectorAll(selectorTabbable);
-		if (tabbableItems?.length) elements.push(...tabbableItems);
-		const all = elements?.filter((el) => typeof el?.focus === "function");
-		return {
-			first: all[0],
-			last: all[all.length - 1],
-			all
-		};
-	}
-	/**
-	* Handles `click` event on the modal container.
-	*
-	* @param event The event.
-	*/
-	_handleClickContainer(event) {
-		if (event.target.matches(this.constructor.selectorCloseButton) && !this.preventClose) this._handleUserInitiatedClose(event.target);
-	}
-	/**
-	* Handles user-initiated close request of this modal.
-	*
-	* @param triggeredBy The element that triggered this close request.
-	*/
-	_handleUserInitiatedClose(triggeredBy) {
-		if (this.open) {
-			const init = {
-				bubbles: true,
-				cancelable: true,
-				composed: true,
-				detail: { triggeredBy }
-			};
-			if (this.dispatchEvent(new CustomEvent(this.constructor.eventBeforeClose, init))) {
-				this.open = false;
-				this.dispatchEvent(new CustomEvent(this.constructor.eventClose, init));
-			}
-		}
-	}
-	/**
-	* Handles `slotchange` event.
-	*/
-	_handleSlotChange() {
-		if (this.querySelector(`cds-modal-footer`)) this.setAttribute("has-footer", "");
-		else this.removeAttribute("has-footer");
-	}
-	_initializeLoadingEl(footer) {
-		if (!footer) return null;
-		if (!this._loadingEl && this.WORKING_LOADING_STATUSES.includes(this.loadingStatus)) {
-			const el = document.createElement(`cds-inline-loading`);
-			el.setAttribute("controlled", "");
-			el.setAttribute("aria-live", "off");
-			footer.appendChild(el);
-			this._loadingEl = el;
-		}
-		return this._loadingEl;
-	}
-	_getFooterElements() {
-		return {
-			footer: this.querySelector(`cds-modal-footer`),
-			primaryButton: this.querySelector(`cds-modal-footer-button[kind="primary"]`) || this.querySelector(`cds-modal-footer-button[kind="danger"]`) || null,
-			secondaryButtons: Array.from(this.querySelectorAll(`cds-modal-footer-button[kind="secondary"]`))
-		};
-	}
-	_updateLoadingElement() {
-		const { footer, primaryButton, secondaryButtons } = this._getFooterElements();
-		const loader = this._initializeLoadingEl(footer);
-		if (!footer || !loader || !primaryButton) return;
-		if (this.WORKING_LOADING_STATUSES.includes(this.loadingStatus)) {
-			loader.style.display = "inline-flex";
-			loader.setAttribute("status", String(this.loadingStatus));
-			loader.setAttribute("aria-live", "assertive");
-			loader.setAttribute("icon-description", String(this.loadingIconDescription));
-			loader.textContent = this.loadingDescription;
-			primaryButton.style.display = "none";
-			if (secondaryButtons[0]) if (!footer.hasAttribute("has-three-buttons")) secondaryButtons[0].setAttribute("disabled", "");
-			else secondaryButtons.forEach((b) => b.removeAttribute("disabled"));
-			if (this.loadingStatus === "finished") setTimeout(() => {
-				this.dispatchEvent(new CustomEvent(this.constructor.eventOnLoadingSuccess, {
-					bubbles: true,
-					cancelable: true,
-					composed: true
-				}));
-			}, this.loadingSuccessDelay);
-		} else if (this.loadingStatus === "inactive") {
-			loader.style.display = "none";
-			loader.setAttribute("aria-live", "off");
-			if (primaryButton) primaryButton.style.display = "";
-			if (secondaryButtons) secondaryButtons.forEach((b) => b.removeAttribute("disabled"));
-		}
 	}
 	async firstUpdated() {
 		if (!this.querySelector(this.constructor.selectorModalBody)) {
@@ -247,7 +159,7 @@ let CDSModal = class CDSModal extends HostListenerMixin(LitElement) {
 		super.disconnectedCallback?.();
 	}
 	render() {
-		const { alert, size, hasScrollingContent } = this;
+		const { alert, size, hasScrollingContent, enableDialogElement } = this;
 		const containerClass = this.containerClass.split(" ").filter(Boolean).reduce((acc, item) => ({
 			...acc,
 			[item]: true
@@ -257,19 +169,35 @@ let CDSModal = class CDSModal extends HostListenerMixin(LitElement) {
 			[`cds--modal-container--${size}`]: size,
 			...containerClass
 		});
-		return html`
-      <div
-        aria-label=${this._computeAriaLabel()}
-        part="dialog"
-        class=${containerClasses}
-        aria-modal=${true}
-        role="${alert ? "alert" : "dialog"}"
-        tabindex="-1"
-        @click=${this._handleClickContainer}>
-        <slot @slotchange="${this._handleSlotChange}"></slot>
-        ${hasScrollingContent ? html` <div class="cds--modal-content--overflow-indicator"></div> ` : ``}
-      </div>
-    `;
+		const ariaLabel = this._computeAriaLabel();
+		if (enableDialogElement) return html`
+        <cds-dialog
+          .open=${this.open}
+          .alert=${this.alert}
+          .preventCloseOnClickOutside=${this.preventCloseOnClickOutside}
+          .preventClose=${this.preventClose}
+          role="${alert ? "alertdialog" : "dialog"}"
+          aria-label=${ariaLabel}
+          modal-controlled
+          @cds-dialog-closed=${this._handleDialogClosed}
+          @cds-dialog-beingclosed=${this._handleDialogBeingClosed}>
+          <slot @slotchange="${this._handleSlotChange}"></slot>
+          ${hasScrollingContent ? html` <div class="cds--modal-content--overflow-indicator"></div> ` : ``}
+        </cds-dialog>
+      `;
+		else return html`
+        <div
+          aria-label=${ariaLabel}
+          part="dialog"
+          class=${containerClasses}
+          aria-modal=${true}
+          role="${alert ? "alert" : "dialog"}"
+          tabindex="-1"
+          @click=${this._handleClickContainer}>
+          <slot @slotchange="${this._handleSlotChange}"></slot>
+          ${hasScrollingContent ? html` <div class="cds--modal-content--overflow-indicator"></div> ` : ``}
+        </div>
+      `;
 	}
 	async updated(changedProperties) {
 		if (changedProperties.has("open")) {
@@ -313,12 +241,6 @@ let CDSModal = class CDSModal extends HostListenerMixin(LitElement) {
 		return `[data-modal-close],cds-modal-close-button`;
 	}
 	/**
-	* A selector selecting tabbable nodes.
-	*/
-	static get selectorTabbable() {
-		return selectorTabbable;
-	}
-	/**
 	* A selector selecting the nodes that should be focused when modal gets open.
 	*/
 	static get selectorPrimaryFocus() {
@@ -343,19 +265,18 @@ let CDSModal = class CDSModal extends HostListenerMixin(LitElement) {
 	static get eventClose() {
 		return `cds-modal-closed`;
 	}
-	/**
-	* The name of the custom event fired when this modal reaches a `finished` loading state
-	*/
-	static get eventOnLoadingSuccess() {
-		return `cds-modal-on-loadingsuccess`;
-	}
 	static {
 		this.styles = modal_default$1;
 	}
 };
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "enable-dialog-element"
+})], CDSModal.prototype, "enableDialogElement", void 0);
 __decorate([HostListener("click")], CDSModal.prototype, "_handleClick", void 0);
-__decorate([HostListener("keydown")], CDSModal.prototype, "_handleHostKeydown", void 0);
 __decorate([HostListener("document:keydown")], CDSModal.prototype, "_handleKeydown", void 0);
+__decorate([HostListener("keydown")], CDSModal.prototype, "_handleHostKeydown", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -377,35 +298,11 @@ __decorate([property({
 	reflect: true
 })], CDSModal.prototype, "open", void 0);
 __decorate([property({ reflect: true })], CDSModal.prototype, "size", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: "prevent-close-on-click-outside"
-})], CDSModal.prototype, "preventCloseOnClickOutside", void 0);
-__decorate([property({
-	reflect: true,
-	attribute: "loading-status"
-})], CDSModal.prototype, "loadingStatus", void 0);
-__decorate([property({
-	type: String,
-	attribute: "loading-description"
-})], CDSModal.prototype, "loadingDescription", void 0);
-__decorate([property({
-	type: Number,
-	attribute: "loading-success-delay"
-})], CDSModal.prototype, "loadingSuccessDelay", void 0);
-__decorate([property({
-	type: String,
-	attribute: "loading-icon-description"
-})], CDSModal.prototype, "loadingIconDescription", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true,
 	attribute: "should-submit-on-enter"
 })], CDSModal.prototype, "shouldSubmitOnEnter", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: "prevent-close"
-})], CDSModal.prototype, "preventClose", void 0);
 CDSModal = __decorate([carbonElement(`cds-modal`)], CDSModal);
 var modal_default = CDSModal;
 //#endregion

package/es/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","names":["styles","customElement"],"sources":["../../../src/components/modal/modal.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { MODAL_SIZE } from './defs';\nimport styles from './modal.scss?lit';\nimport { selectorTabbable } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport '../inline-loading';\nimport CDSModalFooter from './modal-footer';\n\nexport { MODAL_SIZE };\n\n/**\n * Modal.\n *\n * @element cds-modal\n * @csspart dialog The dialog.\n * @fires cds-modal-beingclosed\n *   The custom event fired before this modal is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this modal.\n * @fires cds-modal-closed - The custom event fired after this modal is closed upon a user gesture.\n */\n@customElement(`${prefix}-modal`)\nclass CDSModal extends HostListenerMixin(LitElement) {\n  /**\n   * The element that had focus before this modal gets open.\n   */\n  protected _launcher: Element | null = null;\n\n  /**\n   * The inline loading element that renders when `loading-status` is not `inactive`\n   */\n  private _loadingEl: HTMLElement | null = null;\n\n  /**\n   * MutationObserver that observes the modal-footer\n   */\n  private _footerObserver?: MutationObserver;\n\n  /**\n   * MutationObserver that observes the modal-header\n   */\n  private _headerObserver?: MutationObserver;\n\n  /**\n   * Loading statuses that are not `inactive`\n   */\n  private WORKING_LOADING_STATUSES = ['active', 'finished', 'error'];\n\n  /**\n   * Handles `click` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('click')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleClick = (event: MouseEvent) => {\n    if (\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      event.composedPath().indexOf(this.shadowRoot!) < 0 &&\n      !this.preventCloseOnClickOutside\n    ) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  };\n\n  /**\n   * Handle the keydown event.\n   * Trap the focus inside the side-panel by tracking keydown.key == `Tab`\n   *\n   * @param {KeyboardEvent} event The keyboard event object.\n   */\n  @HostListener('keydown')\n  protected _handleHostKeydown = (event: KeyboardEvent) => {\n    const target = event.target as HTMLElement | null;\n    const { primaryButton } = this._getFooterElements();\n\n    if (\n      this.open &&\n      this.shouldSubmitOnEnter &&\n      event.key === 'Enter' &&\n      target &&\n      document.activeElement !== primaryButton\n    ) {\n      const closeButton = (this.constructor as typeof CDSModal)\n        .selectorCloseButton;\n\n      const targetIsCloseButton =\n        !!target.closest(closeButton) ||\n        !!document.activeElement?.closest?.(closeButton);\n\n      if (!targetIsCloseButton) {\n        primaryButton?.click();\n        return;\n      }\n    }\n    if (event.key === 'Tab') {\n      const { first: _firstElement, last: _lastElement } = this.getFocusable();\n\n      if (\n        event.shiftKey &&\n        (this.shadowRoot?.activeElement === _firstElement ||\n          document.activeElement === _firstElement)\n      ) {\n        event.preventDefault();\n\n        _lastElement?.focus();\n      } else if (!event.shiftKey && document.activeElement === _lastElement) {\n        event.preventDefault();\n\n        _firstElement?.focus();\n      }\n    }\n  };\n\n  @HostListener('document:keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleKeydown = ({ key, target }: KeyboardEvent) => {\n    if (!this.open) return;\n\n    if (key === 'Esc' || key === 'Escape') {\n      this._handleUserInitiatedClose(target);\n    }\n  };\n\n  /**\n   * Get focusable elements.\n   *\n   * Querying all tabbable items.\n   *\n   * @returns {{first: HTMLElement, last: HTMLElement, all: HTMLElement[]}} Returns an object with various elements.\n   */\n  protected getFocusable(): {\n    first: HTMLElement | undefined;\n    last: HTMLElement | undefined;\n    all: HTMLElement[];\n  } {\n    const elements: HTMLElement[] = [];\n\n    // Add tabbable elements inside light DOM\n    const tabbableItems = this.querySelectorAll<HTMLElement>(selectorTabbable);\n    if (tabbableItems?.length) {\n      elements.push(...tabbableItems);\n    }\n\n    // Flatten NodeList arrays and filter for focusable items\n    const all = elements?.filter(\n      (el): el is HTMLElement => typeof el?.focus === 'function'\n    );\n\n    return {\n      first: all[0],\n      last: all[all.length - 1],\n      all,\n    };\n  }\n\n  /**\n   * Handles `click` event on the modal container.\n   *\n   * @param event The event.\n   */\n  protected _handleClickContainer(event: MouseEvent) {\n    if (\n      (event.target as Element).matches(\n        (this.constructor as typeof CDSModal).selectorCloseButton\n      ) &&\n      !this.preventClose\n    ) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  }\n\n  /**\n   * Handles user-initiated close request of this modal.\n   *\n   * @param triggeredBy The element that triggered this close request.\n   */\n  protected _handleUserInitiatedClose(triggeredBy: EventTarget | null) {\n    if (this.open) {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSModal).eventBeforeClose,\n            init\n          )\n        )\n      ) {\n        this.open = false;\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSModal).eventClose,\n            init\n          )\n        );\n      }\n    }\n  }\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange() {\n    if (this.querySelector(`${prefix}-modal-footer`)) {\n      this.setAttribute('has-footer', '');\n    } else {\n      this.removeAttribute('has-footer');\n    }\n  }\n\n  /**\n   * Specify whether the Modal is displaying an alert, error or warning.\n   * Should go hand in hand with the danger prop.\n   */\n  @property({ type: Boolean, reflect: true })\n  alert = false;\n\n  /**\n   * Specify text for the accessibility label of the header\n   */\n  @property({ attribute: 'aria-label' })\n  ariaLabel: string | null = null;\n\n  /**\n   * The additional CSS class names for the container <div> of the element.\n   */\n  @property({ attribute: 'container-class' })\n  containerClass = '';\n\n  /**\n   * Specify whether or not the Modal content should have any inner padding.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'full-width' })\n  fullWidth = false;\n\n  /**\n   * Specify whether the modal contains scrolling content\n   */\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'has-scrolling-content',\n  })\n  hasScrollingContent = false;\n\n  /**\n   * `true` if the modal should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Modal size.\n   */\n  @property({ reflect: true })\n  size = MODAL_SIZE.MEDIUM;\n\n  /**\n   * Prevent closing on click outside of modal\n   */\n  @property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })\n  preventCloseOnClickOutside = false;\n\n  /**\n   * Specify the loading status\n   */\n  @property({ reflect: true, attribute: 'loading-status' })\n  loadingStatus: 'inactive' | 'active' | 'finished' | 'error' = 'inactive';\n\n  /**\n   * Specify the description for the loading text\n   */\n  @property({ type: String, attribute: 'loading-description' })\n  loadingDescription = '';\n\n  /**\n   * Provide a delay for the setTimeout for success\n   */\n  @property({ type: Number, attribute: 'loading-success-delay' })\n  loadingSuccessDelay = 1500;\n\n  /**\n   * Specify the description for the loading icon\n   */\n  @property({ type: String, attribute: 'loading-icon-description' })\n  loadingIconDescription = 'Loading';\n\n  /**\n   * Specify if Enter key should be used as \"submit\" action that clicks the primary footer button\n   */\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'should-submit-on-enter',\n  })\n  shouldSubmitOnEnter = false;\n\n  /**\n   * Prevent the modal from closing after clicking the close button\n   */\n  @property({ type: Boolean, attribute: 'prevent-close' })\n  preventClose = false;\n\n  // Initializes the inline-loading element\n  private _initializeLoadingEl(footer: CDSModalFooter) {\n    if (!footer) return null;\n\n    if (\n      !this._loadingEl &&\n      this.WORKING_LOADING_STATUSES.includes(this.loadingStatus)\n    ) {\n      const el = document.createElement(`${prefix}-inline-loading`);\n      el.setAttribute('controlled', '');\n      el.setAttribute('aria-live', 'off');\n      footer.appendChild(el);\n      this._loadingEl = el as HTMLElement;\n    }\n    return this._loadingEl;\n  }\n\n  protected _getFooterElements() {\n    const footer = this.querySelector(`${prefix}-modal-footer`);\n\n    const primaryButton =\n      this.querySelector<HTMLElement>(\n        `${prefix}-modal-footer-button[kind=\"primary\"]`\n      ) ||\n      this.querySelector<HTMLElement>(\n        `${prefix}-modal-footer-button[kind=\"danger\"]`\n      ) ||\n      null;\n\n    const secondaryButtons = Array.from(\n      this.querySelectorAll<HTMLElement>(\n        `${prefix}-modal-footer-button[kind=\"secondary\"]`\n      )\n    );\n\n    return { footer, primaryButton, secondaryButtons };\n  }\n\n  // Updates the inline loading element in the modal footer\n  private _updateLoadingElement() {\n    const { footer, primaryButton, secondaryButtons } =\n      this._getFooterElements();\n\n    const loader = this._initializeLoadingEl(footer as CDSModalFooter);\n    if (!footer || !loader || !primaryButton) return;\n\n    if (this.WORKING_LOADING_STATUSES.includes(this.loadingStatus)) {\n      loader.style.display = 'inline-flex';\n      loader.setAttribute('status', String(this.loadingStatus));\n      loader.setAttribute('aria-live', 'assertive');\n      loader.setAttribute(\n        'icon-description',\n        String(this.loadingIconDescription)\n      );\n      loader.textContent = this.loadingDescription;\n      primaryButton.style.display = 'none';\n\n      if (secondaryButtons[0]) {\n        if (!footer.hasAttribute('has-three-buttons')) {\n          secondaryButtons[0].setAttribute('disabled', '');\n        } else {\n          secondaryButtons.forEach((b) => b.removeAttribute('disabled'));\n        }\n      }\n\n      if (this.loadingStatus === 'finished') {\n        // fire event for successful load\n        setTimeout(() => {\n          this.dispatchEvent(\n            new CustomEvent(\n              (this.constructor as typeof CDSModal).eventOnLoadingSuccess,\n              {\n                bubbles: true,\n                cancelable: true,\n                composed: true,\n              }\n            )\n          );\n        }, this.loadingSuccessDelay);\n      }\n    } else if (this.loadingStatus === 'inactive') {\n      loader.style.display = 'none';\n      loader.setAttribute('aria-live', 'off');\n\n      if (primaryButton) primaryButton.style.display = '';\n      if (secondaryButtons)\n        secondaryButtons.forEach((b) => b.removeAttribute('disabled'));\n    }\n  }\n\n  async firstUpdated() {\n    const body = this.querySelector(\n      (this.constructor as typeof CDSModal).selectorModalBody\n    );\n\n    if (!body) {\n      const bodyElement = document.createElement(\n        (this.constructor as typeof CDSModal).selectorModalBody\n      );\n      this.appendChild(bodyElement);\n    }\n  }\n\n  /**\n   * Computes the aria-label of the modal based on (in order of highest to lowest precedence):\n   * - `modal-label`\n   * - `aria-label`\n   * - `modal-heading`\n   */\n  private _computeAriaLabel(): string {\n    const labelEl = this.querySelector(`${prefix}-modal-label`);\n    const label = labelEl?.textContent?.trim();\n    if (label) return label;\n\n    const ariaLabel = this.ariaLabel?.trim();\n    if (ariaLabel) return ariaLabel;\n\n    const headingEl = this.querySelector(`${prefix}-modal-heading`);\n    const heading = headingEl?.textContent?.trim();\n    return heading || '';\n  }\n\n  /**\n   * Observes the modal footer's `has-three-buttons` attribute to account for cases\n   * where the loading status and the amount of footer-buttons\n   * are being changed dynamically\n   */\n  private _observeFooter() {\n    const footer = this.querySelector(`${prefix}-modal-footer`);\n    if (!footer) return;\n\n    this._footerObserver = new MutationObserver(() => {\n      this._updateLoadingElement();\n    });\n    this._footerObserver.observe(footer, {\n      attributes: true,\n      childList: true,\n      attributeFilter: ['has-three-buttons'],\n    });\n  }\n\n  /**\n   * Observes the modal header to account for cases where the modal-heading,\n   * modal-label, and/or `aria-label` are dynamically changing\n   * to update the `aria-label` put on the modal\n   */\n  private _observeHeader() {\n    const header = this.querySelector(`${prefix}-modal-header`);\n    if (!header) return;\n\n    this._headerObserver = new MutationObserver(() => {\n      this.requestUpdate('ariaLabel');\n    });\n    this._headerObserver.observe(header, {\n      subtree: true,\n      characterData: true,\n      childList: true,\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback?.();\n    this._observeFooter();\n    this._observeHeader();\n  }\n\n  disconnectedCallback() {\n    this._footerObserver?.disconnect();\n    this._headerObserver?.disconnect();\n    super.disconnectedCallback?.();\n  }\n\n  render() {\n    const { alert, size, hasScrollingContent } = this;\n    const containerClass = this.containerClass\n      .split(' ')\n      .filter(Boolean)\n      .reduce((acc, item) => ({ ...acc, [item]: true }), {});\n    const containerClasses = classMap({\n      [`${prefix}--modal-container`]: true,\n      [`${prefix}--modal-container--${size}`]: size,\n      ...containerClass,\n    });\n    return html`\n      <div\n        aria-label=${this._computeAriaLabel()}\n        part=\"dialog\"\n        class=${containerClasses}\n        aria-modal=${true}\n        role=\"${alert ? 'alert' : 'dialog'}\"\n        tabindex=\"-1\"\n        @click=${this._handleClickContainer}>\n        <slot @slotchange=\"${this._handleSlotChange}\"></slot>\n        ${hasScrollingContent\n          ? html` <div class=\"cds--modal-content--overflow-indicator\"></div> `\n          : ``}\n      </div>\n    `;\n  }\n\n  async updated(changedProperties) {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n        this._launcher = this.ownerDocument!.activeElement;\n        const primaryFocusNode = this.querySelector(\n          (this.constructor as typeof CDSModal).selectorPrimaryFocus\n        );\n        await (this.constructor as typeof CDSModal)._delay();\n        if (primaryFocusNode) {\n          // For cases where a `carbon-web-components` component (e.g. `<cds-button>`) being `primaryFocusNode`,\n          // where its first update/render cycle that makes it focusable happens after `<cds-modal>`'s first update/render cycle\n          (primaryFocusNode as HTMLElement).focus();\n        } else {\n          const { primaryButton, secondaryButtons } = this._getFooterElements();\n\n          if (primaryButton) {\n            const kind = primaryButton?.getAttribute('kind');\n\n            if (kind === 'danger' && secondaryButtons[0]) {\n              secondaryButtons[0].focus();\n            } else {\n              primaryButton.focus();\n            }\n          } else {\n            const { first } = this.getFocusable();\n\n            first?.focus();\n          }\n        }\n      } else if (\n        this._launcher &&\n        typeof (this._launcher as HTMLElement).focus === 'function'\n      ) {\n        (this._launcher as HTMLElement).focus();\n        this._launcher = null;\n      }\n    }\n    if (\n      changedProperties.has('loadingStatus') ||\n      changedProperties.has('loadingDescription') ||\n      changedProperties.has('loadingSuccessDelay') ||\n      changedProperties.has('loadingIconDescription')\n    ) {\n      await (this.constructor as typeof CDSModal)._delay();\n      this._updateLoadingElement();\n    }\n  }\n\n  /**\n   * @param ms The number of milliseconds.\n   * @returns A promise that is resolves after the given milliseconds.\n   */\n  protected static _delay(ms = 0) {\n    return new Promise((resolve) => {\n      setTimeout(resolve, ms);\n    });\n  }\n\n  /**\n   * A selector selecting buttons that should close this modal.\n   */\n  static get selectorCloseButton() {\n    return `[data-modal-close],${prefix}-modal-close-button`;\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return selectorTabbable;\n  }\n\n  /**\n   * A selector selecting the nodes that should be focused when modal gets open.\n   */\n  static get selectorPrimaryFocus() {\n    return `[data-modal-primary-focus],${prefix}-modal-footer ${prefix}-button[kind=\"primary\"]`;\n  }\n\n  /**\n   * A selector selecting the modal body component\n   */\n  static get selectorModalBody() {\n    return `${prefix}-modal-body`;\n  }\n\n  /**\n   * The name of the custom event fired before this modal is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this modal.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-modal-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this modal is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-modal-closed`;\n  }\n\n  /**\n   * The name of the custom event fired when this modal reaches a `finished` loading state\n   */\n  static get eventOnLoadingSuccess() {\n    return `${prefix}-modal-on-loadingsuccess`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSModal;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAA,WAAA,MACM,iBAAiB,kBAAkB,WAAW,CAAC;;;mBAIb;oBAKG;kCAeN;GAAC;GAAU;GAAY;GAAQ;uBAUxC,UAAsB;AAC9C,OAEE,MAAM,cAAc,CAAC,QAAQ,KAAK,WAAY,GAAG,KACjD,CAAC,KAAK,2BAEN,MAAK,0BAA0B,MAAM,OAAO;;6BAWhB,UAAyB;GACvD,MAAM,SAAS,MAAM;GACrB,MAAM,EAAE,kBAAkB,KAAK,oBAAoB;AAEnD,OACE,KAAK,QACL,KAAK,uBACL,MAAM,QAAQ,WACd,UACA,SAAS,kBAAkB,eAC3B;IACA,MAAM,cAAe,KAAK,YACvB;AAMH,QAAI,EAHF,CAAC,CAAC,OAAO,QAAQ,YAAY,IAC7B,CAAC,CAAC,SAAS,eAAe,UAAU,YAAY,GAExB;AACxB,oBAAe,OAAO;AACtB;;;AAGJ,OAAI,MAAM,QAAQ,OAAO;IACvB,MAAM,EAAE,OAAO,eAAe,MAAM,iBAAiB,KAAK,cAAc;AAExE,QACE,MAAM,aACL,KAAK,YAAY,kBAAkB,iBAClC,SAAS,kBAAkB,gBAC7B;AACA,WAAM,gBAAgB;AAEtB,mBAAc,OAAO;eACZ,CAAC,MAAM,YAAY,SAAS,kBAAkB,cAAc;AACrE,WAAM,gBAAgB;AAEtB,oBAAe,OAAO;;;;yBAQA,EAAE,KAAK,aAA4B;AAC7D,OAAI,CAAC,KAAK,KAAM;AAEhB,OAAI,QAAQ,SAAS,QAAQ,SAC3B,MAAK,0BAA0B,OAAO;;eAsGlC;mBAMmB;wBAMV;mBAML;6BAUU;cAMf;;oCAYsB;uBAMiC;4BAMzC;6BAMC;gCAMG;6BAUH;sBAMP;;;;;;;;;CAjLf,eAIE;EACA,MAAM,WAA0B,EAAE;EAGlC,MAAM,gBAAgB,KAAK,iBAA8B,iBAAiB;AAC1E,MAAI,eAAe,OACjB,UAAS,KAAK,GAAG,cAAc;EAIjC,MAAM,MAAM,UAAU,QACnB,OAA0B,OAAO,IAAI,UAAU,WACjD;AAED,SAAO;GACL,OAAO,IAAI;GACX,MAAM,IAAI,IAAI,SAAS;GACvB;GACD;;;;;;;CAQH,sBAAgC,OAAmB;AACjD,MACG,MAAM,OAAmB,QACvB,KAAK,YAAgC,oBACvC,IACD,CAAC,KAAK,aAEN,MAAK,0BAA0B,MAAM,OAAO;;;;;;;CAShD,0BAAoC,aAAiC;AACnE,MAAI,KAAK,MAAM;GACb,MAAM,OAAO;IACX,SAAS;IACT,YAAY;IACZ,UAAU;IACV,QAAQ,EACN,aACD;IACF;AACD,OACE,KAAK,cACH,IAAI,YACD,KAAK,YAAgC,kBACtC,KACD,CACF,EACD;AACA,SAAK,OAAO;AACZ,SAAK,cACH,IAAI,YACD,KAAK,YAAgC,YACtC,KACD,CACF;;;;;;;CAQP,oBAA8B;AAC5B,MAAI,KAAK,cAAc,mBAAyB,CAC9C,MAAK,aAAa,cAAc,GAAG;MAEnC,MAAK,gBAAgB,aAAa;;CAkGtC,qBAA6B,QAAwB;AACnD,MAAI,CAAC,OAAQ,QAAO;AAEpB,MACE,CAAC,KAAK,cACN,KAAK,yBAAyB,SAAS,KAAK,cAAc,EAC1D;GACA,MAAM,KAAK,SAAS,cAAc,qBAA2B;AAC7D,MAAG,aAAa,cAAc,GAAG;AACjC,MAAG,aAAa,aAAa,MAAM;AACnC,UAAO,YAAY,GAAG;AACtB,QAAK,aAAa;;AAEpB,SAAO,KAAK;;CAGd,qBAA+B;AAkB7B,SAAO;GAAE,QAjBM,KAAK,cAAc,mBAAyB;GAiB1C,eAdf,KAAK,cACH,0CACD,IACD,KAAK,cACH,yCACD,IACD;GAQ8B,kBANP,MAAM,KAC7B,KAAK,iBACH,4CACD,CACF;GAEiD;;CAIpD,wBAAgC;EAC9B,MAAM,EAAE,QAAQ,eAAe,qBAC7B,KAAK,oBAAoB;EAE3B,MAAM,SAAS,KAAK,qBAAqB,OAAyB;AAClE,MAAI,CAAC,UAAU,CAAC,UAAU,CAAC,cAAe;AAE1C,MAAI,KAAK,yBAAyB,SAAS,KAAK,cAAc,EAAE;AAC9D,UAAO,MAAM,UAAU;AACvB,UAAO,aAAa,UAAU,OAAO,KAAK,cAAc,CAAC;AACzD,UAAO,aAAa,aAAa,YAAY;AAC7C,UAAO,aACL,oBACA,OAAO,KAAK,uBAAuB,CACpC;AACD,UAAO,cAAc,KAAK;AAC1B,iBAAc,MAAM,UAAU;AAE9B,OAAI,iBAAiB,GACnB,KAAI,CAAC,OAAO,aAAa,oBAAoB,CAC3C,kBAAiB,GAAG,aAAa,YAAY,GAAG;OAEhD,kBAAiB,SAAS,MAAM,EAAE,gBAAgB,WAAW,CAAC;AAIlE,OAAI,KAAK,kBAAkB,WAEzB,kBAAiB;AACf,SAAK,cACH,IAAI,YACD,KAAK,YAAgC,uBACtC;KACE,SAAS;KACT,YAAY;KACZ,UAAU;KACX,CACF,CACF;MACA,KAAK,oBAAoB;aAErB,KAAK,kBAAkB,YAAY;AAC5C,UAAO,MAAM,UAAU;AACvB,UAAO,aAAa,aAAa,MAAM;AAEvC,OAAI,cAAe,eAAc,MAAM,UAAU;AACjD,OAAI,iBACF,kBAAiB,SAAS,MAAM,EAAE,gBAAgB,WAAW,CAAC;;;CAIpE,MAAM,eAAe;AAKnB,MAAI,CAJS,KAAK,cACf,KAAK,YAAgC,kBACvC,EAEU;GACT,MAAM,cAAc,SAAS,cAC1B,KAAK,YAAgC,kBACvC;AACD,QAAK,YAAY,YAAY;;;;;;;;;CAUjC,oBAAoC;EAElC,MAAM,QADU,KAAK,cAAc,kBAAwB,EACpC,aAAa,MAAM;AAC1C,MAAI,MAAO,QAAO;EAElB,MAAM,YAAY,KAAK,WAAW,MAAM;AACxC,MAAI,UAAW,QAAO;AAItB,SAFkB,KAAK,cAAc,oBAA0B,EACpC,aAAa,MAAM,IAC5B;;;;;;;CAQpB,iBAAyB;EACvB,MAAM,SAAS,KAAK,cAAc,mBAAyB;AAC3D,MAAI,CAAC,OAAQ;AAEb,OAAK,kBAAkB,IAAI,uBAAuB;AAChD,QAAK,uBAAuB;IAC5B;AACF,OAAK,gBAAgB,QAAQ,QAAQ;GACnC,YAAY;GACZ,WAAW;GACX,iBAAiB,CAAC,oBAAoB;GACvC,CAAC;;;;;;;CAQJ,iBAAyB;EACvB,MAAM,SAAS,KAAK,cAAc,mBAAyB;AAC3D,MAAI,CAAC,OAAQ;AAEb,OAAK,kBAAkB,IAAI,uBAAuB;AAChD,QAAK,cAAc,YAAY;IAC/B;AACF,OAAK,gBAAgB,QAAQ,QAAQ;GACnC,SAAS;GACT,eAAe;GACf,WAAW;GACZ,CAAC;;CAGJ,oBAAoB;AAClB,QAAM,qBAAqB;AAC3B,OAAK,gBAAgB;AACrB,OAAK,gBAAgB;;CAGvB,uBAAuB;AACrB,OAAK,iBAAiB,YAAY;AAClC,OAAK,iBAAiB,YAAY;AAClC,QAAM,wBAAwB;;CAGhC,SAAS;EACP,MAAM,EAAE,OAAO,MAAM,wBAAwB;EAC7C,MAAM,iBAAiB,KAAK,eACzB,MAAM,IAAI,CACV,OAAO,QAAQ,CACf,QAAQ,KAAK,UAAU;GAAE,GAAG;IAAM,OAAO;GAAM,GAAG,EAAE,CAAC;EACxD,MAAM,mBAAmB,SAAS;IAC/B,yBAA+B;IAC/B,yBAA+B,SAAS;GACzC,GAAG;GACJ,CAAC;AACF,SAAO,IAAI;;qBAEM,KAAK,mBAAmB,CAAC;;gBAE9B,iBAAiB;qBACZ,KAAK;gBACV,QAAQ,UAAU,SAAS;;iBAE1B,KAAK,sBAAsB;6BACf,KAAK,kBAAkB;UAC1C,sBACE,IAAI,iEACJ,GAAG;;;;CAKb,MAAM,QAAQ,mBAAmB;AAC/B,MAAI,kBAAkB,IAAI,OAAO;OAC3B,KAAK,MAAM;AAEb,SAAK,YAAY,KAAK,cAAe;IACrC,MAAM,mBAAmB,KAAK,cAC3B,KAAK,YAAgC,qBACvC;AACD,UAAO,KAAK,YAAgC,QAAQ;AACpD,QAAI,iBAGD,kBAAiC,OAAO;SACpC;KACL,MAAM,EAAE,eAAe,qBAAqB,KAAK,oBAAoB;AAErE,SAAI,cAGF,KAFa,eAAe,aAAa,OAAO,KAEnC,YAAY,iBAAiB,GACxC,kBAAiB,GAAG,OAAO;SAE3B,eAAc,OAAO;UAElB;MACL,MAAM,EAAE,UAAU,KAAK,cAAc;AAErC,aAAO,OAAO;;;cAIlB,KAAK,aACL,OAAQ,KAAK,UAA0B,UAAU,YACjD;AACC,SAAK,UAA0B,OAAO;AACvC,SAAK,YAAY;;;AAGrB,MACE,kBAAkB,IAAI,gBAAgB,IACtC,kBAAkB,IAAI,qBAAqB,IAC3C,kBAAkB,IAAI,sBAAsB,IAC5C,kBAAkB,IAAI,yBAAyB,EAC/C;AACA,SAAO,KAAK,YAAgC,QAAQ;AACpD,QAAK,uBAAuB;;;;;;;CAQhC,OAAiB,OAAO,KAAK,GAAG;AAC9B,SAAO,IAAI,SAAS,YAAY;AAC9B,cAAW,SAAS,GAAG;IACvB;;;;;CAMJ,WAAW,sBAAsB;AAC/B,SAAO;;;;;CAMT,WAAW,mBAAmB;AAC5B,SAAO;;;;;CAMT,WAAW,uBAAuB;AAChC,SAAO;;;;;CAMT,WAAW,oBAAoB;AAC7B,SAAO;;;;;;CAOT,WAAW,mBAAmB;AAC5B,SAAO;;;;;CAMT,WAAW,aAAa;AACtB,SAAO;;;;;CAMT,WAAW,wBAAwB;AACjC,SAAO;;;gBAGOA;;;YAxjBf,aAAa,QAAQ,CAAA,EAAA,SAAA,WAAA,gBAAA,KAAA,EAAA;YAmBrB,aAAa,UAAU,CAAA,EAAA,SAAA,WAAA,sBAAA,KAAA,EAAA;YA2CvB,aAAa,mBAAmB,CAAA,EAAA,SAAA,WAAA,kBAAA,KAAA,EAAA;YA4GhC,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,SAAA,WAAA,SAAA,KAAA,EAAA;YAM1C,SAAS,EAAE,WAAW,cAAc,CAAC,CAAA,EAAA,SAAA,WAAA,aAAA,KAAA,EAAA;YAMrC,SAAS,EAAE,WAAW,mBAAmB,CAAC,CAAA,EAAA,SAAA,WAAA,kBAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAc,CAAC,CAAA,EAAA,SAAA,WAAA,aAAA,KAAA,EAAA;YAMnE,SAAS;CACR,MAAM;CACN,SAAS;CACT,WAAW;CACZ,CAAC,CAAA,EAAA,SAAA,WAAA,uBAAA,KAAA,EAAA;YAMD,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,SAAA,WAAA,QAAA,KAAA,EAAA;YAM1C,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,SAAA,WAAA,QAAA,KAAA,EAAA;YAM3B,SAAS;CAAE,MAAM;CAAS,WAAW;CAAkC,CAAC,CAAA,EAAA,SAAA,WAAA,8BAAA,KAAA,EAAA;YAMxE,SAAS;CAAE,SAAS;CAAM,WAAW;CAAkB,CAAC,CAAA,EAAA,SAAA,WAAA,iBAAA,KAAA,EAAA;YAMxD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAuB,CAAC,CAAA,EAAA,SAAA,WAAA,sBAAA,KAAA,EAAA;YAM5D,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAyB,CAAC,CAAA,EAAA,SAAA,WAAA,uBAAA,KAAA,EAAA;YAM9D,SAAS;CAAE,MAAM;CAAQ,WAAW;CAA4B,CAAC,CAAA,EAAA,SAAA,WAAA,0BAAA,KAAA,EAAA;YAMjE,SAAS;CACR,MAAM;CACN,SAAS;CACT,WAAW;CACZ,CAAC,CAAA,EAAA,SAAA,WAAA,uBAAA,KAAA,EAAA;YAMD,SAAS;CAAE,MAAM;CAAS,WAAW;CAAiB,CAAC,CAAA,EAAA,SAAA,WAAA,gBAAA,KAAA,EAAA;uBAhSzDC,cAAc,YAAkB,CAAA,EAAA,SAAA;AA2lBjC,IAAA,gBAAe"}
+{"version":3,"file":"modal.js","names":["styles","customElement"],"sources":["../../../src/components/modal/modal.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { MODAL_SIZE } from './defs';\nimport styles from './modal.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport CDSModalBase from './modal-base';\nimport '../dialog/dialog';\n\nexport { MODAL_SIZE };\n\n/**\n * Modal.\n *\n * @element cds-modal\n * @csspart dialog The dialog.\n * @fires cds-modal-beingclosed\n *   The custom event fired before this modal is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this modal.\n * @fires cds-modal-closed - The custom event fired after this modal is closed upon a user gesture.\n */\n@customElement(`${prefix}-modal`)\nclass CDSModal extends CDSModalBase {\n  /**\n   * Enable the use of native dialog element instead of div with role=\"dialog\"\n   */\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'enable-dialog-element',\n  })\n  enableDialogElement = false;\n\n  /**\n   * MutationObserver that observes the modal-footer\n   */\n  private _footerObserver?: MutationObserver;\n\n  /**\n   * MutationObserver that observes the modal-header\n   */\n  private _headerObserver?: MutationObserver;\n\n  /**\n   * Handles `click` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('click')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleClick = (event: MouseEvent) => {\n    if (\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      event.composedPath().indexOf(this.shadowRoot!) < 0 &&\n      !this.preventCloseOnClickOutside\n    ) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  };\n\n  @HostListener('document:keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleKeydown = ({ key, target }: KeyboardEvent) => {\n    // let the Dialog handle the event if using `enable-dialog-element` feature flag\n    if (!this.open || this.enableDialogElement) return;\n\n    if (key === 'Esc' || key === 'Escape') {\n      this._handleUserInitiatedClose(target);\n    }\n  };\n\n  /**\n   * Handle the keydown event.\n   * Trap the focus inside the side-panel by tracking keydown.key == `Tab`\n   *\n   * @param {KeyboardEvent} event The keyboard event object.\n   */\n  @HostListener('keydown')\n  protected _handleHostKeydown = (event: KeyboardEvent) => {\n    const target = event.target as HTMLElement | null;\n    const { primaryButton } = this._getFooterElements();\n\n    if (\n      this.open &&\n      this.shouldSubmitOnEnter &&\n      event.key === 'Enter' &&\n      target &&\n      document.activeElement !== primaryButton\n    ) {\n      const closeButton = (this.constructor as typeof CDSModal)\n        .selectorCloseButton;\n\n      const targetIsCloseButton =\n        !!target.closest(closeButton) ||\n        !!document.activeElement?.closest?.(closeButton);\n\n      if (!targetIsCloseButton) {\n        primaryButton?.click();\n        return;\n      }\n    }\n\n    if (this.enableDialogElement) return;\n\n    if (event.key === 'Tab') {\n      const { first: _firstElement, last: _lastElement } = this.getFocusable();\n\n      if (\n        event.shiftKey &&\n        (this.shadowRoot?.activeElement === _firstElement ||\n          document.activeElement === _firstElement)\n      ) {\n        event.preventDefault();\n\n        _lastElement?.focus();\n      } else if (!event.shiftKey && document.activeElement === _lastElement) {\n        event.preventDefault();\n\n        _firstElement?.focus();\n      }\n    }\n  };\n\n  /**\n   * `enable-dialog-element`\n   *\n   * Handles `cds-dialog-closed` event from the nested dialog element.\n   * Syncs the open state when the dialog closes, and stops the propagation of the\n   * event in favour of `cds-modal-closed`\n   */\n  protected _handleDialogClosed = (event: CustomEvent) => {\n    event.stopPropagation();\n\n    this.open = false;\n\n    // fire modal closed event\n    this.dispatchEvent(\n      new CustomEvent((this.constructor as typeof CDSModal).eventClose, {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: event.detail,\n      })\n    );\n  };\n\n  /**\n   * `enable-dialog-element`\n   *\n   * Handles `cds-dialog-beingclosed` event from the nested dialog element.\n   * Stops the propagation of the event in favour of `cds-modal-beingclosed`\n   */\n  protected _handleDialogBeingClosed = (event: CustomEvent) => {\n    event.stopPropagation();\n\n    const modalEvent = new CustomEvent(\n      (this.constructor as typeof CDSModal).eventBeforeClose,\n      {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: event.detail,\n      }\n    );\n\n    // allow the user to cancel the beingclosed event\n    if (!this.dispatchEvent(modalEvent)) {\n      event.preventDefault();\n    }\n  };\n\n  /**\n   * Specify whether the Modal is displaying an alert, error or warning.\n   * Should go hand in hand with the danger prop.\n   */\n  @property({ type: Boolean, reflect: true })\n  alert = false;\n\n  /**\n   * Specify text for the accessibility label of the header\n   */\n  @property({ attribute: 'aria-label' })\n  ariaLabel: string | null = null;\n\n  /**\n   * The additional CSS class names for the container <div> of the element.\n   */\n  @property({ attribute: 'container-class' })\n  containerClass = '';\n\n  /**\n   * Specify whether or not the Modal content should have any inner padding.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'full-width' })\n  fullWidth = false;\n\n  /**\n   * Specify whether the modal contains scrolling content\n   */\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'has-scrolling-content',\n  })\n  hasScrollingContent = false;\n\n  /**\n   * `true` if the modal should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Modal size.\n   */\n  @property({ reflect: true })\n  size = MODAL_SIZE.MEDIUM;\n\n  /**\n   * Specify if Enter key should be used as \"submit\" action that clicks the primary footer button\n   */\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'should-submit-on-enter',\n  })\n  shouldSubmitOnEnter = false;\n\n  async firstUpdated() {\n    const body = this.querySelector(\n      (this.constructor as typeof CDSModal).selectorModalBody\n    );\n\n    if (!body) {\n      const bodyElement = document.createElement(\n        (this.constructor as typeof CDSModal).selectorModalBody\n      );\n      this.appendChild(bodyElement);\n    }\n  }\n\n  /**\n   * Computes the aria-label of the modal based on (in order of highest to lowest precedence):\n   * - `modal-label`\n   * - `aria-label`\n   * - `modal-heading`\n   */\n  private _computeAriaLabel(): string {\n    const labelEl = this.querySelector(`${prefix}-modal-label`);\n    const label = labelEl?.textContent?.trim();\n    if (label) return label;\n\n    const ariaLabel = this.ariaLabel?.trim();\n    if (ariaLabel) return ariaLabel;\n\n    const headingEl = this.querySelector(`${prefix}-modal-heading`);\n    const heading = headingEl?.textContent?.trim();\n    return heading || '';\n  }\n\n  /**\n   * Observes the modal footer's `has-three-buttons` attribute to account for cases\n   * where the loading status and the amount of footer-buttons\n   * are being changed dynamically\n   */\n  private _observeFooter() {\n    const footer = this.querySelector(`${prefix}-modal-footer`);\n    if (!footer) return;\n\n    this._footerObserver = new MutationObserver(() => {\n      this._updateLoadingElement();\n    });\n    this._footerObserver.observe(footer, {\n      attributes: true,\n      childList: true,\n      attributeFilter: ['has-three-buttons'],\n    });\n  }\n\n  /**\n   * Observes the modal header to account for cases where the modal-heading,\n   * modal-label, and/or `aria-label` are dynamically changing\n   * to update the `aria-label` put on the modal\n   */\n  private _observeHeader() {\n    const header = this.querySelector(`${prefix}-modal-header`);\n    if (!header) return;\n\n    this._headerObserver = new MutationObserver(() => {\n      this.requestUpdate('ariaLabel');\n    });\n    this._headerObserver.observe(header, {\n      subtree: true,\n      characterData: true,\n      childList: true,\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback?.();\n    this._observeFooter();\n    this._observeHeader();\n  }\n\n  disconnectedCallback() {\n    this._footerObserver?.disconnect();\n    this._headerObserver?.disconnect();\n    super.disconnectedCallback?.();\n  }\n\n  render() {\n    const { alert, size, hasScrollingContent, enableDialogElement } = this;\n    const containerClass = this.containerClass\n      .split(' ')\n      .filter(Boolean)\n      .reduce((acc, item) => ({ ...acc, [item]: true }), {});\n    const containerClasses = classMap({\n      [`${prefix}--modal-container`]: true,\n      [`${prefix}--modal-container--${size}`]: size,\n      ...containerClass,\n    });\n\n    const ariaLabel = this._computeAriaLabel();\n\n    if (enableDialogElement) {\n      return html`\n        <cds-dialog\n          .open=${this.open}\n          .alert=${this.alert}\n          .preventCloseOnClickOutside=${this.preventCloseOnClickOutside}\n          .preventClose=${this.preventClose}\n          role=\"${alert ? 'alertdialog' : 'dialog'}\"\n          aria-label=${ariaLabel}\n          modal-controlled\n          @cds-dialog-closed=${this._handleDialogClosed}\n          @cds-dialog-beingclosed=${this._handleDialogBeingClosed}>\n          <slot @slotchange=\"${this._handleSlotChange}\"></slot>\n          ${hasScrollingContent\n            ? html` <div class=\"cds--modal-content--overflow-indicator\"></div> `\n            : ``}\n        </cds-dialog>\n      `;\n    } else {\n      return html`\n        <div\n          aria-label=${ariaLabel}\n          part=\"dialog\"\n          class=${containerClasses}\n          aria-modal=${true}\n          role=\"${alert ? 'alert' : 'dialog'}\"\n          tabindex=\"-1\"\n          @click=${this._handleClickContainer}>\n          <slot @slotchange=\"${this._handleSlotChange}\"></slot>\n          ${hasScrollingContent\n            ? html` <div class=\"cds--modal-content--overflow-indicator\"></div> `\n            : ``}\n        </div>\n      `;\n    }\n  }\n\n  async updated(changedProperties) {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n        this._launcher = this.ownerDocument!.activeElement;\n        const primaryFocusNode = this.querySelector(\n          (this.constructor as typeof CDSModal).selectorPrimaryFocus\n        );\n        await (this.constructor as typeof CDSModal)._delay();\n        if (primaryFocusNode) {\n          // For cases where a `carbon-web-components` component (e.g. `<cds-button>`) being `primaryFocusNode`,\n          // where its first update/render cycle that makes it focusable happens after `<cds-modal>`'s first update/render cycle\n          (primaryFocusNode as HTMLElement).focus();\n        } else {\n          const { primaryButton, secondaryButtons } = this._getFooterElements();\n\n          if (primaryButton) {\n            const kind = primaryButton?.getAttribute('kind');\n\n            if (kind === 'danger' && secondaryButtons[0]) {\n              secondaryButtons[0].focus();\n            } else {\n              primaryButton.focus();\n            }\n          } else {\n            const { first } = this.getFocusable();\n\n            first?.focus();\n          }\n        }\n      } else if (\n        this._launcher &&\n        typeof (this._launcher as HTMLElement).focus === 'function'\n      ) {\n        (this._launcher as HTMLElement).focus();\n        this._launcher = null;\n      }\n    }\n    if (\n      changedProperties.has('loadingStatus') ||\n      changedProperties.has('loadingDescription') ||\n      changedProperties.has('loadingSuccessDelay') ||\n      changedProperties.has('loadingIconDescription')\n    ) {\n      await (this.constructor as typeof CDSModal)._delay();\n      this._updateLoadingElement();\n    }\n  }\n\n  /**\n   * @param ms The number of milliseconds.\n   * @returns A promise that is resolves after the given milliseconds.\n   */\n  protected static _delay(ms = 0) {\n    return new Promise((resolve) => {\n      setTimeout(resolve, ms);\n    });\n  }\n\n  /**\n   * A selector selecting buttons that should close this modal.\n   */\n  static get selectorCloseButton() {\n    return `[data-modal-close],${prefix}-modal-close-button`;\n  }\n\n  /**\n   * A selector selecting the nodes that should be focused when modal gets open.\n   */\n  static get selectorPrimaryFocus() {\n    return `[data-modal-primary-focus],${prefix}-modal-footer ${prefix}-button[kind=\"primary\"]`;\n  }\n\n  /**\n   * A selector selecting the modal body component\n   */\n  static get selectorModalBody() {\n    return `${prefix}-modal-body`;\n  }\n\n  /**\n   * The name of the custom event fired before this modal is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this modal.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-modal-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this modal is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-modal-closed`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSModal;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,IAAA,WAAA,MACM,iBAAiB,aAAa;;;6BASZ;uBAoBI,UAAsB;AAC9C,OAEE,MAAM,cAAc,CAAC,QAAQ,KAAK,WAAY,GAAG,KACjD,CAAC,KAAK,2BAEN,MAAK,0BAA0B,MAAM,OAAO;;yBAOpB,EAAE,KAAK,aAA4B;AAE7D,OAAI,CAAC,KAAK,QAAQ,KAAK,oBAAqB;AAE5C,OAAI,QAAQ,SAAS,QAAQ,SAC3B,MAAK,0BAA0B,OAAO;;6BAWV,UAAyB;GACvD,MAAM,SAAS,MAAM;GACrB,MAAM,EAAE,kBAAkB,KAAK,oBAAoB;AAEnD,OACE,KAAK,QACL,KAAK,uBACL,MAAM,QAAQ,WACd,UACA,SAAS,kBAAkB,eAC3B;IACA,MAAM,cAAe,KAAK,YACvB;AAMH,QAAI,EAHF,CAAC,CAAC,OAAO,QAAQ,YAAY,IAC7B,CAAC,CAAC,SAAS,eAAe,UAAU,YAAY,GAExB;AACxB,oBAAe,OAAO;AACtB;;;AAIJ,OAAI,KAAK,oBAAqB;AAE9B,OAAI,MAAM,QAAQ,OAAO;IACvB,MAAM,EAAE,OAAO,eAAe,MAAM,iBAAiB,KAAK,cAAc;AAExE,QACE,MAAM,aACL,KAAK,YAAY,kBAAkB,iBAClC,SAAS,kBAAkB,gBAC7B;AACA,WAAM,gBAAgB;AAEtB,mBAAc,OAAO;eACZ,CAAC,MAAM,YAAY,SAAS,kBAAkB,cAAc;AACrE,WAAM,gBAAgB;AAEtB,oBAAe,OAAO;;;;8BAYK,UAAuB;AACtD,SAAM,iBAAiB;AAEvB,QAAK,OAAO;AAGZ,QAAK,cACH,IAAI,YAAa,KAAK,YAAgC,YAAY;IAChE,SAAS;IACT,YAAY;IACZ,UAAU;IACV,QAAQ,MAAM;IACf,CAAC,CACH;;mCASmC,UAAuB;AAC3D,SAAM,iBAAiB;GAEvB,MAAM,aAAa,IAAI,YACpB,KAAK,YAAgC,kBACtC;IACE,SAAS;IACT,YAAY;IACZ,UAAU;IACV,QAAQ,MAAM;IACf,CACF;AAGD,OAAI,CAAC,KAAK,cAAc,WAAW,CACjC,OAAM,gBAAgB;;eASlB;mBAMmB;wBAMV;mBAML;6BAUU;cAMf;;6BAgBe;;CAEtB,MAAM,eAAe;AAKnB,MAAI,CAJS,KAAK,cACf,KAAK,YAAgC,kBACvC,EAEU;GACT,MAAM,cAAc,SAAS,cAC1B,KAAK,YAAgC,kBACvC;AACD,QAAK,YAAY,YAAY;;;;;;;;;CAUjC,oBAAoC;EAElC,MAAM,QADU,KAAK,cAAc,kBAAwB,EACpC,aAAa,MAAM;AAC1C,MAAI,MAAO,QAAO;EAElB,MAAM,YAAY,KAAK,WAAW,MAAM;AACxC,MAAI,UAAW,QAAO;AAItB,SAFkB,KAAK,cAAc,oBAA0B,EACpC,aAAa,MAAM,IAC5B;;;;;;;CAQpB,iBAAyB;EACvB,MAAM,SAAS,KAAK,cAAc,mBAAyB;AAC3D,MAAI,CAAC,OAAQ;AAEb,OAAK,kBAAkB,IAAI,uBAAuB;AAChD,QAAK,uBAAuB;IAC5B;AACF,OAAK,gBAAgB,QAAQ,QAAQ;GACnC,YAAY;GACZ,WAAW;GACX,iBAAiB,CAAC,oBAAoB;GACvC,CAAC;;;;;;;CAQJ,iBAAyB;EACvB,MAAM,SAAS,KAAK,cAAc,mBAAyB;AAC3D,MAAI,CAAC,OAAQ;AAEb,OAAK,kBAAkB,IAAI,uBAAuB;AAChD,QAAK,cAAc,YAAY;IAC/B;AACF,OAAK,gBAAgB,QAAQ,QAAQ;GACnC,SAAS;GACT,eAAe;GACf,WAAW;GACZ,CAAC;;CAGJ,oBAAoB;AAClB,QAAM,qBAAqB;AAC3B,OAAK,gBAAgB;AACrB,OAAK,gBAAgB;;CAGvB,uBAAuB;AACrB,OAAK,iBAAiB,YAAY;AAClC,OAAK,iBAAiB,YAAY;AAClC,QAAM,wBAAwB;;CAGhC,SAAS;EACP,MAAM,EAAE,OAAO,MAAM,qBAAqB,wBAAwB;EAClE,MAAM,iBAAiB,KAAK,eACzB,MAAM,IAAI,CACV,OAAO,QAAQ,CACf,QAAQ,KAAK,UAAU;GAAE,GAAG;IAAM,OAAO;GAAM,GAAG,EAAE,CAAC;EACxD,MAAM,mBAAmB,SAAS;IAC/B,yBAA+B;IAC/B,yBAA+B,SAAS;GACzC,GAAG;GACJ,CAAC;EAEF,MAAM,YAAY,KAAK,mBAAmB;AAE1C,MAAI,oBACF,QAAO,IAAI;;kBAEC,KAAK,KAAK;mBACT,KAAK,MAAM;wCACU,KAAK,2BAA2B;0BAC9C,KAAK,aAAa;kBAC1B,QAAQ,gBAAgB,SAAS;uBAC5B,UAAU;;+BAEF,KAAK,oBAAoB;oCACpB,KAAK,yBAAyB;+BACnC,KAAK,kBAAkB;YAC1C,sBACE,IAAI,iEACJ,GAAG;;;MAIX,QAAO,IAAI;;uBAEM,UAAU;;kBAEf,iBAAiB;uBACZ,KAAK;kBACV,QAAQ,UAAU,SAAS;;mBAE1B,KAAK,sBAAsB;+BACf,KAAK,kBAAkB;YAC1C,sBACE,IAAI,iEACJ,GAAG;;;;CAMf,MAAM,QAAQ,mBAAmB;AAC/B,MAAI,kBAAkB,IAAI,OAAO;OAC3B,KAAK,MAAM;AAEb,SAAK,YAAY,KAAK,cAAe;IACrC,MAAM,mBAAmB,KAAK,cAC3B,KAAK,YAAgC,qBACvC;AACD,UAAO,KAAK,YAAgC,QAAQ;AACpD,QAAI,iBAGD,kBAAiC,OAAO;SACpC;KACL,MAAM,EAAE,eAAe,qBAAqB,KAAK,oBAAoB;AAErE,SAAI,cAGF,KAFa,eAAe,aAAa,OAAO,KAEnC,YAAY,iBAAiB,GACxC,kBAAiB,GAAG,OAAO;SAE3B,eAAc,OAAO;UAElB;MACL,MAAM,EAAE,UAAU,KAAK,cAAc;AAErC,aAAO,OAAO;;;cAIlB,KAAK,aACL,OAAQ,KAAK,UAA0B,UAAU,YACjD;AACC,SAAK,UAA0B,OAAO;AACvC,SAAK,YAAY;;;AAGrB,MACE,kBAAkB,IAAI,gBAAgB,IACtC,kBAAkB,IAAI,qBAAqB,IAC3C,kBAAkB,IAAI,sBAAsB,IAC5C,kBAAkB,IAAI,yBAAyB,EAC/C;AACA,SAAO,KAAK,YAAgC,QAAQ;AACpD,QAAK,uBAAuB;;;;;;;CAQhC,OAAiB,OAAO,KAAK,GAAG;AAC9B,SAAO,IAAI,SAAS,YAAY;AAC9B,cAAW,SAAS,GAAG;IACvB;;;;;CAMJ,WAAW,sBAAsB;AAC/B,SAAO;;;;;CAMT,WAAW,uBAAuB;AAChC,SAAO;;;;;CAMT,WAAW,oBAAoB;AAC7B,SAAO;;;;;;CAOT,WAAW,mBAAmB;AAC5B,SAAO;;;;;CAMT,WAAW,aAAa;AACtB,SAAO;;;gBAGOA;;;YAhbf,SAAS;CACR,MAAM;CACN,SAAS;CACT,WAAW;CACZ,CAAC,CAAA,EAAA,SAAA,WAAA,uBAAA,KAAA,EAAA;YAkBD,aAAa,QAAQ,CAAA,EAAA,SAAA,WAAA,gBAAA,KAAA,EAAA;YAarB,aAAa,mBAAmB,CAAA,EAAA,SAAA,WAAA,kBAAA,KAAA,EAAA;YAkBhC,aAAa,UAAU,CAAA,EAAA,SAAA,WAAA,sBAAA,KAAA,EAAA;YAkGvB,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,SAAA,WAAA,SAAA,KAAA,EAAA;YAM1C,SAAS,EAAE,WAAW,cAAc,CAAC,CAAA,EAAA,SAAA,WAAA,aAAA,KAAA,EAAA;YAMrC,SAAS,EAAE,WAAW,mBAAmB,CAAC,CAAA,EAAA,SAAA,WAAA,kBAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAc,CAAC,CAAA,EAAA,SAAA,WAAA,aAAA,KAAA,EAAA;YAMnE,SAAS;CACR,MAAM;CACN,SAAS;CACT,WAAW;CACZ,CAAC,CAAA,EAAA,SAAA,WAAA,uBAAA,KAAA,EAAA;YAMD,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,SAAA,WAAA,QAAA,KAAA,EAAA;YAM1C,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,SAAA,WAAA,QAAA,KAAA,EAAA;YAM3B,SAAS;CACR,MAAM;CACN,SAAS;CACT,WAAW;CACZ,CAAC,CAAA,EAAA,SAAA,WAAA,uBAAA,KAAA,EAAA;uBA9MHC,cAAc,YAAkB,CAAA,EAAA,SAAA;AAwbjC,IAAA,gBAAe"}