color-elements 0.0.3 → 0.0.4

package/_includes/partials/_nav-links.njk

@@ -15,5 +15,6 @@
 		<li><a href="https://github.com/color-js/elements/issues/new{{ ('?title=[' + name + '] ') if name }}">New</a></li>
 	</ul>
 </div>
+<a href="https://opencollective.com/color">♡&nbsp;Sponsor</a>
 
 

package/_redirects

@@ -1,5 +1,5 @@
 # Specific versions
-node_modules/nude-element/* https://cdn.jsdelivr.net/npm/nude-element@0.0.12/:splat 200
+node_modules/nude-element/* https://cdn.jsdelivr.net/npm/nude-element@0.0.14/:splat 200
 
 # Catch all NPM fallback
 node_modules/:modulename/* https://cdn.jsdelivr.net/npm/:modulename@latest/:splat 200

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "color-elements",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A set of web components for working with color. A Color.js project.",
   "main": "index.js",
   "type": "module",
@@ -14,6 +14,7 @@
     "release": "release-it",
     "test": "echo \"Error: no test specified\" && exit 1",
     "build:html": "npx @11ty/eleventy --config=_build/eleventy.js",
+    "serve": "npx @11ty/eleventy --config=_build/eleventy.js --serve",
     "watch:html": "npx @11ty/eleventy --config=_build/eleventy.js --serve"
   },
   "repository": {
@@ -26,23 +27,27 @@
     "web components"
   ],
   "author": "Lea Verou",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/color"
+  },
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/color-js/elements/issues"
   },
   "homepage": "https://github.com/color-js/elements#readme",
   "dependencies": {
+    "@11ty/eleventy": "^3.1.2",
     "colorjs.io": "^0.5.0",
     "nude-element": "latest"
   },
   "devDependencies": {
-    "@11ty/eleventy": "^3.0.0-alpha.6",
     "@stylistic/eslint-plugin": "latest",
     "eslint": "latest",
     "globals": "latest",
-    "markdown-it-attrs": "^4.1.6",
     "markdown-it-anchor": "^8",
+    "markdown-it-attrs": "^4.1.6",
     "npm-run-all": "^4.1.5",
     "release-it": "^17.2.0"
   }
-}
+}

package/src/channel-picker/channel-picker.js

@@ -5,7 +5,7 @@ import * as dom from "../common/dom.js";
 const Self = class ChannelPicker extends ColorElement {
 	static tagName = "channel-picker";
 	static url = import.meta.url;
-	static shadowStyle = true;
+	static styles = "./channel-picker.css";
 	static shadowTemplate = `
 		<space-picker part="color-space" exportparts="base: color-space-base" id="space_picker"></space-picker>
 		<select id="picker" part="color-channel-base"></select>`;

package/src/channel-slider/channel-slider.js

@@ -6,7 +6,7 @@ import { getStep } from "../common/util.js";
 const Self = class ChannelSlider extends ColorElement {
 	static tagName = "channel-slider";
 	static url = import.meta.url;
-	static shadowStyle = true;
+	static styles = "./channel-slider.css";
 	static shadowTemplate = `
 		<label class="color-slider-label" part="label">
 			<slot>

package/src/color-chart/color-chart-global.css

@@ -22,14 +22,18 @@
 	inherits: true;
 }
 
+color-chart {
+	--_point-size: var(--point-size, .6em);
+	--_line-width: var(--line-width, .2em);
+	--color-swatch-width: var(--color-swatch-width, var(--_point-size));
+	--color-swatch-radius: var(--color-swatch-radius, 50%);
+}
+
 color-chart > color-scale {
 	--extent-x: calc(var(--max-x) - var(--min-x));
 	--extent-y: calc(var(--max-y) - var(--min-y));
 
 	&::part(color-swatch) {
-		--_point-size: var(--point-size, .6em);
-		--_line-width: var(--line-width, .2em);
-
 		position: absolute;
 		top:  calc((1 - (var(--y) - var(--min-y)) / (var(--max-y) - var(--min-y))) * 100cqh);
 		left: calc( (var(--x) - var(--min-x)) / (var(--max-x) - var(--min-x)) * 100%);
@@ -39,8 +43,8 @@ color-chart > color-scale {
 		background: yellow;
 		min-block-size: 0;
 		translate: -50% -50%;
-		transition: 300ms;
-		transition-property: width;
+		transition: 300ms .01ms;
+		transition-property: width, opacity;
 	}
 
 	&::part(color-swatch):hover {

package/src/color-chart/color-chart.js

@@ -5,7 +5,8 @@ import ColorElement from "../common/color-element.js";
 const Self = class ColorChart extends ColorElement {
 	static tagName = "color-chart";
 	static url = import.meta.url;
-	static shadowStyle = true;
+	static styles = "./color-chart.css";
+	static globalStyles = "./color-chart-global.css";
 	static shadowTemplate = `
 		<slot name="color-channel">
 			<channel-picker id="channel_picker" part="color-channel"></channel-picker>
@@ -24,7 +25,6 @@ const Self = class ColorChart extends ColorElement {
 			<div class="ticks" part="x ticks"></div>
 		</div>`;
 	static dependencies = new Set(["color-scale"]);
-	static globalStyle = new URL("color-chart-global.css", import.meta.url);
 
 	constructor () {
 		super();
@@ -426,9 +426,7 @@ function normalizeAngles (angles) {
 		if (Math.abs(delta) > 180) {
 			let equivalent = [h + 360, h - 360];
 			// Offset hue to minimize difference in the direction that brings it closer to the average
-			let delta = h - averageHue;
-
-			if (Math.abs(equivalent[0] - prevHue) <= Math.abs(equivalent[1] - prevHue)) {
+			if (Math.abs(equivalent[0] - averageHue) <= Math.abs(equivalent[1] - averageHue)) {
 				angles[i] = equivalent[0];
 			}
 			else {

package/src/color-inline/color-inline.js

@@ -3,7 +3,7 @@ import ColorElement from "../common/color-element.js";
 const Self = class ColorInline extends ColorElement {
 	static tagName = "color-inline";
 	static url = import.meta.url;
-	static shadowStyle = true;
+	static styles = "./color-inline.css";
 	static shadowTemplate = `
 		<div part="swatch-wrapper">
 			<div id="swatch" part="swatch"></div>

package/src/color-picker/color-picker.js

@@ -8,7 +8,7 @@ const Self = class ColorPicker extends ColorElement {
 	static tagName = "color-picker";
 	static url = import.meta.url;
 	static dependencies = new Set(["channel-slider"]);
-	static shadowStyle = true;
+	static styles = "./color-picker.css";
 	static shadowTemplate = `
 		<slot name="color-space">
 			<space-picker id="space_picker" part="color-space" exportparts="base: color-space-base"></space-picker>

package/src/color-scale/color-scale.css

@@ -1,28 +1,23 @@
 :host {
+	display: grid;
 	gap: .3em;
+	grid-auto-flow: row;
+	grid-template-rows: auto auto;
+	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
 }
 
 #swatches {
-	display: flex;
-	gap: inherit;
+	display: contents;
 }
 
 color-swatch {
 	margin: 0;
-	flex: 1;
 }
 
 @supports (grid-template-columns: subgrid) {
 	/* Avoid uneven swatch heights */
