From a9b7498c59b09304d60d4bd991fa660d67c0cd9a Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Wed, 20 Nov 2024 15:27:48 +0100
Subject: [PATCH 01/62] Basic support for the editable prop

---
 src/color-scale/color-scale.js   | 76 +++++++++++++++++++++++++++++++-
 src/color-swatch/color-swatch.js |  2 +-
 2 files changed, 75 insertions(+), 3 deletions(-)

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index e874d394..bbcb9b14 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -21,21 +21,43 @@ const Self = class ColorScale extends ColorElement {
 
 	connectedCallback () {
 		super.connectedCallback?.();
+		this._el.swatches.addEventListener("input", this, {capture: true});
 		this._el.swatches.addEventListener("colorchange", this, {capture: true});
 	}
 
 	disconnectedCallback () {
 		this.#swatches = [];
+		this._el.swatches.removeEventListener("input", this, {capture: true});
 		this._el.swatches.removeEventListener("colorchange", this, {capture: true});
 	}
 
 	handleEvent (event) {
+		if (event.type === "input" && (!this.editable?.name || !event.target.matches("input[slot=before]"))) {
+			return;
+		}
+
+		let colors = Object.entries(this.colors);
+		let swatchIndex = this.#swatches.indexOf(event.target.closest("color-swatch"));
+		if (swatchIndex > -1) {
+			if (event.type === "colorchange") {
+				colors[swatchIndex][1] = event.target.color;
+			}
+			else {
+				// Color name changed
+				colors[swatchIndex][0] = event.target.value;
+			}
+
+			this.colors = Object.fromEntries(colors);
+		}
+
 		this.dispatchEvent(new event.constructor(event.type, {...event}));
 	}
 
 	propChangedCallback ({name, prop, detail: change}) {
-		if (name === "computedColors") {
+		if ((name === "computedColors" && !this.editable?.name && !this.editable?.color) || name === "editable") {
 			// Re-render swatches
+			// Only if nothing is being edited, otherwise the input would be lost
+			// or, e.g., "red" would be converted to "rgb(100%, 0%, 0%)" right after the typing is done
 			this.render();
 		}
 	}
@@ -65,7 +87,26 @@ const Self = class ColorScale extends ColorElement {
 			}
 
 			swatch.color = color;
-			swatch.label = name;
+			if (this.editable?.name || this.editable?.color) {
+				let html = "";
+
+				if (this.editable.name) {
+					html += `<input slot="before" value="${ name }" />`;
+				}
+				else {
+					html += `<span slot="before">${ name }</span>`;
+				}
+
+				if (this.editable.color) {
+					html += `<input value="${ color }" />`;
+				}
+
+				swatch.innerHTML = html;
+			}
+			else {
+				swatch.textContent = name;
+			}
+
 			if (this.info) {
 				swatch.info = this.info;
 			}
@@ -149,6 +190,37 @@ const Self = class ColorScale extends ColorElement {
 			},
 			additionalDependencies: ["info"],
 		},
+		editable: {
+			parse (value) {
+				if (value === undefined || value === null || value === false || value === "false") {
+					return;
+				}
+
+				if (value === "" || value === true || value === "true") {
+					// Boolean attribute
+					return {
+						name: true,
+						color: true,
+					};
+				}
+
+				if (typeof value === "string") {
+					// Convert to object
+					let entries = value.split(/\s*[,\s]\s*/).map(key => [key.trim(), true]);
+					return Object.fromEntries(entries);
+				}
+
+				if (typeof value === "object") {
+					return value;
+				}
+
+				console.warn(`The specified value "${ value }" cannot be used as a value of the "editable" property.`);
+				return;
+			},
+			reflect: {
+				from: true,
+			},
+		},
 		info: {},
 	};
 
diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js
index 10694d6d..b8d2d669 100644
--- a/src/color-swatch/color-swatch.js
+++ b/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:not([slot])");
 
 		this.static = !input;
 

From efcf55cbd71ec38f09bef5475ddd3e3df8767601 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Wed, 20 Nov 2024 16:33:45 +0100
Subject: [PATCH 02/62] Allow add colors

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

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index bbcb9b14..58cdab25 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -59,6 +59,42 @@ const Self = class ColorScale extends ColorElement {
 			// Only if nothing is being edited, otherwise the input would be lost
 			// or, e.g., "red" would be converted to "rgb(100%, 0%, 0%)" right after the typing is done
 			this.render();
+
+			if (name === "editable") {
+				let addButton = this._el.addButton;
+				if (this.editable?.color) {
+					if (!addButton) {
+						addButton = this._el.addButton = Object.assign(document.createElement("button"), {
+							id: "add-button",
+							part: "add-button",
+							textContent: "Add color",
+						});
+
+						addButton.addEventListener("click", evt => {
+							let {name, color} = this.defaultColor?.() ?? {};
+							[name, color] = [name ?? "New color", color ?? this.computedColors.at(-1).color];
+
+							if (this.colors[name]) {
+								// Name already exists
+								// Append a number to the name
+								let i = 1;
+								while (this.colors[`${ name } ${ i }`]) {
+									i++;
+								}
+								name = `${ name } ${ i }`;
+							}
+
+							this.colors = {...this.colors, [name]: color};
+							this.render();
+						});
+					}
+
+					this._el.swatches.after(addButton);
+				}
+				else {
+					addButton?.remove();
+				}
+			}
 		}
 	}
 
@@ -221,6 +257,12 @@ const Self = class ColorScale extends ColorElement {
 				from: true,
 			},
 		},
+		defaultColor: {
+			type: {
+				is: Function,
+			},
+			reflect: false,
+		},
 		info: {},
 	};
 

From 5a1998a7d1eacdfed63f6e831c0d4a674049c25a Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Wed, 20 Nov 2024 17:24:34 +0100
Subject: [PATCH 03/62] Allow remove colors

