From d855757b36ebd4e10cd3239374da14eabd82af9f Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 18 Jun 2024 14:18:19 +0300
Subject: [PATCH] [color-swatch] `color` attribute to `value` attribute, see
 #73

---
 src/color-swatch/README.md       | 10 +++++-----
 src/color-swatch/color-swatch.js |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/color-swatch/README.md b/src/color-swatch/README.md
index 0658998d..ebcaf84d 100644
--- a/src/color-swatch/README.md
+++ b/src/color-swatch/README.md
@@ -76,9 +76,9 @@ You can also use `open="false"` to force it to be closed regardless of interacti
 </div>
 ```
 
-### The `color` attribute
+### The `value` attribute
 
-You can provide the color via the `color` attribute,
+You can provide the color via the `value` attribute,
 which can be more convenient when you have slotted content.
 
 In that case, the content of the element is merely presentational
@@ -98,14 +98,14 @@ If you don’t specify any content, no text will be shown.
 <td>
 
 ```html
-<color-swatch color="oklch(70% 0.25 138)" size="large">red</color-swatch>
+<color-swatch value="oklch(70% 0.25 138)" size="large">red</color-swatch>
 ```
 
 </td>
 <td>
 
 ```html
-<color-swatch color="oklch(70% 0.25 138)" size="large">
+<color-swatch value="oklch(70% 0.25 138)" size="large">
 	<input />
 </color-swatch>
 ```
@@ -121,7 +121,7 @@ You can also use this as a property when creating color swatches dynamically:
 <div id="future_swatch_container"></div>
 <script>
 let swatch = document.createElement("color-swatch");
-swatch.color = "oklch(65% 0.15 210)";
+swatch.value = "oklch(65% 0.15 210)";
 swatch.setAttribute("size", "large");
 swatch.textContent = "Turquoise";
 future_swatch_container.append(swatch);
diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js
index ba38fddf..4f5dd3e0 100644
--- a/src/color-swatch/color-swatch.js
+++ b/src/color-swatch/color-swatch.js
@@ -161,8 +161,8 @@ const Self = class ColorSwatch extends NudeElement {
 				return [...this.childNodes].filter(n => !n.slot).map(n => n.textContent).join("").trim();
 			},
 			reflect: {
-				from: "color",
-			}
+				from: true,
+			},
 		},
 		color: {
 			type: Color,