@templatical/editor 0.18.0 → 0.20.0

package/dist/{useI18n-OaMLWqhY.js → useI18n-BNMzZTM5.js}

@@ -1,5 +1,5 @@
 import { W as e, x as t } from "./vue.runtime.esm-bundler-B0xoGkDv.js";
-import { L as n } from "./keys-DAxnnmXs.js";
+import { R as n } from "./keys-DFaIbGR8.js";
 //#region src/composables/useI18n.ts
 function r(r) {
 	let i = r ?? t(n, null);

package/dist/{useMergeTag-CZMgwVvr.js → useMergeTag-DfEY0eK5.js}

@@ -1,14 +1,14 @@
 import { Y as e, x as t } from "./vue.runtime.esm-bundler-B0xoGkDv.js";
-import { A as n, T as r, r as i } from "./dist-DoRIUsfz.js";
-import { A as a, D as o, E as s, T as c, w as l } from "./keys-DAxnnmXs.js";
+import { D as n, M as r, a as i } from "./dist-BJbqgyPn.js";
+import { D as a, E as o, O as s, T as c, j as l } from "./keys-DFaIbGR8.js";
 //#region src/composables/useMergeTag.ts
 function u() {
-	let u = t(l, []), d = t(o, i.liquid), f = t(a, null), p = t(c, !0), m = t(s, null), h = e(!1);
+	let u = t(c, []), d = t(s, i.liquid), f = t(l, null), p = t(o, !0), m = t(a, null), h = e(!1);
 	function g(e) {
-		return n(e, d);
+		return r(e, d);
 	}
 	function _(e) {
-		return r(e, u);
+		return n(e, u);
 	}
 	async function v() {
 		if (f) {

package/dist/{usePopoverPosition-QDY09q9H.js → usePopoverPosition-F9STHRIr.js}

@@ -1,6 +1,6 @@
 import { E as e, I as t, L as n, Y as r, Z as i, b as a, et as o, nt as s, s as c, v as l, x as u } from "./vue.runtime.esm-bundler-B0xoGkDv.js";
 import { _ as d, a as f, d as p, i as m, l as h, n as g, o as _, r as v, s as y, t as b, u as x } from "./dist-DYv_Pttj.js";
-import { M as S } from "./keys-DAxnnmXs.js";
+import { N as S } from "./keys-DFaIbGR8.js";
 //#region ../../node_modules/.pnpm/@vueuse+core@14.3.0_vue@3.5.40_typescript@6.0.3_/node_modules/@vueuse/core/dist/index.js
 var C = g ? window : void 0;
 g && window.document, g && window.navigator, g && window.location;
@@ -249,22 +249,49 @@ function I(e, n = {}) {
 	};
 }
 //#endregion
+//#region src/utils/resolveColorsConfig.ts
+var L = {
+	presets: [],
+	allowCustom: !0,
+	allowCustomIgnored: !1,
+	invalidPresets: []
+}, R = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+function z(e, t = L) {
+	let n, r;
+	if (e?.presets === void 0) n = t.presets, r = [];
+	else {
+		n = [], r = [];
+		for (let t of e.presets) R.test(t) ? n.push(t) : r.push(t);
+	}
+	let i = e?.allowCustom ?? t.allowCustom, a = !i && n.length === 0;
+	return {
+		presets: n,
+		allowCustom: a ? !0 : i,
+		allowCustomIgnored: a,
+		invalidPresets: r
+	};
+}
+//#endregion
 //#region src/utils/color.ts
-function L(e) {
+function B(e) {
 	let t = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i.exec(e.trim());
 	if (!t) return e;
 	let n = (e) => Number(e).toString(16).padStart(2, "0");
 	return `#${n(t[1])}${n(t[2])}${n(t[3])}`;
 }
+function V(e) {
+	let t = B(e), n = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(t);
+	return n ? `#${n[1]}${n[1]}${n[2]}${n[2]}${n[3]}${n[3]}`.toLowerCase() : /^#[0-9a-f]{6}$/i.test(t) ? t.toLowerCase() : t;
+}
 //#endregion
 //#region src/composables/usePopoverRoot.ts
-function R() {
+function H() {
 	return u(S, r(null));
 }
 //#endregion
 //#region src/composables/usePopoverPosition.ts
-function z() {
-	let e = R();
+function U() {
+	let e = H();
 	function t(t) {
 		let n = e.value?.getBoundingClientRect();
 		return n ? {
@@ -278,4 +305,4 @@ function z() {
 	return { toLocal: t };
 }
 //#endregion
-export { P as a, N as c, D as i, R as n, I as o, L as r, T as s, z as t };
+export { L as a, P as c, N as d, B as i, I as l, H as n, z as o, V as r, D as s, U as t, T as u };

package/dist/{x-Ctg_250T.js → x-BCFQuE_q.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./createLucideIcon-FSF4peHQ.js";
+import { t as e } from "./createLucideIcon-_peTZQtY.js";
 var t = e("x", [["path", {
 	d: "M18 6 6 18",
 	key: "1bl5f8"

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@templatical/editor",
   "description": "Vue 3 visual drag-and-drop email editor powered by Templatical",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "bugs": "https://github.com/templatical/sdk/issues",
   "devDependencies": {
-    "@lucide/vue": "^1.25.0",
+    "@lucide/vue": "^1.26.0",
     "@tiptap/core": "^3.28.0",
     "@tiptap/extension-color": "^3.28.0",
     "@tiptap/extension-font-family": "^3.28.0",
@@ -22,7 +22,7 @@
     "@vue/test-utils": "^2.4.11",
     "@vueuse/core": "^14.3.0",
     "es-module-lexer": "^2.3.1",
-    "happy-dom": "^20.11.0",
+    "happy-dom": "^20.11.1",
     "liquidjs": "^10.27.2",
     "tailwindcss": "^4.3.3",
     "typescript": "^6.0.3",
@@ -31,10 +31,10 @@
     "vitest": "^4.1.10",
     "vue": "^3.5.40",
     "vue-draggable-plus": "^0.6.1",
-    "vue-tsc": "^3.3.7",
-    "@templatical/core": "0.18.0",
-    "@templatical/quality": "0.18.0",
-    "@templatical/types": "0.18.0"
+    "vue-tsc": "^3.3.8",
+    "@templatical/core": "0.20.0",
+    "@templatical/quality": "0.20.0",
+    "@templatical/types": "0.20.0"
   },
   "exports": {
     ".": {
@@ -62,9 +62,9 @@
   "license": "SEE LICENSE IN LICENSE",
   "module": "./dist/templatical-editor.js",
   "peerDependencies": {
-    "@templatical/media-library": "0.18.0",
-    "@templatical/quality": "0.18.0",
-    "@templatical/renderer": "0.18.0"
+    "@templatical/media-library": "0.20.0",
+    "@templatical/quality": "0.20.0",
+    "@templatical/renderer": "0.20.0"
   },
   "peerDependenciesMeta": {
     "@templatical/renderer": {

package/dist/ColorPicker-BXCcUYsZ.js

@@ -1,473 +0,0 @@
-import { Dt as e, Et as t, O as n, R as r, Y as i, _ as a, c as o, d as s, h as c, i as ee, l as te, nt as l, s as u, u as d, x as f } from "./vue.runtime.esm-bundler-B0xoGkDv.js";
-import { c as ne, s as p, t as re } from "./runtime-dom.esm-bundler-GdMI8WqG.js";
-import { i as ie, n as ae, r as m, t as oe } from "./usePopoverPosition-QDY09q9H.js";
-import { I as se, R as ce } from "./keys-DAxnnmXs.js";
-import { t as le } from "./useI18n-OaMLWqhY.js";
-import { t as h } from "./x-Ctg_250T.js";
-//#region src/constants/styleConstants.ts
-var g = "tpl:block tpl:mb-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]", _ = "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)]", v = "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)]", y = "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)]", b = "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",
-	"16px",
-	"18px",
-	"20px",
-	"24px",
-	"28px",
-	"32px",
-	"36px",
-	"48px",
-	"64px"
-], D = [
-	"1",
-	"1.2",
-	"1.4",
-	"1.5",
-	"1.6",
-	"1.8",
-	"2",
-	"2.5"
-], O = [
-	{
-		label: "Normal",
-		value: "normal"
-	},
-	{
-		label: "-0.5px",
-		value: "-0.5px"
-	},
-	{
-		label: "0.5px",
-		value: "0.5px"
-	},
-	{
-		label: "1px",
-		value: "1px"
-	},
-	{
-		label: "1.5px",
-		value: "1.5px"
-	},
-	{
-		label: "2px",
-		value: "2px"
-	},
-	{
-		label: "3px",
-		value: "3px"
-	}
-], 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 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 ? 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 ? 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: 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)
-	};
-}, z = (e) => {
-	let { h: t, s: n, l: r } = R(e);
-	return `hsl(${t}, ${n}%, ${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: P([
-			n,
-			o,
-			a,
-			a,
-			s,
-			n
-		][c] * 255),
-		g: P([
-			s,
-			n,
-			n,
-			o,
-			a,
-			a
-		][c] * 255),
-		b: P([
-			a,
-			a,
-			s,
-			n,
-			n,
-			o
-		][c] * 255),
-		a: P(r, 2)
-	};
-}, B = (e) => {
-	let t = e.toString(16);
-	return t.length < 2 ? "0" + t : t;
-}, 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: P(60 * (o < 0 ? o + 6 : o)),
-		s: P(i ? a / i * 100 : 0),
-		v: P(i / 255 * 100),
-		a: r
-	};
-}, V = (e, t) => {
-	if (e === t) return !0;
-	for (let n in e) if (e[n] !== t[n]) return !1;
-	return !0;
-}, 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
-	}));
-}, 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)
-	}));
-}, he = (e, t) => {
-	let n = t.keyCode;
-	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)));
-}, J = class {
-	constructor(e, t, n, r) {
-		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(G ? "touchmove" : "mousemove", this), t(G ? "touchend" : "mouseup", this);
-	}
-	handleEvent(e) {
-		switch (e.type) {
-			case "mousedown":
-			case "touchstart":
-				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(), q(this, e);
-				break;
-			case "mouseup":
-			case "touchend":
-				this.dragging = !1;
-				break;
-			case "keydown":
-				he(this, e);
-				break;
-		}
-	}
-	style(e) {
-		e.forEach((e, t) => {
-			for (let n in e) this.nodes[t].style.setProperty(n, e[n]);
-		});
-	}
-}, 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: z({
-				h: e,
-				s: 100,
-				v: 100,
-				a: 1
-			})
-		}]), this.el.setAttribute("aria-valuenow", `${P(e)}`);
-	}
-	getMove(e, t) {
-		return { h: t ? N(this.h + e.x * 360, 0, 360) : 360 * e.x };
-	}
-}, _e = class extends J {
-	constructor(e) {
-		super(e, "saturation", "aria-label=\"Color\"", !0);
-	}
-	update(e) {
-		this.hsva = e, this.style([{
-			top: `${100 - e.v}%`,
-			left: `${e.s}%`,
-			color: z(e)
-		}, { "background-color": z({
-			h: e.h,
-			s: 100,
-			v: 100,
-			a: 1
-		}) }]), this.el.setAttribute("aria-valuetext", `Saturation ${P(e.s)}%, Brightness ${P(e.v)}%`);
-	}
-	getMove(e, t) {
-		return {
-			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)
-		};
-	}
-}, 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 [Se]() {
-		return [
-			ve,
-			ye,
-			be
-		];
-	}
-	get [$]() {
-		return [_e, ge];
-	}
-	get color() {
-		return this[X];
-	}
-	set color(e) {
-		if (!this[Y](e)) {
-			let t = this.colorModel.toHsva(e);
-			this[Q](t), this[X] = e;
-		}
-	}
-	constructor() {
-		super();
-		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")) {
-			let e = this.color;
-			delete this.color, this.color = e;
-		} else this.color ||= this.colorModel.defaultColor;
-	}
-	attributeChangedCallback(e, t, n) {
-		let r = this.colorModel.fromAttr(n);
-		this[Y](r) || (this.color = r);
-	}
-	handleEvent(e) {
-		let t = this[Z], n = {
-			...t,
-			...e.detail
-		};
-		this[Q](n);
-		let r;
-		!V(n, t) && !this[Y](r = this.colorModel.fromHsva(n)) && (this[X] = r, W(this, "color-changed", { value: r }));
-	}
-	[Y](e) {
-		return this.color && this.colorModel.equal(e, this.color);
-	}
-	[Q](e) {
-		this[Z] = e, this[xe].forEach((t) => t.update(e));
-	}
-}, we = {
-	defaultColor: "#000",
-	toHsva: F,
-	fromHsva: ({ h: e, s: t, v: n }) => L({
-		h: e,
-		s: t,
-		v: n,
-		a: 1
-	}),
-	equal: pe,
-	fromAttr: (e) => e
-}, Te = class extends Ce {
-	get colorModel() {
-		return we;
-	}
-}, Ee = class extends Te {};
-customElements.define("hex-color-picker", Ee);
-//#endregion
-//#region src/components/ColorPicker.vue?vue&type=script&setup=true&lang.ts
-var De = [
-	"disabled",
-	"aria-label",
-	"title",
-	"aria-expanded"
-], Oe = {
-	key: 0,
-	class: "tpl:relative tpl:flex-1"
-}, ke = [
-	"value",
-	"placeholder",
-	"disabled",
-	"aria-label"
-], Ae = ["aria-label", "title"], je = ["data-tpl-theme"], Me = ["color", "aria-label"], Ne = {
-	key: 0,
-	class: "tpl:relative tpl:mt-2"
-}, Pe = [
-	"value",
-	"placeholder",
-	"disabled",
-	"aria-label"
-], Fe = ["aria-label", "title"], Ie = /* @__PURE__ */ a({
-	__name: "ColorPicker",
-	props: {
-		modelValue: {},
-		placeholder: { default: "" },
-		seedColor: { default: "#ffffff" },
-		swatchOnly: {
-			type: Boolean,
-			default: !1
-		},
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		size: { default: "md" },
-		ariaLabel: { default: "" }
-	},
-	emits: ["update:modelValue"],
-	setup(a, { emit: g }) {
-		let _ = a, v = g, { t: y } = le(), x = i(!1), S = i(), C = i(), w = i(!1);
-		ie(S, () => {
-			x.value = !1;
-		}, { ignore: [C] });
-		let T = u(() => !_.modelValue), E = u(() => m(_.modelValue)), D = u(() => m(_.modelValue || _.seedColor)), O = u(() => !_.disabled && !T.value);
-		function k(e) {
-			w.value = !0, v("update:modelValue", e.detail.value);
-		}
-		function A() {
-			w.value = !1;
-		}
-		function j() {
-			!w.value && T.value && v("update:modelValue", D.value);
-		}
-		function M(e) {
-			v("update:modelValue", e.target.value);
-		}
-		function N() {
-			v("update:modelValue", "");
-		}
-		let P = ae(), { toLocal: F } = oe(), I = f(se, null), L = f(ce, null), R = i({
-			top: 0,
-			left: 0
-		});
-		function z() {
-			if (!_.disabled) {
-				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);
-						R.value = F({
-							top: t,
-							left: e.left
-						});
-					}
-				}
-				x.value = !x.value;
-			}
-		}
-		return (i, u) => (n(), s("div", { class: t(["tpl:flex tpl:items-center tpl:gap-2 tpl:relative", a.disabled && "tpl:opacity-60 tpl:cursor-not-allowed"]) }, [
-			o("button", {
-				ref_key: "swatchRef",
-				ref: C,
-				type: "button",
-				disabled: a.disabled,
-				"aria-label": a.ariaLabel || l(y).colorPicker.pickColor,
-				title: a.ariaLabel || void 0,
-				"aria-expanded": x.value,
-				class: t([
-					"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)]",
-					a.disabled ? "tpl:cursor-not-allowed" : "tpl:cursor-pointer",
-					x.value ? "tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]" : !a.disabled && "hover:tpl:border-[var(--tpl-text-dim)]",
-					a.size === "sm" ? "tpl:size-8" : "tpl:size-10"
-				]),
-				onClick: z
-			}, [o("span", {
-				class: t(["tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]", { "tpl-color-swatch-empty": T.value }]),
-				style: e(T.value ? void 0 : { backgroundColor: E.value })
-			}, null, 6)], 10, De),
-			a.swatchOnly ? d("", !0) : (n(), s("div", Oe, [o("input", {
-				type: "text",
-				class: t([l(b), "tpl:w-full"]),
-				style: e(O.value ? { paddingRight: "2.25rem" } : void 0),
-				value: E.value,
-				placeholder: a.placeholder || l(y).colorPicker.notSet,
-				disabled: a.disabled,
-				"aria-label": l(y).colorPicker.hexValue,
-				onInput: M
-			}, null, 46, ke), O.value ? (n(), s("button", {
-				key: 0,
-				type: "button",
-				"aria-label": l(y).colorPicker.clear,
-				title: l(y).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: N
-			}, [c(l(h), {
-				size: 14,
-				"stroke-width": 1.5
-			})], 8, Ae)) : d("", !0)])),
-			(n(), te(ee, {
-				to: l(P),
-				disabled: !l(P)
-			}, [c(re, {
-				"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",
-				"leave-active-class": "tpl:transition-all tpl:duration-[80ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
-				"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(() => [x.value ? (n(), s("div", {
-					key: 0,
-					ref_key: "popoverRef",
-					ref: S,
-					"data-tpl-theme": l(L),
-					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: e({
-						top: `${R.value.top}px`,
-						left: `${R.value.left}px`,
-						...l(I)
-					})
-				}, [o("hex-color-picker", {
-					color: D.value,
-					"aria-label": l(y).colorPicker.pickColor,
-					onColorChanged: k,
-					onPointerdown: A,
-					onPointerup: j,
-					onKeydown: u[0] ||= p((e) => x.value = !1, ["escape"])
-				}, null, 40, Me), a.swatchOnly ? (n(), s("div", Ne, [o("input", {
-					type: "text",
-					class: t([l(b), "tpl:w-full"]),
-					style: e(O.value ? { paddingRight: "2.25rem" } : void 0),
-					value: E.value,
-					placeholder: a.placeholder || l(y).colorPicker.notSet,
-					disabled: a.disabled,
-					"aria-label": l(y).colorPicker.hexValue,
-					onChange: M,
-					onKeydown: u[1] ||= p(ne((e) => e.target.blur(), ["prevent"]), ["enter"])
-				}, null, 46, Pe), O.value ? (n(), s("button", {
-					key: 0,
-					type: "button",
-					"aria-label": l(y).colorPicker.clear,
-					title: l(y).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: N
-				}, [c(l(h), {
-					size: 14,
-					"stroke-width": 1.5
-				})], 8, Fe)) : d("", !0)])) : d("", !0)], 12, je)) : d("", !0)]),
-				_: 1
-			})], 8, ["to", "disabled"]))
-		], 2));
-	}
-});
-//#endregion
-export { S as _, k as a, D as c, T as d, _ as f, w as g, g as h, M as i, C as l, y as m, A as n, E as o, v as p, j as r, O as s, Ie as t, x as u };