color-elements 0.0.1 → 0.0.2

package/src/color-slider/color-slider.js

@@ -0,0 +1,278 @@
+
+import Color from "../common/color.js";
+import NudeElement from "../../node_modules/nude-element/src/Element.js";
+import { getStep } from "../common/util.js";
+
+let supports = {
+	inSpace: CSS?.supports("background", "linear-gradient(in oklab, red, tan)"),
+	fieldSizing: CSS?.supports("field-sizing", "content"),
+};
+
+const Self = class ColorSlider extends NudeElement {
+	static postConstruct = [];
+	static tagName = "color-slider";
+
+	constructor () {
+		super();
+		this.attachShadow({mode: "open"});
+
+		let styleURL = new URL(`./${this.constructor.tagName}.css`, import.meta.url);
+		this.shadowRoot.innerHTML = `
+			<style>@import url("${ styleURL }")</style>
+			<input type="range" class="color-slider" part="slider" min="0" max="1" step="0.01" part="slider" />
+			<slot name="tooltip" class="slider-tooltip">
+				<input type="number" part="spinner" min="0" max="1" step="0.01" />
+			</slot>
+			<slot></slot>
+			`;
+
+		this._el = {
+			slider: this.shadowRoot.querySelector(".color-slider"),
+			spinner: this.shadowRoot.querySelector("input[type=number]"),
+		};
+	}
+
+	connectedCallback() {
+		super.connectedCallback?.();
+
+		this._el.slider.addEventListener("input", this);
+		this._el.spinner.addEventListener("input", this);
+	}
+
+	disconnectedCallback() {
+		this._el.slider.removeEventListener("input", this);
+		this._el.spinner.removeEventListener("input", this);
+	}
+
+	handleEvent (event) {
+		if (event.type === "input") {
+			if (this.tooltip === "progress" && event.target === this._el.spinner) {
+				// Convert to value
+				let value = this._el.spinner.value;
+				this.value = this.valueAt(value / 100);
+			}
+			else {
+				this.value = event.target.value;
+			}
+
+			this.dispatchEvent(new event.constructor(event.type, {...event}));
+		}
+	}
+
+	propChangedCallback ({name, prop, detail: change}) {
+		if (["min", "max", "step", "value", "defaultValue"].includes(name)) {
+			prop.applyChange(this._el.slider, change);
+
+			let spinnerValue = this.tooltip === "progress" ? +(this.progress * 100).toPrecision(4) : this.value;
+			prop.applyChange(this._el.spinner, {...change, value: spinnerValue});
+		}
+
+		if (name === "stops") {
+			// FIXME will fail if there are none values
+			let stops = this.stops;
+			let supported = stops.every(color => CSS.supports("color", color));
+
+			if (!supported) {
+				stops = this.tessellateStops({ steps: 3 });
+			}
+
+			stops = stops.map(color => color.display()).join(", ");
+
+			this.style.setProperty("--slider-color-stops", stops);
+		}
+		else if (name === "space" && supports.inSpace) {
+			let space = this.space;
+			let spaceId = space.id;
+			let supported = CSS.supports("background", `linear-gradient(in ${ spaceId }, red, tan)`);
+
+			if (!supported) {
+				spaceId = this.space.isPolar ? "oklch" : "oklab";
+			}
+
+			this.style.setProperty("--color-space", spaceId);
+		}
+		else if (name === "color" || name === "defaultColor") {
+			let color = this.color;
+
+			if (color) {
+				let displayedColor = color.display();
+				this.style.setProperty("--color", displayedColor);
+			}
+		}
+		else if (name === "value") {
+			this.style.setProperty("--progress", this.progress);
+
+			if (!supports.fieldSizing) {
+				let valueStr = this.value + "";
+				this._el.spinner.style.setProperty("--value-length", valueStr.length);
+			}
+		}
+	}
+
+	tessellateStops (options = {}) {
+		let stops = this.stops;
+		let tessellated = [];
+
+		for (let i=1; i<stops.length; i++) {
+			let start = stops[i - 1];
+			let end = stops[i];
+			let steps = start.steps(end, { space: this.space, ...options });
+			tessellated.push(...steps);
+
+			if (i < stops.length - 1) {
+				tessellated.pop();
+			}
+		}
+
+		return tessellated;
+	}
+
+	get progress () {
+		return this.progressAt(this.value);
+	}
+
+	progressAt (value) {
+		return (value - this.min) / (this.max - this.min);
+	}
+
+	valueAt (progress) {
+		return this.min + progress * (this.max - this.min);
+	}
+
+	colorAt (value) {
+		let progress = this.progressAt(value);
+		return this.colorAtProgress(progress);
+	}
+
+	colorAtProgress (progress) {
+		let bands = this.scales?.length;
+
+		if (bands <= 0) {
+			return null;
+		}
+
+		// FIXME the values outside of [0, 1] should be scaled
+		if (progress >= 1) {
+			return this.scales.at(-1)(progress);
+		}
+		else if (progress <= 0) {
+			return this.scales[0](progress);
+		}
+
+		let band = 1 / bands;
+		let scaleIndex = Math.max(0, Math.min(Math.floor(progress / band), bands - 1));
+		let scale = this.scales[scaleIndex];
+		let color = scale((progress % band) * bands);
+
+		return color;
+	}
+
+	static props = {
+		min: {
+			type: Number,
+			default: 0,
+		},
+		max: {
+			type: Number,
+			default: 1,
+		},
+		step: {
+			type: Number,
+			default () {
+				return getStep(this.max, this.min, { minSteps: 100 });
+			},
+		},
+		stops: {
+			type: Array,
+			typeOptions: {
+				itemType: Color,
+			},
+			default: el => []
+		},
+		defaultValue: {
+			type: Number,
+			default () {
+				return (this.min + this.max) / 2;
+			},
+			reflect: {
+				from: "value",
+			},
+		},
+		value: {
+			type: Number,
+			defaultProp: "defaultValue",
+			reflect: false,
+		},
+
+		space: {
+			default () {
+				return this.stops[0]?.space ?? "oklab";
+			},
+			parse (value) {
+				if (value instanceof Color.Space || value === null || value === undefined) {
+					return value;
+				}
+
+				value += "";
+
+				return Color.Space.get(value);
+			},
+			stringify (value) {
+				return value?.id;
+			},
+		},
+
+		color: {
+			type: Color,
+			get () {
+				return this.colorAt(this.value);
+			},
+			dependencies: ["scales", "value"],
+		},
+		scales: {
+			get () {
+				let stops = this.stops;
+				let scales = [];
+
+				for (let i=1; i<stops.length; i++) {
+					let start = stops[i - 1];
+					let end = stops[i];
+					let range = start.range(end, { space: this.space, hue: "raw" });
+					scales.push(range);
+				}
+
+				return scales;
+			},
+			dependencies: ["stops", "space"],
+		},
+
+		tooltip: {
+			type: String,
+		},
+	};
+
+	static events = {
+		change: {
+			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(Self.tagName, Self);
+
+export default Self;

package/src/color-swatch/README.md

@@ -0,0 +1,100 @@
+# `<color-swatch>`
+
+## Examples
+
+### Static
+
+```html
+<color-swatch>oklch(70% 0.25 138)</color-swatch>
+```
+
+```html
+<color-swatch size="large">oklch(70% 0.25 138)</color-swatch>
+```
+
+### Editable
+
+```html
+<color-swatch>
+	<input value="oklch(70% 0.25 138)" />
+</color-swatch>
+```
+
+```html
+<color-swatch size="large">
+	<input value="oklch(70% 0.25 138)" />
+</color-swatch>
+```
+
+### With slot content
+
+```html
+<color-swatch>
+	<label slot="before" for=c1>Accent color:</label>
+	<input value="oklch(70% 0.25 138)" id=c1 />
+</color-swatch>
+```
+
+```html
+<color-swatch size="large">
+	<label slot="before" id=c2>Accent color:</label>
+	<input value="oklch(70% 0.25 138)" id=c2 />
+	<small slot="after">Tip: Pick a bright medium color.</small>
+</color-swatch>
+```
+
+Adding text within the default swatch:
+
+```html
+<color-swatch size="large">
+	<div slot="swatch-content">Some text</div>
+	<input value="oklch(70% 0.25 138)" id=c1 />
+</color-swatch>
+```
+
+Replacing the whole swatch with a custom element:
+
+```html
+<color-swatch size="large">
+	<div slot="swatch">Some text</div>
+	<input value="oklch(70% 0.25 138)" id=c1 />
+</color-swatch>
+```
+
+### Bound to CSS property
+
+You can automatically bind the color swatch to a CSS property by setting the `property` attribute.
+Then you don’t need to provide an initial value, it will be read from the CSS property.
+
+```html
+<color-swatch size="large" property="--color-red">
+	<input />
+</color-swatch>
+```
+
+### Events
+
+```html
+<color-swatch size="large" oncolorchange="this.nextElementSibling.textContent = this.color">
+	<input value="oklch(70% 0.25 138)" />
+</color-swatch>
+<color-inline></color-inline>
+```
+
+### Update via JS
+
+#### Static
+
+```html
+<color-swatch id="dynamic_static">oklch(70% 0.25 138)</color-swatch>
+<button onclick='dynamic_static.color = "oklch(60% 0.15 0)"'>Change color</button>
+```
+
+### Editable
+
+```html
+<color-swatch id="dynamic_editable">
+	<input value="oklch(70% 0.25 138)" />
+</color-swatch>
+<button onclick='dynamic_editable.color = "oklch(60% 0.15 0)"'>Change color</button>
+```

package/src/color-swatch/color-swatch.css

@@ -0,0 +1,95 @@
+:host {
+	--_transparency-cell-size: var(--transparency-cell-size, .5em);
+	--_transparency-background: var(--transparcency-background, transparent);
+	--_transparency-darkness: var(--transparency-darkness, 5%);
+	--_transparency: var(--transparcency,
+		repeating-conic-gradient(transparent 0 25%, rgb(0 0 0 / var(--_transparency-darkness)) 0 50%)
+		0 0 / calc(2 * var(--_transparency-cell-size)) calc(2 * var(--_transparency-cell-size))
+		content-box border-box var(--_transparency-background)
+	);
+	display: inline-flex;
+	gap: .3em;
+	width: min-content;
+	margin: .3em;
+}
+
+:host([size="large"]) {
+	flex-flow: column;
+}
+
+#gamut {
+	font-size: 80%;
+}
+
+#wrapper {
+	display: flex;
+	flex-flow: inherit;
+	gap: inherit;
+
+	&.static {
+		gap: .4em;
+	}
+
+	&:not(:host([size="large"]) *) {
+		align-items: baseline;
+	}
+}
+
+[part="color-wrapper"] {
+	position: relative;
+	display: flex;
+	gap: .2em;
+
+	&:not(.static *) {
+		#gamut {
+			position: absolute;
+			inset: .3em;
+			inset-inline-start: auto;
+		}
+	}
+
+	::slotted(input) {
+		padding-inline-end: 2em;
+	}
+}
+
+slot:not([name]) {
+	white-space: nowrap;
+}
+
+::slotted(input) {
+	font: inherit;
+}
+
+slot[name=swatch]::slotted(*),
+#swatch {
+	flex: 1;
+	display: flex;
+	flex-flow: column;
+	align-items: center;
+	justify-content: center;
+	padding: .5em;
+	display: flex;
+	flex-flow: column;
+	flex: 1;
+	background:
+		linear-gradient(var(--color) 0 100%),
+		var(--_transparency);
+	border-radius: .2rem;
+
+	&:is(:host([size="large"]) *) {
+		max-inline-size: 15em;
+		min-block-size: 6em;
+	}
+
+	&:not(:host([size="large"]) *) {
+		display: flex;
+		min-inline-size: 2em;
+		font-size: 65%;
+		flex: 1;
+	}
+}
+
+:host([swatch="none"]) #swatch {
+	display: none;
+}

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

