import { CSSResultGroup } from "lit";
import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/sparkline/sparkline.d.ts
/**
 * <sigvelo-sparkline>
 *
 * @summary Shows at-a-glance trends in a small, inline chart that fits within text or tables.
 * @tag sigvelo-sparkline
 * @documentation https://design-system.sigvelo.com/docs/components/sparkline
 * @status stable
 * @since 1.0
 *
 * @cssproperty [--fill-color] - The start color of the gradient fill
 * @cssproperty [--gradient-stop-color] - The end color of the gradient fill
 *
 * @example Default
 * ```html
 * <sigvelo-sparkline
 *   label="Number of cat treats given per day showing an increasing trend"
 *   data="10 20 40 25 35 25 60 50 70"
 *   style="height: 40px;"
 * ></sigvelo-sparkline>
 * ```
 *
 * **Note:** In the same way that images require `alt` text, you should add a label to every sparkline. The label won't be displayed, but it will be announced by assistive devices.
 *
 *
 *
 * By default, sparklines are styled with a `1em` height to fit properly within headings and text.
 *
 * ```html
 * <p>
 *   This week's website traffic
 *   <sigvelo-sparkline
 *     label="Website traffic showing a slightly positive trend"
 *     data="10 16 12 18 30"
 *   ></sigvelo-sparkline>
 *   has slightly increased.
 * </p>
 * ```
 *
 * To set a specific size, adjust the `width`, `height`, or `aspect-ratio` CSS properties.
 *
 * ```html
 * <sigvelo-sparkline
 *   label="Monthly cat toy purchases showing increased spending over time"
 *   data="10 20 40 25 35 25 60 50 70"
 *   style="width: 100%; height: auto;"
 * ></sigvelo-sparkline>
 * ```
 *
 *
 * By default, sparklines render with a gradient fill. Set the `variant` attribute to `solid` or `line` to render a solid fill or a simple line instead.
 *
 * ```html
 * <sigvelo-sparkline
 *   variant="gradient"
 *   label="Weekly cat food consumption showing typical feeding patterns"
 *   data="10 20 40 25 35 25 60 50 70"
 *   style="height: 40px;"
 *   trend="auto"
 * ></sigvelo-sparkline>
 *
 * <sigvelo-sparkline
 *   variant="solid"
 *   label="Weekly cat food consumption showing typical feeding patterns"
 *   data="10 20 40 25 35 25 60 50 70"
 *   style="height: 40px;"
 *   trend="auto"
 * ></sigvelo-sparkline>
 *
 * <sigvelo-sparkline
 *   variant="line"
 *   label="Weekly cat food consumption showing typical feeding patterns"
 *   data="10 20 40 25 35 25 60 50 70"
 *   style="height: 40px;"
 *   trend="auto"
 * ></sigvelo-sparkline>
 * ```
 *
 *
 * Set the `curve` attribute to `linear`, `natural`, or `step` to change the style of the curve.
 *
 * ```html
 * <sigvelo-sparkline
 *   label="Hourly cat meows tracked throughout the day using a linear curve"
 *   curve="linear"
 *   data="10 20 40 25 35 25 60 50 70"
 *   style="height: 40px;"
 * ></sigvelo-sparkline>
 *
 * <sigvelo-sparkline
 *   label="Hourly cat meows tracked throughout the day using a natural curve"
 *   curve="natural"
 *   data="10 20 40 25 35 25 60 50 70"
 *   style="height: 40px;"
 * ></sigvelo-sparkline>
 *
 * <sigvelo-sparkline
 *   label="Hourly cat meows tracked throughout the day using a step curve"
 *   curve="step"
 *   data="10 20 40 25 35 25 60 50 70"
 *   style="height: 40px;"
 * ></sigvelo-sparkline>
 * ```
 *
 *
 * Set the `trend` attribute to `negative`, `neutral`, or `positive` to visually indicate a trend.
 *
 * ```html
 * <!-- Negative trend -->
 * <sigvelo-sparkline
 *   label="Decreasing trend in scratching post usage"
 *   data="70 75 60 50 55 35 25"
 *   trend="negative"
 *   style="height: 40px;"
 * ></sigvelo-sparkline>
 *
 * <!-- Neutral trend -->
 * <sigvelo-sparkline
 *   label="Stable pattern of cat litter box visits"
 *   data="45 50 42 48 44 46 45"
 *   trend="neutral"
 *   style="height: 40px;"
 * ></sigvelo-sparkline>
 *
 * <!-- Positive trend -->
 * <sigvelo-sparkline
 *   label="Increasing frequency of purring episodes"
 *   data="25 35 30 50 45 65 75"
 *   trend="positive"
 *   style="height: 40px;"
 * ></sigvelo-sparkline>
 * ```
 *
 *
 * Use the `--fill-color`, `--line-color`, and `--line-width` custom properties to change the sparkline's styles.
 *
 * ```html
 * <sigvelo-sparkline
 *   label="Weekly likes for cat memes growing in popularity"
 *   data="10 20 40 25 35 25 60 50 70"
 *   style="
 *     height: 60px;
 *     --fill-color: deeppink;
 *     --line-color: deeppink;
 *     --line-width: 3px;
 *   "
 * ></sigvelo-sparkline>
 * ```
 *
 * Combine sparklines with cards and number tickers for an elegant way to display stats.
 *
 * ```html
 * <sigvelo-card class="sparkline__stat">
 *   <div class="description">
 *     <small>Revenue</small><br>
 *     $<sigvelo-number-ticker end-value="12345" start-on-view></sigvelo-number-ticker>
 *   <div>
 *   <sigvelo-sparkline
 *     label="Number of cat treats given per day showing an increasing trend"
 *     data="10 20 17 23 27 22 30 38 44"
 *     curve="natural"
 *     variant="solid"
 *   ></sigvelo-sparkline>
 * </sigvelo-card>
 *
 * <style>
 *   sigvelo-card.sparkline__stat {
 *     max-width: 280px;
 *
 *     &::part(body) {
 *       display: flex;
 *       flex-direction: column;
 *       padding: 0;
 *     }
 *
 *     .description {
 *       font-size: 2.25rem;
 *       font-weight: var(--sigvelo-font-weight-semibold);
 *       line-height: 1.2;
 *       padding: .5rem 1.5rem 0 1.5rem;
 *     }
 *
 *     small {
 *       font-weight: var(--sigvelo-font-weight-normal);
 *       font-size: 0.9375rem;
 *       color: var(--sigvelo-color-text-muted);
 *     }
 *
 *     sigvelo-sparkline {
 *       width: 100%;
 *       height: auto;
 *     }
 *   }
 * </style>
 * ```
 */
declare class SigveloSparkline extends SigveloElement {
  static styles: CSSResultGroup;
  points: number[];
  /**
   * An accessible label for the sparkline. This will be read by screen readers for users who can't see the chart, so
   * make sure to describe it appropriately.
   */
  label: string;
  /**
   * A space-separated list of positive values to show in the sparkline, e.g. "10 25 18 30". At least two values are
   * required to generate a chart.
   */
  data: string;
  /** Determines the sparkline's variant. */
  variant: "gradient" | "line" | "solid";
  /** Draws the component with colors to visually indicate the specified trend. */
  trend: "positive" | "negative" | "neutral";
  /** The interpolation method used to connect data points on the line. */
  curve: "linear" | "natural" | "step";
  /** Returns an SVG path for a linear, point-to-point graph */
  private getLinearPath;
  /** Returns an SVG path for a curved graph */
  private getNaturalPath;
  /** Returns an SVG path for a stepped graph */
  private getStepPath;
  /** Generates the appropriate SVG path based on the desired curve. */
  private getPath;
  render(): import("lit-html").TemplateResult<1>;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-sparkline": SigveloSparkline;
  }
}
//#endregion
export { SigveloSparkline as t };