import { Directions as CoreDirections } from "@warp-ds/core/attention";
import { LitElement, nothing } from "lit";
import "../icon/icon.js";
import "../button/button.js";
import type { AttentionState } from "@warp-ds/core/attention";
import type { TemplateResult } from "lit";
export type Directions = CoreDirections;
/**
 * Note: attention will soon be split into multiple components (tooltip, callout, popover, highlight) at which time this component will be deprecated. For now, use the `tooltip`, `callout`, `popover`, and `highlight` boolean properties to achieve the desired style and behavior.
 *
 * Attention is a versatile component for displaying contextual information and messages. It can be used for a wide range of purposes, such as tooltips, callouts, popovers, and highlights.
 *
 * The component is designed to be anchored to a trigger element, providing contextual information related to that element. It supports various placements and styling options to accommodate different use cases and design needs.
 *
 * [Warp component reference](https://warp-ds.github.io/docs/components/tooltip/frameworks/elements)
 */
declare class WarpAttention extends LitElement {
    /**
     * Controls whether the attention panel is visible.
     * Set to `true` to show the attention content and `false` to hide it.
     */
    show: boolean;
    /**
     * Preferred placement relative to the trigger element.
     * Sets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants.
     */
    placement: Directions;
    /**
     * Renders the component with tooltip styling and behavior.
     * Use for compact, non-modal contextual hints anchored to another element.
     */
    tooltip: boolean;
    /**
     * Renders the component as an inline callout.
     * Callout mode is used for always-in-flow informational content instead of floating overlay behavior.
     */
    callout: boolean;
    /**
     * Enables native popover behavior for the attention element.
     * When enabled, the component uses popover semantics and styling suitable for floating surface UI.
     */
    popover: boolean;
    /**
     * Renders the component with highlight styling.
     * Use highlight mode to visually emphasize important contextual information.
     */
    highlight: boolean;
    /**
     * Shows a close button inside the attention component.
     * Adds an internal dismiss action that lets users close the attention panel.
     */
    canClose: boolean;
    /**
     * Hides the directional arrow of the attention component.
     * Disable the arrow when the visual connection to the trigger should not be shown.
     */
    noArrow: boolean;
    /**
     * Distance offset between trigger and attention panel.
     * Defines the main-axis spacing in pixels from the anchor element.
     */
    distance: number;
    /**
     * Cross-axis offset for fine-grained positioning.
     * Moves the panel along the cross axis in pixels to adjust alignment with the trigger.
     */
    skidding: number;
    /**
     * Enables automatic flipping when placement has no space.
     * Allows the component to choose an alternative side if the preferred placement would overflow.
     */
    flip: boolean;
    /**
     * Allows overflow checks on the cross axis when flipping.
     * Use with `flip` to improve collision handling when space is constrained horizontally or vertically.
     */
    crossAxis: boolean;
    /**
     * Ordered list of fallback placements.
     * Provides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit.
     */
    fallbackPlacements: Directions[];
    /** @internal */
    attentionState: AttentionState | null;
    /** @internal */
    _initialPlacement: Directions;
    static styles: import("lit").CSSResult[];
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    handleDone(): void;
    /** @internal */
    get _actualDirection(): Directions;
    /** @internal */
    set _actualDirection(v: Directions);
    /** @internal */
    get _arrowEl(): HTMLElement | null;
    /** @internal */
    get _arrowDirection(): CoreDirections;
    /** @internal */
    get _arrowClasses(): string;
    /** @internal */
    get _arrowHtml(): TemplateResult | typeof nothing;
    /** @internal */
    get _activeVariantClasses(): {
        wrapper: string;
        arrow: string;
    };
    /** @internal */
    get _attentionEl(): HTMLDivElement | null;
    /** @internal */
    get _targetEl(): HTMLElement | null;
    /** @internal */
    get _messageEl(): HTMLElement | null;
    /** @internal */
    get _wrapperClasses(): string;
    /** @internal */
    get _ariaClose(): string;
    /** @internal */
    get _closeBtnHtml(): TemplateResult<1>;
    updated(): void;
    pointingAtDirection(): string;
    activeAttentionType(): string;
    defaultAriaLabel(): string;
    firstUpdated(): void;
    close(): void;
    keypressed(e: KeyboardEvent): void;
    render(): TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        "w-attention": WarpAttention;
    }
}
export { WarpAttention };