color-elements 0.0.1 → 0.0.2

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "color-elements",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A set of web components for working with color. A Color.js project.",
   "main": "index.js",
   "type": "module",
   "scripts": {
+    "eslint": "npx eslint .",
+    "eslint:fix": "npx eslint . --fix",
     "prebuild": "node _build/copy-config.js",
-    "build:lib": "cp -r node_modules/colorjs.io lib/colorjs.io",
-    "build": "run-s build:lib build:html",
+    "build": "npm run build:html",
     "watch": "run-p watch:*",
     "prepack": "npm run build",
     "release": "release-it",
@@ -31,11 +32,16 @@
   },
   "homepage": "https://github.com/color-js/elements#readme",
   "dependencies": {
-    "colorjs.io": "^0.5.0"
+    "colorjs.io": "^0.5.0",
+    "nude-element": "latest"
   },
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0-alpha.6",
+    "@stylistic/eslint-plugin": "latest",
+    "eslint": "latest",
+    "globals": "latest",
+    "markdown-it-attrs": "^4.1.6",
     "npm-run-all": "^4.1.5",
     "release-it": "^17.2.0"
   }
-}
+}

package/src/channel-slider/README.md

@@ -0,0 +1,123 @@
+# `<channel-slider>`
+
+A [`<color-slider>`](../color-slider) for a specific channel, intended for color picking.
+
+## Usage
+
+This is a higher level component than `<color-slider>` for the cases where you want to control a single channel of a color space.
+It offers many conveniences for these cases:
+- It takes care of applying the right `min` and `max` values to the slider
+- It automatically generates the start and end colors,
+- It can provide an editable tooltip as a tooltip that both shows and edits the current value
+- Already includes a suitable label
+
+### Static
+
+Basic example:
+
+```html
+<channel-slider space="oklch" channel="h"></channel-slider>
+```
+
+In most cases you’d also want to set a color to set the other channels and the initial value:
+
+```html
+<channel-slider space="oklch" channel="h" color="oklch(80% 20% 130)"></channel-slider>
+```
+
+This will automatically use the whole reference range of that component in the specified color space,
+and use the current value of the component as the starting value (unless `value` is also specified).
+
+---
+
+The color does not actually need to be in the same color space, it will be converted if needed:
+
+```html
+<channel-slider space="oklch" channel="h" color="deeppink"></channel-slider>
+```
+
+Colors and color spaces not supported by the browser also work:
+
+```html
+<channel-slider space="okhsl" channel="h" color="color(--okhsl 180 100% 50%)"></channel-slider>
+```
+
+
+If you don’t want to show the whole range you can also specify `min` and `max` attributes.
+
+```html
+<channel-slider space="oklch" channel="l" color="red" min=".3" max=".95"></channel-slider>
+```
+
+### Dynamic
+
+You can listen to the `colorchange` event and grab the `color` property to get the current color value.
+Here we are using a [`<color-swatch>`](../color-swatch/) to not just display the CSS code but also the actual color:
+
+```html
+<channel-slider space="oklch" channel="h" color="oklch(50% 50% 180)"
+				oncolorchange="this.nextElementSibling.textContent = this.color"></channel-slider>
+<color-swatch></color-swatch>
+```
+
+All attributes are reactive:
+
+```html
+<label>
+	Space:
+	<select id="space_select" size="3">
+		<option>oklch</option>
+		<option>oklab</option>
+		<option>okhsl</option>
+		<option>lab</option>
+		<option>lch</option>
+		<option>hsl</option>
+		<option>srgb</option>
+	</select>
+</label>
+<label>
+	Channel:
+	<select id="channel_select" size=3>
+		<option>l</option>
+		<option>c</option>
+		<option>h</option>
+	</select>
+</label>
+
+<channel-slider id="dynamic_slider" space="oklch" channel="h" color="oklch(50% 50% 180)"
+				oncolorchange="this.nextElementSibling.textContent = this.color"></channel-slider>
+<color-swatch></color-swatch>
+<script>
+	function fromSlider () {
+		space_select.value = dynamic_slider.space.id;
+		channel_select.innerHTML = Object.keys(dynamic_slider.space.coords).map(c => `<option>${c}</option>`).join('\n');
+		channel_select.value = dynamic_slider.channel;
+	}
+
+	function fromSelects () {
+		dynamic_slider.space = space_select.value;
+		dynamic_slider.channel = channel_select.value;
+	}
+
+	space_select.oninput = channel_select.oninput = fromSelects;
+
+	customElements.whenDefined("channel-slider").then(fromSlider);
+	dynamic_slider.addEventListener("propchange", fromSlider);
+</script>
+```
+
+
+## Reference
+
+### Attributes & Properties
+
+| Attribute | Property | Property type | Default value | Description |
+|-----------|----------|---------------|---------------|-------------|
+| `space` | `space` | `ColorSpace` &#124; `string` | `oklch` | The color space to use for interpolation. |
+| `channel` | `channel` | `string` | `h` | The component to use for the gradient. |
+| `min` | `min` | `number` | `this.refRange[0]` | The minimum value for the slider. |
+| `max` | `max` | `number` | `this.refRange[1]` | The maximum value for the slider. |
+| `value` | `value` | `number` | `(this.min + this.max) / 2` | The current value of the slider. |
+| `color` | `color` | `Color` &#124; `string` | `oklch(50 50% 180)` | The current color value. |
+| - | `minColor` | `Color` | `oklch(0 50% 180)` | The minimum color value _(read-only)_. |
+| - | `maxColor` | `Color` | `oklch(100 50% 180)` | The maximum color value _(read-only)_. |

