color-elements 0.0.4 → 0.0.5

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

@@ -42,7 +42,7 @@ const Self = class ColorSwatch extends ColorElement {
 
 	#updateStatic () {
 		let previousInput = this._el.input;
-		let input = this._el.input = this.querySelector("input");
+		let input = (this._el.input = this.querySelector("input"));
 
 		this.static = !input;
 
@@ -50,7 +50,9 @@ const Self = class ColorSwatch extends ColorElement {
 		this._el.wrapper.classList.toggle("static", this.static);
 
 		if (input && input !== previousInput) {
-			importIncrementable ??= import("https://incrementable.verou.me/incrementable.mjs").then(m => m.default);
+			importIncrementable ??= import("https://incrementable.verou.me/incrementable.mjs").then(
+				m => m.default,
+			);
 			importIncrementable?.then(Incrementable => new Incrementable(input));
 
 			input.addEventListener("input", evt => {
@@ -65,10 +67,14 @@ const Self = class ColorSwatch extends ColorElement {
 
 	get swatchTextContent () {
 		// Children that are not assigned to another slot
-		return [...this.childNodes].filter(n => !n.slot).map(n => n.textContent).join("").trim();
+		return [...this.childNodes]
+			.filter(n => !n.slot)
+			.map(n => n.textContent)
+			.join("")
+			.trim();
 	}
 
-	propChangedCallback ({name, prop, detail: change}) {
+	propChangedCallback ({ name, prop, detail: change }) {
 		let input = this._el.input;
 
 		if (name === "gamuts") {
@@ -91,9 +97,11 @@ const Self = class ColorSwatch extends ColorElement {
 					this._el.gamutIndicator.addEventListener("gamutchange", evt => {
 						let gamut = this._el.gamutIndicator.gamut;
 						this.setAttribute("gamut", gamut);
-						this.dispatchEvent(new CustomEvent("gamutchange", {
-							detail: gamut,
-						}));
+						this.dispatchEvent(
+							new CustomEvent("gamutchange", {
+								detail: gamut,
+							}),
+						);
 					});
 				}
 				else {
@@ -137,7 +145,7 @@ const Self = class ColorSwatch extends ColorElement {
 				return;
 			}
 
-			this._el.info ??= Object.assign(document.createElement("dl"), {part: "info"});
+			this._el.info ??= Object.assign(document.createElement("dl"), { part: "info" });
 			if (!this._el.info.parentNode) {
 				this._el.colorWrapper.after(this._el.info);
 			}
@@ -153,7 +161,7 @@ const Self = class ColorSwatch extends ColorElement {
 
 				value = typeof value === "number" ? Number(value.toPrecision(4)) : value;
 
-				info.push(`<div class="coord"><dt>${ label }</dt><dd>${ value }</dd></div>`);
+				info.push(`<div class="coord"><dt>${label}</dt><dd>${value}</dd></div>`);
 			}
 
 			this._el.info.innerHTML = info.join("\n");

package/src/common/color-element.js

@@ -1,28 +1,32 @@
-import NudeElement from "../../node_modules/nude-element/src/Element.js";
-import { getType, defer, wait, dynamicAll, noOpTemplateTag as css } from "./util.js";
+import Color from "colorjs.io";
+import NudeElement from "nude-element";
+import { states } from "nude-element/plugins";
+import { defer, wait, dynamicAll, noOpTemplateTag as css } from "./util.js";
 
 const baseGlobalStyles = css`
-@keyframes fade-in {
-	from { opacity: 0; }
-}
+	@keyframes fade-in {
+		from {
+			opacity: 0;
+		}
+	}
 
-:state(color-element) {
-	&:state(loading) {
-		content-visibility: hidden;
-		opacity: 0;
+	:state(color-element) {
+		&:state(loading) {
+			content-visibility: hidden;
+			opacity: 0;
 
-		&, * {
-			transition-property: opacity !important;
+			&,
+			* {
+				transition-property: opacity !important;
+			}
 		}
-	}
 
-	&:not(:state(loading)) {
-		xanimation: fade-in 300ms both;
+		&:not(:state(loading)) {
+			animation: fade-in 300ms both;
+		}
 	}
-}
 `;
 
-
 const Self = class ColorElement extends NudeElement {
 	static url = import.meta.url;
 	// TODO make lazy
@@ -30,7 +34,8 @@ const Self = class ColorElement extends NudeElement {
 	static all = {};
 	static dependencies = new Set();
 
-	static globalStyles = [{css: baseGlobalStyles}];
+	static globalStyles = [{ css: baseGlobalStyles }];
+	static plugins = [states];
 
 	constructor () {
 		super();
@@ -38,40 +43,15 @@ const Self = class ColorElement extends NudeElement {
 		let Self = this.constructor;
 
 		if (Self.shadowTemplate !== undefined) {
-			this.attachShadow({mode: "open"});
+			this.attachShadow({ mode: "open" });
 			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;
+		this.toggleState("color-element", true);
+		this.toggleState("loading", true);
+		Self.whenReady.then(() => {
+			this.toggleState("loading");
+		});
 	}
 
 	static ready = [defer()];
@@ -91,7 +71,7 @@ const Self = class ColorElement extends NudeElement {
 
 		if (this.shadowTemplate) {
 			// TODO find dependencies
-			let colorTagRegex = RegExp(`(?<=</)(${ colorTags.join("|") })(?=>)`, "g");
+			let colorTagRegex = RegExp(`(?<=</)(${colorTags.join("|")})(?=>)`, "g");
 			(this.shadowTemplate.match(colorTagRegex) ?? []).forEach(tag => {
 				this.dependencies ??= new Set();
 				this.dependencies.add(tag);
@@ -99,41 +79,19 @@ const Self = class ColorElement extends NudeElement {
 		}
 
 		if (this.dependencies.size > 0) {
-			let whenDefined = [...this.dependencies].map(tag => customElements.whenDefined(tag).then(Class => Class.whenReady));
+			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;
-
-			try {
-				// Is already loaded? (e.g. via an import map, or if we're in Node)
-				import.meta.resolve("colorjs.io");
-				specifier = "colorjs.io";
-			}
-			catch (e) {
-				// specifier = "../../node_modules/colorjs.io/dist/color.js";
-				specifier = "https://colorjs.io/dist/color.js";
-			}
-
-			Self.Color = import(specifier).then(module => module.default);
-		}
-
-		// We can't just use top level await, see https://bugs.webkit.org/show_bug.cgi?id=242740
-		if (getType(Self.Color) === "Promise") {
-			let ColorPending = Self.Color;
-			let Color = await ColorPending;
-
-			if (Self.Color === ColorPending) {
-				// Hasn't changed
-				Self.Color = Color;
-			}
-		}
+		Self.Color ??= Color;
 
 		customElements.define(this.tagName, this);
+
+		this.ready[0].resolve();
 	}
 };
 

package/src/common/dom.js

@@ -1,6 +1,6 @@
 export function named (host, attributes = ["id", "part"]) {
 	let ret = {};
-	let selector = attributes.map(attr => `[${ attr }]`).join(", ");
+	let selector = attributes.map(attr => `[${attr}]`).join(", ");
 
 	for (let el of host.shadowRoot.querySelectorAll(selector)) {
 		// Get the value of the first attribute in attributes that has a value
@@ -27,7 +27,9 @@ export function slots (host) {
 
 export function toSlots ({
 	slots = this._slots,
-	slotElements = slots ? Object.values(slots) : Array.from(this.shadowRoot.querySelectorAll("slot")),
+	slotElements = slots
+		? Object.values(slots)
+		: Array.from(this.shadowRoot.querySelectorAll("slot")),
 }) {
 	let children = this.childNodes;
 	let assignments = new WeakMap();

package/src/common/util.js

@@ -67,7 +67,7 @@ export async function dynamicAll (promises) {
  * @param {number} max
  * @param {options} options
  */
-export function getStep (min, max, {minSteps = 100, maxStep = 1} = {}) {
+export function getStep (min, max, { minSteps = 100, maxStep = 1 } = {}) {
 	let range = Math.abs(max - min);
 	let step = range / minSteps;
 

package/src/gamut-badge/gamut-badge.css

@@ -7,27 +7,47 @@
 	--_color-invalid: var(--color-invalid, hsl(220 10% 60%));
 
 	/* Low-level scales, i.e. between pairs of our core colors */
-	--color-scale-1: color-mix(in oklch, var(--_color-green), var(--_color-yellow) var(--progress-1));
-	--color-scale-2: color-mix(in oklch, var(--_color-yellow), var(--_color-orange) var(--progress-2));
+	--color-scale-1: color-mix(
+		in oklch,
+		var(--_color-green),
+		var(--_color-yellow) var(--progress-1)
+	);
+	--color-scale-2: color-mix(
+		in oklch,
+		var(--_color-yellow),
+		var(--_color-orange) var(--progress-2)
+	);
 	--color-scale-3: color-mix(in oklch, var(--_color-orange), var(--_color-red) var(--progress-3));
 
 	/* Recursive scales: their only purpose is to select one of the low-level scales, and will only ever have 0%/100% positions
 	   For N colors there are N-2 + N-3 + ... + 1 = (N-1)(N-2) / 2 of these
 	*/
-	--color-scale-12: color-mix(in oklch, var(--color-scale-1), var(--color-scale-2) var(--progress-12));
-	--color-scale-23: color-mix(in oklch, var(--color-scale-2), var(--color-scale-3) var(--progress-23));
-	--color-scale-123: color-mix(in oklch, var(--color-scale-12), var(--color-scale-23) var(--progress-123));
+	--color-scale-12: color-mix(
+		in oklch,
+		var(--color-scale-1),
+		var(--color-scale-2) var(--progress-12)
+	);
+	--color-scale-23: color-mix(
+		in oklch,
+		var(--color-scale-2),
+		var(--color-scale-3) var(--progress-23)
+	);
+	--color-scale-123: color-mix(
+		in oklch,
+		var(--color-scale-12),
+		var(--color-scale-23) var(--progress-123)
+	);
 
 	--gamut-progress: calc(var(--gamut-level) / (var(--gamut-count) - 1));
 	--progress-ext: calc(var(--gamut-progress) * 300%);
 
-	--progress-123: clamp(0%, (var(--progress-ext) - 150%)       * infinity, 100%);
-	--progress-12:  clamp(0%, (var(--progress-ext) - 150% + 75%) *  infinity, 100%);
-	--progress-23:  clamp(0%, (var(--progress-ext) - 150% - 75%) * infinity, 100%);
+	--progress-123: clamp(0%, (var(--progress-ext) - 150%) * infinity, 100%);
+	--progress-12: clamp(0%, (var(--progress-ext) - 150% + 75%) * infinity, 100%);
+	--progress-23: clamp(0%, (var(--progress-ext) - 150% - 75%) * infinity, 100%);
 
-	--progress-1:   clamp(0%, var(--progress-ext), 100%);
-	--progress-2:   calc(clamp(100%, var(--progress-ext), 200%) - 100%);
-	--progress-3:   calc(clamp(200%, var(--progress-ext), 300%) - 200%);
+	--progress-1: clamp(0%, var(--progress-ext), 100%);
+	--progress-2: calc(clamp(100%, var(--progress-ext), 200%) - 100%);
+	--progress-3: calc(clamp(200%, var(--progress-ext), 300%) - 200%);
 
 	--color-level-infinity: var(--_color-red-dark);
 	--color: var(--color-scale-123, var(--_color-invalid));
@@ -35,11 +55,11 @@
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	border-radius: .2em;
+	border-radius: 0.2em;
 	color: white;
 	background-color: var(--color);
 	font-weight: bold;
-	padding-inline: .4em;
+	padding-inline: 0.4em;
 	line-height: 1.4;
 
 	/* See https://lea.verou.me/blog/2024/contrast-color/ */

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

@@ -23,7 +23,7 @@ const Self = class GamutBadge extends ColorElement {
 		return this.gamutInfo?.label ?? "";
 	}
 
-	propChangedCallback ({name, prop, detail: change}) {
+	propChangedCallback ({ name, prop, detail: change }) {
 		if (name === "gamuts") {
 			this.style.setProperty("--gamut-count", this.gamuts.length - 1);
 		}
@@ -31,8 +31,8 @@ const Self = class GamutBadge extends ColorElement {
 		if (name === "gamutInfo") {
 			if (this.gamutInfo) {
 				this.style.setProperty("--gamut-level", this.gamutInfo.level);
-				this.style.setProperty("--gamut-label", `"${ this.gamutInfo.label }"`);
-				this.style.setProperty("--gamut-id", `"${ this.gamutInfo.id }"`);
+				this.style.setProperty("--gamut-label", `"${this.gamutInfo.label}"`);
+				this.style.setProperty("--gamut-id", `"${this.gamutInfo.id}"`);
 			}
 			else {
 				this.style.removeProperty("--gamut-level");
@@ -61,7 +61,7 @@ const Self = class GamutBadge extends ColorElement {
 				}
 				else if (!Array.isArray(gamuts) && typeof gamuts === "object") {
 					// Object
-					return Object.entries(gamuts).map(([id, label]) => ({id, label}));
+					return Object.entries(gamuts).map(([id, label]) => ({ id, label }));
 				}
 
 				let ret = gamuts.map((gamut, level) => {
@@ -73,7 +73,7 @@ const Self = class GamutBadge extends ColorElement {
 					gamut = gamut.trim().split(/\s*:\s*/);
 					let id = gamut[0];
 					let label = gamut[1] ?? Self.Color.spaces[id]?.name ?? id;
-					return {id, label, level};
+					return { id, label, level };
 				});
 
 				if (!ret.find(gamut => gamut.id === "none")) {
@@ -89,7 +89,7 @@ const Self = class GamutBadge extends ColorElement {
 				return ret;
 			},
 			stringify (gamuts) {
-				return gamuts.map(({id, label}) => `${ id }: ${ label }`).join(", ");
+				return gamuts.map(({ id, label }) => `${id}: ${label}`).join(", ");
 			},
 		},
 		gamutInfo: {
@@ -98,7 +98,9 @@ const Self = class GamutBadge extends ColorElement {
 					return null;
 				}
 
-				return this.gamuts?.find(gamut => gamut.id === "none" || this.color?.inGamut(gamut.id));
+				return this.gamuts?.find(
+					gamut => gamut.id === "none" || this.color?.inGamut(gamut.id),
+				);
 			},
 		},
 		gamut: {

package/src/space-picker/space-picker.css

@@ -1,9 +1,9 @@
 :host {
 	--border-width: 1px;
-	--border-color: rgb(0 0 0 / .2);
-	--border-radius: .2em;
+	--border-color: rgb(0 0 0 / 0.2);
+	--border-radius: 0.2em;
 
-	padding: .3em .5em;
+	padding: 0.3em 0.5em;
 
 	border-radius: var(--border-radius);
 	border: var(--border-width) solid var(--border-color);

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

@@ -29,11 +29,14 @@ const Self = class SpacePicker extends ColorElement {
 		}
 	}
 
-	propChangedCallback ({name, prop, detail: change}) {
+	propChangedCallback ({ name, prop, detail: change }) {
 		if (name === "spaces") {
 			if (!this.groups) {
 				this._el.picker.innerHTML = Object.entries(this.spaces)
-					.map(([id, space]) => `<option value="${ id }">${ this.getSpaceLabel(space) }</option>`)
+					.map(
+						([id, space]) =>
+							`<option value="${id}">${this.getSpaceLabel(space)}</option>`,
+					)
 					.join("\n");
 			}
 			else {
@@ -42,7 +45,9 @@ const Self = class SpacePicker extends ColorElement {
 				// Remove empty groups
 				groups = Object.entries(groups).filter(([type, spaces]) => {
 					if (Object.keys(spaces).length === 0) {
-						console.warn(`Removed empty group of color spaces with the label "${type}."`);
+						console.warn(
+							`Removed empty group of color spaces with the label "${type}."`,
+						);
 						return false;
 					}
 
@@ -50,17 +55,26 @@ const Self = class SpacePicker extends ColorElement {
 				});
 
 				if (!groups.length) {
-					console.warn("All provided groups of color spaces are empty. Falling back to default grouping.");
+					console.warn(
+						"All provided groups of color spaces are empty. Falling back to default grouping.",
+					);
 					groups = [["All spaces", this.spaces]];
 				}
 
-				this._el.picker.innerHTML = groups.map(([type, spaces]) => `
+				this._el.picker.innerHTML = groups
+					.map(
+						([type, spaces]) => `
 					<optgroup label="${type}">
 						${Object.entries(spaces)
-							.map(([id, space]) => `<option value="${ id }">${ this.getSpaceLabel(space) }</option>`)
+							.map(
+								([id, space]) =>
+									`<option value="${id}">${this.getSpaceLabel(space)}</option>`,
+							)
 							.join("\n")}
 					</optgroup>
-				`).join("\n");
+				`,
+					)
+					.join("\n");
 			}
 
 			this._el.picker.value = this.value;
@@ -76,7 +90,9 @@ const Self = class SpacePicker extends ColorElement {
 					let currentSpace = this._el.picker.value;
 					let fallback = spaces.includes(currentSpace) ? currentSpace : firstSpace;
 
-					console.warn(`No color space found with id = "${ value }". Choose one of the following: ${ spaces.join(", ") }. Falling back to "${ fallback }".`);
+					console.warn(
+						`No color space found with id = "${value}". Choose one of the following: ${spaces.join(", ")}. Falling back to "${fallback}".`,
+					);
 					this.value = value = fallback;
 				}
 
@@ -140,7 +156,9 @@ const Self = class SpacePicker extends ColorElement {
 				return value;
 			},
 			stringify (value) {
-				return Object.entries(value).map(([id, space]) => id).join(", ");
+				return Object.entries(value)
+					.map(([id, space]) => id)
+					.join(", ");
 			},
 		},
 
@@ -201,7 +219,7 @@ const Self = class SpacePicker extends ColorElement {
 		},
 	};
 
-	static formAssociated = {
+	static formBehavior = {
 		like: el => el._el.picker,
 		role: "combobox",
 		changeEvent: "change",

package/src/src.json

@@ -1,3 +1,3 @@
 {
 	"layout": "component"
-}
+}