@templatical/editor 0.21.0 → 0.21.2

package/dist/cdn/chunks/{ColorPicker-DCdWP8YB.js → ColorPicker-DZSzZ5ZP.js}

@@ -1,7 +1,11 @@
 import { M as e, P as t, T as n, V as r, Z as i, c as a, d as o, f as s, g as c, h as l, it as u, l as ee, m as te, n as ne, ot as d, p as f, st as p, u as re, x as m, y as h } from "./draggable-D840DIZB.js";
-import { Cn as ie, Gt as ae, U as oe, Ut as se, W as ce, Wt as g, Yt as le, dt as ue, rn as de, xn as fe, yn as pe } from "./features-pLfGJWIB.js";
+import { t as ie } from "./dist-CxTt8FRE.js";
+import { L as ae, l as oe, z as se } from "./keys-D7kUmfpE.js";
+import { t as ce } from "./useI18n-8Wd7G-cq.js";
+import { a as le, i as g, n as ue, r as de, t as fe } from "./usePopoverPosition-Bx0QewTv.js";
+import { n as pe } from "./icons-CYWw8Xfp.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)]", me = "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 +18,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 +27,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 +56,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) => ge(L(e)), L = (e) => (e[0] === "#" && (e = e.substring(1)), e.length < 6 ? {
+var F = (e) => ge(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) => he(me(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) => he(B(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}%)`;
-}, me = ({ h: e, s: t, v: n, a: r }) => {
+}, B = ({ 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 +91,7 @@ var I = (e) => ge(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 +99,7 @@ var I = (e) => ge(L(e)), L = (e) => (e[0] === "#" && (e = e.substring(1)), e.len
 			a,
 			a
 		][c] * 255),
-		b: F([
+		b: P([
 			a,
 			a,
 			s,
@@ -103,27 +107,27 @@ var I = (e) => ge(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) => {
 	let t = e.toString(16);
 	return t.length < 2 ? "0" + t : t;
 }, he = ({ r: e, g: t, b: n, a: r }) => {
-	let i = r < 1 ? V(F(r * 255)) : "";
+	let i = r < 1 ? V(P(r * 255)) : "";
 	return "#" + V(e) + V(t) + V(n) + i;
 }, ge = ({ 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) => {
 	if (e === t) return !0;
 	for (let n in e) if (e[n] !== t[n]) return !1;
 	return !0;
-}, U = (e, t) => e.toLowerCase() === t.toLowerCase() || H(L(e), L(t)), W = {}, G = (e) => {
+}, U = (e, t) => e.toLowerCase() === t.toLowerCase() || H(I(e), I(t)), W = {}, G = (e) => {
 	let t = W[e];
 	return t || (t = document.createElement("template"), t.innerHTML = e, W[e] = t), t;
 }, K = (e, t, n) => {
@@ -134,16 +138,16 @@ var I = (e) => ge(L(e)), L = (e) => (e[0] === "#" && (e = e.substring(1)), e.len
 }, q = !1, J = (e) => "touches" in e, _e = (e) => q && !J(e) ? !1 : (q ||= J(e), !0), Y = (e, t) => {
 	let n = J(t) ? t.touches[0] : t, r = e.el.getBoundingClientRect();
 	K(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)
+		x: N((n.pageX - (r.left + window.pageXOffset)) / r.width),
+		y: N((n.pageY - (r.top + window.pageYOffset)) / r.height)
 	}));
-}, X = (e, t) => {
+}, ve = (e, t) => {
 	let n = t.keyCode;
 	n > 40 || e.xy && n < 37 || n < 33 || (t.preventDefault(), K(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)));
-}, ve = class {
+}, X = class {
 	constructor(e, t, n, r) {
 		let i = G(`<div role="slider" tabindex="0" part="${t}" ${n}><div part="${t}-pointer"></div></div>`);
 		e.appendChild(i.content.cloneNode(!0));
@@ -170,7 +174,7 @@ var I = (e) => ge(L(e)), L = (e) => (e[0] === "#" && (e = e.substring(1)), e.len
 				this.dragging = !1;
 				break;
 			case "keydown":
-				X(this, e);
+				ve(this, e);
 				break;
 		}
 	}
@@ -179,25 +183,25 @@ var I = (e) => ge(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]);
 		});
 	}
-}, ye = class extends ve {
+}, ye = class extends X {
 	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 };
 	}
-}, be = class extends ve {
+}, be = class extends X {
 	constructor(e) {
 		super(e, "saturation", "aria-label=\"Color\"", !0);
 	}
@@ -205,18 +209,18 @@ var I = (e) => ge(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)
 		};
 	}
 }, xe = ":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)}", Se = "[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}", Ce = "[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}", Z = Symbol("same"), Q = Symbol("color"), we = Symbol("hsva"), $ = Symbol("update"), Te = Symbol("parts"), Ee = Symbol("css"), De = Symbol("sliders"), Oe = class extends HTMLElement {
@@ -274,8 +278,8 @@ var I = (e) => ge(L(e)), L = (e) => (e[0] === "#" && (e = e.substring(1)), e.len
 	}
 }, ke = {
 	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,
@@ -347,31 +351,31 @@ var je = [
 	},
 	emits: ["update:modelValue"],
 	setup(m, { emit: _ }) {
-		let v = m, y = _, { t: b } = le(), S = i(!1), C = i(), w = i(), T = i(!1);
-		ie(C, () => {
-			S.value = !1;
-		}, { ignore: [w] });
-		let E = s(() => !v.modelValue), D = s(() => g(v.modelValue)), O = s(() => g(v.modelValue || v.seedColor)), k = s(() => !v.disabled && !E.value), A = n(de, ae), j = s(() => [...new Set(v.presets ?? A.presets)]), M = s(() => v.allowCustom ?? A.allowCustom), N = s(() => j.value.length > 0), P = s(() => M.value || !N.value), F = s(() => se(v.modelValue));
-		function I(e) {
-			return F.value !== "" && se(e) === F.value;
+		let v = m, y = _, { t: b } = ce(), x = i(!1), S = i(), C = i(), w = i(!1);
+		ie(S, () => {
+			x.value = !1;
+		}, { ignore: [C] });
+		let T = s(() => !v.modelValue), E = s(() => g(v.modelValue)), D = s(() => g(v.modelValue || v.seedColor)), O = s(() => !v.disabled && !T.value), k = n(oe, le), A = s(() => [...new Set(v.presets ?? k.presets)]), j = s(() => v.allowCustom ?? k.allowCustom), M = s(() => A.value.length > 0), N = s(() => j.value || !M.value), P = s(() => de(v.modelValue));
+		function F(e) {
+			return P.value !== "" && de(e) === P.value;
 		}
-		function L(e) {
+		function I(e) {
 			y("update:modelValue", e);
 		}
-		let R = s(() => N.value && !P.value);
-		function z(e) {
-			return R.value ? e + 1 : e;
+		let L = s(() => M.value && !N.value);
+		function R(e) {
+			return L.value ? e + 1 : e;
 		}
-		let B = s(() => {
-			if (R.value && E.value) return 0;
-			let e = j.value.findIndex((e) => I(e));
-			return e === -1 ? 0 : z(e);
+		let z = s(() => {
+			if (L.value && T.value) return 0;
+			let e = A.value.findIndex((e) => F(e));
+			return e === -1 ? 0 : R(e);
 		});
-		function me() {
-			return B.value === 0 ? 0 : -1;
+		function B() {
+			return z.value === 0 ? 0 : -1;
 		}
 		function V(e) {
-			return z(e) === B.value ? 0 : -1;
+			return R(e) === z.value ? 0 : -1;
 		}
 		function he(e) {
 			if (![
@@ -384,13 +388,13 @@ var je = [
 			r !== -1 && (t[(r + (e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : -1) + t.length) % t.length]?.focus(), e.preventDefault());
 		}
 		function ge(e) {
-			T.value = !0, y("update:modelValue", e.detail.value);
+			w.value = !0, y("update:modelValue", e.detail.value);
 		}
 		function H() {
-			T.value = !1;
+			w.value = !1;
 		}
 		function U() {
-			!T.value && E.value && y("update:modelValue", O.value);
+			!w.value && T.value && y("update:modelValue", D.value);
 		}
 		function W(e) {
 			y("update:modelValue", e.target.value);
@@ -398,14 +402,14 @@ var je = [
 		function G() {
 			y("update:modelValue", "");
 		}
-		let K = ce(), { toLocal: q } = oe(), J = n(pe, null), _e = n(fe, null), Y = i({
+		let K = ue(), { toLocal: q } = fe(), J = n(ae, null), _e = n(se, null), Y = i({
 			top: 0,
 			left: 0
 		});
-		function X() {
+		function ve() {
 			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 ? e.bottom + 8 : Math.max(8, e.top - 240 - 8);
 						Y.value = q({
@@ -414,46 +418,46 @@ var je = [
 						});
 					}
 				}
-				S.value = !S.value;
+				x.value = !x.value;
 			}
 		}
 		return (n, i) => (e(), c("div", { class: d(["tpl:flex tpl:items-center tpl:gap-2 tpl:relative", m.disabled && "tpl:opacity-60 tpl:cursor-not-allowed"]) }, [
 			f("button", {
 				ref_key: "swatchRef",
-				ref: w,
+				ref: C,
 				type: "button",
 				disabled: m.disabled,
 				"aria-label": m.ariaLabel || u(b).colorPicker.pickColor,
 				title: m.ariaLabel || void 0,
-				"aria-expanded": S.value,
+				"aria-expanded": x.value,
 				class: d([
 					"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)]",
 					m.disabled ? "tpl:cursor-not-allowed" : "tpl:cursor-pointer",
-					S.value ? "tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]" : !m.disabled && "hover:tpl:border-[var(--tpl-text-dim)]",
+					x.value ? "tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]" : !m.disabled && "hover:tpl:border-[var(--tpl-text-dim)]",
 					m.size === "sm" ? "tpl:size-8" : "tpl:size-10"
 				]),
-				onClick: X
+				onClick: ve
 			}, [f("span", {
-				class: d(["tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]", { "tpl-color-swatch-empty": E.value }]),
-				style: p(E.value ? void 0 : { backgroundColor: D.value })
+				class: d(["tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]", { "tpl-color-swatch-empty": T.value }]),
+				style: p(T.value ? void 0 : { backgroundColor: E.value })
 			}, null, 6)], 10, je),
-			!m.swatchOnly && P.value ? (e(), c("div", Me, [f("input", {
+			!m.swatchOnly && N.value ? (e(), c("div", Me, [f("input", {
 				type: "text",
-				class: d([u(x), "tpl:w-full"]),
-				style: p(k.value ? { paddingRight: "2.25rem" } : void 0),
-				value: D.value,
+				class: d([u(me), "tpl:w-full"]),
+				style: p(O.value ? { paddingRight: "2.25rem" } : void 0),
+				value: E.value,
 				placeholder: m.placeholder || u(b).colorPicker.notSet,
 				disabled: m.disabled,
 				"aria-label": u(b).colorPicker.hexValue,
 				onInput: W
-			}, null, 46, Ne), k.value ? (e(), c("button", {
+			}, null, 46, Ne), O.value ? (e(), c("button", {
 				key: 0,
 				type: "button",
 				"aria-label": u(b).colorPicker.clear,
 				title: u(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: G
-			}, [h(u(ue), {
+			}, [h(u(pe), {
 				size: 14,
 				"stroke-width": 1.5
 			})], 8, Pe)) : l("", !0)])) : l("", !0),
@@ -468,10 +472,10 @@ var je = [
 				"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: r(() => [S.value ? (e(), c("div", {
+				default: r(() => [x.value ? (e(), c("div", {
 					key: 0,
 					ref_key: "popoverRef",
-					ref: C,
+					ref: S,
 					"data-tpl-theme": u(_e),
 					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: p({
@@ -480,61 +484,61 @@ var je = [
 						...u(J)
 					})
 				}, [
-					N.value ? (e(), c("div", {
+					M.value ? (e(), c("div", {
 						key: 0,
 						role: "radiogroup",
 						"aria-label": u(b).colorPicker.presetColors,
-						class: d(["tpl:flex tpl:flex-wrap tpl:gap-1.5", P.value && "tpl:mb-2"]),
+						class: d(["tpl:flex tpl:flex-wrap tpl:gap-1.5", N.value && "tpl:mb-2"]),
 						onKeydown: he
-					}, [R.value ? (e(), c("button", {
+					}, [L.value ? (e(), c("button", {
 						key: 0,
 						type: "button",
 						role: "radio",
 						"aria-label": u(b).colorPicker.clear,
 						title: u(b).colorPicker.clear,
-						"aria-checked": E.value,
-						tabindex: me(),
-						class: d(["tpl-color-swatch-empty tpl:size-6 tpl:shrink-0 tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:outline-none tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:focus-visible:ring-2 tpl:focus-visible:ring-[var(--tpl-primary)] tpl:focus-visible:ring-offset-1 tpl:focus-visible:ring-offset-[var(--tpl-bg-elevated)]", E.value ? "tpl:ring-2 tpl:ring-[var(--tpl-primary)] tpl:ring-offset-1 tpl:ring-offset-[var(--tpl-bg-elevated)]" : "hover:tpl:border-[var(--tpl-text-dim)]"]),
+						"aria-checked": T.value,
+						tabindex: B(),
+						class: d(["tpl-color-swatch-empty tpl:size-6 tpl:shrink-0 tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:outline-none tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:focus-visible:ring-2 tpl:focus-visible:ring-[var(--tpl-primary)] tpl:focus-visible:ring-offset-1 tpl:focus-visible:ring-offset-[var(--tpl-bg-elevated)]", T.value ? "tpl:ring-2 tpl:ring-[var(--tpl-primary)] tpl:ring-offset-1 tpl:ring-offset-[var(--tpl-bg-elevated)]" : "hover:tpl:border-[var(--tpl-text-dim)]"]),
 						onClick: G
-					}, null, 10, Le)) : l("", !0), (e(!0), c(re, null, t(j.value, (t, n) => (e(), c("button", {
+					}, null, 10, Le)) : l("", !0), (e(!0), c(re, null, t(A.value, (t, n) => (e(), c("button", {
 						key: t,
 						type: "button",
 						role: "radio",
 						"aria-label": t,
 						title: t,
-						"aria-checked": I(t),
+						"aria-checked": F(t),
 						tabindex: V(n),
 						style: p({ backgroundColor: t }),
-						class: d(["tpl:size-6 tpl:shrink-0 tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:outline-none tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:focus-visible:ring-2 tpl:focus-visible:ring-[var(--tpl-primary)] tpl:focus-visible:ring-offset-1 tpl:focus-visible:ring-offset-[var(--tpl-bg-elevated)]", I(t) ? "tpl:ring-2 tpl:ring-[var(--tpl-primary)] tpl:ring-offset-1 tpl:ring-offset-[var(--tpl-bg-elevated)]" : "hover:tpl:border-[var(--tpl-text-dim)]"]),
-						onClick: (e) => L(t)
+						class: d(["tpl:size-6 tpl:shrink-0 tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:outline-none tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:focus-visible:ring-2 tpl:focus-visible:ring-[var(--tpl-primary)] tpl:focus-visible:ring-offset-1 tpl:focus-visible:ring-offset-[var(--tpl-bg-elevated)]", F(t) ? "tpl:ring-2 tpl:ring-[var(--tpl-primary)] tpl:ring-offset-1 tpl:ring-offset-[var(--tpl-bg-elevated)]" : "hover:tpl:border-[var(--tpl-text-dim)]"]),
+						onClick: (e) => I(t)
 					}, null, 14, Re))), 128))], 42, Ie)) : l("", !0),
-					P.value ? (e(), c("hex-color-picker", {
+					N.value ? (e(), c("hex-color-picker", {
 						key: 1,
-						color: O.value,
+						color: D.value,
 						"aria-label": u(b).colorPicker.pickColor,
 						onColorChanged: ge,
 						onPointerdown: H,
 						onPointerup: U,
-						onKeydown: i[0] ||= a((e) => S.value = !1, ["escape"])
+						onKeydown: i[0] ||= a((e) => x.value = !1, ["escape"])
 					}, null, 40, ze)) : l("", !0),
-					m.swatchOnly && P.value ? (e(), c("div", Be, [f("input", {
+					m.swatchOnly && N.value ? (e(), c("div", Be, [f("input", {
 						type: "text",
-						class: d([u(x), "tpl:w-full"]),
-						style: p(k.value ? { paddingRight: "2.25rem" } : void 0),
-						value: D.value,
+						class: d([u(me), "tpl:w-full"]),
+						style: p(O.value ? { paddingRight: "2.25rem" } : void 0),
+						value: E.value,
 						placeholder: m.placeholder || u(b).colorPicker.notSet,
 						disabled: m.disabled,
 						"aria-label": u(b).colorPicker.hexValue,
 						onChange: W,
 						onKeydown: i[1] ||= a(ee((e) => e.target.blur(), ["prevent"]), ["enter"])
-					}, null, 46, Ve), k.value ? (e(), c("button", {
+					}, null, 46, Ve), O.value ? (e(), c("button", {
 						key: 0,
 						type: "button",
 						"aria-label": u(b).colorPicker.clear,
 						title: u(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: G
-					}, [h(u(ue), {
+					}, [h(u(pe), {
 						size: 14,
 						"stroke-width": 1.5
 					})], 8, He)) : l("", !0)])) : l("", !0)
@@ -545,6 +549,6 @@ var je = [
 	}
 });
 //#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, Ue 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, Ue as t, x as u };
 
-//# sourceMappingURL=ColorPicker-DCdWP8YB.js.map
+//# sourceMappingURL=ColorPicker-DZSzZ5ZP.js.map