import { ComponentInterface } from '../../stencil-public-runtime';
/**
 * @component BcmBadge
 * @description A versatile badge component that can be positioned around its container.
 * Supports different sizes, variants (dot/text), colors, and positioning options.
 * Can display status indicators with optional blinking animation.
 *
 * @example Basic usage
 * <bcm-badge color="primary" position="top-right">
 *   <div>Container Content</div>
 *   <span slot="badge">New</span>
 * </bcm-badge>
 *
 * @example Status indicator with blink
 * <bcm-badge variant="dot" color="success" blink={true} status="Online">
 *   <div>User Profile</div>
 * </bcm-badge>
 */
export declare class Badge implements ComponentInterface {
    /**
     * Determines the size of the badge.
     * @type {'small' | 'medium' | 'large'}
     * @default 'medium'
     */
    size: 'small' | 'medium' | 'large';
    /**
     * Sets the visual variant of the badge.
     * 'dot': Appears as a small dot indicator
     * 'text': Displays content as text
     * @type {'dot' | 'text'}
     * @default 'text'
     */
    variant: 'dot' | 'text';
    /**
     * Defines the color of the badge.
     * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)
     * @type {string}
     * @optional
     */
    color?: string;
    /**
     * Enables soft color mode for the badge.
     * When true, uses lighter tones and pastel colors.
     * @type {boolean}
     * @default false
     */
    soft: boolean;
    /**
     * Enables blinking animation for the badge.
     * Useful for drawing attention or indicating active status.
     * @type {boolean}
     * @default false
     */
    blink: boolean;
    /**
     * Status message for accessibility purposes.
     * Will be read by screen readers.
     * @type {string}
     * @optional
     */
    status?: string;
    /**
     * Sets the position of the badge relative to its container.
     * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}
     * @default 'top-right'
     */
    position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
    /**
     * Fine-tune the badge position with custom offset.
     * Format: "x,y" in pixels (e.g., "10,-5")
     * @type {string}
     * @optional
     */
    offset: string;
    /**
     * Text to be displayed inside the badge.
     * Used when variant is set to 'text'.
     * Can be overridden using the "badge" slot.
     * @type {string}
     * @optional
     */
    text?: string;
    private classes;
    private get offsetStyle();
    private get badgeStyle();
    render(): any;
}