import { DDSElement } from "../../base/index.js"; /** * `daikin-modal` is an interactive overlay that appears on top of the main content to prompt user input or display important information, temporarily blocking interaction with the rest of the page. It's crucial for capturing user attention and guiding specific actions. * * Hierarchy: * - `daikin-modal` > `daikin-modal-header` * - `daikin-modal` > `daikin-modal-footer` * * @slot - A slot for modal header, body, modal footer. Place `daikin-modal-header`, custom body content, `daikin-modal-footer` here in order. * * @fires close - A custom event emitted when a user clicks the close button in the header. * * @csspart modal - CSS styles applied to the modal panel container. By default, the panel uses content-based sizing (`size-fit`) and is clamped by responsive min/max width and height constraints so it does not touch the viewport edges. Use `::part(modal)` to customize its width, height, or padding; the built-in min/max constraints remain in effect unless you override them with more specific rules. * * @example * * ```js * import "@daikin-oss/design-system-web-components/components/modal/index.js"; * import "@daikin-oss/design-system-web-components/components/modal-footer/index.js"; * import "@daikin-oss/design-system-web-components/components/modal-header/index.js"; * ``` * * ```html * * * Description * Modal Title * *

Modal body.

* * Button * *
* ``` */ export declare class DaikinModal extends DDSElement { static styles: import('lit').CSSResult; /** * Whether the modal is open. */ open: boolean; /** * ARIA role of the modal. Choose the appropriate role for your modal based on its usage scenario. * * @default "dialog" */ modalRole: "dialog" | "alertdialog"; /** * The aria-label of the modal. */ modalAriaLabel: string | null; /** * If this property set by `true`, you can't close modal by clicking outside of modal or Escape key. * In this case, please ensure you provide users with a method to close the modal, such as a close button in the header or a close button in the footer. */ persistent: boolean; private readonly _handleClose; private readonly _focusTrapController; render(): import('lit-html').TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "daikin-modal": DaikinModal; } }