import { LitElement } from "lit";
export type SkyDialogPadding = "none" | "xs" | "sm" | "md" | "lg" | "xl";
export type SkyDialogRequestCloseDetail = {
    reason: "backdrop" | "escape" | "close-button";
};
/**
 * @element sky-dialog
 *
 * @summary Accessible modal dialog built on native `<dialog>` with controlled open state, slots, and keyboard/backdrop handling.
 *
 * @status stable
 * @since 1.0.0
 *
 * @documentation https://sky-ui.com/components/dialog
 * @dependency sky-icon
 *
 * @uiVModel open request-close sync=constant:false
 *
 * @slot header - Header content area at the top of the dialog.
 * @slot body - Main content area of the dialog.
 * @slot footer - Footer actions area at the bottom of the dialog.
 *
 * @csspart dialog - The dialog surface wrapper element.
 * @csspart close-button - The top-right close button.
 * @csspart message - Optional message text shown above the body.
 * @csspart header - Container for the header slot.
 * @csspart content - Container for the body slot.
 * @csspart actions - Container for the footer slot.
 * @csspart footer - Alias part on the footer container.
 *
 * @fires {CustomEvent<SkyDialogRequestCloseDetail>} request-close - Fired when close intent is detected and parent should update `open`.
 * @fires {CustomEvent<void>} dialog-opened - Fired after open animation completes.
 * @fires {CustomEvent<void>} dialog-closed - Fired after close animation completes.
 *
 * @property {boolean} open - Whether the dialog is visible.
 * @property {boolean} closable - Shows a top-right close button.
 * @property {string} message - Optional message displayed above body content.
 * @property {boolean} overlay - Applies dim/blur backdrop effect.
 * @property {string} width - Max width of the dialog surface.
 * @property {boolean} separator - Shows separators around header/footer regions.
 * @property {boolean} persistent - Prevents outside/Escape close and highlights surface instead.
 * @property {boolean} closeOnEsc - Enables close intent on Escape key.
 * @property {SkyDialogPadding} headerPadding - Header padding token.
 * @property {SkyDialogPadding} bodyPadding - Body padding token.
 * @property {SkyDialogPadding} footerPadding - Footer padding token.
 * @property {boolean} highlightOnOutsideClick - Enables highlight animation on rejected outside click.
 * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
 * @method show Opens the dialog by setting `open` to true.
 * @method hide Closes the dialog by setting `open` to false.
 * @method focusDialog Focuses the native dialog surface.
 * @method getDialogElement Returns the native dialog element reference.
 *
 * @Behavior
 * - Uses native `<dialog>` element with enhanced functionality
 * - Controlled exclusively by the `open` attribute/property
 * - Uses native dialog focus behavior
 * - Supports smooth animations with configurable timing
 * - Uses the floating modal surface (frosted tertiary glass)
 * - **Standard**: Click outside closes dialog
 * - **Persistent**: Click outside highlights dialog instead of closing
 * - **Closable**: Shows close button in top-right corner
 * - **Escape handling**: Configurable Escape key behavior
 * - Uses `aria-modal="true"` for screen reader isolation
 * - Native dialog focus behavior
 * - Escape key handling with user preferences
 * - Close button with appropriate ARIA label
 * - Respects reduced motion preferences
 * - Smooth open/close animations with scale effects
 * - Highlight animation for persistent dialogs
 * - Configurable animation durations
 * - Uses Web Animations API for performance
 * - Works with any content in header/body/footer slots
 * - Compatible with form controls and interactive content
 * - Can be nested or stacked
 * - Responsive width and padding
 *
 * @example
 * ```html
 * <sky-dialog open closable width="420px" separator>
 *   <h3 slot="header">Confirm Action</h3>
 *   <p slot="body">Are you sure you want to proceed?</p>
 *   <div slot="footer">
 *     <button>Cancel</button>
 *     <button>Confirm</button>
 *   </div>
 * </sky-dialog>
 * ```
 * ```vue
 * <template>
 *   <sky-dialog open closable width="420px" separator>
 *     <h3 slot="header">Confirm Action</h3>
 *     <p slot="body">Are you sure you want to proceed?</p>
 *     <div slot="footer">
 *       <button>Cancel</button>
 *       <button>Confirm</button>
 *     </div>
 *   </sky-dialog>
 * </template>
 * ```
 * ```jsx
 * export default function Demo() {
 *   return (
 *     <sky-dialog open closable width="420px" separator>
 *       <h3 slot="header">Confirm Action</h3>
 *       <p slot="body">Are you sure you want to proceed?</p>
 *       <div slot="footer">
 *         <button>Cancel</button>
 *         <button>Confirm</button>
 *       </div>
 *     </sky-dialog>
 *   );
 * }
 * ```
 */
