From d411d6645e8067457da815f4d57dd9b7ebee9f61 Mon Sep 17 00:00:00 2001
From: Dmitry Sharabin <dmitrysharabin@gmail.com>
Date: Thu, 10 Oct 2024 17:11:03 +0200
Subject: [PATCH] [color-chart] Add support for the `info` prop

---
 src/color-chart/README.md      | 15 +++++++++++++++
 src/color-chart/color-chart.js |  8 ++++++++
 2 files changed, 23 insertions(+)

diff --git a/src/color-chart/README.md b/src/color-chart/README.md
index 3ca0bbbf..bac1e8c0 100644
--- a/src/color-chart/README.md
+++ b/src/color-chart/README.md
@@ -39,6 +39,20 @@ You can also specify a whole label, and if it contains a number, the number will
 
 _(Colors courtesy of Tailwind)_
 
+### The `info` attribute
+
+You can use the `info` attribute to show information about the color scale points. Currently, the only type of information supported is color coords (in any color space), but more will be added in the future.
+
+The format of this attribute is analogous to the one of [`<color-swatch>`](../color-swatch/#the-info-attribute).
+
+```html
+<color-chart y="oklch.c" info="L: oklch.l, C: oklch.c, H: oklch.h">
+	<color-scale colors="50: #eff6ff, 100: #dbeafe, 200: #bfdbfe, 300: #93c5fd, 400: #60a5fa, 500: #3b82f6, 600: #2563eb, 700: #1d4ed8, 800: #1e40af, 900: #1e3a8a, 950: #172554"></color-scale>
+	<color-scale colors="50: #ecfeff, 100: #cffafe, 200: #a5f3fc, 300: #67e8f9, 400: #22d3ee, 500: #06b6d4, 600: #0891b2, 700: #0e7490, 800: #155e75, 900: #164e63, 950: #083344"></color-scale>
+	<color-scale colors="50: #f0fdfa, 100: #ccfbf1, 200: #99f6e4, 300: #5eead4, 400: #2dd4bf, 500: #14b8a6, 600: #0d9488, 700: #0f766e, 800: #115e59, 900: #134e4a, 950: #042f2e"></color-scale>
+</color-chart>
+```
+
 Reactivity:
 
 ```html
@@ -64,6 +78,7 @@ Reactivity:
 |-----------|----------|---------------|---------------|-------------|
 | `x` | `x` | `string` | `null` | The coord to plot on the X axis, if any |
 | `y` | `y` | `string` | `"oklch.l"` | The coord to plot on the Y axis, if any |
+| `info` | `info` | `string` | - | Comma-separated list of coords of the color point to be shown. |
 
 ### Events
 
diff --git a/src/color-chart/color-chart.js b/src/color-chart/color-chart.js
index 68a2f5e9..0ed98eff 100644
--- a/src/color-chart/color-chart.js
+++ b/src/color-chart/color-chart.js
@@ -178,6 +178,12 @@ const Self = class ColorChart extends NudeElement {
 			// Re-render swatches
 			this.render(evt);
 		}
+
+		if (name === "info") {
+			for (let colorScale of this.children) {
+				colorScale.info = this.info;
+			}
+		}
 	}
 
 	static props = {
@@ -198,6 +204,8 @@ const Self = class ColorChart extends NudeElement {
 				return this.yResolved.space;
 			},
 		},
+
+		info: {},
 	};
 };