import 'iconify-icon';
import type { PropertyValues } from 'lit';
import { LuxenElement } from '../../shared/luxen-element.js';
export type AlertVariant = 'info' | 'success' | 'warning' | 'danger';
/**
 * @summary A callout box that highlights contextual information with a semantic color and a leading icon.
 * @customElement l-alert
 *
 * @event hide - Emitted when a dismissible alert is about to close. Cancelable — call `event.preventDefault()` to keep it open.
 * @event after-hide - Emitted after the dismiss animation completes and the alert is removed from the DOM. Not cancelable.
 *
 * @cssproperty [--gap=0.75rem] - Gap between the icon, content, and close button.
 * @cssproperty [--padding=1rem] - Inner padding.
 * @cssproperty [--border-radius=8px] - Corner radius.
 *
 * @cssClass .l-alert-icon - The leading icon, colored by variant (auto-injected).
 * @cssClass .l-alert-content - Wrapper the authored children are moved into; stacks them vertically (auto-injected).
 * @cssClass .l-alert-title - Optional bold heading placed above the body content. Use a real heading element (e.g. `<h3 class="l-alert-title">`) when the alert is a section callout so it is reachable by heading navigation.
 *
 * @example
 * ```html
 * <l-alert variant="warning" dismissible>
 *   <span class="l-alert-title">Heads up</span>
 *   This action cannot be undone.
 * </l-alert>
 * ```
 */
export declare class Alert extends LuxenElement {
    createRenderRoot(): this;
    /** Semantic variant: `info`, `success`, `warning`, or `danger`. Default is neutral. */
    variant?: AlertVariant;
    /** Iconify icon name (e.g. `lucide:bell`) overriding the variant's default icon. */
    icon?: string;
    /** Hide the leading icon entirely. */
    withoutIcon: boolean;
    /** Show a close button that dismisses the alert when clicked. */
    dismissible: boolean;
    private _localize;
    private _dismissTimer?;
    private _observer;
    connectedCallback(): void;
    disconnectedCallback(): void;
    updated(_changed: PropertyValues<this>): void;
    /** Idempotently reconcile the injected icon, content wrapper, and close button. */
    private _sync;
    private _iconName;
    private _syncIcon;
    /**
     * Move the authored children into a `.l-alert-content` wrapper so they stack
     * as one column regardless of node type. A wrapper (rather than placing bare
     * children directly) is required because text nodes — a plain string body —
     * cannot be targeted by CSS, so they would otherwise escape the layout.
     */
    private _syncContent;
    private _syncClose;
    private _dismiss;
    private _animateOut;
}
declare global {
    interface HTMLElementTagNameMap {
        'l-alert': Alert;
    }
}
//# sourceMappingURL=alert.d.ts.map