color-elements 0.0.2 → 0.0.4

package/README.md

@@ -3,6 +3,34 @@
 These are some **highly experimental** color-related web components.
 Use at your own risk, the API can change at any point.
 
+## All elements
+
+<section class="showcase">
+{% for name, description in components -%}
+<a href="{{ page | relative }}/src/{{ name }}/">
+<figure>
+	<img src="{{ page | relative }}/src/{{ name }}/{{ name }}.webp" alt="A screenshot showcasing the &lt;{{ name }}&gt; color element" />
+	<figcaption>
+		<h2>&lt;{{ name }}&gt;</h2>
+		<p>{{ description | safe }}</p>
+	</figcaption>
+</figure>
+</a>
+{% endfor %}
+</section>
+
+### Upcoming
+
+<section class="showcase upcoming">
+{% for name in ["color-plane"] -%}
+<figure>
+	<figcaption>
+		<h2>&lt;{{ name }}&gt;</h2>
+	</figcaption>
+</figure>
+{% endfor %}
+</section>
+
 ## Usage
 
 ### CDN
@@ -10,13 +38,13 @@ Use at your own risk, the API can change at any point.
 To include all components at once:
 
 ```html
-<script src="https://elements.colorjs.io/index.js"></script>
+<script src="https://elements.colorjs.io/index.js" type="module"></script>
 ```
 
 To cherry-pick individual components, follow the instructions within the component’s page, but it generally looks like this:
 
 ```html
-<script src="https://elements.colorjs.io/src/COMPONENT_NAME/COMPONENT_NAME.js"></script>
+<script src="https://elements.colorjs.io/src/COMPONENT_NAME/COMPONENT_NAME.js" type="module"></script>
 ```
 
 Each component imports its own dependencies and styles.
@@ -40,16 +68,3 @@ You can also import individual components:
 ```js
 import "color-elements/COMPONENT_NAME";
 ```
-
-## All elements
-
-- [`<color-picker>`](src/color-picker/)
-- [`<color-slider>`](src/color-slider/)
-- [`<channel-slider>`](src/channel-slider/)
-- [`<color-swatch>`](src/color-swatch/)
-- [`<color-inline>`](src/color-inline/)
-- [`<color-gamut>`](src/color-gamut/)
-
-### Upcoming:
-
-- `<color-plane>`

package/_build/copy-config.json

@@ -4,7 +4,7 @@
 		"_includes/partials/_nav.njk",
 		"_includes/page.njk",
 		"_includes/plain.njk",
-		"_data/eleventyComputed.js",
+		"data/eleventyComputed.js",
 		["_build/eleventy.js", "_build/eleventy-original.js"],
 		"_build/filters.js"
 	],

package/_build/eleventy.js

@@ -1,11 +1,12 @@
 import markdownIt from "markdown-it";
 import markdownItAttrs from "markdown-it-attrs";
+import markdownItAnchor from "markdown-it-anchor";
 import configOriginal from "./eleventy-original.js";
 import * as filters from "./filters-extra.js";
 
 let data = {
 	"permalink": "{{ page.filePathStem | replace('README', '') | replace('index', '') }}/index.html",
-	"body_classes": "cn-ignore"
+	"body_classes": "cn-ignore",
 };
 
 let md = markdownIt({
@@ -14,7 +15,11 @@ let md = markdownIt({
 	typographer: true,
 })
 .disable("code")
-.use(markdownItAttrs);
+.use(markdownItAttrs)
+.use(markdownItAnchor, {
+	permalink: markdownItAnchor.permalink.headerLink(),
+	level: 2,
+});
 
 export default config => {
 	let ret = configOriginal(config);

package/_build/filters-extra.js

@@ -1,3 +1,3 @@
 export function tag_to_class (tag) {
 	return tag?.replace(/(?:^|-)([a-z])/g, ($0, $1) => $1.toUpperCase());
-}
+}

package/_includes/component.njk

@@ -16,7 +16,7 @@
 			}
 		},
 		title: function (data) {
-			return data.title ?? data.tag;
+			return data.title || data.tag;
 		},
 	}
 }
@@ -25,6 +25,14 @@
 <script src="{{ page | relative }}/index.js" type="module"></script>
 <script src="{{ name }}.js" type="module"></script>
 
