color-elements 0.0.2 → 0.0.4

package/src/color-inline/color-inline.js

@@ -1,62 +1,34 @@
-import Color from "../common/color.js";
+import ColorElement from "../common/color-element.js";
 
-let styleURL = new URL("./color-inline.css", import.meta.url);
-
-export default class ColorInline extends HTMLElement {
-	#swatch;
-
-	constructor () {
-		super();
-		this.attachShadow({mode: "open"});
-		this.shadowRoot.innerHTML = `<style>@import url("${ styleURL }");</style>
+const Self = class ColorInline extends ColorElement {
+	static tagName = "color-inline";
+	static url = import.meta.url;
+	static styles = "./color-inline.css";
+	static shadowTemplate = `
 		<div part="swatch-wrapper">
 			<div id="swatch" part="swatch"></div>
 			<slot></slot>
 		</div>`;
-		this.#swatch = this.shadowRoot.querySelector("#swatch");
-		this.attributeChangedCallback();
-	}
 
-	connectedCallback () {
-		this.#render();
-		ColorInline.#mo.observe(this, {childList: true, subtree: true, characterData: true});
-	}
-
-	#value;
-	get value () {
-		return this.#value;
-	}
-	set value (value) {
-		this.#value = value;
-		this.#render();
-	}
+	constructor () {
+		super();
 
-	#color;
-	get color () {
-		return this.#color;
+		this._el = {};
+		this._el.swatch = this.shadowRoot.querySelector("#swatch");
 	}
 
-	#render () {
-		let colorText = this.value || this.textContent;
-
-		try {
-			this.#color = new Color(colorText);
-			this.#swatch.style.cssText = `--color: ${this.#color.display()}`;
-			this.#swatch.classList.remove("invalid");
-		}
-		catch (e) {
-			this.#color = null;
-			this.#swatch.classList.add("invalid");
-		}
+	connectedCallback () {
+		super.connectedCallback?.();
+		Self.#mo.observe(this, {childList: true, subtree: true, characterData: true});
 	}
 
-	static get observedAttributes () {
-		return ["value"];
-	}
+	propChangedCallback ({name, prop, detail: change}) {
+		if (name === "color") {
+			let isValid = this.color !== null;
+			this._el.swatch.classList.toggle("invalid", !isValid);
 
-	attributeChangedCallback (name, newValue) {
-		if (!name && this.hasAttribute("value") || name === "value") {
-			this.value = this.getAttribute("value");
+			let colorString = this.color?.display();
+			this._el.swatch.style.setProperty("--color", colorString);
 		}
 	}
 
@@ -69,11 +41,45 @@ export default class ColorInline extends HTMLElement {
 			}
 
 			if (target) {
-				target.#render();
+				target.value = target.textContent.trim();
 			}
 		}
 	});
-}
 
+	static props = {
+		value: {
+			type: String,
+			default () {
+				return this.textContent.trim();
+			},
+		},
+		color: {
+			get type () {
+				return Self.Color;
+			},
+			defaultProp: "value",
+			parse (value) {
+				if (!value) {
+					return null;
+				}
+
+				return Self.Color.get(value);
+			},
+			reflect: false,
+		},
+	};
+
+	static events = {
+		colorchange: {
+			propchange: "color",
+		},
+		valuechange: {
+			propchange: "value",
+		},
+	};
+};
+
+
+Self.define();
 
-customElements.define("color-inline", ColorInline);
+export default Self;

package/src/color-picker/README.md

@@ -14,6 +14,20 @@ Color spaces not supported by the browser also work:
 <color-picker space="okhsl" color="color(--okhsl 180 50% 50%)"></color-picker>
 ```
 
+If no color space or color is provided, the default ones will be used: `oklch` for the space and `oklch(50% 50% 180)` for the color.
+
+```html
+<color-picker></color-picker>
+```
+
+### The `alpha` attribute
+
+Colors with the alpha channel are also supported. Add the `alpha` boolean attribute to show the alpha channel:
+
+```html
+<color-picker space="oklch" color="oklch(60% 30% 180 / 0.6)" alpha></color-picker>
+```
+
 ### Slots
 
 ```html
