import type { OverlayOpenChangeDetail } from '../../core';
import type { PaddingSize, RoundedSize } from '../../types';
import '../../content/icon/icon';
type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
type DialogBackdrop = 'opaque' | 'blur' | 'transparent';
type DialogElevation = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
/** Dialog component properties */
export type OreDialogEvents = {
    'open-change': OverlayOpenChangeDetail;
};
export type OreDialogProps = {
    /** Backdrop style — 'blur' (default): dark overlay + blur; 'opaque': dark overlay only; 'transparent': no overlay */
    backdrop?: DialogBackdrop;
    /** Initial uncontrolled open state. Ignored when `open` is set. */
    'default-open'?: boolean;
    /** Show a close (×) button in the header */
    dismissible?: boolean;
    /** Panel shadow elevation — defaults to 'xl' */
    elevation?: DialogElevation;
    /**
     * CSS selector for the element inside the dialog that should receive focus when the dialog opens.
     * Defaults to the first focusable element (browser default).
     * @example 'input[name="email"]' | '#confirm-btn'
     */
    'initial-focus'?: string;
    /** Dialog title shown in the header (used as aria-label when no header slot) */
    label?: string;
    /** Controls the open state of the dialog */
    open?: boolean;
    /** Internal padding size */
    padding?: PaddingSize;
    /** When true, clicking the backdrop does not close the dialog */
    persistent?: boolean;
    /**
     * When true (default), the focus returns to the element that triggered the dialog after it closes.
     * Set to false if you want to manage focus manually.
     */
    'return-focus'?: boolean;
    /** Border radius */
    rounded?: RoundedSize | '';
    /** Dialog size */
    size?: DialogSize;
};
/**
 * A modal dialog that traps focus, blocks page interaction, and dismisses on
 * `Escape`. Built on the native `<dialog>` element for correct top-layer stacking
 * and browser-managed accessibility.
 *
 * @element ore-dialog
 *
 * @attr {boolean} open - Controlled open state
 * @attr {boolean} default-open - Initial uncontrolled open state
 * @attr {string} label - Dialog title (also used as aria-label)
 * @attr {string} size - Size: 'sm' | 'md' | 'lg' | 'xl' | 'full'
 * @attr {boolean} dismissible - Show a close (×) button in the header
 * @attr {boolean} persistent - Prevent backdrop-click from closing
 * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
 * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'
 * @attr {string} elevation - Panel shadow: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
 * @attr {string} padding - Padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'
 *
 * @fires open-change - Fired when the dialog state changes. detail: { open, reason }
 *
 * @slot - Dialog body content
 * @slot header - Custom header content (replaces the default title + close layout)
 * @slot footer - Action buttons or additional content at the bottom
 *
 * @cssprop --dialog-bg - Panel background color
 * @cssprop --dialog-border-color - Panel border color
 * @cssprop --dialog-radius - Panel border radius
 * @cssprop --dialog-shadow - Panel drop shadow
 * @cssprop --dialog-padding - Padding for header, body, and footer sections
 * @cssprop --dialog-gap - Gap between footer action buttons
 * @cssprop --dialog-backdrop - Backdrop overlay color
 * @cssprop --dialog-max-width - Maximum panel width (overridden by size prop)
 *
 * @part dialog - Dialog root container.
 * @part overlay - Overlay backdrop element.
 * @part panel - Panel container.
 * @part header - Header container.
 * @part title - Title text element.
 * @part close - Close action control.
 * @part body - Body content container.
 * @part footer - Footer container.
 * @example
 * ```html
 * <ore-dialog label="Confirm action" dismissible>
 *   <p>Are you sure you want to delete this item?</p>
 *   <div slot="footer">
 *     <ore-button variant="ghost" id="cancel">Cancel</ore-button>
 *     <ore-button color="error" id="confirm">Delete</ore-button>
 *   </div>
 * </ore-dialog>
 *
 * <script type="module">
 *   import '@vielzeug/refine/dialog';
 *   const dialog = document.querySelector('ore-dialog');
 *   document.querySelector('#open-btn').addEventListener('click', () => {
 *     dialog.setAttribute('open', '');
 *   });
 *   document.querySelector('#cancel').addEventListener('click', () => {
 *     dialog.removeAttribute('open');
 *   });
 * </script>
 * ```
 */
export declare const DIALOG_TAG: "ore-dialog";
export {};
//# sourceMappingURL=dialog.d.ts.map