/**
 * @license
 * Copyright 2023 Nuraly, Laabidi Aymen
 * SPDX-License-Identifier: MIT
 */
import { LitElement, TemplateResult } from 'lit';
import { BadgeStatus, BadgeSize, BadgeColor, RibbonPlacement } from './badge.types.js';
declare const NrBadgeElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
/**
 * # Badge Component
 *
 * Small numerical value or status descriptor for UI elements.
 * Badge normally appears in proximity to notifications or user avatars with
 * eye-catching appeal, typically displaying unread messages count.
 *
 * ## Features
 * - Count badge with overflow support
 * - Dot badge for simple indicators
 * - Status badge with predefined states
 * - Ribbon badge for decorative labels
 * - Customizable colors (preset and custom)
 * - Offset positioning
 * - Show zero option
 * - Theme-aware styling
 *
 * ## Usage
 * ```html
 * <!-- Basic count badge -->
 * <nr-badge count="5">
 *   <button>Notifications</button>
 * </nr-badge>
 *
 * <!-- Dot badge -->
 * <nr-badge dot>
 *   <nr-icon name="notification"></nr-icon>
 * </nr-badge>
 *
 * <!-- Status badge -->
 * <nr-badge status="success" text="Success"></nr-badge>
 *
 * <!-- Ribbon badge -->
 * <nr-badge ribbon="Recommended">
 *   <div class="card">Card content</div>
 * </nr-badge>
 *
 * <!-- Standalone badge -->
 * <nr-badge count="25"></nr-badge>
 * ```
 *
 * @element nr-badge
 *
 * @slot - Content to wrap with badge (avatar, icon, etc.)
 *
 * @csspart indicator - The count or dot indicator bubble
 * @csspart wrapper - The wrapper span that contains the slot and indicator (when children are present)
 * @csspart status - The status dot container (status mode only)
 * @csspart status-dot - The colored status indicator dot (status mode only)
 * @csspart status-text - The label text shown alongside the status dot
 * @csspart ribbon - The ribbon decoration element (ribbon mode only)
 * @csspart ribbon-wrapper - The wrapper around slotted content in ribbon mode
 */
export declare class NrBadgeElement extends NrBadgeElement_base {
    static styles: import("lit").CSSResult;
    static useShadowDom: boolean;
    /**
     * Number to show in badge
     */
    count?: number;
    /**
     * Whether to display a dot instead of count
     */
    dot: boolean;
    /**
     * Max count to show (shows count+ when exceeded)
     */
    overflowCount: number;
    /**
     * Whether to show badge when count is zero
     */
    showZero: boolean;
    /**
     * Set offset of the badge dot [x, y]
     */
    offset?: [number, number];
    /**
     * Badge color (preset or custom hex/rgb)
     */
    color?: BadgeColor | string;
    /**
     * Badge size
     */
    size: BadgeSize;
    /**
     * Set Badge as a status dot
     */
    status?: BadgeStatus;
    /**
     * Status text to display
     */
    text?: string;
    /**
     * Title to show on hover
     */
    badgeTitle?: string;
    /**
     * Ribbon text (enables ribbon mode)
     */
    ribbon?: string;
    /**
     * Ribbon placement
     */
    ribbonPlacement: RibbonPlacement;
    /**
     * Get the display count text
     */
    private getDisplayCount;
    /**
     * Check if badge should be hidden
     */
    private shouldHideBadge;
    /**
     * Get custom color style
     */
    private getCustomColorStyle;
    /**
     * Get offset style
     */
    private getOffsetStyle;
    /**
     * Render status badge
     */
    private renderStatusBadge;
    /**
     * Render ribbon badge
     */
    private renderRibbonBadge;
    /**
     * Render count/dot badge
     */
    private renderCountBadge;
    render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'nr-badge': NrBadgeElement;
    }
}
export {};
//# sourceMappingURL=badge.component.d.ts.map