From e13ef18980e301283cc95b35cc8c105be6583341 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Tue, 11 Jun 2024 18:51:35 +0200
Subject: [PATCH 01/23] [color-swatch] Add support for deltas from other color

---
 src/color-swatch/color-swatch.css | 57 ++++++++++++++++++------
 src/color-swatch/color-swatch.js  | 73 +++++++++++++++++++++++++------
 2 files changed, 103 insertions(+), 27 deletions(-)

diff --git a/src/color-swatch/color-swatch.css b/src/color-swatch/color-swatch.css
index 01fcba6a..4b5a733f 100644
--- a/src/color-swatch/color-swatch.css
+++ b/src/color-swatch/color-swatch.css
@@ -7,6 +7,8 @@
 		0 0 / calc(2 * var(--_transparency-cell-size)) calc(2 * var(--_transparency-cell-size))
 		content-box border-box var(--_transparency-background)
 	);
+	--_positive-deltaE-color: var(--positive-deltaE-color, hsl(120, 80%, 25%));
+	--_negative-deltaE-color: var(--negative-deltaE-color, hsl(0, 85%, 40%));
 
 	position: relative;
 	display: inline-flex;
@@ -49,31 +51,48 @@ slot {
 	}
 }
 
-[part="coords"] {
+[part="coords"], [part="deltaE"] {
 	margin: 0;
 	display: inline-flex;
 	gap: .5em;
 
+	dd {
+		margin: 0;
+		font-weight: bold;
+		font-variant-numeric: tabular-nums;
+	}
+
 	&:is(:host([size="large"]) &) {
 		display: grid;
-		grid-template-columns: max-content auto;
-		gap: .3em;
-		font-size: max(9px, 80%);
-		justify-content: start;
-
-		.coord {
-			display: contents;
-		}
+		grid-template-columns: subgrid;
 	}
+}
 
+[part="coords"] {
 	.coord {
 		display: flex;
 		gap: .2em;
 
-		dd {
-			margin: 0;
-			font-weight: bold;
-			font-variant-numeric: tabular-nums;
+		dd.deltaE {
+			color: var(--_deltaE-color);
+
+			&.positive {
+				--_deltaE-color: var(--_positive-deltaE-color);
+			}
+
+			&.negative {
+				--_deltaE-color: var(--_negative-deltaE-color);
+			}
+		}
+	}
+
+	&:is(:host([size="large"]) &) {
+		.coord {
+			display: contents;
+
+			dd:not(.deltaE, :has(~ dd)) {
+				grid-column: span 2;
+			}
 		}
 	}
 }
@@ -97,6 +116,18 @@ slot {
 	@container color-swatch (width <= 5rem) {
 		font-size: 80%;
 	}
+
+	&:is(:host([size="large"]) &) {
+		display: grid;
+		grid-template-columns: repeat(3, max-content);
+		gap: .1em .2em;
+		font-size: max(9px, 80%);
+		justify-content: start;
+
+		& > * {
+			grid-column: 1 / -1;
+		}
+	}
 }
 
 [part="color-wrapper"] {
diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js
index a8ce82c6..2ec5295c 100644
--- a/src/color-swatch/color-swatch.js
+++ b/src/color-swatch/color-swatch.js
@@ -109,27 +109,68 @@ const Self = class ColorSwatch extends NudeElement {
 			this.style.setProperty("--color", colorString);
 		}
 
-		if (name === "coords") {
-			if (!this.coords.length) {
-				return;
-			}
+		if (name === "coords" || name === "vs") {
+			if (this.coords.length) {
+				this._el.coords ??= Object.assign(document.createElement("dl"), {part: "coords"});
+				if (!this._el.coords.parentNode) {
+					this._el.colorWrapper.after(this._el.coords);
+				}
+
+				let coords = [];
+				for (let coord of this.coords) {
+					let [label, channel] = Object.entries(coord)[0];
+					let {space, index} = Color.Space.resolveCoord(channel);
+
+					let value = this.color.get(channel);
+
+					let deltaString;
+					if (typeof value === "number" && this.vs) {
+						let spaceCoords = Object.values(space.coords);
+						let deltas = this.color.deltas(this.vs, this.color, {space}).coords;
+
+						let delta = deltas[index];
+						if (typeof delta === "number" && delta !== 0) {
+							let isAngle = spaceCoords[index].type === "angle";
+							if (!isAngle) {
+								delta = Math.abs(delta - value) / delta;
+							}
+							delta = Number(delta.toPrecision(4));
+
+							let sign = delta > 0 ? "+" : "";
+							let className = delta > 0 ? "positive" : "negative";
+							deltaString = `<dd class="deltaE ${ className }">(${ sign }${ delta }${ !isAngle ? "%" : ""})</dd>`;
+						}
+					}
+
+					value = typeof value === "number" ? Number(value.toPrecision(4)) : value;
+					let html = `<dt>${ label }</dt><dd>${ value }</dd>`;
+					if (deltaString) {
+						html += deltaString;
+					}
+
+					coords.push(`<div class="coord">${ html }</div>`);
+				}
 
-			this._el.coords ??= Object.assign(document.createElement("dl"), {part: "coords"});
-			if (!this._el.coords.parentNode) {
-				this._el.colorWrapper.after(this._el.coords);
+				this._el.coords.innerHTML = coords.join("\n");
 			}
+		}
 
-			let coords = [];
-			for (let coord of this.coords) {
-				let [label, channel] = Object.entries(coord)[0];
+		if (name === "vs") {
+			if (!this.vs) {
+				this._el.deltaE?.remove();
+				this._el.deltaE = null;
+			}
+			else {
+				this._el.deltaE ??= Object.assign(document.createElement("dl"), {part: "deltaE"});
+				if (!this._el.deltaE.parentNode) {
+					(this._el.coords ?? this._el.colorWrapper).after(this._el.deltaE);
+				}
 
-				let value = this.color.get(channel);
+				let value = this.color.deltaE(this.vs);
 				value = typeof value === "number" ? Number(value.toPrecision(4)) : value;
 
-				coords.push(`<div class="coord"><dt>${ label }</dt><dd>${ value }</dd></div>`);
+				this._el.deltaE.innerHTML = `<dt>ΔE</dt><dd>${ value }</dd>`;
 			}
-
-			this._el.coords.innerHTML = coords.join("\n");
 		}
 	}
 
@@ -179,6 +220,10 @@ const Self = class ColorSwatch extends NudeElement {
 			},
 			dependencies: ["color"],
 		},
+		vs: {
+			type: Color,
+			dependencies: ["color"],
+		},
 	}
 
 	static events = {

From d6c7f7fbb5d498f02eb15c5bf76ce2f1034b9b5d Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Tue, 11 Jun 2024 18:51:47 +0200
Subject: [PATCH 02/23] [color-scale] Add support for deltas from other color

---
 src/color-scale/color-scale.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 2dda037a..e7105d3f 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -71,6 +71,9 @@ const Self = class ColorScale extends NudeElement {
 			if (this.coords) {
 				swatch.coords = this.coords;
 			}
+			if (this.vs) {
+				swatch.vs = this.vs;
+			}
 			i++;
 		}
 
@@ -152,6 +155,9 @@ const Self = class ColorScale extends NudeElement {
 			additionalDependencies: ["coords"],
 		},
 		coords: {},
+		vs: {
+			type: Color,
+		},
 	};
 }
 

From 4525cff1f7e80f9fc935ceadccefd3038d5f9fdd Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Tue, 11 Jun 2024 19:09:15 +0200
Subject: [PATCH 03/23] Move vars to the block where they are used

---
 src/color-swatch/color-swatch.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js
index 2ec5295c..07f163aa 100644
--- a/src/color-swatch/color-swatch.js
+++ b/src/color-swatch/color-swatch.js
@@ -119,12 +119,11 @@ const Self = class ColorSwatch extends NudeElement {
 				let coords = [];
 				for (let coord of this.coords) {
 					let [label, channel] = Object.entries(coord)[0];
-					let {space, index} = Color.Space.resolveCoord(channel);
-
 					let value = this.color.get(channel);
 
 					let deltaString;
 					if (typeof value === "number" && this.vs) {
+						let {space, index} = Color.Space.resolveCoord(channel);
 						let spaceCoords = Object.values(space.coords);
 						let deltas = this.color.deltas(this.vs, this.color, {space}).coords;
 

From e6428912807f9cf43ac4e327e9042173c957ed7f Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Tue, 11 Jun 2024 19:16:38 +0200
Subject: [PATCH 04/23] Don't show the delta if it's zero

---
 src/color-swatch/color-swatch.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js
index 07f163aa..93c3800d 100644
--- a/src/color-swatch/color-swatch.js
+++ b/src/color-swatch/color-swatch.js
@@ -160,15 +160,16 @@ const Self = class ColorSwatch extends NudeElement {
 				this._el.deltaE = null;
 			}
 			else {
-				this._el.deltaE ??= Object.assign(document.createElement("dl"), {part: "deltaE"});
-				if (!this._el.deltaE.parentNode) {
-					(this._el.coords ?? this._el.colorWrapper).after(this._el.deltaE);
-				}
-
 				let value = this.color.deltaE(this.vs);
 				value = typeof value === "number" ? Number(value.toPrecision(4)) : value;
+				if (value !== 0) {
+					this._el.deltaE ??= Object.assign(document.createElement("dl"), {part: "deltaE"});
+					if (!this._el.deltaE.parentNode) {
+						(this._el.coords ?? this._el.colorWrapper).after(this._el.deltaE);
+					}
 
-				this._el.deltaE.innerHTML = `<dt>ΔE</dt><dd>${ value }</dd>`;
+					this._el.deltaE.innerHTML = `<dt>ΔE</dt><dd>${ value }</dd>`;
+				}
 			}
 		}
 	}

From 85428d87f49a82948161556c6d4f7deb18b8c7aa Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Tue, 11 Jun 2024 19:25:14 +0200
Subject: [PATCH 05/23] Minor refactor

---
 src/color-swatch/color-swatch.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js
index 93c3800d..ca1bb91e 100644
--- a/src/color-swatch/color-swatch.js
+++ b/src/color-swatch/color-swatch.js
@@ -124,12 +124,12 @@ const Self = class ColorSwatch extends NudeElement {
 					let deltaString;
 					if (typeof value === "number" && this.vs) {
 						let {space, index} = Color.Space.resolveCoord(channel);
-						let spaceCoords = Object.values(space.coords);
 						let deltas = this.color.deltas(this.vs, this.color, {space}).coords;
 
 						let delta = deltas[index];
 						if (typeof delta === "number" && delta !== 0) {
-							let isAngle = spaceCoords[index].type === "angle";
+							let spaceCoord = Object.values(space.coords)[index];
+							let isAngle = spaceCoord.type === "angle";
 							if (!isAngle) {
 								delta = Math.abs(delta - value) / delta;
 							}

From 6242c06528e073184ce6024e88f0a1bd674d9519 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Tue, 11 Jun 2024 20:19:18 +0200
Subject: [PATCH 06/23] Support different precision for angles and numbers

---
 src/color-swatch/color-swatch.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js
index ca1bb91e..52e22fe7 100644
--- a/src/color-swatch/color-swatch.js
+++ b/src/color-swatch/color-swatch.js
@@ -133,7 +133,7 @@ const Self = class ColorSwatch extends NudeElement {
 							if (!isAngle) {
 								delta = Math.abs(delta - value) / delta;
 							}
-							delta = Number(delta.toPrecision(4));
+							delta = Number(delta.toPrecision(isAngle ? 4 : 1));
 
 							let sign = delta > 0 ? "+" : "";
 							let className = delta > 0 ? "positive" : "negative";

From 9c886522e5d3cda5d4859ba43bc1d99f8d454cd2 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Tue, 11 Jun 2024 21:58:03 +0200
Subject: [PATCH 07/23] Add support for the primary use case

Show deltas within the scale.
---
 src/color-scale/color-scale.js | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index e7105d3f..2a113afd 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -70,9 +70,18 @@ const Self = class ColorScale extends NudeElement {
 			swatch.textContent = name;
 			if (this.coords) {
 				swatch.coords = this.coords;
-			}
-			if (this.vs) {
-				swatch.vs = this.vs;
+
+				// Deltas don't make sense without coords
+				if (this.deltas) {
+					if (this.vs) {
+						// If there is a vs color, use it as the reference for the deltas
+						swatch.vs = this.vs;
+					}
+					else if (i > 0) {
+						// Otherwise, use the previous color
+						swatch.vs = colors[i - 1].color;
+					}
+				}
 			}
 			i++;
 		}
@@ -152,12 +161,15 @@ const Self = class ColorScale extends NudeElement {
 
 				return colors;
 			},
-			additionalDependencies: ["coords"],
+			additionalDependencies: ["coords", "vs", "deltas"],
 		},
 		coords: {},
 		vs: {
 			type: Color,
 		},
+		deltas: {
+			type: Boolean,
+		},
 	};
 }
 

From bd4df349871749bf7d25cd9573c4fa1202af8763 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Tue, 11 Jun 2024 23:07:32 +0200
Subject: [PATCH 08/23] =?UTF-8?q?=F0=9F=A4=A6=E2=80=8D=E2=99=82=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/color-swatch/color-swatch.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js
index 52e22fe7..aff4f787 100644
--- a/src/color-swatch/color-swatch.js
+++ b/src/color-swatch/color-swatch.js
@@ -124,14 +124,14 @@ const Self = class ColorSwatch extends NudeElement {
 					let deltaString;
 					if (typeof value === "number" && this.vs) {
 						let {space, index} = Color.Space.resolveCoord(channel);
-						let deltas = this.color.deltas(this.vs, this.color, {space}).coords;
+						let deltas = this.color.deltas(this.vs, {space}).coords;
 
 						let delta = deltas[index];
 						if (typeof delta === "number" && delta !== 0) {
 							let spaceCoord = Object.values(space.coords)[index];
 							let isAngle = spaceCoord.type === "angle";
 							if (!isAngle) {
-								delta = Math.abs(delta - value) / delta;
+								delta = delta / value * 100;
 							}
 							delta = Number(delta.toPrecision(isAngle ? 4 : 1));
 

From 5ddf3a143d9baa9826c85774a8ed9e4d4170d959 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Tue, 11 Jun 2024 23:25:23 +0200
Subject: [PATCH 09/23] Increase precision for percents

---
 src/color-swatch/color-swatch.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js
index aff4f787..64dafe1b 100644
--- a/src/color-swatch/color-swatch.js
+++ b/src/color-swatch/color-swatch.js
@@ -133,7 +133,7 @@ const Self = class ColorSwatch extends NudeElement {
 							if (!isAngle) {
 								delta = delta / value * 100;
 							}
-							delta = Number(delta.toPrecision(isAngle ? 4 : 1));
+							delta = Number(delta.toPrecision(isAngle ? 4 : 2));
 
 							let sign = delta > 0 ? "+" : "";
 							let className = delta > 0 ? "positive" : "negative";

From fea82ad7733828e5e2c45533be233aab8b310bd2 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Wed, 12 Jun 2024 12:06:50 +0200
Subject: [PATCH 10/23] [color-swatch] Add docs on the `vs` prop (attribute)

---
 src/color-swatch/README.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/color-swatch/README.md b/src/color-swatch/README.md
index 1582e30c..47bb5589 100644
--- a/src/color-swatch/README.md
+++ b/src/color-swatch/README.md
@@ -120,6 +120,24 @@ By default, the coord name will be used as a coord label. Add a label before the
 </color-swatch>
 ```
 
+### The `vs` attribute
+
+You can pass another color via the `vs` attribute to show the delta (if it is not zero) between the current and that color.
+
+```html
+<color-swatch vs="oklch(55% 0.1 210)" size="large">
+	oklch(70% 0.25 138)
+</color-swatch>
+```
+
+If the color coords are also specified, the (not zero) deltas from that color in its coordinates will also be shown.
+
+```html
+<color-swatch coords="L: oklch.l, C: oklch.c, H: oklch.h" vs="oklch(70% 0.1 210)" size="large">
+	oklch(70% 0.25 138)
+</color-swatch>
+```
+
 ### With slot content
 
 Before and after:
@@ -222,6 +240,7 @@ If you don’t, the `<html>` element will be used.
 | `coords` | `coords` | `string` | - | Comma-separated list of coords of the current color to be shown. |
 | `value` | `value` | `string` | - | The current value of the swatch. |
 | `size` | - | `large` | - | The size of the swatch. Currently, it is used only to make a large swatch. |
+| `vs` | `vs` | `Color` &#124; `string` | - | The second color to use when calculating the difference (delta) with the current color. |
 | `property` | `property` | `string` | - | CSS property to bind to. |
 | `scope` | `scope` | `string` | `:root` | CSS selector to use as the scope for the specified CSS property. |
 | `gamuts` | `gamuts` | `string` | `srgb, p3, rec2020: P3+, prophoto: PP` | Comma-separated list of gamuts to be used by the gamut indicator. |

From 5cfe1b5c502353ca092c2321aa14c1141f6d31ea Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Wed, 12 Jun 2024 12:23:58 +0200
Subject: [PATCH 11/23] [color-scale] Add docs on the `coords`, `deltas`, and
 `vs` attributes

---
 src/color-scale/README.md | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/src/color-scale/README.md b/src/color-scale/README.md
index 2e357f11..ff798478 100644
--- a/src/color-scale/README.md
+++ b/src/color-scale/README.md
@@ -37,6 +37,42 @@ You can only specify your core colors, and insert steps via interpolation:
 
 If you have more than 2 colors listed, this will insert steps between each pair.
 
+
+### The `coords`, `delta`, and `vs` attributes
+
+You can show any of the colors coords in _any_ color space the same way you can do it for [`<color-swatch>`](../color-swatch/#the-coords-attribute):
+
+```html
+<color-scale
+	space="oklch"
+	colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"
+	coords="L: oklch.l, C: oklch.c, H: oklch.h"
+></color-scale>
+```
+
+By specifying the `deltas` boolean attribute, you can also show deltas between the current and the previous color:
+
+```html
+<color-scale
+	space="oklch"
+	colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"
+	coords="L: oklch.l, C: oklch.c, H: oklch.h"
+	deltas
+></color-scale>
+```
+
+If you need to show the difference between every color in the scale and another color, you can specify that color via the `vs` attribute:
+
+```html
+<color-scale
+	space="oklch"
+	colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"
+	coords="L: oklch.l, C: oklch.c, H: oklch.h"
+	vs="oklch(65% 0.15 210)"
+	deltas
+></color-scale>
+```
+
 <!--
 If you want to insert interpolated colors only in specific places, you can use empty values:
 

From 58974c4ffb5e12e07638d2f4d726f62eb22afcf5 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Wed, 12 Jun 2024 18:21:55 +0200
Subject: [PATCH 12/23] Address feedback

Use `vs` without a value to opt-in deltas (from the previous color) and with a value to specify a specific color.
---
 src/color-scale/README.md      |  9 ++++-----
 src/color-scale/color-scale.js | 26 +++++++++++++-------------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/color-scale/README.md b/src/color-scale/README.md
index ff798478..d7e9d121 100644
--- a/src/color-scale/README.md
+++ b/src/color-scale/README.md
@@ -38,7 +38,7 @@ You can only specify your core colors, and insert steps via interpolation:
 If you have more than 2 colors listed, this will insert steps between each pair.
 
 
-### The `coords`, `delta`, and `vs` attributes
+### The `coords` and `vs` attributes
 
 You can show any of the colors coords in _any_ color space the same way you can do it for [`<color-swatch>`](../color-swatch/#the-coords-attribute):
 
@@ -50,18 +50,18 @@ You can show any of the colors coords in _any_ color space the same way you can
 ></color-scale>
 ```
 
-By specifying the `deltas` boolean attribute, you can also show deltas between the current and the previous color:
+By adding the `vs` attribute without a value, you can also show deltas between the current and the previous color:
 
 ```html
 <color-scale
 	space="oklch"
 	colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"
 	coords="L: oklch.l, C: oklch.c, H: oklch.h"
-	deltas
+	vs
 ></color-scale>
 ```
 
-If you need to show the difference between every color in the scale and another color, you can specify that color via the `vs` attribute:
+If you need to show the difference between every color in the scale and another color, you can specify that color as the `vs` attribute value:
 
 ```html
 <color-scale
@@ -69,7 +69,6 @@ If you need to show the difference between every color in the scale and another
 	colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"
 	coords="L: oklch.l, C: oklch.c, H: oklch.h"
 	vs="oklch(65% 0.15 210)"
-	deltas
 ></color-scale>
 ```
 
diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 2a113afd..b9e8d878 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -38,11 +38,16 @@ const Self = class ColorScale extends NudeElement {
 
 	propChangedCallback ({name, prop, detail: change}) {
 		if (name === "computedColors") {
+			if (!this.#hasVs) {
+				this.#hasVs = change.element.hasAttribute("vs");
+			}
+
 			// Re-render swatches
 			this.render();
 		}
 	}
 
+	#hasVs;
 	#swatches = [];
 
 	render () {
@@ -72,15 +77,13 @@ const Self = class ColorScale extends NudeElement {
 				swatch.coords = this.coords;
 
 				// Deltas don't make sense without coords
-				if (this.deltas) {
-					if (this.vs) {
-						// If there is a vs color, use it as the reference for the deltas
-						swatch.vs = this.vs;
-					}
-					else if (i > 0) {
-						// Otherwise, use the previous color
-						swatch.vs = colors[i - 1].color;
-					}
+				if (this.vs) {
+					// If there is a vs color, use it as the reference for the deltas
+					swatch.vs = this.vs;
+				}
+				else if (this.#hasVs && i > 0) {
+					// Otherwise, use the previous color
+					swatch.vs = colors[i - 1].color;
 				}
 			}
 			i++;
@@ -161,15 +164,12 @@ const Self = class ColorScale extends NudeElement {
 
 				return colors;
 			},
-			additionalDependencies: ["coords", "vs", "deltas"],
+			additionalDependencies: ["coords", "vs"],
 		},
 		coords: {},
 		vs: {
 			type: Color,
 		},
-		deltas: {
-			type: Boolean,
-		},
 	};
 }
 

From 84ff6d3480f2840f9209fff1659eeb0331b730ce Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Wed, 12 Jun 2024 20:01:52 +0200
Subject: [PATCH 13/23] Address feedback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Rename: `coords` → `data`
* Allow specifying `ΔΕ` algorithm (uses parameterized syntax under the hood)
* Combine coords and `ΔΕ` in one part—data
* Fix styles accordingly
* Update docs
---
 src/color-scale/README.md         | 21 +++++++++---
 src/color-scale/color-scale.js    |  8 ++---
 src/color-swatch/README.md        | 16 ++++++---
 src/color-swatch/color-swatch.css | 24 ++++++-------
 src/color-swatch/color-swatch.js  | 57 +++++++++++++++----------------
 5 files changed, 70 insertions(+), 56 deletions(-)

diff --git a/src/color-scale/README.md b/src/color-scale/README.md
index d7e9d121..fe29eac1 100644
--- a/src/color-scale/README.md
+++ b/src/color-scale/README.md
@@ -38,15 +38,15 @@ You can only specify your core colors, and insert steps via interpolation:
 If you have more than 2 colors listed, this will insert steps between each pair.
 
 
-### The `coords` and `vs` attributes
+### The `data` and `vs` attributes
 
-You can show any of the colors coords in _any_ color space the same way you can do it for [`<color-swatch>`](../color-swatch/#the-coords-attribute):
+You can show any of the colors coords in _any_ color space the same way you can do it for [`<color-swatch>`](../color-swatch/#the-data-attribute):
 
 ```html
 <color-scale
 	space="oklch"
 	colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"
-	coords="L: oklch.l, C: oklch.c, H: oklch.h"
+	data="L: oklch.l, C: oklch.c, H: oklch.h"
 ></color-scale>
 ```
 
@@ -56,7 +56,18 @@ By adding the `vs` attribute without a value, you can also show deltas between t
 <color-scale
 	space="oklch"
 	colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"
-	coords="L: oklch.l, C: oklch.c, H: oklch.h"
+	data="L: oklch.l, C: oklch.c, H: oklch.h"
+	vs
+></color-scale>
+```
+
+You can also specify an algorithm used to calculate ΔE inside the `data` attribute:
+
+```html
+<color-scale
+	space="oklch"
+	colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"
+	data="L: oklch.l, C: oklch.c, H: oklch.h, ΔE: 2000"
 	vs
 ></color-scale>
 ```
@@ -67,7 +78,7 @@ If you need to show the difference between every color in the scale and another
 <color-scale
 	space="oklch"
 	colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"
-	coords="L: oklch.l, C: oklch.c, H: oklch.h"
+	data="L: oklch.l, C: oklch.c, H: oklch.h"
 	vs="oklch(65% 0.15 210)"
 ></color-scale>
 ```
diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index b9e8d878..65ac70ba 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -73,8 +73,8 @@ const Self = class ColorScale extends NudeElement {
 
 			swatch.color = color;
 			swatch.textContent = name;
-			if (this.coords) {
-				swatch.coords = this.coords;
+			if (this.data) {
+				swatch.data = this.data;
 
 				// Deltas don't make sense without coords
 				if (this.vs) {
@@ -164,9 +164,9 @@ const Self = class ColorScale extends NudeElement {
 
 				return colors;
 			},
-			additionalDependencies: ["coords", "vs"],
+			additionalDependencies: ["data", "vs"],
 		},
-		coords: {},
+		data: {},
 		vs: {
 			type: Color,
 		},
diff --git a/src/color-swatch/README.md b/src/color-swatch/README.md
index 47bb5589..dfde26c2 100644
--- a/src/color-swatch/README.md
+++ b/src/color-swatch/README.md
@@ -102,12 +102,12 @@ future_swatch_container.append(swatch);
 </script>
 ```
 
-### The `coords` attribute
+### The `data` attribute
 
 You can show any of the color coords in _any_ color space.
 
 ```html
-<color-swatch coords="oklch.l, oklch.c, oklch.h" size="large">
+<color-swatch data="oklch.l, oklch.c, oklch.h" size="large">
 	oklch(70% 0.25 138)
 </color-swatch>
 ```
@@ -115,7 +115,7 @@ You can show any of the color coords in _any_ color space.
 By default, the coord name will be used as a coord label. Add a label before the corresponding coord, followed by the colon to change this.
 
 ```html
-<color-swatch coords="L: oklch.l, C: oklch.c, H: oklch.h" size="large">
+<color-swatch data="L: oklch.l, C: oklch.c, H: oklch.h" size="large">
 	oklch(70% 0.25 138)
 </color-swatch>
 ```
@@ -133,7 +133,15 @@ You can pass another color via the `vs` attribute to show the delta (if it is no
 If the color coords are also specified, the (not zero) deltas from that color in its coordinates will also be shown.
 
 ```html
-<color-swatch coords="L: oklch.l, C: oklch.c, H: oklch.h" vs="oklch(70% 0.1 210)" size="large">
+<color-swatch data="L: oklch.l, C: oklch.c, H: oklch.h" vs="oklch(70% 0.1 210)" size="large">
+	oklch(70% 0.25 138)
+</color-swatch>
+```
+
+You can specify an algorithm used to calculate ΔE inside the `data` attribute:
+
+```html
+<color-swatch data="L: oklch.l, C: oklch.c, H: oklch.h, ΔE: 2000" vs="oklch(70% 0.1 210)" size="large">
 	oklch(70% 0.25 138)
 </color-swatch>
 ```
diff --git a/src/color-swatch/color-swatch.css b/src/color-swatch/color-swatch.css
index 4b5a733f..eb62ad2d 100644
--- a/src/color-swatch/color-swatch.css
+++ b/src/color-swatch/color-swatch.css
@@ -51,7 +51,7 @@ slot {
 	}
 }
 
-[part="coords"], [part="deltaE"] {
+[part="data"] {
 	margin: 0;
 	display: inline-flex;
 	gap: .5em;
@@ -65,11 +65,17 @@ slot {
 	&:is(:host([size="large"]) &) {
 		display: grid;
 		grid-template-columns: subgrid;
+
+		.data {
+			display: contents;
+
+			dd:not(.deltaE, :has(~ dd)) {
+				grid-column: span 2;
+			}
+		}
 	}
-}
 
-[part="coords"] {
-	.coord {
+	.data {
 		display: flex;
 		gap: .2em;
 
@@ -85,16 +91,6 @@ slot {
 			}
 		}
 	}
-
-	&:is(:host([size="large"]) &) {
-		.coord {
-			display: contents;
-
-			dd:not(.deltaE, :has(~ dd)) {
-				grid-column: span 2;
-			}
-		}
-	}
 }
 
 #wrapper {
diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js
index 64dafe1b..79551b83 100644
--- a/src/color-swatch/color-swatch.js
+++ b/src/color-swatch/color-swatch.js
@@ -109,15 +109,23 @@ const Self = class ColorSwatch extends NudeElement {
 			this.style.setProperty("--color", colorString);
 		}
 
-		if (name === "coords" || name === "vs") {
-			if (this.coords.length) {
-				this._el.coords ??= Object.assign(document.createElement("dl"), {part: "coords"});
-				if (!this._el.coords.parentNode) {
-					this._el.colorWrapper.after(this._el.coords);
+		if (name === "data" || name === "vs") {
+			let dataHTML = [];
+			let coords = [];
+			let deltaE; // DeltaE algorithm
+
+			if (this.data.length || this.vs) {
+				this._el.data ??= Object.assign(document.createElement("dl"), {part: "data"});
+				if (!this._el.data.parentNode) {
+					this._el.colorWrapper.after(this._el.data);
 				}
 
-				let coords = [];
-				for (let coord of this.coords) {
+				coords = this.data.filter(item => !item.hasOwnProperty("ΔE"));
+				deltaE = this.data.find(item => item.hasOwnProperty("ΔE"))?.ΔE;
+			}
+
+			if (coords.length) {
+				for (let coord of coords) {
 					let [label, channel] = Object.entries(coord)[0];
 					let value = this.color.get(channel);
 
@@ -147,30 +155,21 @@ const Self = class ColorSwatch extends NudeElement {
 						html += deltaString;
 					}
 
-					coords.push(`<div class="coord">${ html }</div>`);
+					dataHTML.push(`<div class="data">${ html }</div>`);
 				}
-
-				this._el.coords.innerHTML = coords.join("\n");
 			}
-		}
 
-		if (name === "vs") {
-			if (!this.vs) {
-				this._el.deltaE?.remove();
-				this._el.deltaE = null;
-			}
-			else {
-				let value = this.color.deltaE(this.vs);
+			if (this.vs) {
+				let value = this.color.deltaE(this.vs, deltaE);
 				value = typeof value === "number" ? Number(value.toPrecision(4)) : value;
 				if (value !== 0) {
-					this._el.deltaE ??= Object.assign(document.createElement("dl"), {part: "deltaE"});
-					if (!this._el.deltaE.parentNode) {
-						(this._el.coords ?? this._el.colorWrapper).after(this._el.deltaE);
-					}
-
-					this._el.deltaE.innerHTML = `<dt>ΔE</dt><dd>${ value }</dd>`;
+					dataHTML.push(`<div class="data"><dt></dt><dd>${ value }</dd></div>`);
 				}
 			}
+
+			if (dataHTML.length) {
+				this._el.data.innerHTML = dataHTML.join("\n");
+			}
 		}
 	}
 
@@ -190,7 +189,7 @@ const Self = class ColorSwatch extends NudeElement {
 			},
 			reflect: {
 				from: "color",
-			}
+			},
 		},
 		color: {
 			type: Color,
@@ -206,7 +205,7 @@ const Self = class ColorSwatch extends NudeElement {
 			},
 			reflect: false,
 		},
-		coords: {
+		data: {
 			type: {
 				is: Array,
 				values: {
@@ -224,7 +223,7 @@ const Self = class ColorSwatch extends NudeElement {
 			type: Color,
 			dependencies: ["color"],
 		},
-	}
+	};
 
 	static events = {
 		colorchange: {
@@ -234,8 +233,8 @@ const Self = class ColorSwatch extends NudeElement {
 			propchange: "value",
 		},
 	};
-}
+};
 
 customElements.define(Self.tagName, Self);
 
-export default Self;
\ No newline at end of file
+export default Self;

From 6746cd4338054005f4ceb8d395f55290713fa4fe Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Wed, 12 Jun 2024 20:03:58 +0200
Subject: [PATCH 14/23] Oops

---
 src/color-swatch/color-swatch.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js
index 79551b83..682105d8 100644
--- a/src/color-swatch/color-swatch.js
+++ b/src/color-swatch/color-swatch.js
@@ -163,7 +163,7 @@ const Self = class ColorSwatch extends NudeElement {
 				let value = this.color.deltaE(this.vs, deltaE);
 				value = typeof value === "number" ? Number(value.toPrecision(4)) : value;
 				if (value !== 0) {
-					dataHTML.push(`<div class="data"><dt></dt><dd>${ value }</dd></div>`);
+					dataHTML.push(`<div class="data"><dt>ΔE</dt><dd>${ value }</dd></div>`);
 				}
 			}
 

From bdc2ac9d616cc375758e3fe1fd95c89f3980f970 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Wed, 12 Jun 2024 22:20:43 +0200
Subject: [PATCH 15/23] =?UTF-8?q?Add=20links=20to=20the=20page=20with=20?=
 =?UTF-8?q?=CE=94E=20algorithms?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/color-scale/README.md  | 2 +-
 src/color-swatch/README.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/color-scale/README.md b/src/color-scale/README.md
index fe29eac1..77ade1a5 100644
--- a/src/color-scale/README.md
+++ b/src/color-scale/README.md
@@ -61,7 +61,7 @@ By adding the `vs` attribute without a value, you can also show deltas between t
 ></color-scale>
 ```
 
-You can also specify an algorithm used to calculate ΔE inside the `data` attribute:
+You can also specify [an algorithm used to calculate ΔE](https://colorjs.io/docs/color-difference#delta-e-e) inside the `data` attribute:
 
 ```html
 <color-scale
diff --git a/src/color-swatch/README.md b/src/color-swatch/README.md
index dfde26c2..da408880 100644
--- a/src/color-swatch/README.md
+++ b/src/color-swatch/README.md
@@ -138,7 +138,7 @@ If the color coords are also specified, the (not zero) deltas from that color in
 </color-swatch>
 ```
 
-You can specify an algorithm used to calculate ΔE inside the `data` attribute:
+You can specify [an algorithm used to calculate ΔE](https://colorjs.io/docs/color-difference#delta-e-e) inside the `data` attribute:
 
 ```html
 <color-swatch data="L: oklch.l, C: oklch.c, H: oklch.h, ΔE: 2000" vs="oklch(70% 0.1 210)" size="large">

From 43fb65b04e307416f31746d35438c6bb496ab3cb Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Wed, 12 Jun 2024 22:23:36 +0200
Subject: [PATCH 16/23] Update the docs

---
 src/color-swatch/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/color-swatch/README.md b/src/color-swatch/README.md
index da408880..98b472d9 100644
--- a/src/color-swatch/README.md
+++ b/src/color-swatch/README.md
@@ -245,7 +245,7 @@ If you don’t, the `<html>` element will be used.
 | Attribute | Property | Property type | Default value | Description |
 |-----------|----------|---------------|---------------|-------------|
 | `color` | `color` | `Color` &#124; `string` | - | The current color value. |
-| `coords` | `coords` | `string` | - | Comma-separated list of coords of the current color to be shown. |
+| `data` | `data` | `string` | - | Comma-separated list of coords of the current color to be shown and (optionally) an algorithm algorithm used to calculate ΔE. |
 | `value` | `value` | `string` | - | The current value of the swatch. |
 | `size` | - | `large` | - | The size of the swatch. Currently, it is used only to make a large swatch. |
 | `vs` | `vs` | `Color` &#124; `string` | - | The second color to use when calculating the difference (delta) with the current color. |

From d278303f805521bb535a00833f58ce6d12bb01a1 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Wed, 12 Jun 2024 23:19:22 +0200
Subject: [PATCH 17/23] Manually calculate deltas

We can't use `deltas()` yet. It's not in any released version of Color.js.
---
 src/color-swatch/color-swatch.js | 41 +++++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js
index 682105d8..9b21202e 100644
--- a/src/color-swatch/color-swatch.js
+++ b/src/color-swatch/color-swatch.js
@@ -130,22 +130,41 @@ const Self = class ColorSwatch extends NudeElement {
 					let value = this.color.get(channel);
 
 					let deltaString;
-					if (typeof value === "number" && this.vs) {
-						let {space, index} = Color.Space.resolveCoord(channel);
-						let deltas = this.color.deltas(this.vs, {space}).coords;
+					if (this.vs) {
+						let vsValue = this.vs.get(channel);
 
-						let delta = deltas[index];
-						if (typeof delta === "number" && delta !== 0) {
+						let hasDelta = typeof value === "number" && !Number.isNaN(value) &&
+						               typeof vsValue === "number" && !Number.isNaN(vsValue);
+						if (hasDelta) {
+							let delta;
+
+							let {space, index} = Color.Space.resolveCoord(channel);
 							let spaceCoord = Object.values(space.coords)[index];
+
 							let isAngle = spaceCoord.type === "angle";
-							if (!isAngle) {
-								delta = delta / value * 100;
+							if (isAngle) {
+								// Constrain angles (shorter arc)
+								[value, vsValue] = [value, vsValue].map(v => ((v % 360) + 360) % 360);
+								let angleDiff = vsValue - value;
+								if (angleDiff > 180) {
+									value += 360;
+								}
+								else if (angleDiff < -180) {
+									vsValue += 360;
+								}
+
+								delta = value - vsValue;
+							}
+							else {
+								delta = (value - vsValue) / value * 100;
 							}
-							delta = Number(delta.toPrecision(isAngle ? 4 : 2));
 
-							let sign = delta > 0 ? "+" : "";
-							let className = delta > 0 ? "positive" : "negative";
-							deltaString = `<dd class="deltaE ${ className }">(${ sign }${ delta }${ !isAngle ? "%" : ""})</dd>`;
+							delta = Number(delta.toPrecision(isAngle ? 4 : 2));
+							if (delta !== 0) {
+								let sign = delta > 0 ? "+" : "";
+								let className = delta > 0 ? "positive" : "negative";
+								deltaString = `<dd class="deltaE ${ className }">(${ sign }${ delta }${ !isAngle ? "%" : ""})</dd>`;
+							}
 						}
 					}
 

From 89fdb9216c50a90c64e02a690a98808c4fa2c231 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 13 Jun 2024 00:07:12 +0200
Subject: [PATCH 18/23] Move to a more appropriate place

---
 src/color-scale/color-scale.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 65ac70ba..b344ac1a 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -21,6 +21,8 @@ const Self = class ColorScale extends NudeElement {
 			slot: this.shadowRoot.querySelector("slot"),
 			swatches: this.shadowRoot.getElementById("swatches"),
 		};
+
+		this.#hasVs = this.hasAttribute("vs");
 	}
 
 	connectedCallback() {
@@ -38,10 +40,6 @@ const Self = class ColorScale extends NudeElement {
 
 	propChangedCallback ({name, prop, detail: change}) {
 		if (name === "computedColors") {
-			if (!this.#hasVs) {
-				this.#hasVs = change.element.hasAttribute("vs");
-			}
-
 			// Re-render swatches
 			this.render();
 		}

From fdcfb61df5c77b07896033ee445cd4843ec2c043 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Mon, 17 Jun 2024 13:11:13 +0200
Subject: [PATCH 19/23] Leftovers from merging the main branch

---
 src/color-swatch/color-swatch.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js
index a3143de1..d932ac71 100644
--- a/src/color-swatch/color-swatch.js
+++ b/src/color-swatch/color-swatch.js
@@ -124,8 +124,8 @@ const Self = class ColorSwatch extends NudeElement {
 					this._el.colorWrapper.after(this._el.info);
 				}
 
-				coords = this.data.filter(item => !item.hasOwnProperty("ΔE"));
-				deltaE = this.data.find(item => item.hasOwnProperty("ΔE"))?.ΔE;
+				coords = this.info.filter(item => !item.hasOwnProperty("ΔE"));
+				deltaE = this.info.find(item => item.hasOwnProperty("ΔE"))?.ΔE;
 			}
 
 			if (coords.length) {
@@ -191,7 +191,7 @@ const Self = class ColorSwatch extends NudeElement {
 			}
 
 			if (dataHTML.length) {
-				this._el.data.innerHTML = dataHTML.join("\n");
+				this._el.info.innerHTML = dataHTML.join("\n");
 			}
 		}
 	}

From 9482bcf1ea1ea0980e38deccdfe7c99ee0d557cc Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Mon, 17 Jun 2024 14:16:05 +0200
Subject: [PATCH 20/23] Add support for deltaE and contrast

---
 src/color-swatch/color-swatch.css |  4 +--
 src/color-swatch/color-swatch.js  | 55 +++++++++++++++++++++++--------
 2 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/src/color-swatch/color-swatch.css b/src/color-swatch/color-swatch.css
index e62a78c4..4de7c750 100644
--- a/src/color-swatch/color-swatch.css
+++ b/src/color-swatch/color-swatch.css
@@ -79,7 +79,7 @@ slot {
 		display: grid;
 		grid-template-columns: subgrid;
 
-		.data {
+		.info {
 			display: contents;
 
 			dd:not(.deltaE, :has(~ dd)) {
@@ -88,7 +88,7 @@ slot {
 		}
 	}
 
-	.data {
+	.info {
 		display: flex;
 		gap: .2em;
 
diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js
index d932ac71..222ea7a5 100644
--- a/src/color-swatch/color-swatch.js
+++ b/src/color-swatch/color-swatch.js
@@ -114,9 +114,9 @@ const Self = class ColorSwatch extends NudeElement {
 		}
 
 		if (name === "info" || name === "vs") {
-			let dataHTML = [];
+			let infoHTML = [];
 			let coords = [];
-			let deltaE; // DeltaE algorithm
+			let other = []; // DeltaE and contrast
 
 			if (this.info.length || this.vs) {
 				this._el.info ??= Object.assign(document.createElement("dl"), {part: "info"});
@@ -124,13 +124,28 @@ const Self = class ColorSwatch extends NudeElement {
 					this._el.colorWrapper.after(this._el.info);
 				}
 
-				coords = this.info.filter(item => !item.hasOwnProperty("ΔE"));
-				deltaE = this.info.find(item => item.hasOwnProperty("ΔE"))?.ΔE;
+				for (let item of this.info) {
+					let [label, data] = Object.entries(item)[0];
+					if (label === "deltaE" || label === "contrast") {
+						let method = label;
+						let algorithm = data.replace(/(^deltaE)|(\s+contrast$)/, "");
+						label = algorithm;
+
+						if (method === "deltaE") {
+							label = "ΔE " + label;
+						}
+
+						other.push({method, label, algorithm});
+					}
+					else {
+						// Color coord
+						coords.push([label, data]);
+					}
+				}
 			}
 
 			if (coords.length) {
-				for (let coord of coords) {
-					let [label, channel] = Object.entries(coord)[0];
+				for (let [label, channel] of coords) {
 					let value = this.color.get(channel);
 
 					let deltaString;
@@ -178,20 +193,22 @@ const Self = class ColorSwatch extends NudeElement {
 						html += deltaString;
 					}
 
-					dataHTML.push(`<div class="data">${ html }</div>`);
+					infoHTML.push(`<div class="info">${ html }</div>`);
 				}
 			}
 
 			if (this.vs) {
-				let value = this.color.deltaE(this.vs, deltaE);
-				value = typeof value === "number" ? Number(value.toPrecision(4)) : value;
-				if (value !== 0) {
-					dataHTML.push(`<div class="data"><dt>ΔE</dt><dd>${ value }</dd></div>`);
+				for (let {label, algorithm, method} of other) {
+					if (algorithm) {
+						let value = this.color[method](this.vs, algorithm);
+						value = typeof value === "number" ? Number(value.toPrecision(4)) : value;
+						infoHTML.push(`<div class="info"><dt>${ label ?? algorithm }</dt><dd>${ value }</dd></div>`);
+					}
 				}
 			}
 
-			if (dataHTML.length) {
-				this._el.info.innerHTML = dataHTML.join("\n");
+			if (infoHTML.length) {
+				this._el.info.innerHTML = infoHTML.join("\n");
 			}
 		}
 	}
@@ -233,7 +250,17 @@ const Self = class ColorSwatch extends NudeElement {
 				is: Array,
 				values: {
 					is: Object,
-					defaultKey: (coord, i) => Color.Space.resolveCoord(coord)?.name,
+					defaultKey: (coord, i) => {
+						if (coord.includes(".")) {
+							return Color.Space.resolveCoord(coord)?.name;
+						}
+						else if (coord.startsWith("deltaE")) {
+							return "deltaE";
+						}
+						else if (coord.endsWith("contrast")) {
+							return "contrast";
+						}
+					},
 				},
 			},
 			default: [],

From de58fc42b2e5e563c9214d27a212ec1e6f555a91 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Mon, 17 Jun 2024 14:21:26 +0200
Subject: [PATCH 21/23] Fix comment

---
 src/color-scale/color-scale.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 7c9c5dcf..d2237925 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -75,7 +75,7 @@ const Self = class ColorScale extends NudeElement {
 			if (this.info) {
 				swatch.info = this.info;
 
-				// Deltas don't make sense without coords
+				// Deltas and contrast don't make sense without coords
 				if (this.vs) {
 					// If there is a vs color, use it as the reference for the deltas
 					swatch.vs = this.vs;

From 5dfb4a6a19e3350851d7f2b55759c4284cbaae7a Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Mon, 17 Jun 2024 14:23:41 +0200
Subject: [PATCH 22/23] Update README.md

---
 src/color-swatch/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/color-swatch/README.md b/src/color-swatch/README.md
index d80d9b3d..ff5600b1 100644
--- a/src/color-swatch/README.md
+++ b/src/color-swatch/README.md
@@ -257,7 +257,7 @@ If you don’t, the `<html>` element will be used.
 | `info` | `info` | `string` | - | Comma-separated list of coords of the current color to be shown. |
 | `value` | `value` | `string` | - | The current value of the swatch. |
 | `size` | - | `large` | - | The size of the swatch. Currently, it is used only to make a large swatch. |
-| `vs` | `vs` | `Color` &#124; `string` | - | The second color to use when calculating the difference (delta) with the current color. |
+| `vs` | `vs` | `Color` &#124; `string` | - | The second color to use when calculating the difference (delta) and contrast with the current color. |
 | `property` | `property` | `string` | - | CSS property to bind to. |
 | `scope` | `scope` | `string` | `:root` | CSS selector to use as the scope for the specified CSS property. |
 | `gamuts` | `gamuts` | `string` | `srgb, p3, rec2020: P3+, prophoto: PP` | Comma-separated list of gamuts to be used by the gamut indicator. |

From 09f413684d43fc5f94b0975f7c120d1457069ceb Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Mon, 17 Jun 2024 19:40:27 +0200
Subject: [PATCH 23/23] Update API

- Remove `#hasVs`
- Use custom `parse()`
- Add support for `previous` and `next` keywords
---
 src/color-scale/color-scale.js | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index e536d297..402a3f43 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -23,8 +23,6 @@ const Self = class ColorScale extends NudeElement {
 			slot: this.shadowRoot.querySelector("slot"),
 			swatches: this.shadowRoot.getElementById("swatches"),
 		};
-
-		this.#hasVs = this.hasAttribute("vs");
 	}
 
 	connectedCallback() {
@@ -47,7 +45,6 @@ const Self = class ColorScale extends NudeElement {
 		}
 	}
 
-	#hasVs;
 	#swatches = [];
 
 	render () {
@@ -77,15 +74,18 @@ const Self = class ColorScale extends NudeElement {
 			if (this.info) {
 				swatch.info = this.info;
 
-				// Deltas and contrast don't make sense without coords
-				if (this.vs) {
+				if (this.vs && !["previous", "next"].includes(this.vs)) {
 					// If there is a vs color, use it as the reference for the deltas
 					swatch.vs = this.vs;
 				}
-				else if (this.#hasVs && i > 0) {
+				else if (this.vs === "previous" && i > 0) {
 					// Otherwise, use the previous color
 					swatch.vs = colors[i - 1].color;
 				}
+				else if (this.vs === "next" && i < colors.length - 1) {
+					// Or the next color
+					swatch.vs = colors[i + 1].color;
+				}
 			}
 			i++;
 		}
@@ -169,7 +169,13 @@ const Self = class ColorScale extends NudeElement {
 		},
 		info: {},
 		vs: {
-			type: Color,
+			parse (value) {
+				if (value instanceof Color || value === "previous" || value === "next" || value === null || value === undefined) {
+					return value;
+				}
+
+				return new Color(value);
+			},
 		},
 	};
 }