import { CustomElement } from "../../internal/custom-element.js";
import { TemplateResult } from "lit";
import { OdxIconName } from "@odx/icons";
type BadgeSize = (typeof BadgeSize)[keyof typeof BadgeSize];
declare const BadgeSize: {
  readonly MD: "md";
  readonly LG: "lg";
};
type BadgeVariant = (typeof BadgeVariant)[keyof typeof BadgeVariant];
declare const BadgeVariant: {
  readonly NEUTRAL: "neutral";
  readonly PRIMARY: "primary";
  readonly ACCENT: "accent";
  readonly ACCENT_SUBTLE: "accent-subtle";
  readonly SUCCESS: "success";
  readonly SUCCESS_SUBTLE: "success-subtle";
  readonly WARNING: "warning";
  readonly DANGER: "danger";
  readonly DANGER_SUBTLE: "danger-subtle";
  readonly CONFIRMATION: "confirmation";
};
declare global {
  interface HTMLElementTagNameMap {
    'odx-badge': OdxBadge;
  }
}
/**
 * @summary A badge is an indicator to show that new events, state changes or similar can be viewed via an element.
 * @status rc
 * @since 1.0
 *
 * @dependency odx-loading-spinner
 *
 * @slot - The badge content. This is typically a number, short text string or an icon.
 *
 * @csspart icon - The badge's icon element, present when the `icon` property is set.
 * @csspart spinner - The badge's spinner element, present when the `loading` property is `true`.
 */
declare class OdxBadge extends CustomElement {
  static tagName: string;
  static styles: import("lit").CSSResult[];
  /**
   * Indicates whether to show a pulse animation on the badge to draw attention to it.
   */
  animated: boolean;
  /**
   * Indicates whether to display the badge in a compact style.
   */
  compact: boolean;
  /**
   * Indicates wether to use a outline to increased contrast of the badge against the background.
   */
  contrast: boolean;
  /**
   * The name of the icon to display in the badge.
   */
  icon?: OdxIconName;
  /**
   * The maximum numeric value to display before showing a "+" sign.
   */
  max: number;
  /**
   * Indicates whether the badge is used to display a loading state.
   */
  loading: boolean;
  /**
   * The size of the badge, which determines its dimensions and font size.
   */
  size: BadgeSize;
  /**
   * The variant of the badge, which determines its color and other visual properties.
   */
  variant: BadgeVariant;
  /**
   * The numeric value to display in the badge.
   * If not set, the badge will display its slotted content instead.
   */
  value?: number | null;
  protected render(): TemplateResult;
}
export { BadgeSize, BadgeVariant, OdxBadge };