color-elements 0.0.2 → 0.0.3

package/src/color-scale/color-scale.js

@@ -0,0 +1,164 @@
+import ColorElement from "../common/color-element.js";
+import "../color-swatch/color-swatch.js";
+
+const Self = class ColorScale extends ColorElement {
+	static tagName = "color-scale";
+	static url = import.meta.url;
+	static dependencies = new Set(["color-swatch"]);
+	static shadowStyle = true;
+	static shadowTemplate = `
+		<div id=swatches></div>
+		<slot></slot>`;
+
+	constructor () {
+		super();
+
+		this._el = {
+			slot: this.shadowRoot.querySelector("slot"),
+			swatches: this.shadowRoot.getElementById("swatches"),
+		};
+	}
+
+	connectedCallback () {
+		super.connectedCallback?.();
+		this._el.swatches.addEventListener("colorchange", this, {capture: true});
+	}
+
+	disconnectedCallback () {
+		this.#swatches = [];
+		this._el.swatches.removeEventListener("colorchange", this, {capture: true});
+	}
+
+	handleEvent (event) {
+		this.dispatchEvent(new event.constructor(event.type, {...event}));
+	}
+
+	propChangedCallback ({name, prop, detail: change}) {
+		if (name === "computedColors") {
+			// Re-render swatches
+			this.render();
+		}
+	}
+
+	#swatches = [];
+
+	render () {
+		let colors = this.computedColors;
+
+		if (!colors) {
+			return;
+		}
+
+		let colorCount = colors.length;
+
+		let i = 0;
+		let newSwatches = [];
+		for (let {name, color} of colors) {
+			let swatch = this.#swatches[i] = this._el.swatches.children[i];
+
+			if (!swatch) {
+				this.#swatches[i] = swatch = document.createElement("color-swatch");
+				swatch.setAttribute("size", "large");
+				swatch.setAttribute("part", "color-swatch");
+				swatch.setAttribute("exportparts", "swatch, info, gamut");
+				newSwatches.push(swatch);
+			}
+
+			swatch.color = color;
+			swatch.label = name;
+			if (this.info) {
+				swatch.info = this.info;
+			}
+			i++;
+		}
+
+		if (newSwatches.length > 0) {
+			this._el.swatches.append(...newSwatches);
+		}
+		else if (colorCount < this._el.swatches.children.length) {
+			// Remove but keep them around in this.#swatches
+			[...this._el.swatches.children].slice(colorCount).forEach(child => child.remove());
+		}
+	}
+
+	static props = {
+		colors: {
+			type: {
+				is: Object,
+				// Support overriding the Color object
+				get values () {
+					return ColorScale.Color;
+				},
+				defaultKey: (v, i) => v,
+			},
+		},
+		space: {
+			default: "oklch",
+			parse (value) {
+				let ColorSpace = ColorScale.Color.Space;
+				if (value instanceof ColorSpace || value === null || value === undefined) {
+					return value;
+				}
+
+				value += "";
+
+				return ColorSpace.get(value);
+			},
+			stringify (value) {
+				return value?.id;
+			},
+		},
+		steps: {
+			type: Number,
+			default: 0,
+		},
+		computedColors: {
+			get () {
+				if (!this.colors) {
+					return null;
+				}
+
+				let colors = Object.entries(this.colors).map(([name, color]) => ({name, color}));
+
+				if (this.steps > 0) {
+					// Insert intermediate steps
+					let tessellated = [];
+
+					for (let i = 1; i < colors.length; i++) {
+						let start = colors[i - 1];
+						let end = colors[i];
+						let steps = ColorScale.Color.steps(start.color, end.color, { space: this.space, steps: this.steps + 2 });
+
+						steps.shift();
+						steps.pop();
+						steps = steps.map(color => ({name: color + "", color}));
+
+						tessellated.push(start, ...steps);
+
+						if (i === colors.length - 1) {
+							// Only add the last color at the end
+							// In all other iterations, it’s the same as the start of the next pair
+							tessellated.push(end);
+						}
+					}
+
+					colors = tessellated;
+				}
+
+				return colors;
+			},
+			additionalDependencies: ["info"],
+		},
+		info: {},
+	};
+
+	static events = {
+		colorschange: {
+			propchange: "computedColors",
+		},
+	};
+};
+
+Self.define();
+
+export default Self;

