import { CSSResultGroup } from "lit";
import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/callout/callout.d.ts
/**
 * <sigvelo-callout>
 *
 * @summary Draws attention to important information, provides context, or prompts users to take action.
 * @tag sigvelo-callout
 * @documentation https://design-system.sigvelo.com/docs/components/callout
 * @status stable
 * @since 1.0
 *
 * @slot - Content to show in the callout.
 * @slot icon - An optional icon to show in the callout. Works well with `<sigvelo-icon>` and `<svg>` elements.
 *
 * @csspart icon - The container the wraps the icon.
 * @csspart body - The container that wraps the callout's content.
 *
 * @example Default
 * ```html
 * <sigvelo-callout color="primary">
 *   <sigvelo-icon slot="icon" name="book"></sigvelo-icon>
 *   A playful cat's antics can brighten any day with their boundless energy and curiosity. Watching a cat pounce and chase after toys is an endless source of entertainment.
 * </sigvelo-callout>
 * ```
 *
 * @example Variants
 * Set the `color` attribute to `neutral`, `primary`, `success`, or `destructive` to change the callout's color.
 *
 * ```html
 * <sigvelo-callout color="neutral">
 *   This is a neutral callout. Use me for informative content.
 * </sigvelo-callout>
 *
 * <sigvelo-callout color="primary">
 *   This is a primary callout. Use me for informative content that stands out.
 * </sigvelo-callout>
 *
 * <sigvelo-callout color="success">
 *   This is a success callout. Use me to show confirmations.
 * </sigvelo-callout>
 *
 * <sigvelo-callout color="destructive">
 *   This is a destructive callout. Use me when danger lies ahead.
 * </sigvelo-callout>
 * ```
 *
 * @example Adding icons
 * Add an icon to a callout using the `icon` slot. Works best with `<sigvelo-icon>` and `<svg>` elements.
 *
 * ```html
 * <sigvelo-callout color="neutral">
 *   <sigvelo-icon slot="icon" name="settings"></sigvelo-icon>
 *   Sleep mode has been enabled. You can disable it in settings.
 * </sigvelo-callout>
 *
 * <sigvelo-callout color="primary">
 *   <sigvelo-icon slot="icon" name="info-circle"></sigvelo-icon>
 *   A cat's soft, gentle gaze can melt even the coldest of hearts.
 * </sigvelo-callout>
 *
 * <sigvelo-callout color="success">
 *   <sigvelo-icon slot="icon" name="circle-check"></sigvelo-icon>
 *   Great job! The litter box has been successfully cleaned.
 * </sigvelo-callout>
 *
 * <sigvelo-callout color="destructive">
 *   <sigvelo-icon slot="icon" name="alert-triangle"></sigvelo-icon>
 *   Doing this will anger the cats. Are you sure you want to continue?
 * </sigvelo-callout>
 * ```
 *
 * @example Changing the size
 * Callouts are sized relative to the current font size. To change their size, apply `font-size` to the callout or an ancestor element.
 *
 * ```html
 * <sigvelo-callout color="primary" style="font-size: 1.25rem;">
 *   <sigvelo-icon slot="icon" name="rocket"></sigvelo-icon>
 *   It's a magical world, ol' buddy…let's go exploring!
 * </sigvelo-callout>
 *
 * <sigvelo-callout color="success" style="font-size: 1.25rem;">
 *   <sigvelo-icon slot="icon" name="bulb"></sigvelo-icon>
 *   You know what's weird? Day by day nothing seems to change, but pretty soon…everything is different.
 * </sigvelo-callout>
 * ```
 */
declare class SigveloCallout extends SigveloElement {
  static observeSlots: boolean;
  static styles: CSSResultGroup;
  firstUpdated(): void;
  /** The type of callout to render. */
  color: "neutral" | "primary" | "success" | "destructive";
  render(): import("lit-html").TemplateResult<1>;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-callout": SigveloCallout;
  }
}
//#endregion
export { SigveloCallout as t };