package/src/channel-slider/channel-slider.css

@@ -0,0 +1,19 @@
+.color-slider-label {
+	display: grid;
+	grid-template-columns: 1fr auto;
+	gap: .3em;
+	position: relative;
+
+	em {
+		opacity: 60%;
+	}
+}
+
+color-slider {
+	grid-column: 1 / -1;
+}
+
+
+
+
+

package/src/channel-slider/channel-slider.js

@@ -0,0 +1,252 @@
+import "../color-slider/color-slider.js";
+import * as dom from "../common/dom.js";
+import Color from "../common/color.js";
+import NudeElement from "../../node_modules/nude-element/src/Element.js";
+import { getStep } from "../common/util.js";
+
+export const tagName = "channel-slider";
+
+export default class ChannelSlider extends NudeElement {
+	constructor () {
+		super();
+
+		this.attachShadow({mode: "open"});
+		let styleURL = new URL(`./${tagName}.css`, import.meta.url);
+		this.shadowRoot.innerHTML = `
+			<style>@import url("${ styleURL }")</style>
+			<label class="color-slider-label" part="label">
+				<slot></slot>
+				<color-slider part="color_slider" exportparts="slider" id="slider" tooltip></color-slider>
+			</label>
+		`;
+
+		this._el = dom.named(this);
+		this._el.slot = this.shadowRoot.querySelector("slot");
+	}
+
+	connectedCallback() {
+		super.connectedCallback?.();
+
+		this._el.slider.addEventListener("input", this);
+	}
+
+	disconnectedCallback() {
+		this._el.slider.removeEventListener("input", this);
+	}
+
+	handleEvent(event) {
+		if (event.type === "input") {
+			this.value = event.target.value;
+		}
+	}
+
+	colorAt (value) {
+		let color = this.defaultColor.clone();
+		try {
+			color.set(this.channel, value);
+		}
+		catch (e) {
+			console.warn(e);
+		}
+		return color;
+	}
+
+	colorAtProgress (progress) {
+		// Map progress to min - max range
+		let value = this.min + progress * (this.max - this.min);
+		return this.colorAt(value);
+	}
+
+	get minColor () {
+		return this.colorAt(this.min);
+	}
+
+	get maxColor () {
+		return this.colorAt(this.max);
+	}
+
+	get stops () {
+		return [
+			this.minColor,
+			this.colorAtProgress(0.25),
+			this.colorAtProgress(0.5),
+			this.colorAtProgress(0.75),
+			this.maxColor,
+		];
+	}
+
+	get progress () {
+		return this._el.slider.progress;
+	}
+
+	progressAt (p) {
+		return this._el.slider.progressAt(p);
+	}
+
+	propChangedCallback ({name, prop, detail: change}) {
+		if (["space", "min", "max", "step", "value", "defaultValue"].includes(name)) {
+			prop.applyChange(this._el.slider, change);
+		};
+
+		if (name === "defaultColor" || name === "space" || name === "channel" || name === "min" || name === "max") {
+			this._el.slider.stops = this.stops;
+
+			if (name === "space" || name === "channel" || name === "min" || name === "max") {
+				this._el.slot.innerHTML = `${ this.channelName } <em>(${ this.min }&thinsp;&ndash;&thinsp;${ this.max })</em>`;
+			}
+		}
+	}
+
+
+
+	get channelName () {
+		return this.channelSpec?.name ?? this.channel;
+	}
+
+	static props = {
+		space: {
+			default: "oklch",
+			parse (value) {
+				if (value instanceof Color.Space || value === null || value === undefined) {
+					return value;
+				}
+
+				value += "";
+
+				return Color.Space.get(value);
+			},
+			stringify (value) {
+				return value?.id;
+			},
+		},
+		channel: {
+			type: String,
+			default () {
+				return Object.keys(this.space.coords)[0];
+			},
+			// get () {
+			// 	let value = this.props.channel;
+			// 	let space = this.space;
+			// 	console.log(this.props, value, space);
+
+			// 	if (!space || space.coords[value]) {
+			// 		return value;
+			// 	}
+
+			// 	return Object.keys(this.space.coords)[0];
+			// },
+			// set: true,
+			// reflect: true,
+		},
+		channelSpec: {
+			get () {
+				let channelSpec = this.space?.coords[this.channel];
+
+				if (!channelSpec && this.space) {
+					channelSpec = Object.values(this.space.coords)[0];
+					console.warn(`Unknown channel ${ this.channel } in space ${ this.space }. Using first channel (${ channelSpec.name }) instead.`);
+				}
+
+				return channelSpec;
+			}
+		},
+		refRange: {
+			get () {
+				let channelSpec = this.channelSpec;
+				return channelSpec?.refRange ?? channelSpec?.range ?? [0, 100];
+			},
+		},
+		min: {
+			type: Number,
+			default () {
+				return this.refRange[0];
+			},
+		},
+		max: {
+			type: Number,
+			default () {
+				return this.refRange[1];
+			},
+		},
+		step: {
+			type: Number,
+			default () {
+				return getStep(this.max, this.min, { minSteps: 100 });
+			},
+		},
+
+		defaultValue: {
+			type: Number,
+			default () {
+				return this.defaultColor.get(this.channel);
+			},
+			reflect: {
+				from: "value",
+			},
+		},
+		value: {
+			type: Number,
+			defaultProp: "defaultValue",
+			reflect: false,
+		},
+
+		defaultColor: {
+			type: Color,
+			convert (color) {
+				return color.to(this.space);
+			},
+			default () {
+				let coords = [];
+				for (let channel in this.space.coords) {
+					let spec = this.space.coords[channel];
+					let range = spec.refRange ?? spec.range;
+					coords.push((range[0] + range[1]) / 2);
+				}
+
+				return new Color(this.space, coords);
+			},
+			reflect: {
+				from: "color",
+			},
+		},
+		color: {
+			type: Color,
+			get () {
+				return this.colorAt(this.value);
+			},
+			dependencies: ["defaultColor", "space", "channel", "value"],
+			set (value) {
+				this.defaultColor = value;
+				this.value = this.defaultValue;
+			},
+		},
+	}
+
+	static events = {
+		change: {
+			from () {
+				return this._el.slider;
+			}
+		},
+		input: {
+			from () {
+				return this._el.slider;
+			}
+		},
+		valuechange: {
+			propchange: "value",
+		},
+		colorchange: {
+			propchange: "color",
+		},
+	};
+
+	static formAssociated = {
+		getSource: el => el._el.slider,
+		role: "slider",
+		valueProp: "value",
+		changeEvent: "valuechange",
+	};
+}
+
+customElements.define(tagName, ChannelSlider);

