import type { OverlayOpenChangeDetail } from '../../core';
import '../../content/icon/icon';
type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
type DrawerSize = 'sm' | 'lg' | 'full';
type DrawerBackdrop = 'opaque' | 'blur' | 'transparent';
type DrawerDragHandlePlacement = 'outside' | 'inset';
/** Element interface exposing the imperative API for `ore-drawer`. */
export interface DrawerElement extends HTMLElement, Omit<OreDrawerProps, 'title'> {
    /** Programmatically close the drawer with the exit animation. */
    hide(): void;
    /** Programmatically open the drawer. Equivalent to setting `open`. */
    show(): void;
}
/** Drawer component properties */
export type OreDrawerEvents = {
    'open-change': OverlayOpenChangeDetail;
};
export type OreDrawerProps = {
    /** Backdrop style — 'opaque' (default), 'blur', or 'transparent' */
    backdrop?: DrawerBackdrop;
    /** Initial uncontrolled open state. Ignored when `open` is set. */
    'default-open'?: boolean;
    /** Show the close (×) button in the header (default: true) */
    dismissible?: boolean;
    /** Drag handle position used for swipe-to-close gestures */
    'drag-handle-placement'?: DrawerDragHandlePlacement;
    /**
     * CSS selector for the element inside the drawer that should receive focus on open.
     * Defaults to native dialog focus management (first focusable element).
     * @example '#submit-btn' | 'input[name="email"]'
     */
    'initial-focus'?: string;
    /**
     * Invisible accessible label for the dialog (`aria-label`).
     * Use when the drawer has no visible title (e.g. image-only content).
     * When omitted, `aria-labelledby` points to the visible header title instead.
     */
    label?: string;
    /** Controlled open state */
    open?: boolean;
    /** When true, backdrop clicks do not close the drawer (default: false) */
    persistent?: boolean;
    /** Side from which the drawer slides in */
    placement?: DrawerPlacement;
    /**
     * When true (default), focus returns to the triggering element after the drawer closes.
     * Set to false to manage focus manually.
     */
    'return-focus'?: boolean;
    /** Drawer width/height preset */
    size?: DrawerSize;
    /**
     * Visible title text rendered inside the header.
     * Used as the dialog's accessible label via `aria-labelledby` when `label` is not set.
     */
    title?: string;
};
/**
 * A panel that slides in from any edge of the screen, built on the native `<dialog>` element.
 *
 * @element ore-drawer
 *
 * @attr {boolean} open - Controlled open state
 * @attr {boolean} default-open - Initial uncontrolled open state
 * @attr {string} placement - 'left' | 'right' (default) | 'top' | 'bottom'
 * @attr {string} size - 'sm' | 'lg' | 'full'
 * @attr {string} title - Visible header title text
 * @attr {string} label - Invisible aria-label (for drawers without a visible title)
 * @attr {boolean} dismissible - Show the close (×) button (default: true)
 * @attr {string} drag-handle-placement - 'outside' (default) | 'inset'
 * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'
 * @attr {boolean} persistent - Prevent backdrop-click from closing (default: false)
 *
 * @fires open-change - When the drawer state changes. detail: { open, reason }
 *
 * @slot header - Drawer header content
 * @slot - Main body content
 * @slot footer - Drawer footer content
 *
 * @cssprop --drawer-backdrop-bg - Backdrop background color
 * @cssprop --drawer-bg - Panel background color
 * @cssprop --drawer-size - Panel width (horizontal) or height (vertical)
 * @cssprop --drawer-shadow - Panel box-shadow
 * @cssprop --drawer-panel-blur - Panel backdrop blur amount
 *
 * @part drag-handle - Drawer drag handle.
 * @part panel - Panel container.
 * @part header - Header container.
 * @part close-btn - Close button.
 * @part body - Body content container.
 * @part footer - Footer container.
 * @example
 * ```html
 * <!-- With visible title -->
 * <ore-drawer open title="Settings" placement="right">
 *   <p>Settings content here.</p>
 * </ore-drawer>
 *
 * <!-- With custom header slot -->
 * <ore-drawer open placement="right">
 *   <span slot="header">Settings</span>
 *   <p>Settings content here.</p>
 * </ore-drawer>
 * ```
 */
export declare const DRAWER_TAG: "ore-drawer";
export {};
//# sourceMappingURL=drawer.d.ts.map