import { CSSResultGroup } from "lit"; import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element"; //#region src/components/spinner/spinner.d.ts /** * * * @summary Tells the user that content is loading or a request is processing in the background. * @tag sigvelo-spinner * @documentation https://design-system.sigvelo.com/docs/components/spinner * @status stable * @since 1.0 * * @slot - A custom spinner to show in lieu of the default one. Works best with `` and `` elements. Custom * spinners will not be animated, allowing you to use animated GIF, APNG, and SVG animations without conflict. * * @csspart track - the spinner's track, a `` SVG element. * @csspart indicator - the spinner's indicator, a `` SVG element. * * @cssproperty [--indicator-color=var(--sigvelo-color-primary-bg)] - The color of the spinner's indicator. * @cssproperty [--track-color=color-mix(in oklab, var(--sigvelo-color-neutral-bg), transparent 75%)] - The color of the * spinner's track. * @cssproperty [--speed=0.75s] - The speed for one complete rotation. * * @example Default * ```html * * ``` * * @example Changing the size * Spinners 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 spinner or an ancestor element. * * ```html * * * * ``` * * @example Changing the colors * To change the spinner's colors, set the `--indicator-color` and `--track-color` custom properties on the spinner. * * ```html *
* * * *
* ``` * * @example Using a custom spinner * To use a custom spinner, slot in an `` or `` element. When using custom spinners, the default animation _will not_ be applied. This allows you to use GIF, APNG, or custom SVG images of your own. The spinner will still be correctly recognized by assistive devices as an indeterminate progress bar. * * Here's an example using an APNG image. You can download it here if you want to use it. * * ```html * * * * ``` * * Here are some examples using animated SVGs from the SVG spinners library. These SVGs are available under the MIT License. Note that `fill="currentColor"` has been added to match the text color. * * ```html * * * * * * * * * * * * * * * * * * * * ``` */ declare class SigveloSpinner extends SigveloElement { static styles: CSSResultGroup; private localize; /** A custom label for screen readers. */ label: string; firstUpdated(): void; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-spinner": SigveloSpinner; } } //#endregion export { SigveloSpinner as t };