package/{color-gamut → src/color-gamut}/README.md

@@ -1,7 +1,7 @@
 <script src="color-gamut.js" type="module"></script>
 # &lt;color-gamut>
 
-Gamut indicator. Used internally by `<css-color>`
+Gamut indicator. Used internally by `<color-swatch>`
 
 ## Usage
 

package/{color-gamut → src/color-gamut}/color-gamut.js

@@ -1,6 +1,6 @@
 import Color from "../common/color.js";
 
-let styleURL = new URL("./style.css", import.meta.url);
+let styleURL = new URL("./color-gamut.css", import.meta.url);
 
 export default class ColorGamut extends HTMLElement {
 	#label;

package/src/color-inline/README.md

@@ -0,0 +1,31 @@
+---
+layout: component
+css: "style.css"
+---
+
+# `<color-inline>`
+
+Basic use:
+
+<html-demo adjust="font-size">
+
+```html
+<color-inline>lch(50% 40 30)</color-inline>
+```
+</html-demo>
+
+Editable:
+```html
+<color-inline contentEditable>lch(50% 40 30)</color-inline>
+```
+
+Semi-transparent color:
+```html
+<color-inline>hsl(340 90% 50% / .25)</color-inline>
+```
+
+Invalid color:
+
+```html
+<color-inline>foobar</color-inline>
+```

package/{color-swatch/color-swatch.js → src/color-inline/color-inline.js}

@@ -1,8 +1,8 @@
-import Color from "../../src/index.js";
+import Color from "../common/color.js";
 
-let styleURL = new URL("./color-swatch.css", import.meta.url);
+let styleURL = new URL("./color-inline.css", import.meta.url);
 
-export default class ColorSwatch extends HTMLElement {
+export default class ColorInline extends HTMLElement {
 	#swatch;
 
 	constructor () {
@@ -19,7 +19,7 @@ export default class ColorSwatch extends HTMLElement {
 
 	connectedCallback () {
 		this.#render();
-		ColorSwatch.#mo.observe(this, {childList: true, subtree: true, characterData: true});
+		ColorInline.#mo.observe(this, {childList: true, subtree: true, characterData: true});
 	}
 
 	#value;
@@ -64,7 +64,7 @@ export default class ColorSwatch extends HTMLElement {
 		for (let mutation of mutations) {
 			let target = mutation.target;
 
-			while (target && !(target instanceof ColorSwatch)) {
+			while (target && !(target instanceof ColorInline)) {
 				target = target.parentNode;
 			}
 
@@ -76,4 +76,4 @@ export default class ColorSwatch extends HTMLElement {
 }
 
 
-customElements.define("color-swatch", ColorSwatch);
+customElements.define("color-inline", ColorInline);

package/src/color-inline/style.css

@@ -0,0 +1,14 @@
+html {
+	color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+	html {
+		background: hsl(220 5% 20%);
+	}
+}
+
+color-inline {
+	display: block;
+	margin: 1em 0;
+}

package/src/color-picker/README.md

@@ -0,0 +1,48 @@
+# `<color-picker>`
+
+## Usage
+
+### Basic usage
+
+```html
+<color-picker space="oklch" color="oklch(60% 30% 180)"></color-picker>
+```
+
+Color spaces not supported by the browser also work:
+
+```html
+<color-picker space="okhsl" color="color(--okhsl 180 50% 50%)"></color-picker>
+```
+
+### Slots
+
+```html
+<color-picker space="oklch" color="oklch(50% 50% 180)">
+	Element content goes into the swatch
+</color-picker>
+```
+
+### Events
+
+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>
+</color-picker>
+```
+
+
+## Reference
+
+### 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. |
+
+## To-Do
+
+- Alpha

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

@@ -0,0 +1,20 @@
+:host {
+	display: grid;
+	grid-template-columns: 3fr 1fr;
+	gap: 1em;
+}
+
+#sliders {
+	display: flex;
+	flex-flow: column;
+	gap: .3em;
+}
+
+color-swatch {
+	width: auto;
+
+	&::part(swatch) {
+		flex: 1;
+	}
+}
+