import { CSSResultGroup, PropertyValues } from "lit";
import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/meter/meter.d.ts
/**
 * <sigvelo-meter>
 *
 * @summary Displays a static gauge representing a value within a known range.
 * @tag sigvelo-meter
 * @status experimental
 * @since 1.0
 *
 * @slot - Optional label content displayed above the meter.
 * @slot value - Optional formatted value displayed to the right of the label.
 *
 * @cssproperty [--track-color=var(--sigvelo-color-neutral-bg-subtle)] - The color of the meter's track.
 * @cssproperty [--track-size=0.5rem] - The height of the meter track.
 * @cssproperty [--indicator-color] - The color of the meter's indicator. Defaults to the color intent.
 *
 * @csspart track - The meter's track element.
 * @csspart indicator - The meter's value indicator.
 * @csspart label - The container for the label and value.
 *
 * @example Default
 * ```html
 * <sigvelo-meter label="Disk usage" value="72" style="width: 300px;">
 *   <span slot="value">72%</span>
 * </sigvelo-meter>
 * ```
 *
 * @example Color intents
 * ```html
 * <div style="display: flex; flex-direction: column; gap: 1rem; width: 300px;">
 *   <sigvelo-meter label="CPU" value="25" color="primary">
 *     <span slot="value">25%</span>
 *   </sigvelo-meter>
 *   <sigvelo-meter label="Memory" value="55" color="success">
 *     <span slot="value">55%</span>
 *   </sigvelo-meter>
 *   <sigvelo-meter label="Disk" value="78" color="warning">
 *     <span slot="value">78%</span>
 *   </sigvelo-meter>
 *   <sigvelo-meter label="Network" value="92" color="destructive">
 *     <span slot="value">92%</span>
 *   </sigvelo-meter>
 * </div>
 * ```
 */
declare class SigveloMeter extends SigveloElement {
  static styles: CSSResultGroup;
  /** A label for the meter, displayed above the track. */
  label: string;
  /** The meter's minimum value. */
  min: number;
  /** The meter's maximum value. */
  max: number;
  /** The meter's current value. */
  value: number;
  /** The color intent for the indicator. */
  color: "primary" | "success" | "warning" | "destructive";
  /** The percentage of the meter filled (readonly). */
  get percentage(): number;
  firstUpdated(): void;
  updated(changedProperties: PropertyValues<this>): void;
  render(): import("lit-html").TemplateResult<1>;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-meter": SigveloMeter;
  }
}
//#endregion
export { SigveloMeter as t };