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

package/es-custom/components/modal/modal-base.d.ts

@@ -0,0 +1,144 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement } from 'lit';
+import CDSModalFooter from './modal-footer';
+import '../inline-loading';
+declare const CDSModalBase_base: {
+    new (...args: any[]): {
+        _handles: Set<import("../../globals/internal/handle").default>;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+    };
+    _hostListeners: {
+        [listenerName: string]: {
+            [type: string]: {
+                options?: boolean | AddEventListenerOptions;
+            };
+        };
+    };
+} & typeof LitElement;
+/**
+ * Base class for Modal and Dialog components.
+ */
+export declare class CDSModalBase extends CDSModalBase_base {
+    /**
+     * The element that had focus before this modal gets open.
+     */
+    protected _launcher: Element | null;
+    /**
+     * The inline loading element that renders when `loading-status` is not `inactive`
+     */
+    protected _loadingEl: HTMLElement | null;
+    /**
+     * Loading statuses that are not `inactive`
+     */
+    protected WORKING_LOADING_STATUSES: string[];
+    /**
+     * Specify the loading status
+     */
+    loadingStatus: 'inactive' | 'active' | 'finished' | 'error';
+    /**
+     * Specify the description for the loading text
+     */
+    loadingDescription: string;
+    /**
+     * Provide a delay for the setTimeout for success
+     */
+    loadingSuccessDelay: number;
+    /**
+     * Specify the description for the loading icon
+     */
+    loadingIconDescription: string;
+    /**
+     * `true` if the modal should be open.
+     */
+    open: boolean;
+    /**
+     * Specify whether the Modal is displaying an alert, error or warning.
+     * Should go hand in hand with the danger prop.
+     */
+    alert: boolean;
+    /**
+     * Prevent closing on click outside of modal
+     */
+    preventCloseOnClickOutside: boolean;
+    /**
+     * Prevent the modal from closing after clicking the close button
+     */
+    preventClose: boolean;
+    /**
+     * Handles `slotchange` event.
+     */
+    protected _handleSlotChange(): void;
+    /**
+     * Handles `click` event on the modal container.
+     *
+     * @param event The event.
+     */
+    protected _handleClickContainer(event: MouseEvent): void;
+    /**
+     * Handles user-initiated close request of this modal.
+     *
+     * @param triggeredBy The element that triggered this close request.
+     */
+    protected _handleUserInitiatedClose(triggeredBy: EventTarget | null): void;
+    /**
+     * Get focusable elements.
+     *
+     * Querying all tabbable items.
+     *
+     * @returns {{first: HTMLElement, last: HTMLElement, all: HTMLElement[]}} Returns an object with various elements.
+     */
+    protected getFocusable(): {
+        first: HTMLElement | undefined;
+        last: HTMLElement | undefined;
+        all: HTMLElement[];
+    };
+    protected _getFooterElements(): {
+        footer: Element | null;
+        primaryButton: HTMLElement | null;
+        secondaryButtons: HTMLElement[];
+    };
+    protected _initializeLoadingEl(footer: CDSModalFooter): HTMLElement | null;
+    protected _updateLoadingElement(): void;
+    /**
+     * @param ms The number of milliseconds.
+     * @returns A promise that is resolves after the given milliseconds.
+     */
+    protected static _delay(ms?: number): Promise<unknown>;
+    /**
+     * A selector selecting buttons that should close this modal.
+     */
+    static get selectorCloseButton(): string;
+    /**
+     * A selector selecting tabbable nodes.
+     */
+    static get selectorTabbable(): string;
+    /**
+     * A selector selecting the nodes that should be focused when modal gets open.
+     */
+    static get selectorPrimaryFocus(): string;
+    /**
+     * A selector selecting the modal body component
+     */
+    static get selectorModalBody(): string;
+    /**
+     * The name of the custom event fired before this modal is being closed upon a user gesture.
+     * Cancellation of this event stops the user-initiated action of closing this modal.
+     */
+    static get eventBeforeClose(): string;
+    /**
+     * The name of the custom event fired after this modal is closed upon a user gesture.
+     */
+    static get eventClose(): string;
+    /**
+     * The name of the custom event fired when this modal reaches a `finished` loading state
+     */
+    static get eventOnLoadingSuccess(): string;
+}
+export default CDSModalBase;
+//# sourceMappingURL=modal-base.d.ts.map

