import { LitElement } from 'lit';
export interface BadgeProps {
    variant?: 'info' | 'primary' | 'error' | 'success' | 'warning';
    dot?: boolean;
    size?: 'sm' | 'md' | 'lg';
}
declare const Badge_base: (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
/**
 * A badge component for highlighting important information.
 *
 * Badges help highlight notifications, status, or new messages.
 * Primarily used for communicating secondary or additional information.
 *
 * @element btu-badge
 *
 * @fires {CustomEvent} btu-badge-ready - Fired after first render and initialization
 *
 * @cssprop --badge-color-foreground - Text color (overrides theme color)
 * @cssprop --badge-color-background - Background color (overrides theme color)
 * @cssprop --badge-radius-size - Border radius size (overrides shape default, default: 999px)
 * @cssprop --badge-px - Horizontal padding (overrides size default)
 * @cssprop --badge-py - Vertical padding (overrides size default)
 * @cssprop --badge-dot-size - Size of the dot affordance (default: 6px)
 *
 * @slot - Label text or child elements (e.g., btu-icon + text)
 *
 * @example
 * ```html
 * <!-- Badge with dot -->
 * <btu-badge variant="info" size="sm" dot>New</btu-badge>
 *
 * <!-- Badge with icon -->
 * <btu-badge variant="success" size="md">
 *   <btu-icon symbol="check"></btu-icon>
 *   Success
 * </btu-badge>
 * ```
 */
export default class Badge extends Badge_base {
    /**
     * Style of the badge.
     * - 'info': Informational (default)
     * - 'primary': Primary action or emphasis
     * - 'error': Error or danger state
     * - 'success': Success or completion state
     * - 'warning': Warning or caution state
     * @attr
     */
    variant: 'info' | 'primary' | 'error' | 'success' | 'warning';
    /**
     * Should a dot be displayed before the label?
     * @attr
     */
    dot: boolean;
    /**
     * Size variant.
     * - 'sm': Small (default)
     * - 'md': Medium
     * - 'lg': Large
     * @attr
     */
    size: 'sm' | 'md' | 'lg';
    /** @internal */
    private initialClasses;
    connectedCallback(): void;
    createRenderRoot(): this;
    willUpdate(): void;
    firstUpdated(): void;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'btu-badge': Badge;
    }
}
export {};
//# sourceMappingURL=Badge.d.ts.map