color-elements 0.0.1 → 0.0.3

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

@@ -0,0 +1,230 @@
+:host {
+	--_transparency-cell-size: var(--transparency-cell-size, .5em);
+	--_transparency-background: var(--transparency-background, transparent);
+	--_transparency-darkness: var(--transparency-darkness, 5%);
+	--_transparency-grid: var(--transparency-grid,
+		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)
+	);
+
+	position: relative;
+	display: inline-flex;
+	gap: .3em;
+	width: fit-content;
+	margin: .3em;
+	border-radius: .2rem;
+}
+
+:host([size="large"]) {
+	flex-flow: column;
+	inline-size: 11em;
+	min-block-size: 6em;
+	contain: inline-size;
+	container-name: color-swatch;
+	container-type: inline-size;
+}
+
+slot {
+	all: inherit;
+	display: contents;
+}
+
+#gamut {
+	font-size: 80%;
+
+	&:is(:host([size="large"]) *) {
+		position: absolute;
+		top: 0;
+		right: 0;
+		margin: .5rem;
+	}
+
+	&:not(:host([size="large"]) *) {
+		@container style(--details-style: compact) {
+			position: absolute;
+			font-size: 50%;
+			top: 0;
+			right: 0;
+			margin: .2rem;
+		}
+
+		&:is(.static *) {
+			align-self: baseline;
+		}
+	}
+
+
+
+	&[style*="--gamut-level: 0"] {
+		display: none;
+	}
+}
+
+[part="info"] {
+	margin: 0;
+	display: inline-flex;
+	display: none;
+	gap: .5em;
+
+	&:is(:host([size="large"]) &) {
+		display: grid;
+		grid-template-columns: max-content auto;
+		gap: .1em .2em;
+		font-size: max(9px, 80%);
+		justify-content: start;
+
+		.coord {
+			display: contents;
+		}
+	}
+
+	.coord {
+		display: flex;
+		gap: .2em;
+
+		dd {
+			margin: 0;
+			font-weight: bold;
+			font-variant-numeric: tabular-nums;
+		}
+	}
+}
+
+[part="details"] {
+	display: flex;
+	flex-flow: inherit;
+	gap: inherit;
+
+	&.static {
+		&:is(:host([size="large"]) *) {
+			background: white;
+		}
+	}
+
+	&:not(:host([size="large"]) *) {
+		align-items: baseline;
+	}
+
+	@container color-swatch (width <= 5rem) {
+		font-size: 80%;
+	}
+
+	@container style(--details-style: compact) {
+		--_border-color: var(--border-color, color-mix(in oklab, buttonborder 20%, oklab(none none none / 0%)));
+		--_pointer-height: var(--pointer-height, .5em);
+		--_transition-duration: var(--transition-duration, 400ms);
+		--_details-popup-width: var(--details-popup-width, max-content);
+
+		position: absolute;
+		left: 50%;
+		z-index: 2;
+		translate: -50% 0;
+		bottom: 100%;
+		margin-bottom: calc(var(--_pointer-height) * .8);
+		width: var(--_details-popup-width);
+		background: canvas;
+		border: 1px solid var(--_border-color);
+		padding: .6em 1em;
+		border-radius: .2rem;
+		box-shadow: 0 .05em 1em -.7em black;
+		transition: var(--_transition-duration) allow-discrete;
+		transition-property: all, display;
+		transition-delay: 0s, var(--_transition-duration);
+		transform-origin: 50% calc(100% + var(--_pointer-height));
+
+		&[popover] {
+			/* Make the triangle pointer visible */
+			overflow: visible;
+
+			/* Bring the popover back on the screen */
+			position: fixed;
+			inset: unset;
+
+			/* And position it relative to the parent swatch */
+			left: var(--_popover-left);
+			top: var(--_popover-top);
+			translate: -50% -100%;
+		}
+
+		/* Triangle pointer */
+		&::before {
+			content: "";
+			position: absolute;
+			top: 100%;
+			left: 50%;
+			translate: -50% -50%;
+			aspect-ratio: 1;
+			height: calc(var(--_pointer-height) * sqrt(2));
+			background: inherit;
+			border: inherit;
+			rotate: -45deg;
+			clip-path: polygon(0 0, 0 100%, 100% 100%);
+		}
+
+		&:not(:is(:host(:hover), :host(:focus-within), :host(:active), :host(:target), :host([open])) *),
+		&:is(:host([open=false]) *) {
+			display: none;
+			opacity: 0;
+			scale: 0;
+		}
+	}
+}
+
+[part="color"] {
+	display: flex;
+	gap: .2em;
+}
+
+slot:not([name]) {
+	&::slotted(input) {
+		display: flex;
+		box-sizing: border-box;
+		min-width: 10ch;
+		font: inherit;
+	}
+
+	&:is(:host([size="large"]) *)::slotted(input) {
+		width: 100%;
+	}
+}
+
+[part="color-wrapper"],
+slot[name=swatch]::slotted(*),
+#swatch {
+	border-radius: 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-grid);
+
+	&:is(:host([size="large"]) *) {
+		min-block-size: 3em;
+	}
+
+	&:not(:host([size="large"]) *) {
+		display: flex;
+		min-inline-size: 2em;
+		min-block-size: 1em;
+		font-size: 65%;
+		flex: 1;
+	}
+}
+
+slot[name=swatch-content] {
+	/* See https://lea.verou.me/blog/2024/contrast-color/ */
+	--l: clamp(0, (var(--l-threshold, 0.7) / l - 1) * infinity, 1);
+	color: oklch(from var(--color) var(--l) 0 h);
+}

