@vonage/vivid 5.15.1 → 5.17.0

package/color-picker/index.js

@@ -1,812 +1,680 @@
-import { V as ee, a as y, o as L, n as te, h as n, c as oe, d as re } from "../bundled/vivid-element.js";
-import { P as se, p as ae } from "../bundled/definition9.js";
-import { I as ie, i as le } from "../bundled/definition2.js";
-import { W as ne, f as ce } from "../bundled/mixins.js";
-import { D as de, d as pe } from "../bundled/delegates-aria.js";
-import { h as he } from "../bundled/index.js";
-import { B as ue, i as b } from "../bundled/base-color-picker.js";
-import { W as ve } from "../bundled/with-contextual-help.js";
-import { W as fe } from "../bundled/with-error-text.js";
-import { W as be } from "../bundled/with-success-text.js";
-import { T as me } from "../bundled/trapped-focus.js";
-import { T as ge, t as xe } from "../bundled/definition10.js";
-import { B as ye, b as Ce } from "../bundled/definition3.js";
-import { T as $e, t as ke } from "../bundled/definition11.js";
-import { r as v } from "../bundled/ref.js";
-import { w as E } from "../bundled/when.js";
-import { s as F } from "../bundled/slotted.js";
-import { r as we } from "../bundled/repeat.js";
-import { c as N } from "../bundled/class-names.js";
-const _e = ".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -3px}:host{display:inline-block;--_low-ink-color: var(--vvd-color-neutral-600)}.base{display:inline-block;min-inline-size:var(--_color-picker-min-inline-size, 280px)}.control{inline-size:100%}.button{display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:4px;margin:0;background-color:var(--button-color, var(--vvd-color-canvas-text));block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));color:var(--vvd-color-canvas);inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4);text-decoration:none;vertical-align:middle}.button.contrast{color:var(--vvd-color-canvas-text)}.button:not(.disabled){cursor:pointer}.button.disabled{background-color:var(--vvd-color-neutral-300);color:var(--vvd-color-neutral-500);cursor:not-allowed}.button:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.button [data-vvd-component=icon]{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.dialog{display:flex;flex-direction:column;min-inline-size:var(--_color-picker-popup-min-inline-size, 264px)}.dialog .header{display:inline-flex;align-items:center;justify-content:space-between;padding-block:8px;padding-inline:16px}.dialog .header-title{font:var(--vvd-typography-base-extended-bold);margin-block:0}.dialog .body{display:flex;flex-direction:column;gap:16px;margin-block-end:16px;padding-inline:16px}.dialog .hex-input-wrapper{display:flex;align-items:stretch;gap:8px}.dialog .hex-input-wrapper [data-vvd-component=button]{flex:0 0 auto}.dialog .footer{padding:16px;border-top:1px solid var(--vvd-color-neutral-200)}.dialog .footer-header{margin-block-end:8px}.dialog .swatches-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.dialog .palette{gap:var(--_color-swatches-gap, 8px)}vvd-hex-input{min-width:0;flex:1 1 auto}vvd-hex-input::part(input),vvd-hex-input>input{width:100%;height:100%;box-sizing:border-box;border:0 none;border-radius:8px;background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-500);font:var(--vvd-typography-base);outline:transparent;padding-inline:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4)}vvd-hex-input::part(input):focus-visible,vvd-hex-input>input:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}vvd-hex-picker{width:auto;height:auto;gap:16px;inline-size:100%}vvd-hex-picker::part(saturation){border-radius:8px;block-size:120px}vvd-hex-picker::part(hue){flex:0 0 8px;border-radius:8px}vvd-hex-picker::part(hue-pointer){width:10px;height:10px}vvd-hex-picker::part(saturation-pointer){width:18px;height:18px}::part(popup-base){inline-size:max-content;min-block-size:var(--_color-picker-popup-min-inline-size, 264px);min-inline-size:var(--_color-picker-popup-min-inline-size, 264px)}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0 0 0 0)}", f = (r, e = 0, o = 1) => r > o ? o : r < e ? e : r, l = (r, e = 0, o = Math.pow(10, e)) => Math.round(o * r) / o, Se = (r) => Ie(P(r)), P = (r) => (r[0] === "#" && (r = r.substring(1)), r.length < 6 ? {
-  r: parseInt(r[0] + r[0], 16),
-  g: parseInt(r[1] + r[1], 16),
-  b: parseInt(r[2] + r[2], 16),
-  a: r.length === 4 ? l(parseInt(r[3] + r[3], 16) / 255, 2) : 1
+import { T as e, d as t, l as n, o as r, s as i, t as a, u as o } from "../bundled/vivid-element.js";
+import { n as s } from "../bundled/repeat.js";
+import { t as c } from "../bundled/ref.js";
+import { t as l } from "../bundled/when.js";
+import { t as u } from "../bundled/slotted.js";
+import { r as ee, t as te } from "../bundled/definition2.js";
+import { t as d } from "../bundled/decorate.js";
+import { t as f } from "../bundled/with-success-text.js";
+import { t as ne } from "../bundled/with-error-text.js";
+import { t as re } from "../bundled/with-contextual-help.js";
+import { t as ie } from "../bundled/trapped-focus.js";
+import { n as ae, t as oe } from "../bundled/delegates-aria.js";
+import { t as p } from "../bundled/class-names.js";
+import { i as m, t as se } from "../bundled/definition6.js";
+import { i as ce, t as le } from "../bundled/definition8.js";
+import { n as ue, r as de } from "../bundled/definition9.js";
+import { t as fe } from "../bundled/dialog.js";
+import { a as pe, t as me } from "../bundled/mixins.js";
+import { n as he, r as ge } from "../bundled/definition12.js";
+import { n as h, t as _e } from "../bundled/base-color-picker.js";
+//#region src/lib/color-picker/color-picker.scss?inline
+var ve = ".palette{grid-template-columns:repeat(var(--swatches-per-row,7), var(--_color-swatch-size,24px));display:grid}.swatch{background-color:var(--swatch-color);block-size:var(--_color-swatch-size,24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size,24px);border-radius:4px;padding:0;position:relative}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:none;outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;--focus-inset:-3px}:host{--_low-ink-color:var(--vvd-color-neutral-600);display:inline-block}.base{min-inline-size:var(--_color-picker-min-inline-size,280px);display:inline-block}.control{inline-size:100%}.button{box-sizing:border-box;background-color:var(--button-color,var(--vvd-color-canvas-text));block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));color:var(--vvd-color-canvas);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4);vertical-align:middle;border:0;border-radius:4px;align-items:center;margin:0;text-decoration:none;display:inline-flex}.button.contrast{color:var(--vvd-color-canvas-text)}.button:not(.disabled){cursor:pointer}.button.disabled{background-color:var(--vvd-color-neutral-300);color:var(--vvd-color-neutral-500);cursor:not-allowed}.button:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.button [data-vvd-component=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.dialog{min-inline-size:var(--_color-picker-popup-min-inline-size,264px);flex-direction:column;display:flex}.dialog .header{justify-content:space-between;align-items:center;padding-block:8px;padding-inline:16px;display:inline-flex}.dialog .header-title{font:var(--vvd-typography-base-extended-bold);margin-block:0}.dialog .body{flex-direction:column;gap:16px;margin-block-end:16px;padding-inline:16px;display:flex}.dialog .hex-input-wrapper{align-items:stretch;gap:8px;display:flex}.dialog .hex-input-wrapper [data-vvd-component=button]{flex:none}.dialog .footer{border-top:1px solid var(--vvd-color-neutral-200);padding:16px}.dialog .footer-header{margin-block-end:8px}.dialog .swatches-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.dialog .palette{gap:var(--_color-swatches-gap,8px)}vvd-hex-input{flex:auto;min-width:0}vvd-hex-input::part(input),vvd-hex-input>input{box-sizing:border-box;background-color:var(--vvd-color-canvas);width:100%;height:100%;box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-500);font:var(--vvd-typography-base);padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);border:0;border-radius:8px;outline:#0000}vvd-hex-input::part(input):focus-visible,vvd-hex-input>input:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}vvd-hex-picker{width:auto;height:auto;gap:16px;inline-size:100%}vvd-hex-picker::part(saturation){border-radius:8px;block-size:120px}vvd-hex-picker::part(hue){border-radius:8px;flex:0 0 8px}vvd-hex-picker::part(hue-pointer){width:10px;height:10px}vvd-hex-picker::part(saturation-pointer){width:18px;height:18px}::part(popup-base){inline-size:max-content;min-block-size:var(--_color-picker-popup-min-inline-size,264px);min-inline-size:var(--_color-picker-popup-min-inline-size,264px)}.visually-hidden{clip:rect(0 0 0 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}", g = (e, t = 0, n = 1) => e > n ? n : e < t ? t : e, _ = (e, t = 0, n = 10 ** t) => Math.round(n * e) / n;
+360 / (Math.PI * 2);
+var ye = (e) => we(v(e)), v = (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 ? _(parseInt(e[3] + e[3], 16) / 255, 2) : 1
 } : {
-  r: parseInt(r.substring(0, 2), 16),
-  g: parseInt(r.substring(2, 4), 16),
-  b: parseInt(r.substring(4, 6), 16),
-  a: r.length === 8 ? l(parseInt(r.substring(6, 8), 16) / 255, 2) : 1
-}), Ee = (r) => He(Te(r)), Pe = ({ h: r, s: e, v: o, a: t }) => {
-  const s = (200 - e) * o / 100;
-  return {
-    h: l(r),
-    s: l(s > 0 && s < 200 ? e * o / 100 / (s <= 100 ? s : 200 - s) * 100 : 0),
-    l: l(s / 2),
-    a: l(t, 2)
-  };
-}, T = (r) => {
-  const { h: e, s: o, l: t } = Pe(r);
-  return `hsl(${e}, ${o}%, ${t}%)`;
-}, Te = ({ h: r, s: e, v: o, a: t }) => {
-  r = r / 360 * 6, e = e / 100, o = o / 100;
-  const s = Math.floor(r), i = o * (1 - e), a = o * (1 - (r - s) * e), d = o * (1 - (1 - r + s) * e), C = s % 6;
-  return {
-    r: l([o, a, i, i, d, o][C] * 255),
-    g: l([d, o, o, a, i, i][C] * 255),
-    b: l([i, i, d, o, o, a][C] * 255),
-    a: l(t, 2)
-  };
-}, m = (r) => {
-  const e = r.toString(16);
-  return e.length < 2 ? "0" + e : e;
-}, He = ({ r, g: e, b: o, a: t }) => {
-  const s = t < 1 ? m(l(t * 255)) : "";
-  return "#" + m(r) + m(e) + m(o) + s;
-}, Ie = ({ r, g: e, b: o, a: t }) => {
-  const s = Math.max(r, e, o), i = s - Math.min(r, e, o), a = i ? s === r ? (e - o) / i : s === e ? 2 + (o - r) / i : 4 + (r - e) / i : 0;
-  return {
-    h: l(60 * (a < 0 ? a + 6 : a)),
-    s: l(s ? i / s * 100 : 0),
-    v: l(s / 255 * 100),
-    a: t
-  };
-}, U = (r, e) => {
-  if (r === e)
-    return !0;
-  for (const o in r)
-    if (r[o] !== e[o])
-      return !1;
-  return !0;
-}, ze = (r, e) => r.toLowerCase() === e.toLowerCase() ? !0 : U(P(r), P(e)), D = {}, A = (r) => {
-  let e = D[r];
-  return e || (e = document.createElement("template"), e.innerHTML = r, D[r] = e), e;
-}, M = (r, e, o) => {
-  r.dispatchEvent(new CustomEvent(e, {
-    bubbles: !0,
-    detail: o
-  }));
+	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 ? _(parseInt(e.substring(6, 8), 16) / 255, 2) : 1
+}), be = (e) => Ce(Se(e)), xe = ({ h: e, s: t, v: n, a: r }) => {
+	let i = (200 - t) * n / 100;
+	return {
+		h: _(e),
+		s: _(i > 0 && i < 200 ? t * n / 100 / (i <= 100 ? i : 200 - i) * 100 : 0),
+		l: _(i / 2),
+		a: _(r, 2)
+	};
+}, y = (e) => {
+	let { h: t, s: n, l: r } = xe(e);
+	return `hsl(${t}, ${n}%, ${r}%)`;
+}, Se = ({ 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: _([
+			n,
+			o,
+			a,
+			a,
+			s,
+			n
+		][c] * 255),
+		g: _([
+			s,
+			n,
+			n,
+			o,
+			a,
+			a
+		][c] * 255),
+		b: _([
+			a,
+			a,
+			s,
+			n,
+			n,
+			o
+		][c] * 255),
+		a: _(r, 2)
+	};
+}, b = (e) => {
+	let t = e.toString(16);
+	return t.length < 2 ? "0" + t : t;
+}, Ce = ({ r: e, g: t, b: n, a: r }) => {
+	let i = r < 1 ? b(_(r * 255)) : "";
+	return "#" + b(e) + b(t) + b(n) + i;
+}, we = ({ 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: _(60 * (o < 0 ? o + 6 : o)),
+		s: _(i ? a / i * 100 : 0),
+		v: _(i / 255 * 100),
+		a: r
+	};
+}, x = (e, t) => {
+	if (e === t) return !0;
+	for (let n in e) if (e[n] !== t[n]) return !1;
+	return !0;
+}, Te = (e, t) => e.toLowerCase() === t.toLowerCase() ? !0 : x(v(e), v(t)), S = {}, C = (e) => {
+	let t = S[e];
+	return t || (t = document.createElement("template"), t.innerHTML = e, S[e] = t), t;
+}, w = (e, t, n) => {
+	e.dispatchEvent(new CustomEvent(t, {
+		bubbles: !0,
+		detail: n
+	}));
+}, T = !1, E = (e) => "touches" in e, D = (e) => T && !E(e) ? !1 : (T ||= E(e), !0), O = (e, t) => {
+	let n = E(t) ? t.touches[0] : t, r = e.el.getBoundingClientRect();
+	w(e.el, "move", e.getMove({
+		x: g((n.pageX - (r.left + window.pageXOffset)) / r.width),
+		y: g((n.pageY - (r.top + window.pageYOffset)) / r.height)
+	}));
+}, Ee = (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)));
+}, k = class {
+	constructor(e, t, n, r) {
+		let i = C(`<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(T ? "touchmove" : "mousemove", this), t(T ? "touchend" : "mouseup", this);
+	}
+	handleEvent(e) {
+		switch (e.type) {
+			case "mousedown":
+			case "touchstart":
+				if (e.preventDefault(), !D(e) || !T && e.button != 0) return;
+				this.el.focus(), O(this, e), this.dragging = !0;
+				break;
+			case "mousemove":
+			case "touchmove":
+				e.preventDefault(), O(this, e);
+				break;
+			case "mouseup":
+			case "touchend":
+				this.dragging = !1;
+				break;
+			case "keydown":
+				Ee(this, e);
+				break;
+		}
+	}
+	style(e) {
+		e.forEach((e, t) => {
+			for (let n in e) this.nodes[t].style.setProperty(n, e[n]);
+		});
+	}
+}, De = class extends k {
+	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: y({
+				h: e,
+				s: 100,
+				v: 100,
+				a: 1
+			})
+		}]), this.el.setAttribute("aria-valuenow", `${_(e)}`);
+	}
+	getMove(e, t) {
+		return { h: t ? g(this.h + e.x * 360, 0, 360) : 360 * e.x };
+	}
+}, Oe = class extends k {
+	constructor(e) {
+		super(e, "saturation", "aria-label=\"Color\"", !0);
+	}
+	update(e) {
+		this.hsva = e, this.style([{
+			top: `${100 - e.v}%`,
+			left: `${e.s}%`,
+			color: y(e)
+		}, { "background-color": y({
+			h: e.h,
+			s: 100,
+			v: 100,
+			a: 1
+		}) }]), this.el.setAttribute("aria-valuetext", `Saturation ${_(e.s)}%, Brightness ${_(e.v)}%`);
+	}
+	getMove(e, t) {
+		return {
+			s: t ? g(this.hsva.s + e.x * 100, 0, 100) : e.x * 100,
+			v: t ? g(this.hsva.v - e.y * 100, 0, 100) : Math.round(100 - e.y * 100)
+		};
+	}
+}, ke = ":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)}", Ae = "[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}", je = "[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}", A = Symbol("same"), j = Symbol("color"), M = Symbol("hsva"), N = Symbol("update"), P = Symbol("parts"), F = Symbol("css"), I = Symbol("sliders"), L = class extends HTMLElement {
+	static get observedAttributes() {
+		return ["color"];
+	}
+	get [F]() {
+		return [
+			ke,
+			Ae,
+			je
+		];
+	}
+	get [I]() {
+		return [Oe, De];
+	}
+	get color() {
+		return this[j];
+	}
+	set color(e) {
+		if (!this[A](e)) {
+			let t = this.colorModel.toHsva(e);
+			this[N](t), this[j] = e;
+		}
+	}
+	constructor() {
+		super();
+		let e = C(`<style>${this[F].join("")}</style>`), t = this.attachShadow({ mode: "open" });
+		t.appendChild(e.content.cloneNode(!0)), t.addEventListener("move", this), this[P] = this[I].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[A](r) || (this.color = r);
+	}
+	handleEvent(e) {
+		let t = this[M], n = {
+			...t,
+			...e.detail
+		};
+		this[N](n);
+		let r;
+		!x(n, t) && !this[A](r = this.colorModel.fromHsva(n)) && (this[j] = r, w(this, "color-changed", { value: r }));
+	}
+	[A](e) {
+		return this.color && this.colorModel.equal(e, this.color);
+	}
+	[N](e) {
+		this[M] = e, this[P].forEach((t) => t.update(e));
+	}
+}, Me = {
+	defaultColor: "#000",
+	toHsva: ye,
+	fromHsva: ({ h: e, s: t, v: n }) => be({
+		h: e,
+		s: t,
+		v: n,
+		a: 1
+	}),
+	equal: Te,
+	fromAttr: (e) => e
+}, Ne = class extends L {
+	get colorModel() {
+		return Me;
+	}
+}, R = class extends Ne {};
+customElements.define("hex-color-picker", R);
+//#endregion
+//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/validate.js
+var Pe = /^#?([0-9A-F]{3,8})$/i, z = (e, t) => {
+	let n = Pe.exec(e), r = n ? n[1].length : 0;
+	return r === 3 || r === 6 || !!t && r === 4 || !!t && r === 8;
+}, Fe = C("<slot><input part=\"input\" spellcheck=\"false\"></slot>"), B = (e, t) => e.replace(/([^0-9A-F]+)/gi, "").substring(0, t ? 8 : 6), V = Symbol("alpha"), H = Symbol("color"), U = Symbol("saved"), W = Symbol("input"), G = Symbol("init"), K = Symbol("prefix"), q = Symbol("update"), Ie = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"alpha",
+			"color",
+			"prefixed"
+		];
+	}
+	get color() {
+		return this[H];
+	}
+	set color(e) {
+		this[H] = e, this[q](e);
+	}
+	get alpha() {
+		return this[V];
+	}
+	set alpha(e) {
+		this[V] = e, this.toggleAttribute("alpha", e);
+		let t = this.color;
+		t && !z(t, e) && (this.color = t.startsWith("#") ? t.substring(0, t.length === 5 ? 4 : 7) : t.substring(0, t.length === 4 ? 3 : 6));
+	}
+	get prefixed() {
+		return this[K];
+	}
+	set prefixed(e) {
+		this[K] = e, this.toggleAttribute("prefixed", e), this[q](this.color);
+	}
+	constructor() {
+		super();
+		let e = this.attachShadow({ mode: "open" });
+		e.appendChild(Fe.content.cloneNode(!0)), e.firstElementChild.addEventListener("slotchange", () => this[G](e));
+	}
+	connectedCallback() {
+		if (this[G](this.shadowRoot), this.hasOwnProperty("alpha")) {
+			let e = this.alpha;
+			delete this.alpha, this.alpha = e;
+		} else this.alpha = this.hasAttribute("alpha");
+		if (this.hasOwnProperty("prefixed")) {
+			let e = this.prefixed;
+			delete this.prefixed, this.prefixed = e;
+		} else this.prefixed = this.hasAttribute("prefixed");
+		if (this.hasOwnProperty("color")) {
+			let e = this.color;
+			delete this.color, this.color = e;
+		} else this.color == null ? this.color = this.getAttribute("color") || "" : this[H] && this[q](this[H]);
+	}
+	handleEvent(e) {
+		let { value: t } = e.target;
+		switch (e.type) {
+			case "input":
+				let e = B(t, this.alpha);
+				this[U] = this.color, (z(e, this.alpha) || t === "") && (this.color = e, this.dispatchEvent(new CustomEvent("color-changed", {
+					bubbles: !0,
+					detail: { value: e ? "#" + e : "" }
+				})));
+				break;
+			case "blur": t && !z(t, this.alpha) && (this.color = this[U]);
+		}
+	}
+	attributeChangedCallback(e, t, n) {
+		e === "color" && this.color !== n && (this.color = n);
+		let r = n != null;
+		e === "alpha" && this.alpha !== r && (this.alpha = r), e === "prefixed" && this.prefixed !== r && (this.prefixed = r);
+	}
+	[G](e) {
+		let t = this.querySelector("input");
+		if (!t) {
+			let n;
+			for (; n = this.firstChild;) n.remove();
+			t = e.querySelector("input");
+		}
+		t.addEventListener("input", this), t.addEventListener("blur", this), this[W] = t, this[q](this.color);
+	}
+	[q](e) {
+		this[W] && (this[W].value = e == null || e == "" ? "" : (this.prefixed ? "#" : "") + B(e, this.alpha));
+	}
+}, J = class extends Ie {};
+customElements.define("hex-input", J);
+//#endregion
+//#region src/lib/color-picker/color-picker.ts
+var Y = "vvd-hex-picker", X = "vvd-hex-input", Le = class extends R {
+	static {
+		this.displayName = "VvdHexPicker";
+	}
+}, Re = class extends J {
+	static {
+		this.displayName = "VvdHexInput";
+	}
 };
-let h = !1;
-const H = (r) => "touches" in r, Le = (r) => h && !H(r) ? !1 : (h || (h = H(r)), !0), B = (r, e) => {
-  const o = H(e) ? e.touches[0] : e, t = r.el.getBoundingClientRect();
-  M(r.el, "move", r.getMove({
-    x: f((o.pageX - (t.left + window.pageXOffset)) / t.width),
-    y: f((o.pageY - (t.top + window.pageYOffset)) / t.height)
-  }));
-}, Ae = (r, e) => {
-  const o = e.keyCode;
-  o > 40 || r.xy && o < 37 || o < 33 || (e.preventDefault(), M(r.el, "move", r.getMove({
-    x: o === 39 ? 0.01 : o === 37 ? -0.01 : o === 34 ? 0.05 : o === 33 ? -0.05 : o === 35 ? 1 : o === 36 ? -1 : 0,
-    y: o === 40 ? 0.01 : o === 38 ? -0.01 : 0
-  }, !0)));
+/* v8 ignore if -- @preserve */
+customElements.get(Y) || customElements.define(Y, Le), customElements.get(X) || customElements.define(X, Re);
+var Z = Y, Q = X, $ = class extends re(me(ne(f(oe(ie(_e(a))))))) {
+	constructor(...e) {
+		super(...e), this.disableSavedColors = !1, this.savedColors = [], this.maxSwatches = 6, this.copyIconName = "copy-2-line", this._copyValueToClipboard = async (e) => {
+			try {
+				await navigator.clipboard.writeText(e), this._setTemporaryCopyIcon("check-circle-line"), this._ariaLiveDescription = this.locale.colorPicker.copySuccessMessage(e);
+			} catch {
+				alert(this.locale.colorPicker.copyErrorText), this._setTemporaryCopyIcon("error-line"), this._ariaLiveDescription = this.locale.colorPicker.copyErrorText;
+			}
+		}, this._ariaLiveDescription = "";
+	}
+	static {
+		this.HEX_COLOR_PATTERN = /^#(([0-9a-fA-F]{2}){3}|([0-9a-fA-F]){3})$/;
+	}
+	placeholderChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.placeholder = this.placeholder);
+	}
+	handleChange() {
+		this.$emit("change");
+	}
+	openChanged(e, t) {
+		t && this.isConnected && requestAnimationFrame(() => {
+			this._refreshCanvasColor();
+		});
+	}
+	savedColorsKeyChanged() {
+		this.savedColors = this._loadSavedColors();
+	}
+	get _savedColorsStorageKey() {
+		return this.savedColorsKey ? this.savedColorsKey : `vvd-saved-colors:${this.tagName.toLowerCase()}`;
+	}
+	_handleColorSaving() {
+		this._saveCurrentColor();
+	}
+	_saveCurrentColor() {
+		let e = this.value;
+		if (typeof e != "string" || !h(e)) return;
+		let t = Array.isArray(this.savedColors) ? [...this.savedColors] : [], n = t.findIndex((t) => t?.value === e);
+		n !== -1 && t.splice(n, 1), t.unshift({ value: e }), this.savedColors = t.slice(0, this._maxSwatchesNormalized), this._setSavedColors(this.savedColors);
+	}
+	_loadSavedColors() {
+		try {
+			let e = localStorage.getItem(this._savedColorsStorageKey);
+			if (!e) return [];
+			let t = JSON.parse(e);
+			return Array.isArray(t) ? t.filter((e) => e && typeof e.value == "string" && h(e.value)).map((e) => ({
+				value: e.value,
+				label: typeof e.label == "string" ? e.label : void 0
+			})) : [];
+		} catch {
+			return [];
+		}
+	}
+	_setSavedColors(e) {
+		try {
+			localStorage.setItem(this._savedColorsStorageKey, JSON.stringify(e));
+		} catch {}
+	}
+	get allSwatches() {
+		let e = Array.isArray(this.swatches) ? this.swatches : [], t = Array.isArray(this.savedColors) ? this.savedColors : [], n = /* @__PURE__ */ new Set(), r = [], i = (e) => {
+			!e || typeof e.value != "string" || !h(e.value) || n.has(e.value) || (n.add(e.value), r.push(e));
+		};
+		return this.disableSavedColors || t.forEach(i), e.forEach(i), r.slice(0, this._maxSwatchesNormalized);
+	}
+	get _maxSwatchesNormalized() {
+		return Number.isFinite(this.maxSwatches) ? Math.max(0, Math.floor(this.maxSwatches)) : 0;
+	}
+	maxSwatchesChanged() {
+		let e = this._maxSwatchesNormalized;
+		this.savedColors?.length > e && (this.savedColors = this.savedColors.slice(0, e), this._setSavedColors(this.savedColors));
+	}
+	_onPickerColorChanged(e) {
+		typeof e.detail?.value == "string" && (this.value = e.detail?.value);
+	}
+	valueChanged(e, t) {
+		this._vcHexPickerEl && typeof t == "string" && (this._vcHexPickerEl.color = t), this._vcHexInputEl && typeof t == "string" && (this._vcHexInputEl.color = t);
+	}
+	_onTextFieldInput(e) {
+		this.value = e.currentTarget.value;
+	}
+	get _buttonColor() {
+		return this._canvasColor || this._refreshCanvasColor(), this.value && h(this.value) ? this.value : "var(--vvd-color-canvas-text)";
+	}
+	_onButtonClick() {
+		this.open = !this.open;
+	}
+	_handleCloseRequest() {
+		this.open = !1;
+	}
+	_isInPath(e, t) {
+		if (!t) return !1;
+		let n = e.composedPath?.();
+		return !!(n && n.includes(t));
+	}
+	#e = (e) => {
+		this._isInPath(e, this._buttonEl) || this._isInPath(e, this._popupEl) || (this.open = !1);
+	};
+	connectedCallback() {
+		super.connectedCallback(), this.savedColors = this._loadSavedColors(), document.addEventListener("mousedown", this.#e, !0);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), document.removeEventListener("mousedown", this.#e, !0);
+	}
+	#t = null;
+	_setTemporaryCopyIcon(e, t = 2e3) {
+		this.copyIconName = e, this.#t && clearTimeout(this.#t), this.#t = setTimeout(() => {
+			this.copyIconName = "copy-2-line", this.#t = null;
+		}, t);
+	}
+	_onBaseKeydown(e) {
+		return this.open && fe(e) ? (this.open = !1, !1) : !this._trappedFocus(e, () => this._focusableElsWithinDialog());
+	}
+	_focusableElsWithinDialog() {
+		return this._popupEl.querySelectorAll("button:not([role=\"gridcell\"]), [data-vvd-component=\"button\"], vwc-button:not([role=\"gridcell\"])");
+	}
+	_handleCellKeydown(e, t, n, r) {
+		if (e.key === "Tab") {
+			e.preventDefault();
+			let t = this._focusableElsWithinDialog(), n = Array.prototype.indexOf.call(t, e.currentTarget);
+			return t[e.shiftKey ? (n - 1 + t.length) % t.length : (n + 1) % t.length]?.focus(), !1;
+		}
+		return super._handleCellKeydown(e, t, n, r);
+	}
+	_handleSwatchSelection(e) {
+		this.value !== e && (this._ariaLiveDescription = this.locale.colorPicker.selectionSuccessMessage(e)), super._handleSwatchSelection(e);
+	}
 };
-class Y {
-  constructor(e, o, t, s) {
-    const i = A(`<div role="slider" tabindex="0" part="${o}" ${t}><div part="${o}-pointer"></div></div>`);
-    e.appendChild(i.content.cloneNode(!0));
-    const a = e.querySelector(`[part=${o}]`);
-    a.addEventListener("mousedown", this), a.addEventListener("touchstart", this), a.addEventListener("keydown", this), this.el = a, this.xy = s, this.nodes = [a.firstChild, a];
-  }
-  set dragging(e) {
-    const o = e ? document.addEventListener : document.removeEventListener;
-    o(h ? "touchmove" : "mousemove", this), o(h ? "touchend" : "mouseup", this);
-  }
-  handleEvent(e) {
-    switch (e.type) {
-      case "mousedown":
-      case "touchstart":
-        if (e.preventDefault(), !Le(e) || !h && e.button != 0)
-          return;
-        this.el.focus(), B(this, e), this.dragging = !0;
-        break;
-      case "mousemove":
-      case "touchmove":
-        e.preventDefault(), B(this, e);
-        break;
-      case "mouseup":
-      case "touchend":
-        this.dragging = !1;
-        break;
-      case "keydown":
-        Ae(this, e);
-        break;
-    }
-  }
-  style(e) {
-    e.forEach((o, t) => {
-      for (const s in o)
-        this.nodes[t].style.setProperty(s, o[s]);
-    });
-  }
-}
-class Me extends Y {
-  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({ h: e, s: 100, v: 100, a: 1 })
-      }
-    ]), this.el.setAttribute("aria-valuenow", `${l(e)}`);
-  }
-  getMove(e, o) {
-    return { h: o ? f(this.h + e.x * 360, 0, 360) : 360 * e.x };
-  }
-}
-class Fe extends Y {
-  constructor(e) {
-    super(e, "saturation", 'aria-label="Color"', !0);
-  }
-  update(e) {
-    this.hsva = e, this.style([
-      {
-        top: `${100 - e.v}%`,
-        left: `${e.s}%`,
-        color: T(e)
-      },
-      {
-        "background-color": T({ h: e.h, s: 100, v: 100, a: 1 })
-      }
-    ]), this.el.setAttribute("aria-valuetext", `Saturation ${l(e.s)}%, Brightness ${l(e.v)}%`);
-  }
-  getMove(e, o) {
-    return {
-      s: o ? f(this.hsva.s + e.x * 100, 0, 100) : e.x * 100,
-      v: o ? f(this.hsva.v - e.y * 100, 0, 100) : Math.round(100 - e.y * 100)
-    };
-  }
-}
-const Ne = ':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)}', De = "[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}", g = /* @__PURE__ */ Symbol("same"), $ = /* @__PURE__ */ Symbol("color"), O = /* @__PURE__ */ Symbol("hsva"), k = /* @__PURE__ */ Symbol("update"), R = /* @__PURE__ */ Symbol("parts"), K = /* @__PURE__ */ Symbol("css"), V = /* @__PURE__ */ Symbol("sliders");
-let Oe = class extends HTMLElement {
-  static get observedAttributes() {
-    return ["color"];
-  }
-  get [K]() {
-    return [Ne, De, Be];
-  }
-  get [V]() {
-    return [Fe, Me];
-  }
-  get color() {
-    return this[$];
-  }
-  set color(e) {
-    if (!this[g](e)) {
-      const o = this.colorModel.toHsva(e);
-      this[k](o), this[$] = e;
-    }
-  }
-  constructor() {
-    super();
-    const e = A(`<style>${this[K].join("")}</style>`), o = this.attachShadow({ mode: "open" });
-    o.appendChild(e.content.cloneNode(!0)), o.addEventListener("move", this), this[R] = this[V].map((t) => new t(o));
-  }
-  connectedCallback() {
-    if (this.hasOwnProperty("color")) {
-      const e = this.color;
-      delete this.color, this.color = e;
-    } else this.color || (this.color = this.colorModel.defaultColor);
-  }
-  attributeChangedCallback(e, o, t) {
-    const s = this.colorModel.fromAttr(t);
-    this[g](s) || (this.color = s);
-  }
-  handleEvent(e) {
-    const o = this[O], t = { ...o, ...e.detail };
-    this[k](t);
-    let s;
-    !U(t, o) && !this[g](s = this.colorModel.fromHsva(t)) && (this[$] = s, M(this, "color-changed", { value: s }));
-  }
-  [g](e) {
-    return this.color && this.colorModel.equal(e, this.color);
-  }
-  [k](e) {
-    this[O] = e, this[R].forEach((o) => o.update(e));
-  }
-};
-const Re = {
-  defaultColor: "#000",
-  toHsva: Se,
-  fromHsva: ({ h: r, s: e, v: o }) => Ee({ h: r, s: e, v: o, a: 1 }),
-  equal: ze,
-  fromAttr: (r) => r
-};
-class Ke extends Oe {
-  get colorModel() {
-    return Re;
-  }
-}
-class Q extends Ke {
-}
-customElements.define("hex-color-picker", Q);
-const Ve = /^#?([0-9A-F]{3,8})$/i, w = (r, e) => {
-  const o = Ve.exec(r), t = o ? o[1].length : 0;
-  return t === 3 || // '#rgb' format
-  t === 6 || // '#rrggbb' format
-  !!e && t === 4 || // '#rgba' format
-  !!e && t === 8;
-}, qe = A('<slot><input part="input" spellcheck="false"></slot>'), q = (r, e) => r.replace(/([^0-9A-F]+)/gi, "").substring(0, e ? 8 : 6), W = /* @__PURE__ */ Symbol("alpha"), x = /* @__PURE__ */ Symbol("color"), X = /* @__PURE__ */ Symbol("saved"), _ = /* @__PURE__ */ Symbol("input"), S = /* @__PURE__ */ Symbol("init"), j = /* @__PURE__ */ Symbol("prefix"), u = /* @__PURE__ */ Symbol("update");
-class We extends HTMLElement {
-  static get observedAttributes() {
-    return ["alpha", "color", "prefixed"];
-  }
-  get color() {
-    return this[x];
-  }
-  set color(e) {
-    this[x] = e, this[u](e);
-  }
-  get alpha() {
-    return this[W];
-  }
-  set alpha(e) {
-    this[W] = e, this.toggleAttribute("alpha", e);
-    const o = this.color;
-    o && !w(o, e) && (this.color = o.startsWith("#") ? o.substring(0, o.length === 5 ? 4 : 7) : o.substring(0, o.length === 4 ? 3 : 6));
-  }
-  get prefixed() {
-    return this[j];
-  }
-  set prefixed(e) {
-    this[j] = e, this.toggleAttribute("prefixed", e), this[u](this.color);
-  }
-  constructor() {
-    super();
-    const e = this.attachShadow({ mode: "open" });
-    e.appendChild(qe.content.cloneNode(!0)), e.firstElementChild.addEventListener("slotchange", () => this[S](e));
-  }
-  connectedCallback() {
-    if (this[S](this.shadowRoot), this.hasOwnProperty("alpha")) {
-      const e = this.alpha;
-      delete this.alpha, this.alpha = e;
-    } else
-      this.alpha = this.hasAttribute("alpha");
-    if (this.hasOwnProperty("prefixed")) {
-      const e = this.prefixed;
-      delete this.prefixed, this.prefixed = e;
-    } else
-      this.prefixed = this.hasAttribute("prefixed");
-    if (this.hasOwnProperty("color")) {
-      const e = this.color;
-      delete this.color, this.color = e;
-    } else this.color == null ? this.color = this.getAttribute("color") || "" : this[x] && this[u](this[x]);
-  }
-  handleEvent(e) {
-    const o = e.target, { value: t } = o;
-    switch (e.type) {
-      case "input":
-        const s = q(t, this.alpha);
-        this[X] = this.color, (w(s, this.alpha) || t === "") && (this.color = s, this.dispatchEvent(new CustomEvent("color-changed", {
-          bubbles: !0,
-          detail: { value: s ? "#" + s : "" }
-        })));
-        break;
-      case "blur":
-        t && !w(t, this.alpha) && (this.color = this[X]);
-    }
-  }
-  attributeChangedCallback(e, o, t) {
-    e === "color" && this.color !== t && (this.color = t);
-    const s = t != null;
-    e === "alpha" && this.alpha !== s && (this.alpha = s), e === "prefixed" && this.prefixed !== s && (this.prefixed = s);
-  }
-  [S](e) {
-    let o = this.querySelector("input");
-    if (!o) {
-      let t;
-      for (; t = this.firstChild; )
-        t.remove();
-      o = e.querySelector("input");
-    }
-    o.addEventListener("input", this), o.addEventListener("blur", this), this[_] = o, this[u](this.color);
-  }
-  [u](e) {
-    this[_] && (this[_].value = e == null || e == "" ? "" : (this.prefixed ? "#" : "") + q(e, this.alpha));
-  }
-}
-class Z extends We {
-}
-customElements.define("hex-input", Z);
-var Xe = Object.defineProperty, p = (r, e, o, t) => {
-  for (var s = void 0, i = r.length - 1, a; i >= 0; i--)
-    (a = r[i]) && (s = a(e, o, s) || s);
-  return s && Xe(e, o, s), s;
-};
-const I = "vvd-hex-picker", z = "vvd-hex-input";
-class je extends Q {
-  static {
-    this.displayName = "VvdHexPicker";
-  }
-}
-class Ge extends Z {
-  static {
-    this.displayName = "VvdHexInput";
-  }
-}
-customElements.get(I) || customElements.define(I, je);
-customElements.get(z) || customElements.define(z, Ge);
-const G = I, J = z;
-class c extends ve(
-  ne(
-    fe(
-      be(
-        de(me(ue(ee)))
-      )
-    )
-  )
-) {
-  constructor() {
-    super(...arguments), this.disableSavedColors = !1, this.savedColors = [], this.maxSwatches = 6, this.#t = (e) => {
-      this._isInPath(e, this._buttonEl) || this._isInPath(e, this._popupEl) || (this.open = !1);
-    }, this.copyIconName = "copy-2-line", this.#e = null, this._copyValueToClipboard = async (e) => {
-      try {
-        await navigator.clipboard.writeText(e), this._setTemporaryCopyIcon("check-circle-line"), this._ariaLiveDescription = this.locale.colorPicker.copySuccessMessage(e);
-      } catch {
-        alert(this.locale.colorPicker.copyErrorText), this._setTemporaryCopyIcon("error-line"), this._ariaLiveDescription = this.locale.colorPicker.copyErrorText;
-      }
-    }, this._ariaLiveDescription = "";
-  }
-  static {
-    this.HEX_COLOR_PATTERN = /^#(([0-9a-fA-F]{2}){3}|([0-9a-fA-F]){3})$/;
-  }
-  /**
-   * @internal
-   */
-  placeholderChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.placeholder = this.placeholder);
-  }
-  /**
-   * Change event handler for inner control.
-   * @remarks
-   * @internal
-   */
-  handleChange() {
-    this.$emit("change");
-  }
-  /**
-   * @internal
-   */
-  openChanged(e, o) {
-    o && this.isConnected && requestAnimationFrame(() => {
-      this._refreshCanvasColor();
-    });
-  }
-  /**
-   * @internal
-   */
-  savedColorsKeyChanged() {
-    this.savedColors = this._loadSavedColors();
-  }
-  /**
-   * @internal
-   */
-  get _savedColorsStorageKey() {
-    return this.savedColorsKey ? this.savedColorsKey : `vvd-saved-colors:${this.tagName.toLowerCase()}`;
-  }
-  /**
-   * @internal
-   */
-  _handleColorSaving() {
-    this._saveCurrentColor();
-  }
-  /**
-   * @internal
-   */
-  _saveCurrentColor() {
-    const e = this.value;
-    if (typeof e != "string" || !b(e)) return;
-    const o = Array.isArray(this.savedColors) ? [...this.savedColors] : [], t = o.findIndex((s) => s?.value === e);
-    t !== -1 && o.splice(t, 1), o.unshift({ value: e }), this.savedColors = o.slice(0, this._maxSwatchesNormalized), this._setSavedColors(this.savedColors);
-  }
-  /**
-   * @internal
-   */
-  _loadSavedColors() {
-    try {
-      const e = localStorage.getItem(this._savedColorsStorageKey);
-      if (!e) return [];
-      const o = JSON.parse(e);
-      return Array.isArray(o) ? o.filter(
-        (t) => t && typeof t.value == "string" && b(t.value)
-      ).map((t) => ({
-        value: t.value,
-        label: typeof t.label == "string" ? t.label : void 0
-      })) : [];
-    } catch {
-      return [];
-    }
-  }
-  /**
-   * @internal
-   */
-  _setSavedColors(e) {
-    try {
-      localStorage.setItem(
-        this._savedColorsStorageKey,
-        JSON.stringify(e)
-      );
-    } catch {
-    }
-  }
-  /**
-   * Get all color swatches combined, both from swatches property and saved colors
-   * @internal
-   */
-  get allSwatches() {
-    const e = Array.isArray(this.swatches) ? this.swatches : [], o = Array.isArray(this.savedColors) ? this.savedColors : [], t = /* @__PURE__ */ new Set(), s = [], i = (a) => {
-      !a || typeof a.value != "string" || !b(a.value) || t.has(a.value) || (t.add(a.value), s.push(a));
-    };
-    return this.disableSavedColors || o.forEach(i), e.forEach(i), s.slice(0, this._maxSwatchesNormalized);
-  }
-  /**
-   * @internal
-   */
-  get _maxSwatchesNormalized() {
-    return Number.isFinite(this.maxSwatches) ? Math.max(0, Math.floor(this.maxSwatches)) : 0;
-  }
-  /**
-   * @internal
-   */
-  maxSwatchesChanged() {
-    const e = this._maxSwatchesNormalized;
-    this.savedColors?.length > e && (this.savedColors = this.savedColors.slice(0, e), this._setSavedColors(this.savedColors));
-  }
-  /**
-   * @internal
-   */
-  _onPickerColorChanged(e) {
-    typeof e.detail?.value == "string" && (this.value = e.detail?.value);
-  }
-  /**
-   * @internal
-   */
-  valueChanged(e, o) {
-    this._vcHexPickerEl && typeof o == "string" && (this._vcHexPickerEl.color = o), this._vcHexInputEl && typeof o == "string" && (this._vcHexInputEl.color = o);
-  }
-  /**
-   * @internal
-   */
-  _onTextFieldInput(e) {
-    const o = e.currentTarget;
-    this.value = o.value;
-  }
-  /**
-   * @internal
-   */
-  get _buttonColor() {
-    return this._canvasColor || this._refreshCanvasColor(), this.value && b(this.value) ? this.value : "var(--vvd-color-canvas-text)";
-  }
-  /**
-   * @internal
-   */
-  _onButtonClick() {
-    this.open = !this.open;
-  }
-  /**
-   * @internal
-   */
-  _handleCloseRequest() {
-    this.open = !1;
-  }
-  /**
-   * @internal
-   */
-  _isInPath(e, o) {
-    if (!o) return !1;
-    const t = e.composedPath?.();
-    return !!(t && t.includes(o));
-  }
-  #t;
-  connectedCallback() {
-    super.connectedCallback(), this.savedColors = this._loadSavedColors(), document.addEventListener("mousedown", this.#t, !0);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener(
-      "mousedown",
-      this.#t,
-      !0
-    );
-  }
-  #e;
-  /**
-   * @internal
-   */
-  _setTemporaryCopyIcon(e, o = 2e3) {
-    this.copyIconName = e, this.#e && clearTimeout(this.#e), this.#e = setTimeout(() => {
-      this.copyIconName = "copy-2-line", this.#e = null;
-    }, o);
-  }
-  // --- Trapped focus ---
-  /**
-   * @internal
-   */
-  _onBaseKeydown(e) {
-    return this.open && he(e) ? (this.open = !1, !1) : !this._trappedFocus(e, () => this._focusableElsWithinDialog());
-  }
-  /**
-   * @internal
-   */
-  _focusableElsWithinDialog() {
-    return this._popupEl.querySelectorAll(
-      'button:not([role="gridcell"]), [data-vvd-component="button"], vwc-button:not([role="gridcell"])'
-    );
-  }
-  /**
-   * @internal
-   */
-  _handleCellKeydown(e, o, t, s) {
-    if (e.key === "Tab") {
-      e.preventDefault();
-      const i = this._focusableElsWithinDialog(), a = Array.prototype.indexOf.call(
-        i,
-        e.currentTarget
-      ), d = e.shiftKey ? (a - 1 + i.length) % i.length : (a + 1) % i.length;
-      return i[d]?.focus(), !1;
-    }
-    return super._handleCellKeydown(e, o, t, s);
-  }
-  /**
-   * @internal
-   */
-  _handleSwatchSelection(e) {
-    this.value !== e && (this._ariaLiveDescription = this.locale.colorPicker.selectionSuccessMessage(e)), super._handleSwatchSelection(e);
-  }
-}
-p([
-  y
-], c.prototype, "placeholder");
-p([
-  y({ attribute: "saved-colors-key" })
-], c.prototype, "savedColorsKey");
-p([
-  y({
-    mode: "boolean",
-    attribute: "disable-saved-colors"
-  })
-], c.prototype, "disableSavedColors");
-p([
-  L
-], c.prototype, "savedColors");
-p([
-  y({
-    attribute: "max-swatches",
-    mode: "fromView",
-    converter: te
-  })
-], c.prototype, "maxSwatches");
-p([
-  L
-], c.prototype, "copyIconName");
-p([
-  L
-], c.prototype, "_ariaLiveDescription");
-function Je(r, e) {
-  return n`
-		<${r} 
+d([n], $.prototype, "placeholder", void 0), d([n({ attribute: "saved-colors-key" })], $.prototype, "savedColorsKey", void 0), d([n({
+	mode: "boolean",
+	attribute: "disable-saved-colors"
+})], $.prototype, "disableSavedColors", void 0), d([e], $.prototype, "savedColors", void 0), d([n({
+	attribute: "max-swatches",
+	mode: "fromView",
+	converter: o
+})], $.prototype, "maxSwatches", void 0), d([e], $.prototype, "copyIconName", void 0), d([e], $.prototype, "_ariaLiveDescription", void 0);
+//#endregion
+//#region src/lib/color-picker/color-picker.template.ts
+function ze(e, n) {
+	return t`
+		<${e} 
 			id="text-field"
-			class="${(t) => N("control")}"
-			pattern="${c.HEX_COLOR_PATTERN.source}"
+			class="${(e) => p("control")}"
+			pattern="${$.HEX_COLOR_PATTERN.source}"
 			maxlength="7"
-			label="${(t) => t.label}"
-			:value="${(t) => t.value}"
-			placeholder="${(t) => t.placeholder}"
-			helper-text="${(t) => t.helperText}"
-			error-text="${(t) => t.errorValidationMessage}"
-			success-text="${(t) => t.successText}"
-			?disabled="${(t) => t.disabled}"
-			?required="${(t) => t.required}"
-			@input='${(t, s) => t._onTextFieldInput(s.event)}'
-			@change="${(t) => t.handleChange()}"
-			@blur="${(t) => {
-    t.$emit("blur", void 0, { bubbles: !1 });
-  }}"
-			@focus="${(t) => {
-    t.$emit("focus", void 0, { bubbles: !1 });
-  }}"
-			${pe()}
-			${v("_textFieldEl")}
+			label="${(e) => e.label}"
+			:value="${(e) => e.value}"
+			placeholder="${(e) => e.placeholder}"
+			helper-text="${(e) => e.helperText}"
+			error-text="${(e) => e.errorValidationMessage}"
+			success-text="${(e) => e.successText}"
+			?disabled="${(e) => e.disabled}"
+			?required="${(e) => e.required}"
+			@input='${(e, t) => e._onTextFieldInput(t.event)}'
+			@change="${(e) => e.handleChange()}"
+			@blur="${(e) => {
+		e.$emit("blur", void 0, { bubbles: !1 });
+	}}"
+			@focus="${(e) => {
+		e.$emit("focus", void 0, { bubbles: !1 });
+	}}"
+			${ae()}
+			${c("_textFieldEl")}
 		>
 			<button 
-				aria-label="${(t) => t.locale.colorPicker.pickerButtonLabel}"
-				aria-expanded="${(t) => t.open}"
+				aria-label="${(e) => e.locale.colorPicker.pickerButtonLabel}"
+				aria-expanded="${(e) => e.open}"
   			aria-haspopup="dialog"
-				class="button ${(t) => N(
-    t._applyContrastClass(t._buttonColor) ? "contrast" : "",
-    t.disabled ? "disabled" : ""
-  )}" 
-				style="--button-color: ${(t) => t._buttonColor};" 
-				?disabled="${(t) => t.disabled}"
-				@click="${(t) => t._onButtonClick()}"
+				class="button ${(e) => p(e._applyContrastClass(e._buttonColor) ? "contrast" : "", e.disabled ? "disabled" : "")}" 
+				style="--button-color: ${(e) => e._buttonColor};" 
+				?disabled="${(e) => e.disabled}"
+				@click="${(e) => e._onButtonClick()}"
 				slot="action-items" 
-				${v("_buttonEl")}>
-				<${e} name="edit-line"></${e}>
+				${c("_buttonEl")}>
+				<${n} name="edit-line"></${n}>
 			</button>
 			<slot
-				slot="${(t) => t._helperTextSlottedContent?.length ? "helper-text" : void 0}"
+				slot="${(e) => e._helperTextSlottedContent?.length ? "helper-text" : void 0}"
 				name="helper-text"
-				${F("_helperTextSlottedContent")}
+				${u("_helperTextSlottedContent")}
 			></slot>
 			<slot
-				slot='${(t) => t._contextualHelpSlottedContent?.length ? "contextual-help" : void 0}'
+				slot='${(e) => e._contextualHelpSlottedContent?.length ? "contextual-help" : void 0}'
 				name='contextual-help'
-				${F("_contextualHelpSlottedContent")}
+				${u("_contextualHelpSlottedContent")}
 			></slot>
-		</${r}>
+		</${e}>
 	`;
 }
-function Ue(r, e) {
-  return n`
+function Be(e, n) {
+	return t`
 		<div class="header">
 			<h2 class="header-title" id="color-picker-title">
-				<slot name="popup-text">${(o) => o.locale.colorPicker.popupLabel}</slot>
+				<slot name="popup-text">${(e) => e.locale.colorPicker.popupLabel}</slot>
 			</h2>
-			<${r} size="condensed" 
-				aria-label="${(o) => o.locale.colorPicker.closeButtonLabel}" 
-				@click="${(o) => o._handleCloseRequest()}">
-				<${e} slot="icon" name="close-line"></${e}>
-			</${r}>
+			<${e} size="condensed" 
+				aria-label="${(e) => e.locale.colorPicker.closeButtonLabel}" 
+				@click="${(e) => e._handleCloseRequest()}">
+				<${n} slot="icon" name="close-line"></${n}>
+			</${e}>
 		</div>
 	`;
 }
-function Ye(r, e, o) {
-  return n`
+function Ve(e, n, r) {
+	return t`
 		<div class="body">
-			<${n.partial(G)}
+			<${t.partial(Z)}
 				part="hex-picker"
-				color="${(t) => t.value}"
-				@color-changed="${(t, s) => t._onPickerColorChanged(s.event)}"
-				${v("_vcHexPickerEl")}
-			></${n.partial(G)}>
+				color="${(e) => e.value}"
+				@color-changed="${(e, t) => e._onPickerColorChanged(t.event)}"
+				${c("_vcHexPickerEl")}
+			></${t.partial(Z)}>
 			<div class="hex-input-wrapper">
-				<${n.partial(J)}
+				<${t.partial(Q)}
 					part="hex-input"
 					prefixed
-					color="${(t) => t.value}"
-					@color-changed="${(t, s) => t._onPickerColorChanged(s.event)}"
-					${v("_vcHexInputEl")}
+					color="${(e) => e.value}"
+					@color-changed="${(e, t) => e._onPickerColorChanged(t.event)}"
+					${c("_vcHexInputEl")}
 				>
-					<input name="hex-code-input" aria-label="${(t) => t.locale.colorPicker.hexInputLabel}" 
-						placeholder="${(t) => t.placeholder}"
-    				@blur="${(t, s) => s.event.stopImmediatePropagation()}"
+					<input name="hex-code-input" aria-label="${(e) => e.locale.colorPicker.hexInputLabel}" 
+						placeholder="${(e) => e.placeholder}"
+    				@blur="${(e, t) => t.event.stopImmediatePropagation()}"
 						part="input">
-				</${n.partial(J)}>
-				<${o} placement="top" 
-					text="${(t) => t.locale.colorPicker.copyButtonLabel}" 
+				</${t.partial(Q)}>
+				<${r} placement="top" 
+					text="${(e) => e.locale.colorPicker.copyButtonLabel}" 
 					exportparts="vvd-theme-alternate">
-					<${r} 
+					<${e} 
 						slot="anchor" size="normal" 
-						aria-label="${(t) => t.locale.colorPicker.copyButtonLabel}" 
-						@click="${(t) => t._copyValueToClipboard(t.value)}">
-						<${e} slot="icon" name="${(t) => t.copyIconName}"></${e}>
-					</${r}>
-				</${o}>
+						aria-label="${(e) => e.locale.colorPicker.copyButtonLabel}" 
+						@click="${(e) => e._copyValueToClipboard(e.value)}">
+						<${n} slot="icon" name="${(e) => e.copyIconName}"></${n}>
+					</${e}>
+				</${r}>
 			</div>
 		</div>
 	`;
 }
-function Qe(r, e, o) {
-  return n`
+function He(e, n, r) {
+	return t`
 		<div class="footer">
 			<div class="footer-header">
 				<span class="footer-title" id="color-picker-footer-title"
 					><slot name="swatches-text"
-						>${(t) => t.locale.colorPicker.swatchesLabel}</slot
+						>${(e) => e.locale.colorPicker.swatchesLabel}</slot
 					></span
 				>
-				${E((t) => !t.disableSavedColors, Ze())}
+				${l((e) => !e.disableSavedColors, Ue())}
 			</div>
 			<div
 				class="palette"
 				role="grid"
-				aria-rowcount="${(t) => Math.ceil(t.allSwatches.length / t._getRowLength())}"
-				aria-colcount="${(t) => t._getRowLength()}"
-				style="--swatches-per-row: ${(t) => t._getRowLength()};"
+				aria-rowcount="${(e) => Math.ceil(e.allSwatches.length / e._getRowLength())}"
+				aria-colcount="${(e) => e._getRowLength()}"
+				style="--swatches-per-row: ${(e) => e._getRowLength()};"
 				aria-labelledby="color-picker-footer-title"
 			>
-				${we(
-    (t) => t.allSwatches,
-    (t) => t._renderColorSwatch(e, o),
-    { positioning: !0 }
-  )}
-				${E(
-    (t) => !t.disableSavedColors,
-    n`
-						<${o} placement="top" 
-							text="${(t) => t.locale.colorPicker.saveButtonLabel}" 
+				${s((e) => e.allSwatches, (e) => e._renderColorSwatch(n, r), { positioning: !0 })}
+				${l((e) => !e.disableSavedColors, t`
+						<${r} placement="top" 
+							text="${(e) => e.locale.colorPicker.saveButtonLabel}" 
 							exportparts="vvd-theme-alternate">
-							<${r}
+							<${e}
 								slot="anchor"
 								appearance="outlined"
 								size="super-condensed"
 								role="gridcell"
-								tabindex="${(t) => t.allSwatches.length ? "-1" : "0"}"
-								aria-label="${(t) => t.locale.colorPicker.saveButtonLabel}"
-								@click="${(t) => t._saveCurrentColor()}"
-								@keydown="${(t, s) => t._handleCellKeydown(
-      s.event,
-      t.value,
-      t.allSwatches.length,
-      !0
-    )}">
-								<${e} slot="icon" name="plus-line"></${e}>
-							</${r}>
-						</${o}>
-					`
-  )}
+								tabindex="${(e) => e.allSwatches.length ? "-1" : "0"}"
+								aria-label="${(e) => e.locale.colorPicker.saveButtonLabel}"
+								@click="${(e) => e._saveCurrentColor()}"
+								@keydown="${(e, t) => e._handleCellKeydown(t.event, e.value, e.allSwatches.length, !0)}">
+								<${n} slot="icon" name="plus-line"></${n}>
+							</${e}>
+						</${r}>
+					`)}
 			</div>
 		</div>
 	`;
 }
-function Ze() {
-  return n`
+function Ue() {
+	return t`
 		<span
 			id="swatches-count"
 			class="swatches-count"
-			aria-label="${(r) => r.locale.colorPicker.maxSwatchesMessage(
-    r.allSwatches.length,
-    r.maxSwatches
-  )}"
-			>${(r) => `${r.allSwatches.length}/${r.maxSwatches}`}</span
+			aria-label="${(e) => e.locale.colorPicker.maxSwatchesMessage(e.allSwatches.length, e.maxSwatches)}"
+			>${(e) => `${e.allSwatches.length}/${e.maxSwatches}`}</span
 		>
 	`;
 }
-const et = (r) => {
-  const e = r.tagFor(ge), o = r.tagFor(ie), t = r.tagFor(se), s = r.tagFor(ye), i = r.tagFor($e);
-  return n`
-		<div class="base" @keydown="${(a, { event: d }) => a._onBaseKeydown(d)}">
+//#endregion
+//#region src/lib/color-picker/index.ts
+i(r("color-picker", $, (e) => {
+	let n = e.tagFor(ge), r = e.tagFor(ee), i = e.tagFor(ce), a = e.tagFor(m), o = e.tagFor(de);
+	return t`
+		<div class="base" @keydown="${(e, { event: t }) => e._onBaseKeydown(t)}">
 			<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
-				${(a) => a._ariaLiveDescription}
+				${(e) => e._ariaLiveDescription}
 			</span>
-			${Je(e, o)}
-			<${t}
-				:open="${(a) => a.open}"
-				:anchor="${(a) => a._buttonEl}"
+			${ze(n, r)}
+			<${i}
+				:open="${(e) => e.open}"
+				:anchor="${(e) => e._buttonEl}"
 				placement="top"
 				offset="10" 
-				${v("_popupEl")}>
+				${c("_popupEl")}>
 				<div class="dialog" 
 					role="dialog" 
 					aria-modal="true" 
 					aria-labelledby="color-picker-title">
-					${Ue(s, o)}
-					${Ye(s, o, i)}
-					${E(
-    (a) => !a.disableSavedColors || a.allSwatches.length > 0,
-    Qe(s, o, i)
-  )}
+					${Be(a, r)}
+					${Ve(a, r, o)}
+					${l((e) => !e.disableSavedColors || e.allSwatches.length > 0, He(a, r, o))}
 				</div>
-			</${t}>
+			</${i}>
 		</div>
 	`;
-}, tt = re(
-  "color-picker",
-  c,
-  et,
-  [
-    ae,
-    le,
-    xe,
-    Ce,
-    ke,
-    ce
-  ],
-  {
-    styles: _e
-  }
-), ot = oe(
-  tt
-);
-ot();
+}, [
+	le,
+	te,
+	he,
+	se,
+	ue,
+	pe
+], { styles: ve }))();
+//#endregion