package/es-custom/components/modal/modal-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-base.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal-base.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,cAAc,MAAM,gBAAgB,CAAC;AAC5C,OAAO,mBAAmB,CAAC;;;;;;;;;;uBAiBtB,CAAA;;;;;AAfL;;GAEG;AACH,qBAAa,YAAa,SAAQ,iBAA6B;IAC7D;;OAEG;IACH,SAAS,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,CAAQ;IAE3C;;OAEG;IACH,SAAS,CAAC,UAAU,EAAE,WAAW,GAAG,IAAI,CAAQ;IAEhD;;OAEG;IACH,SAAS,CAAC,wBAAwB,WAAmC;IAErE;;OAEG;IAEH,aAAa,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAc;IAEzE;;OAEG;IAEH,kBAAkB,SAAM;IAExB;;OAEG;IAEH,mBAAmB,SAAQ;IAE3B;;OAEG;IAEH,sBAAsB,SAAa;IAEnC;;OAEG;IAEH,IAAI,UAAS;IAEb;;;OAGG;IAEH,KAAK,UAAS;IAEd;;OAEG;IAEH,0BAA0B,UAAS;IAEnC;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IACH,SAAS,CAAC,iBAAiB;IAQ3B;;;;OAIG;IACH,SAAS,CAAC,qBAAqB,CAAC,KAAK,EAAE,UAAU;IAUjD;;;;OAIG;IACH,SAAS,CAAC,yBAAyB,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;IA6BnE;;;;;;OAMG;IACH,SAAS,CAAC,YAAY,IAAI;QACxB,KAAK,EAAE,WAAW,GAAG,SAAS,CAAC;QAC/B,IAAI,EAAE,WAAW,GAAG,SAAS,CAAC;QAC9B,GAAG,EAAE,WAAW,EAAE,CAAC;KACpB;IAqBD,SAAS,CAAC,kBAAkB;;;;;IAsB5B,SAAS,CAAC,oBAAoB,CAAC,MAAM,EAAE,cAAc;IAiBrD,SAAS,CAAC,qBAAqB;IAmD/B;;;OAGG;IACH,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,SAAI;IAM9B;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED;;OAEG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;OAEG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;;OAGG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED;;OAEG;IACH,MAAM,KAAK,qBAAqB,WAE/B;CACF;AAED,eAAe,YAAY,CAAC"}

package/es-custom/components/modal/modal-base.js

