@templatical/editor 0.34.3 → 0.36.0

package/dist/{ColorPicker-C6EOwtHC.js → ColorPicker-BqlZ_TqG.js}

@@ -1,40 +1,40 @@
-import { Dt as e, Ot as t, S as n, X as r, c as i, d as a, g as o, i as s, j as c, k as l, l as ee, r as te, rt as u, s as d, u as f, v as p, z as ne } from "./vue.runtime.esm-bundler-D9JUcKrV.js";
-import { c as re, s as m, t as ie } from "./runtime-dom.esm-bundler-BuG03jBM.js";
-import { t as ae } from "./dist-dNiknO7j.js";
-import { K as oe, U as se, u as ce } from "./keys-C3P1yxnr.js";
-import { t as le } from "./useI18n-CL6RfPzK.js";
-import { a as ue, i as h, n as de, r as g, t as fe } from "./usePopoverPosition-CWxaIWd3.js";
-import { t as _ } from "./x-DJOd1hS4.js";
-import { u as v } from "./styleConstants-C_YAPdQS.js";
+import { A as e, At as t, B as n, M as r, S as i, Z as a, at as o, c as s, d as c, g as l, i as ee, kt as u, l as te, r as ne, s as d, u as f, v as p } from "./vue.runtime.esm-bundler-DShF3P6k.js";
+import { c as re, s as m, t as ie } from "./runtime-dom.esm-bundler-PnoZU512.js";
+import { t as ae } from "./dist-DBirAJIs.js";
+import { W as oe, d as se, q as ce } from "./keys-DQA2i1k1.js";
+import { t as le } from "./useI18n-BbdxxpOE.js";
+import { a as ue, i as h, n as de, r as g, t as fe } from "./usePopoverPosition-CprM5p-c.js";
+import { t as _ } from "./x-D_-42Ukq.js";
+import { u as pe } from "./styleConstants-C_YAPdQS.js";
 //#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/math.js
-var y = (e, t = 0, n = 1) => e > n ? n : e < t ? t : e, b = (e, t = 0, n = 10 ** t) => Math.round(n * e) / n;
+var v = (e, t = 0, n = 1) => e > n ? n : e < t ? t : e, y = (e, t = 0, n = 10 ** t) => Math.round(n * e) / n;
 360 / (Math.PI * 2);
