color-elements 0.0.1 → 0.0.3

package/eslint.config.js

@@ -0,0 +1,316 @@
+import globals from "globals";
+import stylistic from "@stylistic/eslint-plugin";
+
+export default [
+	{
+		languageOptions: {
+			ecmaVersion: 2022,
+			sourceType: "module",
+			globals: {
+				...globals.browser,
+			},
+		},
+		plugins: {
+			"@stylistic": stylistic,
+		},
+		rules: {
+			/**
+			 * ESLint rules: https://eslint.org/docs/latest/rules/
+			 * Based off of: https://github.com/eslint/eslint/blob/v8.54.0/packages/js/src/configs/eslint-recommended.js
+			 */
+			// Enforce curly braces for all control statements
+			// https://eslint.org/docs/latest/rules/curly
+			curly: 1,
+
+			// Require `super()` calls in constructors
+			// https://eslint.org/docs/latest/rules/constructor-super
+			"constructor-super": 1,
+
+			// Enforce “for” loop update clause moving the counter in the right direction
+			// https://eslint.org/docs/latest/rules/for-direction
+			"for-direction": 1,
+
+			// Enforce `return` statements in getters
+			// https://eslint.org/docs/latest/rules/getter-return
+			"getter-return": 1,
+
+			// Disallow using an async function as a Promise executor
+			// https://eslint.org/docs/latest/rules/no-async-promise-executor
+			"no-async-promise-executor": 1,
+
+			// Disallow `let`/const`/function`/`class` in `case`/`default` clauses
+			// https://eslint.org/docs/latest/rules/no-case-declarations
+			"no-case-declarations": 1,
+
+			// Disallow reassigning class members
+			// https://eslint.org/docs/latest/rules/no-class-assign
+			"no-class-assign": 1,
+
+			// Disallow comparing against -0
+			// https://eslint.org/docs/latest/rules/no-compare-neg-zero
+			"no-compare-neg-zero": 1,
+
+			// Disallow reassigning `const` variables
+			// https://eslint.org/docs/latest/rules/no-const-assign
+			"no-const-assign": 1,
+
+			// Disallow constant expressions in conditions
+			// https://eslint.org/docs/latest/rules/no-constant-condition
+			"no-constant-condition": 1,
+
+			// Disallow control characters in regular expressions
+			// https://eslint.org/docs/latest/rules/no-control-regex
+			"no-control-regex": 1,
+
+			// Disallow the use of `debugger`
+			// https://eslint.org/docs/latest/rules/no-debugger
+			"no-debugger": 1,
+
+			// Disallow deleting variables
+			// https://eslint.org/docs/latest/rules/no-delete-var
+			"no-delete-var": 1,
+
+			// Disallow duplicate arguments in `function` definitions
+			// https://eslint.org/docs/latest/rules/no-dupe-args
+			"no-dupe-args": 1,
+
+			// Disallow duplicate class members
+			// https://eslint.org/docs/latest/rules/no-dupe-class-members
+			"no-dupe-class-members": 1,
+
+			// Disallow duplicate conditions in if-else-if chains
+			// https://eslint.org/docs/latest/rules/no-dupe-else-if
+			"no-dupe-else-if": 1,
+
+			// Disallow duplicate keys in object literals
+			// https://eslint.org/docs/latest/rules/no-dupe-keys
+			"no-dupe-keys": 1,
+
+			// Disallow duplicate case labels
+			// https://eslint.org/docs/latest/rules/no-duplicate-case
+			"no-duplicate-case": 1,
+
+			// Disallow empty character classes in regular expressions
+			// https://eslint.org/docs/latest/rules/no-empty-character-class
+			"no-empty-character-class": 1,
+
+			// Disallow empty destructuring patterns
+			// https://eslint.org/docs/latest/rules/no-empty-pattern
+			"no-empty-pattern": 1,
+
+			// Disallow reassigning exceptions in `catch` clauses
+			// https://eslint.org/docs/latest/rules/no-ex-assign
+			"no-ex-assign": 1,
+
+			// Disallow unnecessary boolean casts
+			// https://eslint.org/docs/latest/rules/no-extra-boolean-cast
+			"no-extra-boolean-cast": 1,
+
+			// Disallow fallthrough of `case` statements
+			// unless marked with a comment that matches `/falls?\s?through/i` regex
+			// https://eslint.org/docs/latest/rules/no-fallthrough
+			"no-fallthrough": 1,
+
+			// Disallow reassigning `function` declarations
+			// https://eslint.org/docs/latest/rules/no-func-assign
+			"no-func-assign": 1,
+
+			// Disallow assignments to native objects or read-only global variables
+			// https://eslint.org/docs/latest/rules/no-global-assign
+			"no-global-assign": 1,
+
+			// Disallow assigning to imported bindings
+			// https://eslint.org/docs/latest/rules/no-import-assign
+			"no-import-assign": 1,
+
+			// Disallow invalid regular expression strings in `RegExp` constructors
+			// https://eslint.org/docs/latest/rules/no-invalid-regexp
+			"no-invalid-regexp": 1,
+
+			// Disallow whitespace that is not `tab` or `space` except in string literals
+			// https://eslint.org/docs/latest/rules/no-irregular-whitespace
+			"no-irregular-whitespace": 1,
+
+			// Disallow characters which are made with multiple code points in character class syntax
+			// https://eslint.org/docs/latest/rules/no-misleading-character-class
+			"no-misleading-character-class": 1,
+
+			// Disallow `new` operators with the `Symbol` object
+			// https://eslint.org/docs/latest/rules/no-new-symbol
+			"no-new-symbol": 1,
+
+			// Disallow `\8` and `\9` escape sequences in string literals
+			// https://eslint.org/docs/latest/rules/no-nonoctal-decimal-escape
+			"no-nonoctal-decimal-escape": 1,
+
+			// Disallow calling global object properties as functions
+			// https://eslint.org/docs/latest/rules/no-obj-calls
+			"no-obj-calls": 1,
+
+			// Disallow octal literals
+			// https://eslint.org/docs/latest/rules/no-octal
+			"no-octal": 1,
+
+			// Disallow calling some `Object.prototype` methods directly on objects
+			// https://eslint.org/docs/latest/rules/no-prototype-builtins
+			"no-prototype-builtins": 1,
+
+			// Disallow multiple spaces in regular expressions
+			// https://eslint.org/docs/latest/rules/no-regex-spaces
+			"no-regex-spaces": 1,
+
+			// Disallow assignments where both sides are exactly the same
+			// https://eslint.org/docs/latest/rules/no-self-assign
+			"no-self-assign": 1,
+
+			// Disallow identifiers from shadowing restricted names
+			// https://eslint.org/docs/latest/rules/no-shadow-restricted-names
+			"no-shadow-restricted-names": 1,
+
+			// Disallow `this`/`super` before calling `super()` in constructors
+			// https://eslint.org/docs/latest/rules/no-this-before-super
+			"no-this-before-super": 1,
+
+			// Disallow the use of undeclared variables unless mentioned in `/*global */` comments
+			// https://eslint.org/docs/latest/rules/no-undef
+			// TODO: At-risk; subject to change.
+			"no-undef": 1,
+
+			// Disallow confusing multiline expressions
+			// https://eslint.org/docs/latest/rules/no-unexpected-multiline
+			// TODO: At-risk; subject to change.
+			"no-unexpected-multiline": 1,
+
+			// Disallow unreachable code after `return`, `throw`, `continue`, and `break` statements
+			// https://eslint.org/docs/latest/rules/no-unreachable
+			"no-unreachable": 1,
+
+			// Disallow control flow statements in `finally` blocks
+			// https://eslint.org/docs/latest/rules/no-unsafe-finally
+			"no-unsafe-finally": 1,
+
+			// Disallow negating the left operand of relational operators
+			// https://eslint.org/docs/latest/rules/no-unsafe-negation
+			"no-unsafe-negation": 1,
+
+			// Disallow use of optional chaining in contexts where the `undefined` value is not allowed
+			// https://eslint.org/docs/latest/rules/no-unsafe-optional-chaining
+			"no-unsafe-optional-chaining": 1,
+
+			// Disallow unused labels
+			// https://eslint.org/docs/latest/rules/no-unused-labels
+			"no-unused-labels": 1,
+
+			// Disallow useless backreferences in regular expressions
+			// https://eslint.org/docs/latest/rules/no-useless-backreference
+			"no-useless-backreference": 1,
+
+			// Disallow unnecessary calls to `.call()` and `.apply()`
+			// https://eslint.org/docs/latest/rules/no-useless-call
+			"no-useless-call": 1,
+
+			// Disallow unnecessary `catch` clauses
+			// https://eslint.org/docs/latest/rules/no-useless-catch
+			"no-useless-catch": 1,
+
+			// Disallow unnecessary escape characters
+			// https://eslint.org/docs/latest/rules/no-useless-escape
+			"no-useless-escape": 1,
+
+			// Disallow `with` statements
+			// https://eslint.org/docs/latest/rules/no-with
+			"no-with": 1,
+
+			// Require generator functions to contain `yield`
+			// https://eslint.org/docs/latest/rules/require-yield
+			"require-yield": 1,
+
+			// Require calls to `isNaN()` when checking for `NaN`
+			// https://eslint.org/docs/latest/rules/use-isnan
+			"use-isnan": 1,
+
+			// Enforce comparing `typeof` expressions against valid strings
+			// https://eslint.org/docs/latest/rules/valid-typeof
+			"valid-typeof": 1,
+
+			/**
+			 * ESLint Stylistic rules: https://eslint.style/packages/default#rules
+			 */
+			// Enforce a space before and after `=>` in arrow functions
+			// https://eslint.style/rules/default/arrow-spacing
+			"@stylistic/arrow-spacing": 1,
+
+			// Enforce consistent brace style for blocks
+			// https://eslint.style/rules/default/brace-style
+			"@stylistic/brace-style": [1, "stroustrup"],
+
+			// Enforce trailing commas unless closing `]` or `}` is on the same line
+			// https://eslint.style/rules/default/comma-dangle
+			"@stylistic/comma-dangle": [1, "always-multiline"],
+
+			// Enforce no space before and one or more spaces after a comma
+			// https://eslint.style/rules/default/comma-spacing
+			"@stylistic/comma-spacing": 1,
+
+			// Require newline at the end of files
+			// https://eslint.style/rules/default/eol-last
+			"@stylistic/eol-last": 1,
+
+			// Enforce consistent indentation
+			// https://eslint.style/rules/default/indent
+			"@stylistic/indent": [1, "tab", { SwitchCase: 1, outerIIFEBody: 0 }],
+
+			// Enforce consistent spacing before and after keywords
+			// https://eslint.style/rules/default/keyword-spacing
+			"@stylistic/keyword-spacing": 1,
+
+			// Disallow unnecessary semicolons
+			// https://eslint.style/rules/default/no-extra-semi
+			"@stylistic/no-extra-semi": 1,
+
+			// Disallow mixed spaces and tabs for indentation
+			// https://eslint.style/rules/default/no-mixed-spaces-and-tabs
+			"@stylistic/no-mixed-spaces-and-tabs": [1, "smart-tabs"],
+
+			// Disallow trailing whitespace at the end of lines
+			// https://eslint.style/rules/default/no-trailing-spaces
+			"@stylistic/no-trailing-spaces": 1,
+
+			// Enforce the consistent use of double quotes
+			// https://eslint.style/rules/default/quotes
+			"@stylistic/quotes": [
+				1,
+				"double",
+				{ avoidEscape: true, allowTemplateLiterals: true },
+			],
+
+			// Require semicolons instead of ASI
+			// https://eslint.style/rules/default/semi
+			"@stylistic/semi": 1,
+
+			// Enforce at least one space before blocks
+			// https://eslint.style/rules/default/space-before-blocks
+			"@stylistic/space-before-blocks": 1,
+
+			// Enforce a space before `function` definition opening parenthesis
+			// https://eslint.style/rules/default/space-before-function-paren
+			"@stylistic/space-before-function-paren": 1,
+
+			// Require spaces around infix operators (e.g. `+`, `=`, `?`, `:`)
+			// https://eslint.style/rules/default/space-infix-ops
+			"@stylistic/space-infix-ops": 1,
+
+			// Enforce a space after unary word operators (`new`, `delete`, `typeof`, `void`, `yield`)
+			// https://eslint.style/rules/default/space-unary-ops
+			"@stylistic/space-unary-ops": 1,
+
+			// Enforce whitespace after the `//` or `/*` in a comment
+			// https://eslint.style/rules/default/spaced-comment
+			"@stylistic/spaced-comment": [
+				1,
+				"always",
+				{ block: { exceptions: ["*"] } },
+			],
+		},
+	},
+];

