import { CSSResultGroup } from "lit";
import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/badge/badge.d.ts
/**
 * <sigvelo-badge>
 *
 * @summary Displays useful information or notifications such as a new feature or an unread message count.
 * @tag sigvelo-badge
 * @documentation https://design-system.sigvelo.com/docs/components/badge
 * @status stable
 * @since 1.0
 *
 * @slot - The badge's content.
 *
 * @cssproperty [--attention-duration=1.5s] - The speed at which the attention animation will run.
 * @cssproperty [--attention-easing=ease] - The easing to use for the attention animation.
 *
 * @example Default
 * ```html
 * <sigvelo-badge>12 items</sigvelo-badge>
 * ```
 *
 * @example Variants
 * Set the `color` attribute to `neutral`, `primary`, `success`, or `destructive` to change the badges's color.
 *
 * ```html
 * <sigvelo-badge color="neutral">Neutral</sigvelo-badge>
 * <sigvelo-badge color="primary">Primary</sigvelo-badge>
 * <sigvelo-badge color="success">Constructive</sigvelo-badge>
 * <sigvelo-badge color="destructive">Destructive</sigvelo-badge>
 * ```
 *
 * @example Outline badges
 * Set the `variant` attribute to `outline` to draw outlined badges.
 *
 * ```html
 * <sigvelo-badge variant="outline" color="neutral">Neutral</sigvelo-badge>
 * <sigvelo-badge variant="outline" color="primary">Primary</sigvelo-badge>
 * <sigvelo-badge variant="outline" color="success">Constructive</sigvelo-badge>
 * <sigvelo-badge variant="outline" color="destructive">Destructive</sigvelo-badge>
 * ```
 *
 * @example Changing the size
 * Badges are sized relative to the current font size. This allows you to place them into many contexts without having to explicitly size them. To change the size, set the `font-size` property on the badge or an ancestor element.
 *
 * ```html
 * <sigvelo-badge>Normal</sigvelo-badge>
 * <sigvelo-badge style="font-size: 1rem;">Big</sigvelo-badge>
 * <sigvelo-badge style="font-size: 1.25rem;">Bigger</sigvelo-badge>
 * ```
 *
 * @example Drawing attention
 * Set the `attention` attribute to `tap`, `shake`, or `sparkle` to draw attention to a badge with an animation. Remove the attribute to stop the animation. Users with a preference for reduced motion will see a more subtle pulse animation.
 *
 * ```html
 * <sigvelo-badge attention="tap" color="primary">Primary</sigvelo-badge>
 * <sigvelo-badge attention="shake" color="primary">Shake</sigvelo-badge>
 * <sigvelo-badge attention="sparkle" color="primary">Sparkle</sigvelo-badge>
 * ```
 *
 * **Note:** You can customize the speed and easing of attention animations using the `--attention-duration` and `--attention-easing` custom properties.
 *
 * @example Styling badges
 * Use the `color`, `background-color`, and `border-color` properties to change badge colors. You can also apply gradients with the `background-image` property.
 *
 * ```html
 * <sigvelo-badge style="background-color: royalblue; color: white; border: none;">Royal Blue</sigvelo-badge>
 * <sigvelo-badge style="background-color: deeppink; color: white; border: none;">Deep Pink</sigvelo-badge>
 * <sigvelo-badge style="background-color: forestgreen; color: white; border: none;">Forest Green</sigvelo-badge>
 * ```
 *
 * @example Using icons
 * Icons can be added before or after the badge's text.
 *
 * ```html
 * <sigvelo-badge style="background-color: firebrick; color: white;"><sigvelo-icon name="bug"></sigvelo-icon> Bug</sigvelo-badge>
 * <sigvelo-badge style="background-color: #2563eb; color: white;"><sigvelo-icon name="book-2"></sigvelo-icon> Documentation</sigvelo-badge>
 * <sigvelo-badge style="background-color: #d97706; color: white;"><sigvelo-icon name="copy"></sigvelo-icon> Duplicate</sigvelo-badge>
 * ```
 *
 * Badges can also be icon-only.
 *
 * ```html
 * <sigvelo-badge style="background-color: #ea580c; color: white;"><sigvelo-icon label="Cat" name="cat"></sigvelo-icon></sigvelo-badge>
 * <sigvelo-badge style="background-color: #059669; color: white;"><sigvelo-icon label="Dog" name="dog"></sigvelo-icon></sigvelo-badge>
 * <sigvelo-badge style="background-color: #4f46e5; color: white;"><sigvelo-icon label="Mouse" name="mouse"></sigvelo-icon></sigvelo-badge>
 * ```
 */
declare class SigveloBadge extends SigveloElement {
  static styles: CSSResultGroup;
  /** The type of badge to draw. */
  color: "neutral" | "primary" | "success" | "warning" | "destructive";
  /** Determines the badges's variant. */
  variant: "normal" | "outline";
  /** Draws attention to the badge using an animation. */
  attention: "tap" | "shake" | "sparkle";
  render(): import("lit-html").TemplateResult<1>;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-badge": SigveloBadge;
  }
}
//#endregion
export { SigveloBadge as t };