@c2n/color-area 0.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# Color-Area
+
+// TODO

package/dist/color-area.js

@@ -0,0 +1,1243 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+//#region src/color-area.scss?inline
+var color_area_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: block;\n}\n\n.c2-color-area {\n  display: block;\n  position: relative;\n  padding: calc(var(--c2-color-area__color-handle--size,12px) - 6px);\n  width: fit-content;\n  height: fit-content;\n}\n.c2-color-area .gradient {\n  width: 100%;\n  height: 100%;\n  width: var(--c2-color-area--width,240px);\n  height: var(--c2-color-area--height,240px);\n  border-top-left-radius: var(--c2-color-area--border-top-left-radius);\n  border-top-right-radius: var(--c2-color-area--border-top-right-radius);\n  border-bottom-left-radius: var(--c2-color-area--border-bottom-left-radius);\n  border-bottom-right-radius: var(--c2-color-area--border-bottom-right-radius);\n}\n.c2-color-area .color-handle {\n  position: absolute;\n  pointer-events: none;\n  box-sizing: border-box;\n  width: var(--c2-color-area__color-handle--size,12px);\n  height: var(--c2-color-area__color-handle--size,12px);\n  border-radius: 50%;\n  top: 0;\n  left: 0;\n  border: 2px solid white;\n  background: transparent;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0.6px;\n  cursor: inherit;\n}";
+//#endregion
+//#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 \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-area.ts
+var ColorArea = class ColorArea extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.hue = 0;
+		this.saturation = 1;
+		this.value = 1;
+		this.currentMousePosition = {
+			x: 0,
+			y: 0
+		};
+		this.handleMouseMove = async (event) => {
+			this.currentMousePosition = this.getPointerPosition(event);
+			this.convertPositionToHslValues(this.currentMousePosition);
+			this.dispatchChangeColor();
+		};
+		this.handleMouseUp = () => {
+			document.removeEventListener("pointermove", this.handleMouseMove);
+			document.removeEventListener("pointerup", this.handleMouseUp);
+			document.removeEventListener("pointercancel", this.handleMouseUp);
+			this.rootElementsRect = void 0;
+		};
+	}
+	static {
+		this.styles = unsafeCSS(color_area_default);
+	}
+	get tinyColor() {
+		return new TinyColor({
+			h: this.hue,
+			s: this.saturation,
+			v: this.value
+		});
+	}
+	convertPositionToHslValues(position) {
+		if (!this.rootElement) return;
+		if (!this.rootElementsRect) this.rootElementsRect = this.rootElement.getBoundingClientRect();
+		this.saturation = position.x / this.rootElementsRect.width;
+		this.value = 1 - position.y / this.rootElementsRect.height;
+	}
+	convertValueToPosition() {
+		if (!this.rootElementsRect) this.rootElementsRect = this.rootElement.getBoundingClientRect();
+		this.currentMousePosition = {
+			x: this.saturation * this.rootElementsRect.width,
+			y: (1 - this.value) * this.rootElementsRect.height
+		};
+	}
+	handleAreaPointerdown(event) {
+		if (event.button !== 0) return;
+		this.rootElementsRect = this.rootElement.getBoundingClientRect();
+		this.colorHandleRect = this.colorHandle.getBoundingClientRect();
+		this.currentMousePosition = this.getPointerPosition(event);
+		this.convertPositionToHslValues(this.currentMousePosition);
+		document.addEventListener("pointermove", this.handleMouseMove, { passive: true });
+		document.addEventListener("pointerup", this.handleMouseUp, { passive: true });
+		document.addEventListener("pointercancel", this.handleMouseUp);
+		this.dispatchChangeColor();
+	}
+	getPointerPosition(event) {
+		let x = event.clientX - this.rootElementsRect.left;
+		let y = event.clientY - this.rootElementsRect.top;
+		x = Math.max(0, Math.min(x, this.rootElementsRect.width));
+		y = Math.max(0, Math.min(y, this.rootElementsRect.height));
+		return {
+			x,
+			y
+		};
+	}
+	updateColorHandlePosition() {
+		if (!this.colorHandle) return;
+		if (!this.colorHandleRect) this.colorHandleRect = this.colorHandle.getBoundingClientRect();
+		const handleWidth = this.colorHandleRect.width;
+		const handleHeight = this.colorHandleRect.height;
+		let x = this.currentMousePosition.x - handleWidth / 2;
+		let y = this.currentMousePosition.y - handleHeight / 2;
+		x = Math.max(0, Math.min(x, this.rootElementsRect.width - handleWidth));
+		y = Math.max(0, Math.min(y, this.rootElementsRect.height - handleHeight));
+		this.colorHandle.style.setProperty("transform", `translate3d(${x}px, ${y}px, 0)`);
+		this.colorHandle.style.setProperty("background-color", this.tinyColor.toRgbString());
+	}
+	updated(_changedProperties) {
+		super.updated(_changedProperties);
+		this.convertValueToPosition();
+		this.updateColorHandlePosition();
+	}
+	dispatchChangeColor() {
+		this.dispatchEvent(new CustomEvent("change", {
+			bubbles: true,
+			cancelable: true,
+			detail: {
+				h: this.hue,
+				s: this.saturation,
+				v: this.value
+			}
+		}));
+	}
+	render() {
+		return html`<div class="c2-color-area">
+      <div
+        @pointerdown=${this.handleAreaPointerdown}
+        class="gradient"
+        style="background:
+                    linear-gradient(to top, black 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%),
+                    linear-gradient(to right, white 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);"
+      ></div>
+      <div class="color-handle"></div>
+    </div> `;
+	}
+};
+__decorate([property({ type: Number })], ColorArea.prototype, "hue", void 0);
+__decorate([property({ type: Number })], ColorArea.prototype, "saturation", void 0);
+__decorate([property({ type: Number })], ColorArea.prototype, "value", void 0);
+__decorate([query(".color-handle", true)], ColorArea.prototype, "colorHandle", void 0);
+__decorate([query(".c2-color-area", true)], ColorArea.prototype, "rootElement", void 0);
+ColorArea = __decorate([customElement("c2-color-area")], ColorArea);
+//#endregion
+export { ColorArea };

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@c2n/color-area",
+  "version": "0.0.6",
+  "type": "module",
+  "main": "dist/color-area.js",
+  "exports": {
+    ".": {
+      "default": "./dist/color-area.js",
+      "types": "./types/src/color-area.d.ts"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "color-area",
+    "web component",
+    "lit"
+  ],
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.6",
+    "@ctrl/tinycolor": "4.2.0",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+}

