@templatical/editor 0.16.4 → 0.17.0

package/dist/cdn/chunks/{ColorPicker-DLEoT419.js → ColorPicker-CPMWLHpa.js}

@@ -1,7 +1,7 @@
 import { M as e, T as t, V as n, Z as r, c as i, d as a, f as o, g as s, h as c, it as l, l as ee, m as te, n as ne, ot as u, p as d, st as f, x as p, y as m } from "./draggable-D840DIZB.js";
-import { Q as h, cn as re, fn as ie, k as ae, lt as g, un as oe, zt as se } from "./features-Bo7H8WNI.js";
+import { $ as h, Bt as re, H as ie, V as ae, dn as oe, ln as se, pn as ce, ut as g } from "./features-B3qgDBHf.js";
 //#region src/constants/styleConstants.ts
-var _ = "tpl:block tpl:mb-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]", v = "tpl:w-full tpl:h-10 tpl:px-3.5 tpl:py-1.5 tpl:text-sm tpl:border tpl:rounded-[var(--tpl-radius-sm)] tpl:shadow-xs tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:outline-none focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)] placeholder:tpl:text-[var(--tpl-text-dim)]", y = "tpl:w-full tpl:h-10 tpl:px-3.5 tpl:py-1.5 tpl:text-sm tpl:border tpl:rounded-l-[var(--tpl-radius-sm)] tpl:rounded-r-none tpl:border-r-0 tpl:shadow-xs tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:outline-none focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)] placeholder:tpl:text-[var(--tpl-text-dim)]", b = "tpl:flex tpl:items-center tpl:px-2.5 tpl:text-xs tpl:border tpl:border-l-0 tpl:text-[var(--tpl-text-dim)] tpl:bg-[var(--tpl-bg-hover)] tpl:border-[var(--tpl-border)] tpl:rounded-r-[var(--tpl-radius-sm)]", x = "tpl:flex-1 tpl:h-10 tpl:px-3.5 tpl:py-1.5 tpl:text-xs tpl:font-mono tpl:border tpl:rounded-[var(--tpl-radius-sm)] tpl:shadow-xs tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:outline-none focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)]", S = "tpl:rounded-[var(--tpl-radius)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-4 tpl:border tpl:border-[var(--tpl-border)] tpl:transition-colors tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:bg-[var(--tpl-bg-hover)]", C = "tpl:flex tpl:size-8 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:border-[var(--tpl-danger)] tpl:hover:bg-[var(--tpl-danger-light)] tpl:hover:text-[var(--tpl-danger)]", w = "tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:border-dashed tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:border-[var(--tpl-primary)] tpl:hover:text-[var(--tpl-primary)]", T = "tpl:w-full tpl:resize-y tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-2.5 tpl:py-2 tpl:font-mono tpl:text-xs tpl:text-[var(--tpl-text)] tpl:outline-none tpl:transition-all tpl:duration-150 tpl:placeholder:text-[var(--tpl-text-dim)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[0_0_0_3px_var(--tpl-primary-light)]", E = "tpl-btn tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3.5 tpl:py-2 tpl:text-sm tpl:font-medium tpl:whitespace-nowrap tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:bg-[var(--tpl-primary)] hover:tpl:text-[var(--tpl-bg)] tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50", D = [
+var _ = "tpl:block tpl:mb-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]", v = "tpl:w-full tpl:h-10 tpl:px-3.5 tpl:py-1.5 tpl:text-sm tpl:border tpl:rounded-[var(--tpl-radius-sm)] tpl:shadow-xs tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:outline-none focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)] placeholder:tpl:text-[var(--tpl-text-dim)]", y = "tpl:w-full tpl:h-10 tpl:px-3.5 tpl:py-1.5 tpl:text-sm tpl:border tpl:rounded-l-[var(--tpl-radius-sm)] tpl:rounded-r-none tpl:border-r-0 tpl:shadow-xs tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:outline-none focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)] placeholder:tpl:text-[var(--tpl-text-dim)]", b = "tpl:flex tpl:items-center tpl:px-2.5 tpl:text-xs tpl:border tpl:border-l-0 tpl:text-[var(--tpl-text-dim)] tpl:bg-[var(--tpl-bg-hover)] tpl:border-[var(--tpl-border)] tpl:rounded-r-[var(--tpl-radius-sm)]", le = "tpl:flex-1 tpl:h-10 tpl:px-3.5 tpl:py-1.5 tpl:text-xs tpl:font-mono tpl:border tpl:rounded-[var(--tpl-radius-sm)] tpl:shadow-xs tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:outline-none focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)]", x = "tpl:rounded-[var(--tpl-radius)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-4 tpl:border tpl:border-[var(--tpl-border)] tpl:transition-colors tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:bg-[var(--tpl-bg-hover)]", S = "tpl:flex tpl:size-8 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:border-[var(--tpl-danger)] tpl:hover:bg-[var(--tpl-danger-light)] tpl:hover:text-[var(--tpl-danger)]", C = "tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:border-dashed tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:border-[var(--tpl-primary)] tpl:hover:text-[var(--tpl-primary)]", w = "tpl:w-full tpl:resize-y tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-2.5 tpl:py-2 tpl:font-mono tpl:text-xs tpl:text-[var(--tpl-text)] tpl:outline-none tpl:transition-all tpl:duration-150 tpl:placeholder:text-[var(--tpl-text-dim)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[0_0_0_3px_var(--tpl-primary-light)]", T = "tpl-btn tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3.5 tpl:py-2 tpl:text-sm tpl:font-medium tpl:whitespace-nowrap tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:bg-[var(--tpl-primary)] hover:tpl:text-[var(--tpl-bg)] tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50", E = [
 	"10px",
 	"12px",
 	"14px",
@@ -14,7 +14,7 @@ var _ = "tpl:block tpl:mb-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-te
 	"36px",
 	"48px",
 	"64px"
-], O = [
+], D = [
 	"1",
 	"1.2",
 	"1.4",
@@ -23,7 +23,7 @@ var _ = "tpl:block tpl:mb-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-te
 	"1.8",
 	"2",
 	"2.5"
-], k = [
+], O = [
 	{
 		label: "Normal",
 		value: "normal"
@@ -52,34 +52,34 @@ var _ = "tpl:block tpl:mb-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-te
 		label: "3px",
 		value: "3px"
 	}
-], A = "#000000", j = "#ffffff", M = "#ffff00", N = "#f2f2f2", P = (e, t = 0, n = 1) => e > n ? n : e < t ? t : e, F = (e, t = 0, n = 10 ** t) => Math.round(n * e) / n;
+], k = "#000000", A = "#ffffff", j = "#ffff00", M = "#f2f2f2", N = (e, t = 0, n = 1) => e > n ? n : e < t ? t : e, P = (e, t = 0, n = 10 ** t) => Math.round(n * e) / n;
 360 / (Math.PI * 2);