package/src/color-swatch/color-swatch.js

@@ -0,0 +1,252 @@
+import ColorElement from "../common/color-element.js";
+import "../gamut-badge/gamut-badge.js";
+
+let importIncrementable;
+
+const Self = class ColorSwatch extends ColorElement {
+	static tagName = "color-swatch";
+	static url = import.meta.url;
+	static dependencies = new Set(["gamut-badge"]);
+	static shadowStyle = true;
+	static shadowTemplate = `
+		<slot name="swatch">
+			<div id="swatch" part="swatch">
+				<slot name="swatch-content"></slot>
+			</div>
+		</slot>
+		<div id="wrapper" part="details">
+			<slot name="before"></slot>
+			<div part="label"></div>
+			<div part="color">
+				<slot></slot>
+			</div>
+			<slot name="after"></slot>
+		</div>`;
+
+	constructor () {
+		super();
+
+		this._el = {
+			wrapper: this.shadowRoot.querySelector("#wrapper"),
+			label: this.shadowRoot.querySelector("[part=label]"),
+			colorWrapper: this.shadowRoot.querySelector("[part=color]"),
+		};
+
+		this._slots = {
+			default: this.shadowRoot.querySelector("slot:not([name])"),
+		};
+
+		this.#updateStatic();
+		this._slots.default.addEventListener("slotchange", evt => this.#updateStatic());
+	}
+
+	#updateStatic () {
+		let previousInput = this._el.input;
+		let input = this._el.input = this.querySelector("input");
+
+		this.static = !input;
+
+		// This should eventually be a custom state
+		this._el.wrapper.classList.toggle("static", this.static);
+
+		if (input && input !== previousInput) {
+			importIncrementable ??= import("https://incrementable.verou.me/incrementable.mjs").then(m => m.default);
+			importIncrementable?.then(Incrementable => new Incrementable(input));
+
+			input.addEventListener("input", evt => {
+				this.value = evt.target.value;
+			});
+		}
+	}
+
+	get gamut () {
+		return this._el.gamutIndicator.gamut;
+	}
+
+	get swatchTextContent () {
+		// Children that are not assigned to another slot
+		return [...this.childNodes].filter(n => !n.slot).map(n => n.textContent).join("").trim();
+	}
+
+	propChangedCallback ({name, prop, detail: change}) {
+		let input = this._el.input;
+
+		if (name === "gamuts") {
+			if (this.gamuts === "none") {
+				this._el.gamutIndicator?.remove();
+				this._el.gamutIndicator = null;
+			}
+			else if (this.gamuts) {
+				if (!this._el.gamutIndicator) {
+					this._el.gamutIndicator = Object.assign(document.createElement("gamut-badge"), {
+						id: "gamut",
+						part: "gamut",
+						exportparts: "label: gamutLabel",
+						gamuts: this.gamuts,
+						color: this.color,
+					});
+
+					this.shadowRoot.append(this._el.gamutIndicator);
+
+					this._el.gamutIndicator.addEventListener("gamutchange", evt => {
+						let gamut = this._el.gamutIndicator.gamut;
+						this.setAttribute("gamut", gamut);
+						this.dispatchEvent(new CustomEvent("gamutchange", {
+							detail: gamut,
+						}));
+					});
+				}
+				else {
+					this._el.gamutIndicator.gamuts = this.gamuts;
+				}
+			}
+		}
+
+		if (name === "value") {
+			if (input && (!input.value || input.value !== this.value)) {
+				input.value = this.value;
+			}
+		}
+
+		if (name === "label") {
+			if (this.label.length && this.label !== this.swatchTextContent) {
+				this._el.label.textContent = this.label;
+			}
+			else {
+				this._el.label.textContent = "";
+			}
+		}
+
+		if (name === "color") {
+			let isValid = this.color !== null || !this.value;
+
+			input?.setCustomValidity(isValid ? "" : "Invalid color");
+
+			if (this._el.gamutIndicator) {
+				this._el.gamutIndicator.color = this.color;
+			}
+
+			let colorString = this.color?.display();
+			this.style.setProperty("--color", colorString);
+		}
+
+		if (name === "colorInfo") {
+			if (!this.colorInfo) {
+				return;
+			}
+
+			this._el.info ??= Object.assign(document.createElement("dl"), {part: "info"});
+			if (!this._el.info.parentNode) {
+				this._el.colorWrapper.after(this._el.info);
+			}
+
+			let info = [];
+			for (let coord of this.info) {
+				let [label, channel] = Object.entries(coord)[0];
+
+				let value = this.colorInfo[channel];
+				if (value === undefined) {
+					continue;
+				}
+
+				value = typeof value === "number" ? Number(value.toPrecision(4)) : value;
+
+				info.push(`<div class="coord"><dt>${ label }</dt><dd>${ value }</dd></div>`);
+			}
+
+			this._el.info.innerHTML = info.join("\n");
+		}
+	}
+
+	static props = {
+		size: {},
+		open: {},
+		gamuts: {
+			default: "srgb, p3, rec2020: P3+, prophoto: PP",
+		},
+		value: {
+			type: String,
+			default () {
+				if (this._el.input) {
+					return this._el.input.value;
+				}
+
+				return this.swatchTextContent;
+			},
+			reflect: {
+				from: true,
+			},
+		},
+		label: {
+			type: String,
+			default () {
+				return this.swatchTextContent;
+			},
+			convert (value) {
+				return value.trim();
+			},
+		},
+		color: {
+			get type () {
+				return ColorSwatch.Color;
+			},
+			get () {
+				if (!this.value) {
+					return null;
+				}
+
+				return ColorSwatch.Color.get(this.value);
+			},
+			set (value) {
+				this.value = ColorSwatch.Color.get(value)?.display();
+			},
+			reflect: false,
+		},
+		info: {
+			type: {
+				is: Array,
+				values: {
+					is: Object,
+					defaultKey: (coord, i) => ColorSwatch.Color.Space.resolveCoord(coord)?.name,
+				},
+			},
+			default: [],
+			reflect: {
+				from: true,
+			},
+		},
+		colorInfo: {
+			get () {
+				if (!this.info.length || !this.color) {
+					return;
+				}
+
+				let ret = {};
+				for (let coord of this.info) {
+					let [label, channel] = Object.entries(coord)[0];
+					try {
+						ret[channel] = this.color.get(channel);
+					}
+					catch (e) {
+						console.error(e);
+					}
+				}
+
+				return ret;
+			},
+		},
+	};
+
+	static events = {
+		colorchange: {
+			propchange: "color",
+		},
+		valuechange: {
+			propchange: "value",
+		},
+	};
+};
+
+Self.define();
+
+export default Self;