---
 src/color-scale/color-scale.js | 74 ++++++++++++++++++++--------------
 1 file changed, 44 insertions(+), 30 deletions(-)

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 58cdab25..dd061cfd 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -23,12 +23,14 @@ const Self = class ColorScale extends ColorElement {
 		super.connectedCallback?.();
 		this._el.swatches.addEventListener("input", this, {capture: true});
 		this._el.swatches.addEventListener("colorchange", this, {capture: true});
+		this._el.swatches.addEventListener("click", this, {capture: true});
 	}
 
 	disconnectedCallback () {
 		this.#swatches = [];
 		this._el.swatches.removeEventListener("input", this, {capture: true});
 		this._el.swatches.removeEventListener("colorchange", this, {capture: true});
+		this._el.swatches.removeEventListener("click", this, {capture: true});
 	}
 
 	handleEvent (event) {
@@ -42,10 +44,16 @@ const Self = class ColorScale extends ColorElement {
 			if (event.type === "colorchange") {
 				colors[swatchIndex][1] = event.target.color;
 			}
-			else {
+			else if (event.type === "input") {
 				// Color name changed
 				colors[swatchIndex][0] = event.target.value;
 			}
+			else if (event.type === "click" && event.target.matches("[part=remove-button]")) {
+				colors.splice(swatchIndex, 1);
+				this.colors = Object.fromEntries(colors);
+				this.render();
+				return;
+			}
 
 			this.colors = Object.fromEntries(colors);
 		}
@@ -54,47 +62,52 @@ const Self = class ColorScale extends ColorElement {
 	}
 
 	propChangedCallback ({name, prop, detail: change}) {
-		if ((name === "computedColors" && !this.editable?.name && !this.editable?.color) || name === "editable") {
+		if ((name === "computedColors" && !this.editable?.name && !this.editable?.color)) {
 			// Re-render swatches
 			// Only if nothing is being edited, otherwise the input would be lost
 			// or, e.g., "red" would be converted to "rgb(100%, 0%, 0%)" right after the typing is done
 			this.render();
+		}
 
-			if (name === "editable") {
-				let addButton = this._el.addButton;
-				if (this.editable?.color) {
-					if (!addButton) {
-						addButton = this._el.addButton = Object.assign(document.createElement("button"), {
-							id: "add-button",
-							part: "add-button",
-							textContent: "Add color",
-						});
-
-						addButton.addEventListener("click", evt => {
-							let {name, color} = this.defaultColor?.() ?? {};
-							[name, color] = [name ?? "New color", color ?? this.computedColors.at(-1).color];
-
-							if (this.colors[name]) {
-								// Name already exists
-								// Append a number to the name
-								let i = 1;
-								while (this.colors[`${ name } ${ i }`]) {
-									i++;
-								}
-								name = `${ name } ${ i }`;
+		if (name === "editable") {
+			let addButton = this._el.addButton;
+			if (this.editable?.color) {
+				if (!addButton) {
+					addButton = this._el.addButton = Object.assign(document.createElement("button"), {
+						id: "add-button",
+						part: "add-button",
+						textContent: "Add color",
+					});
+
+					addButton.addEventListener("click", evt => {
+						let {name, color} = this.defaultColor?.() ?? {};
+						[name, color] = [name ?? "New color", color ?? this.computedColors.at(-1)?.color ?? new Self.Color("#f06").to(this.space)];
+
+						if (this.colors[name]) {
+							// Name already exists
+							// Append a number to the name
+							let i = 1;
+							while (this.colors[`${ name } ${ i }`]) {
+								i++;
 							}
+							name = `${ name } ${ i }`;
+						}
 
-							this.colors = {...this.colors, [name]: color};
-							this.render();
-						});
-					}
+						this.colors = {...this.colors, [name]: color};
+						this.render();
+					});
 
 					this._el.swatches.after(addButton);
 				}
 				else {
-					addButton?.remove();
+					addButton.style.removeProperty("display");
 				}
 			}
+			else {
+				addButton?.style.setProperty("display", "none");
+			}
+
+			this.render();
 		}
 	}
 
@@ -118,7 +131,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, remove-button");
 				newSwatches.push(swatch);
 			}
 
@@ -135,6 +148,7 @@ const Self = class ColorScale extends ColorElement {
 
 				if (this.editable.color) {
 					html += `<input value="${ color }" />`;
+					html += `<button slot="swatch-content" part="remove-button" title="Remove color">❌</button>`;
 				}
 
 				swatch.innerHTML = html;

From 283445ee1c2faf7904a279a47666f03cfc6c854f Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Wed, 20 Nov 2024 17:36:04 +0100
Subject: [PATCH 04/62] Improve UX

---
 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 dd061cfd..680c4fc3 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -95,6 +95,12 @@ const Self = class ColorScale extends ColorElement {
 
 						this.colors = {...this.colors, [name]: color};
 						this.render();
+
+						// Focus the new color input and select its content
+						let swatch = this._el.swatches.lastElementChild;
+						let input = swatch.querySelector("input:not([slot]");
+						input.focus();
+						input.select();
 					});
 
 					this._el.swatches.after(addButton);

From f08d70c45e3027e46a050824f90966478093a120 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Wed, 20 Nov 2024 17:36:21 +0100
Subject: [PATCH 05/62] Add an example

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

diff --git a/src/color-scale/README.md b/src/color-scale/README.md
index b4e746c3..15a854c2 100644
--- a/src/color-scale/README.md
+++ b/src/color-scale/README.md
@@ -67,6 +67,15 @@ You can also create compact color scales, by simply setting `--details-style: co
 
 Issue: How to make them focusable??
 
+### The `editable` attribute
+
+```html
+<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>
+```
+
 <!--
 If you want to insert interpolated colors only in specific places, you can use empty values:
 

From e5668ecec68f537b0873305711aa3b0027d27ede Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Wed, 20 Nov 2024 17:38:15 +0100
Subject: [PATCH 06/62] Convert the new color to the current color space

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

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 680c4fc3..8d0170e4 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -81,7 +81,7 @@ const Self = class ColorScale extends ColorElement {
 
 					addButton.addEventListener("click", evt => {
 						let {name, color} = this.defaultColor?.() ?? {};
-						[name, color] = [name ?? "New color", color ?? this.computedColors.at(-1)?.color ?? new Self.Color("#f06").to(this.space)];
+						[name, color] = [name ?? "New color", color ?? this.computedColors.at(-1)?.color ?? new Self.Color("#f06")];
 
 						if (this.colors[name]) {
 							// Name already exists
@@ -93,7 +93,7 @@ const Self = class ColorScale extends ColorElement {
 							name = `${ name } ${ i }`;
 						}
 
-						this.colors = {...this.colors, [name]: color};
+						this.colors = {...this.colors, [name]: color.to(this.space)};
 						this.render();
 
 						// Focus the new color input and select its content

From a2d93eb94f80570f3f98c1a6d975186472a4a8a3 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Wed, 20 Nov 2024 18:08:44 +0100
Subject: [PATCH 07/62] Remove extra braces

---
 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 8d0170e4..4c9ce7c1 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -62,7 +62,7 @@ const Self = class ColorScale extends ColorElement {
 	}
 
 	propChangedCallback ({name, prop, detail: change}) {
-		if ((name === "computedColors" && !this.editable?.name && !this.editable?.color)) {
+		if (name === "computedColors" && !this.editable?.name && !this.editable?.color) {
 			// Re-render swatches
 			// Only if nothing is being edited, otherwise the input would be lost
 			// or, e.g., "red" would be converted to "rgb(100%, 0%, 0%)" right after the typing is done

From 240a430ffd91464e68acc7b0a6014ef037eb3db9 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Wed, 20 Nov 2024 19:31:28 +0100
Subject: [PATCH 08/62] Some may define boolean attributes using their name as
 the value

---
 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 4c9ce7c1..1be1435c 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -252,7 +252,7 @@ const Self = class ColorScale extends ColorElement {
 					return;
 				}
 
-				if (value === "" || value === true || value === "true") {
+				if (value === "" || value === "editable" || value === true || value === "true") {
 					// Boolean attribute
 					return {
 						name: true,

From 163cb1e91530c2f8e381a065c93fca7c3f413769 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Wed, 20 Nov 2024 20:05:37 +0100
Subject: [PATCH 09/62] Address feedback

- Add the "Add color" slotted button
- Abstract away the add color functionality into the `addColor()` method
---
 src/color-scale/color-scale.js | 94 ++++++++++++++++++----------------
 1 file changed, 51 insertions(+), 43 deletions(-)

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 1be1435c..7ba1db7f 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -8,6 +8,9 @@ const Self = class ColorScale extends ColorElement {
 	static shadowStyle = true;
 	static shadowTemplate = `
 		<div id=swatches></div>
+		<slot name="add-button">
+			<button id="add-button" part="add-button">Add color</button>
+		</slot>
 		<slot></slot>`;
 
 	constructor () {
@@ -16,6 +19,11 @@ const Self = class ColorScale extends ColorElement {
 		this._el = {
 			slot: this.shadowRoot.querySelector("slot"),
 			swatches: this.shadowRoot.getElementById("swatches"),
+			add_button: this.shadowRoot.getElementById("add-button"),
+		};
+
+		this._slots = {
+			add_button: this.shadowRoot.querySelector("slot[name=add-button]"),
 		};
 	}
 
@@ -24,6 +32,7 @@ const Self = class ColorScale extends ColorElement {
 		this._el.swatches.addEventListener("input", this, {capture: true});
 		this._el.swatches.addEventListener("colorchange", this, {capture: true});
 		this._el.swatches.addEventListener("click", this, {capture: true});
+		this._slots.add_button.addEventListener("click", this);
 	}
 
 	disconnectedCallback () {
@@ -31,24 +40,32 @@ const Self = class ColorScale extends ColorElement {
 		this._el.swatches.removeEventListener("input", this, {capture: true});
 		this._el.swatches.removeEventListener("colorchange", this, {capture: true});
 		this._el.swatches.removeEventListener("click", this, {capture: true});
+		this._slots.add_button.removeEventListener("click", this);
 	}
 
 	handleEvent (event) {
-		if (event.type === "input" && (!this.editable?.name || !event.target.matches("input[slot=before]"))) {
+		let source = event.target;
+
+		if (event.type === "input" && (!this.editable?.name || !source.matches("input[slot=before]"))) {
+			return;
+		}
+
+		if (source === this._el.add_button || this._slots.add_button.assignedElements().includes(source)) {
+			this.addColor();
 			return;
 		}
 
 		let colors = Object.entries(this.colors);
-		let swatchIndex = this.#swatches.indexOf(event.target.closest("color-swatch"));
+		let swatchIndex = this.#swatches.indexOf(source.closest("color-swatch"));
 		if (swatchIndex > -1) {
 			if (event.type === "colorchange") {
-				colors[swatchIndex][1] = event.target.color;
+				colors[swatchIndex][1] = source.color;
 			}
 			else if (event.type === "input") {
 				// Color name changed
-				colors[swatchIndex][0] = event.target.value;
+				colors[swatchIndex][0] = source.value;
 			}
-			else if (event.type === "click" && event.target.matches("[part=remove-button]")) {
+			else if (event.type === "click" && source.matches("[part=remove-button]")) {
 				colors.splice(swatchIndex, 1);
 				this.colors = Object.fromEntries(colors);
 				this.render();
@@ -70,47 +87,11 @@ const Self = class ColorScale extends ColorElement {
 		}
 
 		if (name === "editable") {
-			let addButton = this._el.addButton;
 			if (this.editable?.color) {
-				if (!addButton) {
-					addButton = this._el.addButton = Object.assign(document.createElement("button"), {
-						id: "add-button",
-						part: "add-button",
-						textContent: "Add color",
-					});
-
-					addButton.addEventListener("click", evt => {
-						let {name, color} = this.defaultColor?.() ?? {};
-						[name, color] = [name ?? "New color", color ?? this.computedColors.at(-1)?.color ?? new Self.Color("#f06")];
-
-						if (this.colors[name]) {
-							// Name already exists
-							// Append a number to the name
-							let i = 1;
-							while (this.colors[`${ name } ${ i }`]) {
-								i++;
-							}
-							name = `${ name } ${ i }`;
-						}
-
-						this.colors = {...this.colors, [name]: color.to(this.space)};
-						this.render();
-
-						// Focus the new color input and select its content
-						let swatch = this._el.swatches.lastElementChild;
-						let input = swatch.querySelector("input:not([slot]");
-						input.focus();
-						input.select();
-					});
-
-					this._el.swatches.after(addButton);
-				}
-				else {
-					addButton.style.removeProperty("display");
-				}
+				this._el.add_button.style.removeProperty("display");
 			}
 			else {
-				addButton?.style.setProperty("display", "none");
+				this._el.add_button.style.setProperty("display", "none");
 			}
 
 			this.render();
@@ -119,6 +100,33 @@ const Self = class ColorScale extends ColorElement {
 
 	#swatches = [];
 
+	addColor () {
+		let {name, color} = this.defaultColor?.() ?? {};
+		name ??= "New color";
+		color ??= this.computedColors.at(-1)?.color ?? new Self.Color("#f06");
+
+		if (this.colors[name]) {
+			// Name already exists
+			// Append a number to the name
+			let i = 1;
+			while (this.colors[`${ name } ${ i }`]) {
+				i++;
+			}
+			name = `${ name } ${ i }`;
+		}
+
+		this.colors = {...this.colors, [name]: color.to(this.space)};
+		this.render();
+
+		if (this.editable?.color) {
+			// Focus the new color input and select its content
+			let swatch = this._el.swatches.lastElementChild;
+			let input = swatch.querySelector("input:not([slot]");
+			input.focus();
+			input.select();
+		}
+	}
+
 	render () {
 		let colors = this.computedColors;
 

From 15ab8fd5cb163768030bdd3dfc84d3f94c269bea Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Wed, 20 Nov 2024 22:35:25 +0100
Subject: [PATCH 10/62] Get rid of the wrong actions

---
 src/color-scale/color-scale.js | 26 ++++++++------------------
 1 file changed, 8 insertions(+), 18 deletions(-)

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 7ba1db7f..49ecbe79 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -55,24 +55,14 @@ const Self = class ColorScale extends ColorElement {
 			return;
 		}
 
-		let colors = Object.entries(this.colors);
-		let swatchIndex = this.#swatches.indexOf(source.closest("color-swatch"));
-		if (swatchIndex > -1) {
-			if (event.type === "colorchange") {
-				colors[swatchIndex][1] = source.color;
-			}
-			else if (event.type === "input") {
-				// Color name changed
-				colors[swatchIndex][0] = source.value;
-			}
-			else if (event.type === "click" && source.matches("[part=remove-button]")) {
-				colors.splice(swatchIndex, 1);
-				this.colors = Object.fromEntries(colors);
-				this.render();
-				return;
-			}
-
-			this.colors = Object.fromEntries(colors);
+		if (event.type === "colorchange") {
+			// Update color
+		}
+		else if (event.type === "input") {
+			// Update color name
+		}
+		else if (event.type === "click" && source.matches("[part=remove-button]")) {
+			// Remove color
 		}
 
 		this.dispatchEvent(new event.constructor(event.type, {...event}));

From 3eb0990e8f845577eb38c17560456dd52ea6ed8d Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 21 Nov 2024 11:00:55 +0100
Subject: [PATCH 11/62] Add comment

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

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 49ecbe79..00237695 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -47,6 +47,7 @@ const Self = class ColorScale extends ColorElement {
 		let source = event.target;
 
 		if (event.type === "input" && (!this.editable?.name || !source.matches("input[slot=before]"))) {
+			// Ignore input events from the color input: the color changes are handled by the colorchange event
 			return;
 		}
 

From 83f52cc2f7236f0a6d7e186c3d64e83baca3a7e9 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 21 Nov 2024 11:01:40 +0100
Subject: [PATCH 12/62] Intermediate colors should not be editable

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

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 00237695..53d59103 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -129,7 +129,7 @@ const Self = class ColorScale extends ColorElement {
 
 		let i = 0;
 		let newSwatches = [];
-		for (let {name, color} of colors) {
+		for (let {name, color, intermediate} of colors) {
 			let swatch = this.#swatches[i] = this._el.swatches.children[i];
 
 			if (!swatch) {
@@ -141,7 +141,7 @@ const Self = class ColorScale extends ColorElement {
 			}
 
 			swatch.color = color;
-			if (this.editable?.name || this.editable?.color) {
+			if (!intermediate && (this.editable?.name || this.editable?.color)) {
 				let html = "";
 
 				if (this.editable.name) {
@@ -227,7 +227,7 @@ const Self = class ColorScale extends ColorElement {
 
 						steps.shift();
 						steps.pop();
-						steps = steps.map(color => ({name: color + "", color}));
+						steps = steps.map(color => ({name: color + "", color, intermediate: true}));
 
 						tessellated.push(start, ...steps);
 

From 859ae6e2575e496b5e35adacf92a5567f281c0da Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 21 Nov 2024 12:11:19 +0100
Subject: [PATCH 13/62] Allow to update base colors

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

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 53d59103..ff932ec8 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -56,8 +56,9 @@ const Self = class ColorScale extends ColorElement {
 			return;
 		}
 
-		if (event.type === "colorchange") {
-			// Update color
+		if (event.type === "colorchange" && source.matches("color-swatch:not(.intermediate)")) {
+			// Update color if it’s not an intermediate one
+			this.updateColor(source);
 		}
 		else if (event.type === "input") {
 			// Update color name
@@ -118,6 +119,34 @@ const Self = class ColorScale extends ColorElement {
 		}
 	}
 
+	updateColor (swatch, color = swatch?.color) {
+		if (!swatch) {
+			return;
+		}
+
+		if (swatch.matches(".intermediate")) {
+			console.warn("Cannot update intermediate colors.");
+			return;
+		}
+
+		let colorNameElement = swatch.querySelector("[slot=before]");
+		let colorName = colorNameElement?.value ?? colorNameElement?.textContent ?? swatch.textContent;
+
+		this.colors = {...this.colors, [colorName]: color};
+
+		if (this.steps) {
+			// Update the UI to reflect the new intermediate colors
+			// If there are no intermediate colors, the UI is already up-to-date
+			this.render();
+
+			// Preserve the cursor position — set it to the end of the input
+			let input = swatch.querySelector("input:not([slot]");
+			let end = input.value.length;
+			input.setSelectionRange(end, end);
+			input.focus();
+		}
+	}
+
 	render () {
 		let colors = this.computedColors;
 
@@ -140,6 +169,8 @@ const Self = class ColorScale extends ColorElement {
 				newSwatches.push(swatch);
 			}
 
+			swatch.classList[intermediate ? "add" : "remove"]("intermediate");
+
 			swatch.color = color;
 			if (!intermediate && (this.editable?.name || this.editable?.color)) {
 				let html = "";

From 235f8c4eed3dcac1f15f60e2014a96e5817b08f0 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 21 Nov 2024 12:24:54 +0100
Subject: [PATCH 14/62] Allow specifying (optional) color and name when adding
 a new color

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

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index ff932ec8..d333abae 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -92,10 +92,11 @@ const Self = class ColorScale extends ColorElement {
 
 	#swatches = [];
 
-	addColor () {
-		let {name, color} = this.defaultColor?.() ?? {};
-		name ??= "New color";
-		color ??= this.computedColors.at(-1)?.color ?? new Self.Color("#f06");
+	addColor (color, name) {
+		let {name: defaultName, color: defaultColor} = this.defaultColor?.() ?? {};
+
+		name ??= defaultName ?? "New color";
+		color ??= defaultColor ?? this.computedColors.at(-1)?.color ?? new Self.Color("#f06");
 
 		if (this.colors[name]) {
 			// Name already exists
@@ -107,7 +108,7 @@ const Self = class ColorScale extends ColorElement {
 			name = `${ name } ${ i }`;
 		}
 
-		this.colors = {...this.colors, [name]: color.to(this.space)};
+		this.colors = {...this.colors, [name]: color};
 		this.render();
 
 		if (this.editable?.color) {

From 54aa23018b84963f6fddeb7d61ff8aaf47252714 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 21 Nov 2024 13:07:57 +0100
Subject: [PATCH 15/62] Allow to update names of base colors

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

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index d333abae..525aaff6 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -62,6 +62,7 @@ const Self = class ColorScale extends ColorElement {
 		}
 		else if (event.type === "input") {
 			// Update color name
+			this.updateColorName(source.closest("color-swatch"), source.value);
 		}
 		else if (event.type === "click" && source.matches("[part=remove-button]")) {
 			// Remove color
@@ -148,6 +149,24 @@ const Self = class ColorScale extends ColorElement {
 		}
 	}
 
+	updateColorName (swatch, newName) {
+		if (!swatch || !newName) {
+			return;
+		}
+
+		if (swatch.matches(".intermediate")) {
+			console.warn("Cannot update names of intermediate colors.");
+			return;
+		}
+
+		// Update the name of the existing color preserving the colors order
+		let colors = Object.entries(this.colors);
+		let index = colors.findIndex(([name, color]) => color.equals(swatch.color));
+		colors.splice(index, 1, [newName, swatch.color]);
+
+		this.colors = Object.fromEntries(colors);
+	}
+
 	render () {
 		let colors = this.computedColors;
 

From 849475143a779a7c02c549f0acd21ca6005458bb Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 21 Nov 2024 13:16:11 +0100
Subject: [PATCH 16/62] Improve warnings

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

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 525aaff6..d992ecf7 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -127,7 +127,7 @@ const Self = class ColorScale extends ColorElement {
 		}
 
 		if (swatch.matches(".intermediate")) {
-			console.warn("Cannot update intermediate colors.");
+			console.warn("Cannot update intermediate colors. They are calculated automatically and will be overwritten when the color scale is re-rendered the next time.");
 			return;
 		}
 
@@ -155,7 +155,7 @@ const Self = class ColorScale extends ColorElement {
 		}
 
 		if (swatch.matches(".intermediate")) {
-			console.warn("Cannot update names of intermediate colors.");
+			console.warn("Cannot update names of intermediate colors. They are calculated automatically and will be overwritten when the color scale is re-rendered the next time.");
 			return;
 		}
 

From d8519db383b24d78cd5ea51d81358c90fb9e41cf Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 21 Nov 2024 13:26:15 +0100
Subject: [PATCH 17/62] Make the `if` condition stricter

---
 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 d992ecf7..f08fa60a 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -51,7 +51,7 @@ const Self = class ColorScale extends ColorElement {
 			return;
 		}
 
-		if (source === this._el.add_button || this._slots.add_button.assignedElements().includes(source)) {
+		if (event.type === "click" && source === this._el.add_button || this._slots.add_button.assignedElements().includes(source)) {
 			this.addColor();
 			return;
 		}

From f7d3a268eb628d7b7f7a0e9574ff6fb804314047 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 21 Nov 2024 13:33:46 +0100
Subject: [PATCH 18/62] Allow to remove base colors

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

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index f08fa60a..17156ca6 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -66,6 +66,7 @@ const Self = class ColorScale extends ColorElement {
 		}
 		else if (event.type === "click" && source.matches("[part=remove-button]")) {
 			// Remove color
+			this.removeColor(source.closest("color-swatch"));
 		}
 
 		this.dispatchEvent(new event.constructor(event.type, {...event}));
@@ -167,6 +168,31 @@ const Self = class ColorScale extends ColorElement {
 		this.colors = Object.fromEntries(colors);
 	}
 
+	removeColor (swatch) {
+		if (!swatch) {
+			return;
+		}
+
+		if (swatch.matches(".intermediate")) {
+			console.warn("Cannot remove intermediate colors. They are calculated automatically and will be re-added when the color scale is re-rendered the next time.");
+			return;
+		}
+
+		let colorNameElement = swatch.querySelector("[slot=before]");
+		let colorName = colorNameElement?.value ?? colorNameElement?.textContent ?? swatch.textContent;
+
+		swatch.remove();
+
+		let colors = {...this.colors};
+		delete colors[colorName];
+		this.colors = colors;
+
+		if (this.editable) {
+			// If we are in the edit mode, we need to force re-render the swatches
+			this.render();
+		}
+	}
+
 	render () {
 		let colors = this.computedColors;
 

From 2e575a0c2b597bdea1f0a9f0997873bf0d6ce789 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 21 Nov 2024 14:10:03 +0100
Subject: [PATCH 19/62] Don't set the swatch color too early

It might cause erroneous handling of  `colorchange` events
---
 src/color-scale/color-scale.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 17156ca6..9eda40d8 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -217,7 +217,6 @@ const Self = class ColorScale extends ColorElement {
 
 			swatch.classList[intermediate ? "add" : "remove"]("intermediate");
 
-			swatch.color = color;
 			if (!intermediate && (this.editable?.name || this.editable?.color)) {
 				let html = "";
 
@@ -239,6 +238,8 @@ const Self = class ColorScale extends ColorElement {
 				swatch.textContent = name;
 			}
 
+			swatch.color = color;
+
 			if (this.info) {
 				swatch.info = this.info;
 			}

From bee1d3033d84d7f30349f2df3798371164645feb Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 21 Nov 2024 14:15:26 +0100
Subject: [PATCH 20/62] We don't need to add a new part; the remove color
 button can be styled via the `remove-button` class

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

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 9eda40d8..bd482fed 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -64,7 +64,7 @@ const Self = class ColorScale extends ColorElement {
 			// Update color name
 			this.updateColorName(source.closest("color-swatch"), source.value);
 		}
-		else if (event.type === "click" && source.matches("[part=remove-button]")) {
+		else if (event.type === "click" && source.matches("button.remove-button")) {
 			// Remove color
 			this.removeColor(source.closest("color-swatch"));
 		}
@@ -211,7 +211,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, remove-button");
+				swatch.setAttribute("exportparts", "swatch, info, gamut");
 				newSwatches.push(swatch);
 			}
 
@@ -229,7 +229,7 @@ const Self = class ColorScale extends ColorElement {
 
 				if (this.editable.color) {
 					html += `<input value="${ color }" />`;
-					html += `<button slot="swatch-content" part="remove-button" title="Remove color">❌</button>`;
+					html += `<button slot="swatch-content" class="remove-button" title="Remove color">❌</button>`;
 				}
 
 				swatch.innerHTML = html;

From 47fc7f4f1c3b1bcf29d3708b046e4c7c00308c7d Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 21 Nov 2024 15:20:09 +0100
Subject: [PATCH 21/62] Style the remove color button

---
 src/color-scale/color-scale.css | 35 ++++++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/color-scale/color-scale.css b/src/color-scale/color-scale.css
index 29b7198a..f0c10feb 100644
--- a/src/color-scale/color-scale.css
+++ b/src/color-scale/color-scale.css
@@ -8,8 +8,41 @@
 }
 
 color-swatch {
+	position: relative;
 	margin: 0;
 	flex: 1;
+
+	.remove-button {
+		--_border-color: var(--border-color, color-mix(in oklab, buttonborder 20%, oklab(none none none / 0%)));
+
+		all: unset;
+		position: absolute;
+		inset-inline-end: .3em;
+		inset-block-start: .3em;
+
+		display: grid;
+		place-items: center;
+		inline-size: 1.5em;
+		padding: .2em;
+		aspect-ratio: 1;
+
+		font-size: 70%;
+		line-height: 1;
+		text-align: center;
+
+		border-radius: 50%;
+		border: 1px solid var(--_border-color);
+		box-shadow: 0 .05em 1em -.7em black;
+		background-color: white;
+
+		cursor: pointer;
+
+		transition: transform .2s;
+
+		&:is(:hover, :focus) {
+			transform: scale(1.1);
+		}
+	}
 }
 
 @supports (grid-template-columns: subgrid) {
@@ -37,4 +70,4 @@ color-swatch {
 			grid-row: 1;
 		}
 	}
-}
\ No newline at end of file
+}

From 0245eaa74e98803935fc45e4d3748c6a856cb404 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 21 Nov 2024 16:10:21 +0100
Subject: [PATCH 22/62] Add some more styles

---
 src/color-scale/color-scale.css | 24 ++++++++++++++++++++----
 src/color-scale/color-scale.js  |  8 ++++----
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/color-scale/color-scale.css b/src/color-scale/color-scale.css
index f0c10feb..b763f202 100644
--- a/src/color-scale/color-scale.css
+++ b/src/color-scale/color-scale.css
@@ -12,12 +12,24 @@ color-swatch {
 	margin: 0;
 	flex: 1;
 
-	.remove-button {
-		--_border-color: var(--border-color, color-mix(in oklab, buttonborder 20%, oklab(none none none / 0%)));
+	.color-name, input.color {
+		--_border-color: var(--border-color, color-mix(in oklab, currentcolor 70%, oklab(none none none / 0%)));
+
+		font: inherit;
+		box-sizing: border-box;
+		padding: .1em .2em;
+		border-radius: .2rem;
+		border: 1px solid var(--_border-color);
+
+		&:not(.editable) {
+			border-color: transparent;
+		}
+	}
 
+	.remove-button {
 		all: unset;
 		position: absolute;
-		inset-inline-end: .3em;
+		inset-inline-end: .1em;
 		inset-block-start: .3em;
 
 		display: grid;
@@ -31,7 +43,7 @@ color-swatch {
 		text-align: center;
 
 		border-radius: 50%;
-		border: 1px solid var(--_border-color);
+		border: 1px solid color-mix(in oklab, currentcolor 20%, oklab(none none none / 0%));
 		box-shadow: 0 .05em 1em -.7em black;
 		background-color: white;
 
@@ -45,6 +57,10 @@ color-swatch {
 	}
 }
 
+#add-button {
+	margin-block-start: .5em;
+}
+
 @supports (grid-template-columns: subgrid) {
 	/* Avoid uneven swatch heights */
 	#swatches {
diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index bd482fed..82ab019b 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -221,21 +221,21 @@ const Self = class ColorScale extends ColorElement {
 				let html = "";
 
 				if (this.editable.name) {
-					html += `<input slot="before" value="${ name }" />`;
+					html += `<input slot="before" class="color-name editable" value="${ name }" />`;
 				}
 				else {
-					html += `<span slot="before">${ name }</span>`;
+					html += `<span slot="before" class="color-name">${ name }</span>`;
 				}
 
 				if (this.editable.color) {
-					html += `<input value="${ color }" />`;
+					html += `<input class="color editable" value="${ color }" />`;
 					html += `<button slot="swatch-content" class="remove-button" title="Remove color">❌</button>`;
 				}
 
 				swatch.innerHTML = html;
 			}
 			else {
-				swatch.textContent = name;
+				swatch.innerHTML = `<span slot="before" class="color-name">${ name }</span>`;
 			}
 
 			swatch.color = color;

From d2f2f995b0e08c788bac5b7b9771b9935803aa99 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 21 Nov 2024 16:59:32 +0100
Subject: [PATCH 23/62] Add some more examples

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

diff --git a/src/color-scale/README.md b/src/color-scale/README.md
index 15a854c2..a97ed40a 100644
--- a/src/color-scale/README.md
+++ b/src/color-scale/README.md
@@ -69,13 +69,57 @@ Issue: How to make them focusable??
 
 ### The `editable` attribute
 
+The `editable` attribute allows you to make the color scale editable, enabling the addition of new colors and editing or the removal of existing ones. You can specify whether the color names, color values, or both should be editable.
+
+Editing colors (including adding and removing):
+
+```html
+<color-scale editable="color" space="oklch" colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"></color-scale>
+```
+
+Editing color names:
+
+```html
+<color-scale editable="name" space="oklch" colors="#c5f6fa, #99e9f2, #3bc9db"></color-scale>
+```
+
+Or both:
+
+```html
+<color-scale editable="name color" space="oklch" colors="
+	Gray 300: #d1d5db,
+	Gray 400: #9ca3af,
+	Gray 500: #6b7280
+"></color-scale>
+```
+
+There is a shorter way to achieve the same result—use `editable` as a boolean attribute (or set it to `true` programmatically):
+
+```html
+<color-scale editable space="oklch" colors="
+	Gray 300: #d1d5db,
+	Gray 400: #9ca3af,
+	Gray 500: #6b7280
+"></color-scale>
+```
+
+Keep in mind that interpolated colors are generated automatically and are not editable:
+
+```html
+<color-scale editable="color" colors="#e3fafc, #0b7285" steps="4" space="oklch"></color-scale>
+```
+
+The `editable` attribute is reactive and can be set programmatically:
+
 ```html
 <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>
+<color-scale space="oklch" colors="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd"></color-scale>
 ```
 
+All the actions with colors are also available in JS via the following methods: `addColor([color[, name]])`, `updateColor(swatch, color)`, `updateColorName(swatch, newName)`, `removeColor(swatch)`.
+
 <!--
 If you want to insert interpolated colors only in specific places, you can use empty values:
 

From c99b2bc6bcfb2e736f9a2a01d478958bdf09e7f0 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 21 Nov 2024 17:52:04 +0100
Subject: [PATCH 24/62] More docs

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

diff --git a/src/color-scale/README.md b/src/color-scale/README.md
index a97ed40a..6e556327 100644
--- a/src/color-scale/README.md
+++ b/src/color-scale/README.md
@@ -118,7 +118,31 @@ The `editable` attribute is reactive and can be set programmatically:
 <color-scale space="oklch" colors="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd"></color-scale>
 ```
 
-All the actions with colors are also available in JS via the following methods: `addColor([color[, name]])`, `updateColor(swatch, color)`, `updateColorName(swatch, newName)`, `removeColor(swatch)`.
+You can also add colors programmatically with the `addColor()` method, providing the color to add and, optionally, its name:
+
+```html
+<button onclick="this.nextElementSibling.addColor('#7bd3ea', 'Blue')">Add blue color</button>
+<color-scale space="oklch" colors="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd"></color-scale>
+```
+
+Or don't provide any of them. In that case, the added swatch will get the color of the last one:
+
+```html
+<button onclick="this.nextElementSibling.addColor()">Add default color</button>
+<color-scale space="oklch" colors="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd"></color-scale>
+```
+
+Don't want added swatches to get the color of the last one? No problem. You can change that, too.
+Add the `defaultColor()` method to the color scale and return an object with the desired color and (optional) name from it:
+
+```html
+<button onclick="this.nextElementSibling.addColor()">Add my color</button>
+<color-scale id="custom_color" space="oklch" colors="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd"></color-scale>
+
+<script>
+	custom_color.defaultColor = () => ({ color: "#f06", name: "My awesome color" });
+</script>
+```
 
 <!--
 If you want to insert interpolated colors only in specific places, you can use empty values:

From d5056e2cd386c0b25b20d6e8ce3c539ee5b46c0a Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 21 Nov 2024 17:53:54 +0100
Subject: [PATCH 25/62] Add FIXMEs

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

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 82ab019b..248ecc6f 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -221,13 +221,16 @@ const Self = class ColorScale extends ColorElement {
 				let html = "";
 
 				if (this.editable.name) {
+					// FIXME: What if there is content in the slot?
 					html += `<input slot="before" class="color-name editable" value="${ name }" />`;
 				}
 				else {
+					// FIXME: What if there is content in the slot?
 					html += `<span slot="before" class="color-name">${ name }</span>`;
 				}
 
 				if (this.editable.color) {
+					// FIXME: What if there is content in the slots?
 					html += `<input class="color editable" value="${ color }" />`;
 					html += `<button slot="swatch-content" class="remove-button" title="Remove color">❌</button>`;
 				}
@@ -235,6 +238,7 @@ const Self = class ColorScale extends ColorElement {
 				swatch.innerHTML = html;
 			}
 			else {
+				// FIXME: What if there is content in the slot?
 				swatch.innerHTML = `<span slot="before" class="color-name">${ name }</span>`;
 			}
 

From 81505cd4fd8c06b219c400644690cb23e83be83d Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 21 Nov 2024 18:14:07 +0100
Subject: [PATCH 26/62] Update selectors

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

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 248ecc6f..38cf90ea 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -46,7 +46,7 @@ const Self = class ColorScale extends ColorElement {
 	handleEvent (event) {
 		let source = event.target;
 
-		if (event.type === "input" && (!this.editable?.name || !source.matches("input[slot=before]"))) {
+		if (event.type === "input" && (!this.editable?.name || !source.matches(".color-name.editable"))) {
 			// Ignore input events from the color input: the color changes are handled by the colorchange event
 			return;
 		}
@@ -116,7 +116,7 @@ const Self = class ColorScale extends ColorElement {
 		if (this.editable?.color) {
 			// Focus the new color input and select its content
 			let swatch = this._el.swatches.lastElementChild;
-			let input = swatch.querySelector("input:not([slot]");
+			let input = swatch.querySelector("input.color.editable");
 			input.focus();
 			input.select();
 		}
@@ -132,7 +132,7 @@ const Self = class ColorScale extends ColorElement {
 			return;
 		}
 
-		let colorNameElement = swatch.querySelector("[slot=before]");
+		let colorNameElement = swatch.querySelector(".color-name");
 		let colorName = colorNameElement?.value ?? colorNameElement?.textContent ?? swatch.textContent;
 
 		this.colors = {...this.colors, [colorName]: color};
@@ -178,7 +178,7 @@ const Self = class ColorScale extends ColorElement {
 			return;
 		}
 
-		let colorNameElement = swatch.querySelector("[slot=before]");
+		let colorNameElement = swatch.querySelector(".color-name");
 		let colorName = colorNameElement?.value ?? colorNameElement?.textContent ?? swatch.textContent;
 
 		swatch.remove();

From ed3ff16cf3b168b6f7b8eb19d3524867af1271e2 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Fri, 22 Nov 2024 12:52:31 +0100
Subject: [PATCH 27/62] Some code tweaks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rename: remove button → delete button
- Show the delete color button on interaction
- Don't use slots in selectors
- Remove redundant comments
---
 src/color-scale/color-scale.css | 11 +++++++++--
 src/color-scale/color-scale.js  | 14 ++++++--------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/color-scale/color-scale.css b/src/color-scale/color-scale.css
index b763f202..eac4639e 100644
--- a/src/color-scale/color-scale.css
+++ b/src/color-scale/color-scale.css
@@ -12,6 +12,13 @@ color-swatch {
 	margin: 0;
 	flex: 1;
 
+	&:not(:hover, :focus-within) {
+		.delete-button {
+			opacity: 0;
+			transition-duration: 0ms;
+		}
+	}
+
 	.color-name, input.color {
 		--_border-color: var(--border-color, color-mix(in oklab, currentcolor 70%, oklab(none none none / 0%)));
 
@@ -26,7 +33,7 @@ color-swatch {
 		}
 	}
 
-	.remove-button {
+	.delete-button {
 		all: unset;
 		position: absolute;
 		inset-inline-end: .1em;
@@ -49,7 +56,7 @@ color-swatch {
 
 		cursor: pointer;
 
-		transition: transform .2s;
+		transition: transform .2s, opacity .2s;
 
 		&:is(:hover, :focus) {
 			transform: scale(1.1);
diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 38cf90ea..0ff03927 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -61,12 +61,10 @@ const Self = class ColorScale extends ColorElement {
 			this.updateColor(source);
 		}
 		else if (event.type === "input") {
-			// Update color name
 			this.updateColorName(source.closest("color-swatch"), source.value);
 		}
-		else if (event.type === "click" && source.matches("button.remove-button")) {
-			// Remove color
-			this.removeColor(source.closest("color-swatch"));
+		else if (event.type === "click" && source.matches("button.delete-button")) {
+			this.deleteColor(source.closest("color-swatch"));
 		}
 
 		this.dispatchEvent(new event.constructor(event.type, {...event}));
@@ -143,7 +141,7 @@ const Self = class ColorScale extends ColorElement {
 			this.render();
 
 			// Preserve the cursor position — set it to the end of the input
-			let input = swatch.querySelector("input:not([slot]");
+			let input = swatch.querySelector("input.color.editable");
 			let end = input.value.length;
 			input.setSelectionRange(end, end);
 			input.focus();
@@ -168,13 +166,13 @@ const Self = class ColorScale extends ColorElement {
 		this.colors = Object.fromEntries(colors);
 	}
 
-	removeColor (swatch) {
+	deleteColor (swatch) {
 		if (!swatch) {
 			return;
 		}
 
 		if (swatch.matches(".intermediate")) {
-			console.warn("Cannot remove intermediate colors. They are calculated automatically and will be re-added when the color scale is re-rendered the next time.");
+			console.warn("Cannot delete intermediate colors. They are calculated automatically and will be re-added when the color scale is re-rendered the next time.");
 			return;
 		}
 
@@ -232,7 +230,7 @@ const Self = class ColorScale extends ColorElement {
 				if (this.editable.color) {
 					// FIXME: What if there is content in the slots?
 					html += `<input class="color editable" value="${ color }" />`;
-					html += `<button slot="swatch-content" class="remove-button" title="Remove color">❌</button>`;
+					html += `<button slot="swatch-content" class="delete-button" title="Delete color">❌</button>`;
 				}
 
 				swatch.innerHTML = html;

From 2dc312a9135512b74edf67ee46b316872041a7aa Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Fri, 22 Nov 2024 13:25:59 +0100
Subject: [PATCH 28/62] Tweak the delete button

So it doesn't look like "not allowed"
---
 src/color-scale/color-scale.css | 24 +++++++++++-------------
 src/color-scale/color-scale.js  |  6 +++++-
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/color-scale/color-scale.css b/src/color-scale/color-scale.css
index eac4639e..e6cc85e3 100644
--- a/src/color-scale/color-scale.css
+++ b/src/color-scale/color-scale.css
@@ -20,7 +20,7 @@ color-swatch {
 	}
 
 	.color-name, input.color {
-		--_border-color: var(--border-color, color-mix(in oklab, currentcolor 70%, oklab(none none none / 0%)));
+		--_border-color: var(--border-color, color-mix(in oklab, buttonborder 70%, oklab(none none none / 0%)));
 
 		font: inherit;
 		box-sizing: border-box;
@@ -34,32 +34,30 @@ color-swatch {
 	}
 
 	.delete-button {
+		--_foreground-color: red;
+		--_background-color: white;
+
 		all: unset;
-		position: absolute;
-		inset-inline-end: .1em;
-		inset-block-start: .3em;
 
 		display: grid;
 		place-items: center;
 		inline-size: 1.5em;
-		padding: .2em;
 		aspect-ratio: 1;
+		padding: .2em;
 
-		font-size: 70%;
-		line-height: 1;
-		text-align: center;
+		color: var(--_foreground-color);
+		background-color: var(--_background-color);
 
-		border-radius: 50%;
-		border: 1px solid color-mix(in oklab, currentcolor 20%, oklab(none none none / 0%));
+		border-radius: .3em;
 		box-shadow: 0 .05em 1em -.7em black;
-		background-color: white;
 
 		cursor: pointer;
 
-		transition: transform .2s, opacity .2s;
+		transition: opacity .2s;
 
 		&:is(:hover, :focus) {
-			transform: scale(1.1);
+			color: var(--_background-color);
+			background-color: var(--_foreground-color);
 		}
 	}
 }
diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 0ff03927..11bf4cc4 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -230,7 +230,11 @@ const Self = class ColorScale extends ColorElement {
 				if (this.editable.color) {
 					// FIXME: What if there is content in the slots?
 					html += `<input class="color editable" value="${ color }" />`;
-					html += `<button slot="swatch-content" class="delete-button" title="Delete color">❌</button>`;
+					html += `<button slot="swatch-content" class="delete-button" title="Delete color">
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+							<path fill="currentColor" fill-rule="evenodd" d="m18.412 6.5l-.801 13.617A2 2 0 0 1 15.614 22H8.386a2 2 0 0 1-1.997-1.883L5.59 6.5H3.5v-1A.5.5 0 0 1 4 5h16a.5.5 0 0 1 .5.5v1zM10 2.5h4a.5.5 0 0 1 .5.5v1h-5V3a.5.5 0 0 1 .5-.5M9 9l.5 9H11l-.4-9zm4.5 0l-.5 9h1.5l.5-9z" />
+						</svg>
+					</button>`;
 				}
 
 				swatch.innerHTML = html;

From 4e3489d7d79e3f1a2653a7ce2f8b28a4c5607028 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Fri, 22 Nov 2024 17:24:48 +0100
Subject: [PATCH 29/62] Fix regression

---
 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 11bf4cc4..7e27cdaa 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -63,7 +63,7 @@ const Self = class ColorScale extends ColorElement {
 		else if (event.type === "input") {
 			this.updateColorName(source.closest("color-swatch"), source.value);
 		}
-		else if (event.type === "click" && source.matches("button.delete-button")) {
+		else if (event.type === "click" && source.closest("button.delete-button")) {
 			this.deleteColor(source.closest("color-swatch"));
 		}
 

From 66a8ff045701d9fc942f30768cd2d15c9db13364 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Tue, 3 Dec 2024 15:09:21 +0100
Subject: [PATCH 30/62] Address feedback: Show simple cases first, then complex
 ones

---
 src/color-scale/README.md | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/color-scale/README.md b/src/color-scale/README.md
index 6e556327..6c0a170e 100644
--- a/src/color-scale/README.md
+++ b/src/color-scale/README.md
@@ -69,7 +69,19 @@ Issue: How to make them focusable??
 
 ### The `editable` attribute
 
-The `editable` attribute allows you to make the color scale editable, enabling the addition of new colors and editing or the removal of existing ones. You can specify whether the color names, color values, or both should be editable.
+The `editable` attribute allows you to make the color scale editable, enabling the addition of new colors and editing or the removal of existing ones.
+
+Use `editable` as a boolean attribute to make the color scale editable:
+
+```html
+<color-scale editable space="oklch" colors="
+	Gray 300: #d1d5db,
+	Gray 400: #9ca3af,
+	Gray 500: #6b7280
+"></color-scale>
+```
+
+You can specify whether the color names, color values, or both should be editable.
 
 Editing colors (including adding and removing):
 
@@ -93,16 +105,6 @@ Or both:
 "></color-scale>
 ```
 
-There is a shorter way to achieve the same result—use `editable` as a boolean attribute (or set it to `true` programmatically):
-
-```html
-<color-scale editable space="oklch" colors="
-	Gray 300: #d1d5db,
-	Gray 400: #9ca3af,
-	Gray 500: #6b7280
-"></color-scale>
-```
-
 Keep in mind that interpolated colors are generated automatically and are not editable:
 
 ```html

From 0fbd31d543af2ee9bac5892eceadf3feeda3678b Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Tue, 3 Dec 2024 15:12:03 +0100
Subject: [PATCH 31/62] =?UTF-8?q?Don't=20capture=20`input`=20events=20?=
 =?UTF-8?q?=E2=80=94=20they=20bubble?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 7e27cdaa..8c25066f 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -29,7 +29,7 @@ const Self = class ColorScale extends ColorElement {
 
 	connectedCallback () {
 		super.connectedCallback?.();
-		this._el.swatches.addEventListener("input", this, {capture: true});
+		this._el.swatches.addEventListener("input", this);
 		this._el.swatches.addEventListener("colorchange", this, {capture: true});
 		this._el.swatches.addEventListener("click", this, {capture: true});
 		this._slots.add_button.addEventListener("click", this);
@@ -37,7 +37,7 @@ const Self = class ColorScale extends ColorElement {
 
 	disconnectedCallback () {
 		this.#swatches = [];
-		this._el.swatches.removeEventListener("input", this, {capture: true});
+		this._el.swatches.removeEventListener("input", this);
 		this._el.swatches.removeEventListener("colorchange", this, {capture: true});
 		this._el.swatches.removeEventListener("click", this, {capture: true});
 		this._slots.add_button.removeEventListener("click", this);

From 15d24dcbfcf92ee6f78e05900a42a7671dac2aa9 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Tue, 3 Dec 2024 15:29:25 +0100
Subject: [PATCH 32/62] Adopt new `<color-swatch>` API: Use the `label` prop

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

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 8c25066f..2393c08f 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -131,7 +131,7 @@ const Self = class ColorScale extends ColorElement {
 		}
 
 		let colorNameElement = swatch.querySelector(".color-name");
-		let colorName = colorNameElement?.value ?? colorNameElement?.textContent ?? swatch.textContent;
+		let colorName = colorNameElement?.value ?? colorNameElement?.textContent ?? swatch.label;
 
 		this.colors = {...this.colors, [colorName]: color};
 
@@ -162,6 +162,7 @@ const Self = class ColorScale extends ColorElement {
 		let colors = Object.entries(this.colors);
 		let index = colors.findIndex(([name, color]) => color.equals(swatch.color));
 		colors.splice(index, 1, [newName, swatch.color]);
+		swatch.label = newName;
 
 		this.colors = Object.fromEntries(colors);
 	}
@@ -177,7 +178,7 @@ const Self = class ColorScale extends ColorElement {
 		}
 
 		let colorNameElement = swatch.querySelector(".color-name");
-		let colorName = colorNameElement?.value ?? colorNameElement?.textContent ?? swatch.textContent;
+		let colorName = colorNameElement?.value ?? colorNameElement?.textContent ?? swatch.label;
 
 		swatch.remove();
 
@@ -222,10 +223,6 @@ const Self = class ColorScale extends ColorElement {
 					// FIXME: What if there is content in the slot?
 					html += `<input slot="before" class="color-name editable" value="${ name }" />`;
 				}
-				else {
-					// FIXME: What if there is content in the slot?
-					html += `<span slot="before" class="color-name">${ name }</span>`;
-				}
 
 				if (this.editable.color) {
 					// FIXME: What if there is content in the slots?
@@ -239,11 +236,8 @@ const Self = class ColorScale extends ColorElement {
 
 				swatch.innerHTML = html;
 			}
-			else {
-				// FIXME: What if there is content in the slot?
-				swatch.innerHTML = `<span slot="before" class="color-name">${ name }</span>`;
-			}
 
+			swatch.label = name;
 			swatch.color = color;
 
 			if (this.info) {

From e5276d37f8f4eaa457a48ed44335c9e6a88e5245 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Tue, 3 Dec 2024 15:45:07 +0100
Subject: [PATCH 33/62] Don't mess up with the named slots

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

diff --git a/src/color-scale/color-scale.css b/src/color-scale/color-scale.css
index e6cc85e3..83228232 100644
--- a/src/color-scale/color-scale.css
+++ b/src/color-scale/color-scale.css
@@ -19,6 +19,10 @@ color-swatch {
 		}
 	}
 
+	&::part(color) {
+		flex-direction: column;
+	}
+
 	.color-name, input.color {
 		--_border-color: var(--border-color, color-mix(in oklab, buttonborder 70%, oklab(none none none / 0%)));
 
diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 2393c08f..9888389b 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -220,14 +220,12 @@ const Self = class ColorScale extends ColorElement {
 				let html = "";
 
 				if (this.editable.name) {
-					// FIXME: What if there is content in the slot?
-					html += `<input slot="before" class="color-name editable" value="${ name }" />`;
+					html += `<input class="color-name editable" value="${ name }" />`;
 				}
 
 				if (this.editable.color) {
-					// FIXME: What if there is content in the slots?
 					html += `<input class="color editable" value="${ color }" />`;
-					html += `<button slot="swatch-content" class="delete-button" title="Delete color">
+					html += `<button class="delete-button" title="Delete color">
 						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 							<path fill="currentColor" fill-rule="evenodd" d="m18.412 6.5l-.801 13.617A2 2 0 0 1 15.614 22H8.386a2 2 0 0 1-1.997-1.883L5.59 6.5H3.5v-1A.5.5 0 0 1 4 5h16a.5.5 0 0 1 .5.5v1zM10 2.5h4a.5.5 0 0 1 .5.5v1h-5V3a.5.5 0 0 1 .5-.5M9 9l.5 9H11l-.4-9zm4.5 0l-.5 9h1.5l.5-9z" />
 						</svg>

From 04b6660d596d37677b6fea4463197517352e2884 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Tue, 3 Dec 2024 16:49:49 +0100
Subject: [PATCH 34/62] Adjust the delete button styles

---
 src/color-scale/color-scale.css | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/color-scale/color-scale.css b/src/color-scale/color-scale.css
index 83228232..13a475f6 100644
--- a/src/color-scale/color-scale.css
+++ b/src/color-scale/color-scale.css
@@ -39,20 +39,30 @@ color-swatch {
 
 	.delete-button {
 		--_foreground-color: red;
-		--_background-color: white;
+		--_background-color: canvas;
 
 		all: unset;
 
+		position: absolute;
+		inset-block-start: .3em;
+		inset-inline-end: .3em;
+
 		display: grid;
 		place-items: center;
-		inline-size: 1.5em;
+		inline-size: 1.2em;
 		aspect-ratio: 1;
 		padding: .2em;
 
 		color: var(--_foreground-color);
 		background-color: var(--_background-color);
 
-		border-radius: .3em;
+		border-radius: 50%;
+		border: 1px solid;
+		border-color: color-mix(
+			in oklab,
+			buttonborder 20%,
+			oklab(none none none / 0%)
+		);
 		box-shadow: 0 .05em 1em -.7em black;
 
 		cursor: pointer;

From cd9cabfe1d0620f6cc19463875fce99ec8387f58 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Tue, 3 Dec 2024 18:05:32 +0100
Subject: [PATCH 35/62] =?UTF-8?q?Rename=20`editable`=20=E2=86=92=20`edit`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/color-scale/README.md       | 20 ++++++++++----------
 src/color-scale/color-scale.css |  2 +-
 src/color-scale/color-scale.js  | 32 ++++++++++++++++----------------
 3 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/color-scale/README.md b/src/color-scale/README.md
index 6c0a170e..bc9c824d 100644
--- a/src/color-scale/README.md
+++ b/src/color-scale/README.md
@@ -67,14 +67,14 @@ You can also create compact color scales, by simply setting `--details-style: co
 
 Issue: How to make them focusable??
 
-### The `editable` attribute
+### The `edit` attribute
 
-The `editable` attribute allows you to make the color scale editable, enabling the addition of new colors and editing or the removal of existing ones.
+The `edit` attribute allows you to make the color scale editable, enabling the addition of new colors and editing or the removal of existing ones.
 
-Use `editable` as a boolean attribute to make the color scale editable:
+Use `edit` as a boolean attribute to make the color scale editable:
 
 ```html
-<color-scale editable space="oklch" colors="
+<color-scale edit space="oklch" colors="
 	Gray 300: #d1d5db,
 	Gray 400: #9ca3af,
 	Gray 500: #6b7280
@@ -86,19 +86,19 @@ You can specify whether the color names, color values, or both should be editabl
 Editing colors (including adding and removing):
 
 ```html
-<color-scale editable="color" space="oklch" colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"></color-scale>
+<color-scale edit="color" space="oklch" colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"></color-scale>
 ```
 
 Editing color names:
 
 ```html
-<color-scale editable="name" space="oklch" colors="#c5f6fa, #99e9f2, #3bc9db"></color-scale>
+<color-scale edit="name" space="oklch" colors="#c5f6fa, #99e9f2, #3bc9db"></color-scale>
 ```
 
 Or both:
 
 ```html
-<color-scale editable="name color" space="oklch" colors="
+<color-scale edit="name color" space="oklch" colors="
 	Gray 300: #d1d5db,
 	Gray 400: #9ca3af,
 	Gray 500: #6b7280
@@ -108,14 +108,14 @@ Or both:
 Keep in mind that interpolated colors are generated automatically and are not editable:
 
 ```html
-<color-scale editable="color" colors="#e3fafc, #0b7285" steps="4" space="oklch"></color-scale>
+<color-scale edit="color" colors="#e3fafc, #0b7285" steps="4" space="oklch"></color-scale>
 ```
 
-The `editable` attribute is reactive and can be set programmatically:
+The `edit` attribute is reactive and can be set programmatically:
 
 ```html
 <label>
-	<input type="checkbox" onchange="this.parentElement.nextElementSibling.editable = this.checked">Editable
+	<input type="checkbox" onchange="this.parentElement.nextElementSibling.edit = this.checked">Editable
 </label>
 <color-scale space="oklch" colors="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd"></color-scale>
 ```
diff --git a/src/color-scale/color-scale.css b/src/color-scale/color-scale.css
index 13a475f6..8a0700ae 100644
--- a/src/color-scale/color-scale.css
+++ b/src/color-scale/color-scale.css
@@ -32,7 +32,7 @@ color-swatch {
 		border-radius: .2rem;
 		border: 1px solid var(--_border-color);
 
-		&:not(.editable) {
+		&:not(.edit) {
 			border-color: transparent;
 		}
 	}
diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 9888389b..5fe95408 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -46,7 +46,7 @@ const Self = class ColorScale extends ColorElement {
 	handleEvent (event) {
 		let source = event.target;
 
-		if (event.type === "input" && (!this.editable?.name || !source.matches(".color-name.editable"))) {
+		if (event.type === "input" && (!this.edit?.name || !source.matches(".color-name.edit"))) {
 			// Ignore input events from the color input: the color changes are handled by the colorchange event
 			return;
 		}
@@ -71,15 +71,15 @@ const Self = class ColorScale extends ColorElement {
 	}
 
 	propChangedCallback ({name, prop, detail: change}) {
-		if (name === "computedColors" && !this.editable?.name && !this.editable?.color) {
+		if (name === "computedColors" && !this.edit?.name && !this.edit?.color) {
 			// Re-render swatches
 			// Only if nothing is being edited, otherwise the input would be lost
 			// or, e.g., "red" would be converted to "rgb(100%, 0%, 0%)" right after the typing is done
 			this.render();
 		}
 
-		if (name === "editable") {
-			if (this.editable?.color) {
+		if (name === "edit") {
+			if (this.edit?.color) {
 				this._el.add_button.style.removeProperty("display");
 			}
 			else {
@@ -111,10 +111,10 @@ const Self = class ColorScale extends ColorElement {
 		this.colors = {...this.colors, [name]: color};
 		this.render();
 
-		if (this.editable?.color) {
+		if (this.edit?.color) {
 			// Focus the new color input and select its content
 			let swatch = this._el.swatches.lastElementChild;
-			let input = swatch.querySelector("input.color.editable");
+			let input = swatch.querySelector("input.color.edit");
 			input.focus();
 			input.select();
 		}
@@ -141,7 +141,7 @@ const Self = class ColorScale extends ColorElement {
 			this.render();
 
 			// Preserve the cursor position — set it to the end of the input
-			let input = swatch.querySelector("input.color.editable");
+			let input = swatch.querySelector("input.color.edit");
 			let end = input.value.length;
 			input.setSelectionRange(end, end);
 			input.focus();
@@ -186,7 +186,7 @@ const Self = class ColorScale extends ColorElement {
 		delete colors[colorName];
 		this.colors = colors;
 
-		if (this.editable) {
+		if (this.edit) {
 			// If we are in the edit mode, we need to force re-render the swatches
 			this.render();
 		}
@@ -216,15 +216,15 @@ const Self = class ColorScale extends ColorElement {
 
 			swatch.classList[intermediate ? "add" : "remove"]("intermediate");
 
-			if (!intermediate && (this.editable?.name || this.editable?.color)) {
+			if (!intermediate && (this.edit?.name || this.edit?.color)) {
 				let html = "";
 
-				if (this.editable.name) {
-					html += `<input class="color-name editable" value="${ name }" />`;
+				if (this.edit.name) {
+					html += `<input class="color-name edit" value="${ name }" />`;
 				}
 
-				if (this.editable.color) {
-					html += `<input class="color editable" value="${ color }" />`;
+				if (this.edit.color) {
+					html += `<input class="color edit" value="${ color }" />`;
 					html += `<button class="delete-button" title="Delete color">
 						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 							<path fill="currentColor" fill-rule="evenodd" d="m18.412 6.5l-.801 13.617A2 2 0 0 1 15.614 22H8.386a2 2 0 0 1-1.997-1.883L5.59 6.5H3.5v-1A.5.5 0 0 1 4 5h16a.5.5 0 0 1 .5.5v1zM10 2.5h4a.5.5 0 0 1 .5.5v1h-5V3a.5.5 0 0 1 .5-.5M9 9l.5 9H11l-.4-9zm4.5 0l-.5 9h1.5l.5-9z" />
@@ -321,13 +321,13 @@ const Self = class ColorScale extends ColorElement {
 			},
 			additionalDependencies: ["info"],
 		},
-		editable: {
+		edit: {
 			parse (value) {
 				if (value === undefined || value === null || value === false || value === "false") {
 					return;
 				}
 
-				if (value === "" || value === "editable" || value === true || value === "true") {
+				if (value === "" || value === "edit" || value === true || value === "true") {
 					// Boolean attribute
 					return {
 						name: true,
@@ -345,7 +345,7 @@ const Self = class ColorScale extends ColorElement {
 					return value;
 				}
 
-				console.warn(`The specified value "${ value }" cannot be used as a value of the "editable" property.`);
+				console.warn(`The specified value "${ value }" cannot be used as a value of the "edit" property.`);
 				return;
 			},
 			reflect: {

From 0c2cda9ad8959eb691a2c644714b51c8f4d0f9d9 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Tue, 3 Dec 2024 18:53:27 +0100
Subject: [PATCH 36/62] First step in adding support for list operations

---
 src/color-scale/README.md      | 20 +++++++++++++----
 src/color-scale/color-scale.js | 41 +++++++++++++++++-----------------
 2 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/src/color-scale/README.md b/src/color-scale/README.md
index bc9c824d..ea8c924e 100644
--- a/src/color-scale/README.md
+++ b/src/color-scale/README.md
@@ -69,7 +69,7 @@ Issue: How to make them focusable??
 
 ### The `edit` attribute
 
-The `edit` attribute allows you to make the color scale editable, enabling the addition of new colors and editing or the removal of existing ones.
+The `edit` attribute allows you to make the color scale editable: adding new colors and editing, reordering, or removing existing ones.
 
 Use `edit` as a boolean attribute to make the color scale editable:
 
@@ -83,7 +83,7 @@ Use `edit` as a boolean attribute to make the color scale editable:
 
 You can specify whether the color names, color values, or both should be editable.
 
-Editing colors (including adding and removing):
+Editing colors:
 
 ```html
 <color-scale edit="color" space="oklch" colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"></color-scale>
@@ -105,10 +105,22 @@ Or both:
 "></color-scale>
 ```
 
-Keep in mind that interpolated colors are generated automatically and are not editable:
+Add `list` to enable all list operations (add, delete, reorder) in one go:
 
 ```html
-<color-scale edit="color" colors="#e3fafc, #0b7285" steps="4" space="oklch"></color-scale>
+<color-scale edit="color list" space="oklch" colors="#c5f6fa, #99e9f2, #3bc9db"></color-scale>
+```
+
+For more granular control, specify operations to be enabled:
+
+```html
+<color-scale edit="add reorder" space="oklch" colors="#c5f6fa, #99e9f2, #3bc9db"></color-scale>
+```
+
+Keep in mind that interpolated colors are generated automatically, are not editable, and cannot be reordered or deleted:
+
+```html
+<color-scale edit="color reorder delete" colors="#e3fafc, #0b7285" steps="4" space="oklch"></color-scale>
 ```
 
 The `edit` attribute is reactive and can be set programmatically:
diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 5fe95408..94c4123b 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -71,7 +71,7 @@ const Self = class ColorScale extends ColorElement {
 	}
 
 	propChangedCallback ({name, prop, detail: change}) {
-		if (name === "computedColors" && !this.edit?.name && !this.edit?.color) {
+		if (name === "computedColors" && !this.edit) {
 			// Re-render swatches
 			// Only if nothing is being edited, otherwise the input would be lost
 			// or, e.g., "red" would be converted to "rgb(100%, 0%, 0%)" right after the typing is done
@@ -79,7 +79,7 @@ const Self = class ColorScale extends ColorElement {
 		}
 
 		if (name === "edit") {
-			if (this.edit?.color) {
+			if (this.edit?.add) {
 				this._el.add_button.style.removeProperty("display");
 			}
 			else {
@@ -115,8 +115,8 @@ const Self = class ColorScale extends ColorElement {
 			// Focus the new color input and select its content
 			let swatch = this._el.swatches.lastElementChild;
 			let input = swatch.querySelector("input.color.edit");
-			input.focus();
-			input.select();
+			input?.focus();
+			input?.select();
 		}
 	}
 
@@ -142,9 +142,9 @@ const Self = class ColorScale extends ColorElement {
 
 			// Preserve the cursor position — set it to the end of the input
 			let input = swatch.querySelector("input.color.edit");
-			let end = input.value.length;
-			input.setSelectionRange(end, end);
-			input.focus();
+			let end = input?.value.length;
+			input?.setSelectionRange(end, end);
+			input?.focus();
 		}
 	}
 
@@ -216,23 +216,14 @@ const Self = class ColorScale extends ColorElement {
 
 			swatch.classList[intermediate ? "add" : "remove"]("intermediate");
 
-			if (!intermediate && (this.edit?.name || this.edit?.color)) {
-				let html = "";
-
-				if (this.edit.name) {
-					html += `<input class="color-name edit" value="${ name }" />`;
-				}
-
-				if (this.edit.color) {
-					html += `<input class="color edit" value="${ color }" />`;
-					html += `<button class="delete-button" title="Delete color">
+			if (!intermediate && this.edit) {
+				if (this.edit.delete && !swatch.querySelector(".delete-button")) {
+					swatch.insertAdjacentHTML("beforeend", `<button class="delete-button" title="Delete color">
 						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 							<path fill="currentColor" fill-rule="evenodd" d="m18.412 6.5l-.801 13.617A2 2 0 0 1 15.614 22H8.386a2 2 0 0 1-1.997-1.883L5.59 6.5H3.5v-1A.5.5 0 0 1 4 5h16a.5.5 0 0 1 .5.5v1zM10 2.5h4a.5.5 0 0 1 .5.5v1h-5V3a.5.5 0 0 1 .5-.5M9 9l.5 9H11l-.4-9zm4.5 0l-.5 9h1.5l.5-9z" />
 						</svg>
-					</button>`;
+					</button>`);
 				}
-
-				swatch.innerHTML = html;
 			}
 
 			swatch.label = name;
@@ -332,6 +323,7 @@ const Self = class ColorScale extends ColorElement {
 					return {
 						name: true,
 						color: true,
+						list: true,
 					};
 				}
 
@@ -348,6 +340,15 @@ const Self = class ColorScale extends ColorElement {
 				console.warn(`The specified value "${ value }" cannot be used as a value of the "edit" property.`);
 				return;
 			},
+			convert (value) {
+				if (value?.list) {
+					// Enable the list operations: add, delete, reorder, etc.
+					delete value.list;
+					return {...value, add: true, delete: true, reorder: true};
+				}
+
+				return value;
+			},
 			reflect: {
 				from: true,
 			},

From ea3b5f88095aea85ab3499deb4daf0bd2a62d502 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Tue, 3 Dec 2024 22:34:18 +0100
Subject: [PATCH 37/62] Re-style the Add color button

---
 src/color-scale/color-scale.css | 72 +++++++++++++++++----------------
 src/color-scale/color-scale.js  | 10 +++--
 2 files changed, 44 insertions(+), 38 deletions(-)

diff --git a/src/color-scale/color-scale.css b/src/color-scale/color-scale.css
index 8a0700ae..85dbeff5 100644
--- a/src/color-scale/color-scale.css
+++ b/src/color-scale/color-scale.css
@@ -1,10 +1,34 @@
-:host {
+[part="wrapper"] {
+	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;
+}
+
+[part="add-button"], .delete-button {
+	/* Common styles */
+	all: unset;
+
+	display: grid;
+	place-items: center;
+
+	color: var(--_foreground-color, canvastext);
+	background-color: var(--_background-color, canvas);
+
+	border: 3px solid color-mix(in oklab, buttonborder 20%,oklab(none none none / 0%));
+	border-radius: 50%;
+
+	cursor: pointer;
+
+	&:is(:hover, :focus) {
+		color: var(--_background-color, canvas);
+		background-color: var(--_foreground-color, canvastext);
+	}
 }
 
 color-swatch {
@@ -39,56 +63,36 @@ color-swatch {
 
 	.delete-button {
 		--_foreground-color: red;
-		--_background-color: canvas;
-
-		all: unset;
 
 		position: absolute;
 		inset-block-start: .3em;
 		inset-inline-end: .3em;
 
-		display: grid;
-		place-items: center;
 		inline-size: 1.2em;
 		aspect-ratio: 1;
 		padding: .2em;
 
-		color: var(--_foreground-color);
-		background-color: var(--_background-color);
-
-		border-radius: 50%;
-		border: 1px solid;
-		border-color: color-mix(
-			in oklab,
-			buttonborder 20%,
-			oklab(none none none / 0%)
-		);
 		box-shadow: 0 .05em 1em -.7em black;
 
-		cursor: pointer;
-
 		transition: opacity .2s;
-
-		&:is(:hover, :focus) {
-			color: var(--_background-color);
-			background-color: var(--_foreground-color);
-		}
 	}
 }
 
-#add-button {
-	margin-block-start: .5em;
+[part="add-button"] {
+	--_foreground-color: deeppink;
+
+	padding: .18em;
+
+	border-style: dashed;
+	border-radius: .2rem;
+
+	font: inherit;
+	font-size: 200%;
+	font-weight: bold;
 }
 
 @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%;
 		grid-row: 1 / span 2;
diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 94c4123b..6b4d4028 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -7,10 +7,12 @@ const Self = class ColorScale extends ColorElement {
 	static dependencies = new Set(["color-swatch"]);
 	static shadowStyle = true;
 	static shadowTemplate = `
-		<div id=swatches></div>
-		<slot name="add-button">
-			<button id="add-button" part="add-button">Add color</button>
-		</slot>
+		<div part="wrapper">
+			<div id=swatches></div>
+			<slot name="add-button">
+				<button id="add-button" part="add-button" title="Add color">+</button>
+			</slot>
+		</div>
 		<slot></slot>`;
 
 	constructor () {

From fad2b212b3574ef2a98c2d51e774298b3d2286f4 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Tue, 3 Dec 2024 23:48:55 +0100
Subject: [PATCH 38/62] Use classes to hide action buttons

---
 src/color-scale/color-scale.css | 12 ++++++++++++
 src/color-scale/color-scale.js  |  9 ++++++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/color-scale/color-scale.css b/src/color-scale/color-scale.css
index 85dbeff5..cc06d6e9 100644
--- a/src/color-scale/color-scale.css
+++ b/src/color-scale/color-scale.css
@@ -29,6 +29,10 @@
 		color: var(--_background-color, canvas);
 		background-color: var(--_foreground-color, canvastext);
 	}
+
+	:host(.static) & {
+		display: none;
+	}
 }
 
 color-swatch {
@@ -75,6 +79,10 @@ color-swatch {
 		box-shadow: 0 .05em 1em -.7em black;
 
 		transition: opacity .2s;
+
+		:host(.no-delete) & {
+			display: none;
+		}
 	}
 }
 
@@ -89,6 +97,10 @@ color-swatch {
 	font: inherit;
 	font-size: 200%;
 	font-weight: bold;
+
+	:host(.no-add) & {
+		display: none;
+	}
 }
 
 @supports (grid-template-columns: subgrid) {
diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 6b4d4028..61f1e2b7 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -81,11 +81,14 @@ const Self = class ColorScale extends ColorElement {
 		}
 
 		if (name === "edit") {
-			if (this.edit?.add) {
-				this._el.add_button.style.removeProperty("display");
+			if (!this.edit) {
+				this.classList.add("static");
 			}
 			else {
-				this._el.add_button.style.setProperty("display", "none");
+				this.classList.remove("static");
+				this.classList.toggle("no-add", !this.edit.add);
+				this.classList.toggle("no-delete", !this.edit.delete);
+				this.classList.toggle("no-reorder", !this.edit.reorder);
 			}
 
 			this.render();

From ae0c993ec092d9244d7aca17f1636bb75d4f32e9 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Wed, 4 Dec 2024 11:53:26 +0100
Subject: [PATCH 39/62] Merge branch 'main' into editable-attribute

---
 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 61f1e2b7..a597a0d3 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -231,8 +231,8 @@ const Self = class ColorScale extends ColorElement {
 				}
 			}
 
-			swatch.label = name;
 			swatch.color = color;
+			swatch.label = name;
 
 			if (this.info) {
 				swatch.info = this.info;

From 5c99a166f3cfae179249931f7facfdc39d717d0e Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 5 Dec 2024 12:25:58 +0100
Subject: [PATCH 40/62] Revert to `editable`

---
 src/color-scale/README.md       | 24 ++++++++++++------------
 src/color-scale/color-scale.css |  2 +-
 src/color-scale/color-scale.js  | 32 ++++++++++++++++----------------
 3 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/color-scale/README.md b/src/color-scale/README.md
index ea8c924e..9f6ce255 100644
--- a/src/color-scale/README.md
+++ b/src/color-scale/README.md
@@ -67,14 +67,14 @@ You can also create compact color scales, by simply setting `--details-style: co
 
 Issue: How to make them focusable??
 
-### The `edit` attribute
+### The `editable` attribute
 
-The `edit` attribute allows you to make the color scale editable: adding new colors and editing, reordering, or removing existing ones.
+The `editable` attribute allows you to make the color scale editable: adding new colors and editing, reordering, or removing existing ones.
 
-Use `edit` as a boolean attribute to make the color scale editable:
+Use `editable` as a boolean attribute to make the color scale editable:
 
 ```html
-<color-scale edit space="oklch" colors="
+<color-scale editable space="oklch" colors="
 	Gray 300: #d1d5db,
 	Gray 400: #9ca3af,
 	Gray 500: #6b7280
@@ -86,19 +86,19 @@ You can specify whether the color names, color values, or both should be editabl
 Editing colors:
 
 ```html
-<color-scale edit="color" space="oklch" colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"></color-scale>
+<color-scale editable="color" space="oklch" colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"></color-scale>
 ```
 
 Editing color names:
 
 ```html
-<color-scale edit="name" space="oklch" colors="#c5f6fa, #99e9f2, #3bc9db"></color-scale>
+<color-scale editable="name" space="oklch" colors="#c5f6fa, #99e9f2, #3bc9db"></color-scale>
 ```
 
 Or both:
 
 ```html
-<color-scale edit="name color" space="oklch" colors="
+<color-scale editable="name color" space="oklch" colors="
 	Gray 300: #d1d5db,
 	Gray 400: #9ca3af,
 	Gray 500: #6b7280
@@ -108,26 +108,26 @@ Or both:
 Add `list` to enable all list operations (add, delete, reorder) in one go:
 
 ```html
-<color-scale edit="color list" space="oklch" colors="#c5f6fa, #99e9f2, #3bc9db"></color-scale>
+<color-scale editable="color list" space="oklch" colors="#c5f6fa, #99e9f2, #3bc9db"></color-scale>
 ```
 
 For more granular control, specify operations to be enabled:
 
 ```html
-<color-scale edit="add reorder" space="oklch" colors="#c5f6fa, #99e9f2, #3bc9db"></color-scale>
+<color-scale editable="add reorder" space="oklch" colors="#c5f6fa, #99e9f2, #3bc9db"></color-scale>
 ```
 
 Keep in mind that interpolated colors are generated automatically, are not editable, and cannot be reordered or deleted:
 
 ```html
-<color-scale edit="color reorder delete" colors="#e3fafc, #0b7285" steps="4" space="oklch"></color-scale>
+<color-scale editable="color reorder delete" colors="#e3fafc, #0b7285" steps="4" space="oklch"></color-scale>
 ```
 
-The `edit` attribute is reactive and can be set programmatically:
+The `editable` attribute is reactive and can be set programmatically:
 
 ```html
 <label>
-	<input type="checkbox" onchange="this.parentElement.nextElementSibling.edit = this.checked">Editable
+	<input type="checkbox" onchange="this.parentElement.nextElementSibling.editable = this.checked">Editable
 </label>
 <color-scale space="oklch" colors="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd"></color-scale>
 ```
diff --git a/src/color-scale/color-scale.css b/src/color-scale/color-scale.css
index cc06d6e9..cfe90c5c 100644
--- a/src/color-scale/color-scale.css
+++ b/src/color-scale/color-scale.css
@@ -60,7 +60,7 @@ color-swatch {
 		border-radius: .2rem;
 		border: 1px solid var(--_border-color);
 
-		&:not(.edit) {
+		&:not(.editable) {
 			border-color: transparent;
 		}
 	}
diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index a597a0d3..b1fa9f74 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -48,7 +48,7 @@ const Self = class ColorScale extends ColorElement {
 	handleEvent (event) {
 		let source = event.target;
 
-		if (event.type === "input" && (!this.edit?.name || !source.matches(".color-name.edit"))) {
+		if (event.type === "input" && (!this.editable?.name || !source.matches(".color-name.editable"))) {
 			// Ignore input events from the color input: the color changes are handled by the colorchange event
 			return;
 		}
@@ -73,22 +73,22 @@ const Self = class ColorScale extends ColorElement {
 	}
 
 	propChangedCallback ({name, prop, detail: change}) {
-		if (name === "computedColors" && !this.edit) {
+		if (name === "computedColors" && !this.editable) {
 			// Re-render swatches
 			// Only if nothing is being edited, otherwise the input would be lost
 			// or, e.g., "red" would be converted to "rgb(100%, 0%, 0%)" right after the typing is done
 			this.render();
 		}
 
-		if (name === "edit") {
-			if (!this.edit) {
+		if (name === "editable") {
+			if (!this.editable) {
 				this.classList.add("static");
 			}
 			else {
 				this.classList.remove("static");
-				this.classList.toggle("no-add", !this.edit.add);
-				this.classList.toggle("no-delete", !this.edit.delete);
-				this.classList.toggle("no-reorder", !this.edit.reorder);
+				this.classList.toggle("no-add", !this.editable.add);
+				this.classList.toggle("no-delete", !this.editable.delete);
+				this.classList.toggle("no-reorder", !this.editable.reorder);
 			}
 
 			this.render();
@@ -116,10 +116,10 @@ const Self = class ColorScale extends ColorElement {
 		this.colors = {...this.colors, [name]: color};
 		this.render();
 
-		if (this.edit?.color) {
+		if (this.editable?.color) {
 			// Focus the new color input and select its content
 			let swatch = this._el.swatches.lastElementChild;
-			let input = swatch.querySelector("input.color.edit");
+			let input = swatch.querySelector("input.color.editable");
 			input?.focus();
 			input?.select();
 		}
@@ -146,7 +146,7 @@ const Self = class ColorScale extends ColorElement {
 			this.render();
 
 			// Preserve the cursor position — set it to the end of the input
-			let input = swatch.querySelector("input.color.edit");
+			let input = swatch.querySelector("input.color.editable");
 			let end = input?.value.length;
 			input?.setSelectionRange(end, end);
 			input?.focus();
@@ -191,7 +191,7 @@ const Self = class ColorScale extends ColorElement {
 		delete colors[colorName];
 		this.colors = colors;
 
-		if (this.edit) {
+		if (this.editable) {
 			// If we are in the edit mode, we need to force re-render the swatches
 			this.render();
 		}
@@ -221,8 +221,8 @@ const Self = class ColorScale extends ColorElement {
 
 			swatch.classList[intermediate ? "add" : "remove"]("intermediate");
 
-			if (!intermediate && this.edit) {
-				if (this.edit.delete && !swatch.querySelector(".delete-button")) {
+			if (!intermediate && this.editable) {
+				if (this.editable.delete && !swatch.querySelector(".delete-button")) {
 					swatch.insertAdjacentHTML("beforeend", `<button class="delete-button" title="Delete color">
 						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 							<path fill="currentColor" fill-rule="evenodd" d="m18.412 6.5l-.801 13.617A2 2 0 0 1 15.614 22H8.386a2 2 0 0 1-1.997-1.883L5.59 6.5H3.5v-1A.5.5 0 0 1 4 5h16a.5.5 0 0 1 .5.5v1zM10 2.5h4a.5.5 0 0 1 .5.5v1h-5V3a.5.5 0 0 1 .5-.5M9 9l.5 9H11l-.4-9zm4.5 0l-.5 9h1.5l.5-9z" />
@@ -317,13 +317,13 @@ const Self = class ColorScale extends ColorElement {
 			},
 			additionalDependencies: ["info"],
 		},
-		edit: {
+		editable: {
 			parse (value) {
 				if (value === undefined || value === null || value === false || value === "false") {
 					return;
 				}
 
-				if (value === "" || value === "edit" || value === true || value === "true") {
+				if (value === "" || value === "editable" || value === true || value === "true") {
 					// Boolean attribute
 					return {
 						name: true,
@@ -342,7 +342,7 @@ const Self = class ColorScale extends ColorElement {
 					return value;
 				}
 
-				console.warn(`The specified value "${ value }" cannot be used as a value of the "edit" property.`);
+				console.warn(`The specified value "${ value }" cannot be used as a value of the "editable" property.`);
 				return;
 			},
 			convert (value) {

From 74b2f43caaefa755734b3d258792db8a7e6b2bd4 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 5 Dec 2024 12:40:32 +0100
Subject: [PATCH 41/62] Add/remove the `Add color` button dynamically

---
 src/color-scale/color-scale.css |  4 ----
 src/color-scale/color-scale.js  | 17 ++++++++++++-----
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/color-scale/color-scale.css b/src/color-scale/color-scale.css
index cfe90c5c..289ba27e 100644
--- a/src/color-scale/color-scale.css
+++ b/src/color-scale/color-scale.css
@@ -97,10 +97,6 @@ color-swatch {
 	font: inherit;
 	font-size: 200%;
 	font-weight: bold;
-
-	:host(.no-add) & {
-		display: none;
-	}
 }
 
 @supports (grid-template-columns: subgrid) {
diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index b1fa9f74..99a01aef 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -9,9 +9,7 @@ const Self = class ColorScale extends ColorElement {
 	static shadowTemplate = `
 		<div part="wrapper">
 			<div id=swatches></div>
-			<slot name="add-button">
-				<button id="add-button" part="add-button" title="Add color">+</button>
-			</slot>
+			<slot name="add-button"></slot>
 		</div>
 		<slot></slot>`;
 
@@ -21,7 +19,6 @@ const Self = class ColorScale extends ColorElement {
 		this._el = {
 			slot: this.shadowRoot.querySelector("slot"),
 			swatches: this.shadowRoot.getElementById("swatches"),
-			add_button: this.shadowRoot.getElementById("add-button"),
 		};
 
 		this._slots = {
@@ -81,12 +78,22 @@ const Self = class ColorScale extends ColorElement {
 		}
 
 		if (name === "editable") {
+			if (this.editable?.add) {
+				if (!this._el.add_button) {
+					this._el.add_button = Object.assign(document.createElement("button"), {part: "add-button", title: "Add color", textContent: "+"});
+					this._slots.add_button.append(this._el.add_button);
+				}
+			}
+			else {
+				this._el.add_button?.remove();
+				this._el.add_button = null;
+			}
+
 			if (!this.editable) {
 				this.classList.add("static");
 			}
 			else {
 				this.classList.remove("static");
-				this.classList.toggle("no-add", !this.editable.add);
 				this.classList.toggle("no-delete", !this.editable.delete);
 				this.classList.toggle("no-reorder", !this.editable.reorder);
 			}

From a4f99f7686f71675921f1acbf967e2a62cff9ab4 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 5 Dec 2024 12:53:57 +0100
Subject: [PATCH 42/62] Add/remove `Delete color` buttons dynamically

---
 src/color-scale/color-scale.css | 11 ++---------
 src/color-scale/color-scale.js  | 31 +++++++++++++++----------------
 2 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/src/color-scale/color-scale.css b/src/color-scale/color-scale.css
index 289ba27e..0a5a209f 100644
--- a/src/color-scale/color-scale.css
+++ b/src/color-scale/color-scale.css
@@ -10,7 +10,8 @@
 	display: contents;
 }
 
-[part="add-button"], .delete-button {
+[part="add-button"],
+.delete-button {
 	/* Common styles */
 	all: unset;
 
@@ -29,10 +30,6 @@
 		color: var(--_background-color, canvas);
 		background-color: var(--_foreground-color, canvastext);
 	}
-
-	:host(.static) & {
-		display: none;
-	}
 }
 
 color-swatch {
@@ -79,10 +76,6 @@ color-swatch {
 		box-shadow: 0 .05em 1em -.7em black;
 
 		transition: opacity .2s;
-
-		:host(.no-delete) & {
-			display: none;
-		}
 	}
 }
 
diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 99a01aef..afce3b50 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -89,15 +89,6 @@ const Self = class ColorScale extends ColorElement {
 				this._el.add_button = null;
 			}
 
-			if (!this.editable) {
-				this.classList.add("static");
-			}
-			else {
-				this.classList.remove("static");
-				this.classList.toggle("no-delete", !this.editable.delete);
-				this.classList.toggle("no-reorder", !this.editable.reorder);
-			}
-
 			this.render();
 		}
 	}
@@ -228,13 +219,21 @@ const Self = class ColorScale extends ColorElement {
 
 			swatch.classList[intermediate ? "add" : "remove"]("intermediate");
 
-			if (!intermediate && this.editable) {
-				if (this.editable.delete && !swatch.querySelector(".delete-button")) {
-					swatch.insertAdjacentHTML("beforeend", `<button class="delete-button" title="Delete color">
-						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-							<path fill="currentColor" fill-rule="evenodd" d="m18.412 6.5l-.801 13.617A2 2 0 0 1 15.614 22H8.386a2 2 0 0 1-1.997-1.883L5.59 6.5H3.5v-1A.5.5 0 0 1 4 5h16a.5.5 0 0 1 .5.5v1zM10 2.5h4a.5.5 0 0 1 .5.5v1h-5V3a.5.5 0 0 1 .5-.5M9 9l.5 9H11l-.4-9zm4.5 0l-.5 9h1.5l.5-9z" />
-						</svg>
-					</button>`);
+			if (!intermediate) {
+				let deleteButton = swatch.querySelector(".delete-button");
+				if (this.editable?.delete) {
+					if (!deleteButton) {
+						swatch.insertAdjacentHTML("beforeend", `
+							<button class="delete-button" title="Delete color">
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+									<path fill="currentColor" fill-rule="evenodd" d="m18.412 6.5l-.801 13.617A2 2 0 0 1 15.614 22H8.386a2 2 0 0 1-1.997-1.883L5.59 6.5H3.5v-1A.5.5 0 0 1 4 5h16a.5.5 0 0 1 .5.5v1zM10 2.5h4a.5.5 0 0 1 .5.5v1h-5V3a.5.5 0 0 1 .5-.5M9 9l.5 9H11l-.4-9zm4.5 0l-.5 9h1.5l.5-9z" />
+								</svg>
+							</button>
+						`);
+					}
+				}
+				else {
+					deleteButton?.remove();
 				}
 			}
 

From 3e1d791be91cbcfdc9da34345745df5715220ec5 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 5 Dec 2024 13:13:55 +0100
Subject: [PATCH 43/62] Make the `Delete button` a part

---
 src/color-scale/color-scale.css | 6 +++---
 src/color-scale/color-scale.js  | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/color-scale/color-scale.css b/src/color-scale/color-scale.css
index 0a5a209f..3667cc0a 100644
--- a/src/color-scale/color-scale.css
+++ b/src/color-scale/color-scale.css
@@ -11,7 +11,7 @@
 }
 
 [part="add-button"],
-.delete-button {
+[part="delete-button"] {
 	/* Common styles */
 	all: unset;
 
@@ -38,7 +38,7 @@ color-swatch {
 	flex: 1;
 
 	&:not(:hover, :focus-within) {
-		.delete-button {
+		[part="delete-button"] {
 			opacity: 0;
 			transition-duration: 0ms;
 		}
@@ -62,7 +62,7 @@ color-swatch {
 		}
 	}
 
-	.delete-button {
+	[part="delete-button"] {
 		--_foreground-color: red;
 
 		position: absolute;
diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index afce3b50..3db98f29 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -62,7 +62,7 @@ const Self = class ColorScale extends ColorElement {
 		else if (event.type === "input") {
 			this.updateColorName(source.closest("color-swatch"), source.value);
 		}
-		else if (event.type === "click" && source.closest("button.delete-button")) {
+		else if (event.type === "click" && source.closest("button[part=delete-button]")) {
 			this.deleteColor(source.closest("color-swatch"));
 		}
 
@@ -220,11 +220,11 @@ const Self = class ColorScale extends ColorElement {
 			swatch.classList[intermediate ? "add" : "remove"]("intermediate");
 
 			if (!intermediate) {
-				let deleteButton = swatch.querySelector(".delete-button");
+				let deleteButton = swatch.querySelector("[part=delete-button]");
 				if (this.editable?.delete) {
 					if (!deleteButton) {
 						swatch.insertAdjacentHTML("beforeend", `
-							<button class="delete-button" title="Delete color">
+							<button part="delete-button" title="Delete color">
 								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 									<path fill="currentColor" fill-rule="evenodd" d="m18.412 6.5l-.801 13.617A2 2 0 0 1 15.614 22H8.386a2 2 0 0 1-1.997-1.883L5.59 6.5H3.5v-1A.5.5 0 0 1 4 5h16a.5.5 0 0 1 .5.5v1zM10 2.5h4a.5.5 0 0 1 .5.5v1h-5V3a.5.5 0 0 1 .5-.5M9 9l.5 9H11l-.4-9zm4.5 0l-.5 9h1.5l.5-9z" />
 								</svg>

From 710894a75702a7e1d8be667fe3dd47bc6c9fc19f Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 5 Dec 2024 16:00:50 +0100
Subject: [PATCH 44/62] [color-swatch] Add the `editable` prop and
 `labelchange` event

---
 src/color-swatch/README.md        | 22 ++++++++++++-
 src/color-swatch/color-swatch.css |  6 ++++
 src/color-swatch/color-swatch.js  | 52 +++++++++++++++++++++++++++++--
 3 files changed, 76 insertions(+), 4 deletions(-)

diff --git a/src/color-swatch/README.md b/src/color-swatch/README.md
index d95c4182..aa55767c 100644
--- a/src/color-swatch/README.md
+++ b/src/color-swatch/README.md
@@ -213,6 +213,24 @@ The `info` attribute plays quite nicely with the `--details-style: compact` styl
 <color-swatch size="large" info="oklch.l, oklch.c, oklch.h" style="--details-style: compact">oklch(70% 0.25 138)</color-swatch>
 ```
 
+### The `editable` attribute
+
+Make static swatches editable by adding the `editable` boolean attribute:
+
+```html
+<color-swatch editable label="Turquoise" value="oklch(65% 0.15 210)" size="large"></color-swatch>
+```
+
+You can also specify whether the color itself or its label should be editable:
+
+```html
+<color-swatch editable="color" label="Turquoise" value="oklch(65% 0.15 210)" size="large"></color-swatch>
+```
+
+```html
+<color-swatch editable="label" label="Turquoise" value="oklch(65% 0.15 210)" size="large"></color-swatch>
+```
+
 ### With slot content
 
 Before and after:
@@ -320,6 +338,7 @@ If you don’t, the `<html>` element will be used.
 | `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. |
 | `open` | `open` | | `null` | Force the details popup open or closed. |
+| `editable` | `editable` | `boolean` &#124; `object`  | `undefined` | Force the static swatch (or its parts, e.g., label) to be editable. |
 
 ### Getters
 
@@ -356,4 +375,5 @@ These properties are read-only.
 |------|-------------|
 | `valuechange` | Fired when the value changes for any reason, and once during initialization. |
 | `colorchange` | Fired when the color changes for any reason, and once during initialization. |
-| `gamutchange` | Fired when the gamut changes for any reason, and once during initialization. |
\ No newline at end of file
+| `gamutchange` | Fired when the gamut changes for any reason, and once during initialization. |
+| `labelchange` | Fired when the label changes for any reason, and once during initialization. |
\ No newline at end of file
diff --git a/src/color-swatch/color-swatch.css b/src/color-swatch/color-swatch.css
index 6ae2ddb5..88082f5c 100644
--- a/src/color-swatch/color-swatch.css
+++ b/src/color-swatch/color-swatch.css
@@ -176,6 +176,12 @@ slot {
 	gap: .2em;
 }
 
+[part=label] > * {
+	box-sizing: border-box;
+	inline-size: 100%;
+	font: inherit;
+}
+
 slot:not([name]) {
 	&::slotted(input) {
 		display: flex;
diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js
index b8d2d669..48e559c8 100644
--- a/src/color-swatch/color-swatch.js
+++ b/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:not([slot])");
+		let input = this._el.input = this.querySelector("input");
 
 		this.static = !input;
 
@@ -108,7 +108,18 @@ const Self = class ColorSwatch extends ColorElement {
 			}
 		}
 
-		if (name === "label") {
+		if (name === "editable") {
+			if (this.editable?.label) {
+				let input = Object.assign(document.createElement("input"), {value: this.label});
+				this._el.label.innerHTML = "";
+				this._el.label.append(input);
+				input.addEventListener("input", evt => {
+					this.label = evt.target.value;
+				});
+			}
+		}
+
+		if ((name === "label" || name === "editable") && !this.editable?.label) {
 			if (this.label.length && this.label !== this.swatchTextContent) {
 				this._el.label.textContent = this.label;
 			}
@@ -183,7 +194,7 @@ const Self = class ColorSwatch extends ColorElement {
 				return this.swatchTextContent;
 			},
 			convert (value) {
-				return value.trim();
+				return value?.trim();
 			},
 		},
 		color: {
@@ -235,6 +246,38 @@ const Self = class ColorSwatch extends ColorElement {
 				return ret;
 			},
 		},
+		editable: {
+			parse (value) {
+				if (value === undefined || value === null || value === false || value === "false") {
+					return;
+				}
+
+				if (value === "" || value === "editable" || value === true || value === "true") {
+					// Boolean attribute
+					return {
+						label: true,
+						color: true,
+					};
+				}
+
+				if (typeof value === "string") {
+					// Convert to object
+					let entries = value.split(/\s*[,\s]\s*/).map(key => [key.trim(), true]);
+					return Object.fromEntries(entries);
+				}
+
+				if (typeof value === "object") {
+					return value;
+				}
+
+				console.warn(`The specified value "${ value }" cannot be used as a value of the "editable" property.`);
+				return;
+			},
+			dependencies: ["label", "color"],
+			reflect: {
+				from: true,
+			},
+		},
 	};
 
 	static events = {
@@ -244,6 +287,9 @@ const Self = class ColorSwatch extends ColorElement {
 		valuechange: {
 			propchange: "value",
 		},
+		labelchange: {
+			propchange: "label",
+		},
 	};
 };
 

From a9cc330253025dfe37edd51079bee0edd2108389 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 5 Dec 2024 18:19:14 +0100
Subject: [PATCH 45/62] Refactor `updateColorName()`

Accept either the swatch to be updated or its index
---
 src/color-scale/color-scale.css | 14 ------
 src/color-scale/color-scale.js  | 89 ++++++++++++++++++++++++++-------
 2 files changed, 70 insertions(+), 33 deletions(-)

diff --git a/src/color-scale/color-scale.css b/src/color-scale/color-scale.css
index 3667cc0a..2970b7d5 100644
--- a/src/color-scale/color-scale.css
+++ b/src/color-scale/color-scale.css
@@ -48,20 +48,6 @@ color-swatch {
 		flex-direction: column;
 	}
 
-	.color-name, input.color {
-		--_border-color: var(--border-color, color-mix(in oklab, buttonborder 70%, oklab(none none none / 0%)));
-
-		font: inherit;
-		box-sizing: border-box;
-		padding: .1em .2em;
-		border-radius: .2rem;
-		border: 1px solid var(--_border-color);
-
-		&:not(.editable) {
-			border-color: transparent;
-		}
-	}
-
 	[part="delete-button"] {
 		--_foreground-color: red;
 
diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 3db98f29..3286ec9d 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -28,7 +28,7 @@ const Self = class ColorScale extends ColorElement {
 
 	connectedCallback () {
 		super.connectedCallback?.();
-		this._el.swatches.addEventListener("input", this);
+		this._el.swatches.addEventListener("labelchange", this, {capture: true});
 		this._el.swatches.addEventListener("colorchange", this, {capture: true});
 		this._el.swatches.addEventListener("click", this, {capture: true});
 		this._slots.add_button.addEventListener("click", this);
@@ -36,7 +36,7 @@ const Self = class ColorScale extends ColorElement {
 
 	disconnectedCallback () {
 		this.#swatches = [];
-		this._el.swatches.removeEventListener("input", this);
+		this._el.swatches.removeEventListener("labelchange", this, {capture: true});
 		this._el.swatches.removeEventListener("colorchange", this, {capture: true});
 		this._el.swatches.removeEventListener("click", this, {capture: true});
 		this._slots.add_button.removeEventListener("click", this);
@@ -45,11 +45,6 @@ const Self = class ColorScale extends ColorElement {
 	handleEvent (event) {
 		let source = event.target;
 
-		if (event.type === "input" && (!this.editable?.name || !source.matches(".color-name.editable"))) {
-			// Ignore input events from the color input: the color changes are handled by the colorchange event
-			return;
-		}
-
 		if (event.type === "click" && source === this._el.add_button || this._slots.add_button.assignedElements().includes(source)) {
 			this.addColor();
 			return;
@@ -59,8 +54,8 @@ const Self = class ColorScale extends ColorElement {
 			// Update color if it’s not an intermediate one
 			this.updateColor(source);
 		}
-		else if (event.type === "input") {
-			this.updateColorName(source.closest("color-swatch"), source.value);
+		else if (event.type === "labelchange") {
+			this.updateColorName(source);
 		}
 		else if (event.type === "click" && source.closest("button[part=delete-button]")) {
 			this.deleteColor(source.closest("color-swatch"));
@@ -70,7 +65,7 @@ const Self = class ColorScale extends ColorElement {
 	}
 
 	propChangedCallback ({name, prop, detail: change}) {
-		if (name === "computedColors" && !this.editable) {
+		if (name === "computedColors" && !this.editable?.name && !this.editable?.color) {
 			// Re-render swatches
 			// Only if nothing is being edited, otherwise the input would be lost
 			// or, e.g., "red" would be converted to "rgb(100%, 0%, 0%)" right after the typing is done
@@ -151,23 +146,63 @@ const Self = class ColorScale extends ColorElement {
 		}
 	}
 
-	updateColorName (swatch, newName) {
-		if (!swatch || !newName) {
+	updateColorName (swatch, newName = swatch?.label) {
+		if (swatch === undefined || swatch === null) {
 			return;
 		}
 
+		if (typeof swatch === "number") {
+			// The index of a swatch is passed
+			if (!this._el.swatches.children.length) {
+				console.warn("There are no colors to update.");
+				return;
+			}
+
+			if (swatch < 0 || swatch >= this._el.swatches.children.length) {
+				console.warn(`No color with index "${ swatch }". The index should be between 0 and ${ this._el.swatches.children.length - 1 } (inclusively).`);
+				return;
+			}
+
+			swatch = this._el.swatches.children[swatch];
+
+			if (newName === undefined) {
+				console.warn("You should provide a new name for the color.");
+				return;
+			}
+			else if (swatch.label === newName) {
+				// Nothing to change
+				return;
+			}
+		}
+
 		if (swatch.matches(".intermediate")) {
 			console.warn("Cannot update names of intermediate colors. They are calculated automatically and will be overwritten when the color scale is re-rendered the next time.");
 			return;
 		}
 
-		// Update the name of the existing color preserving the colors order
-		let colors = Object.entries(this.colors);
-		let index = colors.findIndex(([name, color]) => color.equals(swatch.color));
-		colors.splice(index, 1, [newName, swatch.color]);
-		swatch.label = newName;
+		// In color scales, colors must have names: either the provided one or the default.
+		// If they are not supposed to be shown, they can be hidden with CSS.
+		newName ||= swatch.color.toString();
 
-		this.colors = Object.fromEntries(colors);
+		if (this.colors[newName]) {
+			// Name already exists
+			// Append a number to the name
+			// Why? Objects cannot have duplicate keys
+			let i = 1;
+			while (this.colors[`${ newName } ${ i }`]) {
+				i++;
+			}
+			newName = `${ newName } ${ i }`;
+		}
+
+		if (swatch.label !== newName) {
+			// This will trigger the labelchange event again, and the colors will be updated on the next tick
+			swatch.label = newName;
+		}
+		else {
+			// Update the name of the existing color preserving the colors order
+			this.colors = Object.fromEntries([...this._el.swatches.children].map(swatch => [swatch.label, swatch.color]));
+		}
 	}
 
 	deleteColor (swatch) {
@@ -213,7 +248,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");
 				newSwatches.push(swatch);
 			}
 
@@ -235,6 +270,22 @@ const Self = class ColorScale extends ColorElement {
 				else {
 					deleteButton?.remove();
 				}
+
+				// Make the swatch editable, if needed
+				let editable;
+				if (this.editable?.name) {
+					(editable ??= {}).label = true;
+				}
+				if (this.editable?.color) {
+					(editable ??= {}).color = true;
+				}
+
+				if (editable) {
+					swatch.editable = editable;
+				}
+				else {
+					swatch.editable = false;
+				}
 			}
 
 			swatch.color = color;

From d856b4f3ca449b2a5c4a4f5a0c58937ad0d2435d Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 5 Dec 2024 18:56:53 +0100
Subject: [PATCH 46/62] Refactor `updateColor()`

Accept either the swatch to be updated or its index
---
 src/color-scale/color-scale.js | 34 ++++++++++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 3286ec9d..63f4a16a 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -119,19 +119,45 @@ const Self = class ColorScale extends ColorElement {
 	}
 
 	updateColor (swatch, color = swatch?.color) {
-		if (!swatch) {
+		if (swatch === undefined || swatch === null) {
 			return;
 		}
 
+		if (typeof swatch === "number") {
+			// The index of a swatch is passed
+			if (!this._el.swatches.children.length) {
+				console.warn("There are no colors to update.");
+				return;
+			}
+
+			if (swatch < 0 || swatch >= this._el.swatches.children.length) {
+				console.warn(`No color with index "${ swatch }". The index should be between 0 and ${ this._el.swatches.children.length - 1 } (inclusively).`);
+				return;
+			}
+
+			swatch = this._el.swatches.children[swatch];
+
+			if (!color) {
+				console.warn("You should provide a new color for the color swatch.");
+				return;
+			}
+			else if (swatch.color.equals(color)) {
+				// Nothing to change
+				return;
+			}
+		}
+
 		if (swatch.matches(".intermediate")) {
 			console.warn("Cannot update intermediate colors. They are calculated automatically and will be overwritten when the color scale is re-rendered the next time.");
 			return;
 		}
 
-		let colorNameElement = swatch.querySelector(".color-name");
-		let colorName = colorNameElement?.value ?? colorNameElement?.textContent ?? swatch.label;
+		if (this.colors[swatch.label].equals(color)) {
+			// Nothing to update
+			return;
+		}
 
-		this.colors = {...this.colors, [colorName]: color};
+		this.colors = {...this.colors, [swatch.label]: color};
 
 		if (this.steps) {
 			// Update the UI to reflect the new intermediate colors

From d88323c1a4890c58b094ad3612b9f32587580a67 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 5 Dec 2024 19:10:00 +0100
Subject: [PATCH 47/62] Refactor `deleteColor()`

Accept either the swatch to be deleted or its index
---
 src/color-scale/color-scale.js | 44 +++++++++++++++++++++-------------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 63f4a16a..0eb2c1d6 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -90,6 +90,20 @@ const Self = class ColorScale extends ColorElement {
 
 	#swatches = [];
 
+	#validIndex (index) {
+		if (!this._el.swatches.children.length) {
+			console.warn("There are no colors to work with.");
+			return false;
+		}
+
+		if (index < 0 || index >= this._el.swatches.children.length) {
+			console.warn(`No color with index "${ index }". The index should be from 0 up to but not including ${ this._el.swatches.children.length }.`);
+			return false;
+		}
+
+		return true;
+	}
+
 	addColor (color, name) {
 		let {name: defaultName, color: defaultColor} = this.defaultColor?.() ?? {};
 
@@ -125,13 +139,7 @@ const Self = class ColorScale extends ColorElement {
 
 		if (typeof swatch === "number") {
 			// The index of a swatch is passed
-			if (!this._el.swatches.children.length) {
-				console.warn("There are no colors to update.");
-				return;
-			}
-
-			if (swatch < 0 || swatch >= this._el.swatches.children.length) {
-				console.warn(`No color with index "${ swatch }". The index should be between 0 and ${ this._el.swatches.children.length - 1 } (inclusively).`);
+			if (!this.#validIndex(swatch)) {
 				return;
 			}
 
@@ -179,13 +187,7 @@ const Self = class ColorScale extends ColorElement {
 
 		if (typeof swatch === "number") {
 			// The index of a swatch is passed
-			if (!this._el.swatches.children.length) {
-				console.warn("There are no colors to update.");
-				return;
-			}
-
-			if (swatch < 0 || swatch >= this._el.swatches.children.length) {
-				console.warn(`No color with index "${ swatch }". The index should be between 0 and ${ this._el.swatches.children.length - 1 } (inclusively).`);
+			if (!this.#validIndex(swatch)) {
 				return;
 			}
 
@@ -232,17 +234,25 @@ const Self = class ColorScale extends ColorElement {
 	}
 
 	deleteColor (swatch) {
-		if (!swatch) {
+		if (swatch === undefined || swatch === null) {
 			return;
 		}
 
+		if (typeof swatch === "number") {
+			// The index of a swatch is passed
+			if (!this.#validIndex(swatch)) {
+				return;
+			}
+
+			swatch = this._el.swatches.children[swatch];
+		}
+
 		if (swatch.matches(".intermediate")) {
 			console.warn("Cannot delete intermediate colors. They are calculated automatically and will be re-added when the color scale is re-rendered the next time.");
 			return;
 		}
 
-		let colorNameElement = swatch.querySelector(".color-name");
-		let colorName = colorNameElement?.value ?? colorNameElement?.textContent ?? swatch.label;
+		let colorName = swatch.label;
 
 		swatch.remove();
 

From 228472f0f74a2f3c95398ca4c5fd4791488a2703 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 5 Dec 2024 22:03:50 +0100
Subject: [PATCH 48/62] [color-swatch] Make the color of a static swatch
 editable

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

diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js
index 48e559c8..0093be5e 100644
--- a/src/color-swatch/color-swatch.js
+++ b/src/color-swatch/color-swatch.js
@@ -23,6 +23,8 @@ const Self = class ColorSwatch extends ColorElement {
 			<slot name="after"></slot>
 		</div>`;
 
+	#initiallyStatic;
+
 	constructor () {
 		super();
 
@@ -37,6 +39,7 @@ const Self = class ColorSwatch extends ColorElement {
 		};
 
 		this.#updateStatic();
+		this.#initiallyStatic = this.static;
 		this._slots.default.addEventListener("slotchange", evt => this.#updateStatic());
 	}
 
@@ -117,6 +120,25 @@ const Self = class ColorSwatch extends ColorElement {
 					this.label = evt.target.value;
 				});
 			}
+
+			if (this.editable?.color) {
+				if (!input) {
+					input = document.createElement("input");
+					input.classList.add("color", "editable");
+					input.value = this.value;
+
+					// TODO: If the value comes from the swatch content, move it to <input>.
+					// But how can it be restored afterward (when <input> is removed) without breaking (slotted) swatch content?
+					// if (this.value === this.swatchTextContent) {
+					// 	[...this.childNodes].filter(n => !n.slot).forEach(n => n.remove());
+					// }
+
+					this.append(input);
+				}
+			}
+			else if (this.#initiallyStatic) {
+				input?.remove();
+			}
 		}
 
 		if ((name === "label" || name === "editable") && !this.editable?.label) {

From 114fdf64be84a99c0a22c5bc4a1b4d423929c0f2 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 5 Dec 2024 23:04:07 +0100
Subject: [PATCH 49/62] Fix regression with `addColor()`

Don't handle `*-change` events until the newly created swatch is fully initialized.
---
 src/color-scale/color-scale.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 0eb2c1d6..033c9c22 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -50,11 +50,10 @@ const Self = class ColorScale extends ColorElement {
 			return;
 		}
 
-		if (event.type === "colorchange" && source.matches("color-swatch:not(.intermediate)")) {
-			// Update color if it’s not an intermediate one
+		if (event.type === "colorchange" && source.matches("color-swatch:not(.intermediate, .ignore-updates)")) {
 			this.updateColor(source);
 		}
-		else if (event.type === "labelchange") {
+		else if (event.type === "labelchange" && source.matches("color-swatch:not(.intermediate, .ignore-updates)")) {
 			this.updateColorName(source);
 		}
 		else if (event.type === "click" && source.closest("button[part=delete-button]")) {
@@ -285,6 +284,8 @@ const Self = class ColorScale extends ColorElement {
 				swatch.setAttribute("size", "large");
 				swatch.setAttribute("part", "color-swatch");
 				swatch.setAttribute("exportparts", "swatch, info, gamut, label");
+				// We should ignore all labelchange and colorchange events until the color scale is fully rendered
+				swatch.classList.add("ignore-updates");
 				newSwatches.push(swatch);
 			}
 
@@ -326,7 +327,6 @@ const Self = class ColorScale extends ColorElement {
 
 			swatch.color = color;
 			swatch.label = name;
-
 			if (this.info) {
 				swatch.info = this.info;
 			}
@@ -340,6 +340,9 @@ const Self = class ColorScale extends ColorElement {
 			// Remove but keep them around in this.#swatches
 			[...this._el.swatches.children].slice(colorCount).forEach(child => child.remove());
 		}
+
+		// The scale is fully rendered, so we no longer need to ignore labelchange and colorchange events from the swatches
+		[...this._el.swatches.children].forEach(swatch => swatch.classList.remove("ignore-updates"));
 	}
 
 	static props = {

From 9951c34bd67ef786fc27ffbb45abceba0bc3e88e Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 5 Dec 2024 23:08:28 +0100
Subject: [PATCH 50/62] Fix tab order

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

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 033c9c22..5ca7b19f 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -292,22 +292,6 @@ const Self = class ColorScale extends ColorElement {
 			swatch.classList[intermediate ? "add" : "remove"]("intermediate");
 
 			if (!intermediate) {
-				let deleteButton = swatch.querySelector("[part=delete-button]");
-				if (this.editable?.delete) {
-					if (!deleteButton) {
-						swatch.insertAdjacentHTML("beforeend", `
-							<button part="delete-button" title="Delete color">
-								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-									<path fill="currentColor" fill-rule="evenodd" d="m18.412 6.5l-.801 13.617A2 2 0 0 1 15.614 22H8.386a2 2 0 0 1-1.997-1.883L5.59 6.5H3.5v-1A.5.5 0 0 1 4 5h16a.5.5 0 0 1 .5.5v1zM10 2.5h4a.5.5 0 0 1 .5.5v1h-5V3a.5.5 0 0 1 .5-.5M9 9l.5 9H11l-.4-9zm4.5 0l-.5 9h1.5l.5-9z" />
-								</svg>
-							</button>
-						`);
-					}
-				}
-				else {
-					deleteButton?.remove();
-				}
-
 				// Make the swatch editable, if needed
 				let editable;
 				if (this.editable?.name) {
@@ -323,6 +307,22 @@ const Self = class ColorScale extends ColorElement {
 				else {
 					swatch.editable = false;
 				}
+
+				let deleteButton = swatch.querySelector("[part=delete-button]");
+				if (this.editable?.delete) {
+					if (!deleteButton) {
+						swatch.insertAdjacentHTML("beforeend", `
+							<button part="delete-button" title="Delete color">
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+									<path fill="currentColor" fill-rule="evenodd" d="m18.412 6.5l-.801 13.617A2 2 0 0 1 15.614 22H8.386a2 2 0 0 1-1.997-1.883L5.59 6.5H3.5v-1A.5.5 0 0 1 4 5h16a.5.5 0 0 1 .5.5v1zM10 2.5h4a.5.5 0 0 1 .5.5v1h-5V3a.5.5 0 0 1 .5-.5M9 9l.5 9H11l-.4-9zm4.5 0l-.5 9h1.5l.5-9z" />
+								</svg>
+							</button>
+						`);
+					}
+				}
+				else {
+					deleteButton?.remove();
+				}
 			}
 
 			swatch.color = color;

From 3f5e90d41f599dc9278ae185108c1aea466bbb80 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 5 Dec 2024 23:20:13 +0100
Subject: [PATCH 51/62] Improve docs

---
 src/color-scale/README.md | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/color-scale/README.md b/src/color-scale/README.md
index 9f6ce255..ef5f5b68 100644
--- a/src/color-scale/README.md
+++ b/src/color-scale/README.md
@@ -86,29 +86,25 @@ You can specify whether the color names, color values, or both should be editabl
 Editing colors:
 
 ```html
-<color-scale editable="color" space="oklch" colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"></color-scale>
+<color-scale editable="color" space="oklch" colors="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd, Blue: #7bd3ea"></color-scale>
 ```
 
 Editing color names:
 
 ```html
-<color-scale editable="name" space="oklch" colors="#c5f6fa, #99e9f2, #3bc9db"></color-scale>
+<color-scale editable="name" space="oklch" colors="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd, Blue: #7bd3ea"></color-scale>
 ```
 
 Or both:
 
 ```html
-<color-scale editable="name color" space="oklch" colors="
-	Gray 300: #d1d5db,
-	Gray 400: #9ca3af,
-	Gray 500: #6b7280
-"></color-scale>
+<color-scale editable="name color" space="oklch" colors="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd, Blue: #7bd3ea"></color-scale>
 ```
 
 Add `list` to enable all list operations (add, delete, reorder) in one go:
 
 ```html
-<color-scale editable="color list" space="oklch" colors="#c5f6fa, #99e9f2, #3bc9db"></color-scale>
+<color-scale editable="name color list" space="oklch" colors="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd, Blue: #7bd3ea"></color-scale>
 ```
 
 For more granular control, specify operations to be enabled:
@@ -120,7 +116,7 @@ For more granular control, specify operations to be enabled:
 Keep in mind that interpolated colors are generated automatically, are not editable, and cannot be reordered or deleted:
 
 ```html
-<color-scale editable="color reorder delete" colors="#e3fafc, #0b7285" steps="4" space="oklch"></color-scale>
+<color-scale editable="color reorder delete" colors="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd" steps="1" space="oklch"></color-scale>
 ```
 
 The `editable` attribute is reactive and can be set programmatically:

From cd6eb65352b2b33c4447e891f716c537784e399b Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Fri, 6 Dec 2024 00:12:26 +0100
Subject: [PATCH 52/62] Correctly remove colors in scales with interpolation

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

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 5ca7b19f..c2dffdd0 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -253,7 +253,9 @@ const Self = class ColorScale extends ColorElement {
 
 		let colorName = swatch.label;
 
-		swatch.remove();
+		if (!this.steps) {
+			swatch.remove();
+		}
 
 		let colors = {...this.colors};
 		delete colors[colorName];
@@ -284,11 +286,12 @@ const Self = class ColorScale extends ColorElement {
 				swatch.setAttribute("size", "large");
 				swatch.setAttribute("part", "color-swatch");
 				swatch.setAttribute("exportparts", "swatch, info, gamut, label");
-				// We should ignore all labelchange and colorchange events until the color scale is fully rendered
-				swatch.classList.add("ignore-updates");
 				newSwatches.push(swatch);
 			}
 
+			// We should ignore all labelchange and colorchange events until the color scale is fully rendered
+			swatch.classList.add("ignore-updates");
+
 			swatch.classList[intermediate ? "add" : "remove"]("intermediate");
 
 			if (!intermediate) {

From cf3c4c0821879cedbda113fb120708ef0695e22f Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Wed, 11 Dec 2024 18:31:12 +0100
Subject: [PATCH 53/62] Address feedback: Use separate parts for action buttons

---
 src/color-scale/color-scale.css | 9 ++++-----
 src/color-scale/color-scale.js  | 8 ++++----
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/color-scale/color-scale.css b/src/color-scale/color-scale.css
index 2970b7d5..d54d2a4f 100644
--- a/src/color-scale/color-scale.css
+++ b/src/color-scale/color-scale.css
@@ -10,8 +10,7 @@
 	display: contents;
 }
 
-[part="add-button"],
-[part="delete-button"] {
+[part~="button"] {
 	/* Common styles */
 	all: unset;
 
@@ -38,7 +37,7 @@ color-swatch {
 	flex: 1;
 
 	&:not(:hover, :focus-within) {
-		[part="delete-button"] {
+		[part="delete button"] {
 			opacity: 0;
 			transition-duration: 0ms;
 		}
@@ -48,7 +47,7 @@ color-swatch {
 		flex-direction: column;
 	}
 
-	[part="delete-button"] {
+	[part="delete button"] {
 		--_foreground-color: red;
 
 		position: absolute;
@@ -65,7 +64,7 @@ color-swatch {
 	}
 }
 
-[part="add-button"] {
+[part="add button"] {
 	--_foreground-color: deeppink;
 
 	padding: .18em;
diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index c2dffdd0..39b1c223 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -56,7 +56,7 @@ const Self = class ColorScale extends ColorElement {
 		else if (event.type === "labelchange" && source.matches("color-swatch:not(.intermediate, .ignore-updates)")) {
 			this.updateColorName(source);
 		}
-		else if (event.type === "click" && source.closest("button[part=delete-button]")) {
+		else if (event.type === "click" && source.closest(`button[part="delete button"]`)) {
 			this.deleteColor(source.closest("color-swatch"));
 		}
 
@@ -74,7 +74,7 @@ const Self = class ColorScale extends ColorElement {
 		if (name === "editable") {
 			if (this.editable?.add) {
 				if (!this._el.add_button) {
-					this._el.add_button = Object.assign(document.createElement("button"), {part: "add-button", title: "Add color", textContent: "+"});
+					this._el.add_button = Object.assign(document.createElement("button"), {part: "add button", title: "Add color", textContent: "+"});
 					this._slots.add_button.append(this._el.add_button);
 				}
 			}
@@ -311,11 +311,11 @@ const Self = class ColorScale extends ColorElement {
 					swatch.editable = false;
 				}
 
-				let deleteButton = swatch.querySelector("[part=delete-button]");
+				let deleteButton = swatch.querySelector(`[part="delete button"]`);
 				if (this.editable?.delete) {
 					if (!deleteButton) {
 						swatch.insertAdjacentHTML("beforeend", `
-							<button part="delete-button" title="Delete color">
+							<button part="delete button" title="Delete color">
 								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 									<path fill="currentColor" fill-rule="evenodd" d="m18.412 6.5l-.801 13.617A2 2 0 0 1 15.614 22H8.386a2 2 0 0 1-1.997-1.883L5.59 6.5H3.5v-1A.5.5 0 0 1 4 5h16a.5.5 0 0 1 .5.5v1zM10 2.5h4a.5.5 0 0 1 .5.5v1h-5V3a.5.5 0 0 1 .5-.5M9 9l.5 9H11l-.4-9zm4.5 0l-.5 9h1.5l.5-9z" />
 								</svg>

From d0eee108f4e522c332cfd322d5b2ce142e4f3e0a Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Wed, 11 Dec 2024 18:49:57 +0100
Subject: [PATCH 54/62] Fix some issues with styles in Safari

Buttons in Safari don't have borders. As a result, the `Add button` doesn't look like a swatch (like it does in other browsers).
---
 src/color-scale/color-scale.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/color-scale/color-scale.css b/src/color-scale/color-scale.css
index d54d2a4f..1f87a44d 100644
--- a/src/color-scale/color-scale.css
+++ b/src/color-scale/color-scale.css
@@ -20,7 +20,7 @@
 	color: var(--_foreground-color, canvastext);
 	background-color: var(--_background-color, canvas);
 
-	border: 3px solid color-mix(in oklab, buttonborder 20%,oklab(none none none / 0%));
+	border: 3px solid color-mix(in oklab, oklab(50% 0 0) 20%, oklab(none none none / 0%));
 	border-radius: 50%;
 
 	cursor: pointer;
@@ -55,7 +55,6 @@ color-swatch {
 		inset-inline-end: .3em;
 
 		inline-size: 1.2em;
-		aspect-ratio: 1;
 		padding: .2em;
 
 		box-shadow: 0 .05em 1em -.7em black;

From d26f9322571b9addac65778bb662f6fd54904b25 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 12 Dec 2024 11:52:02 +0100
Subject: [PATCH 55/62] Address feedback: Add the icon source and remove the
 namespace (we don't need to use it with inline SVGs)

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

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 39b1c223..aea09afa 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -314,9 +314,10 @@ const Self = class ColorScale extends ColorElement {
 				let deleteButton = swatch.querySelector(`[part="delete button"]`);
 				if (this.editable?.delete) {
 					if (!deleteButton) {
+						// The icon is from https://iconify.design/
 						swatch.insertAdjacentHTML("beforeend", `
 							<button part="delete button" title="Delete color">
-								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+								<svg viewBox="0 0 24 24">
 									<path fill="currentColor" fill-rule="evenodd" d="m18.412 6.5l-.801 13.617A2 2 0 0 1 15.614 22H8.386a2 2 0 0 1-1.997-1.883L5.59 6.5H3.5v-1A.5.5 0 0 1 4 5h16a.5.5 0 0 1 .5.5v1zM10 2.5h4a.5.5 0 0 1 .5.5v1h-5V3a.5.5 0 0 1 .5-.5M9 9l.5 9H11l-.4-9zm4.5 0l-.5 9h1.5l.5-9z" />
 								</svg>
 							</button>

From 84d27d21900416e083a88409c5c4b7421b2f7765 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 12 Dec 2024 11:58:25 +0100
Subject: [PATCH 56/62] Address feedback: Use a middle gray as the default
 color

---
 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 aea09afa..d7978888 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -107,7 +107,7 @@ const Self = class ColorScale extends ColorElement {
 		let {name: defaultName, color: defaultColor} = this.defaultColor?.() ?? {};
 
 		name ??= defaultName ?? "New color";
-		color ??= defaultColor ?? this.computedColors.at(-1)?.color ?? new Self.Color("#f06");
+		color ??= defaultColor ?? this.computedColors.at(-1)?.color ?? new Self.Color("oklab", [0.5, 0, 0]);
 
 		if (this.colors[name]) {
 			// Name already exists

From 6076669e575aa6e29449a84e7d86c0f974005d83 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 12 Dec 2024 12:40:31 +0100
Subject: [PATCH 57/62] Address feedback: Make `defaultColor` a JS prop, not a
 function

---
 src/color-scale/README.md      | 11 ++++++++---
 src/color-scale/color-scale.js | 13 +++++++------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/color-scale/README.md b/src/color-scale/README.md
index ef5f5b68..0da93281 100644
--- a/src/color-scale/README.md
+++ b/src/color-scale/README.md
@@ -143,14 +143,19 @@ Or don't provide any of them. In that case, the added swatch will get the color
 ```
 
 Don't want added swatches to get the color of the last one? No problem. You can change that, too.
-Add the `defaultColor()` method to the color scale and return an object with the desired color and (optional) name from it:
+Set the `defaultColor` property of the color scale to the desired color. If the value of the property is a color object,
+you can give the color a name by adding the `name` property to it:
 
 ```html
 <button onclick="this.nextElementSibling.addColor()">Add my color</button>
 <color-scale id="custom_color" space="oklch" colors="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd"></color-scale>
 
-<script>
-	custom_color.defaultColor = () => ({ color: "#f06", name: "My awesome color" });
+<script type="module">
+	import Color from "https://colorjs.io/dist/color.js";
+
+	let color = new Color("#f06");
+	color.name = "My awesome color";
+	custom_color.defaultColor = color;
 </script>
 ```
 
diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index d7978888..91f3e40f 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -104,10 +104,8 @@ const Self = class ColorScale extends ColorElement {
 	}
 
 	addColor (color, name) {
-		let {name: defaultName, color: defaultColor} = this.defaultColor?.() ?? {};
-
-		name ??= defaultName ?? "New color";
-		color ??= defaultColor ?? this.computedColors.at(-1)?.color ?? new Self.Color("oklab", [0.5, 0, 0]);
+		color ??= this.defaultColor;
+		name ??= color?.name || "New color";
 
 		if (this.colors[name]) {
 			// Name already exists
@@ -459,8 +457,11 @@ const Self = class ColorScale extends ColorElement {
 			},
 		},
 		defaultColor: {
-			type: {
-				is: Function,
+			get type () {
+				return Self.Color;
+			},
+			default () {
+				return this.computedColors.at(-1)?.color ?? new Self.Color("oklab", [0.5, 0, 0]);
 			},
 			reflect: false,
 		},

From aea75f6b155ade6a66091f533de96b59d313fbe6 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 12 Dec 2024 13:55:50 +0100
Subject: [PATCH 58/62] Address feedback: Fix layout issues on small devices

---
 src/color-scale/color-scale.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/color-scale/color-scale.css b/src/color-scale/color-scale.css
index 1f87a44d..75268cb6 100644
--- a/src/color-scale/color-scale.css
+++ b/src/color-scale/color-scale.css
@@ -47,6 +47,17 @@ color-swatch {
 		flex-direction: column;
 	}
 
+	&::part(label) {
+		min-inline-size: initial;
+
+		word-break: break-all;
+		overscroll-behavior: contain;
+	}
+
+	input {
+		min-inline-size: initial;
+	}
+
 	[part="delete button"] {
 		--_foreground-color: red;
 

From 71000c4b25332e0a789a830bef08b7fa81f4f4eb Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 12 Dec 2024 15:33:37 +0100
Subject: [PATCH 59/62] Address feedback: Make the label edit UI less prominent

---
 src/color-swatch/color-swatch.css | 36 +++++++++++++++++++++++++++----
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/color-swatch/color-swatch.css b/src/color-swatch/color-swatch.css
index 88082f5c..c7b32373 100644
--- a/src/color-swatch/color-swatch.css
+++ b/src/color-swatch/color-swatch.css
@@ -176,10 +176,38 @@ slot {
 	gap: .2em;
 }
 
-[part=label] > * {
-	box-sizing: border-box;
-	inline-size: 100%;
-	font: inherit;
+[part=label] {
+	display: grid;
+	grid-template-areas: "label";
+
+	& > * {
+		box-sizing: border-box;
+		inline-size: 100%;
+		font: inherit;
+
+		grid-area: label;
+
+		&:is(input:not(:focus)) {
+			border-color: transparent;
+		}
+	}
+
+	&:has(input:not(:focus))::after {
+		/* Icon from https://iconify.design/ */
+		content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><title>Click to edit</title><path fill="canvastext" d="m53.922 16.202l1.404-1.423c.674-.692.674-1.61.019-2.246l-.45-.449c-.598-.599-1.534-.543-2.17.094l-1.404 1.385Zm-21.505 19.39l3.818-1.703l16.303-16.283l-2.62-2.602l-16.285 16.283l-1.796 3.688c-.15.318.225.767.58.617M5.484 47.908h36.834c3.538 0 5.465-1.853 5.465-5.39V27.02l-3.013 3.013v12.634c0 1.554-.88 2.433-2.433 2.433H5.447c-1.554 0-2.434-.88-2.434-2.433v-15.74c0-1.554.88-2.434 2.434-2.434h30.302l2.826-2.807H5.484C1.947 21.686 0 23.539 0 27.076v15.441c0 3.538 1.947 5.39 5.484 5.39m4.735-10.706c1.33 0 2.415-1.086 2.415-2.396a2.404 2.404 0 0 0-2.415-2.396a2.39 2.39 0 0 0-2.395 2.396a2.4 2.4 0 0 0 2.395 2.396m7.524 0c1.33 0 2.415-1.086 2.415-2.396a2.404 2.404 0 0 0-2.415-2.396a2.393 2.393 0 0 0-2.414 2.396a2.404 2.404 0 0 0 2.414 2.396m7.506 0a2.413 2.413 0 0 0 2.395-2.396a2.4 2.4 0 0 0-2.395-2.396a2.404 2.404 0 0 0-2.415 2.396c0 1.31 1.086 2.396 2.415 2.396"/></svg>');
+		grid-area: label;
+		align-self: center;
+		justify-self: end;
+
+		--_icon-size: 1.3em;
+		inline-size: var(--_icon-size);
+		block-size: var(--_icon-size);
+		padding: 0 .2em .3em 1em;
+		background: linear-gradient(to right, transparent, canvas .8em);
+
+		/* Don't block interactions with the underlying element */
+		pointer-events: none;
+	}
 }
 
 slot:not([name]) {

From 0e6276df22c2ed247d726be6fed15cbcf10436b1 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 12 Dec 2024 16:13:45 +0100
Subject: [PATCH 60/62] Address feedback: Use `document.activeElement`

---
 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 91f3e40f..0a022622 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -64,7 +64,7 @@ const Self = class ColorScale extends ColorElement {
 	}
 
 	propChangedCallback ({name, prop, detail: change}) {
-		if (name === "computedColors" && !this.editable?.name && !this.editable?.color) {
+		if (name === "computedColors" && this !== document.activeElement) {
 			// Re-render swatches
 			// Only if nothing is being edited, otherwise the input would be lost
 			// or, e.g., "red" would be converted to "rgb(100%, 0%, 0%)" right after the typing is done

From 16f079407a1e502ff0d15a37dcf11aa655fdf76e Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 12 Dec 2024 16:14:23 +0100
Subject: [PATCH 61/62] Fix bug when multiple `input`s could be created

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

diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js
index 0093be5e..8988cfe2 100644
--- a/src/color-swatch/color-swatch.js
+++ b/src/color-swatch/color-swatch.js
@@ -122,6 +122,7 @@ const Self = class ColorSwatch extends ColorElement {
 			}
 
 			if (this.editable?.color) {
+				input ??= this.querySelector("input.color.editable");
 				if (!input) {
 					input = document.createElement("input");
 					input.classList.add("color", "editable");

From 49fb4d67901f0bc4634aba4617c4baab38850f04 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 12 Dec 2024 16:43:12 +0100
Subject: [PATCH 62/62] Don't render already rendered scales

---
 src/color-scale/color-scale.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index 0a022622..0e7e9f5e 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -118,7 +118,9 @@ const Self = class ColorScale extends ColorElement {
 		}
 
 		this.colors = {...this.colors, [name]: color};
-		this.render();
+		if (this === document.activeElement) {
+			this.render();
+		}
 
 		if (this.editable?.color) {
 			// Focus the new color input and select its content
@@ -167,7 +169,9 @@ const Self = class ColorScale extends ColorElement {
 		if (this.steps) {
 			// Update the UI to reflect the new intermediate colors
 			// If there are no intermediate colors, the UI is already up-to-date
-			this.render();
+			if (this === document.activeElement) {
+				this.render();
+			}
 
 			// Preserve the cursor position — set it to the end of the input
 			let input = swatch.querySelector("input.color.editable");
@@ -259,7 +263,7 @@ const Self = class ColorScale extends ColorElement {
 		delete colors[colorName];
 		this.colors = colors;
 
-		if (this.editable) {
+		if (this === document.activeElement) {
 			// If we are in the edit mode, we need to force re-render the swatches
 			this.render();
 		}