import { r as t, h as e, H as n } from "./index.e6beb8d9.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(i) {
    t(this, i), this.size = "m", this.value = 0, this.variant = "bar";
  }
  render() {
    const i = 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 e(n, { key: "554a77d6a3d9c769f7ae35d17ff07d04595edc67", class: this.variant }, this.variant === "bar" && e("progress", { key: "b881a20eb065e7ed9853d1d192c1d3826c251dbf", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: i, max: 100, value: this.value }), this.variant === "circle" && e("span", { key: "bf687e4aaf398642b0539a2315865c9c180a74df", role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: i }, e("svg", { key: "b149cd39096a93aac3a168b01e44a92cce4ddc77", class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(r + a) * 2} ${(r + a) * 2}` }, e("circle", { key: "90a45e5b3321c0af48dc6bcf368570193f32f278", class: "progress-indicator__circle-background", cx: r + a, cy: r + a, r, fill: "none", "stroke-width": a }), e("circle", { key: "916b93e693312a1e9c1057e38f1e4251f89277c1", 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
};