-var x = (e) => k(S(e)), S = (e) => (e[0] === "#" && (e = e.substring(1)), e.length < 6 ? {
+var b = (e) => O(x(e)), x = (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 ? b(parseInt(e[3] + e[3], 16) / 255, 2) : 1
+	a: e.length === 4 ? y(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 ? b(parseInt(e.substring(6, 8), 16) / 255, 2) : 1
-}), C = (e) => O(E(e)), w = ({ h: e, s: t, v: n, a: r }) => {
+	a: e.length === 8 ? y(parseInt(e.substring(6, 8), 16) / 255, 2) : 1
+}), S = (e) => D(T(e)), C = ({ h: e, s: t, v: n, a: r }) => {
 	let i = (200 - t) * n / 100;
 	return {
-		h: b(e),
-		s: b(i > 0 && i < 200 ? t * n / 100 / (i <= 100 ? i : 200 - i) * 100 : 0),
-		l: b(i / 2),
-		a: b(r, 2)
+		h: y(e),
+		s: y(i > 0 && i < 200 ? t * n / 100 / (i <= 100 ? i : 200 - i) * 100 : 0),
+		l: y(i / 2),
+		a: y(r, 2)
 	};
-}, T = (e) => {
-	let { h: t, s: n, l: r } = w(e);
+}, w = (e) => {
+	let { h: t, s: n, l: r } = C(e);
 	return `hsl(${t}, ${n}%, ${r}%)`;
-}, E = ({ h: e, s: t, v: n, a: r }) => {
+}, T = ({ 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: b([
+		r: y([
 			n,
 			o,
 			a,
@@ -42,7 +42,7 @@ var x = (e) => k(S(e)), S = (e) => (e[0] === "#" && (e = e.substring(1)), e.leng
 			s,
 			n
 		][c] * 255),
-		g: b([
+		g: y([
 			s,
 			n,
 			n,
@@ -50,7 +50,7 @@ var x = (e) => k(S(e)), S = (e) => (e[0] === "#" && (e = e.substring(1)), e.leng
 			a,
 			a
 		][c] * 255),
-		b: b([
+		b: y([
 			a,
 			a,
 			s,
@@ -58,73 +58,73 @@ var x = (e) => k(S(e)), S = (e) => (e[0] === "#" && (e = e.substring(1)), e.leng
 			n,
 			o
 		][c] * 255),
-		a: b(r, 2)
+		a: y(r, 2)
 	};
-}, D = (e) => {
+}, E = (e) => {
 	let t = e.toString(16);
 	return t.length < 2 ? "0" + t : t;
+}, D = ({ r: e, g: t, b: n, a: r }) => {
+	let i = r < 1 ? E(y(r * 255)) : "";
+	return "#" + E(e) + E(t) + E(n) + i;
 }, O = ({ r: e, g: t, b: n, a: r }) => {
-	let i = r < 1 ? D(b(r * 255)) : "";
-	return "#" + D(e) + D(t) + D(n) + i;
-}, k = ({ 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: b(60 * (o < 0 ? o + 6 : o)),
-		s: b(i ? a / i * 100 : 0),
-		v: b(i / 255 * 100),
+		h: y(60 * (o < 0 ? o + 6 : o)),
+		s: y(i ? a / i * 100 : 0),
+		v: y(i / 255 * 100),
 		a: r
 	};
-}, A = (e, t) => {
+}, k = (e, t) => {
 	if (e === t) return !0;
 	for (let n in e) if (e[n] !== t[n]) return !1;
 	return !0;
-}, j = (e, t) => e.toLowerCase() === t.toLowerCase() || A(S(e), S(t)), M = {}, N = (e) => {
-	let t = M[e];
-	return t || (t = document.createElement("template"), t.innerHTML = e, M[e] = t), t;
-}, P = (e, t, n) => {
+}, A = (e, t) => e.toLowerCase() === t.toLowerCase() || k(x(e), x(t)), j = {}, M = (e) => {
+	let t = j[e];
+	return t || (t = document.createElement("template"), t.innerHTML = e, j[e] = t), t;
+}, N = (e, t, n) => {
 	e.dispatchEvent(new CustomEvent(t, {
 		bubbles: !0,
 		detail: n
 	}));
-}, F = !1, I = (e) => "touches" in e, L = (e) => F && !I(e) ? !1 : (F ||= I(e), !0), R = (e, t) => {
-	let n = I(t) ? t.touches[0] : t, r = e.el.getBoundingClientRect();
-	P(e.el, "move", e.getMove({
-		x: y((n.pageX - (r.left + window.pageXOffset)) / r.width),
-		y: y((n.pageY - (r.top + window.pageYOffset)) / r.height)
+}, P = !1, F = (e) => "touches" in e, I = (e) => P && !F(e) ? !1 : (P ||= F(e), !0), L = (e, t) => {
+	let n = F(t) ? t.touches[0] : t, r = e.el.getBoundingClientRect();
+	N(e.el, "move", e.getMove({
+		x: v((n.pageX - (r.left + window.pageXOffset)) / r.width),
+		y: v((n.pageY - (r.top + window.pageYOffset)) / r.height)
 	}));
-}, z = (e, t) => {
+}, R = (e, t) => {
 	let n = t.keyCode;
-	n > 40 || e.xy && n < 37 || n < 33 || (t.preventDefault(), P(e.el, "move", e.getMove({
+	n > 40 || e.xy && n < 37 || n < 33 || (t.preventDefault(), N(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)));
-}, B = class {
+}, z = class {
 	constructor(e, t, n, r) {
-		let i = N(`<div role="slider" tabindex="0" part="${t}" ${n}><div part="${t}-pointer"></div></div>`);
+		let i = M(`<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(F ? "touchmove" : "mousemove", this), t(F ? "touchend" : "mouseup", this);
+		t(P ? "touchmove" : "mousemove", this), t(P ? "touchend" : "mouseup", this);
 	}
 	handleEvent(e) {
 		switch (e.type) {
 			case "mousedown":
 			case "touchstart":
-				if (e.preventDefault(), !L(e) || !F && e.button != 0) return;
-				this.el.focus(), R(this, e), this.dragging = !0;
+				if (e.preventDefault(), !I(e) || !P && e.button != 0) return;
+				this.el.focus(), L(this, e), this.dragging = !0;
 				break;
 			case "mousemove":
 			case "touchmove":
-				e.preventDefault(), R(this, e);
+				e.preventDefault(), L(this, e);
 				break;
 			case "mouseup":
 			case "touchend":
 				this.dragging = !1;
 				break;
-			case "keydown": z(this, e);
+			case "keydown": R(this, e);
 		}
 	}
 	style(e) {
@@ -132,25 +132,25 @@ var x = (e) => k(S(e)), S = (e) => (e[0] === "#" && (e = e.substring(1)), e.leng
 			for (let n in e) this.nodes[t].style.setProperty(n, e[n]);
 		});
 	}
-}, V = class extends B {
+}, B = class extends z {
 	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: T({
+			color: w({
 				h: e,
 				s: 100,
 				v: 100,
 				a: 1
 			})
-		}]), this.el.setAttribute("aria-valuenow", `${b(e)}`);
+		}]), this.el.setAttribute("aria-valuenow", `${y(e)}`);
 	}
 	getMove(e, t) {
-		return { h: t ? y(this.h + e.x * 360, 0, 360) : 360 * e.x };
+		return { h: t ? v(this.h + e.x * 360, 0, 360) : 360 * e.x };
 	}
-}, H = class extends B {
+}, V = class extends z {
 	constructor(e) {
 		super(e, "saturation", "aria-label=\"Color\"", !0);
 	}
@@ -158,47 +158,47 @@ var x = (e) => k(S(e)), S = (e) => (e[0] === "#" && (e = e.substring(1)), e.leng
 		this.hsva = e, this.style([{
 			top: `${100 - e.v}%`,
 			left: `${e.s}%`,
-			color: T(e)
-		}, { "background-color": T({
+			color: w(e)
+		}, { "background-color": w({
 			h: e.h,
 			s: 100,
 			v: 100,
 			a: 1
-		}) }]), this.el.setAttribute("aria-valuetext", `Saturation ${b(e.s)}%, Brightness ${b(e.v)}%`);
+		}) }]), this.el.setAttribute("aria-valuetext", `Saturation ${y(e.s)}%, Brightness ${y(e.v)}%`);
 	}
 	getMove(e, t) {
 		return {
-			s: t ? y(this.hsva.s + e.x * 100, 0, 100) : e.x * 100,
-			v: t ? y(this.hsva.v - e.y * 100, 0, 100) : Math.round(100 - e.y * 100)
+			s: t ? v(this.hsva.s + e.x * 100, 0, 100) : e.x * 100,
+			v: t ? v(this.hsva.v - e.y * 100, 0, 100) : Math.round(100 - e.y * 100)
 		};
 	}
-}, U = ":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)}", W = "[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}", G = "[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}", K = Symbol("same"), q = Symbol("color"), J = Symbol("hsva"), Y = Symbol("update"), X = Symbol("parts"), Z = Symbol("css"), Q = Symbol("sliders"), pe = class extends HTMLElement {
+}, H = ":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)}", U = "[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}", W = "[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}", G = Symbol("same"), K = Symbol("color"), q = Symbol("hsva"), J = Symbol("update"), Y = Symbol("parts"), X = Symbol("css"), Z = Symbol("sliders"), me = class extends HTMLElement {
 	static get observedAttributes() {
 		return ["color"];
 	}
-	get [Z]() {
+	get [X]() {
 		return [
+			H,
 			U,
-			W,
-			G
+			W
 		];
 	}
-	get [Q]() {
-		return [H, V];
+	get [Z]() {
+		return [V, B];
 	}
 	get color() {
-		return this[q];
+		return this[K];
 	}
 	set color(e) {
-		if (!this[K](e)) {
+		if (!this[G](e)) {
 			let t = this.colorModel.toHsva(e);
-			this[Y](t), this[q] = e;
+			this[J](t), this[K] = e;
 		}
 	}
 	constructor() {
 		super();
-		let e = N(`<style>${this[Z].join("")}</style>`), t = this.attachShadow({ mode: "open" });
-		t.appendChild(e.content.cloneNode(!0)), t.addEventListener("move", this), this[X] = this[Q].map((e) => new e(t));
+		let e = M(`<style>${this[X].join("")}</style>`), t = this.attachShadow({ mode: "open" });
+		t.appendChild(e.content.cloneNode(!0)), t.addEventListener("move", this), this[Y] = this[Z].map((e) => new e(t));
 	}
 	connectedCallback() {
 		if (this.hasOwnProperty("color")) {
@@ -208,39 +208,39 @@ var x = (e) => k(S(e)), S = (e) => (e[0] === "#" && (e = e.substring(1)), e.leng
 	}
 	attributeChangedCallback(e, t, n) {
 		let r = this.colorModel.fromAttr(n);
-		this[K](r) || (this.color = r);
+		this[G](r) || (this.color = r);
 	}
 	handleEvent(e) {
-		let t = this[J], n = {
+		let t = this[q], n = {
 			...t,
 			...e.detail
 		};
-		this[Y](n);
+		this[J](n);
 		let r;
-		!A(n, t) && !this[K](r = this.colorModel.fromHsva(n)) && (this[q] = r, P(this, "color-changed", { value: r }));
+		!k(n, t) && !this[G](r = this.colorModel.fromHsva(n)) && (this[K] = r, N(this, "color-changed", { value: r }));
 	}
-	[K](e) {
+	[G](e) {
 		return this.color && this.colorModel.equal(e, this.color);
 	}
-	[Y](e) {
-		this[J] = e, this[X].forEach((t) => t.update(e));
+	[J](e) {
+		this[q] = e, this[Y].forEach((t) => t.update(e));
 	}
-}, $ = {
+}, Q = {
 	defaultColor: "#000",
-	toHsva: x,
-	fromHsva: ({ h: e, s: t, v: n }) => C({
+	toHsva: b,
+	fromHsva: ({ h: e, s: t, v: n }) => S({
 		h: e,
 		s: t,
 		v: n,
 		a: 1
 	}),
-	equal: j,
+	equal: A,
 	fromAttr: (e) => e
-}, me = class extends pe {
+}, $ = class extends me {
 	get colorModel() {
-		return $;
+		return Q;
 	}
-}, he = class extends me {};
+}, he = class extends $ {};
 customElements.define("hex-color-picker", he);
 //#endregion
 //#region src/components/ColorPicker.vue?vue&type=script&setup=true&lang.ts
@@ -299,34 +299,34 @@ var ge = [
 		}
 	},
 	emits: ["update:modelValue"],
-	setup(p, { emit: y }) {
-		let b = p, x = y, { t: S } = le(), C = r(!1), w = r(), T = r(), E = r(!1);
-		ae(w, () => {
-			C.value = !1;
-		}, { ignore: [T] });
-		let D = d(() => !b.modelValue), O = d(() => h(b.modelValue)), k = d(() => h(b.modelValue || b.seedColor)), A = d(() => !b.disabled && !D.value), j = n(ce, ue), M = d(() => [...new Set(b.presets ?? j.presets)]), N = d(() => b.allowCustom ?? j.allowCustom), P = d(() => M.value.length > 0), F = d(() => N.value || !P.value), I = d(() => g(b.modelValue));
-		function L(e) {
-			return I.value !== "" && g(e) === I.value;
+	setup(p, { emit: v }) {
+		let y = p, b = v, { t: x } = le(), S = a(!1), C = a(), w = a(), T = a(!1);
+		ae(C, () => {
+			S.value = !1;
+		}, { ignore: [w] });
+		let E = d(() => !y.modelValue), D = d(() => h(y.modelValue)), O = d(() => h(y.modelValue || y.seedColor)), k = d(() => !y.disabled && !E.value), A = i(se, ue), j = d(() => [...new Set(y.presets ?? A.presets)]), M = d(() => y.allowCustom ?? A.allowCustom), N = d(() => j.value.length > 0), P = d(() => M.value || !N.value), F = d(() => g(y.modelValue));
+		function I(e) {
+			return F.value !== "" && g(e) === F.value;
 		}
-		function R(e) {
-			x("update:modelValue", e);
+		function L(e) {
+			b("update:modelValue", e);
 		}
-		let z = d(() => P.value && !F.value);
-		function B(e) {
-			return z.value ? e + 1 : e;
+		let R = d(() => N.value && !P.value);
+		function z(e) {
+			return R.value ? e + 1 : e;
 		}
-		let V = d(() => {
-			if (z.value && D.value) return 0;
-			let e = M.value.findIndex((e) => L(e));
-			return e === -1 ? 0 : B(e);
+		let B = d(() => {
+			if (R.value && E.value) return 0;
+			let e = j.value.findIndex((e) => I(e));
+			return e === -1 ? 0 : z(e);
 		});
-		function H() {
-			return V.value === 0 ? 0 : -1;
+		function V() {
+			return B.value === 0 ? 0 : -1;
 		}
-		function U(e) {
-			return B(e) === V.value ? 0 : -1;
+		function H(e) {
+			return z(e) === B.value ? 0 : -1;
 		}
-		function W(e) {
+		function U(e) {
 			if (![
 				"ArrowRight",
 				"ArrowDown",
@@ -336,84 +336,84 @@ var ge = [
 			let t = e.currentTarget, n = Array.from(t.querySelectorAll("[role=\"radio\"]")), r = e.target.closest("[role=\"radio\"]"), i = r ? n.indexOf(r) : -1;
 			i !== -1 && (n[(i + (e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : -1) + n.length) % n.length]?.focus(), e.preventDefault());
 		}
-		function G(e) {
-			E.value = !0, x("update:modelValue", e.detail.value);
+		function W(e) {
+			T.value = !0, b("update:modelValue", e.detail.value);
 		}
-		function K() {
-			E.value = !1;
+		function G() {
+			T.value = !1;
 		}
-		function q() {
-			!E.value && D.value && x("update:modelValue", k.value);
+		function K() {
+			!T.value && E.value && b("update:modelValue", O.value);
 		}
-		function J(e) {
-			x("update:modelValue", e.target.value);
+		function q(e) {
+			b("update:modelValue", e.target.value);
 		}
-		function Y() {
-			x("update:modelValue", "");
+		function J() {
+			b("update:modelValue", "");
 		}
-		let X = de(), { toLocal: Z } = fe(), Q = n(se, null), pe = n(oe, null), $ = r({
+		let Y = de(), { toLocal: X } = fe(), Z = i(oe, null), me = i(ce, null), Q = a({
 			top: 0,
 			left: 0
 		});
-		function me() {
-			if (!b.disabled) {
-				if (!C.value) {
-					let e = T.value?.getBoundingClientRect();
+		function $() {
+			if (!y.disabled) {
+				if (!S.value) {
+					let e = w.value?.getBoundingClientRect();
 					if (e) {
 						let t = e.bottom + 8 + 240 <= window.innerHeight ? e.bottom + 8 : Math.max(8, e.top - 240 - 8);
-						$.value = Z({
+						Q.value = X({
 							top: t,
 							left: e.left
 						});
 					}
 				}
-				C.value = !C.value;
+				S.value = !S.value;
 			}
 		}
-		return (n, r) => (l(), a("div", { class: e(["tpl:flex tpl:items-center tpl:gap-2 tpl:relative", p.disabled && "tpl:opacity-60 tpl:cursor-not-allowed"]) }, [
-			i("button", {
+		return (i, a) => (e(), c("div", { class: u(["tpl:flex tpl:items-center tpl:gap-2 tpl:relative", p.disabled && "tpl:opacity-60 tpl:cursor-not-allowed"]) }, [
+			s("button", {
 				ref_key: "swatchRef",
-				ref: T,
+				ref: w,
 				type: "button",
 				disabled: p.disabled,
-				"aria-label": p.ariaLabel || u(S).colorPicker.pickColor,
+				"aria-label": p.ariaLabel || o(x).colorPicker.pickColor,
 				title: p.ariaLabel || void 0,
-				"aria-expanded": C.value,
-				class: e([
+				"aria-expanded": S.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",
-					C.value ? "tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]" : !p.disabled && "tpl:hover:border-[var(--tpl-text-dim)]",
+					S.value ? "tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]" : !p.disabled && "tpl:hover:border-[var(--tpl-text-dim)]",
 					p.size === "sm" ? "tpl:size-8" : "tpl:size-10"
 				]),
-				onClick: me
-			}, [i("span", {
-				class: e(["tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]", { "tpl-color-swatch-empty": D.value }]),
-				style: t(D.value ? void 0 : { backgroundColor: O.value })
+				onClick: $
+			}, [s("span", {
+				class: u(["tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]", { "tpl-color-swatch-empty": E.value }]),
+				style: t(E.value ? void 0 : { backgroundColor: D.value })
 			}, null, 6)], 10, ge),
-			!p.swatchOnly && F.value ? (l(), a("div", _e, [i("input", {
+			!p.swatchOnly && P.value ? (e(), c("div", _e, [s("input", {
 				type: "text",
-				class: e([u(v), "tpl:w-full"]),
-				style: t(A.value ? { paddingRight: "2.25rem" } : void 0),
-				value: O.value,
-				placeholder: p.placeholder || u(S).colorPicker.notSet,
+				class: u([o(pe), "tpl:w-full"]),
+				style: t(k.value ? { paddingRight: "2.25rem" } : void 0),
+				value: D.value,
+				placeholder: p.placeholder || o(x).colorPicker.notSet,
 				disabled: p.disabled,
-				"aria-label": u(S).colorPicker.hexValue,
-				onInput: J
-			}, null, 46, ve), A.value ? (l(), a("button", {
+				"aria-label": o(x).colorPicker.hexValue,
+				onInput: q
+			}, null, 46, ve), k.value ? (e(), c("button", {
 				key: 0,
 				type: "button",
-				"aria-label": u(S).colorPicker.clear,
-				title: u(S).colorPicker.clear,
+				"aria-label": o(x).colorPicker.clear,
+				title: o(x).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)] tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]",
-				onClick: Y
-			}, [o(u(_), {
+				onClick: J
+			}, [l(o(_), {
 				size: 14,
 				"stroke-width": 1.5
 			})], 8, ye)) : f("", !0)])) : f("", !0),
-			(l(), ee(s, {
-				to: u(X),
-				disabled: !u(X)
-			}, [o(ie, {
+			(e(), te(ee, {
+				to: o(Y),
+				disabled: !o(Y)
+			}, [l(ie, {
 				"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",
 				"enter-to-class": "tpl:opacity-100 tpl:scale-100 tpl:translate-y-0",
@@ -421,73 +421,73 @@ var ge = [
 				"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: ne(() => [C.value ? (l(), a("div", {
+				default: n(() => [S.value ? (e(), c("div", {
 					key: 0,
 					ref_key: "popoverRef",
-					ref: w,
-					"data-tpl-theme": u(pe),
+					ref: C,
+					"data-tpl-theme": o(me),
 					class: "tpl-color-popover tpl:absolute tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3 tpl:shadow-[var(--tpl-shadow-lg)]",
 					style: t({
-						top: `${$.value.top}px`,
-						left: `${$.value.left}px`,
-						...u(Q)
+						top: `${Q.value.top}px`,
+						left: `${Q.value.left}px`,
+						...o(Z)
 					})
 				}, [
-					P.value ? (l(), a("div", {
+					N.value ? (e(), c("div", {
 						key: 0,
 						role: "radiogroup",
-						"aria-label": u(S).colorPicker.presetColors,
-						class: e(["tpl:flex tpl:flex-wrap tpl:gap-1.5", F.value && "tpl:mb-2"]),
-						onKeydown: W
-					}, [z.value ? (l(), a("button", {
+						"aria-label": o(x).colorPicker.presetColors,
+						class: u(["tpl:flex tpl:flex-wrap tpl:gap-1.5", P.value && "tpl:mb-2"]),
+						onKeydown: U
+					}, [R.value ? (e(), c("button", {
 						key: 0,
 						type: "button",
 						role: "radio",
-						"aria-label": u(S).colorPicker.clear,
-						title: u(S).colorPicker.clear,
-						"aria-checked": D.value,
-						tabindex: H(),
-						class: e(["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)]", D.value ? "tpl:ring-2 tpl:ring-[var(--tpl-primary)] tpl:ring-offset-1 tpl:ring-offset-[var(--tpl-bg-elevated)]" : "tpl:hover:border-[var(--tpl-text-dim)]"]),
-						onClick: Y
-					}, null, 10, Se)) : f("", !0), (l(!0), a(te, null, c(M.value, (n, r) => (l(), a("button", {
+						"aria-label": o(x).colorPicker.clear,
+						title: o(x).colorPicker.clear,
+						"aria-checked": E.value,
+						tabindex: V(),
+						class: u(["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)]" : "tpl:hover:border-[var(--tpl-text-dim)]"]),
+						onClick: J
+					}, null, 10, Se)) : f("", !0), (e(!0), c(ne, null, r(j.value, (n, r) => (e(), c("button", {
 						key: n,
 						type: "button",
 						role: "radio",
 						"aria-label": n,
 						title: n,
-						"aria-checked": L(n),
-						tabindex: U(r),
+						"aria-checked": I(n),
+						tabindex: H(r),
 						style: t({ backgroundColor: n }),
-						class: e(["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)]", L(n) ? "tpl:ring-2 tpl:ring-[var(--tpl-primary)] tpl:ring-offset-1 tpl:ring-offset-[var(--tpl-bg-elevated)]" : "tpl:hover:border-[var(--tpl-text-dim)]"]),
-						onClick: (e) => R(n)
+						class: u(["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(n) ? "tpl:ring-2 tpl:ring-[var(--tpl-primary)] tpl:ring-offset-1 tpl:ring-offset-[var(--tpl-bg-elevated)]" : "tpl:hover:border-[var(--tpl-text-dim)]"]),
+						onClick: (e) => L(n)
 					}, null, 14, Ce))), 128))], 42, xe)) : f("", !0),
-					F.value ? (l(), a("hex-color-picker", {
+					P.value ? (e(), c("hex-color-picker", {
 						key: 1,
-						color: k.value,
-						"aria-label": u(S).colorPicker.pickColor,
-						onColorChanged: G,
-						onPointerdown: K,
-						onPointerup: q,
-						onKeydown: r[0] ||= m((e) => C.value = !1, ["escape"])
+						color: O.value,
+						"aria-label": o(x).colorPicker.pickColor,
+						onColorChanged: W,
+						onPointerdown: G,
+						onPointerup: K,
+						onKeydown: a[0] ||= m((e) => S.value = !1, ["escape"])
 					}, null, 40, we)) : f("", !0),
-					p.swatchOnly && F.value ? (l(), a("div", Te, [i("input", {
+					p.swatchOnly && P.value ? (e(), c("div", Te, [s("input", {
 						type: "text",
-						class: e([u(v), "tpl:w-full"]),
-						style: t(A.value ? { paddingRight: "2.25rem" } : void 0),
-						value: O.value,
-						placeholder: p.placeholder || u(S).colorPicker.notSet,
+						class: u([o(pe), "tpl:w-full"]),
+						style: t(k.value ? { paddingRight: "2.25rem" } : void 0),
+						value: D.value,
+						placeholder: p.placeholder || o(x).colorPicker.notSet,
 						disabled: p.disabled,
-						"aria-label": u(S).colorPicker.hexValue,
-						onChange: J,
-						onKeydown: r[1] ||= m(re((e) => e.target.blur(), ["prevent"]), ["enter"])
-					}, null, 46, Ee), A.value ? (l(), a("button", {
+						"aria-label": o(x).colorPicker.hexValue,
+						onChange: q,
+						onKeydown: a[1] ||= m(re((e) => e.target.blur(), ["prevent"]), ["enter"])
+					}, null, 46, Ee), k.value ? (e(), c("button", {
 						key: 0,
 						type: "button",
-						"aria-label": u(S).colorPicker.clear,
-						title: u(S).colorPicker.clear,
+						"aria-label": o(x).colorPicker.clear,
+						title: o(x).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)] tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]",
-						onClick: Y
-					}, [o(u(_), {
+						onClick: J
+					}, [l(o(_), {
 						size: 14,
 						"stroke-width": 1.5
 					})], 8, De)) : f("", !0)])) : f("", !0)