@vonage/vivid 5.15.1 → 5.16.0

package/unbundled/definition24.js

@@ -0,0 +1,1020 @@
+import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { r as Icon, t as iconDefinition } from "./definition2.js";
+import { t as __decorate } from "./decorate.js";
+import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
+import { t as WithSuccessText } from "./with-success-text.js";
+import { t as WithErrorText } from "./with-error-text.js";
+import { t as WithContextualHelp } from "./with-contextual-help.js";
+import { t as TrappedFocus } from "./trapped-focus.js";
+import { i as Button, t as buttonDefinition } from "./definition7.js";
+import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
+import { i as Popup, t as popupDefinition } from "./definition10.js";
+import { a as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
+import { n as isValidHexColor, t as BaseColorPicker } from "./base-color-picker.js";
+import { n as textFieldDefinition, r as TextField } from "./definition25.js";
+import { n as tooltipDefinition, r as Tooltip } from "./definition26.js";
+import { attr, html, nullableNumberConverter, observable, ref, repeat, slotted, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/color-picker/color-picker.scss?inline
+var color_picker_default$1 = ".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}";
+//#endregion
+//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/math.js
+var clamp = (number, min = 0, max = 1) => {
+	return number > max ? max : number < min ? min : number;
+};
+var round = (number, digits = 0, base = Math.pow(10, digits)) => {
+	return Math.round(base * number) / base;
+};
+360 / (Math.PI * 2);
+var hexToHsva = (hex) => rgbaToHsva(hexToRgba(hex));
+var hexToRgba = (hex) => {
+	if (hex[0] === "#") hex = hex.substring(1);
+	if (hex.length < 6) return {
+		r: parseInt(hex[0] + hex[0], 16),
+		g: parseInt(hex[1] + hex[1], 16),
+		b: parseInt(hex[2] + hex[2], 16),
+		a: hex.length === 4 ? round(parseInt(hex[3] + hex[3], 16) / 255, 2) : 1
+	};
+	return {
+		r: parseInt(hex.substring(0, 2), 16),
+		g: parseInt(hex.substring(2, 4), 16),
+		b: parseInt(hex.substring(4, 6), 16),
+		a: hex.length === 8 ? round(parseInt(hex.substring(6, 8), 16) / 255, 2) : 1
+	};
+};
+var hsvaToHex = (hsva) => rgbaToHex(hsvaToRgba(hsva));
+var hsvaToHsla = ({ h, s, v, a }) => {
+	const hh = (200 - s) * v / 100;
+	return {
+		h: round(h),
+		s: round(hh > 0 && hh < 200 ? s * v / 100 / (hh <= 100 ? hh : 200 - hh) * 100 : 0),
+		l: round(hh / 2),
+		a: round(a, 2)
+	};
+};
+var hsvaToHslString = (hsva) => {
+	const { h, s, l } = hsvaToHsla(hsva);
+	return `hsl(${h}, ${s}%, ${l}%)`;
+};
+var hsvaToRgba = ({ h, s, v, a }) => {
+	h = h / 360 * 6;
+	s = s / 100;
+	v = v / 100;
+	const hh = Math.floor(h), b = v * (1 - s), c = v * (1 - (h - hh) * s), d = v * (1 - (1 - h + hh) * s), module = hh % 6;
+	return {
+		r: round([
+			v,
+			c,
+			b,
+			b,
+			d,
+			v
+		][module] * 255),
+		g: round([
+			d,
+			v,
+			v,
+			c,
+			b,
+			b
+		][module] * 255),
+		b: round([
+			b,
+			b,
+			d,
+			v,
+			v,
+			c
+		][module] * 255),
+		a: round(a, 2)
+	};
+};
+var format = (number) => {
+	const hex = number.toString(16);
+	return hex.length < 2 ? "0" + hex : hex;
+};
+var rgbaToHex = ({ r, g, b, a }) => {
+	const alphaHex = a < 1 ? format(round(a * 255)) : "";
+	return "#" + format(r) + format(g) + format(b) + alphaHex;
+};
+var rgbaToHsva = ({ r, g, b, a }) => {
+	const max = Math.max(r, g, b);
+	const delta = max - Math.min(r, g, b);
+	const hh = delta ? max === r ? (g - b) / delta : max === g ? 2 + (b - r) / delta : 4 + (r - g) / delta : 0;
+	return {
+		h: round(60 * (hh < 0 ? hh + 6 : hh)),
+		s: round(max ? delta / max * 100 : 0),
+		v: round(max / 255 * 100),
+		a
+	};
+};
+//#endregion
+//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/compare.js
+var equalColorObjects = (first, second) => {
+	if (first === second) return true;
+	for (const prop in first) if (first[prop] !== second[prop]) return false;
+	return true;
+};
+var equalHex = (first, second) => {
+	if (first.toLowerCase() === second.toLowerCase()) return true;
+	return equalColorObjects(hexToRgba(first), hexToRgba(second));
+};
+//#endregion
+//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/dom.js
+var cache = {};
+var tpl = (html) => {
+	let template = cache[html];
+	if (!template) {
+		template = document.createElement("template");
+		template.innerHTML = html;
+		cache[html] = template;
+	}
+	return template;
+};
+var fire = (target, type, detail) => {
+	target.dispatchEvent(new CustomEvent(type, {
+		bubbles: true,
+		detail
+	}));
+};
+//#endregion
+//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/slider.js
+var hasTouched = false;
+var isTouch = (e) => "touches" in e;
+var isValid = (event) => {
+	if (hasTouched && !isTouch(event)) return false;
+	if (!hasTouched) hasTouched = isTouch(event);
+	return true;
+};
+var pointerMove = (target, event) => {
+	const pointer = isTouch(event) ? event.touches[0] : event;
+	const rect = target.el.getBoundingClientRect();
+	fire(target.el, "move", target.getMove({
+		x: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),
+		y: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height)
+	}));
+};
+var keyMove = (target, event) => {
+	const keyCode = event.keyCode;
+	if (keyCode > 40 || target.xy && keyCode < 37 || keyCode < 33) return;
+	event.preventDefault();
+	fire(target.el, "move", target.getMove({
+		x: keyCode === 39 ? .01 : keyCode === 37 ? -.01 : keyCode === 34 ? .05 : keyCode === 33 ? -.05 : keyCode === 35 ? 1 : keyCode === 36 ? -1 : 0,
+		y: keyCode === 40 ? .01 : keyCode === 38 ? -.01 : 0
+	}, true));
+};
+var Slider = class {
+	constructor(root, part, aria, xy) {
+		const template = tpl(`<div role="slider" tabindex="0" part="${part}" ${aria}><div part="${part}-pointer"></div></div>`);
+		root.appendChild(template.content.cloneNode(true));
+		const el = root.querySelector(`[part=${part}]`);
+		el.addEventListener("mousedown", this);
+		el.addEventListener("touchstart", this);
+		el.addEventListener("keydown", this);
+		this.el = el;
+		this.xy = xy;
+		this.nodes = [el.firstChild, el];
+	}
+	set dragging(state) {
+		const toggleEvent = state ? document.addEventListener : document.removeEventListener;
+		toggleEvent(hasTouched ? "touchmove" : "mousemove", this);
+		toggleEvent(hasTouched ? "touchend" : "mouseup", this);
+	}
+	handleEvent(event) {
+		switch (event.type) {
+			case "mousedown":
+			case "touchstart":
+				event.preventDefault();
+				if (!isValid(event) || !hasTouched && event.button != 0) return;
+				this.el.focus();
+				pointerMove(this, event);
+				this.dragging = true;
+				break;
+			case "mousemove":
+			case "touchmove":
+				event.preventDefault();
+				pointerMove(this, event);
+				break;
+			case "mouseup":
+			case "touchend":
+				this.dragging = false;
+				break;
+			case "keydown":
+				keyMove(this, event);
+				break;
+		}
+	}
+	style(styles) {
+		styles.forEach((style, i) => {
+			for (const p in style) this.nodes[i].style.setProperty(p, style[p]);
+		});
+	}
+};
+//#endregion
+//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/hue.js
+var Hue = class extends Slider {
+	constructor(root) {
+		super(root, "hue", "aria-label=\"Hue\" aria-valuemin=\"0\" aria-valuemax=\"360\"", false);
+	}
+	update({ h }) {
+		this.h = h;
+		this.style([{
+			left: `${h / 360 * 100}%`,
+			color: hsvaToHslString({
+				h,
+				s: 100,
+				v: 100,
+				a: 1
+			})
+		}]);
+		this.el.setAttribute("aria-valuenow", `${round(h)}`);
+	}
+	getMove(offset, key) {
+		return { h: key ? clamp(this.h + offset.x * 360, 0, 360) : 360 * offset.x };
+	}
+};
+//#endregion
+//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/saturation.js
+var Saturation = class extends Slider {
+	constructor(root) {
+		super(root, "saturation", "aria-label=\"Color\"", true);
+	}
+	update(hsva) {
+		this.hsva = hsva;
+		this.style([{
+			top: `${100 - hsva.v}%`,
+			left: `${hsva.s}%`,
+			color: hsvaToHslString(hsva)
+		}, { "background-color": hsvaToHslString({
+			h: hsva.h,
+			s: 100,
+			v: 100,
+			a: 1
+		}) }]);
+		this.el.setAttribute("aria-valuetext", `Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%`);
+	}
+	getMove(offset, key) {
+		return {
+			s: key ? clamp(this.hsva.s + offset.x * 100, 0, 100) : offset.x * 100,
+			v: key ? clamp(this.hsva.v - offset.y * 100, 0, 100) : Math.round(100 - offset.y * 100)
+		};
+	}
+};
+//#endregion
+//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/color-picker.js
+var color_picker_default = `: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)}`;
+//#endregion
+//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/hue.js
+var hue_default = `[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}`;
+//#endregion
+//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/saturation.js
+var saturation_default = `[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}`;
+//#endregion
+//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/color-picker.js
+var $isSame = Symbol("same");
+var $color$1 = Symbol("color");
+var $hsva = Symbol("hsva");
+var $update$1 = Symbol("update");
+var $parts = Symbol("parts");
+var $css = Symbol("css");
+var $sliders = Symbol("sliders");
+var ColorPicker$1 = class extends HTMLElement {
+	static get observedAttributes() {
+		return ["color"];
+	}
+	get [$css]() {
+		return [
+			color_picker_default,
+			hue_default,
+			saturation_default
+		];
+	}
+	get [$sliders]() {
+		return [Saturation, Hue];
+	}
+	get color() {
+		return this[$color$1];
+	}
+	set color(newColor) {
+		if (!this[$isSame](newColor)) {
+			const newHsva = this.colorModel.toHsva(newColor);
+			this[$update$1](newHsva);
+			this[$color$1] = newColor;
+		}
+	}
+	constructor() {
+		super();
+		const template = tpl(`<style>${this[$css].join("")}</style>`);
+		const root = this.attachShadow({ mode: "open" });
+		root.appendChild(template.content.cloneNode(true));
+		root.addEventListener("move", this);
+		this[$parts] = this[$sliders].map((slider) => new slider(root));
+	}
+	connectedCallback() {
+		if (this.hasOwnProperty("color")) {
+			const value = this.color;
+			delete this["color"];
+			this.color = value;
+		} else if (!this.color) this.color = this.colorModel.defaultColor;
+	}
+	attributeChangedCallback(_attr, _oldVal, newVal) {
+		const color = this.colorModel.fromAttr(newVal);
+		if (!this[$isSame](color)) this.color = color;
+	}
+	handleEvent(event) {
+		const oldHsva = this[$hsva];
+		const newHsva = {
+			...oldHsva,
+			...event.detail
+		};
+		this[$update$1](newHsva);
+		let newColor;
+		if (!equalColorObjects(newHsva, oldHsva) && !this[$isSame](newColor = this.colorModel.fromHsva(newHsva))) {
+			this[$color$1] = newColor;
+			fire(this, "color-changed", { value: newColor });
+		}
+	}
+	[$isSame](color) {
+		return this.color && this.colorModel.equal(color, this.color);
+	}
+	[$update$1](hsva) {
+		this[$hsva] = hsva;
+		this[$parts].forEach((part) => part.update(hsva));
+	}
+};
+//#endregion
+//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/entrypoints/hex.js
+var colorModel = {
+	defaultColor: "#000",
+	toHsva: hexToHsva,
+	fromHsva: ({ h, s, v }) => hsvaToHex({
+		h,
+		s,
+		v,
+		a: 1
+	}),
+	equal: equalHex,
+	fromAttr: (color) => color
+};
+var HexBase = class extends ColorPicker$1 {
+	get colorModel() {
+		return colorModel;
+	}
+};
+//#endregion
+//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/hex-color-picker.js
+/**
+* A color picker custom element that uses HEX format.
+*
+* @element hex-color-picker
+*
+* @prop {string} color - Selected color in HEX format.
+* @attr {string} color - Selected color in HEX format.
+*
+* @fires color-changed - Event fired when color property changes.
+*
+* @csspart hue - A hue selector container.
+* @csspart saturation - A saturation selector container
+* @csspart hue-pointer - A hue pointer element.
+* @csspart saturation-pointer - A saturation pointer element.
+*/
+var HexColorPicker = class extends HexBase {};
+customElements.define("hex-color-picker", HexColorPicker);
+//#endregion
+//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/validate.js
+var matcher = /^#?([0-9A-F]{3,8})$/i;
+var validHex = (value, alpha) => {
+	const match = matcher.exec(value);
+	const length = match ? match[1].length : 0;
+	return length === 3 || length === 6 || !!alpha && length === 4 || !!alpha && length === 8;
+};
+//#endregion
+//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/entrypoints/hex-input.js
+var template = tpl("<slot><input part=\"input\" spellcheck=\"false\"></slot>");
+var escape = (hex, alpha) => hex.replace(/([^0-9A-F]+)/gi, "").substring(0, alpha ? 8 : 6);
+var $alpha = Symbol("alpha");
+var $color = Symbol("color");
+var $saved = Symbol("saved");
+var $input = Symbol("input");
+var $init = Symbol("init");
+var $prefix = Symbol("prefix");
+var $update = Symbol("update");
+var HexInputBase = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"alpha",
+			"color",
+			"prefixed"
+		];
+	}
+	get color() {
+		return this[$color];
+	}
+	set color(hex) {
+		this[$color] = hex;
+		this[$update](hex);
+	}
+	get alpha() {
+		return this[$alpha];
+	}
+	set alpha(alpha) {
+		this[$alpha] = alpha;
+		this.toggleAttribute("alpha", alpha);
+		const color = this.color;
+		if (color && !validHex(color, alpha)) this.color = color.startsWith("#") ? color.substring(0, color.length === 5 ? 4 : 7) : color.substring(0, color.length === 4 ? 3 : 6);
+	}
+	get prefixed() {
+		return this[$prefix];
+	}
+	set prefixed(prefixed) {
+		this[$prefix] = prefixed;
+		this.toggleAttribute("prefixed", prefixed);
+		this[$update](this.color);
+	}
+	constructor() {
+		super();
+		const root = this.attachShadow({ mode: "open" });
+		root.appendChild(template.content.cloneNode(true));
+		root.firstElementChild.addEventListener("slotchange", () => this[$init](root));
+	}
+	connectedCallback() {
+		this[$init](this.shadowRoot);
+		if (this.hasOwnProperty("alpha")) {
+			const value = this.alpha;
+			delete this["alpha"];
+			this.alpha = value;
+		} else this.alpha = this.hasAttribute("alpha");
+		if (this.hasOwnProperty("prefixed")) {
+			const value = this.prefixed;
+			delete this["prefixed"];
+			this.prefixed = value;
+		} else this.prefixed = this.hasAttribute("prefixed");
+		if (this.hasOwnProperty("color")) {
+			const value = this.color;
+			delete this["color"];
+			this.color = value;
+		} else if (this.color == null) this.color = this.getAttribute("color") || "";
+		else if (this[$color]) this[$update](this[$color]);
+	}
+	handleEvent(event) {
+		const { value } = event.target;
+		switch (event.type) {
+			case "input":
+				const hex = escape(value, this.alpha);
+				this[$saved] = this.color;
+				if (validHex(hex, this.alpha) || value === "") {
+					this.color = hex;
+					this.dispatchEvent(new CustomEvent("color-changed", {
+						bubbles: true,
+						detail: { value: hex ? "#" + hex : "" }
+					}));
+				}
+				break;
+			case "blur": if (value && !validHex(value, this.alpha)) this.color = this[$saved];
+		}
+	}
+	attributeChangedCallback(attr, _oldVal, newVal) {
+		if (attr === "color" && this.color !== newVal) this.color = newVal;
+		const hasBooleanAttr = newVal != null;
+		if (attr === "alpha") {
+			if (this.alpha !== hasBooleanAttr) this.alpha = hasBooleanAttr;
+		}
+		if (attr === "prefixed") {
+			if (this.prefixed !== hasBooleanAttr) this.prefixed = hasBooleanAttr;
+		}
+	}
+	[$init](root) {
+		let input = this.querySelector("input");
+		if (!input) {
+			let c;
+			while (c = this.firstChild) c.remove();
+			input = root.querySelector("input");
+		}
+		input.addEventListener("input", this);
+		input.addEventListener("blur", this);
+		this[$input] = input;
+		this[$update](this.color);
+	}
+	[$update](hex) {
+		if (this[$input]) this[$input].value = hex == null || hex == "" ? "" : (this.prefixed ? "#" : "") + escape(hex, this.alpha);
+	}
+};
+//#endregion
+//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/hex-input.js
+/**
+* A custom element for entering color in HEX format.
+*
+* @element hex-input
+*
+* @prop {string} color - Color in HEX format.
+* @attr {string} color - Selected color in HEX format.
+* @prop {boolean} alpha - When true, `#rgba` and `#rrggbbaa` color formats are allowed.
+* @attr {boolean} alpha - Allows `#rgba` and `#rrggbbaa` color formats.
+* @prop {boolean} prefixed - When true, `#` prefix is displayed in the input.
+* @attr {boolean} prefixed - Enables `#` prefix displaying.
+*
+* @fires color-changed - Event fired when color is changed.
+*
+* @csspart input - A native input element.
+*/
+var HexInput = class extends HexInputBase {};
+customElements.define("hex-input", HexInput);
+//#endregion
+//#region src/lib/color-picker/color-picker.ts
+var VC_HEX_PICKER_TAG = "vvd-hex-picker";
+var VC_HEX_INPUT_TAG = "vvd-hex-input";
+var VvdHexPicker = class extends HexColorPicker {
+	static {
+		this.displayName = "VvdHexPicker";
+	}
+};
+var VvdHexInput = class extends HexInput {
+	static {
+		this.displayName = "VvdHexInput";
+	}
+};
+/* v8 ignore if -- @preserve */
+if (!customElements.get(VC_HEX_PICKER_TAG)) customElements.define(VC_HEX_PICKER_TAG, VvdHexPicker);
+/* v8 ignore if -- @preserve */
+if (!customElements.get(VC_HEX_INPUT_TAG)) customElements.define(VC_HEX_INPUT_TAG, VvdHexInput);
+var vcPickerTag = VC_HEX_PICKER_TAG;
+var vcInputTag = VC_HEX_INPUT_TAG;
+/**
+* @public
+* @component color-picker
+* @slot helper-text - Describes how to use the text-field. Alternative to the `helper-text` attribute.
+* @slot popup-text - Overrides the default "Color Picker" title of the Popup window.
+* @slot swatches-text -  Overrides the default "Saved colors:" text above color swatches.
+* @event {CustomEvent<undefined>} change - Fires when the value changes
+* @vueModel modelValue value input `event.currentTarget.value`
+*/
+var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(WithSuccessText(DelegatesAria(TrappedFocus(BaseColorPicker(VividElement))))))) {
+	constructor(..._args) {
+		super(..._args);
+		this.disableSavedColors = false;
+		this.savedColors = [];
+		this.maxSwatches = 6;
+		this.copyIconName = "copy-2-line";
+		this._copyValueToClipboard = async (value) => {
+			try {
+				await navigator.clipboard.writeText(value);
+				this._setTemporaryCopyIcon("check-circle-line");
+				this._ariaLiveDescription = this.locale.colorPicker.copySuccessMessage(value);
+			} 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() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) this.proxy.placeholder = this.placeholder;
+	}
+	/**
+	* Change event handler for inner control.
+	* @remarks
+	* @internal
+	*/
+	handleChange() {
+		this.$emit("change");
+	}
+	/**
+	* @internal
+	*/
+	openChanged(_oldValue, newValue) {
+		if (newValue && this.isConnected) requestAnimationFrame(() => {
+			this._refreshCanvasColor();
+		});
+	}
+	/**
+	* @internal
+	*/
+	savedColorsKeyChanged() {
+		this.savedColors = this._loadSavedColors();
+	}
+	/**
+	* @internal
+	*/
+	get _savedColorsStorageKey() {
+		if (this.savedColorsKey) return this.savedColorsKey;
+		return `vvd-saved-colors:${this.tagName.toLowerCase()}`;
+	}
+	/**
+	* @internal
+	*/
+	_handleColorSaving() {
+		this._saveCurrentColor();
+	}
+	/**
+	* @internal
+	*/
+	_saveCurrentColor() {
+		const value = this.value;
+		if (typeof value !== "string" || !isValidHexColor(value)) return;
+		const swatches = Array.isArray(this.savedColors) ? [...this.savedColors] : [];
+		const idx = swatches.findIndex((s) => s?.value === value);
+		if (idx !== -1) swatches.splice(idx, 1);
+		swatches.unshift({ value });
+		this.savedColors = swatches.slice(0, this._maxSwatchesNormalized);
+		this._setSavedColors(this.savedColors);
+	}
+	/**
+	* @internal
+	*/
+	_loadSavedColors() {
+		try {
+			const savedColors = localStorage.getItem(this._savedColorsStorageKey);
+			if (!savedColors) return [];
+			const parsed = JSON.parse(savedColors);
+			if (!Array.isArray(parsed)) return [];
+			return parsed.filter((x) => x && typeof x.value === "string" && isValidHexColor(x.value)).map((x) => ({
+				value: x.value,
+				label: typeof x.label === "string" ? x.label : void 0
+			}));
+		} catch {
+			return [];
+		}
+	}
+	/**
+	* @internal
+	*/
+	_setSavedColors(swatches) {
+		try {
+			localStorage.setItem(this._savedColorsStorageKey, JSON.stringify(swatches));
+		} catch {}
+	}
+	/**
+	* Get all color swatches combined, both from swatches property and saved colors
+	* @internal
+	*/
+	get allSwatches() {
+		const predefinedColors = Array.isArray(this.swatches) ? this.swatches : [];
+		const savedColors = Array.isArray(this.savedColors) ? this.savedColors : [];
+		const seen = /* @__PURE__ */ new Set();
+		const merged = [];
+		const appendIfUniqueAndValid = (swatch) => {
+			if (!swatch || typeof swatch.value !== "string") return;
+			if (!isValidHexColor(swatch.value) || seen.has(swatch.value)) return;
+			seen.add(swatch.value);
+			merged.push(swatch);
+		};
+		if (!this.disableSavedColors) savedColors.forEach(appendIfUniqueAndValid);
+		predefinedColors.forEach(appendIfUniqueAndValid);
+		return merged.slice(0, this._maxSwatchesNormalized);
+	}
+	/**
+	* @internal
+	*/
+	get _maxSwatchesNormalized() {
+		return Number.isFinite(this.maxSwatches) ? Math.max(0, Math.floor(this.maxSwatches)) : 0;
+	}
+	/**
+	* @internal
+	*/
+	maxSwatchesChanged() {
+		const maxCount = this._maxSwatchesNormalized;
+		if (this.savedColors?.length > maxCount) {
+			this.savedColors = this.savedColors.slice(0, maxCount);
+			this._setSavedColors(this.savedColors);
+		}
+	}
+	/**
+	* @internal
+	*/
+	_onPickerColorChanged(e) {
+		if (typeof e.detail?.value === "string") this.value = e.detail?.value;
+	}
+	/**
+	* @internal
+	*/
+	valueChanged(_oldVal, newVal) {
+		if (this._vcHexPickerEl && typeof newVal === "string") this._vcHexPickerEl.color = newVal;
+		if (this._vcHexInputEl && typeof newVal === "string") this._vcHexInputEl.color = newVal;
+	}
+	/**
+	* @internal
+	*/
+	_onTextFieldInput(event) {
+		this.value = event.currentTarget.value;
+	}
+	/**
+	* @internal
+	*/
+	get _buttonColor() {
+		/* v8 ignore else -- @preserve */
+		if (!this._canvasColor) this._refreshCanvasColor();
+		if (this.value && isValidHexColor(this.value)) return this.value;
+		return "var(--vvd-color-canvas-text)";
+	}
+	/**
+	* @internal
+	*/
+	_onButtonClick() {
+		this.open = !this.open;
+	}
+	/**
+	* @internal
+	*/
+	_handleCloseRequest() {
+		this.open = false;
+	}
+	/**
+	* @internal
+	*/
+	_isInPath(e, el) {
+		if (!el) return false;
+		const path = e.composedPath?.();
+		return !!(path && path.includes(el));
+	}
+	/**
+	* @internal
+	*/
+	#closeOnPointerOutside = (e) => {
+		if (this._isInPath(e, this._buttonEl) || this._isInPath(e, this._popupEl)) return;
+		this.open = false;
+	};
+	connectedCallback() {
+		super.connectedCallback();
+		this.savedColors = this._loadSavedColors();
+		document.addEventListener("mousedown", this.#closeOnPointerOutside, true);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener("mousedown", this.#closeOnPointerOutside, true);
+	}
+	#iconResetTimer = null;
+	/**
+	* @internal
+	*/
+	_setTemporaryCopyIcon(name, ms = 2e3) {
+		this.copyIconName = name;
+		if (this.#iconResetTimer) clearTimeout(this.#iconResetTimer);
+		this.#iconResetTimer = setTimeout(() => {
+			this.copyIconName = "copy-2-line";
+			this.#iconResetTimer = null;
+		}, ms);
+	}
+	/**
+	* @internal
+	*/
+	_onBaseKeydown(event) {
+		if (this.open && handleEscapeKeyAndStopPropogation(event)) {
+			this.open = false;
+			return false;
+		}
+		if (this._trappedFocus(event, () => this._focusableElsWithinDialog())) return false;
+		return true;
+	}
+	/**
+	* @internal
+	*/
+	_focusableElsWithinDialog() {
+		return this._popupEl.querySelectorAll("button:not([role=\"gridcell\"]), [data-vvd-component=\"button\"], vwc-button:not([role=\"gridcell\"])");
+	}
+	/**
+	* @internal
+	*/
+	_handleCellKeydown(event, value, index, isSaveCell) {
+		if (event.key === "Tab") {
+			event.preventDefault();
+			const focusableEls = this._focusableElsWithinDialog();
+			const idx = Array.prototype.indexOf.call(focusableEls, event.currentTarget);
+			focusableEls[event.shiftKey ? (idx - 1 + focusableEls.length) % focusableEls.length : (idx + 1) % focusableEls.length]?.focus();
+			return false;
+		}
+		return super._handleCellKeydown(event, value, index, isSaveCell);
+	}
+	/**
+	* @internal
+	*/
+	_handleSwatchSelection(value) {
+		/* v8 ignore else -- @preserve */
+		if (this.value !== value) this._ariaLiveDescription = this.locale.colorPicker.selectionSuccessMessage(value);
+		super._handleSwatchSelection(value);
+	}
+};
+__decorate([attr], ColorPicker.prototype, "placeholder", void 0);
+__decorate([attr({ attribute: "saved-colors-key" })], ColorPicker.prototype, "savedColorsKey", void 0);
+__decorate([attr({
+	mode: "boolean",
+	attribute: "disable-saved-colors"
+})], ColorPicker.prototype, "disableSavedColors", void 0);
+__decorate([observable], ColorPicker.prototype, "savedColors", void 0);
+__decorate([attr({
+	attribute: "max-swatches",
+	mode: "fromView",
+	converter: nullableNumberConverter
+})], ColorPicker.prototype, "maxSwatches", void 0);
+__decorate([observable], ColorPicker.prototype, "copyIconName", void 0);
+__decorate([observable], ColorPicker.prototype, "_ariaLiveDescription", void 0);
+//#endregion
+//#region src/lib/color-picker/color-picker.template.ts
+function renderTextField(textFieldTag, iconTag) {
+	const getClasses = (_) => classNames("control");
+	return html`
+		<${textFieldTag} 
+			id="text-field"
+			class="${getClasses}"
+			pattern="${ColorPicker.HEX_COLOR_PATTERN.source}"
+			maxlength="7"
+			label="${(x) => x.label}"
+			:value="${(x) => x.value}"
+			placeholder="${(x) => x.placeholder}"
+			helper-text="${(x) => x.helperText}"
+			error-text="${(x) => x.errorValidationMessage}"
+			success-text="${(x) => x.successText}"
+			?disabled="${(x) => x.disabled}"
+			?required="${(x) => x.required}"
+			@input='${(x, c) => x._onTextFieldInput(c.event)}'
+			@change="${(x) => x.handleChange()}"
+			@blur="${(x) => {
+		x.$emit("blur", void 0, { bubbles: false });
+	}}"
+			@focus="${(x) => {
+		x.$emit("focus", void 0, { bubbles: false });
+	}}"
+			${delegateAria()}
+			${ref("_textFieldEl")}
+		>
+			<button 
+				aria-label="${(x) => x.locale.colorPicker.pickerButtonLabel}"
+				aria-expanded="${(x) => x.open}"
+  			aria-haspopup="dialog"
+				class="button ${(x) => classNames(x._applyContrastClass(x._buttonColor) ? "contrast" : "", x.disabled ? "disabled" : "")}" 
+				style="--button-color: ${(x) => x._buttonColor};" 
+				?disabled="${(x) => x.disabled}"
+				@click="${(x) => x._onButtonClick()}"
+				slot="action-items" 
+				${ref("_buttonEl")}>
+				<${iconTag} name="edit-line"></${iconTag}>
+			</button>
+			<slot
+				slot="${(x) => x._helperTextSlottedContent?.length ? "helper-text" : void 0}"
+				name="helper-text"
+				${slotted("_helperTextSlottedContent")}
+			></slot>
+			<slot
+				slot='${(x) => x._contextualHelpSlottedContent?.length ? "contextual-help" : void 0}'
+				name='contextual-help'
+				${slotted("_contextualHelpSlottedContent")}
+			></slot>
+		</${textFieldTag}>
+	`;
+}
+function renderPopupHeader(buttonTag, iconTag) {
+	return html`
+		<div class="header">
+			<h2 class="header-title" id="color-picker-title">
+				<slot name="popup-text">${(x) => x.locale.colorPicker.popupLabel}</slot>
+			</h2>
+			<${buttonTag} size="condensed" 
+				aria-label="${(x) => x.locale.colorPicker.closeButtonLabel}" 
+				@click="${(x) => x._handleCloseRequest()}">
+				<${iconTag} slot="icon" name="close-line"></${iconTag}>
+			</${buttonTag}>
+		</div>
+	`;
+}
+function renderPopupBody(buttonTag, iconTag, tooltipTag) {
+	return html`
+		<div class="body">
+			<${html.partial(vcPickerTag)}
+				part="hex-picker"
+				color="${(x) => x.value}"
+				@color-changed="${(x, c) => x._onPickerColorChanged(c.event)}"
+				${ref("_vcHexPickerEl")}
+			></${html.partial(vcPickerTag)}>
+			<div class="hex-input-wrapper">
+				<${html.partial(vcInputTag)}
+					part="hex-input"
+					prefixed
+					color="${(x) => x.value}"
+					@color-changed="${(x, c) => x._onPickerColorChanged(c.event)}"
+					${ref("_vcHexInputEl")}
+				>
+					<input name="hex-code-input" aria-label="${(x) => x.locale.colorPicker.hexInputLabel}" 
+						placeholder="${(x) => x.placeholder}"
+    				@blur="${(x, c) => c.event.stopImmediatePropagation()}"
+						part="input">
+				</${html.partial(vcInputTag)}>
+				<${tooltipTag} placement="top" 
+					text="${(x) => x.locale.colorPicker.copyButtonLabel}" 
+					exportparts="vvd-theme-alternate">
+					<${buttonTag} 
+						slot="anchor" size="normal" 
+						aria-label="${(x) => x.locale.colorPicker.copyButtonLabel}" 
+						@click="${(x) => x._copyValueToClipboard(x.value)}">
+						<${iconTag} slot="icon" name="${(x) => x.copyIconName}"></${iconTag}>
+					</${buttonTag}>
+				</${tooltipTag}>
+			</div>
+		</div>
+	`;
+}
+function renderPopupFooter(buttonTag, iconTag, tooltipTag) {
+	return html`
+		<div class="footer">
+			<div class="footer-header">
+				<span class="footer-title" id="color-picker-footer-title"
+					><slot name="swatches-text"
+						>${(x) => x.locale.colorPicker.swatchesLabel}</slot
+					></span
+				>
+				${when((x) => !x.disableSavedColors, renderSwatchesCount())}
+			</div>
+			<div
+				class="palette"
+				role="grid"
+				aria-rowcount="${(x) => Math.ceil(x.allSwatches.length / x._getRowLength())}"
+				aria-colcount="${(x) => x._getRowLength()}"
+				style="--swatches-per-row: ${(x) => x._getRowLength()};"
+				aria-labelledby="color-picker-footer-title"
+			>
+				${repeat((x) => x.allSwatches, (x) => x._renderColorSwatch(iconTag, tooltipTag), { positioning: true })}
+				${when((x) => !x.disableSavedColors, html`
+						<${tooltipTag} placement="top" 
+							text="${(x) => x.locale.colorPicker.saveButtonLabel}" 
+							exportparts="vvd-theme-alternate">
+							<${buttonTag}
+								slot="anchor"
+								appearance="outlined"
+								size="super-condensed"
+								role="gridcell"
+								tabindex="${(x) => x.allSwatches.length ? "-1" : "0"}"
+								aria-label="${(x) => x.locale.colorPicker.saveButtonLabel}"
+								@click="${(x) => x._saveCurrentColor()}"
+								@keydown="${(x, c) => x._handleCellKeydown(c.event, x.value, x.allSwatches.length, true)}">
+								<${iconTag} slot="icon" name="plus-line"></${iconTag}>
+							</${buttonTag}>
+						</${tooltipTag}>
+					`)}
+			</div>
+		</div>
+	`;
+}
+function renderSwatchesCount() {
+	return html`
+		<span
+			id="swatches-count"
+			class="swatches-count"
+			aria-label="${(x) => x.locale.colorPicker.maxSwatchesMessage(x.allSwatches.length, x.maxSwatches)}"
+			>${(x) => `${x.allSwatches.length}/${x.maxSwatches}`}</span
+		>
+	`;
+}
+var ColorPickerTemplate = (context) => {
+	const textFieldTag = context.tagFor(TextField);
+	const iconTag = context.tagFor(Icon);
+	const popupTag = context.tagFor(Popup);
+	const buttonTag = context.tagFor(Button);
+	const tooltipTag = context.tagFor(Tooltip);
+	return html`
+		<div class="base" @keydown="${(x, { event }) => x._onBaseKeydown(event)}">
+			<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
+				${(x) => x._ariaLiveDescription}
+			</span>
+			${renderTextField(textFieldTag, iconTag)}
+			<${popupTag}
+				:open="${(x) => x.open}"
+				:anchor="${(x) => x._buttonEl}"
+				placement="top"
+				offset="10" 
+				${ref("_popupEl")}>
+				<div class="dialog" 
+					role="dialog" 
+					aria-modal="true" 
+					aria-labelledby="color-picker-title">
+					${renderPopupHeader(buttonTag, iconTag)}
+					${renderPopupBody(buttonTag, iconTag, tooltipTag)}
+					${when((x) => !x.disableSavedColors || x.allSwatches.length > 0, renderPopupFooter(buttonTag, iconTag, tooltipTag))}
+				</div>
+			</${popupTag}>
+		</div>
+	`;
+};
+//#endregion
+//#region src/lib/color-picker/definition.ts
+var colorPickerDefinition = defineVividComponent("color-picker", ColorPicker, ColorPickerTemplate, [
+	popupDefinition,
+	iconDefinition,
+	textFieldDefinition,
+	buttonDefinition,
+	tooltipDefinition,
+	feedbackMessageDefinition
+], { styles: color_picker_default$1 });
+/**
+* Registers the color-picker element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerColorPicker = createRegisterFunction(colorPickerDefinition);
+//#endregion
+export { registerColorPicker as n, ColorPicker as r, colorPickerDefinition as t };