-var I = (e) => ue(L(e)), L = (e) => (e[0] === "#" && (e = e.substring(1)), e.length < 6 ? {
+var F = (e) => fe(I(e)), I = (e) => (e[0] === "#" && (e = e.substring(1)), e.length < 6 ? {
 	r: parseInt(e[0] + e[0], 16),
 	g: parseInt(e[1] + e[1], 16),
 	b: parseInt(e[2] + e[2], 16),
-	a: e.length === 4 ? F(parseInt(e[3] + e[3], 16) / 255, 2) : 1
+	a: e.length === 4 ? P(parseInt(e[3] + e[3], 16) / 255, 2) : 1
 } : {
 	r: parseInt(e.substring(0, 2), 16),
 	g: parseInt(e.substring(2, 4), 16),
 	b: parseInt(e.substring(4, 6), 16),
-	a: e.length === 8 ? F(parseInt(e.substring(6, 8), 16) / 255, 2) : 1
-}), R = (e) => le(ce(e)), z = ({ h: e, s: t, v: n, a: r }) => {
+	a: e.length === 8 ? P(parseInt(e.substring(6, 8), 16) / 255, 2) : 1
+}), L = (e) => de(ue(e)), R = ({ h: e, s: t, v: n, a: r }) => {
 	let i = (200 - t) * n / 100;
 	return {
-		h: F(e),
-		s: F(i > 0 && i < 200 ? t * n / 100 / (i <= 100 ? i : 200 - i) * 100 : 0),
-		l: F(i / 2),
-		a: F(r, 2)
+		h: P(e),
+		s: P(i > 0 && i < 200 ? t * n / 100 / (i <= 100 ? i : 200 - i) * 100 : 0),
+		l: P(i / 2),
+		a: P(r, 2)
 	};
-}, B = (e) => {
-	let { h: t, s: n, l: r } = z(e);
+}, z = (e) => {
+	let { h: t, s: n, l: r } = R(e);
 	return `hsl(${t}, ${n}%, ${r}%)`;
-}, ce = ({ h: e, s: t, v: n, a: r }) => {
+}, ue = ({ h: e, s: t, v: n, a: r }) => {
 	e = e / 360 * 6, t /= 100, n /= 100;
 	let i = Math.floor(e), a = n * (1 - t), o = n * (1 - (e - i) * t), s = n * (1 - (1 - e + i) * t), c = i % 6;
 	return {
-		r: F([
+		r: P([
 			n,
 			o,
 			a,
@@ -87,7 +87,7 @@ var I = (e) => ue(L(e)), L = (e) => (e[0] === "#" && (e = e.substring(1)), e.len
 			s,
 			n
 		][c] * 255),
-		g: F([
+		g: P([
 			s,
 			n,
 			n,
@@ -95,7 +95,7 @@ var I = (e) => ue(L(e)), L = (e) => (e[0] === "#" && (e = e.substring(1)), e.len
 			a,
 			a
 		][c] * 255),
-		b: F([
+		b: P([
 			a,
 			a,
 			s,
@@ -103,74 +103,74 @@ var I = (e) => ue(L(e)), L = (e) => (e[0] === "#" && (e = e.substring(1)), e.len
 			n,
 			o
 		][c] * 255),
-		a: F(r, 2)
+		a: P(r, 2)
 	};
-}, V = (e) => {
+}, B = (e) => {
 	let t = e.toString(16);
 	return t.length < 2 ? "0" + t : t;
-}, le = ({ r: e, g: t, b: n, a: r }) => {
-	let i = r < 1 ? V(F(r * 255)) : "";
-	return "#" + V(e) + V(t) + V(n) + i;
-}, ue = ({ r: e, g: t, b: n, a: r }) => {
+}, de = ({ r: e, g: t, b: n, a: r }) => {
+	let i = r < 1 ? B(P(r * 255)) : "";
+	return "#" + B(e) + B(t) + B(n) + i;
+}, fe = ({ r: e, g: t, b: n, a: r }) => {
 	let i = Math.max(e, t, n), a = i - Math.min(e, t, n), o = a ? i === e ? (t - n) / a : i === t ? 2 + (n - e) / a : 4 + (e - t) / a : 0;
 	return {
-		h: F(60 * (o < 0 ? o + 6 : o)),
-		s: F(i ? a / i * 100 : 0),
-		v: F(i / 255 * 100),
+		h: P(60 * (o < 0 ? o + 6 : o)),
+		s: P(i ? a / i * 100 : 0),
+		v: P(i / 255 * 100),
 		a: r
 	};
-}, H = (e, t) => {
+}, V = (e, t) => {
 	if (e === t) return !0;
 	for (let n in e) if (e[n] !== t[n]) return !1;
 	return !0;
-}, de = (e, t) => e.toLowerCase() === t.toLowerCase() || H(L(e), L(t)), U = {}, W = (e) => {
-	let t = U[e];
-	return t || (t = document.createElement("template"), t.innerHTML = e, U[e] = t), t;
-}, G = (e, t, n) => {
+}, pe = (e, t) => e.toLowerCase() === t.toLowerCase() || V(I(e), I(t)), H = {}, U = (e) => {
+	let t = H[e];
+	return t || (t = document.createElement("template"), t.innerHTML = e, H[e] = t), t;
+}, W = (e, t, n) => {
 	e.dispatchEvent(new CustomEvent(t, {
 		bubbles: !0,
 		detail: n
 	}));
-}, K = !1, q = (e) => "touches" in e, fe = (e) => K && !q(e) ? !1 : (K ||= q(e), !0), J = (e, t) => {
-	let n = q(t) ? t.touches[0] : t, r = e.el.getBoundingClientRect();
-	G(e.el, "move", e.getMove({
-		x: P((n.pageX - (r.left + window.pageXOffset)) / r.width),
-		y: P((n.pageY - (r.top + window.pageYOffset)) / r.height)
+}, G = !1, K = (e) => "touches" in e, me = (e) => G && !K(e) ? !1 : (G ||= K(e), !0), q = (e, t) => {
+	let n = K(t) ? t.touches[0] : t, r = e.el.getBoundingClientRect();
+	W(e.el, "move", e.getMove({
+		x: N((n.pageX - (r.left + window.pageXOffset)) / r.width),
+		y: N((n.pageY - (r.top + window.pageYOffset)) / r.height)
 	}));
-}, pe = (e, t) => {
+}, he = (e, t) => {
 	let n = t.keyCode;
-	n > 40 || e.xy && n < 37 || n < 33 || (t.preventDefault(), G(e.el, "move", e.getMove({
+	n > 40 || e.xy && n < 37 || n < 33 || (t.preventDefault(), W(e.el, "move", e.getMove({
 		x: n === 39 ? .01 : n === 37 ? -.01 : n === 34 ? .05 : n === 33 ? -.05 : n === 35 ? 1 : n === 36 ? -1 : 0,
 		y: n === 40 ? .01 : n === 38 ? -.01 : 0
 	}, !0)));
-}, Y = class {
+}, J = class {
 	constructor(e, t, n, r) {
-		let i = W(`<div role="slider" tabindex="0" part="${t}" ${n}><div part="${t}-pointer"></div></div>`);
+		let i = U(`<div role="slider" tabindex="0" part="${t}" ${n}><div part="${t}-pointer"></div></div>`);
 		e.appendChild(i.content.cloneNode(!0));
 		let a = e.querySelector(`[part=${t}]`);
 		a.addEventListener("mousedown", this), a.addEventListener("touchstart", this), a.addEventListener("keydown", this), this.el = a, this.xy = r, this.nodes = [a.firstChild, a];
 	}
 	set dragging(e) {
 		let t = e ? document.addEventListener : document.removeEventListener;
-		t(K ? "touchmove" : "mousemove", this), t(K ? "touchend" : "mouseup", this);
+		t(G ? "touchmove" : "mousemove", this), t(G ? "touchend" : "mouseup", this);
 	}
 	handleEvent(e) {
 		switch (e.type) {
 			case "mousedown":
 			case "touchstart":
-				if (e.preventDefault(), !fe(e) || !K && e.button != 0) return;
-				this.el.focus(), J(this, e), this.dragging = !0;
+				if (e.preventDefault(), !me(e) || !G && e.button != 0) return;
+				this.el.focus(), q(this, e), this.dragging = !0;
 				break;
 			case "mousemove":
 			case "touchmove":
-				e.preventDefault(), J(this, e);
+				e.preventDefault(), q(this, e);
 				break;
 			case "mouseup":
 			case "touchend":
 				this.dragging = !1;
 				break;
 			case "keydown":
-				pe(this, e);
+				he(this, e);
 				break;
 		}
 	}
@@ -179,25 +179,25 @@ var I = (e) => ue(L(e)), L = (e) => (e[0] === "#" && (e = e.substring(1)), e.len
 			for (let n in e) this.nodes[t].style.setProperty(n, e[n]);
 		});
 	}
-}, me = class extends Y {
+}, ge = class extends J {
 	constructor(e) {
 		super(e, "hue", "aria-label=\"Hue\" aria-valuemin=\"0\" aria-valuemax=\"360\"", !1);
 	}
 	update({ h: e }) {
 		this.h = e, this.style([{
 			left: `${e / 360 * 100}%`,
-			color: B({
+			color: z({
 				h: e,
 				s: 100,
 				v: 100,
 				a: 1
 			})
-		}]), this.el.setAttribute("aria-valuenow", `${F(e)}`);
+		}]), this.el.setAttribute("aria-valuenow", `${P(e)}`);
 	}
 	getMove(e, t) {
-		return { h: t ? P(this.h + e.x * 360, 0, 360) : 360 * e.x };
+		return { h: t ? N(this.h + e.x * 360, 0, 360) : 360 * e.x };
 	}
-}, he = class extends Y {
+}, _e = class extends J {
 	constructor(e) {
 		super(e, "saturation", "aria-label=\"Color\"", !0);
 	}
@@ -205,47 +205,47 @@ var I = (e) => ue(L(e)), L = (e) => (e[0] === "#" && (e = e.substring(1)), e.len
 		this.hsva = e, this.style([{
 			top: `${100 - e.v}%`,
 			left: `${e.s}%`,
-			color: B(e)
-		}, { "background-color": B({
+			color: z(e)
+		}, { "background-color": z({
 			h: e.h,
 			s: 100,
 			v: 100,
 			a: 1
-		}) }]), this.el.setAttribute("aria-valuetext", `Saturation ${F(e.s)}%, Brightness ${F(e.v)}%`);
+		}) }]), this.el.setAttribute("aria-valuetext", `Saturation ${P(e.s)}%, Brightness ${P(e.v)}%`);
 	}
 	getMove(e, t) {
 		return {
-			s: t ? P(this.hsva.s + e.x * 100, 0, 100) : e.x * 100,
-			v: t ? P(this.hsva.v - e.y * 100, 0, 100) : Math.round(100 - e.y * 100)
+			s: t ? N(this.hsva.s + e.x * 100, 0, 100) : e.x * 100,
+			v: t ? N(this.hsva.v - e.y * 100, 0, 100) : Math.round(100 - e.y * 100)
 		};
 	}
-}, ge = ":host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:\"\";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}", _e = "[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}", ve = "[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}", X = Symbol("same"), Z = Symbol("color"), Q = Symbol("hsva"), $ = Symbol("update"), ye = Symbol("parts"), be = Symbol("css"), xe = Symbol("sliders"), Se = class extends HTMLElement {
+}, ve = ":host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:\"\";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}", ye = "[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}", be = "[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}", Y = Symbol("same"), X = Symbol("color"), Z = Symbol("hsva"), Q = Symbol("update"), xe = Symbol("parts"), Se = Symbol("css"), $ = Symbol("sliders"), Ce = class extends HTMLElement {
 	static get observedAttributes() {
 		return ["color"];
 	}
-	get [be]() {
+	get [Se]() {
 		return [
-			ge,
-			_e,
-			ve
+			ve,
+			ye,
+			be
 		];
 	}
-	get [xe]() {
-		return [he, me];
+	get [$]() {
+		return [_e, ge];
 	}
 	get color() {
-		return this[Z];
+		return this[X];
 	}
 	set color(e) {
-		if (!this[X](e)) {
+		if (!this[Y](e)) {
 			let t = this.colorModel.toHsva(e);
-			this[$](t), this[Z] = e;
+			this[Q](t), this[X] = e;
 		}
 	}
 	constructor() {
 		super();
-		let e = W(`<style>${this[be].join("")}</style>`), t = this.attachShadow({ mode: "open" });
-		t.appendChild(e.content.cloneNode(!0)), t.addEventListener("move", this), this[ye] = this[xe].map((e) => new e(t));
+		let e = U(`<style>${this[Se].join("")}</style>`), t = this.attachShadow({ mode: "open" });
+		t.appendChild(e.content.cloneNode(!0)), t.addEventListener("move", this), this[xe] = this[$].map((e) => new e(t));
 	}
 	connectedCallback() {
 		if (this.hasOwnProperty("color")) {
@@ -255,64 +255,64 @@ var I = (e) => ue(L(e)), L = (e) => (e[0] === "#" && (e = e.substring(1)), e.len
 	}
 	attributeChangedCallback(e, t, n) {
 		let r = this.colorModel.fromAttr(n);
-		this[X](r) || (this.color = r);
+		this[Y](r) || (this.color = r);
 	}
 	handleEvent(e) {
-		let t = this[Q], n = {
+		let t = this[Z], n = {
 			...t,
 			...e.detail
 		};
-		this[$](n);
+		this[Q](n);
 		let r;
-		!H(n, t) && !this[X](r = this.colorModel.fromHsva(n)) && (this[Z] = r, G(this, "color-changed", { value: r }));
+		!V(n, t) && !this[Y](r = this.colorModel.fromHsva(n)) && (this[X] = r, W(this, "color-changed", { value: r }));
 	}
-	[X](e) {
+	[Y](e) {
 		return this.color && this.colorModel.equal(e, this.color);
 	}
-	[$](e) {
-		this[Q] = e, this[ye].forEach((t) => t.update(e));
+	[Q](e) {
+		this[Z] = e, this[xe].forEach((t) => t.update(e));
 	}
-}, Ce = {
+}, we = {
 	defaultColor: "#000",
-	toHsva: I,
-	fromHsva: ({ h: e, s: t, v: n }) => R({
+	toHsva: F,
+	fromHsva: ({ h: e, s: t, v: n }) => L({
 		h: e,
 		s: t,
 		v: n,
 		a: 1
 	}),
-	equal: de,
+	equal: pe,
 	fromAttr: (e) => e
-}, we = class extends Se {
+}, Te = class extends Ce {
 	get colorModel() {
-		return Ce;
+		return we;
 	}
 };
-customElements.define("hex-color-picker", class extends we {});
+customElements.define("hex-color-picker", class extends Te {});
 //#endregion
 //#region src/components/ColorPicker.vue?vue&type=script&setup=true&lang.ts
-var Te = [
+var Ee = [
 	"disabled",
 	"aria-label",
 	"title",
 	"aria-expanded"
-], Ee = {
+], De = {
 	key: 0,
 	class: "tpl:relative tpl:flex-1"
-}, De = [
+}, Oe = [
 	"value",
 	"placeholder",
 	"disabled",
 	"aria-label"
-], Oe = ["aria-label", "title"], ke = ["data-tpl-theme"], Ae = ["color", "aria-label"], je = {
+], ke = ["aria-label", "title"], Ae = ["data-tpl-theme"], je = ["color", "aria-label"], Me = {
 	key: 0,
 	class: "tpl:relative tpl:mt-2"
-}, Me = [
+}, Ne = [
 	"value",
 	"placeholder",
 	"disabled",
 	"aria-label"
-], Ne = ["aria-label", "title"], Pe = /* @__PURE__ */ p({
+], Pe = ["aria-label", "title"], Fe = /* @__PURE__ */ p({
 	__name: "ColorPicker",
 	props: {
 		modelValue: {},
@@ -331,88 +331,88 @@ var Te = [
 	},
 	emits: ["update:modelValue"],
 	setup(p, { emit: _ }) {
-		let v = p, y = _, { t: b } = se(), S = r(!1), C = r(), w = r(), T = r(!1);
-		ie(C, () => {
-			S.value = !1;
-		}, { ignore: [w] });
-		let E = o(() => !v.modelValue), D = o(() => h(v.modelValue)), O = o(() => h(v.modelValue || v.seedColor)), k = o(() => !v.disabled && !E.value);
-		function A(e) {
-			T.value = !0, y("update:modelValue", e.detail.value);
+		let v = p, y = _, { t: b } = re(), x = r(!1), S = r(), C = r(), w = r(!1);
+		ce(S, () => {
+			x.value = !1;
+		}, { ignore: [C] });
+		let T = o(() => !v.modelValue), E = o(() => h(v.modelValue)), D = o(() => h(v.modelValue || v.seedColor)), O = o(() => !v.disabled && !T.value);
+		function k(e) {
+			w.value = !0, y("update:modelValue", e.detail.value);
 		}
-		function j() {
-			T.value = !1;
+		function A() {
+			w.value = !1;
 		}
-		function M() {
-			!T.value && E.value && y("update:modelValue", O.value);
+		function j() {
+			!w.value && T.value && y("update:modelValue", D.value);
 		}
-		function N(e) {
+		function M(e) {
 			y("update:modelValue", e.target.value);
 		}
-		function P() {
+		function N() {
 			y("update:modelValue", "");
 		}
-		let F = ae(), I = t(re, null), L = t(oe, null), R = r({
+		let P = ie(), { toLocal: F } = ae(), I = t(se, null), L = t(oe, null), R = r({
 			top: 0,
 			left: 0
 		});
 		function z() {
 			if (!v.disabled) {
-				if (!S.value) {
-					let e = w.value?.getBoundingClientRect();
+				if (!x.value) {
+					let e = C.value?.getBoundingClientRect();
 					if (e) {
-						let t = e.bottom + 8 + 240 <= window.innerHeight;
-						R.value = {
-							top: t ? e.bottom + 8 : Math.max(8, e.top - 240 - 8),
+						let t = e.bottom + 8 + 240 <= window.innerHeight ? e.bottom + 8 : Math.max(8, e.top - 240 - 8);
+						R.value = F({
+							top: t,
 							left: e.left
-						};
+						});
 					}
 				}
-				S.value = !S.value;
+				x.value = !x.value;
 			}
 		}
 		return (t, r) => (e(), s("div", { class: u(["tpl:flex tpl:items-center tpl:gap-2 tpl:relative", p.disabled && "tpl:opacity-60 tpl:cursor-not-allowed"]) }, [
 			d("button", {
 				ref_key: "swatchRef",
-				ref: w,
+				ref: C,
 				type: "button",
 				disabled: p.disabled,
 				"aria-label": p.ariaLabel || l(b).colorPicker.pickColor,
 				title: p.ariaLabel || void 0,
-				"aria-expanded": S.value,
+				"aria-expanded": x.value,
 				class: u([
 					"tpl:shrink-0 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-0.5 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
 					p.disabled ? "tpl:cursor-not-allowed" : "tpl:cursor-pointer",
-					S.value ? "tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]" : !p.disabled && "hover:tpl:border-[var(--tpl-text-dim)]",
+					x.value ? "tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]" : !p.disabled && "hover:tpl:border-[var(--tpl-text-dim)]",
 					p.size === "sm" ? "tpl:size-8" : "tpl:size-10"
 				]),
 				onClick: z
 			}, [d("span", {
-				class: u(["tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]", { "tpl-color-swatch-empty": E.value }]),
-				style: f(E.value ? void 0 : { backgroundColor: D.value })
-			}, null, 6)], 10, Te),
-			p.swatchOnly ? c("", !0) : (e(), s("div", Ee, [d("input", {
+				class: u(["tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]", { "tpl-color-swatch-empty": T.value }]),
+				style: f(T.value ? void 0 : { backgroundColor: E.value })
+			}, null, 6)], 10, Ee),
+			p.swatchOnly ? c("", !0) : (e(), s("div", De, [d("input", {
 				type: "text",
-				class: u([l(x), "tpl:w-full"]),
-				style: f(k.value ? { paddingRight: "2.25rem" } : void 0),
-				value: D.value,
+				class: u([l(le), "tpl:w-full"]),
+				style: f(O.value ? { paddingRight: "2.25rem" } : void 0),
+				value: E.value,
 				placeholder: p.placeholder || l(b).colorPicker.notSet,
 				disabled: p.disabled,
 				"aria-label": l(b).colorPicker.hexValue,
-				onInput: N
-			}, null, 46, De), k.value ? (e(), s("button", {
+				onInput: M
+			}, null, 46, Oe), O.value ? (e(), s("button", {
 				key: 0,
 				type: "button",
 				"aria-label": l(b).colorPicker.clear,
 				title: l(b).colorPicker.clear,
 				class: "tpl:absolute tpl:right-2 tpl:top-1/2 tpl:flex tpl:size-6 tpl:-translate-y-1/2 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:text-[var(--tpl-text-dim)] tpl:transition-colors tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:bg-[var(--tpl-bg-hover)] hover:tpl:text-[var(--tpl-text)]",
-				onClick: P
+				onClick: N
 			}, [m(l(g), {
 				size: 14,
 				"stroke-width": 1.5
-			})], 8, Oe)) : c("", !0)])),
+			})], 8, ke)) : c("", !0)])),
 			(e(), te(a, {
-				to: l(F),
-				disabled: !l(F)
+				to: l(P),
+				disabled: !l(P)
 			}, [m(ne, {
 				"enter-active-class": "tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
 				"enter-from-class": "tpl:opacity-0 tpl:scale-95 tpl:translate-y-1",
@@ -421,51 +421,51 @@ var Te = [
 				"leave-from-class": "tpl:opacity-100 tpl:scale-100 tpl:translate-y-0",
 				"leave-to-class": "tpl:opacity-0 tpl:scale-95 tpl:translate-y-1"
 			}, {
-				default: n(() => [S.value ? (e(), s("div", {
+				default: n(() => [x.value ? (e(), s("div", {
 					key: 0,
 					ref_key: "popoverRef",
-					ref: C,
+					ref: S,
 					"data-tpl-theme": l(L),
-					class: "tpl-color-popover tpl:fixed tpl:z-modal tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-3 tpl:shadow-lg",
+					class: "tpl-color-popover tpl:absolute tpl:z-modal tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-3 tpl:shadow-lg",
 					style: f({
 						top: `${R.value.top}px`,
 						left: `${R.value.left}px`,
 						...l(I)
 					})
 				}, [d("hex-color-picker", {
-					color: O.value,
+					color: D.value,
 					"aria-label": l(b).colorPicker.pickColor,
-					onColorChanged: A,
-					onPointerdown: j,
-					onPointerup: M,
-					onKeydown: r[0] ||= i((e) => S.value = !1, ["escape"])
-				}, null, 40, Ae), p.swatchOnly ? (e(), s("div", je, [d("input", {
+					onColorChanged: k,
+					onPointerdown: A,
+					onPointerup: j,
+					onKeydown: r[0] ||= i((e) => x.value = !1, ["escape"])
+				}, null, 40, je), p.swatchOnly ? (e(), s("div", Me, [d("input", {
 					type: "text",
-					class: u([l(x), "tpl:w-full"]),
-					style: f(k.value ? { paddingRight: "2.25rem" } : void 0),
-					value: D.value,
+					class: u([l(le), "tpl:w-full"]),
+					style: f(O.value ? { paddingRight: "2.25rem" } : void 0),
+					value: E.value,
 					placeholder: p.placeholder || l(b).colorPicker.notSet,
 					disabled: p.disabled,
 					"aria-label": l(b).colorPicker.hexValue,
-					onChange: N,
+					onChange: M,
 					onKeydown: r[1] ||= i(ee((e) => e.target.blur(), ["prevent"]), ["enter"])
-				}, null, 46, Me), k.value ? (e(), s("button", {
+				}, null, 46, Ne), O.value ? (e(), s("button", {
 					key: 0,
 					type: "button",
 					"aria-label": l(b).colorPicker.clear,
 					title: l(b).colorPicker.clear,
 					class: "tpl:absolute tpl:right-2 tpl:top-1/2 tpl:flex tpl:size-6 tpl:-translate-y-1/2 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:text-[var(--tpl-text-dim)] tpl:transition-colors tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:bg-[var(--tpl-bg-hover)] hover:tpl:text-[var(--tpl-text)]",
-					onClick: P
+					onClick: N
 				}, [m(l(g), {
 					size: 14,
 					"stroke-width": 1.5
-				})], 8, Ne)) : c("", !0)])) : c("", !0)], 12, ke)) : c("", !0)]),
+				})], 8, Pe)) : c("", !0)])) : c("", !0)], 12, Ae)) : c("", !0)]),
 				_: 1
 			})], 8, ["to", "disabled"]))
 		], 2));
 	}
 });
 //#endregion
-export { C as _, A as a, O as c, E as d, v as f, T as g, _ as h, N as i, w as l, b as m, j as n, D as o, y as p, M as r, k as s, Pe as t, S as u };
+export { S as _, k as a, D as c, T as d, v as f, w as g, _ as h, M as i, C as l, b as m, A as n, E as o, y as p, j as r, O as s, Fe as t, x as u };
 
-//# sourceMappingURL=ColorPicker-DLEoT419.js.map
+//# sourceMappingURL=ColorPicker-CPMWLHpa.js.map