export declare class SkyDialog extends LitElement {
    static dependencies: Record<string, CustomElementConstructor>;
    /** @public Whether the dialog is visible. */
    open: boolean;
    /** @public Shows a top-right close button. */
    closable: boolean;
    /** @public Optional message displayed above the body. */
    message: string;
    /** @public Applies dim/blur overlay on host. */
    overlay: boolean;
    /** @public Max width of the dialog surface (e.g., "480px" or "auto"). */
    width: string;
    /** @public Shows header/footer separators. */
    separator: boolean;
    /** @public Prevents close on outside click, highlights instead. */
    persistent: boolean;
    /** @public Enables closing on Escape key. */
    closeOnEsc: boolean;
    /** @public Padding token for header container. */
    headerPadding: SkyDialogPadding;
    /** @public Padding token for body container. */
    bodyPadding: SkyDialogPadding;
    /** @public Padding token for footer container. */
    footerPadding: SkyDialogPadding;
    /** @public Highlights dialog on outside click instead of closing. */
    highlightOnOutsideClick: boolean;
    /** @private Whether header slot has content. */
    private _hasHeader;
    /** @private Whether body slot has content. */
    private _hasBody;
    /** @private Whether footer slot has content. */
    private _hasFooter;
    /** @private Whether dialog is in closing animation. */
    private _isClosing;
    /** @private Open animation instance. */
    private _openAnimation;
    /** @private Close animation instance. */
    private _closeAnimation;
    /** @private Highlight animation instance. */
    private _highlightAnimation;
    /** @private Reference to the native dialog element. */
    private dialogElement?;
    /** @public Ref for the dialog element (e.g. for focus trap or positioning). */
    dialogRef: import("lit-html/directives/ref.js").Ref<HTMLDialogElement>;
    /** @private Handle clicks on the dialog backdrop (outside surface). */
    private _onBackdropPointerDown;
    /** Named prop preset from nearest `sky-config-provider`. */
    preset: string;
    private _presets;
    static styles: import("lit").CSSResult;
    constructor();
    /** @protected */
    firstUpdated(): void;
    /** @protected */
    disconnectedCallback(): void;
    /**
     * Opens the dialog programmatically.
     * @public
     */
    show(): void;
    /**
     * Closes the dialog programmatically.
     * @public
     */
    hide(): void;
    /**
     * Manually focuses the dialog element.
     * @public
     */
    focusDialog(): void;
    /**
     * Gets the native dialog element.
     * @returns The native HTMLDialogElement or undefined
     * @public
     */
    getDialogElement(): HTMLDialogElement | undefined;
    /** @private */
    private _onNativeClose;
    /** @protected */
    updated(changedProps: Map<string, any>): void;
    /**
     * Handles open state changes.
     * @param previousOpen - Previous open state
     * @private
     */
    private _handleOpenChange;
    /** @private */
    private _lockScroll;
    /** @private */
    private _unlockScroll;
    /** @private */
    private _prefersReducedMotion;
    /** @private */
    private _animateOpen;
    /** @private */
    private _animateClose;
    /** @private */
    private _handleCancel;
    /** @private */
    private _highlightDialog;
    /** @private */
    private _requestClose;
    /**
     * Checks if a slot has content.
     * @param slot - Slot element to check
     * @returns True if slot has content
     * @private
     */
    private _slotHasContent;
    /** @private */
    private _onHeaderSlotChange;
    /** @private */
    private _onBodySlotChange;
    /** @private */
    private _onFooterSlotChange;
    /** @private */
    private _onKeyDown;
    /** @protected */
    render(): import("lit-html").TemplateResult<1>;
}