Some code tweaks

- Rename: remove button → delete button
- Show the delete color button on interaction
- Don't use slots in selectors
- Remove redundant comments

Author: DmitrySharabin

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);

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;