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

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