@@ -22,6 +36,29 @@ Color spaces not supported by the browser also work:
 </color-picker>
 ```
 
+You can use your component instead of the default color swatch:
+
+```html
+<color-picker space="oklch" color="oklch(50% 50% 180)"
+              oncolorchange="this.firstElementChild.textContent = this.color">
+	<color-inline slot="swatch" style="place-self: center; min-inline-size: fit-content"></color-inline>
+</color-picker>
+```
+
+or your own form element instead of the default space picker:
+
+```html
+<color-picker space="oklab" color="oklab(60% -0.12 0)">
+	<select slot="color-space" size="4">
+		<optgroup label="Rectangular Spaces">
+			<option value="lab">Lab</option>
+			<option value="oklab" selected>Oklab</option>
+			<option value="prophoto">ProPhoto</option>
+		</optgroup>
+	</select>
+</color-picker>
+```
+
 ### Events
 
 As with other components, you can listen to the `colorchange` event:
@@ -29,20 +66,85 @@ As with other components, you can listen to the `colorchange` event:
 ```html
 <color-picker space="oklch" color="oklch(50% 50% 180)"
               oncolorchange="this.firstElementChild.textContent = this.color.oklch.join(' ')">
-	<div class="coords" style="font-weight: bold; text-shadow: 0 0 .1em white, 0 0 .1em white, 0 0 .1em white"></div>
+	<div class="coords"></div>
 </color-picker>
 ```
 
+### Dynamic
+
+All attributes are reactive:
+
+```html
+<color-picker space="oklch" color="oklch(60% 30% 180)" id="dynamic_picker">
+	<fieldset slot="color-space">
+		<legend>Polar Spaces</legend>
+
+		<label>
+			<input type="radio" name="space" value="oklch" checked /> OKLCh
+		</label>
+		<label>
+			<input type="radio" name="space" value="hwb" /> HWB
+		</label>
+		<label>
+			<input type="radio" name="space" value="hsl" /> HSL
+		</label>
+	</fieldset>
+</color-picker>
+
+<script>
+	let radios = dynamic_picker.querySelectorAll("input[name=space]");
+	radios.forEach(radio => radio.addEventListener("change", evt => dynamic_picker.spaceId = evt.target.value));
+</script>
+
+<style>
+	label + label {
+		margin-inline-start: .3em;
+	}
+</style>
+```
+
+```html
+<label>
+	<input type="checkbox" onchange="this.parentElement.nextElementSibling.alpha = this.checked" /> Alpha channel
+</label>
+<color-picker></color-picker>
+```
 
 ## Reference
 
+### Slots
+
+| Name | Description |
+|------|-------------|
+| (default) | The color picker's main content. Goes into the swatch. |
+| `color-space` | An element to display (and if writable, also set) the current color space. If not provided, a [`<space-picker>`](../space-picker/) is used. |
+| `swatch` | An element used to provide a visual preview of the current color. |
+
 ### Attributes & Properties
 
 | Attribute | Property | Property type | Default value | Description |
 |-----------|----------|---------------|---------------|-------------|
-| `space` | `space` | `ColorSpace` &#124; `string` | `oklch` | The color space to use for interpolation. |
-| `color` | `color` | `Color` &#124; `string` | `oklch(50 50% 180)` | The current color value. |
+| `space` | `spaceId` | `string` | `oklch` | The color space to use for interpolation. |
+| – | `space` | `ColorSpace` | `OKLCh` | Color space object corresponding to the `space` attribute. |
+| `color` | `color` | `Color` &#124; `string` | `oklch(50% 50% 180)` | The current color value. |
+| `alpha` | `alpha` | `boolean` &#124; `undefined` | `undefined` | Whether to show the alpha channel slider or not. |
+
+### Events
+
+| Name | Description |
+|------|-------------|
+| `input` | Fired when the color changes due to user action, such as adjusting the sliders, entering a color in the swatch's text field, or choosing a different color space. |
+| `change` | Fired when the color changes due to user action, such as adjusting the sliders, entering a color in the swatch's text field, or choosing a different color space. |
+| `colorchange` | Fired when the color changes for any reason, and once during initialization. |
+
+### CSS variables
+
+The styling of `<color-picker>` is fully customizable via CSS variables provided by the [`<color-slider>`](../color-slider/#css-variables) and [`<color-swatch>`](../color-swatch/#css-variables).
 
-## To-Do
+### Parts
 
-- Alpha
+| Name | Description |
+|------|-------------|
+| `color-space` | The default [`<space-picker>`](../space-picker/) element, used if the `color-space` slot has no slotted elements. |
+| `color-space-base` | The internal `<select>` element of the default [`<space-picker>`](../space-picker/) element. |
+| `swatch` | The default [`<color-swatch>`](../color-swatch/) element, used if the `swatch` slot has no slotted elements. |

package/src/color-picker/color-picker.css

@@ -4,17 +4,32 @@
 	gap: 1em;
 }
 
+#space_picker {
+	margin-inline-start: -.7em; /* align with the channel names */
+	font-size: 150%;
+	transition: border-color .2s;
+
+	&:not(:hover) {
+		border-color: transparent;
+	}
+}
+
+[part="color-space"],
+slot[name="color-space"]::slotted(*) {
+	grid-column: 1 / -1;
+	justify-self: start;
+}
+
 #sliders {
 	display: flex;
 	flex-flow: column;
+	justify-content: space-between;
 	gap: .3em;
+	min-inline-size: 10em;
 }
 
-color-swatch {
+[part="swatch"],
+slot[name="swatch"]::slotted(*) {
 	width: auto;
-
-	&::part(swatch) {
-		flex: 1;
-	}
+	margin: 0;
 }
-

package/src/color-picker/color-picker.js

@@ -1,58 +1,61 @@
+import ColorElement from "../common/color-element.js";
 import "../channel-slider/channel-slider.js";
 import "../color-swatch/color-swatch.js";
-import NudeElement from "../../node_modules/nude-element/src/Element.js";
+import "../space-picker/space-picker.js";
 import * as dom from "../common/dom.js";
-import Color from "../common/color.js";
 
-const Self = class ColorPicker extends NudeElement {
+const Self = class ColorPicker extends ColorElement {
 	static tagName = "color-picker";
+	static url = import.meta.url;
+	static dependencies = new Set(["channel-slider"]);
+	static styles = "./color-picker.css";
+	static shadowTemplate = `
+		<slot name="color-space">
+			<space-picker id="space_picker" part="color-space" exportparts="base: color-space-base"></space-picker>
+		</slot>
+		<div id="sliders" part="sliders"></div>
+		<slot name="swatch">
+			<color-swatch size="large" id="swatch" part="swatch" exportparts="swatch: swatch-base, gamut, details, info, color-wrapper">
+				<slot slot="swatch-content"></slot>
+				<input value="oklch(70% 0.25 138)" id="color" />
+			</color-swatch>
+		</slot>`;
 
 	constructor () {
 		super();
 
-		this.attachShadow({mode: "open"});
-		let styleURL = new URL(`./${Self.tagName}.css`, import.meta.url);
-		this.shadowRoot.innerHTML = `
-			<style>@import url("${ styleURL }")</style>
-			<div id=sliders></div>
-			<slot name="swatch">
-				<color-swatch size="large" id="swatch">
-					<slot slot="swatch-content"></slot>
-					<input value="oklch(70% 0.25 138)" id="color" />
-				</color-swatch>
-			</slot>
-		`;
-
 		this._el = dom.named(this);
+		this._slots = {
+			color_space: this.shadowRoot.querySelector("slot[name=color-space]"),
+		};
 	}
 
-	connectedCallback() {
+	connectedCallback () {
 		super.connectedCallback?.();
 		this._el.sliders.addEventListener("input", this);
 		this._el.swatch.addEventListener("input", this);
-
-		this.render();
+		this._slots.color_space.addEventListener("input", this);
 	}
 
-	disconnectedCallback() {
+	disconnectedCallback () {
 		this._el.sliders.removeEventListener("input", this);
 		this._el.swatch.removeEventListener("input", this);
+		this._slots.color_space.removeEventListener("input", this);
 	}
 
-	handleEvent(event) {
-		this.render(event.target);
+	handleEvent (event) {
+		let source = event.target;
 
-		this.dispatchEvent(new event.constructor(event.type, {...event}));
-	}
-
-	render (source) {
-		if (!source || this._el.sliders.contains(source)) {
+		if (this._el.sliders.contains(source)) {
 			// From sliders
 			let coords = [...this._el.sliders.children].map(el => el.value);
-			this.color = new Color(this.space, coords);
-			this._el.swatch.value = this.color;
+			let alpha = this.color.alpha;
+			if (coords.length > 3) {
+				alpha = coords.pop() / 100;
+			}
+			this.color = new Self.Color(this.space, coords, alpha);
 		}
-		else if (!source || this._el.swatch.contains(source)) {
+		else if (this._el.swatch.contains(source)) {
 			// From swatch
 			if (!this._el.swatch.color) {
 				// Invalid color, or still typing
@@ -60,26 +63,46 @@ const Self = class ColorPicker extends NudeElement {
 			}
 			this.color = this._el.swatch.color;
 		}
-
-		for (let slider of this._el.sliders.children) {
-			slider.defaultColor = this.color;
+		else if (this._el.space_picker.contains(source) || this._slots.color_space.assignedElements().includes(source)) {
+			this.spaceId = event.target.value;
 		}
+
+		this.dispatchEvent(new event.constructor(event.type, {...event}));
 	}
 
 	propChangedCallback ({name, prop, detail: change}) {
-		if (name === "space") {
+		if (name === "space" || name === "alpha") {
+			let space = this.space;
+
+			if (this.color.space !== space) {
+				this.color = this.color.to(space);
+			}
+
 			let i = 0;
-			for (let channel in this.space.coords) {
+			let channels = [...Object.keys(this.space.coords)];
+			if (this.alpha) {
+				channels.push("alpha");
+			}
+			for (let channel of channels) {
 				let slider = this._el.sliders.children[i++];
 
 				if (slider) {
-					slider.space = this.space;
+					slider.space = space;
 					slider.channel = channel;
 				}
 				else {
-					this._el.sliders.insertAdjacentHTML("beforeend", `<channel-slider space="${ this.space.id }" channel="${ channel }"></channel-slider>`);
+					this._el.sliders.insertAdjacentHTML("beforeend", `<channel-slider space="${ space.id }" channel="${ channel }" part="channel-slider"></channel-slider>`);
 				}
 			}
+
+			if (this._el.sliders.children.length > channels.length) {
+				// Remove the slider for alpha
+				this._el.sliders.children[channels.length].remove();
+			}
+
+			for (let slider of this._el.sliders.children) {
+				slider.color = this.color;
+			}
 		}
 
 		if (name === "color") {
@@ -87,7 +110,7 @@ const Self = class ColorPicker extends NudeElement {
 				slider.color = this.color;
 			}
 
-			if (this.color && (!this._el.swatch.color || !this.color.equals(this._el.swatch.color))) {
+			if (!this._el.swatch.color || !this.color.equals(this._el.swatch.color)) {
 				// Avoid typing e.g. "red" and having it replaced with "rgb(100% 0% 0%)" under your caret
 				prop.applyChange(this._el.swatch, change);
 			}
@@ -95,24 +118,70 @@ const Self = class ColorPicker extends NudeElement {
 	}
 
 	static props = {
-		space: {
+		spaceId: {
 			default: "oklch",
-			parse (value) {
-				if (value instanceof Color.Space || value === null || value === undefined) {
+			convert (value) {
+				if (value === null || value === undefined) {
 					return value;
 				}
+				else if (value instanceof Self.Color.Space) {
+					return value.id;
+				}
+
+				return value + "";
+			},
+			changed ({parsedValue, source, ...change}) {
+				if (!parsedValue && source !== "default") {
+					// Something went wrong. We should always have a value. Falling back to the current space
+					this.spaceId = this.space.id;
+					return;
+				}
 
-				value += "";
+				if (this.props.space && this.props.space.id !== parsedValue) {
+					// The space object we have in the cache is outdated. We need to delete it so that the space getter returns the updated one
+					delete this.props.space;
+				}
+			},
+			reflect: {
+				from: "space",
+			},
+		},
 
-				return Color.Space.get(value);
+		space: {
+			get () {
+				return this._el.space_picker.selectedSpace;
 			},
-			stringify (value) {
-				return value?.id;
+			set: true,
+			changed ({parsedValue, ...change}) {
+				if (parsedValue === undefined) {
+					// this.spaceId changed
+					if (this._el.space_picker.value !== this.spaceId) {
+						this._el.space_picker.value = this.spaceId;
+					}
+
+					return;
+				}
+				else if (!parsedValue) {
+					// Something went wrong. We should always have a value. Falling back to the current space
+					this.space = this._el.space_picker.selectedSpace;
+					return;
+				}
+
+				parsedValue = parsedValue instanceof Self.Color.Space ? parsedValue.id : parsedValue;
+				if (this.spaceId !== parsedValue) {
+					this._el.space_picker.value = parsedValue;
+					this.spaceId = parsedValue;
+				}
 			},
+			dependencies: ["spaceId"],
+			defaultProp: "spaceId",
+			reflect: false,
 		},
 
 		defaultColor: {
-			type: Color,
+			get type () {
+				return Self.Color;
+			},
 			convert (color) {
 				return color.to(this.space);
 			},
@@ -124,7 +193,7 @@ const Self = class ColorPicker extends NudeElement {
 					coords.push((range[0] + range[1]) / 2);
 				}
 
-				return new Color(this.space, coords);
+				return new Self.Color(this.space, coords);
 			},
 			reflect: {
 				from: "color",
@@ -132,9 +201,30 @@ const Self = class ColorPicker extends NudeElement {
 		},
 
 		color: {
-			type: Color,
-			set (value) {
-				this.defaultColor = new Color(value).to(this.space);
+			get type () {
+				return Self.Color;
+			},
+			defaultProp: "defaultColor",
+			reflect: false,
+		},
+
+		alpha: {
+			parse (value) {
+				if (value === undefined || value === null) {
+					return;
+				}
+
+				if (value === false || value === "false") {
+					return false;
+				}
+
+				if (value === "" || value === "alpha" || value === true || value === "true") {
+					// Boolean attribute
+					return true;
+				}
+			},
+			reflect: {
+				from: true,
 			},
 		},
 	};
@@ -142,23 +232,20 @@ const Self = class ColorPicker extends NudeElement {
 	static events = {
 		change: {
 			from () {
-				return [this._el.sliders, this._el.swatch];
-			}
+				return [this._el.space_picker, this._el.sliders, this._el.swatch];
+			},
 		},
 		input: {
 			from () {
-				return [this._el.sliders, this._el.swatch];
-			}
-		},
-		valuechange: {
-			propchange: "value",
+				return [this._el.space_picker, this._el.sliders, this._el.swatch];
+			},
 		},
 		colorchange: {
 			propchange: "color",
 		},
 	};
-}
+};
 
-customElements.define(Self.tagName, Self);
+Self.define();
 
-export default Self;
+export default Self;

package/src/color-scale/README.md

@@ -0,0 +1,75 @@
+# `<color-scale>`
+
+Display a list of colors.
+
+## Features
+
+- Specify colors directly, via interpolation in any color space, or a mix of both
+- Display color coordinates, in any color space (or multiple!)
+- Coming soon: display deltas between consecutive colors
+
+## Examples
+
+### Basic usage
+
+Colors via attribute:
+
+```html
+<color-scale space="oklch" colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"></color-scale>
+```
+
+You can also give them optional names:
+
+```html
+<color-scale space="oklch" colors="
+	Gray 50: #f9fafb,
+	Gray 100: #f3f4f6,
+	Gray 200: #e5e7eb,
+	Gray 300: #d1d5db,
+	Gray 400: #9ca3af,
+	Gray 500: #6b7280,
+	Gray 600: #4b5563,
+	Gray 700: #374151,
+	Gray 800: #1f2937,
+	Gray 900: #111827,
+	Gray 850: #1a202c
+"></color-scale>
+```
+
+
+You can only specify your core colors, and insert steps via interpolation:
+
+```html
+<color-scale colors="#e3fafc, #0b7285" steps="4" space="oklch"></color-scale>
+```
+
+If you have more than 2 colors listed, this will insert steps between each pair.
+
+### Customizing the color swatches
+
+Under the hood, `<color-scale>` generates and uses a series of [`<color-swatch>`](../color-swatch/) elements.
+
+You can specify the `info` attribute to show additional information about the colors, and it will be passed to the generated `<color-swatch`> instances:
+
+```html
+<color-scale space="oklch" info="L: oklch.l, C: oklch.c, H: oklch.h"
+             colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"></color-scale>
+```
+
+You can also create compact color scales, by simply setting `--details-style: compact`:
+
+
+```html
+<color-scale space="oklch" info="L: oklch.l, C: oklch.c, H: oklch.h"
+             style="--details-style: compact"
+             colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"></color-scale>
+```
+
+Issue: How to make them focusable??
+
+<!--
+If you want to insert interpolated colors only in specific places, you can use empty values:
+
+```html
+<color-scale space="oklch" colors="#e3fafc, , , , , , , , , #0b7285"></color-scale>
+``` -->