@@ -0,0 +1,229 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { selectorTabbable } from "../../globals/settings.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import HostListenerMixin from "../../globals/mixins/host-listener.js";
+import "../inline-loading/index.js";
+import { LitElement } from "lit";
+import { property } from "lit/decorators.js";
+//#region src/components/modal/modal-base.ts
+/**
+* Copyright IBM Corp. 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+* Base class for Modal and Dialog components.
+*/
+var CDSModalBase = class extends HostListenerMixin(LitElement) {
+	constructor(..._args) {
+		super(..._args);
+		this._launcher = null;
+		this._loadingEl = null;
+		this.WORKING_LOADING_STATUSES = [
+			"active",
+			"finished",
+			"error"
+		];
+		this.loadingStatus = "inactive";
+		this.loadingDescription = "";
+		this.loadingSuccessDelay = 1500;
+		this.loadingIconDescription = "Loading";
+		this.open = false;
+		this.alert = false;
+		this.preventCloseOnClickOutside = false;
+		this.preventClose = false;
+	}
+	/**
+	* Handles `slotchange` event.
+	*/
+	_handleSlotChange() {
+		if (this.querySelector(`cds-custom-modal-footer`)) this.setAttribute("has-footer", "");
+		else this.removeAttribute("has-footer");
+	}
+	/**
+	* Handles `click` event on the modal container.
+	*
+	* @param event The event.
+	*/
+	_handleClickContainer(event) {
+		const { selectorCloseButton } = this.constructor;
+		if (event.target.matches?.(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));
+			}
+		}
+	}
+	/**
+	* 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
+		};
+	}
+	_getFooterElements() {
+		return {
+			footer: this.querySelector(`cds-custom-modal-footer`),
+			primaryButton: this.querySelector(`cds-custom-modal-footer-button[kind="primary"]`) || this.querySelector(`cds-custom-modal-footer-button[kind="danger"]`) || null,
+			secondaryButtons: Array.from(this.querySelectorAll(`cds-custom-modal-footer-button[kind="secondary"]`))
+		};
+	}
+	_initializeLoadingEl(footer) {
+		if (!footer) return null;
+		if (!this._loadingEl && this.WORKING_LOADING_STATUSES.includes(this.loadingStatus)) {
+			const el = document.createElement(`cds-custom-inline-loading`);
+			el.setAttribute("controlled", "");
+			el.setAttribute("aria-live", "off");
+			footer.appendChild(el);
+			this._loadingEl = el;
+		}
+		return this._loadingEl;
+	}
+	_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"));
+		}
+	}
+	/**
+	* @param ms The number of milliseconds.
+	* @returns A promise that is resolves after the given milliseconds.
+	*/
+	static _delay(ms = 0) {
+		return new Promise((resolve) => {
+			setTimeout(resolve, ms);
+		});
+	}
+	/**
+	* A selector selecting buttons that should close this modal.
+	*/
+	static get selectorCloseButton() {
+		return `[data-modal-close],cds-custom-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() {
+		return `[data-modal-primary-focus],cds-custom-modal-footer cds-custom-button[kind="primary"]`;
+	}
+	/**
+	* A selector selecting the modal body component
+	*/
+	static get selectorModalBody() {
+		return `cds-custom-modal-body`;
+	}
+	/**
+	* The name of the custom event fired before this modal is being closed upon a user gesture.
+	* Cancellation of this event stops the user-initiated action of closing this modal.
+	*/
+	static get eventBeforeClose() {
+		return `cds-custom-modal-beingclosed`;
+	}
+	/**
+	* The name of the custom event fired after this modal is closed upon a user gesture.
+	*/
+	static get eventClose() {
+		return `cds-custom-modal-closed`;
+	}
+	/**
+	* The name of the custom event fired when this modal reaches a `finished` loading state
+	*/
+	static get eventOnLoadingSuccess() {
+		return `cds-custom-modal-on-loadingsuccess`;
+	}
+};
+__decorate([property({
+	reflect: true,
+	attribute: "loading-status"
+})], CDSModalBase.prototype, "loadingStatus", void 0);
+__decorate([property({
+	type: String,
+	attribute: "loading-description"
+})], CDSModalBase.prototype, "loadingDescription", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "loading-success-delay"
+})], CDSModalBase.prototype, "loadingSuccessDelay", void 0);
+__decorate([property({
+	type: String,
+	attribute: "loading-icon-description"
+})], CDSModalBase.prototype, "loadingIconDescription", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSModalBase.prototype, "open", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSModalBase.prototype, "alert", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "prevent-close-on-click-outside"
+})], CDSModalBase.prototype, "preventCloseOnClickOutside", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "prevent-close"
+})], CDSModalBase.prototype, "preventClose", void 0);
+//#endregion
+export { CDSModalBase, CDSModalBase as default };
+
+//# sourceMappingURL=modal-base.js.map

package/es-custom/components/modal/modal-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-base.js","names":[],"sources":["../../../src/components/modal/modal-base.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 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 { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { selectorTabbable } from '../../globals/settings';\nimport CDSModalFooter from './modal-footer';\nimport '../inline-loading';\n\n/**\n * Base class for Modal and Dialog components.\n */\nexport class CDSModalBase 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  protected _loadingEl: HTMLElement | null = null;\n\n  /**\n   * Loading statuses that are not `inactive`\n   */\n  protected WORKING_LOADING_STATUSES = ['active', 'finished', 'error'];\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   * `true` if the modal should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\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   * Prevent closing on click outside of modal\n   */\n  @property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })\n  preventCloseOnClickOutside = 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  /**\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   * Handles `click` event on the modal container.\n   *\n   * @param event The event.\n   */\n  protected _handleClickContainer(event: MouseEvent) {\n    const { selectorCloseButton } = this.constructor as typeof CDSModalBase;\n    if (\n      (event.target as Element).matches?.(selectorCloseButton) &&\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 CDSModalBase).eventBeforeClose,\n            init\n          )\n        )\n      ) {\n        this.open = false;\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSModalBase).eventClose,\n            init\n          )\n        );\n      }\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  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  // Initializes the inline-loading element\n  protected _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  // Updates the inline loading element in the modal footer\n  protected _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 CDSModalBase).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  /**\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\nexport default CDSModalBase;\n"],"mappings":"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"}

package/es-custom/components/modal/modal.d.ts

@@ -4,24 +4,10 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { LitElement } from 'lit';
 import { MODAL_SIZE } from './defs';
-import '../inline-loading';
+import CDSModalBase from './modal-base';
+import '../dialog/dialog';
 export { MODAL_SIZE };
-declare const CDSModal_base: {
-    new (...args: any[]): {
-        _handles: Set<import("../../globals/internal/handle").default>;
-        connectedCallback(): void;
-        disconnectedCallback(): void;
-    };
-    _hostListeners: {
-        [listenerName: string]: {
-            [type: string]: {
-                options?: boolean | AddEventListenerOptions;
-            };
-        };
-    };
-} & typeof LitElement;
 /**
  * Modal.
  *
@@ -32,15 +18,11 @@ declare const CDSModal_base: {
  *   Cancellation of this event stops the user-initiated action of closing this modal.
  * @fires cds-custom-modal-closed - The custom event fired after this modal is closed upon a user gesture.
  */
-declare class CDSModal extends CDSModal_base {
+declare class CDSModal extends CDSModalBase {
     /**
-     * The element that had focus before this modal gets open.
+     * Enable the use of native dialog element instead of div with role="dialog"
      */
-    protected _launcher: Element | null;
-    /**
-     * The inline loading element that renders when `loading-status` is not `inactive`
-     */
-    private _loadingEl;
+    enableDialogElement: boolean;
     /**
      * MutationObserver that observes the modal-footer
      */
@@ -49,16 +31,13 @@ declare class CDSModal extends CDSModal_base {
      * MutationObserver that observes the modal-header
      */
     private _headerObserver?;
-    /**
-     * Loading statuses that are not `inactive`
-     */
-    private WORKING_LOADING_STATUSES;
     /**
      * Handles `click` event on this element.
      *
      * @param event The event.
      */
     protected _handleClick: (event: MouseEvent) => void;
+    protected _handleKeydown: ({ key, target }: KeyboardEvent) => void;
     /**
      * Handle the keydown event.
      * Trap the focus inside the side-panel by tracking keydown.key == `Tab`
@@ -66,35 +45,21 @@ declare class CDSModal extends CDSModal_base {
      * @param {KeyboardEvent} event The keyboard event object.
      */
     protected _handleHostKeydown: (event: KeyboardEvent) => void;
-    protected _handleKeydown: ({ key, target }: KeyboardEvent) => void;
     /**
-     * Get focusable elements.
+     * `enable-dialog-element`
      *
-     * Querying all tabbable items.
-     *
-     * @returns {{first: HTMLElement, last: HTMLElement, all: HTMLElement[]}} Returns an object with various elements.
+     * Handles `cds-custom-dialog-closed` event from the nested dialog element.
+     * Syncs the open state when the dialog closes, and stops the propagation of the
+     * event in favour of `cds-custom-modal-closed`
      */
-    protected getFocusable(): {
-        first: HTMLElement | undefined;
-        last: HTMLElement | undefined;
-        all: HTMLElement[];
-    };
+    protected _handleDialogClosed: (event: CustomEvent) => void;
     /**
-     * Handles `click` event on the modal container.
+     * `enable-dialog-element`
      *
-     * @param event The event.
+     * Handles `cds-custom-dialog-beingclosed` event from the nested dialog element.
+     * Stops the propagation of the event in favour of `cds-custom-modal-beingclosed`
      */
-    protected _handleClickContainer(event: MouseEvent): void;
-    /**
-     * Handles user-initiated close request of this modal.
-     *
-     * @param triggeredBy The element that triggered this close request.
-     */
-    protected _handleUserInitiatedClose(triggeredBy: EventTarget | null): void;
-    /**
-     * Handles `slotchange` event.
-     */
-    protected _handleSlotChange(): void;
+    protected _handleDialogBeingClosed: (event: CustomEvent) => void;
     /**
      * Specify whether the Modal is displaying an alert, error or warning.
      * Should go hand in hand with the danger prop.
@@ -124,41 +89,10 @@ declare class CDSModal extends CDSModal_base {
      * Modal size.
      */
     size: MODAL_SIZE;
-    /**
-     * Prevent closing on click outside of modal
-     */
-    preventCloseOnClickOutside: boolean;
-    /**
-     * Specify the loading status
-     */
-    loadingStatus: 'inactive' | 'active' | 'finished' | 'error';
-    /**
-     * Specify the description for the loading text
-     */
-    loadingDescription: string;
-    /**
-     * Provide a delay for the setTimeout for success
-     */
-    loadingSuccessDelay: number;
-    /**
-     * Specify the description for the loading icon
-     */
-    loadingIconDescription: string;
     /**
      * Specify if Enter key should be used as "submit" action that clicks the primary footer button
      */
     shouldSubmitOnEnter: boolean;
-    /**
-     * Prevent the modal from closing after clicking the close button
-     */
-    preventClose: boolean;
-    private _initializeLoadingEl;
-    protected _getFooterElements(): {
-        footer: Element | null;
-        primaryButton: HTMLElement | null;
-        secondaryButtons: HTMLElement[];
-    };
-    private _updateLoadingElement;
     firstUpdated(): Promise<void>;
     /**
      * Computes the aria-label of the modal based on (in order of highest to lowest precedence):
@@ -192,10 +126,6 @@ declare class CDSModal extends CDSModal_base {
      * A selector selecting buttons that should close this modal.
      */
     static get selectorCloseButton(): string;
-    /**
-     * A selector selecting tabbable nodes.
-     */
-    static get selectorTabbable(): string;
     /**
      * A selector selecting the nodes that should be focused when modal gets open.
      */
@@ -213,10 +143,6 @@ declare class CDSModal extends CDSModal_base {
      * The name of the custom event fired after this modal is closed upon a user gesture.
      */
     static get eventClose(): string;
-    /**
-     * The name of the custom event fired when this modal reaches a `finished` loading state
-     */
-    static get eventOnLoadingSuccess(): string;
     static styles: any;
 }
 export default CDSModal;

package/es-custom/components/modal/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAIpC,OAAO,mBAAmB,CAAC;AAG3B,OAAO,EAAE,UAAU,EAAE,CAAC;;;;;;;;;;uBAOjB,CAAC;;;;;AALN;;;;;;;;;GASG;AACH,cACM,QAAS,SAAQ,aAA6B;IAClD;;OAEG;IACH,SAAS,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,CAAQ;IAE3C;;OAEG;IACH,OAAO,CAAC,UAAU,CAA4B;IAE9C;;OAEG;IACH,OAAO,CAAC,eAAe,CAAC,CAAmB;IAE3C;;OAEG;IACH,OAAO,CAAC,eAAe,CAAC,CAAmB;IAE3C;;OAEG;IACH,OAAO,CAAC,wBAAwB,CAAmC;IAEnE;;;;OAIG;IAIH,SAAS,CAAC,YAAY,GAAI,OAAO,UAAU,UAQzC;IAEF;;;;;OAKG;IAEH,SAAS,CAAC,kBAAkB,GAAI,OAAO,aAAa,UAwClD;IAKF,SAAS,CAAC,cAAc,GAAI,iBAAiB,aAAa,UAMxD;IAEF;;;;;;OAMG;IACH,SAAS,CAAC,YAAY,IAAI;QACxB,KAAK,EAAE,WAAW,GAAG,SAAS,CAAC;QAC/B,IAAI,EAAE,WAAW,GAAG,SAAS,CAAC;QAC9B,GAAG,EAAE,WAAW,EAAE,CAAC;KACpB;IAqBD;;;;OAIG;IACH,SAAS,CAAC,qBAAqB,CAAC,KAAK,EAAE,UAAU;IAWjD;;;;OAIG;IACH,SAAS,CAAC,yBAAyB,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;IA6BnE;;OAEG;IACH,SAAS,CAAC,iBAAiB;IAQ3B;;;OAGG;IAEH,KAAK,UAAS;IAEd;;OAEG;IAEH,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAMH,mBAAmB,UAAS;IAE5B;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,IAAI,aAAqB;IAEzB;;OAEG;IAEH,0BAA0B,UAAS;IAEnC;;OAEG;IAEH,aAAa,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAc;IAEzE;;OAEG;IAEH,kBAAkB,SAAM;IAExB;;OAEG;IAEH,mBAAmB,SAAQ;IAE3B;;OAEG;IAEH,sBAAsB,SAAa;IAEnC;;OAEG;IAMH,mBAAmB,UAAS;IAE5B;;OAEG;IAEH,YAAY,UAAS;IAGrB,OAAO,CAAC,oBAAoB;IAgB5B,SAAS,CAAC,kBAAkB;;;;;IAsB5B,OAAO,CAAC,qBAAqB;IAmDvB,YAAY;IAalB;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAazB;;;;OAIG;IACH,OAAO,CAAC,cAAc;IActB;;;;OAIG;IACH,OAAO,CAAC,cAAc;IActB,iBAAiB;IAMjB,oBAAoB;IAMpB,MAAM;IA4BA,OAAO,CAAC,iBAAiB,KAAA;IAiD/B;;;OAGG;IACH,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,SAAI;IAM9B;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED;;OAEG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;OAEG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;;OAGG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED;;OAEG;IACH,MAAM,KAAK,qBAAqB,WAE/B;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAGpC,OAAO,YAAY,MAAM,cAAc,CAAC;AACxC,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB;;;;;;;;;GASG;AACH,cACM,QAAS,SAAQ,YAAY;IACjC;;OAEG;IAMH,mBAAmB,UAAS;IAE5B;;OAEG;IACH,OAAO,CAAC,eAAe,CAAC,CAAmB;IAE3C;;OAEG;IACH,OAAO,CAAC,eAAe,CAAC,CAAmB;IAE3C;;;;OAIG;IAIH,SAAS,CAAC,YAAY,GAAI,OAAO,UAAU,UAQzC;IAKF,SAAS,CAAC,cAAc,GAAI,iBAAiB,aAAa,UAOxD;IAEF;;;;;OAKG;IAEH,SAAS,CAAC,kBAAkB,GAAI,OAAO,aAAa,UA2ClD;IAEF;;;;;;OAMG;IACH,SAAS,CAAC,mBAAmB,GAAI,OAAO,WAAW,UAcjD;IAEF;;;;;OAKG;IACH,SAAS,CAAC,wBAAwB,GAAI,OAAO,WAAW,UAiBtD;IAEF;;;OAGG;IAEH,KAAK,UAAS;IAEd;;OAEG;IAEH,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAMH,mBAAmB,UAAS;IAE5B;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,IAAI,aAAqB;IAEzB;;OAEG;IAMH,mBAAmB,UAAS;IAEtB,YAAY;IAalB;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAazB;;;;OAIG;IACH,OAAO,CAAC,cAAc;IActB;;;;OAIG;IACH,OAAO,CAAC,cAAc;IActB,iBAAiB;IAMjB,oBAAoB;IAMpB,MAAM;IAmDA,OAAO,CAAC,iBAAiB,KAAA;IAiD/B;;;OAGG;IACH,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,SAAI;IAM9B;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;OAEG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;;OAGG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,QAAQ,CAAC"}