import { getTheme as e, setThemePartial as t } from "../../services/theme-engine/index.js";
//#region src/components/theme/radius-slider.ts
var n = 0, r = 20, i = 1, a = class {
	el;
	input;
	value;
	constructor() {
		let a = o(e().radius, n, r);
		this.el = document.createElement("div"), this.el.className = "preview-radius-slider";
		let s = document.createElement("div");
		s.className = "preview-radius-slider__head";
		let c = document.createElement("span");
		c.className = "preview-radius-slider__label", c.textContent = "Corner radius", s.appendChild(c), this.value = document.createElement("span"), this.value.className = "preview-radius-slider__value", this.value.textContent = `${a}px`, s.appendChild(this.value), this.el.appendChild(s), this.input = document.createElement("input"), this.input.type = "range", this.input.min = String(n), this.input.max = String(r), this.input.step = String(i), this.input.value = String(a), this.input.className = "preview-radius-slider__input", this.input.setAttribute("aria-label", "Corner radius (px)"), this.el.appendChild(this.input), this.applySliderFill(a), this.input.addEventListener("input", () => {
			t({ radius: o(Number(this.input.value), n, r) });
		}), document.addEventListener("cm:theme-change", () => {
			let t = o(e().radius, n, r);
			Number(this.input.value) !== t && (this.input.value = String(t)), this.value.textContent = `${t}px`, this.applySliderFill(t);
		});
	}
	applySliderFill(e) {
		let t = (e - n) / (r - n) * 100;
		this.input.style.setProperty("--slider-pct", `${t}%`);
	}
};
function o(e, t, n) {
	return Number.isFinite(e) ? Math.max(t, Math.min(n, e)) : t;
}
//#endregion
export { a as RadiusSlider };

//# sourceMappingURL=radius-slider.js.map