[color-scale] editable prop (MVP)

src/color-scale/README.md

@@ -67,6 +67,98 @@ You can also create compact color scales, by simply setting `--details-style: co
 
 Issue: How to make them focusable??
 
+### The `editable` attribute
+
+The `editable` attribute allows you to make the color scale editable: adding new colors and editing, reordering, or removing 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:
+
+```html
+<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="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd, Blue: #7bd3ea"></color-scale>
+```
+
+Or both:
+
+```html
+<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="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:
+
+```html
+<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 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:
+
+```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"></color-scale>
+```
+
+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.
+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 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>
+```
+
 <!--
 If you want to insert interpolated colors only in specific places, you can use empty values:
 

src/color-scale/color-scale.css

@@ -1,26 +1,94 @@
-: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~="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, oklab(50% 0 0) 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 {
+	position: relative;
 	margin: 0;
 	flex: 1;
+
+	&:not(:hover, :focus-within) {
+		[part="delete button"] {
+			opacity: 0;
+			transition-duration: 0ms;
+		}
+	}
+
+	&::part(color) {
+		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;
+
+		position: absolute;
+		inset-block-start: .3em;
+		inset-inline-end: .3em;
+
+		inline-size: 1.2em;
+		padding: .2em;
+
+		box-shadow: 0 .05em 1em -.7em black;
+
+		transition: opacity .2s;
+	}
+}
+
+[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;
@@ -37,4 +105,4 @@ color-swatch {
 			grid-row: 1;
 		}
 	}
-}
+}