@c2n/color-select 0.0.6

package/dist/color-select.js

@@ -0,0 +1,1344 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import "@c2n/overlay";
+import "@c2n/color-area";
+import "@c2n/select";
+import "@c2n/text-field";
+import "@c2n/color-slider";
+//#region ../../../node_modules/@ctrl/tinycolor/dist/module/util.js
+/**
+* Take input from [0, n] and return it as [0, 1]
+* @hidden
+*/
+function bound01(n, max) {
+	if (isOnePointZero(n)) n = "100%";
+	const isPercent = isPercentage(n);
+	n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n)));
+	if (isPercent) n = parseInt(String(n * max), 10) / 100;
+	if (Math.abs(n - max) < 1e-6) return 1;
+	if (max === 360) n = (n < 0 ? n % max + max : n % max) / parseFloat(String(max));
+	else n = n % max / parseFloat(String(max));
+	return n;
+}
+/**
+* Force a number between 0 and 1
+* @hidden
+*/
+function clamp01(val) {
+	return Math.min(1, Math.max(0, val));
+}
+/**
+* Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
+* <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
+* @hidden
+*/
+function isOnePointZero(n) {
+	return typeof n === "string" && n.indexOf(".") !== -1 && parseFloat(n) === 1;
+}
+/**
+* Check to see if string passed in is a percentage
+* @hidden
+*/
+function isPercentage(n) {
+	return typeof n === "string" && n.indexOf("%") !== -1;
+}
+/**
+* Return a valid alpha value [0,1] with all invalid values being set to 1
+* @hidden
+*/
+function boundAlpha(a) {
+	a = parseFloat(a);
+	if (isNaN(a) || a < 0 || a > 1) a = 1;
+	return a;
+}
+/**
+* Replace a decimal with it's percentage value
+* @hidden
+*/
+function convertToPercentage(n) {
+	if (Number(n) <= 1) return `${Number(n) * 100}%`;
+	return n;
+}
+/**
+* Force a hex value to have 2 characters
+* @hidden
+*/
+function pad2(c) {
+	return c.length === 1 ? "0" + c : String(c);
+}
+//#endregion
+//#region ../../../node_modules/@ctrl/tinycolor/dist/module/conversion.js
+/**
+* Handle bounds / percentage checking to conform to CSS color spec
+* <http://www.w3.org/TR/css3-color/>
+* *Assumes:* r, g, b in [0, 255] or [0, 1]
+* *Returns:* { r, g, b } in [0, 255]
+*/
+function rgbToRgb(r, g, b) {
+	return {
+		r: bound01(r, 255) * 255,
+		g: bound01(g, 255) * 255,
+		b: bound01(b, 255) * 255
+	};
+}
+/**
+* Converts an RGB color value to HSL.
+* *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
+* *Returns:* { h, s, l } in [0,1]
+*/
+function rgbToHsl(r, g, b) {
+	r = bound01(r, 255);
+	g = bound01(g, 255);
+	b = bound01(b, 255);
+	const max = Math.max(r, g, b);
+	const min = Math.min(r, g, b);
+	let h = 0;
+	let s = 0;
+	const l = (max + min) / 2;
+	if (max === min) {
+		s = 0;
+		h = 0;
+	} else {
+		const d = max - min;
+		s = l > .5 ? d / (2 - max - min) : d / (max + min);
+		switch (max) {
+			case r:
+				h = (g - b) / d + (g < b ? 6 : 0);
+				break;
+			case g:
+				h = (b - r) / d + 2;
+				break;
+			case b: h = (r - g) / d + 4;
+		}
+		h /= 6;
+	}
+	return {
+		h,
+		s,
+		l
+	};
+}
+function hue2rgb(p, q, t) {
+	if (t < 0) t += 1;
+	if (t > 1) t -= 1;
+	if (t < 1 / 6) return p + (q - p) * (6 * t);
+	if (t < 1 / 2) return q;
+	if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+	return p;
+}
+/**
+* Converts an HSL color value to RGB.
+*
+* *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
+* *Returns:* { r, g, b } in the set [0, 255]
+*/
+function hslToRgb(h, s, l) {
+	let r;
+	let g;
+	let b;
+	h = bound01(h, 360);
+	s = bound01(s, 100);
+	l = bound01(l, 100);
+	if (s === 0) {
+		g = l;
+		b = l;
+		r = l;
+	} else {
+		const q = l < .5 ? l * (1 + s) : l + s - l * s;
+		const p = 2 * l - q;
+		r = hue2rgb(p, q, h + 1 / 3);
+		g = hue2rgb(p, q, h);
+		b = hue2rgb(p, q, h - 1 / 3);
+	}
+	return {
+		r: r * 255,
+		g: g * 255,
+		b: b * 255
+	};
+}
+/**
+* Converts an RGB color value to HSV
+*
+* *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
+* *Returns:* { h, s, v } in [0,1]
+*/
+function rgbToHsv(r, g, b) {
+	r = bound01(r, 255);
+	g = bound01(g, 255);
+	b = bound01(b, 255);
+	const max = Math.max(r, g, b);
+	const min = Math.min(r, g, b);
+	let h = 0;
+	const v = max;
+	const d = max - min;
+	const s = max === 0 ? 0 : d / max;
+	if (max === min) h = 0;
+	else {
+		switch (max) {
+			case r:
+				h = (g - b) / d + (g < b ? 6 : 0);
+				break;
+			case g:
+				h = (b - r) / d + 2;
+				break;
+			case b: h = (r - g) / d + 4;
+		}
+		h /= 6;
+	}
+	return {
+		h,
+		s,
+		v
+	};
+}
+/**
+* Converts an HSV color value to RGB.
+*
+* *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
+* *Returns:* { r, g, b } in the set [0, 255]
+*/
+function hsvToRgb(h, s, v) {
+	h = bound01(h, 360) * 6;
+	s = bound01(s, 100);
+	v = bound01(v, 100);
+	const i = Math.floor(h);
+	const f = h - i;
+	const p = v * (1 - s);
+	const q = v * (1 - f * s);
+	const t = v * (1 - (1 - f) * s);
+	const mod = i % 6;
+	const r = [
+		v,
+		q,
+		p,
+		p,
+		t,
+		v
+	][mod];
+	const g = [
+		t,
+		v,
+		v,
+		q,
+		p,
+		p
+	][mod];
+	const b = [
+		p,
+		p,
+		t,
+		v,
+		v,
+		q
+	][mod];
+	return {
+		r: r * 255,
+		g: g * 255,
+		b: b * 255
+	};
+}
+/**
+* Converts an RGB color to hex
+*
+* *Assumes:* r, g, and b are contained in the set [0, 255]
+* *Returns:* a 3 or 6 character hex
+*/
+function rgbToHex(r, g, b, allow3Char) {
+	const hex = [
+		pad2(Math.round(r).toString(16)),
+		pad2(Math.round(g).toString(16)),
+		pad2(Math.round(b).toString(16))
+	];
+	if (allow3Char && hex[0].startsWith(hex[0].charAt(1)) && hex[1].startsWith(hex[1].charAt(1)) && hex[2].startsWith(hex[2].charAt(1))) return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
+	return hex.join("");
+}
+/**
+* Converts an RGBA color plus alpha transparency to hex
+*
+* *Assumes:* r, g, b are contained in the set [0, 255] and a in [0, 1]
+* *Returns:* a 4 or 8 character rgba hex
+*/
+function rgbaToHex(r, g, b, a, allow4Char) {
+	const hex = [
+		pad2(Math.round(r).toString(16)),
+		pad2(Math.round(g).toString(16)),
+		pad2(Math.round(b).toString(16)),
+		pad2(convertDecimalToHex(a))
+	];
+	if (allow4Char && hex[0].startsWith(hex[0].charAt(1)) && hex[1].startsWith(hex[1].charAt(1)) && hex[2].startsWith(hex[2].charAt(1)) && hex[3].startsWith(hex[3].charAt(1))) return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
+	return hex.join("");
+}
+/**
+* Converts CMYK to RBG
+* Assumes c, m, y, k are in the set [0, 100]
+*/
+function cmykToRgb(c, m, y, k) {
+	const cConv = c / 100;
+	const mConv = m / 100;
+	const yConv = y / 100;
+	const kConv = k / 100;
+	return {
+		r: 255 * (1 - cConv) * (1 - kConv),
+		g: 255 * (1 - mConv) * (1 - kConv),
+		b: 255 * (1 - yConv) * (1 - kConv)
+	};
+}
+function rgbToCmyk(r, g, b) {
+	let c = 1 - r / 255;
+	let m = 1 - g / 255;
+	let y = 1 - b / 255;
+	let k = Math.min(c, m, y);
+	if (k === 1) {
+		c = 0;
+		m = 0;
+		y = 0;
+	} else {
+		c = (c - k) / (1 - k) * 100;
+		m = (m - k) / (1 - k) * 100;
+		y = (y - k) / (1 - k) * 100;
+	}
+	k *= 100;
+	return {
+		c: Math.round(c),
+		m: Math.round(m),
+		y: Math.round(y),
+		k: Math.round(k)
+	};
+}
+/** Converts a decimal to a hex value */
+function convertDecimalToHex(d) {
+	return Math.round(parseFloat(d) * 255).toString(16);
+}
+/** Converts a hex value to a decimal */
+function convertHexToDecimal(h) {
+	return parseIntFromHex(h) / 255;
+}
+/** Parse a base-16 hex value into a base-10 integer */
+function parseIntFromHex(val) {
+	return parseInt(val, 16);
+}
+function numberInputToObject(color) {
+	return {
+		r: color >> 16,
+		g: (color & 65280) >> 8,
+		b: color & 255
+	};
+}
+//#endregion
+//#region ../../../node_modules/@ctrl/tinycolor/dist/module/css-color-names.js
+/**
+* @hidden
+*/
+var names = {
+	aliceblue: "#f0f8ff",
+	antiquewhite: "#faebd7",
+	aqua: "#00ffff",
+	aquamarine: "#7fffd4",
+	azure: "#f0ffff",
+	beige: "#f5f5dc",
+	bisque: "#ffe4c4",
+	black: "#000000",
+	blanchedalmond: "#ffebcd",
+	blue: "#0000ff",
+	blueviolet: "#8a2be2",
+	brown: "#a52a2a",
+	burlywood: "#deb887",
+	cadetblue: "#5f9ea0",
+	chartreuse: "#7fff00",
+	chocolate: "#d2691e",
+	coral: "#ff7f50",
+	cornflowerblue: "#6495ed",
+	cornsilk: "#fff8dc",
+	crimson: "#dc143c",
+	cyan: "#00ffff",
+	darkblue: "#00008b",
+	darkcyan: "#008b8b",
+	darkgoldenrod: "#b8860b",
+	darkgray: "#a9a9a9",
+	darkgreen: "#006400",
+	darkgrey: "#a9a9a9",
+	darkkhaki: "#bdb76b",
+	darkmagenta: "#8b008b",
+	darkolivegreen: "#556b2f",
+	darkorange: "#ff8c00",
+	darkorchid: "#9932cc",
+	darkred: "#8b0000",
+	darksalmon: "#e9967a",
+	darkseagreen: "#8fbc8f",
+	darkslateblue: "#483d8b",
+	darkslategray: "#2f4f4f",
+	darkslategrey: "#2f4f4f",
+	darkturquoise: "#00ced1",
+	darkviolet: "#9400d3",
+	deeppink: "#ff1493",
+	deepskyblue: "#00bfff",
+	dimgray: "#696969",
+	dimgrey: "#696969",
+	dodgerblue: "#1e90ff",
+	firebrick: "#b22222",
+	floralwhite: "#fffaf0",
+	forestgreen: "#228b22",
+	fuchsia: "#ff00ff",
+	gainsboro: "#dcdcdc",
+	ghostwhite: "#f8f8ff",
+	goldenrod: "#daa520",
+	gold: "#ffd700",
+	gray: "#808080",
+	green: "#008000",
+	greenyellow: "#adff2f",
+	grey: "#808080",
+	honeydew: "#f0fff0",
+	hotpink: "#ff69b4",
+	indianred: "#cd5c5c",
+	indigo: "#4b0082",
+	ivory: "#fffff0",
+	khaki: "#f0e68c",
+	lavenderblush: "#fff0f5",
+	lavender: "#e6e6fa",
+	lawngreen: "#7cfc00",
+	lemonchiffon: "#fffacd",
+	lightblue: "#add8e6",
+	lightcoral: "#f08080",
+	lightcyan: "#e0ffff",
+	lightgoldenrodyellow: "#fafad2",
+	lightgray: "#d3d3d3",
+	lightgreen: "#90ee90",
+	lightgrey: "#d3d3d3",
+	lightpink: "#ffb6c1",
+	lightsalmon: "#ffa07a",
+	lightseagreen: "#20b2aa",
+	lightskyblue: "#87cefa",
+	lightslategray: "#778899",
+	lightslategrey: "#778899",
+	lightsteelblue: "#b0c4de",
+	lightyellow: "#ffffe0",
+	lime: "#00ff00",
+	limegreen: "#32cd32",
+	linen: "#faf0e6",
+	magenta: "#ff00ff",
+	maroon: "#800000",
+	mediumaquamarine: "#66cdaa",
+	mediumblue: "#0000cd",
+	mediumorchid: "#ba55d3",
+	mediumpurple: "#9370db",
+	mediumseagreen: "#3cb371",
+	mediumslateblue: "#7b68ee",
+	mediumspringgreen: "#00fa9a",
+	mediumturquoise: "#48d1cc",
+	mediumvioletred: "#c71585",
+	midnightblue: "#191970",
+	mintcream: "#f5fffa",
+	mistyrose: "#ffe4e1",
+	moccasin: "#ffe4b5",
+	navajowhite: "#ffdead",
+	navy: "#000080",
+	oldlace: "#fdf5e6",
+	olive: "#808000",
+	olivedrab: "#6b8e23",
+	orange: "#ffa500",
+	orangered: "#ff4500",
+	orchid: "#da70d6",
+	palegoldenrod: "#eee8aa",
+	palegreen: "#98fb98",
+	paleturquoise: "#afeeee",
+	palevioletred: "#db7093",
+	papayawhip: "#ffefd5",
+	peachpuff: "#ffdab9",
+	peru: "#cd853f",
+	pink: "#ffc0cb",
+	plum: "#dda0dd",
+	powderblue: "#b0e0e6",
+	purple: "#800080",
+	rebeccapurple: "#663399",
+	red: "#ff0000",
+	rosybrown: "#bc8f8f",
+	royalblue: "#4169e1",
+	saddlebrown: "#8b4513",
+	salmon: "#fa8072",
+	sandybrown: "#f4a460",
+	seagreen: "#2e8b57",
+	seashell: "#fff5ee",
+	sienna: "#a0522d",
+	silver: "#c0c0c0",
+	skyblue: "#87ceeb",
+	slateblue: "#6a5acd",
+	slategray: "#708090",
+	slategrey: "#708090",
+	snow: "#fffafa",
+	springgreen: "#00ff7f",
+	steelblue: "#4682b4",
+	tan: "#d2b48c",
+	teal: "#008080",
+	thistle: "#d8bfd8",
+	tomato: "#ff6347",
+	turquoise: "#40e0d0",
+	violet: "#ee82ee",
+	wheat: "#f5deb3",
+	white: "#ffffff",
+	whitesmoke: "#f5f5f5",
+	yellow: "#ffff00",
+	yellowgreen: "#9acd32"
+};
+//#endregion
+//#region ../../../node_modules/@ctrl/tinycolor/dist/module/format-input.js
+/**
+* Given a string or object, convert that input to RGB
+*
+* Possible string inputs:
+* ```
+* "red"
+* "#f00" or "f00"
+* "#ff0000" or "ff0000"
+* "#ff000000" or "ff000000"
+* "rgb 255 0 0" or "rgb (255, 0, 0)"
+* "rgb 1.0 0 0" or "rgb (1, 0, 0)"
+* "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
+* "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
+* "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
+* "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
+* "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
+* "cmyk(0, 20, 0, 0)" or "cmyk 0 20 0 0"
+* ```
+*/
+function inputToRGB(color) {
+	let rgb = {
+		r: 0,
+		g: 0,
+		b: 0
+	};
+	let a = 1;
+	let s = null;
+	let v = null;
+	let l = null;
+	let ok = false;
+	let format = false;
+	if (typeof color === "string") color = stringInputToObject(color);
+	if (typeof color === "object") {
+		if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
+			rgb = rgbToRgb(color.r, color.g, color.b);
+			ok = true;
+			format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
+		} else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
+			s = convertToPercentage(color.s);
+			v = convertToPercentage(color.v);
+			rgb = hsvToRgb(color.h, s, v);
+			ok = true;
+			format = "hsv";
+		} else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
+			s = convertToPercentage(color.s);
+			l = convertToPercentage(color.l);
+			rgb = hslToRgb(color.h, s, l);
+			ok = true;
+			format = "hsl";
+		} else if (isValidCSSUnit(color.c) && isValidCSSUnit(color.m) && isValidCSSUnit(color.y) && isValidCSSUnit(color.k)) {
+			rgb = cmykToRgb(color.c, color.m, color.y, color.k);
+			ok = true;
+			format = "cmyk";
+		}
+		if (Object.prototype.hasOwnProperty.call(color, "a")) a = color.a;
+	}
+	a = boundAlpha(a);
+	return {
+		ok,
+		format: color.format || format,
+		r: Math.min(255, Math.max(rgb.r, 0)),
+		g: Math.min(255, Math.max(rgb.g, 0)),
+		b: Math.min(255, Math.max(rgb.b, 0)),
+		a
+	};
+}
+var CSS_UNIT = "(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)";
+var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
+var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
+var matchers = {
+	CSS_UNIT: new RegExp(CSS_UNIT),
+	rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
+	rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
+	hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
+	hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
+	hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
+	hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
+	cmyk: new RegExp("cmyk" + PERMISSIVE_MATCH4),
+	hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+	hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+	hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+	hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
+};
+/**
+* Permissive string parsing.  Take in a number of formats, and output an object
+* based on detected format.  Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}` or `{c, m, y, k}` or `{c, m, y, k, a}`
+*/
+function stringInputToObject(color) {
+	color = color.trim().toLowerCase();
+	if (color.length === 0) return false;
+	let named = false;
+	if (names[color]) {
+		color = names[color];
+		named = true;
+	} else if (color === "transparent") return {
+		r: 0,
+		g: 0,
+		b: 0,
+		a: 0,
+		format: "name"
+	};
+	let match = matchers.rgb.exec(color);
+	if (match) return {
+		r: match[1],
+		g: match[2],
+		b: match[3]
+	};
+	match = matchers.rgba.exec(color);
+	if (match) return {
+		r: match[1],
+		g: match[2],
+		b: match[3],
+		a: match[4]
+	};
+	match = matchers.hsl.exec(color);
+	if (match) return {
+		h: match[1],
+		s: match[2],
+		l: match[3]
+	};
+	match = matchers.hsla.exec(color);
+	if (match) return {
+		h: match[1],
+		s: match[2],
+		l: match[3],
+		a: match[4]
+	};
+	match = matchers.hsv.exec(color);
+	if (match) return {
+		h: match[1],
+		s: match[2],
+		v: match[3]
+	};
+	match = matchers.hsva.exec(color);
+	if (match) return {
+		h: match[1],
+		s: match[2],
+		v: match[3],
+		a: match[4]
+	};
+	match = matchers.cmyk.exec(color);
+	if (match) return {
+		c: match[1],
+		m: match[2],
+		y: match[3],
+		k: match[4]
+	};
+	match = matchers.hex8.exec(color);
+	if (match) return {
+		r: parseIntFromHex(match[1]),
+		g: parseIntFromHex(match[2]),
+		b: parseIntFromHex(match[3]),
+		a: convertHexToDecimal(match[4]),
+		format: named ? "name" : "hex8"
+	};
+	match = matchers.hex6.exec(color);
+	if (match) return {
+		r: parseIntFromHex(match[1]),
+		g: parseIntFromHex(match[2]),
+		b: parseIntFromHex(match[3]),
+		format: named ? "name" : "hex"
+	};
+	match = matchers.hex4.exec(color);
+	if (match) return {
+		r: parseIntFromHex(match[1] + match[1]),
+		g: parseIntFromHex(match[2] + match[2]),
+		b: parseIntFromHex(match[3] + match[3]),
+		a: convertHexToDecimal(match[4] + match[4]),
+		format: named ? "name" : "hex8"
+	};
+	match = matchers.hex3.exec(color);
+	if (match) return {
+		r: parseIntFromHex(match[1] + match[1]),
+		g: parseIntFromHex(match[2] + match[2]),
+		b: parseIntFromHex(match[3] + match[3]),
+		format: named ? "name" : "hex"
+	};
+	return false;
+}
+/**
+* Check to see if it looks like a CSS unit
+* (see `matchers` above for definition).
+*/
+function isValidCSSUnit(color) {
+	if (typeof color === "number") return !Number.isNaN(color);
+	return matchers.CSS_UNIT.test(color);
+}
+//#endregion
+//#region ../../../node_modules/@ctrl/tinycolor/dist/module/index.js
+var TinyColor = class TinyColor {
+	constructor(color = "", opts = {}) {
+		if (color instanceof TinyColor) return color;
+		if (typeof color === "number") color = numberInputToObject(color);
+		this.originalInput = color;
+		const rgb = inputToRGB(color);
+		this.originalInput = color;
+		this.r = rgb.r;
+		this.g = rgb.g;
+		this.b = rgb.b;
+		this.a = rgb.a;
+		this.roundA = Math.round(100 * this.a) / 100;
+		this.format = opts.format ?? rgb.format;
+		this.gradientType = opts.gradientType;
+		if (this.r < 1) this.r = Math.round(this.r);
+		if (this.g < 1) this.g = Math.round(this.g);
+		if (this.b < 1) this.b = Math.round(this.b);
+		this.isValid = rgb.ok;
+	}
+	isDark() {
+		return this.getBrightness() < 128;
+	}
+	isLight() {
+		return !this.isDark();
+	}
+	/**
+	* Returns the perceived brightness of the color, from 0-255.
+	*/
+	getBrightness() {
+		const rgb = this.toRgb();
+		return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3;
+	}
+	/**
+	* Returns the perceived luminance of a color, from 0-1.
+	*/
+	getLuminance() {
+		const rgb = this.toRgb();
+		let R;
+		let G;
+		let B;
+		const RsRGB = rgb.r / 255;
+		const GsRGB = rgb.g / 255;
+		const BsRGB = rgb.b / 255;
+		if (RsRGB <= .03928) R = RsRGB / 12.92;
+		else R = Math.pow((RsRGB + .055) / 1.055, 2.4);
+		if (GsRGB <= .03928) G = GsRGB / 12.92;
+		else G = Math.pow((GsRGB + .055) / 1.055, 2.4);
+		if (BsRGB <= .03928) B = BsRGB / 12.92;
+		else B = Math.pow((BsRGB + .055) / 1.055, 2.4);
+		return .2126 * R + .7152 * G + .0722 * B;
+	}
+	/**
+	* Returns the alpha value of a color, from 0-1.
+	*/
+	getAlpha() {
+		return this.a;
+	}
+	/**
+	* Sets the alpha value on the current color.
+	*
+	* @param alpha - The new alpha value. The accepted range is 0-1.
+	*/
+	setAlpha(alpha) {
+		this.a = boundAlpha(alpha);
+		this.roundA = Math.round(100 * this.a) / 100;
+		return this;
+	}
+	/**
+	* Returns whether the color is monochrome.
+	*/
+	isMonochrome() {
+		const { s } = this.toHsl();
+		return s === 0;
+	}
+	/**
+	* Returns the object as a HSVA object.
+	*/
+	toHsv() {
+		const hsv = rgbToHsv(this.r, this.g, this.b);
+		return {
+			h: hsv.h * 360,
+			s: hsv.s,
+			v: hsv.v,
+			a: this.a
+		};
+	}
+	/**
+	* Returns the hsva values interpolated into a string with the following format:
+	* "hsva(xxx, xxx, xxx, xx)".
+	*/
+	toHsvString() {
+		const hsv = rgbToHsv(this.r, this.g, this.b);
+		const h = Math.round(hsv.h * 360);
+		const s = Math.round(hsv.s * 100);
+		const v = Math.round(hsv.v * 100);
+		return this.a === 1 ? `hsv(${h}, ${s}%, ${v}%)` : `hsva(${h}, ${s}%, ${v}%, ${this.roundA})`;
+	}
+	/**
+	* Returns the object as a HSLA object.
+	*/
+	toHsl() {
+		const hsl = rgbToHsl(this.r, this.g, this.b);
+		return {
+			h: hsl.h * 360,
+			s: hsl.s,
+			l: hsl.l,
+			a: this.a
+		};
+	}
+	/**
+	* Returns the hsla values interpolated into a string with the following format:
+	* "hsla(xxx, xxx, xxx, xx)".
+	*/
+	toHslString() {
+		const hsl = rgbToHsl(this.r, this.g, this.b);
+		const h = Math.round(hsl.h * 360);
+		const s = Math.round(hsl.s * 100);
+		const l = Math.round(hsl.l * 100);
+		return this.a === 1 ? `hsl(${h}, ${s}%, ${l}%)` : `hsla(${h}, ${s}%, ${l}%, ${this.roundA})`;
+	}
+	/**
+	* Returns the hex value of the color.
+	* @param allow3Char will shorten hex value to 3 char if possible
+	*/
+	toHex(allow3Char = false) {
+		return rgbToHex(this.r, this.g, this.b, allow3Char);
+	}
+	/**
+	* Returns the hex value of the color -with a # prefixed.
+	* @param allow3Char will shorten hex value to 3 char if possible
+	*/
+	toHexString(allow3Char = false) {
+		return "#" + this.toHex(allow3Char);
+	}
+	/**
+	* Returns the hex 8 value of the color.
+	* @param allow4Char will shorten hex value to 4 char if possible
+	*/
+	toHex8(allow4Char = false) {
+		return rgbaToHex(this.r, this.g, this.b, this.a, allow4Char);
+	}
+	/**
+	* Returns the hex 8 value of the color -with a # prefixed.
+	* @param allow4Char will shorten hex value to 4 char if possible
+	*/
+	toHex8String(allow4Char = false) {
+		return "#" + this.toHex8(allow4Char);
+	}
+	/**
+	* Returns the shorter hex value of the color depends on its alpha -with a # prefixed.
+	* @param allowShortChar will shorten hex value to 3 or 4 char if possible
+	*/
+	toHexShortString(allowShortChar = false) {
+		return this.a === 1 ? this.toHexString(allowShortChar) : this.toHex8String(allowShortChar);
+	}
+	/**
+	* Returns the object as a RGBA object.
+	*/
+	toRgb() {
+		return {
+			r: Math.round(this.r),
+			g: Math.round(this.g),
+			b: Math.round(this.b),
+			a: this.a
+		};
+	}
+	/**
+	* Returns the RGBA values interpolated into a string with the following format:
+	* "RGBA(xxx, xxx, xxx, xx)".
+	*/
+	toRgbString() {
+		const r = Math.round(this.r);
+		const g = Math.round(this.g);
+		const b = Math.round(this.b);
+		return this.a === 1 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${this.roundA})`;
+	}
+	/**
+	* Returns the object as a RGBA object.
+	*/
+	toPercentageRgb() {
+		const fmt = (x) => `${Math.round(bound01(x, 255) * 100)}%`;
+		return {
+			r: fmt(this.r),
+			g: fmt(this.g),
+			b: fmt(this.b),
+			a: this.a
+		};
+	}
+	/**
+	* Returns the RGBA relative values interpolated into a string
+	*/
+	toPercentageRgbString() {
+		const rnd = (x) => Math.round(bound01(x, 255) * 100);
+		return this.a === 1 ? `rgb(${rnd(this.r)}%, ${rnd(this.g)}%, ${rnd(this.b)}%)` : `rgba(${rnd(this.r)}%, ${rnd(this.g)}%, ${rnd(this.b)}%, ${this.roundA})`;
+	}
+	toCmyk() {
+		return { ...rgbToCmyk(this.r, this.g, this.b) };
+	}
+	toCmykString() {
+		const { c, m, y, k } = rgbToCmyk(this.r, this.g, this.b);
+		return `cmyk(${c}, ${m}, ${y}, ${k})`;
+	}
+	/**
+	* The 'real' name of the color -if there is one.
+	*/
+	toName() {
+		if (this.a === 0) return "transparent";
+		if (this.a < 1) return false;
+		const hex = "#" + rgbToHex(this.r, this.g, this.b, false);
+		for (const [key, value] of Object.entries(names)) if (hex === value) return key;
+		return false;
+	}
+	toString(format) {
+		const formatSet = Boolean(format);
+		format = format ?? this.format;
+		let formattedString = false;
+		const hasAlpha = this.a < 1 && this.a >= 0;
+		if (!formatSet && hasAlpha && (format.startsWith("hex") || format === "name")) {
+			if (format === "name" && this.a === 0) return this.toName();
+			return this.toRgbString();
+		}
+		if (format === "rgb") formattedString = this.toRgbString();
+		if (format === "prgb") formattedString = this.toPercentageRgbString();
+		if (format === "hex" || format === "hex6") formattedString = this.toHexString();
+		if (format === "hex3") formattedString = this.toHexString(true);
+		if (format === "hex4") formattedString = this.toHex8String(true);
+		if (format === "hex8") formattedString = this.toHex8String();
+		if (format === "name") formattedString = this.toName();
+		if (format === "hsl") formattedString = this.toHslString();
+		if (format === "hsv") formattedString = this.toHsvString();
+		if (format === "cmyk") formattedString = this.toCmykString();
+		return formattedString || this.toHexString();
+	}
+	toNumber() {
+		return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
+	}
+	clone() {
+		return new TinyColor(this.toString());
+	}
+	/**
+	* Lighten the color a given amount. Providing 100 will always return white.
+	* @param amount - valid between 1-100
+	*/
+	lighten(amount = 10) {
+		const hsl = this.toHsl();
+		hsl.l += amount / 100;
+		hsl.l = clamp01(hsl.l);
+		return new TinyColor(hsl);
+	}
+	/**
+	* Brighten the color a given amount, from 0 to 100.
+	* @param amount - valid between 1-100
+	*/
+	brighten(amount = 10) {
+		const rgb = this.toRgb();
+		rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100))));
+		rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100))));
+		rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100))));
+		return new TinyColor(rgb);
+	}
+	/**
+	* Darken the color a given amount, from 0 to 100.
+	* Providing 100 will always return black.
+	* @param amount - valid between 1-100
+	*/
+	darken(amount = 10) {
+		const hsl = this.toHsl();
+		hsl.l -= amount / 100;
+		hsl.l = clamp01(hsl.l);
+		return new TinyColor(hsl);
+	}
+	/**
+	* Mix the color with pure white, from 0 to 100.
+	* Providing 0 will do nothing, providing 100 will always return white.
+	* @param amount - valid between 1-100
+	*/
+	tint(amount = 10) {
+		return this.mix("white", amount);
+	}
+	/**
+	* Mix the color with pure black, from 0 to 100.
+	* Providing 0 will do nothing, providing 100 will always return black.
+	* @param amount - valid between 1-100
+	*/
+	shade(amount = 10) {
+		return this.mix("black", amount);
+	}
+	/**
+	* Desaturate the color a given amount, from 0 to 100.
+	* Providing 100 will is the same as calling greyscale
+	* @param amount - valid between 1-100
+	*/
+	desaturate(amount = 10) {
+		const hsl = this.toHsl();
+		hsl.s -= amount / 100;
+		hsl.s = clamp01(hsl.s);
+		return new TinyColor(hsl);
+	}
+	/**
+	* Saturate the color a given amount, from 0 to 100.
+	* @param amount - valid between 1-100
+	*/
+	saturate(amount = 10) {
+		const hsl = this.toHsl();
+		hsl.s += amount / 100;
+		hsl.s = clamp01(hsl.s);
+		return new TinyColor(hsl);
+	}
+	/**
+	* Completely desaturates a color into greyscale.
+	* Same as calling `desaturate(100)`
+	*/
+	greyscale() {
+		return this.desaturate(100);
+	}
+	/**
+	* Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
+	* Values outside of this range will be wrapped into this range.
+	*/
+	spin(amount) {
+		const hsl = this.toHsl();
+		const hue = (hsl.h + amount) % 360;
+		hsl.h = hue < 0 ? 360 + hue : hue;
+		return new TinyColor(hsl);
+	}
+	/**
+	* Mix the current color a given amount with another color, from 0 to 100.
+	* 0 means no mixing (return current color).
+	*/
+	mix(color, amount = 50) {
+		const rgb1 = this.toRgb();
+		const rgb2 = new TinyColor(color).toRgb();
+		const p = amount / 100;
+		const rgba = {
+			r: (rgb2.r - rgb1.r) * p + rgb1.r,
+			g: (rgb2.g - rgb1.g) * p + rgb1.g,
+			b: (rgb2.b - rgb1.b) * p + rgb1.b,
+			a: (rgb2.a - rgb1.a) * p + rgb1.a
+		};
+		return new TinyColor(rgba);
+	}
+	analogous(results = 6, slices = 30) {
+		const hsl = this.toHsl();
+		const part = 360 / slices;
+		const ret = [this];
+		for (hsl.h = (hsl.h - (part * results >> 1) + 720) % 360; --results;) {
+			hsl.h = (hsl.h + part) % 360;
+			ret.push(new TinyColor(hsl));
+		}
+		return ret;
+	}
+	/**
+	* taken from https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js
+	*/
+	complement() {
+		const hsl = this.toHsl();
+		hsl.h = (hsl.h + 180) % 360;
+		return new TinyColor(hsl);
+	}
+	monochromatic(results = 6) {
+		const hsv = this.toHsv();
+		const { h } = hsv;
+		const { s } = hsv;
+		let { v } = hsv;
+		const res = [];
+		const modification = 1 / results;
+		while (results--) {
+			res.push(new TinyColor({
+				h,
+				s,
+				v
+			}));
+			v = (v + modification) % 1;
+		}
+		return res;
+	}
+	splitcomplement() {
+		const hsl = this.toHsl();
+		const { h } = hsl;
+		return [
+			this,
+			new TinyColor({
+				h: (h + 72) % 360,
+				s: hsl.s,
+				l: hsl.l
+			}),
+			new TinyColor({
+				h: (h + 216) % 360,
+				s: hsl.s,
+				l: hsl.l
+			})
+		];
+	}
+	/**
+	* Compute how the color would appear on a background
+	*/
+	onBackground(background) {
+		const fg = this.toRgb();
+		const bg = new TinyColor(background).toRgb();
+		const alpha = fg.a + bg.a * (1 - fg.a);
+		return new TinyColor({
+			r: (fg.r * fg.a + bg.r * bg.a * (1 - fg.a)) / alpha,
+			g: (fg.g * fg.a + bg.g * bg.a * (1 - fg.a)) / alpha,
+			b: (fg.b * fg.a + bg.b * bg.a * (1 - fg.a)) / alpha,
+			a: alpha
+		});
+	}
+	/**
+	* Alias for `polyad(3)`
+	*/
+	triad() {
+		return this.polyad(3);
+	}
+	/**
+	* Alias for `polyad(4)`
+	*/
+	tetrad() {
+		return this.polyad(4);
+	}
+	/**
+	* Get polyad colors, like (for 1, 2, 3, 4, 5, 6, 7, 8, etc...)
+	* monad, dyad, triad, tetrad, pentad, hexad, heptad, octad, etc...
+	*/
+	polyad(n) {
+		const hsl = this.toHsl();
+		const { h } = hsl;
+		const result = [this];
+		const increment = 360 / n;
+		for (let i = 1; i < n; i++) result.push(new TinyColor({
+			h: (h + i * increment) % 360,
+			s: hsl.s,
+			l: hsl.l
+		}));
+		return result;
+	}
+	/**
+	* compare color vs current color
+	*/
+	equals(color) {
+		const comparedColor = new TinyColor(color);
+		/**
+		* RGB and CMYK do not have the same color gamut, so a CMYK conversion will never be 100%.
+		* This means we need to compare CMYK to CMYK to ensure accuracy of the equals function.
+		*/
+		if (this.format === "cmyk" || comparedColor.format === "cmyk") return this.toCmykString() === comparedColor.toCmykString();
+		return this.toRgbString() === comparedColor.toRgbString();
+	}
+};
+//#endregion
+//#region src/color-select.scss?inline
+var color_select_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: block;\n  --c2-list-item--font-size: 10px;\n  --c2-select__button--font-size: 10px;\n  --c2-select__button__suffix-icon--width: 12px;\n  --c2-select__button__suffix-icon--height: 12px;\n  --c2-select__button--padding: 8px 8px 8px 8px;\n  --c2-select__button__hover--background: transparent;\n  --c2-select__button--background: transparent;\n  --c2-select__button--border-top: 1px solid transparent;\n  --c2-select__button--border-right: 1px solid transparent;\n  --c2-select__button--border-bottom: 1px solid transparent;\n  --c2-select__button--border-left: 1px solid transparent;\n  --c2-text-field--border-top: 1px solid transparent;\n  --c2-text-field--border-right: 1px solid transparent;\n  --c2-text-field--border-bottom: 1px solid transparent;\n  --c2-text-field--border-left: 1px solid transparent;\n  --c2-text-field__focus--border-top: 1px solid rgb(2, 101, 220);\n  --c2-text-field__focus--border-right: 1px solid rgb(2, 101, 220);\n  --c2-text-field__focus--border-bottom: 1px solid rgb(2, 101, 220);\n  --c2-text-field__focus--border-left: 1px solid rgb(2, 101, 220);\n  --c2-text-field--font-size: 10px;\n  --c2-text-field--padding-top: 8px;\n  --c2-text-field--padding-right: 2px;\n  --c2-text-field--padding-bottom: 8px;\n  --c2-text-field--padding-left: 2px;\n  --c2-text-field--background: transparent;\n}\n\n.c2-color-select {\n  display: contents;\n}\n.c2-color-select .presentation {\n  width: var(--c2-color-select--width,16px);\n  height: var(--c2-color-select--height,16px);\n  border-top-left-radius: var(--c2-color-select--border-top-left-radius,1px);\n  border-top-right-radius: var(--c2-color-select--border-top-right-radius,1px);\n  border-bottom-left-radius: var(--c2-color-select--border-bottom-left-radius,1px);\n  border-bottom-right-radius: var(--c2-color-select--border-bottom-right-radius,1px);\n  display: flex;\n  align-items: stretch;\n  position: relative;\n  background: none;\n  border-top: var(--c2-color-select--border-top);\n  border-right: var(--c2-color-select--border-right);\n  border-bottom: var(--c2-color-select--border-bottom);\n  border-left: var(--c2-color-select--border-left);\n  padding: 0;\n  margin: 0;\n  cursor: inherit;\n}\n.c2-color-select .presentation .presentation-hue {\n  flex: 1;\n  border-radius: inherit;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.c2-color-select .presentation .presentation-color {\n  flex: 1;\n  border-radius: inherit;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  z-index: 1;\n}\n.c2-color-select .presentation .presentation-color-background {\n  border-radius: inherit;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  position: absolute;\n  left: 50%;\n  top: 0;\n  width: 50%;\n  height: 100%;\n  z-index: 0;\n  background: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200H3V3H0V0Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M3%200H6V3H3V0Z%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M3%203H6V6H3V3Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M0%203H3V6H0V3Z%22%20fill%3D%22white%22/%3E%3C/svg%3E%0A);\n}\n.c2-color-select #menu-overlay {\n  --c2-overlay--offset-x: calc(7px - var(--c2-color-area__color-handle--size, 12px));\n  transition: none;\n}\n\n.popover {\n  --c2-overlay--offset-x: 0px;\n  --c2-color-area--border-top-left-radius: var(--c2-color-select__popover--border-top-left-radius,4px);\n  --c2-color-area--border-top-right-radius: var(--c2-color-select__popover--border-top-right-radius,4px);\n  --c2-color-area--border-bottom-left-radius: 0px;\n  --c2-color-area--border-bottom-right-radius: 0px;\n  padding: calc(var(--c2-color-area__color-handle--size, 12px) - 7px);\n  position: relative;\n  overflow: hidden;\n}\n.popover .popover-container {\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n  gap: var(--c2-color-select__popover--gap,16px);\n  background-color: var(--c2-color-select__popover--background-color,rgb(253, 253, 253));\n  border-top: var(--c2-color-select__popover--border-top,1px solid rgb(177, 177, 177));\n  border-right: var(--c2-color-select__popover--border-right,1px solid rgb(177, 177, 177));\n  border-bottom: var(--c2-color-select__popover--border-bottom,1px solid rgb(177, 177, 177));\n  border-left: var(--c2-color-select__popover--border-left,1px solid rgb(177, 177, 177));\n  border-top-left-radius: var(--c2-color-select__popover--border-top-left-radius,4px);\n  border-top-right-radius: var(--c2-color-select__popover--border-top-right-radius,4px);\n  border-bottom-left-radius: var(--c2-color-select__popover--border-bottom-left-radius,4px);\n  border-bottom-right-radius: var(--c2-color-select__popover--border-bottom-right-radius,4px);\n  width: var(--c2-color-area--width, 240px);\n}\n.popover .popover-container .color-area {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n.popover .popover-container .color-area-placeholder {\n  height: var(--c2-color-area--height, 240px);\n}\n.popover .popover-container .color-config {\n  display: grid;\n  grid-template-columns: fit-content(var(--c2-color-select__color__sample--size,48px)), 1fr;\n  grid-auto-flow: column;\n  place-items: center;\n  padding-left: var(--c2-color-select__popover--padding-left,8px);\n  padding-right: var(--c2-color-select__popover--padding-right,8px);\n  padding-top: var(--c2-color-select__popover--padding-top,0px);\n}\n.popover .popover-container .color-config .color-sample {\n  width: var(--c2-color-select__color__sample--size,48px);\n  height: var(--c2-color-select__color__sample--size,48px);\n  border-radius: var(--c2-color-select__color__sample--border-radius,4px);\n  border-top: var(--c2-color-select__color__sample--border-top,1px solid rgb(177, 177, 177));\n  border-right: var(--c2-color-select__color__sample--border-right,1px solid rgb(177, 177, 177));\n  border-bottom: var(--c2-color-select__color__sample--border-bottom,1px solid rgb(177, 177, 177));\n  border-left: var(--c2-color-select__color__sample--border-left,1px solid rgb(177, 177, 177));\n  grid-column: 1/2;\n  grid-row: 1/3;\n  background-color: red;\n}\n.popover .popover-container .color-config .alpha-input {\n  --c2-color-slider__color-handle--background-color: transparent;\n}\n.popover .popover-container .color-input-container {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding-left: var(--c2-color-select__popover--padding-left,8px);\n  padding-right: var(--c2-color-select__popover--padding-right,8px);\n  padding-bottom: var(--c2-color-select__popover--padding-bottom,8px);\n}\n.popover .popover-container .color-input-container .color-input-group {\n  display: flex;\n  align-items: center;\n}\n.popover .popover-container .color-input-container .color-input-group:hover {\n  --c2-text-field--border-top: 1px solid rgb(177, 177, 177);\n  --c2-text-field--border-right: 1px solid rgb(177, 177, 177);\n  --c2-text-field--border-bottom: 1px solid rgb(177, 177, 177);\n  --c2-text-field--border-left: 1px solid rgb(177, 177, 177);\n}\n.popover .popover-container .color-input-container .color-input-group .number-input {\n  flex-grow: 1;\n  flex-shrink: 1;\n  flex-basis: 25%;\n}\n.popover .popover-container .color-input-container .color-input-group .text-input {\n  flex-grow: 1;\n  flex-shrink: 1;\n  flex-basis: 75%;\n}\n.popover .popover-container .color-input-container .color-input-group c2-text-field + c2-text-field {\n  --c2-text-field--border-top-left-radius: 0px;\n  --c2-text-field--border-bottom-left-radius: 0px;\n}\n.popover .popover-container .color-input-container .color-input-group c2-text-field:has(+ c2-text-field) {\n  --c2-text-field--border-right: none;\n  --c2-text-field__focus--border-right: none;\n  --c2-text-field--border-top-right-radius: 0px;\n  --c2-text-field--border-bottom-right-radius: 0px;\n}\n.popover .popover-container .color-input-container .color-input-group c2-text-field.focus-within + c2-text-field {\n  --c2-text-field--border-left: var(--c2-text-field__focus--border-left, 1px solid rgb(2, 101, 220));\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/color-select.ts
+var ColorSelect = class ColorSelect extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.placement = "bottom-start";
+		this._color = "#000000";
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.alpha = 1;
+		this.inputType = "HEX";
+		this.open = false;
+	}
+	static {
+		this.styles = unsafeCSS(color_select_default);
+	}
+	get color() {
+		return this._color;
+	}
+	set color(value) {
+		if (this._color != value) {
+			this._color = value;
+			this.extractHsvaFromColor();
+		}
+	}
+	get tinyColor() {
+		return new TinyColor({
+			h: this.hue,
+			s: this.saturation,
+			v: this.value,
+			a: this.alpha
+		});
+	}
+	renderInput() {
+		if (this.inputType == "HEX") return html`<c2-text-field class="text-input" .value=${this.tinyColor.toHexString()} @change=${this.handleHexInputChange}></c2-text-field>
+        <c2-text-field class="number-input" .value=${this.toPercentage(this.alpha, true)} @change=${this.handleAlphaInputChange}> </c2-text-field> `;
+		else if (this.inputType == "RGB") {
+			const rgb = this.tinyColor.toRgb();
+			return html`<c2-text-field class="number-input" id="r" .value=${rgb.r} @change=${this.handleRgbInputChange}></c2-text-field>
+        <c2-text-field class="number-input" id="g" .value=${rgb.g} @change=${this.handleRgbInputChange}></c2-text-field>
+        <c2-text-field class="number-input" id="b" .value=${rgb.b} @change=${this.handleRgbInputChange}></c2-text-field>
+        <c2-text-field class="number-input" .value=${this.toPercentage(this.alpha, true)} @change=${this.handleAlphaInputChange}> </c2-text-field> `;
+		}
+		return html`<c2-text-field class="number-input" .value=${Math.round(this.hue)} @change=${this.handleHueInputChange}></c2-text-field>
+      <c2-text-field class="number-input" .value=${this.toPercentage(this.saturation)} @change=${this.handleSaturationInputChange}></c2-text-field>
+      <c2-text-field class="number-input" .value="${this.toPercentage(this.value)}" @change=${this.handleLightnessInputChange}></c2-text-field>
+      <c2-text-field class="number-input" .value=${this.toPercentage(this.alpha, true)} @change=${this.handleAlphaInputChange}></c2-text-field> `;
+	}
+	toPercentage(value, showSuffix = false) {
+		return showSuffix ? `${Math.round(value * 100).toFixed()}%` : `${Math.round(value * 100).toFixed()}`;
+	}
+	handleRgbInputChange(event) {
+		const value = Number(event.target.value);
+		const id = event.target.id;
+		if (value >= 0 && value <= 255) {
+			const rgb = this.tinyColor.toRgb();
+			rgb[id] = value;
+			const { h, s, v } = new TinyColor(rgb).toHsv();
+			this.hue = h;
+			this.saturation = s;
+			this.value = v;
+			this.dispatchChangeEvent();
+		}
+	}
+	updateColor() {
+		this._color = this.tinyColor.toRgbString();
+		this.setAttribute("color", this._color);
+	}
+	handleHueInputChange(event) {
+		const value = Number(event.target.value);
+		if (value >= 0 && value <= 360) {
+			this.hue = value;
+			this.dispatchChangeEvent();
+		}
+	}
+	handleSaturationInputChange(event) {
+		const value = Number(event.target.value);
+		if (value >= 0 && value <= 100) {
+			this.saturation = value / 100;
+			this.dispatchChangeEvent();
+		}
+	}
+	handleLightnessInputChange(event) {
+		const value = Number(event.target.value);
+		if (value >= 0 && value <= 100) {
+			this.value = value / 100;
+			this.dispatchChangeEvent();
+		}
+	}
+	handleHexInputChange(event) {
+		const value = event.target.value;
+		const tinyColor = new TinyColor(value);
+		if (tinyColor.isValid) {
+			const { h, s, v } = tinyColor.toHsv();
+			this.hue = h;
+			this.saturation = s;
+			this.value = v;
+			this.dispatchChangeEvent();
+		}
+	}
+	handleAlphaInputChange(event) {
+		const value = Number(event.target.value.replace("%", ""));
+		if (!isNaN(value) && value >= 0 && value <= 100) {
+			this.alpha = value / 100;
+			this.dispatchChangeEvent();
+		}
+	}
+	handleInputTypeChange(event) {
+		this.inputType = event.detail.value[0];
+	}
+	handleHueSliderChange(event) {
+		this.hue = event.target.value;
+		this.dispatchChangeEvent();
+	}
+	handleAlphaSliderChange(event) {
+		this.alpha = event.target.value / 100;
+		this.dispatchChangeEvent();
+	}
+	extractHsvaFromColor() {
+		const { h, s, v, a } = new TinyColor(this.color).toHsv();
+		this.hue = h;
+		this.saturation = s;
+		this.value = v;
+		this.alpha = a;
+	}
+	handleColorAreaChange(event) {
+		const { h, s, v } = event.detail;
+		this.hue = h;
+		this.saturation = s;
+		this.value = v;
+		this.dispatchChangeEvent();
+	}
+	handleOverlayToggle(event) {
+		const toggleEvent = event;
+		this.open = toggleEvent.newState == "open";
+	}
+	dispatchChangeEvent() {
+		this.updateColor();
+		this.dispatchEvent(new CustomEvent("change", {
+			cancelable: true,
+			bubbles: true,
+			detail: {
+				h: this.hue,
+				s: this.saturation,
+				v: this.value,
+				a: this.alpha
+			}
+		}));
+	}
+	render() {
+		const colorWithOutAlpha = this.tinyColor.clone();
+		colorWithOutAlpha.setAlpha(1);
+		return html`
+      <div class="c2-color-select">
+        <button class="presentation" popovertarget="menu-overlay">
+          <div class="presentation-color-background"></div>
+          <div class="presentation-hue" style=${`background-color: ${colorWithOutAlpha.toHexString()}`}></div>
+          <div class="presentation-color" style=${`background-color: ${this.tinyColor.toString("rgb")}`}></div>
+        </button>
+        <c2-overlay id="menu-overlay" disabled-cross-axis popover @toggle=${this.handleOverlayToggle} .placement=${this.placement}>
+          ${this.open ? html` <div class="popover">
+                  <div class="popover-container">
+                    <c2-color-area
+                      class="color-area"
+                      .hue=${this.hue}
+                      .saturation=${this.saturation}
+                      .value=${this.value}
+                      @change=${this.handleColorAreaChange}
+                    >
+                    </c2-color-area>
+                    <div class="color-area-placeholder"></div>
+                    <div class="color-config">
+                      <div class="color-sample" style="background-color: ${this.tinyColor.toRgbString()}"></div>
+                      <c2-color-slider @input=${this.handleHueSliderChange} .value=${this.hue}></c2-color-slider>
+                      <c2-color-slider class="alpha-input" @input=${this.handleAlphaSliderChange} min="0" max="100" .value=${this.alpha * 100}>
+                        <div
+                          style="background-image: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200H3V3H0V0Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M3%200H6V3H3V0Z%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M3%203H6V6H3V3Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M0%203H3V6H0V3Z%22%20fill%3D%22white%22/%3E%3C/svg%3E%0A),
+                                  linear-gradient(to right, rgba(255 255 255) 0%, ${colorWithOutAlpha.toRgbString()} 100%);
+                              background-blend-mode: multiply;"
+                        ></div>
+                      </c2-color-slider>
+                    </div>
+                    <div class="color-input-container">
+                      <c2-select value=${this.inputType} required @selection-change=${this.handleInputTypeChange}>
+                        <c2-list-item value="HEX">HEX</c2-list-item>
+                        <c2-list-item value="RGB">RGB</c2-list-item>
+                        <c2-list-item value="HSL">HSL</c2-list-item>
+                      </c2-select>
+                      <div class="color-input-group">${this.renderInput()}</div>
+                    </div>
+                  </div>
+                </div>` : nothing}
+        </c2-overlay>
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+})], ColorSelect.prototype, "placement", void 0);
+__decorate([property({ reflect: true })], ColorSelect.prototype, "color", null);
+__decorate([state()], ColorSelect.prototype, "hue", void 0);
+__decorate([state()], ColorSelect.prototype, "saturation", void 0);
+__decorate([state()], ColorSelect.prototype, "value", void 0);
+__decorate([state()], ColorSelect.prototype, "alpha", void 0);
+__decorate([state()], ColorSelect.prototype, "inputType", void 0);
+__decorate([state()], ColorSelect.prototype, "open", void 0);
+__decorate([query(".color-area")], ColorSelect.prototype, "colorArea", void 0);
+ColorSelect = __decorate([customElement("c2-color-select")], ColorSelect);
+//#endregion
+export { ColorSelect };