@vonage/vivid 5.18.0 → 5.20.0

package/color-picker/index.js

@@ -1,44 +1,43 @@
-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 { A as e, d as t, h as n, m as r, p 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 "../bundled/numberConverter.js";
+import { t as c } from "../bundled/slotted.js";
+import { t as l } from "../bundled/ref.js";
+import { t as u } from "../bundled/when.js";
 import { t as d } from "../bundled/decorate.js";
 import { r as ee, t as te } from "../bundled/definition2.js";
 import { t as ne } from "../bundled/with-success-text.js";
-import { t as re } from "../bundled/with-error-text.js";
-import { t as ie } from "../bundled/with-contextual-help.js";
-import { t as ae } from "../bundled/trapped-focus.js";
-import { n as oe, t as se } from "../bundled/delegates-aria.js";
-import { t as f } from "../bundled/class-names.js";
-import { i as p, t as ce } from "../bundled/definition6.js";
-import { i as le, t as ue } from "../bundled/definition8.js";
-import { n as de, r as fe } from "../bundled/definition9.js";
-import { t as pe } from "../bundled/dialog.js";
-import { a as me, t as he } from "../bundled/mixins.js";
-import { n as ge, r as _e } from "../bundled/definition12.js";
-import { n as m, t as ve } from "../bundled/base-color-picker.js";
+import { t as f } 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 { t as p } from "../bundled/class-names.js";
+import { n as ae, t as oe } from "../bundled/delegates-aria.js";
+import { i as se, t as m } 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 { r 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 ye = ".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}", h = (e, t = 0, n = 1) => e > n ? n : e < t ? t : e, g = (e, t = 0, n = 10 ** t) => Math.round(n * e) / n;
+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 _ = (e) => we(v(e)), v = (e) => (e[0] === "#" && (e = e.substring(1)), e.length < 6 ? {
+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 ? g(parseInt(e[3] + e[3], 16) / 255, 2) : 1
+	a: e.length === 4 ? _(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 ? g(parseInt(e.substring(6, 8), 16) / 255, 2) : 1
+	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: g(e),
-		s: g(i > 0 && i < 200 ? t * n / 100 / (i <= 100 ? i : 200 - i) * 100 : 0),
-		l: g(i / 2),
-		a: g(r, 2)
+		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);
@@ -47,7 +46,7 @@ var _ = (e) => we(v(e)), v = (e) => (e[0] === "#" && (e = e.substring(1)), e.len
 	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: g([
+		r: _([
 			n,
 			o,
 			a,
@@ -55,7 +54,7 @@ var _ = (e) => we(v(e)), v = (e) => (e[0] === "#" && (e = e.substring(1)), e.len
 			s,
 			n
 		][c] * 255),
-		g: g([
+		g: _([
 			s,
 			n,
 			n,
@@ -63,7 +62,7 @@ var _ = (e) => we(v(e)), v = (e) => (e[0] === "#" && (e = e.substring(1)), e.len
 			a,
 			a
 		][c] * 255),
-		b: g([
+		b: _([
 			a,
 			a,
 			s,
@@ -71,20 +70,20 @@ var _ = (e) => we(v(e)), v = (e) => (e[0] === "#" && (e = e.substring(1)), e.len
 			n,
 			o
 		][c] * 255),
-		a: g(r, 2)
+		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(g(r * 255)) : "";
+	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: g(60 * (o < 0 ? o + 6 : o)),
-		s: g(i ? a / i * 100 : 0),
-		v: g(i / 255 * 100),
+		h: _(60 * (o < 0 ? o + 6 : o)),
+		s: _(i ? a / i * 100 : 0),
+		v: _(i / 255 * 100),
 		a: r
 	};
 }, x = (e, t) => {
@@ -102,8 +101,8 @@ var _ = (e) => we(v(e)), v = (e) => (e[0] === "#" && (e = e.substring(1)), e.len
 }, 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: h((n.pageX - (r.left + window.pageXOffset)) / r.width),
-		y: h((n.pageY - (r.top + window.pageYOffset)) / r.height)
+		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;
@@ -160,10 +159,10 @@ var _ = (e) => we(v(e)), v = (e) => (e[0] === "#" && (e = e.substring(1)), e.len
 				v: 100,
 				a: 1
 			})
-		}]), this.el.setAttribute("aria-valuenow", `${g(e)}`);
+		}]), this.el.setAttribute("aria-valuenow", `${_(e)}`);
 	}
 	getMove(e, t) {
-		return { h: t ? h(this.h + e.x * 360, 0, 360) : 360 * e.x };
+		return { h: t ? g(this.h + e.x * 360, 0, 360) : 360 * e.x };
 	}
 }, Oe = class extends k {
 	constructor(e) {
@@ -179,15 +178,15 @@ var _ = (e) => we(v(e)), v = (e) => (e[0] === "#" && (e = e.substring(1)), e.len
 			s: 100,
 			v: 100,
 			a: 1
-		}) }]), this.el.setAttribute("aria-valuetext", `Saturation ${g(e.s)}%, Brightness ${g(e.v)}%`);
+		}) }]), this.el.setAttribute("aria-valuetext", `Saturation ${_(e.s)}%, Brightness ${_(e.v)}%`);
 	}
 	getMove(e, t) {
 		return {
-			s: t ? h(this.hsva.s + e.x * 100, 0, 100) : e.x * 100,
-			v: t ? h(this.hsva.v - e.y * 100, 0, 100) : Math.round(100 - e.y * 100)
+			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 {
+}, 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"), Me = class extends HTMLElement {
 	static get observedAttributes() {
 		return ["color"];
 	}
@@ -240,9 +239,9 @@ var _ = (e) => we(v(e)), v = (e) => (e[0] === "#" && (e = e.substring(1)), e.len
 	[N](e) {
 		this[M] = e, this[P].forEach((t) => t.update(e));
 	}
-}, Me = {
+}, Ne = {
 	defaultColor: "#000",
-	toHsva: _,
+	toHsva: ye,
 	fromHsva: ({ h: e, s: t, v: n }) => be({
 		h: e,
 		s: t,
@@ -251,16 +250,16 @@ var _ = (e) => we(v(e)), v = (e) => (e[0] === "#" && (e = e.substring(1)), e.len
 	}),
 	equal: Te,
 	fromAttr: (e) => e
-}, Ne = class extends L {
+}, Pe = class extends Me {
 	get colorModel() {
-		return Me;
+		return Ne;
 	}
-}, R = class extends Ne {};
-customElements.define("hex-color-picker", R);
+}, L = class extends Pe {};
+customElements.define("hex-color-picker", L);
 //#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;
+var R = /^#?([0-9A-F]{3,8})$/i, z = (e, t) => {
+	let n = R.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() {
@@ -343,7 +342,7 @@ var Pe = /^#?([0-9A-F]{3,8})$/i, z = (e, t) => {
 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 {
+var Y = "vvd-hex-picker", X = "vvd-hex-input", Le = class extends L {
 	static {
 		this.displayName = "VvdHexPicker";
 	}
@@ -354,9 +353,11 @@ var Y = "vvd-hex-picker", X = "vvd-hex-input", Le = class extends R {
 };
 /* 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 ie(he(re(ne(se(ae(ve(a))))))) {
+var Z = Y, Q = X, $ = class extends re(me(f(ne(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) => {
+		super(...e), this.disableSavedColors = !1, this.savedColors = [], this.maxSwatches = 6, this.#e = (e) => {
+			this._isInPath(e, this._buttonEl) || this._isInPath(e, this._popupEl) || (this.open = !1);
+		}, this.copyIconName = "copy-2-line", this.#t = null, this._copyValueToClipboard = async (e) => {
 			try {
 				await navigator.clipboard.writeText(e), this._setTemporaryCopyIcon("check-circle-line"), this._ariaLiveDescription = this.locale.colorPicker.copySuccessMessage(e);
 			} catch {
@@ -390,7 +391,7 @@ var Z = Y, Q = X, $ = class extends ie(he(re(ne(se(ae(ve(a))))))) {
 	}
 	_saveCurrentColor() {
 		let e = this.value;
-		if (typeof e != "string" || !m(e)) return;
+		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);
 	}
@@ -399,7 +400,7 @@ var Z = Y, Q = X, $ = class extends ie(he(re(ne(se(ae(ve(a))))))) {
 			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" && m(e.value)).map((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
 			})) : [];
@@ -414,7 +415,7 @@ var Z = Y, Q = X, $ = class extends ie(he(re(ne(se(ae(ve(a))))))) {
 	}
 	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" || !m(e.value) || n.has(e.value) || (n.add(e.value), r.push(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);
 	}
@@ -432,10 +433,11 @@ var Z = Y, Q = X, $ = class extends ie(he(re(ne(se(ae(ve(a))))))) {
 		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;
+		let t = e.currentTarget;
+		this.value = t.value;
 	}
 	get _buttonColor() {
-		return this._canvasColor || this._refreshCanvasColor(), this.value && m(this.value) ? this.value : "var(--vvd-color-canvas-text)";
+		return this._canvasColor || this._refreshCanvasColor(), this.value && h(this.value) ? this.value : "var(--vvd-color-canvas-text)";
 	}
 	_onButtonClick() {
 		this.open = !this.open;
@@ -448,23 +450,21 @@ var Z = Y, Q = X, $ = class extends ie(he(re(ne(se(ae(ve(a))))))) {
 		let n = e.composedPath?.();
 		return !!(n && n.includes(t));
 	}
-	#e = (e) => {
-		this._isInPath(e, this._buttonEl) || this._isInPath(e, this._popupEl) || (this.open = !1);
-	};
+	#e;
 	connectedCallback() {
 		super.connectedCallback(), this.savedColors = this._loadSavedColors(), document.addEventListener("mousedown", this.#e, !0);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), document.removeEventListener("mousedown", this.#e, !0);
 	}
-	#t = null;
+	#t;
 	_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 && pe(e) ? (this.open = !1, !1) : !this._trappedFocus(e, () => this._focusableElsWithinDialog());
+		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\"])");
@@ -481,21 +481,21 @@ var Z = Y, Q = X, $ = class extends ie(he(re(ne(se(ae(ve(a))))))) {
 		this.value !== e && (this._ariaLiveDescription = this.locale.colorPicker.selectionSuccessMessage(e)), super._handleSwatchSelection(e);
 	}
 };
-d([n], $.prototype, "placeholder", void 0), d([n({ attribute: "saved-colors-key" })], $.prototype, "savedColorsKey", void 0), d([n({
+d([r], $.prototype, "placeholder", void 0), d([r({ attribute: "saved-colors-key" })], $.prototype, "savedColorsKey", void 0), d([r({
 	mode: "boolean",
 	attribute: "disable-saved-colors"
-})], $.prototype, "disableSavedColors", void 0), d([e], $.prototype, "savedColors", void 0), d([n({
+})], $.prototype, "disableSavedColors", void 0), d([e], $.prototype, "savedColors", void 0), d([r({
 	attribute: "max-swatches",
 	mode: "fromView",
-	converter: o
+	converter: n
 })], $.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`
+function ze(e, t) {
+	return i`
 		<${e} 
 			id="text-field"
-			class="${(e) => f("control")}"
+			class="${(e) => p("control")}"
 			pattern="${$.HEX_COLOR_PATTERN.source}"
 			maxlength="7"
 			label="${(e) => e.label}"
@@ -514,36 +514,36 @@ function ze(e, n) {
 			@focus="${(e) => {
 		e.$emit("focus", void 0, { bubbles: !1 });
 	}}"
-			${oe()}
-			${c("_textFieldEl")}
+			${ae()}
+			${l("_textFieldEl")}
 		>
 			<button 
 				aria-label="${(e) => e.locale.colorPicker.pickerButtonLabel}"
 				aria-expanded="${(e) => e.open}"
   			aria-haspopup="dialog"
-				class="button ${(e) => f(e._applyContrastClass(e._buttonColor) ? "contrast" : "", e.disabled ? "disabled" : "")}" 
+				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" 
-				${c("_buttonEl")}>
-				<${n} name="edit-line"></${n}>
+				${l("_buttonEl")}>
+				<${t} name="edit-line"></${t}>
 			</button>
 			<slot
 				slot="${(e) => e._helperTextSlottedContent?.length ? "helper-text" : void 0}"
 				name="helper-text"
-				${u("_helperTextSlottedContent")}
+				${c("_helperTextSlottedContent")}
 			></slot>
 			<slot
 				slot='${(e) => e._contextualHelpSlottedContent?.length ? "contextual-help" : void 0}'
 				name='contextual-help'
-				${u("_contextualHelpSlottedContent")}
+				${c("_contextualHelpSlottedContent")}
 			></slot>
 		</${e}>
 	`;
 }
-function Be(e, n) {
-	return t`
+function Be(e, t) {
+	return i`
 		<div class="header">
 			<h2 class="header-title" id="color-picker-title">
 				<slot name="popup-text">${(e) => e.locale.colorPicker.popupLabel}</slot>
@@ -551,49 +551,49 @@ function Be(e, n) {
 			<${e} size="condensed" 
 				aria-label="${(e) => e.locale.colorPicker.closeButtonLabel}" 
 				@click="${(e) => e._handleCloseRequest()}">
-				<${n} slot="icon" name="close-line"></${n}>
+				<${t} slot="icon" name="close-line"></${t}>
 			</${e}>
 		</div>
 	`;
 }
-function Ve(e, n, r) {
-	return t`
+function Ve(e, t, n) {
+	return i`
 		<div class="body">
-			<${t.partial(Z)}
+			<${i.partial(Z)}
 				part="hex-picker"
 				color="${(e) => e.value}"
 				@color-changed="${(e, t) => e._onPickerColorChanged(t.event)}"
-				${c("_vcHexPickerEl")}
-			></${t.partial(Z)}>
+				${l("_vcHexPickerEl")}
+			></${i.partial(Z)}>
 			<div class="hex-input-wrapper">
-				<${t.partial(Q)}
+				<${i.partial(Q)}
 					part="hex-input"
 					prefixed
 					color="${(e) => e.value}"
 					@color-changed="${(e, t) => e._onPickerColorChanged(t.event)}"
-					${c("_vcHexInputEl")}
+					${l("_vcHexInputEl")}
 				>
 					<input name="hex-code-input" aria-label="${(e) => e.locale.colorPicker.hexInputLabel}" 
 						placeholder="${(e) => e.placeholder}"
     				@blur="${(e, t) => t.event.stopImmediatePropagation()}"
 						part="input">
-				</${t.partial(Q)}>
-				<${r} placement="top" 
+				</${i.partial(Q)}>
+				<${n} placement="top" 
 					text="${(e) => e.locale.colorPicker.copyButtonLabel}" 
 					exportparts="vvd-theme-alternate">
 					<${e} 
 						slot="anchor" size="normal" 
 						aria-label="${(e) => e.locale.colorPicker.copyButtonLabel}" 
 						@click="${(e) => e._copyValueToClipboard(e.value)}">
-						<${n} slot="icon" name="${(e) => e.copyIconName}"></${n}>
+						<${t} slot="icon" name="${(e) => e.copyIconName}"></${t}>
 					</${e}>
-				</${r}>
+				</${n}>
 			</div>
 		</div>
 	`;
 }
-function He(e, n, r) {
-	return t`
+function He(e, t, n) {
+	return i`
 		<div class="footer">
 			<div class="footer-header">
 				<span class="footer-title" id="color-picker-footer-title"
@@ -601,7 +601,7 @@ function He(e, n, r) {
 						>${(e) => e.locale.colorPicker.swatchesLabel}</slot
 					></span
 				>
-				${l((e) => !e.disableSavedColors, Ue())}
+				${u((e) => !e.disableSavedColors, Ue())}
 			</div>
 			<div
 				class="palette"
@@ -611,9 +611,9 @@ function He(e, n, r) {
 				style="--swatches-per-row: ${(e) => e._getRowLength()};"
 				aria-labelledby="color-picker-footer-title"
 			>
-				${s((e) => e.allSwatches, (e) => e._renderColorSwatch(n, r), { positioning: !0 })}
-				${l((e) => !e.disableSavedColors, t`
-						<${r} placement="top" 
+				${s((e) => e.allSwatches, (e) => e._renderColorSwatch(t, n), { positioning: !0 })}
+				${u((e) => !e.disableSavedColors, i`
+						<${n} placement="top" 
 							text="${(e) => e.locale.colorPicker.saveButtonLabel}" 
 							exportparts="vvd-theme-alternate">
 							<${e}
@@ -625,16 +625,16 @@ function He(e, n, r) {
 								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}>
+								<${t} slot="icon" name="plus-line"></${t}>
 							</${e}>
-						</${r}>
+						</${n}>
 					`)}
 			</div>
 		</div>
 	`;
 }
 function Ue() {
-	return t`
+	return i`
 		<span
 			id="swatches-count"
 			class="swatches-count"
@@ -645,37 +645,37 @@ function Ue() {
 }
 //#endregion
 //#region src/lib/color-picker/index.ts
-i(r("color-picker", $, (e) => {
-	let n = e.tagFor(_e), r = e.tagFor(ee), i = e.tagFor(le), a = e.tagFor(p), o = e.tagFor(fe);
-	return t`
+t(o("color-picker", $, (e) => {
+	let t = e.tagFor(ge), n = e.tagFor(ee), r = e.tagFor(ce), a = e.tagFor(se), o = e.tagFor(de);
+	return i`
 		<div class="base" @keydown="${(e, { event: t }) => e._onBaseKeydown(t)}">
 			<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
 				${(e) => e._ariaLiveDescription}
 			</span>
-			${ze(n, r)}
-			<${i}
+			${ze(t, n)}
+			<${r}
 				:open="${(e) => e.open}"
 				:anchor="${(e) => e._buttonEl}"
 				placement="top"
 				offset="10" 
-				${c("_popupEl")}>
+				${l("_popupEl")}>
 				<div class="dialog" 
 					role="dialog" 
 					aria-modal="true" 
 					aria-labelledby="color-picker-title">
-					${Be(a, r)}
-					${Ve(a, r, o)}
-					${l((e) => !e.disableSavedColors || e.allSwatches.length > 0, He(a, r, o))}
+					${Be(a, n)}
+					${Ve(a, n, o)}
+					${u((e) => !e.disableSavedColors || e.allSwatches.length > 0, He(a, n, o))}
 				</div>
-			</${i}>
+			</${r}>
 		</div>
 	`;
 }, [
-	ue,
+	le,
 	te,
-	ge,
-	ce,
-	de,
-	me
-], { styles: ye }))();
+	he,
+	m,
+	ue,
+	pe
+], { styles: ve }))();
 //#endregion

package/combobox/definition.cjs

@@ -1,5 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../unbundled/numberConverter.cjs");
 const require_definition = require("../unbundled/definition30.cjs");
 exports.VwcComboboxElement = require_definition.Combobox;
 exports.comboboxDefinition = require_definition.comboboxDefinition;

package/combobox/definition.js

@@ -1,3 +1,2 @@
-import "../unbundled/numberConverter.js";
 import { n as registerCombobox, r as Combobox, t as comboboxDefinition } from "../unbundled/definition30.js";
 export { Combobox as VwcComboboxElement, comboboxDefinition, registerCombobox };