package/src/color-slider/README.md

@@ -6,7 +6,7 @@ Creates a slider with a gradient background, primarily intended for color pickin
 
 There are many ways to use this component, depending on what you need.
 E.g. if all you need is styling sliders with arbitrary gradients you don’t even need a component,
-you can just [use the CSS file](#css-only) and a few classes and CSS variables to style regular HTML sliders.
+you can just [use the CSS file](#css-only-usage) and a few classes and CSS variables to style regular HTML sliders.
 
 The actual component does a lot more:
 - It provides a `color` property with the actual color value
@@ -142,13 +142,20 @@ Then use a `color-slider` class on your slider element, and use [CSS variables](
 
 ## Reference
 
+### Slots
+
+| Name | Description |
+|------|-------------|
+| _(default)_ | Content placed after the color slider. |
+| `tooltip` | An element used as a tooltip. |
+
 ### Attributes & Properties
 
 | Attribute | Property | Property type | Default value | Description |
 |-----------|----------|---------------|---------------|-------------|
 | `space` | `space` | `ColorSpace` | `string` | `oklch` | The color space to use for interpolation. |
-| `color` | `color` | `Color` | `string` | `oklch(50 50% 180)` | The current color value. |
-| `stops` | `stops` | `String` &#124; `Array<Color>` | - | Comma-separated list of color stops |
+| `color` | `color` | `Color` &#124; `string` | `oklch(50% 50% 180)` | The current color value. |
+| `stops` | `stops` | `String` &#124; `Array<Color>` | - | Comma-separated list of color stops. |
 | `min` | `min` | `number` | 0 | The minimum value for the slider. |
 | `max` | `max` | `number` | 1 | The maximum value for the slider. |
 | `step` | `step` | `number` | Computed automatically based on `this.min` and `this.max`. | The granularity that the slider's current value must adhere to. |
@@ -163,7 +170,11 @@ If you’re only using the CSS file, you should set these yourself.
 |----------|---------------|-------------|
 | `--slider-color-stops` | `<color>#` | Comma-separated list of color stops. |
 | `--color-space` | `<ident>` | The color space to use for interpolation. |
-| `--hue-interpolation` | `[shorter` &#124; `longer` &#124; `increasing` &#124; `decreasing] hue` | The color space to use for interpolation. |
+| `--hue-interpolation` | `[shorter` &#124; `longer` &#124; `increasing` &#124; `decreasing] hue` | The hue interpolation method to use. |
+| `--transparency-grid` | `<image>` | Gradient used as a background for transparent parts of the slider. |
+| `--transparency-cell-size` | `<length>` | The size of the cells of the transparency gradient. |
+| `--transparcency-background` | `<color>` | The background color of the transparency gradient. |
+| `--transparency-darkness` | `<percentage>` | The opacity of the black color used for dark parts of the transparency gradient. |
 | `--slider-gradient` | `<image>` | The gradient to use as the background. |
 | `--slider-height` | `<length>` | Height of the slider track. |
 | `--slider-thumb-width` | `<length>` | Width of the slider thumb. |
@@ -179,6 +190,15 @@ If you’re only using the CSS file, you should set these yourself.
 | `--tooltip-pointer-height` | `<length>` | Height of the tooltip pointer triangle. |
 | `--tooltip-pointer-angle` | `<angle>` | Angle of the tooltip pointer triangle. |
 
+### Getters
+
+These properties are read-only.
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `progress` | `number` | The slider value converted to a 0-1 number with `0` corresponding to the min of the range and `1` to the max. |
+
+
 ### Events
 
 | Name | Description |
@@ -188,6 +208,13 @@ If you’re only using the CSS file, you should set these yourself.
 | `valuechange` | Fired when the value changes for any reason, and once during initialization. |
 | `colorchange` | Fired when the color changes for any reason, and once during initialization. |
 
+### Parts
+
+| Name | Description |
+|------|-------------|
+| `slider` | The internal `<input type="range">` element. |
+| `spinner` | The default `tooltip` slot content (an `<input type="number">` element). Please note that if an element is slotted in the `tooltip` slot, this will not match anyhing. |
+
 ## Planned features
 
 - Discrete scales & steps

package/src/color-slider/color-slider.css

@@ -5,7 +5,15 @@
 
 .color-slider,
 .slider-tooltip {
-	--transparency: repeating-conic-gradient(transparent 0 25%, rgb(0 0 0 / .05) 0 50%) 0 0 / 1.5em 1.5em content-box border-box;
+	--transparency-cell-size: 1.5em;
+	--_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)
+	);
 
 	--_slider-color-stops: var(--slider-color-stops, transparent 0% 100%);
 	--_slider-gradient: var(--slider-gradient, linear-gradient(to right var(--in-space, ), var(--_slider-color-stops)));
@@ -36,7 +44,7 @@
 	width: 100%;
 	-moz-appearance: none;
 	-webkit-appearance: none;
-	background: var(--_slider-gradient), var(--transparency);
+	background: var(--_slider-gradient), var(--_transparency-grid);
 	background-origin: border-box;
 	background-clip: border-box;
 	height: var(--_slider-height);
@@ -66,11 +74,6 @@
 		transition: 200ms, 0s background;
 	}
 
-		&::-webkit-slider-thumb:active {
-			border: var(--_slider-thumb-border-active);
-			scale: var(--_slider-thumb-scale-active);
-		}
-
 		&::-moz-range-thumb:active {
 			border: var(--_slider-thumb-border-active);
 			scale: var(--_slider-thumb-scale-active);
@@ -81,6 +84,13 @@
 	}
 }
 