package/src/common/color-element.js

@@ -0,0 +1,86 @@
+import NudeElement from "../../node_modules/nude-element/src/Element.js";
+import { getType, wait } from "./util.js";
+
+const Self = class ColorElement extends NudeElement {
+	// TODO make lazy
+	static Color;
+	static all = {};
+	static dependencies = new Set();
+
+	constructor () {
+		super();
+
+		if (this.constructor.shadowTemplate !== undefined) {
+			this.attachShadow({mode: "open"});
+			this.shadowRoot.innerHTML = this.constructor.shadowTemplate;
+		}
+	}
+
+	static async define () {
+		Self.all[this.tagName] = this;
+		let colorTags = Object.keys(Self.all);
+
+		if (this.shadowTemplate) {
+			// TODO find dependencies
+			let colorTagRegex = RegExp(`(?<=</)(${ colorTags.join("|") })(?=>)`, "g");
+			(this.shadowTemplate.match(colorTagRegex) ?? []).forEach(tag => {
+				this.dependencies ??= new Set();
+				this.dependencies.add(tag);
+			});
+
+			if (this.shadowStyle) {
+				let url = this.shadowStyle;
+				url = url === true ? `./${this.tagName}.css` : url;
+				url = new URL(url, this.url);
+				this.shadowTemplate = `<style>@import url("${ url }")</style>` + "\n" + this.shadowTemplate;
+			}
+		}
+
+		// Hide elements before they are defined
+		let style = document.getElementById("color-element-styles")
+		          ?? Object.assign(document.createElement("style"), {id: "color-element-styles"});
+		style.textContent = `:is(${ colorTags.join(", ") }):not(:defined) {display: none}`;
+		if (!style.parentNode) {
+			document.head.append(style);
+		}
+
+		if (this.dependencies.size > 0) {
+			await Promise.all([...this.dependencies].map(tag => customElements.whenDefined(tag)));
+		}
+		else {
+			// Give other code a chance to overwrite Self.Color
+			await wait();
+		}
+
+		if (!Self.Color) {
+			let specifier;
+
+			try {
+				// Is already loaded? (e.g. via an import map, or if we're in Node)
+				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";
+			}
+
+			Self.Color = import(specifier).then(module => module.default);
+		}
+
+		// We can't just use top level await, see https://bugs.webkit.org/show_bug.cgi?id=242740
+		if (getType(Self.Color) === "Promise") {
+			let ColorPending = Self.Color;
+			let Color = await ColorPending;
+
+			if (Self.Color === ColorPending) {
+				// Hasn't changed
+				Self.Color = Color;
+			}
+		}
+
+		customElements.define(this.tagName, this);
+	}
+};
+
+export default Self;

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);
+	}
+}

