color-elements 0.0.3 → 0.0.5

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

@@ -1,24 +1,28 @@
 :host {
-	--_transparency-cell-size: var(--transparency-cell-size, .5em);
+	--_transparency-cell-size: var(--transparency-cell-size, 0.5em);
 	--_transparency-background: var(--transparency-background, transparent);
 	--_transparency-darkness: var(--transparency-darkness, 5%);
-	--_transparency-grid: var(--transparency-grid,
-		repeating-conic-gradient(transparent 0 25%, rgb(0 0 0 / var(--_transparency-darkness)) 0 50%)
-		0 0 / calc(2 * var(--_transparency-cell-size)) calc(2 * var(--_transparency-cell-size))
-		content-box border-box var(--_transparency-background)
+	--_transparency-grid: var(
+		--transparency-grid,
+		repeating-conic-gradient(
+				transparent 0 25%,
+				rgb(0 0 0 / var(--_transparency-darkness)) 0 50%
+			)
+			0 0 / calc(2 * var(--_transparency-cell-size)) calc(2 * var(--_transparency-cell-size))
+			content-box border-box var(--_transparency-background)
 	);
 
 	position: relative;
 	display: inline-flex;
-	gap: .3em;
-	width: fit-content;
-	margin: .3em;
-	border-radius: .2rem;
+	gap: 0.3em;
+	width: var(--color-swatch-width, fit-content);
+	margin: 0.3em;
+	border-radius: var(--color-swatch-radius, 0.2rem);
 }
 
 :host([size="large"]) {
 	flex-flow: column;
-	inline-size: 11em;
+	inline-size: min(11em, 100%);
 	min-block-size: 6em;
 	contain: inline-size;
 	container-name: color-swatch;
@@ -37,7 +41,7 @@ slot {
 		position: absolute;
 		top: 0;
 		right: 0;
-		margin: .5rem;
+		margin: 0.5rem;
 	}
 
 	&:not(:host([size="large"]) *) {
@@ -46,7 +50,7 @@ slot {
 			font-size: 50%;
 			top: 0;
 			right: 0;
-			margin: .2rem;
+			margin: 0.2rem;
 		}
 
 		&:is(.static *) {
@@ -54,8 +58,6 @@ slot {
 		}
 	}
 
-
-
 	&[style*="--gamut-level: 0"] {
 		display: none;
 	}
@@ -65,12 +67,12 @@ slot {
 	margin: 0;
 	display: inline-flex;
 	display: none;
-	gap: .5em;
+	gap: 0.5em;
 
 	&:is(:host([size="large"]) &) {
 		display: grid;
 		grid-template-columns: max-content auto;
-		gap: .1em .2em;
+		gap: 0.1em 0.2em;
 		font-size: max(9px, 80%);
 		justify-content: start;
 
@@ -81,7 +83,7 @@ slot {
 
 	.coord {
 		display: flex;
-		gap: .2em;
+		gap: 0.2em;
 
 		dd {
 			margin: 0;
@@ -96,9 +98,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;
 		}
 	}
 
@@ -111,8 +116,11 @@ slot {
 	}
 
 	@container style(--details-style: compact) {
-		--_border-color: var(--border-color, color-mix(in oklab, buttonborder 20%, oklab(none none none / 0%)));
-		--_pointer-height: var(--pointer-height, .5em);
+		--_border-color: var(
+			--border-color,
+			color-mix(in oklab, buttonborder 20%, oklab(none none none / 0%))
+		);
+		--_pointer-height: var(--pointer-height, 0.5em);
 		--_transition-duration: var(--transition-duration, 400ms);
 		--_details-popup-width: var(--details-popup-width, max-content);
 
@@ -121,13 +129,13 @@ slot {
 		z-index: 2;
 		translate: -50% 0;
 		bottom: 100%;
-		margin-bottom: calc(var(--_pointer-height) * .8);
+		margin-bottom: calc(var(--_pointer-height) * 0.8);
 		width: var(--_details-popup-width);
 		background: canvas;
 		border: 1px solid var(--_border-color);
-		padding: .6em 1em;
-		border-radius: .2rem;
-		box-shadow: 0 .05em 1em -.7em black;
+		padding: 0.6em 1em;
+		border-radius: 0.2rem;
+		box-shadow: 0 0.05em 1em -0.7em black;
 		transition: var(--_transition-duration) allow-discrete;
 		transition-property: all, display;
 		transition-delay: 0s, var(--_transition-duration);
@@ -162,8 +170,14 @@ slot {
 			clip-path: polygon(0 0, 0 100%, 100% 100%);
 		}
 
-		&:not(:is(:host(:hover), :host(:focus-within), :host(:active), :host(:target), :host([open])) *),
-		&:is(:host([open=false]) *) {
+		/*
+		 More straightforward selector:
+		 &:not(:is(:host(:hover), :host(:focus-within), :host(:active), :host(:target), :host([open])) *)
+		 doesn't work in Safari!
+		 See https://bugs.webkit.org/show_bug.cgi?id=296577
+		*/
+		&:is(:host(:not(:hover):not(:focus-within):not(:active):not(:target):not([open])) *),
+		&:is(:host([open="false"]) *) {
 			display: none;
 			opacity: 0;
 			scale: 0;
@@ -173,7 +187,13 @@ slot {
 
 [part="color"] {
 	display: flex;
-	gap: .2em;
+	gap: 0.2em;
+}
+
+[part="label"] {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 }
 
 slot:not([name]) {
@@ -190,25 +210,23 @@ slot:not([name]) {
 }
 
 [part="color-wrapper"],
-slot[name=swatch]::slotted(*),
+slot[name="swatch"]::slotted(*),
 #swatch {
 	border-radius: inherit;
 }
 
-slot[name=swatch]::slotted(*),
+slot[name="swatch"]::slotted(*),
 #swatch {
 	flex: 1;
 	display: flex;
 	flex-flow: column;
 	align-items: center;
 	justify-content: center;
-	padding: .5em;
+	padding: 0.5em;
 	display: flex;
 	flex-flow: column;
 	flex: 1;
-	background:
-		linear-gradient(var(--color) 0 100%),
-		var(--_transparency-grid);
+	background: linear-gradient(var(--color) 0 100%), var(--_transparency-grid);
 
 	&:is(:host([size="large"]) *) {
 		min-block-size: 3em;
@@ -223,7 +241,7 @@ slot[name=swatch]::slotted(*),
 	}
 }
 
-slot[name=swatch-content] {
+slot[name="swatch-content"] {
 	/* See https://lea.verou.me/blog/2024/contrast-color/ */
 	--l: clamp(0, (var(--l-threshold, 0.7) / l - 1) * infinity, 1);
 	color: oklch(from var(--color) var(--l) 0 h);

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">
@@ -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 {
@@ -111,9 +119,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 = "";
 			}
 		}
 
@@ -135,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);
 			}
@@ -151,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,85 +1,97 @@
-import NudeElement from "../../node_modules/nude-element/src/Element.js";
-import { getType, wait } 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;
+		}
+	}
+
+	:state(color-element) {
+		&:state(loading) {
+			content-visibility: hidden;
+			opacity: 0;
+
+			&,
+			* {
+				transition-property: opacity !important;
+			}
+		}
+
+		&:not(:state(loading)) {
+			animation: 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 }];
+	static plugins = [states];
+
 	constructor () {
 		super();
 
-		if (this.constructor.shadowTemplate !== undefined) {
-			this.attachShadow({mode: "open"});
-			this.shadowRoot.innerHTML = this.constructor.shadowTemplate;
+		let Self = this.constructor;
+
+		if (Self.shadowTemplate !== undefined) {
+			this.attachShadow({ mode: "open" });
+			this.shadowRoot.innerHTML = Self.shadowTemplate;
 		}
+
+		this.toggleState("color-element", true);
+		this.toggleState("loading", true);
+		Self.whenReady.then(() => {
+			this.toggleState("loading");
+		});
 	}
 
+	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);
 
 		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);
 			});
-
-			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);
 		}
 
-		if (!Self.Color) {
-			let specifier;
+		// Give other code a chance to overwrite Self.Color
+		await wait();
 
-			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

@@ -6,13 +6,68 @@ 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
  * @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;
 
@@ -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.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

@@ -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>
@@ -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: {