package/index.js

@@ -1,4 +1,10 @@
-export { default as ColorSlider } from './color-slider/color-slider.js';
-export { default as ColorSwatch } from './color-swatch/color-swatch.js';
-export { default as CSSColor } from './css-color/css-color.js';
-export { default as ColorGamut } from './color-gamut/color-gamut.js';
+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 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/logo.svg

@@ -1,30 +1,36 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -625 630 615" overflow="visible" height="600">
 <desc>Based on u*,v* UCS diagram</desc>
 <style>
+
 #tongue {
 	fill: hsl(220, 10%, 48%);
 }
 
-.color-space polygon {
-	fill: none;
+text {
+	stroke: hsl(220, 10%, 94%);
+	stroke-width: .1em;
+	stroke-linejoin: round;
+	font: 800 333px/1 system-ui, sans-serif;
+	text-anchor: middle;
+	dominant-baseline: middle;
+	letter-spacing: -.06em;
+	paint-order: stroke fill;
 }
 
-.color-space circle,
-.color-space polygon {
-	stroke: hsl(220, 10%, 88%);
-	stroke-width: 30px;
+.lt {
+	fill: hsl(0, 80%, 50%);
 }
 
-.color-space circle {
-	stroke-width: 22px;
+.slash {
+	fill: hsl(90, 50%, 45%);
 }
 
-#white-point {
-	fill: white;
+.gt {
+	fill: hsl(210 80% 55%);
 }
 
 </style>
-
+<!-- <rect x="0" y="-625" width="630" height="615" fill="hsl(60, 100%, 50%)"/> -->
 <path id="tongue" d="M 256.804  -16.594
   L 256.637  -16.593
   L 256.418  -16.266
@@ -120,39 +126,11 @@
   L 623.393  -506.491
   Z"/>
 
-<!-- White point -->
-<!-- <circle r="12" cx="197.83" cy="-468.32" id="white-point" /> -->
-
-<!-- sRGB
-red 450.70423, 522.88732
-green  125, 562.5
-blue 175.4386, 157.89474
-white 197.83001, 468.31999
-
-<g class="color-space" id="srgb">
-	<polygon points="450.7, -522.887 125, -562.5 175.44, -157.89"/>
-
-	<circle r="36" cx="450.7" cy="-522.887" fill="hsl(0, 80%, 50%)" />
-	<circle r="36" cx="125" cy="-562.5" fill="hsl(90, 50%, 45%)" />
-	<circle r="36" cx="175.44" cy="-157.89" fill="hsl(210 80% 55%)" />
-</g>
--->
-
-<!-- display-p3000
-red 496.35036, 525.54745
-green 98.60465, 577.67442
-blue 175.4386, 157.89474
-white 197.83001, 468.31999
--->
-<g class="color-space" id="p3">
-	<polygon points="496.35, -525.54 98.6, -577.67 175.44, -157.89"/>
-
-	<circle r="36" cx="496.35" cy="-525.54" fill="hsl(0, 80%, 50%)" />
-	<circle r="36" cx="98.6" cy="-577.67" fill="hsl(90, 50%, 45%)" />
-	<circle r="36" cx="175.44" cy="-157.89" fill="hsl(210 80% 55%)" />
-</g>
-
-
+<text x="44%" y="-55%">
+	<tspan class="lt">&lt;</tspan>
+	<tspan class="slash">/</tspan>
+	<tspan class="gt">&gt;</tspan>
+</text>
 
 
 

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "color-elements",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "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,17 @@
   },
   "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",
+    "markdown-it-anchor": "^8",
     "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);
+}