+<aside id="toc">
+	<ul>
+	{% for name, description in components -%}
+	<li><a href="{{ page | relative }}/src/{{ name }}/"><code>&lt;{{ name }}&gt;</code></a></li>
+	{% endfor %}
+	</ul>
+</aside>
+
 {{ content | safe }}
 
 <section id="installation">

package/_includes/partials/_nav-links.njk

@@ -2,11 +2,19 @@
 <div class="menu">
 	<a href="{{ page | relative }}">Elements</a>
 	<ul>
-		{% for name in components %}
-			<li><a href="{{ page | relative }}/src/{{ name }}/"><code>&lt;{{ name }}&gt;</code></a></span>
+		{% for name, description in components %}
+			<li><a href="{{ page | relative }}/src/{{ name }}/"><code>&lt;{{ name }}&gt;</code></a></li>
 		{% endfor %}
 	</ul>
 </div>
 
-<a href="https://github.com/color-js/elements">GitHub</a>
-<a href="https://github.com/color-js/elements/issues/new" class="footer">File bug</a>
+<a href="https://github.com/color-js/elements{{ ('/tree/main/src/' + name) if name }}" target="_blank">GitHub</a>
+<div class="menu">
+	<a href="https://github.com/color-js/elements/issues{{ ('?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+%5B' + name + '%5D+in%3Atitle') if name }}" target="_blank">Issues</a>
+	<ul>
+		<li><a href="https://github.com/color-js/elements/issues/new{{ ('?title=[' + name + '] ') if name }}">New</a></li>
+	</ul>
+</div>
+<a href="https://opencollective.com/color">♡&nbsp;Sponsor</a>
+
+

package/_redirects

