import { FONT_STACKS as e, ensureGoogleFont as t, getTheme as n, setThemePartial as r } from "../../services/theme-engine/index.js";
//#region src/components/theme/font-stack-picker.ts
var i = class {
	el;
	constructor() {
		this.el = document.createElement("div"), this.el.className = "theme-studio-fonts", this.render(), document.addEventListener("cm:theme-change", () => this.updateActive());
	}
	render() {
		this.el.innerHTML = "";
		let i = n().font;
		for (let n of Object.keys(e)) {
			let a = e[n], o = document.createElement("button");
			o.type = "button", o.className = "theme-studio-font-tile", o.dataset.font = n, n === i && o.classList.add("is-active"), o.setAttribute("aria-pressed", String(n === i)), o.setAttribute("aria-label", `Use ${a.label} typeface`), o.style.fontFamily = a.display;
			let s = document.createElement("div");
			s.className = "theme-studio-font-tile__name", s.textContent = a.label, o.appendChild(s);
			let c = document.createElement("div");
			c.className = "theme-studio-font-tile__sample", c.textContent = a.sample, o.appendChild(c);
			let l = document.createElement("div");
			l.className = "theme-studio-font-tile__desc", l.textContent = a.description, o.appendChild(l), o.addEventListener("mouseenter", () => t(a.google), { once: !0 }), o.addEventListener("focus", () => t(a.google), { once: !0 }), o.addEventListener("click", () => r({ font: n })), this.el.appendChild(o);
		}
	}
	updateActive() {
		let e = n().font, t = this.el.querySelectorAll(".theme-studio-font-tile");
		for (let n of t) {
			let t = n.dataset.font === e;
			n.classList.toggle("is-active", t), n.setAttribute("aria-pressed", String(t));
		}
	}
};
//#endregion
export { i as FontStackPicker };

//# sourceMappingURL=font-stack-picker.js.map