import { CSSResultGroup, PropertyValues } from "lit";
import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/progress/progress.d.ts
/**
 * <sigvelo-progress>
 *
 * @summary Visually represents the progress of a request or task.
 * @tag sigvelo-progress
 * @documentation https://design-system.sigvelo.com/docs/components/progress
 * @status stable
 * @since 1.0
 *
 * @slot - Text to render inside the progress bar.
 *
 * @cssproperty [--track-color=var(--sigvelo-color-neutral-bg-subtle)] - The color of the progress bar's track.
 * @cssproperty [--track-size=1.5em | 1em] - The height or thickness of the track, depending on the type of progress bar.
 * @cssproperty [--indicator-color=var(--sigvelo-color-primary-bg)] - The color of the progress bar's value indicator.
 * @cssproperty [--diameter=10em] - For progress rings, the diameter of the ring.
 *
 * @csspart track - The progress bar's track, a `<div>` for progress bars and a `<circle>` for progress rings.
 * @csspart indicator - The progress bar's current value indicator, a `<div>` for progress bars and an SVG `<circle>`
 *  for progress rings.
 * @csspart content - The container that holds any content that's been slotted in.
 *
 * @example Default
 * ```html
 * <sigvelo-progress label="Downloading" value="50">
 *   50%
 * </sigvelo-progress>
 * ```
 *
 * @example Adding a label
 * Labels aren't displayed in the progress bar, but they're required for assistive devices such as screen readers. You can add a label using the `label` attribute.
 *
 * ```html
 * <sigvelo-progress label="Progress" value="50"></sigvelo-progress>
 * ```
 *
 * @example Showing content
 * Slot in some text to show content in the progress bar's indicator.
 *
 * ```html
 * <sigvelo-progress label="Progress" value="75">75%</sigvelo-progress>
 * ```
 *
 * @example Progress rings
 * Set the `variant` attribute to `ring` to show progress in the shape of a ring.
 *
 * ```html
 * <sigvelo-progress label="Completion" variant="ring" value="50">
 *   50%
 * </sigvelo-progress>
 * ```
 *
 * @example Progress pie charts
 * Set the `variant` attribute to `pie` to show progress in the shape of a filled pie chart.
 *
 * ```html
 * <sigvelo-progress label="Completion" variant="pie" value="66"></sigvelo-progress>
 * ```
 *
 * @example Indeterminate progress
 * When the completion status can't be determined, the progress bar is considered indeterminate. Add the `indeterminate` attribute for tasks whose progress can't be reported.
 *
 * ```html
 * <sigvelo-progress label="Waiting for response" indeterminate></sigvelo-progress>
 *
 * <br>
 *
 * <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
 *   <sigvelo-progress label="Waiting for response" variant="ring" indeterminate></sigvelo-progress>
 *   <sigvelo-progress label="Waiting for response" variant="pie" indeterminate></sigvelo-progress>
 * </div>
 * ```
 *
 * @example Changing the size
 * Use `--track-size` property to change the track size for bars and rings. For rings and pie charts, use the `--diameter` custom property to change the size.
 *
 * ```html
 * <sigvelo-progress
 *   label="Progress"
 *   value="75"
 *   style="--track-size: 10px;"
 * >
 * </sigvelo-progress>
 *
 * <br>
 *
 * <sigvelo-progress
 *   label="Progress"
 *   value="75"
 *   style="--track-size: 60px; font-size: 1.5rem;"
 * >
 *   Loading
 * </sigvelo-progress>
 *
 * <br>
 *
 * <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
 *   <sigvelo-progress
 *     variant="ring"
 *     value="75"
 *     style="--track-size: 4px; --diameter: 100px;"
 *   >
 *     75%
 *   </sigvelo-progress>
 *
 *   <sigvelo-progress
 *     variant="pie"
 *     value="75"
 *     style="--diameter: 100px;"
 *   >
 *   </sigvelo-progress>
 * </div>
 * ```
 *
 * @example Changing the colors
 * Use the `--track-color` custom property to change the progress bar's track color. Use the `--indicator-color` custom property to change the color of the progress indicator.
 *
 * ```html
 * <sigvelo-progress
 *   style="--track-color: mistyrose; --indicator-color: deeppink; color: white;"
 *   label="Progress"
 *   value="75"
 * >
 *   Almost there!
 * </sigvelo-progress>
 *
 * <br>
 *
 * <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
 *   <sigvelo-progress
 *     style="--track-color: mistyrose; --indicator-color: deeppink;"
 *     variant="ring"
 *     label="Progress"
 *     value="75"
 *   >
 *     75%
 *   </sigvelo-progress>
 *
 *   <sigvelo-progress
 *     style="--track-color: mistyrose; --indicator-color: deeppink;"
 *     variant="pie"
 *     label="Progress"
 *     value="75"
 *   >
 *   </sigvelo-progress>
 * </div>
 * ```
 */
declare class SigveloProgress extends SigveloElement {
  static styles: CSSResultGroup;
  /** A custom label for assistive devices. */
  label: string;
  /** The type of progress bar to render. */
  variant: "bar" | "ring" | "pie";
  /** The progress bar's minimum value. */
  min: number;
  /** The progress bar's maximum value. */
  max: number;
  /** The progress bar's current value. */
  value: number;
  /** The progress bar's current value as a percentage. This is a readonly property. */
  get percentage(): number;
  /**
   * When the completion status can't be determined, the progress bar is considered indeterminate and the value is
   * ignored. Useful for tasks whose progress can't be reported.
   */
  indeterminate: boolean;
  firstUpdated(): void;
  updated(changedProperties: PropertyValues<this>): void;
  render(): import("lit-html").TemplateResult<1>;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-progress": SigveloProgress;
  }
}
//#endregion
export { SigveloProgress as t };