package/src/common/util.js

@@ -0,0 +1,55 @@
+export async function wait (ms) {
+	if (ms === undefined) {
+		return new Promise(resolve => requestAnimationFrame(resolve));
+	}
+
+	return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+/**
+ * Compute the ideal step for a range, to be used as a default in spinners and sliders
+ * @param {number} min
+ * @param {number} max
+ * @param {options} options
+ */
+export function getStep (min, max, {minSteps = 100, maxStep = 1} = {}) {
+	let range = Math.abs(max - min);
+	let step = range / minSteps;
+
+	// Find nearest power of 10 that is < step
+	step = 10 ** Math.floor(Math.log10(step));
+
+	return step > maxStep ? maxStep : step;
+}
+
+export function sortObject (obj, fn) {
+	if (!obj) {
+		return obj;
+	}
+
+	return Object.fromEntries(Object.entries(obj).sort(fn));
+}
+
+export function mapObject (obj, fn) {
+	if (!obj) {
+		return obj;
+	}
+
+	return Object.fromEntries(Object.entries(obj).map(fn));
+}
+
+export function pick (obj, properties) {
+	if (!properties || !obj) {
+		return obj;
+	}
+
+	return Object.fromEntries(Object.entries(obj).filter(([key]) => properties.includes(key)));
+}
+
+export function getType (value) {
+	if (value === null || value === undefined) {
+		return value + "";
+	}
+
+	return Object.prototype.toString.call(value).slice(8, -1);
+}