import { getTheme as e, setThemePartial as t } from "../../services/theme-engine/index.js";
//#region src/components/theme/density-switcher.ts
var n = [
	{
		id: "compact",
		label: "Compact",
		px: 32
	},
	{
		id: "comfortable",
		label: "Comfortable",
		px: 36
	},
	{
		id: "cozy",
		label: "Cozy",
		px: 42
	}
], r = class {
	el;
	constructor() {
		this.el = document.createElement("div"), this.el.className = "preview-density-switcher";
		let e = document.createElement("span");
		e.className = "preview-density-switcher__label", e.textContent = "Density", this.el.appendChild(e);
		let r = document.createElement("div");
		r.className = "preview-density-switcher__buttons";
		for (let e of n) {
			let n = document.createElement("button");
			n.type = "button", n.className = "preview-density-switcher__btn", n.dataset.density = e.id, n.textContent = e.label, n.title = `${e.label} (${e.px}px)`, n.setAttribute("aria-label", `Use ${e.label} density`), n.addEventListener("click", () => {
				t({ density: e.id });
			}), r.appendChild(n);
		}
		this.el.appendChild(r), document.addEventListener("cm:theme-change", () => this.updateActive()), this.updateActive();
	}
	updateActive() {
		let t = e().density, n = this.el.querySelectorAll(".preview-density-switcher__btn");
		for (let e of n) {
			let n = e.dataset.density === t;
			e.classList.toggle("preview-density-switcher__btn--active", n), e.setAttribute("aria-pressed", String(n));
		}
	}
};
//#endregion
export { r as DensitySwitcher };

//# sourceMappingURL=density-switcher.js.map