color-elements 0.0.4 → 0.0.5

package/.claude/settings.local.json

@@ -0,0 +1,30 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git fetch:*)",
+      "WebSearch",
+      "WebFetch(domain:www.npmjs.com)",
+      "Bash(npm info:*)",
+      "WebFetch(domain:github.com)",
+      "Bash(cat:*)",
+      "Bash(npm install:*)",
+      "Bash(npx nudeps:*)",
+      "Bash(npm run:*)",
+      "Bash(gh pr:*)",
+      "Bash(gh api:*)",
+      "WebFetch(domain:unpkg.com)",
+      "Bash(ls:*)",
+      "Bash(but:*)",
+      "WebFetch(domain:esm.sh)",
+      "Bash(npm pack:*)",
+      "Bash(mkdir -p /tmp/test-exports)",
+      "Read(//tmp/**)",
+      "Bash(rm -rf *)",
+      "Bash(npm init -y)",
+      "Bash(rm -rf /tmp/test-exports)",
+      "Read(//private/tmp/test-exports/**)",
+      "Bash(node:*)",
+      "Bash(rm:*)"
+    ]
+  }
+}

package/.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = tab
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf

package/.prettierrc

@@ -0,0 +1,17 @@
+{
+	"plugins": [
+		"prettier-plugin-brace-style",
+		"prettier-plugin-space-before-function-paren",
+		"prettier-plugin-merge"
+	],
+	"braceStyle": "stroustrup",
+	"arrowParens": "avoid",
+	"bracketSpacing": true,
+	"endOfLine": "auto",
+	"semi": true,
+	"singleQuote": false,
+	"tabWidth": 4,
+	"useTabs": true,
+	"trailingComma": "all",
+	"printWidth": 100
+}

package/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+	"editor.formatOnSave": true,
+	"editor.formatOnSaveMode": "file",
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"prettier.enable": true,
+	"debug.enableStatusBarColor": false
+}

package/README.md

@@ -33,38 +33,47 @@ Use at your own risk, the API can change at any point.
 
 ## Usage
 
-### CDN
+### Via bare specifiers
 
-To include all components at once:
+Install via npm:
 
-```html
-<script src="https://elements.colorjs.io/index.js" type="module"></script>
+```bash
+npm i color-elements
 ```
 
-To cherry-pick individual components, follow the instructions within the component’s page, but it generally looks like this:
+To include all components at once:
 
-```html
-<script src="https://elements.colorjs.io/src/COMPONENT_NAME/COMPONENT_NAME.js" type="module"></script>
+```js
+import "color-elements";
 ```
 
-Each component imports its own dependencies and styles.
+You can also import individual components:
 
-### NPM
+```js
+import "color-elements/COMPONENT_NAME";
+```
 
