import { r as t, h as i, H as n } from "./index.61732cef.js";
import { c } from "./index-orsBiyT_.fc4357c3.js";
import "react";
import "react-dom";
const d = () => ":host{display:block;width:100%}:host *{box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-raised-default)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-border-highlight);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-border-highlight);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-border-default);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}", l = class {
  constructor(e) {
    t(this, e), this.size = "m", this.value = 0, this.variant = "bar";
  }
  render() {
    const e = c("progress-indicator", `progress-indicator--size-${this.size}`, `progress-indicator--variant-${this.variant}`), a = this.size === "m" ? 4 : 2, r = this.size === "m" ? 20 : 10, s = Math.round(r * 2 * Math.PI), o = Math.round(s * ((100 - this.value) / 100));
    return i(n, { key: "145af7f98c9a802df6b2d200259698038a21b8f0", class: this.variant }, this.variant === "bar" && i("progress", { key: "87d9ff0d045c00243130990a2f4c4bb9acf148ea", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: e, max: 100, value: this.value }), this.variant === "circle" && i("span", { key: "b7d41758466e3ce6ff106097fe3f906a1ceb299a", role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: e }, i("svg", { key: "cfae59747e8009dff51208ca319e882ca6b8ba38", class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(r + a) * 2} ${(r + a) * 2}` }, i("circle", { key: "3ea99ecc73cd6031d17303dac25cc1d8e51891a5", class: "progress-indicator__circle-background", cx: r + a, cy: r + a, r, fill: "none", "stroke-width": a }), i("circle", { key: "25b24dfc50827137fb7f8250bb4cdb30743b3d4d", class: "progress-indicator__circle-value", cx: r + a, cy: r + a, r, fill: "none", "stroke-width": a, "stroke-dasharray": s, "stroke-dashoffset": o }))));
  }
};
l.style = d();
export {
  l as swirl_progress_indicator
};