-	#swatches {
-		display: grid;
-		grid-auto-flow: row;
-		grid-template-rows: auto auto;
-		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-	}
-
 	color-swatch {
-		width: 100%;
+		max-width: 100%;
 		grid-row: 1 / span 2;
 		display: grid;
 		grid-template-rows: subgrid;
@@ -37,4 +32,4 @@ color-swatch {
 			grid-row: 1;
 		}
 	}
-}
+}

package/src/color-scale/color-scale.js

@@ -5,7 +5,7 @@ const Self = class ColorScale extends ColorElement {
 	static tagName = "color-scale";
 	static url = import.meta.url;
 	static dependencies = new Set(["color-swatch"]);
-	static shadowStyle = true;
+	static styles = "./color-scale.css";
 	static shadowTemplate = `
 		<div id=swatches></div>
 		<slot></slot>`;
@@ -60,7 +60,7 @@ const Self = class ColorScale extends ColorElement {
 				this.#swatches[i] = swatch = document.createElement("color-swatch");
 				swatch.setAttribute("size", "large");
 				swatch.setAttribute("part", "color-swatch");
-				swatch.setAttribute("exportparts", "swatch, info, gamut");
+				swatch.setAttribute("exportparts", "swatch, info, gamut, label: swatch-label");
 				newSwatches.push(swatch);
 			}
 

package/src/color-slider/color-slider.js

@@ -9,7 +9,7 @@ let supports = {
 const Self = class ColorSlider extends ColorElement {
 	static tagName = "color-slider";
 	static url = import.meta.url;
-	static shadowStyle = true;
+	static styles = "./color-slider.css";
 	static shadowTemplate = `
 		<input type="range" class="color-slider" part="slider" min="0" max="1" step="0.01" />
 			<slot name="tooltip" class="slider-tooltip">

package/src/color-swatch/color-swatch.css

@@ -11,9 +11,9 @@
 	position: relative;
 	display: inline-flex;
 	gap: .3em;
-	width: fit-content;
+	width: var(--color-swatch-width, fit-content);
 	margin: .3em;
-	border-radius: .2rem;
+	border-radius: var(--color-swatch-radius, .2rem);
 }
 
 :host([size="large"]) {
@@ -96,9 +96,12 @@ slot {
 	flex-flow: inherit;
 	gap: inherit;
 
+	/* Prevent flex items from overflowing */
+	min-inline-size: 0;
+
 	&.static {
 		&:is(:host([size="large"]) *) {
-			background: white;
+			background: canvas;
 		}
 	}
 
@@ -176,6 +179,12 @@ slot {
 	gap: .2em;
 }
 
+[part="label"] {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
 slot:not([name]) {
 	&::slotted(input) {
 		display: flex;

package/src/color-swatch/color-swatch.js

@@ -7,7 +7,7 @@ const Self = class ColorSwatch extends ColorElement {
 	static tagName = "color-swatch";
 	static url = import.meta.url;
 	static dependencies = new Set(["gamut-badge"]);
-	static shadowStyle = true;
+	static styles = "./color-swatch.css";
 	static shadowTemplate = `
 		<slot name="swatch">
 			<div id="swatch" part="swatch">
@@ -111,9 +111,11 @@ const Self = class ColorSwatch extends ColorElement {
 		if (name === "label") {
 			if (this.label.length && this.label !== this.swatchTextContent) {
 				this._el.label.textContent = this.label;
+				this._el.label.title = this.label;
 			}
 			else {
 				this._el.label.textContent = "";
+				this._el.label.title = "";
 			}
 		}
 

package/src/common/color-element.js

@@ -1,22 +1,91 @@
 import NudeElement from "../../node_modules/nude-element/src/Element.js";
-import { getType, wait } from "./util.js";
+import { getType, defer, wait, dynamicAll, noOpTemplateTag as css } from "./util.js";
+
+const baseGlobalStyles = css`
+@keyframes fade-in {
+	from { opacity: 0; }
+}
+
+:state(color-element) {
+	&:state(loading) {
+		content-visibility: hidden;
+		opacity: 0;
+
+		&, * {
+			transition-property: opacity !important;
+		}
+	}
+
+	&:not(:state(loading)) {
+		xanimation: fade-in 300ms both;
+	}
+}
+`;
+
 
 const Self = class ColorElement extends NudeElement {
+	static url = import.meta.url;
 	// TODO make lazy
 	static Color;
 	static all = {};
 	static dependencies = new Set();
 
+	static globalStyles = [{css: baseGlobalStyles}];
+
 	constructor () {
 		super();
 
-		if (this.constructor.shadowTemplate !== undefined) {
+		let Self = this.constructor;
+
+		if (Self.shadowTemplate !== undefined) {
 			this.attachShadow({mode: "open"});
-			this.shadowRoot.innerHTML = this.constructor.shadowTemplate;
+			this.shadowRoot.innerHTML = Self.shadowTemplate;
+		}
+
+		this._internals ??= this.attachInternals?.();
+		if (this._internals.states) {
+			this._internals.states.add("color-element");
+
+			this._internals.states.add("loading");
+			Self.whenReady.then(() => {
+				this._internals.states.delete("loading");
+			});
 		}
 	}
 
+	static init () {
+		let wasInitialized = super.init();
+
+		if (!wasInitialized) {
+			return wasInitialized;
+		}
+
+		if (this.fetchedStyles) {
+			this.ready.push(...this.fetchedStyles);
+		}
+
+		if (this.fetchedGlobalStyles) {
+			this.ready.push(...this.fetchedGlobalStyles	);
+		}
+
+
+		this.ready[0].resolve();
+
+		return wasInitialized;
+	}
+
+	static ready = [defer()];
+	static whenReady = dynamicAll(this.ready);
+
 	static async define () {
+		// Overwrite static properties, otherwise they will be shared across subclasses
+		this.ready = [defer()];
+		this.whenReady = dynamicAll(this.ready);
+
+		if (!Object.hasOwn(this, "dependencies")) {
+			this.dependencies = new Set();
+		}
+
 		Self.all[this.tagName] = this;
 		let colorTags = Object.keys(Self.all);
 
@@ -27,31 +96,16 @@ const Self = class ColorElement extends NudeElement {
 				this.dependencies ??= new Set();
 				this.dependencies.add(tag);
 			});
-
-			if (this.shadowStyle) {
-				let url = this.shadowStyle;
-				url = url === true ? `./${this.tagName}.css` : url;
-				url = new URL(url, this.url);
-				this.shadowTemplate = `<style>@import url("${ url }")</style>` + "\n" + this.shadowTemplate;
-			}
-		}
-
-		// Hide elements before they are defined
-		let style = document.getElementById("color-element-styles")
-		          ?? Object.assign(document.createElement("style"), {id: "color-element-styles"});
-		style.textContent = `:is(${ colorTags.join(", ") }):not(:defined) {display: none}`;
-		if (!style.parentNode) {
-			document.head.append(style);
 		}
 
 		if (this.dependencies.size > 0) {
-			await Promise.all([...this.dependencies].map(tag => customElements.whenDefined(tag)));
-		}
-		else {
-			// Give other code a chance to overwrite Self.Color
-			await wait();
+			let whenDefined = [...this.dependencies].map(tag => customElements.whenDefined(tag).then(Class => Class.whenReady));
+			this.ready.push(...whenDefined);
 		}
 
+		// Give other code a chance to overwrite Self.Color
+		await wait();
+
 		if (!Self.Color) {
 			let specifier;
 

package/src/common/util.js

@@ -6,6 +6,61 @@ export async function wait (ms) {
 	return new Promise(resolve => setTimeout(resolve, ms));
 }
 
+export function defer (executor) {
+	let res, rej;
+
+	let promise = new Promise((resolve, reject) => {
+		res = resolve;
+		rej = reject;
+
+		executor?.(res, rej);
+	});
+
+	promise.resolve = res;
+	promise.reject = rej;
+
+	return promise;
+}
+
+/**
+ * Wait for all promises to resolve. Supports dynamically adding promises to the list after the initial call.
+ * @param {Promise[] | Set<Promise>} promises
+ * @returns {Promise}
+ */
+export async function dynamicAll (promises) {
+	let all = new Set([...promises]);
+	let unresolved = new Set();
+
+	for (let promise of promises) {
+		if (promise?.then) {
+			unresolved.add(promise);
+			promise.then(() => {
+				// Remove the promise from the list
+				unresolved.delete(promise);
+			});
+		}
+	}
+
+	return Promise.all(unresolved).then(resolved => {
+		// Check if the array has new items
+		for (let promise of promises) {
+			if (!all.has(promise)) {
+				all.add(promise);
+
+				if (promise?.then) {
+					unresolved.add(promise);
+				}
+			}
+		}
+
+		if (unresolved.size > 0) {
+			return dynamicAll(unresolved).then(r => [...resolved, ...r]);
+		}
+
+		return resolved;
+	});
+}
+
 /**
  * Compute the ideal step for a range, to be used as a default in spinners and sliders
  * @param {number} min
@@ -53,3 +108,13 @@ export function getType (value) {
 
 	return Object.prototype.toString.call(value).slice(8, -1);
 }
+
+/**
+ * Template tag that does nothing. Useful for importing under different names (e.g. `css`) for syntax highlighting.
+ * @param {string[]} strings
+ * @param {...any} values
+ * @returns {string}
+ */
+export function noOpTemplateTag (strings, ...values) {
+	return strings.reduce((acc, string, i) => acc + string + (values[i] ?? ""), "");
+}

package/src/gamut-badge/gamut-badge.js

@@ -3,7 +3,7 @@ import ColorElement from "../common/color-element.js";
 const Self = class GamutBadge extends ColorElement {
 	static tagName = "gamut-badge";
 	static url = import.meta.url;
-	static shadowStyle = true;
+	static styles = "./gamut-badge.css";
 	static shadowTemplate = `
 		<slot>
 			<span id="label" part="label"></span>

package/src/space-picker/space-picker.js

@@ -3,7 +3,7 @@ import ColorElement from "../common/color-element.js";
 const Self = class SpacePicker extends ColorElement {
 	static tagName = "space-picker";
 	static url = import.meta.url;
-	static shadowStyle = true;
+	static styles = "./space-picker.css";
 	static shadowTemplate = `<select id="picker" part="base"></select>`;
 
 	constructor () {

package/debug.html

@@ -1,447 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<!-- <link rel="stylesheet" href="./src/color-chart/color-chart-global.css"> -->
-	<title>Document</title>
-	<style>
-		:root {
-			--test: red;
-		}
-
-		html,
-		body {
-			margin: 0;
-			min-height: 100vh;
-		}
-	</style>
-</head>
-
-<!-- <body style="display: grid; place-items: center; align-content: center; margin: 2rem"> -->
-
-<body style="display: grid; align-items: center; align-content: center; margin: 2rem">
-
-	<html-demo>
-		<channel-slider space="lch" color="lch(91% 14 50)" channel="c"></channel-slider>
-	</html-demo>
-
-	<!-- <html-demo>
-		<label for="el">Element:</label>
-		<color-chart y="oklch.l" id="el">
-			<color-scale
-				colors="#e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5, #2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1"></color-scale>
-		</color-chart>
-
-		<style>
-			#el:focus {
-				outline: 2px solid salmon;
-				outline-offset: 2px;
-			}
-		</style>
-	</html-demo> -->
-	<!-- <html-demo>
-		<space-picker id="picker" spaces="oklch, p3, srgb" value="oklch"></space-picker>
-
-		<script>
-			picker.labelFor = space => space.id;
-		</script>
-	</html-demo> -->
-	<!-- <html-demo>
-		<channel-slider space="jzazbz" color="oklch(50% 50% 180)"></channel-slider>
-	</html-demo> -->
-	<!-- <html-demo>
-		<color-slider space="jzazbz" color="oklch(50% 50% 180)"></color-slider>
-	</html-demo> -->
-	<!-- <html-demo>
-		<color-swatch>
-			oklch(65% 0.15 210)
-		</color-swatch>
-	</html-demo>
-	<html-demo>
-		<color-swatch label="My color">
-			oklch(65% 0.15 210)
-		</color-swatch>
-	</html-demo>
-	<html-demo>
-		<color-swatch value="oklch(65% 0.15 210)"></color-swatch>
-	</html-demo>
-	<html-demo>
-		<color-swatch value="oklch(65% 0.15 210)">Color Label</color-swatch>
-	</html-demo> -->
-	<!-- <html-demo>
-		<color-picker space="oklch" color="oklch(60% 30% 180)"></color-picker>
-	</html-demo> -->
-	<!-- <html-demo>
-		<color-picker></color-picker>
-	</html-demo> -->
-	<!-- <html-demo>
-		<color-scale editable space="oklch" colors="Gray 50: #f9fafb,
-			Gray 100: #f3f4f6,
-			Gray 400: #9ca3af,
-			Gray 500: #6b7280,
-			Gray 850: #1a202c"></color-scale>
-
-		<style>
-			color-scale::part(delete-button) {
-				border: none;
-				border-radius: .2em;
-			}
-		</style>
-	</html-demo> -->
-	<!-- <html-demo>
-		<color-scale editable="editable" space="oklch"
-			colors="Peach: #F6D6D6, Yellow: #F6F7C4, Mint: #A1EEBD, Blue: #7BD3EA"></color-scale>
-	</html-demo> -->
-	<!-- <html-demo>
-		<color-scale editable="color" colors="#e3fafc, #0b7285" steps="4" space="oklch"></color-scale>
-	</html-demo>
-	<html-demo>
-		<label>
-			<input type="checkbox" onchange="this.parentElement.nextElementSibling.editable = this.checked" />Editable
-		</label>
-		<color-scale space="oklch" colors="Peach: #F6D6D6, Yellow: #F6F7C4, Mint: #A1EEBD, Blue: #7BD3EA"></color-scale>
-	</html-demo> -->
-	<!-- <html-demo>
-		<label>
-			<input type="checkbox" onchange="this.parentElement.nextElementSibling.editable = this.checked" />Editable
-		</label>
-		<color-scale space="oklch" colors="
-			Gray 50: #f9fafb,
-			Gray 100: #f3f4f6,
-			Gray 400: #9ca3af,
-			Gray 500: #6b7280,
-			Gray 850: #1a202c
-		"></color-scale>
-	</html-demo> -->
-	<!-- <color-chart y="oklch.c" info="L: oklch.l, C: oklch.c, H: oklch.h">
-		<color-scale class="js"
-			colors="10: oklch(22.74% 0.05346 127.56), 20: oklch(31.363% 0.07637 127.56), 30: oklch(38.586% 0.09929 127.56), 40: oklch(45.71% 0.1222 127.56), 50: oklch(55.583% 0.14511 127.56), 60: oklch(65.706% 0.16802 127.56), 70: oklch(74.234% 0.14016 127.56), 80: oklch(82.712% 0.09698 127.56), 90: oklch(91.289% 0.04521 127.56), 95: oklch(95.028% 0.0168 127.56), 05: oklch(17.028% 0.04201 127.56)"
-			info="L: oklch.l, C: oklch.c, H: oklch.h" style="--color-count: 11;"></color-scale>
-		<color-scale class="wa"
-			colors="10 (WA) / 10: oklch(22.96% 0.05732 124.46), 20 (WA) / 20: oklch(31.023% 0.07932 126.35), 30 (WA) / 30: oklch(38.591% 0.0999 127.27), 40 (WA) / 40: oklch(45.187% 0.11752 127.61), 50 (WA) / 50: oklch(54.919% 0.144 128.2), 60 (WA) / 60: oklch(65.706% 0.16802 127.56), 70 (WA) / 70: oklch(74.318% 0.14579 124.41), 80 (WA) / 80: oklch(82.976% 0.10008 122.07), 90 (WA) / 90: oklch(91.96% 0.04779 121.53), 95 (WA) / 95: oklch(95.877% 0.02304 120.19), 05 (WA) / 05: oklch(17.406% 0.04251 122.61)"
-			info="L: oklch.l, C: oklch.c, H: oklch.h" style="--color-count: 11;"></color-scale>
-	</color-chart> -->
-	<!-- <color-chart y="oklch.l">
-		<color-scale colors="#e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5, #2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1"
-			info="L: oklch.l, C: oklch.c, H: oklch.h"></color-scale>
-	</color-chart> -->
-	<!-- <color-chart y="lab.b" info="oklch.l, oklch.c, oklch.h">
-		<color-scale
-			colors="10: #fff0f7, 20: #ffd6e8, 30: #ffafd2, 40: #ff7eb6, 50: #ee5396, 60: #d02670, 70: #9f1853, 80: #740937, 90: #510224, 100: #2a0a18"></color-scale>
-	</color-chart> -->
-	<!-- <color-chart y="oklch.h" info="L: oklch.l, C: oklch.c, H: oklch.h">
-		<color-scale
-			colors="0: #e7f5ff, 1: #d0ebff, 2: #a5d8ff, 3: #74c0fc, 4: #4dabf7, 5: #339af0, 6: #228be6, 7: #1c7ed6, 8: #1971c2, 9: #1864ab, 10: #145591, 11: #114678, 12: #0d375e"></color-scale><color-scale
-			colors="0: #ebfbee, 1: #d3f9d8, 2: #b2f2bb, 3: #8ce99a, 4: #69db7c, 5: #51cf66, 6: #40c057, 7: #37b24d, 8: #2f9e44, 9: #2b8a3e, 10: #237032, 11: #1b5727, 12: #133d1b"></color-scale>
-	</color-chart> -->
-	<!--<color-chart y="oklch.c" ymin="0.1" ymax="0.2" info="oklch.c">
-		<color-scale
-			colors="Red 50: #fef2f2, Red 100: #fee2e2, Red 200: #fecaca, Red 300: #fca5a5, Red 400: #f87171, Red 500: #ef4444, Red 600: #dc2626, Red 700: #b91c1c, Red 800: #991b1b, Red 900: #7f1d1d, Red 950: #450a0a"></color-scale>
-		<color-scale
-			colors="Orange 50: #fff7ed, Orange 100: #ffedd5, Orange 200: #fed7aa, Orange 300: #fdba74, Orange 400: #fb923c, Orange 500: #f97316, Orange 600: #ea580c, Orange 700: #c2410c, Orange 800: #9a3412, Orange 900: #7c2d12, Orange 950: #431407"></color-scale>
-		<color-scale
-			colors="Yellow 50: #fefce8, Yellow 100: #fef9c3, Yellow 200: #fef08a, Yellow 300: #fde047, Yellow 400: #facc15, Yellow 500: #eab308, Yellow 600: #ca8a04, Yellow 700: #a16207, Yellow 800: #854d0e, Yellow 900: #713f12, Yellow 950: #422006"></color-scale>
-	</color-chart>-->
-
-	<!--<color-chart y="oklch.h" info="L: oklch.l, C: oklch.c, H: oklch.h">
-		<color-scale class="js" colors="10: oklch(24.407% 0.05594 29.731), 20: oklch(33.308% 0.07991 31.508), 30: oklch(40.809% 0.10388 33.285), 40: oklch(48.21% 0.12785 35.062), 50: oklch(58.362% 0.15183 36.839), 60: oklch(68.763% 0.1758 38.616), 70: oklch(76.854% 0.14664 39.468), 80: oklch(84.895% 0.10147 40.321), 90: oklch(93.036% 0.04731 41.174), 95: oklch(96.556% 0.01758 42.027), 05: oklch(18.556% 0.04395 29.731)"></color-scale>
-		<color-scale class="wa" colors="10 (WA) / 10: oklch(24.025% 0.06086 31.256), 20 (WA) / 20: oklch(32.951% 0.09091 32.447), 30 (WA) / 30: oklch(40.519% 0.11729 32.521), 40 (WA) / 40: oklch(48.059% 0.14232 32.918), 50 (WA) / 50: oklch(58.004% 0.15904 35.567), 60 (WA) / 60: oklch(68.763% 0.1758 38.616), 70 (WA) / 70: oklch(76.593% 0.14912 46.395), 80 (WA) / 80: oklch(84.512% 0.09722 53.3), 90 (WA) / 90: oklch(92.492% 0.0445 54.008), 95 (WA) / 95: oklch(96.208% 0.02193 54.343), 05 (WA) / 05: oklch(18.569% 0.04081 32.111)"></color-scale>
-	</color-chart>-->
-
-	<!-- <html-demo>
-		<space-picker></space-picker>
-	</html-demo>
-
-	<html-demo>
-		<space-picker value="oklab"></space-picker>
-	</html-demo>
-
-	<html-demo>
-		<space-picker spaces="oklch, p3, srgb"></space-picker>
-	</html-demo>
-
-	<html-demo>
-		<space-picker spaces="foo"></space-picker>
-	</html-demo>
-
-	<html-demo>
-		<space-picker spaces="oklch, p3, srgb" value="p3"></space-picker>
-	</html-demo>
-
-	<html-demo>
-		<space-picker spaces="bar, oklch, p3, srgb, foo" value="baz"></space-picker>
-	</html-demo>
-
-	<html-demo>
-		<space-picker onspacechange="this.nextElementSibling.textContent = this.value"></space-picker>
-		<output></output>
-	</html-demo>
-
-	<html-demo>
-		<space-picker id="space_picker" spaces="oklch, p3, srgb" value="p3"></space-picker>
-
-		<script type="module">
-			space_picker.groupBy = (space) => {
-				let isPolar = space.coords.h?.type === "angle";
-				return isPolar ? "Polar" : "Rectangular";
-			};
-		</script>
-	</html-demo> -->
-
-	<!-- <color-scale
-		colors="10: oklch(22.74% 0.05346 127.56), 20: oklch(31.363% 0.07637 127.56), 30: oklch(38.586% 0.09929 127.56), 40: oklch(45.71% 0.1222 127.56), 50: oklch(55.583% 0.14511 127.56), 60: oklch(65.706% 0.16802 127.56), 70: oklch(74.234% 0.14016 127.56), 80: oklch(82.712% 0.09698 127.56), 90: oklch(91.289% 0.04521 127.56), 95: oklch(95.028% 0.0168 127.56), 05: oklch(17.028% 0.04201 127.56)"></color-scale> -->
-
-	<!-- <color-chart y="oklch.c" info="L: oklch.l, C: oklch.c, H: oklch.h">
-		<color-scale
-			colors="opencolor 0 / 0: #f4fce3, opencolor 1 / 11.11111111111111: #e9fac8, opencolor 2 / 22.22222222222222: #d8f5a2, opencolor 3 / 33.33333333333333: #c0eb75, opencolor 4 / 44.44444444444444: #a9e34b, opencolor 5 / 55.55555555555556: #94d82d, opencolor 6 / 66.66666666666666: #82c91e, opencolor 7 / 77.77777777777777: #74b816, opencolor 8 / 88.88888888888889: #66a80f, opencolor 9 / 100: #5c940d">
-		</color-scale>
-	</color-chart> -->
-	<!-- <label>
-		Space:
-		<select onchange="this.parentNode.nextElementSibling.nextElementSibling.space = this.value">
-			<option value="cam16-jmh">CAM16-JMh</option>
-			<option value="hct">HCT</option>
-			<option value="hpluv">HPLuv</option>
-			<option value="hsl">HSL</option>
-			<option value="hsluv">HSLuv</option>
-			<option value="hsv">HSV</option>
-			<option value="hwb">HWB</option>
-			<option value="lch">LCH</option>
-			<option value="lchuv">LChuv</option>
-			<option value="oklch" selected>Oklch</option>
-			<option value="oklrch">Oklrch</option>
-			<option value="okhsl">Okhsl</option>
-			<option value="okhsv">Okhsv</option>
-		</select>
-	</label>
-	<label>Coord:
-		<select onchange="this.parentNode.nextElementSibling.y = this.value">
-			<option selected>oklch.l</option>
-			<option>oklch.c</option>
-			<option>oklch.h</option>
-		</select>
-	</label>
-	<color-chart y="oklch.l" info="L: oklch.l, C: oklch.c, H: oklch.h">
-		<color-scale
-			colors="Red 50: #fef2f2, Red 100: #fee2e2, Red 200: #fecaca, Red 300: #fca5a5, Red 400: #f87171, Red 500: #ef4444, Red 600: #dc2626, Red 700: #b91c1c, Red 800: #991b1b, Red 900: #7f1d1d, 950: #450a0a"
-			info="oklch.l"></color-scale>
-		<color-scale
-			colors="Orange 50: #fff7ed, Orange 100: #ffedd5, Orange 200: #fed7aa, Orange 300: #fdba74, Orange 400: #fb923c, Orange 500: #f97316, Orange 600: #ea580c, Orange 700: #c2410c, Orange 800: #9a3412, Orange 900: #7c2d12, Orange 950: #431407"></color-scale>
-		<color-scale
-			colors="Yellow 50: #fefce8, Yellow 100: #fef9c3, Yellow 200: #fef08a, Yellow 300: #fde047, Yellow 400: #facc15, Yellow 500: #eab308, Yellow 600: #ca8a04, Yellow 700: #a16207, Yellow 800: #854d0e, Yellow 900: #713f12, Yellow 950: #422006"></color-scale>
-	</color-chart> -->
-	<!-- <color-swatch id="dynamic_static">oklch(70% 0.25 138)</color-swatch>
-	<button onclick='dynamic_static.color = "oklch(60% 0.15 0)"'>Change color</button> -->
-	<!-- <color-picker id="dynamic_static" space="oklch"></color-picker>
-	<button onclick='dynamic_static.color = "gold"'>Change color</button> -->
-
-	<!--<html-demo>
-		<color-swatch info="deltaE2000, WCAG21 contrast" vs="gold" size="large">
-			oklch(65% 0.15 210)
-		</color-swatch>
-	</html-demo>-->
-	<!-- <color-swatch info="L: oklch.l, C: oklch.c, H: oklch.h" vs="gold" size="large">
-		oklch(65% 0.15 210)
-	</color-swatch> -->
-	<!-- <html-demo>
-		<color-swatch info="L: oklch.l, C: oklch.c, H: oklch.h" vs="gold" size="large">
-			oklch(65% 0.15 210)
-		</color-swatch>
-	</html-demo>
-
-	<html-demo>
-		<color-swatch info="L: oklch.l, C: oklch.c, H: oklch.h, deltaE.2000, contrast.Weber" vs="gold" size="large">
-			oklch(65% 0.15 210)
-		</color-swatch>
-	</html-demo>
-
-	<html-demo>
-		<color-swatch info="L: oklch.l, C: oklch.c, H: oklch.h, deltaE.2000, foo" vs="blue">
-			oklch(65% 0.15 210)
-		</color-swatch>
-	</html-demo> -->
-	<!-- <color-swatch info="L: oklch.l, C: oklch.c, H: oklch.h" vs="oklch(65% 0.15 210)" size="large">
-		oklch(65% 0.15 210)
-	</color-swatch> -->
-	<!-- <color-swatch data="L: oklch.l, C: oklch.c, H: oklch.h, ΔE: 2000" vs="oklch(55% 0.1 210)" size="large">
-		oklch(55% 0.15 230)
-	</color-swatch>
-	<color-swatch data="L: oklch.l, C: oklch.c, H: oklch.h" vs="blue">oklch(65% 0.15 210)</color-swatch> -->
-	<!-- <color-swatch coords="L: l, C: c, H: h">oklch(80% 50% 70)</color-swatch> -->
-	<!-- <color-swatch size="large">green</color-swatch> -->
-	<!-- <div id="future_swatch_container"></div>
-	<script>
-		let swatch = document.createElement("color-swatch");
-		swatch.color = "oklch(65% 0.15 210)";
-		swatch.setAttribute("size", "large");
-		swatch.textContent = "Turquoise";
-		swatch.coords = "L: oklch.l, C: oklch.c, H: oklch.h";
-		future_swatch_container.append(swatch);
-	</script> -->
-
-	<!-- <color-scale colors="#e3fafc, #0b7285" steps="4" space="oklch" info="L: oklch.l, C: oklch.c" deltas></color-scale> -->
-	<!-- <color-scale space="oklch" info="L: oklch.l, C: oklch.c, H: oklch.h"
-		colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"></color-scale> -->
-	<!-- <color-scale colors="rgb(255 0 0), rgb(0 0 255)" steps="4" space="oklch"></color-scale> -->
-
-	<!-- <color-scale
-		colors="50: #ecfeff, 100: #cffafe, 200: #a5f3fc, 300: #67e8f9, 400: #22d3ee, 500: #06b6d4, 600: #0891b2, 700: #0e7490, 800: #155e75, 900: #164e63, 950: #083344"
-		info="L: lch.l, C: lch.c, H: lch.h"></color-scale>
-	<color-scale
-		colors="50: #fef2f2, 100: #fee2e2, 200: #fecaca, 300: #fca5a5, 400: #f87171, 500: #ef4444, 600: #dc2626, 700: #b91c1c, 800: #991b1b, 900: #7f1d1d, 950: #450a0a"
-		info="L: lch.l, C: lch.c, H: lch.h"></color-scale>
-	<color-scale
-		colors="50: #fff7ed, 100: #ffedd5, 200: #fed7aa, 300: #fdba74, 400: #fb923c, 500: #f97316, 600: #ea580c, 700: #c2410c, 800: #9a3412, 900: #7c2d12, 950: #431407"
-		info="L: lch.l, C: lch.c, H: lch.h"></color-scale>
-	<color-scale
-		colors="50: #fefce8, 100: #fef9c3, 200: #fef08a, 300: #fde047, 400: #facc15, 500: #eab308, 600: #ca8a04, 700: #a16207, 800: #854d0e, 900: #713f12, 950: #422006"
-		info="L: lch.l, C: lch.c, H: lch.h"></color-scale> -->
-	<!-- <color-scale space="oklch" colors="
-		#f8f9fa,
-		#f1f3f5,
-		#e9ecef
-	" info="L: oklch.l, C: oklch.c, H: oklch.h, deltaE2000" vs="previous"></color-scale>
-
-
-	<color-scale space="oklch" colors="
-			#f8f9fa,
-			#f1f3f5,
-			#e9ecef
-		" info="L: oklch.l, C: oklch.c, H: oklch.h, deltaE2000" vs="next"></color-scale>
-
-	<color-scale space="oklch" colors="
-			#f8f9fa,
-			#f1f3f5,
-			#e9ecef
-		" info="L: oklch.l, C: oklch.c, H: oklch.h, deltaE2000" vs="#f8f9fa"></color-scale> -->
-
-	<!-- <color-scale space="oklch" colors="
-		#f8f9fa,
-		#f1f3f5,
-		#e9ecef,
-		#dee2e6,
-		#ced4da,
-		#adb5bd,
-		#868e96,
-		#495057,
-		#343a40,
-		#212529
-	" info="L: oklch.l, C: oklch.c, H: oklch.h, deltaE2000" vs></color-scale> -->
-
-	<!-- <color-inline value="oklch(80% 50% 70)"></color-inline> -->
-	<!-- <button onclick="this.nextElementSibling.value = Math.random()">Random color</button>
-	<color-slider space="oklch" stops="gold, darkcyan, indigo"
-		oncolorchange="this.nextElementSibling.textContent = this.color"></color-slider> -->
-	<!-- <button onclick="this.nextElementSibling.textContent = 'gold'">Random color</button>
-	<color-swatch>red</color-swatch> -->
-
-	<!-- <color-swatch size="large" oncolorchange="this.nextElementSibling.textContent = this.color">
-		<input value="oklch(90% .8 250)" />
-	</color-swatch>
-	<output></output> -->
-
-	<!--<color-chart y="oklch.c" info="L: oklch.l, C: oklch.c, H: oklch.h">
-		<color-scale class="js"></color-scale>
-		<color-scale class="wa"></color-scale>
-	</color-chart>
-	<color-picker space="oklch" id="color_picker"></color-picker>
-
-	<script type="module">
-		// import Color from "https://colorjs.io/dist/color.js";
-		for (let colorScale of document.querySelectorAll("color-chart color-scale.js")) {
-			colorScale.colors = "10: oklch(23.363% 0.01102 274.75), 20: oklch(32.076% 0.01602 274.75), 30: oklch(39.389% 0.02119 274.75), 40: oklch(46.601% 0.02665 274.75), 50: oklch(56.564% 0.03294 274.75), 60: oklch(66.951% 0.02512 274.75), 70: oklch(75.289% 0.01834 274.75), 80: oklch(83.576% 0.0119 274.75), 90: oklch(91.963% 0.00568 274.75), 95: oklch(95.607% 0.00264 274.75), 05: oklch(17.607% 0.00857 274.75)";
-		}
-		// let color = new Color("oklch(56.564% 0.03294 274.75)");
-		let color = "oklch(56.564% 0.03294 274.75)";
-		color_picker.color = color;
-	</script>-->
-
-	<!-- <html-demo>
-		<color-picker id="custom-space-select" space="oklch" color="oklch(60% 30% 180)">
-			<select slot="space-picker" size="3" class="horizontal" onchange="this.parentElement.space = this.value">
-				<option value="oklch" selected>OKLCh</option>
-				<option value="hwb">HWB</option>
-				<option value="hpluv">HPLuv</option>
-			</select>
-		</color-picker>
-
-		<style>
-			select.horizontal {
-				writing-mode: tb;
-				field-sizing: content;
-
-				option {
-					writing-mode: horizontal-tb;
-					padding: .5em;
-				}
-			}
-		</style>
-	</html-demo> -->
-
-	<!--<html-demo>
-		<space-picker onspacechange="console.log(this.selectedSpace)"></space-picker>
-	</html-demo>-->
-
-	<!-- <html-demo>
-		<channel-picker></channel-picker>
-	</html-demo>
-
-	<html-demo>
-		<channel-picker value="foo.bar"></channel-picker>
-	</html-demo>
-
-	<html-demo>
-		<channel-picker value="oklch.bar"></channel-picker>
-	</html-demo>
-
-	<html-demo>
-		<channel-picker value="foo"></channel-picker>
-	</html-demo> -->
-
-	<!-- <html-demo>
-		<channel-picker value="p3.b"></channel-picker>
-	</html-demo>
-
-	<html-demo>
-		<channel-picker id="picker" value="hsl.h"></channel-picker>
-
-		<style>
-			#picker::part(space_picker) {
-				display: none;
-			}
-		</style>
-	</html-demo> -->
-
-	<!-- <html-demo>
-		<label>Coord:
-			<channel-picker onvaluechange="this.parentNode.nextElementSibling.y = this.value"></channel-picker>
-		</label>
-		<color-chart>
-			<color-scale colors="Red 50: #fef2f2, Red 100: #fee2e2, Red 200: #fecaca, Red 300: #fca5a5, Red 400: #f87171, Red 500: #ef4444, Red 600: #dc2626, Red 700: #b91c1c, Red 800: #991b1b, Red 900: #7f1d1d, Red 950: #450a0a"></color-scale>
-			<color-scale colors="Orange 50: #fff7ed, Orange 100: #ffedd5, Orange 200: #fed7aa, Orange 300: #fdba74, Orange 400: #fb923c, Orange 500: #f97316, Orange 600: #ea580c, Orange 700: #c2410c, Orange 800: #9a3412, Orange 900: #7c2d12, Orange 950: #431407"></color-scale>
-			<color-scale colors="Yellow 50: #fefce8, Yellow 100: #fef9c3, Yellow 200: #fef08a, Yellow 300: #fde047, Yellow 400: #facc15, Yellow 500: #eab308, Yellow 600: #ca8a04, Yellow 700: #a16207, Yellow 800: #854d0e, Yellow 900: #713f12, Yellow 950: #422006"></color-scale>
-		</color-chart>
-	</html-demo> -->
-
-	<!--<html-demo>
-		<channel-picker spaces="p3, oklch, hsl"></channel-picker>
-	</html-demo>-->
-
-
-	<script src="./index.js" type="module"></script>
-	<script src="./src/color-picker/color-picker.js" type="module"></script>
-	<!--	<script src="./src/color-slider/color-slider.js" type="module"></script> -->
-	<script src="./src/color-swatch/color-swatch.js" type="module"></script>
-	<script src="./src/color-scale/color-scale.js" type="module"></script>
-	<script src="./src/color-chart/color-chart.js" type="module"></script>
-	<script src="./src/space-picker/space-picker.js" type="module"></script>
-	<script src="./src/channel-picker/channel-picker.js" type="module"></script>
-	<!--	<script src="./src/gamut-badge/gamut-badge.js" type="module"></script>-->
-	<!--	<script src="./src/color-inline/color-inline.js" type="module"></script> -->
-	<script src="https://nudeui.com/elements/html-demo/html-demo.js" type="module"></script>
-
-</body>
-
-</html>