-As usual:
+Each component also exports a standalone CSS file (for [CSS-only usage](src/color-slider/#css-only-usage)):
 
-```bash
-npm i color-elements
+```css
+@import url("color-elements/COMPONENT_NAME.css");
 ```
 
-and then:
+You can use these imports with [Nudeps](https://nudeps.dev) — no bundler needed
+(this website does) — or with any bundler you already have.
 
-```js
-import "color-elements";
+### Via CDN
+
+If you’d rather not set up any tooling, you can use a CDN such as [esm.sh](https://esm.sh):
+
+```html
+<script src="https://esm.sh/color-elements" type="module"></script>
 ```
 
-You can also import individual components:
+To cherry-pick individual components:
 
-```js
-import "color-elements/COMPONENT_NAME";
+```html
+<script src="https://esm.sh/color-elements/COMPONENT_NAME" type="module"></script>
 ```
+
+Each component imports its own dependencies and styles.

package/_build/copy-config.js

@@ -1,23 +1,20 @@
-import { exec } from 'child_process';
+import { exec } from "child_process";
 import { writeFileSync, readFileSync } from "fs";
 import config from "./copy-config.json" with { type: "json" };
 
 const TEMP_REPO = "_build/.colorjs.io";
 
 // Cleanup past attempts
-exec(`rm -rf ${ TEMP_REPO }`);
+exec(`rm -rf ${TEMP_REPO}`);
 
 // Copy files from source repo
 let commands = [
-	`git clone ${ config.source } ${ TEMP_REPO }`,
+	`git clone ${config.source} ${TEMP_REPO}`,
 	...config.paths.map(path => {
 		let [current_path, new_path] = Array.isArray(path) ? path : [path, path];
 		let new_path_dir = new_path.split("/").slice(0, -1).join("/");
 
-		let commands = [
-			`rm -rf ./${new_path}`,
-			`cp -r ${TEMP_REPO}/${ current_path } ./${ new_path }`,
-		];
+		let commands = [`rm -rf ./${new_path}`, `cp -r ${TEMP_REPO}/${current_path} ./${new_path}`];
 
 		if (new_path_dir) {
 			commands.splice(1, 0, `mkdir -p ./${new_path_dir}`);
@@ -30,7 +27,7 @@ let commands = [
 await new Promise(resolve => {
 	exec(commands.join(" && "), (err, stdout, stderr) => {
 		// Cleanup
-		exec(`rm -rf ${ TEMP_REPO }`);
+		exec(`rm -rf ${TEMP_REPO}`);
 
 		if (err) {
 			console.error(err);
@@ -54,7 +51,8 @@ for (let path of config.paths) {
 	if (i > -1) {
 		index = i;
 	}
-	else { // not found
+	else {
+		// not found
 		gitignore.push(new_path);
 		paths_added_to_gitignore.push(new_path);
 	}
@@ -65,14 +63,17 @@ if (paths_added_to_gitignore.length > 0) {
 	console.log("Added paths to .gitignore: " + paths_added_to_gitignore.join(", "));
 }
 
-let source_package_json = JSON.parse(readFileSync(`${ TEMP_REPO }/package.json`, "utf8"));
+let source_package_json = JSON.parse(readFileSync(`${TEMP_REPO}/package.json`, "utf8"));
 let package_json = JSON.parse(readFileSync(`package.json`, "utf8"));
 
 // Copy npm scripts
 let scripts_copied = [];
 
 for (let script of config.scripts) {
-	if (source_package_json.scripts[script] && package_json.scripts[script] !== source_package_json.scripts[script]) {
+	if (
+		source_package_json.scripts[script] &&
+		package_json.scripts[script] !== source_package_json.scripts[script]
+	) {
 		package_json.scripts[script] = source_package_json.scripts[script];
 		scripts_copied.push(script);
 	}
@@ -94,7 +95,7 @@ if (source_package_json.devDependencies) {
 	}
 
 	if (missing_packages.length) {
-		console.warn(`Installing packages: ${ missing_packages.join(", ") }`);
-		exec(`npm install -D ${ missing_packages.join(" ") }`);
+		console.warn(`Installing packages: ${missing_packages.join(", ")}`);
+		exec(`npm install -D ${missing_packages.join(" ")}`);
 	}
-}
+}

package/_build/copy-config.json

@@ -3,16 +3,11 @@
 	"paths": [
 		"_includes/partials/_nav.njk",
 		"_includes/page.njk",
-		"_includes/plain.njk",
+		["_includes/plain.njk", "_includes/plain-base.njk"],
 		"data/eleventyComputed.js",
 		["_build/eleventy.js", "_build/eleventy-original.js"],
 		"_build/filters.js"
 	],
-	"scripts": [
-		"build:html",
-		"watch:html"
-	],
-	"packages": [
-		"@11ty/eleventy"
-	]
-}
+	"scripts": ["build:html", "watch:html"],
+	"packages": ["@11ty/eleventy"]
+}

package/_build/eleventy.js

@@ -5,8 +5,8 @@ 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",
+	permalink: "{{ page.filePathStem | replace('README', '') | replace('index', '') }}/index.html",
+	body_classes: "cn-ignore",
 };
 
 let md = markdownIt({
@@ -14,12 +14,12 @@ let md = markdownIt({
 	linkify: true,
 	typographer: true,
 })
-.disable("code")
-.use(markdownItAttrs)
-.use(markdownItAnchor, {
-	permalink: markdownItAnchor.permalink.headerLink(),
-	level: 2,
-});
+	.disable("code")
+	.use(markdownItAttrs)
+	.use(markdownItAnchor, {
+		permalink: markdownItAnchor.permalink.headerLink(),
+		level: 2,
+	});
 
 export default config => {
 	let ret = configOriginal(config);

package/_includes/component.njk

@@ -42,19 +42,7 @@
 To install all color elements, check out the [instructions on the homepage](../).
 The rest of this section is about using _only_ `{{ tag | safe }}`.
 
-The quick and dirty way is straight from the CDN (kindly provided by [Netlify](https://www.netlify.com/)):
-
-```html
-<script src="https://elements.colorjs.io/src/{{ name }}/{{ name }}.js" type="module"></script>
-```
-
-or in JS:
-
-```js
-import "https://elements.colorjs.io/src/{{ name }}/{{ name }}.js";
-```
-
-If you are using npm to manage your dependencies, you can import it via:
+If you’re using a bundler, or an import map manager like [Nudeps](https://nudeps.dev/) or [JSPM](https://jspm.org/), you can import it via a bare specifier:
 
 ```js
 import "color-elements/{{ name }}";
@@ -65,5 +53,12 @@ or:
 ```js
 import { {{ name | tag_to_class }} } from "color-elements";
 ```
+
+
+Otherwise, you can use a CDN such as [esm.sh](https://esm.sh):
+
+```html
+<script src="https://esm.sh/color-elements/{{ name }}" type="module"></script>
+```
 {% endmd %}
-</section>
+</section>

package/_includes/plain.njk

@@ -0,0 +1,5 @@
+{% extends "plain-base.njk" %}
+
+{% block head %}
+<script src="/importmap.js"></script>
+{% endblock %}

package/_redirects

@@ -1,5 +1,5 @@
 # Specific versions
-node_modules/nude-element/* https://cdn.jsdelivr.net/npm/nude-element@0.0.14/:splat 200
+node_modules/nude-element/* https://cdn.jsdelivr.net/npm/nude-element@0.1.1/:splat 200
 
 # Catch all NPM fallback
 node_modules/:modulename/* https://cdn.jsdelivr.net/npm/:modulename@latest/:splat 200

package/assets/css/style.css

@@ -17,9 +17,9 @@
 		overflow: hidden;
 
 		border: 1px solid var(--_border-color);
-		border-radius: .5em;
+		border-radius: 0.5em;
 
-		box-shadow: 0 .02em .5em -.7em hsl(var(--gray) 30%);
+		box-shadow: 0 0.02em 0.5em -0.7em hsl(var(--gray) 30%);
 
 		&:is(:hover, :focus-within) {
 			img {
@@ -30,12 +30,12 @@
 		img {
 			inline-size: 100%;
 			aspect-ratio: 4 / 3;
-			transition: scale .2s;
+			transition: scale 0.2s;
 		}
 
 		figcaption {
 			margin: 0;
-			padding: 0 .7em .5em;
+			padding: 0 0.7em 0.5em;
 			border-block-start: 1px solid var(--_border-color);
 			background-color: hsl(var(--gray) 98%);
 			z-index: 1;

package/debug.html

@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+	<!-- <html lang="en" style="color-scheme: dark;"> -->
+
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<!-- <link rel="stylesheet" href="./src/color-chart/color-chart-global.css"> -->
+		<title>Document</title>
+		<style>
+			:root {
+				--test: red;
+			}
+
+			html,
+			body {
+				margin: 0;
+				min-height: 100vh;
+			}
+		</style>
+	</head>
+
+	<!-- <body style="display: grid; place-items: center; align-content: center; margin: 2rem"> -->
+
+	<body style="display: grid; align-items: center; align-content: center; margin: 2rem">
+		<html-demo>
+			<space-picker
+				onspacechange="this.nextElementSibling.textContent = this.value"
+			></space-picker>
+			<output></output>
+		</html-demo>
+
+		<!-- <script src="./index.js" type="module"></script> -->
+		<!--<script src="./src/color-picker/color-picker.js" type="module"></script>-->
+		<!--<script src="./src/color-slider/color-slider.js" type="module"></script>-->
+		<!--<script src="./src/channel-slider/channel-slider.js" type="module"></script>-->
+		<!--<script src="./src/color-swatch/color-swatch.js" type="module"></script>-->
+		<!--<script src="./src/color-scale/color-scale.js" type="module"></script>-->
+		<!--<script src="./src/color-chart/color-chart.js" type="module"></script>-->
+		<script src="./src/space-picker/space-picker.js" type="module"></script>
+		<!--<script src="./src/channel-picker/channel-picker.js" type="module"></script>-->
+		<!--<script src="./src/gamut-badge/gamut-badge.js" type="module"></script> -->
+		<!--<script src="./src/color-inline/color-inline.js" type="module"></script>-->
+		<script src="https://nudeui.com/elements/html-demo/html-demo.js" type="module"></script>
+	</body>
+</html>

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "color-elements",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "A set of web components for working with color. A Color.js project.",
   "main": "index.js",
   "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./*.css": "./src/*/*.css",
+    "./*": "./src/*/*.js"
+  },
   "scripts": {
     "eslint": "npx eslint .",
     "eslint:fix": "npx eslint . --fix",
@@ -11,11 +16,13 @@
     "build": "npm run build:html",
     "watch": "run-p watch:*",
     "prepack": "npm run build",
-    "release": "release-it",
+    "release": "npm login && 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"
+    "watch:html": "npx @11ty/eleventy --config=_build/eleventy.js --serve",
+    "dependencies": "npx nudeps",
+    "prepare": "npx nudeps"
   },
   "repository": {
     "type": "git",
@@ -37,17 +44,21 @@
   },
   "homepage": "https://github.com/color-js/elements#readme",
   "dependencies": {
-    "@11ty/eleventy": "^3.1.2",
-    "colorjs.io": "^0.5.0",
-    "nude-element": "latest"
+    "colorjs.io": ">=0.5.0",
+    "nude-element": "^0.1.1"
   },
   "devDependencies": {
+    "@11ty/eleventy": "^3.1.2",
     "@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"
+    "nudeps": "^0.2.3",
+    "prettier-plugin-brace-style": "latest",
+    "prettier-plugin-merge": "latest",
+    "prettier-plugin-space-before-function-paren": "latest",
+    "release-it": "^19.2.4"
   }
-}
+}

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

@@ -1,9 +1,9 @@
 :host {
 	--border-width: 1px;
-	--border-color: rgb(0 0 0 / .2);
-	--border-radius: .2em;
+	--border-color: rgb(0 0 0 / 0.2);
+	--border-radius: 0.2em;
 
-	padding: .3em .5em;
+	padding: 0.3em 0.5em;
 
 	border: var(--border-width) solid var(--border-color);
 	border-radius: var(--border-radius);
@@ -24,7 +24,7 @@
 
 #space_picker {
 	padding: initial;
-	padding-inline-end: .4em;
+	padding-inline-end: 0.4em;
 	border-radius: 0;
 	border: none;
 	border-inline-end: var(--border-width) solid var(--border-color);

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

@@ -54,12 +54,12 @@ const Self = class ChannelPicker extends ColorElement {
 		let coords = space.coords;
 
 		if (space && !coords) {
-			console.warn(`Color space "${ space.name }" has no coordinates.`);
+			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>`)
+			.map(([id, coord]) => `<option value="${id}">${coord.name}</option>`)
 			.join("\n");
 
 		let [prevSpace, prevChannel] = this.value?.split(".") ?? [];
@@ -83,30 +83,34 @@ const Self = class ChannelPicker extends ColorElement {
 		}
 
 		if ([this._el.space_picker, this._el.picker].includes(event.target)) {
-			let value = `${ this._el.space_picker.value }.${ this._el.picker.value }`;
+			let value = `${this._el.space_picker.value}.${this._el.picker.value}`;
 			if (value !== this.value) {
 				this.value = value;
 			}
 		}
 	}
 
-	propChangedCallback ({name, prop, detail: change}) {
+	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 }`;
+			let currentValue = `${currentSpace}.${currentCoord}`;
 
 			if (!space || !channel) {
-				console.warn(`Invalid value "${ this.value }". Expected format: "space.channel". Falling back to "${ currentValue }".`);
+				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 }".`);
+					console.warn(
+						`No "${space}" color space found. Choose one of the following: ${spaces.join(", ")}. Falling back to "${currentSpace}".`,
+					);
 					this.value = currentValue;
 				}
 				else {
@@ -123,13 +127,13 @@ const Self = class ChannelPicker extends ColorElement {
 						else {
 							currentCoord = coords.includes(currentCoord) ? currentCoord : coords[0];
 
-							let message = `Color space "${ space }" has no coordinate "${ channel }".`;
+							let message = `Color space "${space}" has no coordinate "${channel}".`;
 							if (coords.length) {
-								message += ` Choose one of the following: ${ coords.join(", ") }.`;
+								message += ` Choose one of the following: ${coords.join(", ")}.`;
 							}
-							message += ` Falling back to "${ currentCoord }".`;
+							message += ` Falling back to "${currentCoord}".`;
 							console.warn(message);
-							this.value = `${ space }.${ currentCoord }`;
+							this.value = `${space}.${currentCoord}`;
 							channel = currentCoord;
 						}
 					}

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

@@ -3,7 +3,7 @@
 
 	display: grid;
 	grid-template-columns: 1fr auto;
-	gap: .3em;
+	gap: 0.3em;
 	align-items: center;
 
 	em {
@@ -15,8 +15,15 @@
 		opacity: 0;
 	}
 
-	input[type=number] {
-		--_border-color: var(--border-color, color-mix(in oklab, currentcolor calc(var(--_current-color-percent, 30) * 1%), oklab(none none none / 0%)));
+	input[type="number"] {
+		--_border-color: var(
+			--border-color,
+			color-mix(
+				in oklab,
+				currentcolor calc(var(--_current-color-percent, 30) * 1%),
+				oklab(none none none / 0%)
+			)
+		);
 
 		all: unset;
 
@@ -24,8 +31,8 @@
 		width: calc(var(--content-width, 2ch) + 1.2em);
 		min-width: calc(2ch + 1.2em);
 		box-sizing: content-box;
-		padding: .1em .2em;
-		border-radius: .2em;
+		padding: 0.1em 0.2em;
+		border-radius: 0.2em;
 		border: 1px solid var(--_border-color);
 		text-align: center;
 		font-size: 90%;
@@ -33,7 +40,7 @@
 		transition-property: opacity, border-color;
 
 		&::-webkit-textfield-decoration-container {
-			gap: .2em;
+			gap: 0.2em;
 		}
 
 		&:not(:hover, :focus) {
@@ -44,7 +51,7 @@
 
 			&::-webkit-inner-spin-button {
 				/* Fade out the spin buttons in Chrome and Safari */
-				opacity: .35;
+				opacity: 0.35;
 				filter: contrast(2);
 			}
 		}

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

@@ -86,7 +86,7 @@ const Self = class ChannelSlider extends ColorElement {
 		return this._el.slider.progressAt(p);
 	}
 
-	propChangedCallback ({name, prop, detail: change}) {
+	propChangedCallback ({ name, prop, detail: change }) {
 		if (["space", "min", "max", "step", "value", "defaultValue"].includes(name)) {
 			prop.applyChange(this._el.slider, change);
 
@@ -104,11 +104,17 @@ const Self = class ChannelSlider extends ColorElement {
 			}
 		}
 
-		if (name === "defaultColor" || name === "space" || name === "channel" || name === "min" || name === "max") {
+		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.channel_info.innerHTML = `${ this.channelName } <em>(${ this.min }&thinsp;&ndash;&thinsp;${ this.max })</em>`;
+				this._el.channel_info.innerHTML = `${this.channelName} <em>(${this.min}&thinsp;&ndash;&thinsp;${this.max})</em>`;
 			}
 		}
 	}
@@ -164,7 +170,9 @@ const Self = class ChannelSlider extends ColorElement {
 
 				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.`);
+					console.warn(
+						`Unknown channel ${this.channel} in space ${this.space}. Using first channel (${channelSpec.name}) instead.`,
+					);
 				}
 
 				return channelSpec;
@@ -274,7 +282,7 @@ const Self = class ChannelSlider extends ColorElement {
 		},
 	};
 
-	static formAssociated = {
+	static formBehavior = {
 		like: el => el._el.slider,
 		role: "slider",
 		valueProp: "value",