import { LitElement, PropertyValues } from "lit";
export type SkyBadgeClickEventDetail = {
    originalEvent: Event;
};
export type SkyBadgePosition = "default" | "floating" | "inline";
export type SkyBadgeShape = "circle" | "pill" | "custom";
export type SkyBadgePlacement = "custom" | "top-right" | "top-left" | "bottom-left" | "bottom-right" | "top-center";
/**
 * @element sky-badge
 *
 * @summary Badge for status dots, counts, or icons anchored to slotted content.
 *
 * @status stable
 * @since 1.0.0
 *
 * @documentation https://sky-ui.com/components/badge
 * @dependency sky-icon
 *
 * @slot - The content the badge attaches to.
 * @slot badge - Optional slot to override the badge content entirely.
 *
 * @fires {CustomEvent<SkyBadgeClickEventDetail>} badge-click - Emitted when badge activation occurs via click, Enter, or Space while `interactive` is true.
 *
 * @csspart container - Wrapper around the slotted content and the badge.
 * @csspart badge - The badge element. Use `badgeRef` for positioning (e.g. tooltip anchor).
 * @csspart icon - The icon element when `isIcon` is true.
 *
 * @Behavior
 * - Visibility is controlled by `show` and `hideWhenZero`.
 * - Numeric values above `max` render as `<max>+`.
 * - Interactive mode supports click and keyboard activation.
 * - Reduced motion mode removes badge transitions.
 *
 * @property {string} statusColor - Badge background token or CSS color.
 * @property {string} textColor - Text color token or CSS color.
 * @property {string} iconColor - Icon color token or CSS color; falls back to `textColor` when empty.
 * @property {SkyBadgePosition} position - Layout mode: `default | floating | inline`.
 * @property {string} value - Badge text/count or icon name in icon mode.
 * @property {boolean} isIcon - Renders icon mode when true.
 * @property {string} size - Badge and icon size CSS length.
 * @property {SkyBadgeShape} shape - Badge shape: `circle | pill | custom`.
 * @property {number} max - Maximum numeric count before rendering overflow label.
 * @property {boolean} hideWhenZero - Hides badge when value resolves to numeric zero.
 * @property {boolean} show - Forces badge visibility independent of value.
 * @property {string} offsetX - Horizontal offset CSS length.
 * @property {string} offsetY - Vertical offset CSS length.
 * @property {boolean} ring - Enables visual ring around the badge.
 * @property {string} ringColor - Ring color token or CSS color.
 * @property {string} ringOffset - Ring offset CSS length.
 * @property {string | null} badgeLabel - ARIA label override.
 * @property {boolean} badgeAriaHidden - Hides badge from assistive technology when true.
 * @property {boolean} interactive - Enables focus/activation and `badge-click` emission.
 * @property {SkyBadgePlacement} placement - Anchor placement preset for badge positioning.
 * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
 * @method showBadge Forces badge visibility on.
 * @method hideBadge Forces badge visibility off.
 * @method setValue Updates badge value text or icon name.
 *
 * @example
 * ```html
 * <sky-badge value="5" statuscolor="danger" placement="top-right">
 *   <sky-icon icon="mdi:bell-outline"></sky-icon>
 * </sky-badge>
 * ```
 * ```vue
 * <template>
 *   <sky-badge value="5" statuscolor="danger" placement="top-right">
 *     <sky-icon icon="mdi:bell-outline"></sky-icon>
 *   </sky-badge>
 * </template>
 * ```
 * ```jsx
 * export default function Demo() {
 *   return (
 *     <sky-badge value="5" statuscolor="danger" placement="top-right">
 *       <sky-icon icon="mdi:bell-outline"></sky-icon>
 *     </sky-badge>
 *   );
 * }
 * ```
 */
export declare class SkyBadge extends LitElement {
    static dependencies: Record<string, CustomElementConstructor>;
    /** Background color of the badge. */
    statusColor: string;
    /** Color of text content inside the badge. */
    textColor: string;
    /** Color of the badge icon (when `isIcon` is true). */
    iconColor: string;
    /** Position of the badge relative to content. */
    position: SkyBadgePosition;
    /** Value or icon name displayed inside the badge. */
    value: string;
    /** Whether the badge should render as an icon instead of text. */
    isIcon: boolean;
    /** Size (width/height) of the badge. e.g., `8px`, `1rem`. */
    size: string;
    /** Shape of the badge. `circle`, `pill`, or `custom` (use `--sky-badge-radius`). */
    shape: SkyBadgeShape;
    /** Maximum numeric count before showing e.g., `99+`. Ignored in icon mode. */
    max: number;
    /** Do not render the badge if numeric value is `0`. */
    hideWhenZero: boolean;
    /** Controls visibility regardless of value (useful for async data). */
    show: boolean;
    /** Pixel or CSS length offsets for `default`/`floating` positions. */
    offsetX: string;
    offsetY: string;
    /** Optional outline ring around the badge. */
    ring: boolean;
    ringColor: string;
    ringOffset: string;
    /** Accessiblity: override the generated aria-label for screen readers. */
    badgeLabel: string | null;
    /** Accessibility: if true, hides the badge from assistive tech (purely decorative). */
    badgeAriaHidden: boolean;
    /** Make badge focusable/clickable and emit `badge-click`. */
    interactive: boolean;
    /** Corner preset; use "custom" to rely on offsetX/offsetY and existing behavior. */
    placement: SkyBadgePlacement;
    /** Named prop preset from nearest `sky-config-provider`. */
    preset: string;
    private _presets;
    private _badgeEl;
    /** Ref for the badge element (e.g. for tooltip anchor or positioning). */
    badgeRef: import("lit-html/directives/ref.js").Ref<HTMLSpanElement>;
    static shadowRootOptions: ShadowRootInit;
    static styles: import("lit").CSSResult[];
    protected updated(changed: PropertyValues<this>): void;
    /**
     * Forces badge visibility on.
     *
     * @returns {void}
     */
    showBadge(): void;
    /**
     * Forces badge visibility off.
     *
     * @returns {void}
     */
    hideBadge(): void;
    /**
     * Updates badge value for text/count or icon modes.
     *
     * @param value Badge value or icon name.
     * @returns {void}
     */
    setValue(value: string): void;
    /** Emits `badge-click` for interactive activation. */
    private _onActivate;
    /** Handles keyboard activation with Enter and Space. */
    private _onKeydown;
    /** Computes accessible badge label from current render state. */
    private _computeAriaLabel;
    /** Resolves anchor edges from placement preset. */
    private _computeAnchors;
    /** Maps semantic status tokens to soft badge surface colors. */
    private _resolveBadgeSurface;
    render(): import("lit-html").TemplateResult<1>;
}