@@ -1,2 +1,9 @@
+# Specific versions
+node_modules/nude-element/* https://cdn.jsdelivr.net/npm/nude-element@0.0.14/:splat 200
+
+# Catch all NPM fallback
 node_modules/:modulename/* https://cdn.jsdelivr.net/npm/:modulename@latest/:splat 200
-assets/* https://colorjs.io/assets/:splat 200
+
+assets/* https://colorjs.io/assets/:splat 200
+
+/:tag/* /src/:tag/:splat 200

package/assets/css/style.css

@@ -1 +1,78 @@
-@import url("https://colorjs.io/assets/css/style.css");
+@import url("https://colorjs.io/assets/css/style.css");
+@import url("https://colorjs.io/assets/css/docs.css");
+
+.showcase {
+	--_border-color: hsl(var(--gray) 85%);
+
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+	gap: 2rem;
+
+	figure {
+		display: grid;
+		grid-template-rows: 1fr auto;
+
+		inline-size: 100%;
+		margin: 0;
+		overflow: hidden;
+
+		border: 1px solid var(--_border-color);
+		border-radius: .5em;
+
+		box-shadow: 0 .02em .5em -.7em hsl(var(--gray) 30%);
+
+		&:is(:hover, :focus-within) {
+			img {
+				scale: 1.1;
+			}
+		}
+
+		img {
+			inline-size: 100%;
+			aspect-ratio: 4 / 3;
+			transition: scale .2s;
+		}
+
+		figcaption {
+			margin: 0;
+			padding: 0 .7em .5em;
+			border-block-start: 1px solid var(--_border-color);
+			background-color: hsl(var(--gray) 98%);
+			z-index: 1;
+
+			h2 {
+				font-size: 200%;
+
+				&:not(:only-child) {
+					margin-block-end: 0;
+				}
+			}
+
+			p {
+				text-wrap: balance;
+			}
+		}
+	}
+
+	&.upcoming {
+		figure {
+			&::before {
+				content: "";
+				inline-size: 100%;
+				aspect-ratio: 4 / 3;
+
+				background: var(--rainbow);
+				animation: var(--rainbow-scroll);
+
+				mask-image: url('data:image/svg+xml,\
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 1080">\
+						<path fill="none" stroke="black" stroke-width="25" stroke-linecap="round" stroke-linejoin="round" d="M233 579a70 70 0 0 0 70 70h834a70 70 0 0 0 0-140H303a70 70 0 0 0-70 70Z"/>\
+						<path fill-rule="evenodd" d="M270 579a42 42 0 0 0 42 42h538v-84H312a42 42 0 0 0-42 42Z"/>\
+						<text xml:space="preserve" x="425.54" y="462" font-family="Impact" font-size="90" font-weight="800" letter-spacing="2.7">COMING SOON...</text>\
+					</svg>');
+				mask-repeat: no-repeat;
+				mask-size: 100% 100%;
+			}
+		}
+	}
+}

package/assets/js/index.js

@@ -1,16 +1,16 @@
 import "https://colorjs.io/assets/js//prism.js";
 import "https://colorjs.io/assets/js/colors.js";
+import "https://blissfuljs.com/bliss.shy.js";
 
 import { styleCallouts } from "https://colorjs.io/assets/js/enhance.js";
 styleCallouts();
 
-let root = document.documentElement;
-document.addEventListener("scroll", evt => {
-	root.style.setProperty("--scrolltop", root.scrollTop);
-}, {passive: true});
-
 import HTMLDemoElement from "https://nudeui.com/elements/html-demo/html-demo.js";
 
 if (document.body.classList.contains("component-page")) {
 	HTMLDemoElement.wrapAll();
-}
+}
+
+if (window.toc) {
+	import("https://colorjs.io/assets/js/docs.js");
+}

package/data/components.json

@@ -0,0 +1,12 @@
+{
+	"color-picker": "Select and adjust colors in any color space using sliders and input fields.",
+	"color-scale": "Display a list of colors. Primarily intended for color palettes.",
+	"color-chart": "Display lists of colors as a scatterplot or line chart.",
+	"color-swatch": "Display a visual representation of a color alongside the info about it.",
+	"color-inline": "Display a color swatch alone or alongside its textual representation.",
+	"channel-slider": "Display a <code>&lt;color-slider&gt;</code> for a specific channel.",
+	"color-slider": "Display a slider with a gradient background. Primarily intended for color picking.",
+	"gamut-badge": "Gamut indicator. Used internally by <code>&lt;color-swatch&gt;</code>.",
+	"channel-picker": "Select individual color channels within a specified color space.",
+	"space-picker": "Select a color space from a list of predefined or custom color spaces."
+}

package/index.js

@@ -1,6 +1,10 @@
 export { default as ColorPicker } from "./src/color-picker/color-picker.js";
+export { default as ColorScale } from "./src/color-scale/color-scale.js";
+export { default as ColorChart } from "./src/color-chart/color-chart.js";
 export { default as ColorSwatch } from "./src/color-swatch/color-swatch.js";
 export { default as ColorInline } from "./src/color-inline/color-inline.js";
 export { default as ChannelSlider } from "./src/channel-slider/channel-slider.js";
 export { default as ColorSlider } from "./src/color-slider/color-slider.js";
-export { default as ColorGamut } from "./src/color-gamut/color-gamut.js";
+export { default as GamutBadge } from "./src/gamut-badge/gamut-badge.js";
+export { default as ChannelPicker } from "./src/channel-picker/channel-picker.js";
+export { default as SpacePicker } from "./src/space-picker/space-picker.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "color-elements",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "A set of web components for working with color. A Color.js project.",
   "main": "index.js",
   "type": "module",
@@ -14,6 +14,7 @@
     "release": "release-it",
     "test": "echo \"Error: no test specified\" && exit 1",
     "build:html": "npx @11ty/eleventy --config=_build/eleventy.js",
+    "serve": "npx @11ty/eleventy --config=_build/eleventy.js --serve",
     "watch:html": "npx @11ty/eleventy --config=_build/eleventy.js --serve"
   },
   "repository": {
@@ -26,22 +27,27 @@
     "web components"
   ],
   "author": "Lea Verou",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/color"
+  },
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/color-js/elements/issues"
   },
   "homepage": "https://github.com/color-js/elements#readme",
   "dependencies": {
+    "@11ty/eleventy": "^3.1.2",
     "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-anchor": "^8",
     "markdown-it-attrs": "^4.1.6",
     "npm-run-all": "^4.1.5",
     "release-it": "^17.2.0"
   }
-}
+}

package/src/channel-picker/README.md

@@ -0,0 +1,103 @@
+# `<channel-picker>`
+
+## Usage
+
+### Basic usage
+
+```html
+<channel-picker value="oklab.a"></channel-picker>
+```
+
+If no color channel is provided (via the `value` attribute/property),
+the default `oklch.l` will be used:
+
+```html
+<channel-picker></channel-picker>
+```
+
+You can hide the `color-space` part with CSS to show only the coordinates of the specified space:
+
+```html
+<channel-picker id="picker" value="hsl.h"></channel-picker>
+
+<style>
+	#picker::part(color-space) {
+		display: none;
+	}
+</style>
+```
+
+### Events
+
+You can listen to the `valuechange` event to get the current value (the `value` property). When a new color space is selected,
+the channel will be either preserved (if it is in the new space) or reset to the first available one:
+
+```html
+<channel-picker onvaluechange="this.nextElementSibling.textContent = this.value"></channel-picker>
+<output></output>
+```
+
+### Dynamic
+
+All properties are reactive and can be set programmatically:
+
+```html
+<button onclick="this.nextElementSibling.value = 'p3.b'">Switch to P3 Blue</button>
+<channel-picker></channel-picker>
+```
+
+`<channel-picker>` plays nicely with other color elements, like [`<channel-slider>`](../channel-slider):
+
+```html
+<channel-picker id="channel_picker" value="oklch.c"></channel-picker>
+<channel-slider id="channel_slider" color="oklch(50% 50% 180)"></channel-slider>
+
+<style>
+	#channel_picker::part(color-space) {
+		display: none;
+	}
+</style>
+
+<script>
+	function updateSlider() {
+		let [space, channel] = channel_picker.value.split(".");
+		channel_slider.space = space;
+		channel_slider.channel = channel;
+	}
+	
+	channel_picker.onvaluechange = updateSlider;
+</script>
+```
+
+## Reference
+
+### Attributes & Properties
+
+| Attribute | Property | Property type | Default value | Description                      |
+|-----------|----------|---------------|---------------|----------------------------------|
+| `value`   | `value`  | `string`      | `oklch.l`     | The current value of the picker. |
+
+### Getters
+
+These properties are read-only.
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `selectedSpace` | `ColorSpace` | Color space object corresponding to the space picker current value. |
+| `selectedChannel` | `object` | The current channel metadata.|
+
+### Events
+
+| Name            | Description                                                                    |
+|-----------------|--------------------------------------------------------------------------------|
+| `input`         | Fired when the color space or channel changes due to user action.              |
+| `change`        | Fired when the color space or channel changes due to user action.              |
+| `valuechange`   | Fired when the value changes for any reason, and once during initialization.   |
+
+### Parts
+
+| Name           | Description                                          |
+|----------------|------------------------------------------------------|
+| `color-space` | The internal [`<space-picker>`](../space-picker/) element. |
+| `color-space-base` | The internal `<select>` element of [`<space-picker>`](../space-picker/). |
+| `color-channel-base` | The internal `<select>` element. |

package/src/channel-picker/channel-picker.css

@@ -0,0 +1,31 @@
+:host {
+	--border-width: 1px;
+	--border-color: rgb(0 0 0 / .2);
+	--border-radius: .2em;
+
+	padding: .3em .5em;
+
+	border: var(--border-width) solid var(--border-color);
+	border-radius: var(--border-radius);
+}
+
+#picker {
+	font: inherit;
+	color: inherit;
+	background: inherit;
+	border: none;
+	field-sizing: content;
+	cursor: pointer;
+
+	&:focus:not(:focus-visible) {
+		outline: none;
+	}
+}
+
+#space_picker {
+	padding: initial;
+	padding-inline-end: .4em;
+	border-radius: 0;
+	border: none;
+	border-inline-end: var(--border-width) solid var(--border-color);
+}

package/src/channel-picker/channel-picker.js

@@ -0,0 +1,168 @@
+import ColorElement from "../common/color-element.js";
+import "../space-picker/space-picker.js";
+import * as dom from "../common/dom.js";
+
+const Self = class ChannelPicker extends ColorElement {
+	static tagName = "channel-picker";
+	static url = import.meta.url;
+	static styles = "./channel-picker.css";
+	static shadowTemplate = `
+		<space-picker part="color-space" exportparts="base: color-space-base" id="space_picker"></space-picker>
+		<select id="picker" part="color-channel-base"></select>`;
+
+	constructor () {
+		super();
+
+		this._el = dom.named(this);
+
+		// We need to start listening for this event as soon as the <space-picker> is created
+		this._el.space_picker.addEventListener("spacechange", this);
+
+		// We need to render the picker as soon as possible so as not to choke on invalid initial values
+		this.#render();
+	}
+
+	connectedCallback () {
+		super.connectedCallback?.();
+
+		this._el.picker.addEventListener("input", this);
+	}
+
+	disconnectedCallback () {
+		super.disconnectedCallback?.();
+
+		this._el.space_picker.removeEventListener("spacechange", this);
+		this._el.picker.removeEventListener("input", this);
+	}
+
+	get selectedSpace () {
+		return this._el.space_picker.selectedSpace;
+	}
+
+	get selectedChannel () {
+		return this.selectedSpace.coords?.[this._el.picker.value];
+	}
+
+	/**
+	 * Previously selected channels for each space.
+	 * Keys are space IDs. Values are coords.
+	 */
+	#history = {};
+
+	#render () {
+		let space = this.selectedSpace;
+		let coords = space.coords;
+
+		if (space && !coords) {
+			console.warn(`Color space "${ space.name }" has no coordinates.`);
+			return;
+		}
+
+		this._el.picker.innerHTML = Object.entries(coords)
+			.map(([id, coord]) => `<option value="${ id }">${ coord.name }</option>`)
+			.join("\n");
+
+		let [prevSpace, prevChannel] = this.value?.split(".") ?? [];
+		if (prevSpace && prevChannel) {
+			let prevChannelName = this._el.space_picker.spaces[prevSpace].coords[prevChannel].name;
+			let currentChannelName = coords[prevChannel]?.name;
+			if (prevChannelName === currentChannelName) {
+				// Preserve the channel if it exists in the new space and has the same name ("b" in "oklab" is not the same as "b" in "p3")
+				this._el.picker.value = prevChannel;
+			}
+			else if (this.#history?.[space.id]) {
+				// Otherwise, try to restore the last channel used
+				this._el.picker.value = this.#history[space.id];
+			}
+		}
+	}
+
+	handleEvent (event) {
+		if (event.type === "spacechange") {
+			this.#render();
+		}
+
+		if ([this._el.space_picker, this._el.picker].includes(event.target)) {
+			let value = `${ this._el.space_picker.value }.${ this._el.picker.value }`;
+			if (value !== this.value) {
+				this.value = value;
+			}
+		}
+	}
+
+	propChangedCallback ({name, prop, detail: change}) {
+		if (name === "value" && this.value) {
+			let [space, channel] = (this.value + "").split(".");
+
+			let currentSpace = this._el.space_picker.value;
+			let currentCoord = this._el.picker.value;
+			let currentValue = `${ currentSpace }.${ currentCoord }`;
+
+			if (!space || !channel) {
+				console.warn(`Invalid value "${ this.value }". Expected format: "space.channel". Falling back to "${ currentValue }".`);
+				this.value = currentValue;
+			}
+			else {
+				let spaces = Object.keys(this._el.space_picker.spaces);
+
+				if (!spaces.includes(space)) {
+					console.warn(`No "${ space }" color space found. Choose one of the following: ${ spaces.join(", ") }. Falling back to "${ currentSpace }".`);
+					this.value = currentValue;
+				}
+				else {
+					if (currentSpace !== space) {
+						this._el.space_picker.value = space;
+					}
+
+					if (currentCoord && currentCoord !== channel) {
+						let coords = Object.keys(this.selectedSpace.coords ?? {});
+
+						if (coords.includes(channel)) {
+							this._el.picker.value = channel;
+						}
+						else {
+							currentCoord = coords.includes(currentCoord) ? currentCoord : coords[0];
+
+							let message = `Color space "${ space }" has no coordinate "${ channel }".`;
+							if (coords.length) {
+								message += ` Choose one of the following: ${ coords.join(", ") }.`;
+							}
+							message += ` Falling back to "${ currentCoord }".`;
+							console.warn(message);
+							this.value = `${ space }.${ currentCoord }`;
+							channel = currentCoord;
+						}
+					}
+
+					this.#history[space] = channel;
+				}
+			}
+		}
+	}
+
+	static props = {
+		value: {
+			default: "oklch.l",
+		},
+	};
+
+	static events = {
+		change: {
+			from () {
+				return [this._el.space_picker, this._el.picker];
+			},
+		},
+		input: {
+			from () {
+				return [this._el.space_picker, this._el.picker];
+			},
+		},
+		valuechange: {
+			propchange: "value",
+		},
+	};
+};
+
+Self.define();
+
+export default Self;