@@ -1,22 +1,24 @@
 import Color from "../common/color.js";
+import defineEvents from "../../node_modules/nude-element/src/events/defineEvents.js";
 import "../color-gamut/color-gamut.js";
-// const styles = await fetch("./style.css").then(r => r.text());
 
-const gamuts = ["srgb", "p3", "rec2020"];
+let importIncrementable;
 
-let styleURL = new URL("./style.css", import.meta.url);
-let importIncrementable = import("https://incrementable.verou.me/incrementable.mjs").then(m => m.default);
+const Self = class ColorSwatch extends HTMLElement {
+	static initQueue = [];
 
-export default class CSSColor extends HTMLElement {
 	#dom = {};
 
 	constructor () {
 		super();
 		this.attachShadow({mode: "open"});
+		let styleURL = new URL("./color-swatch.css", import.meta.url);
 		this.shadowRoot.innerHTML = `
 			<style>@import url("${ styleURL }")</style>
 			<slot name="swatch">
-				<div id="swatch" part="swatch"></div>
+				<div id="swatch" part="swatch">
+					<slot name="swatch-content"></slot>
+				</div>
 			</slot>
 			<div id="wrapper">
 				<slot name="before"></slot>
@@ -35,6 +37,8 @@ export default class CSSColor extends HTMLElement {
 			this.#initialize();
 		}
 
+		this.constructor.initQueue.forEach(init => init.call(this));
+
 		// This should eventually be a custom state
 		this.#dom.wrapper.classList.toggle("static", !this.#dom.input);
 
@@ -63,8 +67,14 @@ export default class CSSColor extends HTMLElement {
 		this.#dom.wrapper = this.shadowRoot.querySelector("#wrapper");
 		this.#dom.colorWrapper = this.shadowRoot.querySelector("[part=color-wrapper]");
 		this.#dom.input = this.querySelector("input");
+		this.#dom.slot = this.shadowRoot.querySelector("slot:not([name])");
+
+		this.#dom.slot.addEventListener("slotchange", evt => {
+			this.#render();
+		});
 
 		if (this.#dom.input) {
+			importIncrementable ??= import("https://incrementable.verou.me/incrementable.mjs").then(m => m.default);
 			this.#dom.input.addEventListener("input", evt => {
 				this.#render(evt);
 			});
@@ -228,7 +238,6 @@ export default class CSSColor extends HTMLElement {
 		else {
 			try {
 				colorString = this.#color.display({inGamut: false});
-
 			}
 			catch (e) {
 				colorString = this.value;
@@ -250,7 +259,20 @@ export default class CSSColor extends HTMLElement {
 		}
 	}
 
+	static events = {
+		colorchange: {
+			propchange: "color",
+		},
+		valuechange: {
+			propchange: "value",
+		},
+	};
+
 	static observedAttributes = ["for", "property"];
 }
 
-customElements.define("css-color", CSSColor);
+defineEvents(Self);
+
+customElements.define("color-swatch", Self);
+
+export default Self;

package/src/common/color.js

@@ -0,0 +1,12 @@
+let specifier;
+
+try {
+	import.meta.resolve("colorjs.io");
+	specifier = "colorjs.io";
+}
+catch (e) {
+	// specifier = "../../node_modules/colorjs.io/dist/color.js";
+	specifier = "https://colorjs.io/dist/color.js";
+}
+
+export default await import(specifier).then(module => module.default);

package/src/common/dom.js

@@ -0,0 +1,61 @@
+export function named (host, attributes = ["id", "part"]) {
+	let ret = {};
+	let selector = attributes.map(attr => `[${ attr }]`).join(", ");
+
+	for (let el of host.shadowRoot.querySelectorAll(selector)) {
+		// Get the value of the first attribute in attributes that has a value
+		let attribute = attributes.find(attr => el.hasAttribute(attr));
+		ret[el[attribute]] = el;
+	}
+
+	return ret;
+}
+
+export function slots (host) {
+	let ret = {};
+
+	for (let slot of host.shadowRoot.querySelectorAll("slot")) {
+		ret[slot.name] = slot;
+
+		if (!slot.name || slot.dataset.default !== undefined) {
+			ret.default = slot;
+		}
+	}
+
+	return ret;
+}
+
+export function toSlots ({
+	slots = this._slots,
+	slotElements = slots ? Object.values(slots) : Array.from(this.shadowRoot.querySelectorAll("slot")),
+}) {
+	let children = this.childNodes;
+	let assignments = new WeakMap();
+
+	if (!slots && slotElements) {
+		slots = Object.fromEntries(slotElements.map(slot => [slot.name, slot]));
+	}
+
+	// Assign to slots
+	for (let child of children) {
+		let assignedSlot;
+
+		if (child.slot) {
+			// Explicit slot
+			assignedSlot = slots[child.slot];
+		}
+		else if (child.matches) {
+			assignedSlot = slotElements.find(slot => child.matches(slot.dataset.assign));
+		}
+
+		assignedSlot ??= slots.default;
+		let all = assignments.get(assignedSlot) ?? new Set();
+		all.add(child);
+		assignments.set(assignedSlot, all);
+	}
+
+	for (let slot of slotElements) {
+		let all = assignments.get(slot) ?? new Set();
+		slot.assign(...all);
+	}
+}