+/* For some reason, the &::-webkit-slider-thumb:active rule (previously used inside the above rule) doesn't work 🤷‍♂️ */
+/* DO NOT MOVE IT BACK! :) */
+.color-slider::-webkit-slider-thumb:active {
+	border: var(--_slider-thumb-border-active);
+	scale: var(--_slider-thumb-scale-active);
+}
+
 .slider-tooltip {
 	position: absolute;
 	left: clamp(-20%,

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

@@ -1,6 +1,4 @@
-
-import Color from "../common/color.js";
-import NudeElement from "../../node_modules/nude-element/src/Element.js";
+import ColorElement from "../common/color-element.js";
 import { getStep } from "../common/util.js";
 
 let supports = {
@@ -8,23 +6,19 @@ let supports = {
 	fieldSizing: CSS?.supports("field-sizing", "content"),
 };
 
-const Self = class ColorSlider extends NudeElement {
-	static postConstruct = [];
+const Self = class ColorSlider extends ColorElement {
 	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" />
+	static url = import.meta.url;
+	static shadowStyle = true;
+	static shadowTemplate = `
+		<input type="range" class="color-slider" part="slider" min="0" max="1" step="0.01" />
 			<slot name="tooltip" class="slider-tooltip">
 				<input type="number" part="spinner" min="0" max="1" step="0.01" />
 			</slot>
-			<slot></slot>
-			`;
+		<slot></slot>`;
+
+	constructor () {
+		super();
 
 		this._el = {
 			slider: this.shadowRoot.querySelector(".color-slider"),
@@ -32,14 +26,14 @@ const Self = class ColorSlider extends NudeElement {
 		};
 	}
 
-	connectedCallback() {
+	connectedCallback () {
 		super.connectedCallback?.();
 
 		this._el.slider.addEventListener("input", this);
 		this._el.spinner.addEventListener("input", this);
 	}
 
-	disconnectedCallback() {
+	disconnectedCallback () {
 		this._el.slider.removeEventListener("input", this);
 		this._el.spinner.removeEventListener("input", this);
 	}
@@ -63,8 +57,17 @@ const Self = class ColorSlider extends NudeElement {
 		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});
+			let value = change.value;
+			if (this.tooltip === "progress") {
+				if (name === "value" || name === "defaultValue") {
+					value = +(this.progress * 100).toPrecision(4);
+				}
+				else {
+					// Spinner values when tooltip is "progress"
+					value = ({ min: 1, max: 100, step: 1 })[name];
+				}
+			}
+			prop.applyChange(this._el.spinner, {...change, value: +(+value).toPrecision(4)});
 		}
 
 		if (name === "stops") {
@@ -72,7 +75,27 @@ const Self = class ColorSlider extends NudeElement {
 			let stops = this.stops;
 			let supported = stops.every(color => CSS.supports("color", color));
 
-			if (!supported) {
+			// CSS does not support (yet?) a raw hue interpolation,
+			// so we need to fake it with tessellateStops() in cases of polar space and far-apart stops.
+			let farApart = false;
+			let space = this.space;
+			if (space.isPolar) {
+				for (let i = 1; i < stops.length; i++) {
+					// Even though space is polar, color stops might be in non-polar spaces
+					let first = stops[i - 1].to(space);
+					let second = stops[i].to(space);
+
+					let firstHue = first.get("h");
+					let secondHue = second.get("h");
+
+					if (Math.abs(firstHue - secondHue) >= 180) {
+						farApart = true;
+						break;
+					}
+				}
+			}
+
+			if (!supported || farApart) {
 				stops = this.tessellateStops({ steps: 3 });
 			}
 
@@ -99,21 +122,36 @@ const Self = class ColorSlider extends NudeElement {
 				this.style.setProperty("--color", displayedColor);
 			}
 		}
-		else if (name === "value") {
+		else if (name === "value" || name === "min" || name === "max") {
 			this.style.setProperty("--progress", this.progress);
 
-			if (!supports.fieldSizing) {
+			if (name === "value" && !supports.fieldSizing) {
 				let valueStr = this.value + "";
 				this._el.spinner.style.setProperty("--value-length", valueStr.length);
 			}
 		}
+		else if (name === "tooltip") {
+			if (change.value !== undefined) {
+				let values = this;
+				if (change.value === "progress") {
+					values = {
+						min: 1, max: 100, step: 1,
+						value: +(this.progress * 100).toPrecision(4),
+					};
+				}
+
+				["min", "max", "step", "value"].forEach(name => {
+					this._el.spinner[name] = values[name];
+				});
+			}
+		}
 	}
 
 	tessellateStops (options = {}) {
 		let stops = this.stops;
 		let tessellated = [];
 
-		for (let i=1; i<stops.length; i++) {
+		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 });
@@ -183,11 +221,13 @@ const Self = class ColorSlider extends NudeElement {
 			},
 		},
 		stops: {
-			type: Array,
-			typeOptions: {
-				itemType: Color,
+			type: {
+				is: Array,
+				get values () {
+					return Self.Color;
+				},
 			},
-			default: el => []
+			default: el => [],
 		},
 		defaultValue: {
 			type: Number,
@@ -209,13 +249,13 @@ const Self = class ColorSlider extends NudeElement {
 				return this.stops[0]?.space ?? "oklab";
 			},
 			parse (value) {
-				if (value instanceof Color.Space || value === null || value === undefined) {
+				if (value instanceof Self.Color.Space || value === null || value === undefined) {
 					return value;
 				}
 
 				value += "";
 
-				return Color.Space.get(value);
+				return Self.Color.Space.get(value);
 			},
 			stringify (value) {
 				return value?.id;
@@ -223,7 +263,9 @@ const Self = class ColorSlider extends NudeElement {
 		},
 
 		color: {
-			type: Color,
+			get type () {
+				return Self.Color;
+			},
 			get () {
 				return this.colorAt(this.value);
 			},
@@ -234,10 +276,10 @@ const Self = class ColorSlider extends NudeElement {
 				let stops = this.stops;
 				let scales = [];
 
-				for (let i=1; i<stops.length; i++) {
+				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" });
+					let range = start.range(end, { space: this.space });
 					scales.push(range);
 				}
 
@@ -255,7 +297,7 @@ const Self = class ColorSlider extends NudeElement {
 		change: {
 			from () {
 				return this._el.slider;
-			}
+			},
 		},
 		valuechange: {
 			propchange: "value",
@@ -266,13 +308,13 @@ const Self = class ColorSlider extends NudeElement {
 	};
 
 	static formAssociated = {
-		getSource: el => el._el.slider,
+		like: el => el._el.slider,
 		role: "slider",
 		valueProp: "value",
 		changeEvent: "valuechange",
 	};
-}
+};
 
-customElements.define(Self.tagName, Self);
+Self.define();
 
-export default Self;
+export default Self;