package/types/src/color-area.d.ts

@@ -0,0 +1,51 @@
+import { LitElement, type PropertyValueMap } from 'lit';
+import { TinyColor } from '@ctrl/tinycolor';
+export interface Point {
+    x: number;
+    y: number;
+}
+/**
+ * @tag c2-color-area
+ *
+ * @event {CustomEvent} change
+ *
+ * @cssproperty {pixel} [--c2-color-area--width=240px]
+ * @cssproperty {pixel} [--c2-color-area--height=240px]
+ * @cssproperty {pixel} [--c2-color-area__color-handle--size=12px]
+ *
+ * @cssproperty {border-radius} --c2-color-area--border-top-left-radius
+ * @cssproperty {border-radius} --c2-color-area--border-top-right-radius
+ * @cssproperty {border-radius} --c2-color-area--border-bottom-left-radius
+ * @cssproperty {border-radius} --c2-color-area--border-bottom-right-radius
+ */
+export declare class ColorArea extends LitElement {
+    static styles: import("lit").CSSResult;
+    hue: number;
+    saturation: number;
+    value: number;
+    get tinyColor(): TinyColor;
+    colorHandle?: HTMLElement;
+    rootElement?: HTMLElement;
+    currentMousePosition: Point;
+    private rootElementsRect?;
+    private colorHandleRect?;
+    convertPositionToHslValues(position: Point): void;
+    private convertValueToPosition;
+    private handleAreaPointerdown;
+    handleMouseMove: (event: PointerEvent) => Promise<void>;
+    getPointerPosition(event: PointerEvent): {
+        x: number;
+        y: number;
+    };
+    handleMouseUp: () => void;
+    private updateColorHandlePosition;
+    protected updated(_changedProperties: PropertyValueMap<this>): void;
+    dispatchChangeColor(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-color-area': ColorArea;
+    }
+}
+//# sourceMappingURL=color-area.d.ts.map

package/types/src/color-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-area.d.ts","sourceRoot":"","sources":["../../src/color-area.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAGxE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED;;;;;;;;;;;;;GAaG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAAoB;IAEd,GAAG,SAAI;IACP,UAAU,SAAI;IACd,KAAK,SAAI;IAErC,IAAW,SAAS,IAAI,SAAS,CAEhC;IAE6B,WAAW,CAAC,EAAE,WAAW,CAAA;IACxB,WAAW,CAAC,EAAE,WAAW,CAAA;IAExD,oBAAoB,EAAE,KAAK,CAAiB;IAE5C,OAAO,CAAC,gBAAgB,CAAC,CAAS;IAClC,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC,0BAA0B,CAAC,QAAQ,EAAE,KAAK;IAW1C,OAAO,CAAC,sBAAsB;IAU9B,OAAO,CAAC,qBAAqB;IAgB7B,eAAe,GAAU,OAAO,YAAY,mBAI3C;IAED,kBAAkB,CAAC,KAAK,EAAE,YAAY;;;;IAQtC,aAAa,aAKZ;IAED,OAAO,CAAC,yBAAyB;cAed,OAAO,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAM5E,mBAAmB;IAaV,MAAM;CAYhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,SAAS,CAAA;KAC3B;CACF"}