color-elements 0.0.3 → 0.0.5

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

@@ -6,7 +6,7 @@ import { getStep } from "../common/util.js";
 const Self = class ChannelSlider extends ColorElement {
 	static tagName = "channel-slider";
 	static url = import.meta.url;
-	static shadowStyle = true;
+	static styles = "./channel-slider.css";
 	static shadowTemplate = `
 		<label class="color-slider-label" part="label">
 			<slot>
@@ -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",

package/src/color-chart/README.md

@@ -5,6 +5,7 @@ Display lists of colors as a scatterplot or line chart.
 ## Features
 
 - Plot any coordinate, in any color space
+- Customize both X and Y axes independently
 
 ## Examples
 
@@ -18,6 +19,10 @@ Plotting a single color scale:
 </color-chart>
 ```
 
+_(Colors courtesy of Tailwind)_
+
+### Default X coordinate
+
 By default, the other coordinate would be the index of the color in the list, but you can specify it explicitly:
 
 ```html
@@ -26,7 +31,7 @@ By default, the other coordinate would be the index of the color in the list, bu
 </color-chart>
 ```
 
-You can also specify a whole label, and if it contains a number, the number will become the X coordinate:
+You can also specify a whole label, and if it contains a number, the number will become the default X coordinate:
 
 ```html
 <color-chart y="oklch.c">
@@ -36,11 +41,33 @@ You can also specify a whole label, and if it contains a number, the number will
 </color-chart>
 ```
 
-_(Colors courtesy of Tailwind)_
+### Explicit X coordinate
+
+You can also specify the X coordinate explicitly.
+
+```html
+<color-chart y="oklch.c" x="oklch.l">
+	<color-scale colors="#e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5, #2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1"></color-scale>
+</color-chart>
+```
+
+### Custom X and Y axis ranges
+
+You can customize the ranges of both X and Y axes independently:
+
+```html
+<color-chart y="oklch.c" ymin="0" ymax="0.2" x="oklch.l" xmin="0.3" xmax=".9">
+	<color-scale colors="#e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5, #2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1"></color-scale>
+</color-chart>
+```
+
+This can be useful when plotting data that changes dynamically, so that the axes are always the same size.
 
 ### Plotting hues { #hues}
 
-Hues will be shifted as needed to produce a better result:
+Since hues are angles, there are often multiple ways they can be plotted.
+E.g. A hue of `10` could also be plotted as `-350` or `370`.
+`<color-chart>` will automatically shift the hue based on the other hues in the same scale to produce a nicer result.
 
 ```html
 <color-chart y="hsl.h">
@@ -73,7 +100,7 @@ Reactively changing the Y coordinate:
 
 ```html
 <button onclick="this.nextElementSibling.y = 'hwb.w'">
-	Switch to “HWB Whiteness”
+	Switch to "HWB Whiteness"
 </button>
 <color-chart y="oklch.l">
 	<color-scale colors="Red 50: #fef2f2, Red 100: #fee2e2, Red 200: #fecaca, Red 300: #fca5a5, Red 400: #f87171, Red 500: #ef4444, Red 600: #dc2626, Red 700: #b91c1c, Red 800: #991b1b, Red 900: #7f1d1d, Red 950: #450a0a"></color-scale>
@@ -104,8 +131,12 @@ Reactively setting/changing the colors:
 | Attribute | Property | Property type | Default value | Description |
 |-----------|----------|---------------|---------------|-------------|
 | `x` | `x` | `string` | `null` | The coord to plot on the X axis, if any |
+| `xmin` | `xMin` | `number` or `"coord"` or `"auto"` | - | The minimum value of the X axis. Defaults to the minimum value of the X coord. |
+| `xmax` | `xMax` | `number` or `"coord"` or `"auto"` | - | The maximum value of the X axis. Defaults to the maximum value of the X coord. |
 | `y` | `y` | `string` | `"oklch.l"` | The coord to plot on the Y axis, if any |
-| `info` | `info` | `string` | - | Comma-separated list of coords of the color point to be shown. |
+| `ymin` | `yMin` | `number` or `"coord"` or `"auto"` | - | The minimum value of the Y axis. Defaults to the minimum value of the Y coord. |
+| `ymax` | `yMax` | `number` or `"coord"` or `"auto"` | - | The maximum value of the Y axis. Defaults to the maximum value of the Y coord. |
+| `info` | `info` | `string` | - | Comma-separated list of coords of the color point to be shown in the tooltip. |
 
 ### Events
 

package/src/color-chart/color-chart-global.css

@@ -1,5 +1,5 @@
 @property --chart-width {
-	syntax: '<length-percentage>';
+	syntax: "<length-percentage>";
 	initial-value: 100%;
 	inherits: true;
 }
@@ -22,30 +22,34 @@
 	inherits: true;
 }
 
+color-chart {
+	--_point-size: var(--point-size, 0.6em);
+	--_line-width: var(--line-width, 0.2em);
+	--color-swatch-width: var(--color-swatch-width, var(--_point-size));
+	--color-swatch-radius: var(--color-swatch-radius, 50%);
+}
+
 color-chart > color-scale {
 	--extent-x: calc(var(--max-x) - var(--min-x));
 	--extent-y: calc(var(--max-y) - var(--min-y));
 
 	&::part(color-swatch) {
-		--_point-size: var(--point-size, .6em);
-		--_line-width: var(--line-width, .2em);
-
 		position: absolute;
-		top:  calc((1 - (var(--y) - var(--min-y)) / (var(--max-y) - var(--min-y))) * 100cqh);
-		left: calc( (var(--x) - var(--min-x)) / (var(--max-x) - var(--min-x)) * 100%);
+		top: calc((1 - (var(--y) - var(--min-y)) / (var(--max-y) - var(--min-y))) * 100cqh);
+		left: calc((var(--x) - var(--min-x)) / (var(--max-x) - var(--min-x)) * 100%);
 		width: var(--_point-size);
 		aspect-ratio: 1;
 		border-radius: 50%;
 		background: yellow;
 		min-block-size: 0;
 		translate: -50% -50%;
-		transition: 300ms;
-		transition-property: width;
+		transition: 300ms 0.01ms;
+		transition-property: width, opacity;
 	}
 
 	&::part(color-swatch):hover {
 		/* Cannot use CSS transforms here because that also affects the line */
-		--_point-size: calc(var(--point-size, .6em) * 1.5);
+		--_point-size: calc(var(--point-size, 0.6em) * 1.5);
 		z-index: 1;
 	}
 
@@ -57,8 +61,8 @@ color-chart > color-scale {
 			--delta-y-abs: max(var(--delta-y), -1 * var(--delta-y));
 			--delta-y-sign: calc(var(--delta-y) / var(--delta-y-abs));
 
-			--width: calc( var(--chart-width) * var(--delta-x) / var(--extent-x));
-			--height: calc( var(--chart-height) * var(--delta-y-abs) / var(--extent-y));
+			--width: calc(var(--chart-width) * var(--delta-x) / var(--extent-x));
+			--height: calc(var(--chart-height) * var(--delta-y-abs) / var(--extent-y));
 			--angle: atan2(var(--height), var(--width));
 
 			content: "";
@@ -78,11 +82,12 @@ color-chart > color-scale {
 		}
 	}
 
-	&::part(info) {}
+	&::part(info) {
+	}
 
 	&::part(swatch) {
 		min-block-size: 0;
-		padding: .2em;
+		padding: 0.2em;
 	}
 
 	&::part(gamut) {
@@ -92,6 +97,6 @@ color-chart > color-scale {
 
 color-chart:has(> color-scale:hover) {
 	> color-scale:not(:hover) {
-		opacity: .4;
+		opacity: 0.4;
 	}
 }

package/src/color-chart/color-chart-shadow.css

@@ -0,0 +1,123 @@
+:host {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	grid-template-rows: auto 1fr auto;
+	height: clamp(0em, 20em, 100vh);
+	contain: size;
+	container-name: chart;
+	container-type: size;
+}
+
+.axis {
+	display: flex;
+
+	.ticks {
+		flex: 1;
+		display: grid;
+
+		> * {
+			font-size: 60%;
+			line-height: 1;
+		}
+	}
+
+	.label {
+		text-align: center;
+	}
+}
+
+[part="color-channel"],
+slot[name="color-channel"]::slotted(*) {
+	/* <channel-picker>, or anything acting like one, should occupy the whole row above the chart so as not to mess up with the rest of the layout */
+	grid-column: 1 / -1;
+	justify-self: start;
+
+	margin-block: 0.5em 0.7em;
+	font-size: 130%;
+}
+
+#x_axis {
+	grid-column: 2;
+	grid-row: 3;
+
+	display: grid;
+
+	.ticks {
+		grid-row: 1;
+		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+
+		> * {
+			padding-block-start: 0.5em;
+			margin-inline-end: auto;
+			translate: -50% 0;
+		}
+	}
+
+	.label {
+		grid-row: 2;
+		margin-block-start: .75em;
+	}
+}
+
+#y_axis {
+	grid-column: 1;
+	grid-row: 2;
+
+	.ticks {
+		align-items: end;
+
+		> * {
+			padding-inline-end: 0.5em;
+			translate: 0 0.5lh;
+		}
+	}
+
+	.label {
+		writing-mode: vertical-lr;
+		rotate: 0.5turn;
+		margin-right: 0.5em;
+	}
+}
+
+@property --chart-width {
+	syntax: "<length-percentage>";
+	initial-value: 100%;
+	inherits: true;
+}
+
+#chart-container {
+	container-name: chart;
+	container-type: size;
+}
+
+#chart {
+	overflow: hidden;
+
+	position: relative;
+	border: 1px solid gray;
+	min-height: 100%;
+	background:
+		linear-gradient(to bottom, hsl(220 10% 50% / 40%) 0 1px, transparent 0) 0 -1px / 100%
+			calc(100% / var(--steps-y, 10)),
+		linear-gradient(to right, hsl(220 10% 50% / 30%) 0 1px, transparent 0) -1px 0 /
+			calc(100% / var(--steps-x, 10)) 100%;
+
+	--chart-width: 100cqw;
+	--chart-height: 100cqh;
+	--extent-x: calc(var(--max-x) - var(--min-x));
+	--extent-y: calc(var(--max-y) - var(--min-y));
+}
+
+::slotted(color-scale) {
+	--details-style: compact;
+
+	/*
+	  We want color scales to be easy to style: one can hide them, lower their opacity, etc.
+	  At the same time, we don't want their containers to mess up with other chart parts.
+	  For example, we don't want color scales to get the hover styles when one moves the cursor to the top left part of the chart,
+	  where all the color scale containers reside. So, we need to shrink them.
+	*/
+	display: block;
+	width: 0;
+	height: 0;
+}

package/src/color-chart/color-chart.css

@@ -1,112 +1,2 @@
-:host {
-	display: grid;
-	grid-template-columns: auto 1fr;
-	grid-template-rows: auto 1fr auto;
-	height: clamp(0em, 20em, 100vh);
-	contain: size;
-	container-name: chart;
-	container-type: size;
-}
-
-.axis {
-	display: flex;
-
-	.ticks {
-		flex: 1;
-		display: grid;
-
-		> * {
-			font-size: 60%;
-			line-height: 1;
-		}
-	}
-
-	.label {
-		text-align: center;
-	}
-}
-
-[part="color-channel"],
-slot[name="color-channel"]::slotted(*) {
-	/* <channel-picker>, or anything acting like one, should occupy the whole row above the chart so as not to mess up with the rest of the layout */
-	grid-column: 1 / -1;
-	justify-self: start;
-
-	margin-block: .5em .7em;
-	font-size: 130%;
-}
-
-#x_axis {
-	grid-column: 2;
-	grid-row: 3;
-
-	.ticks {
-		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-
-		> * {
-			padding-block-start: .5em;
-			margin-inline-end: auto;
-			translate: -50% 0;
-		}
-	}
-}
-
-#y_axis {
-	grid-column: 1;
-	grid-row: 2;
-
-	.ticks {
-		align-items: end;
-
-		> * {
-			padding-inline-end: .5em;
-			translate: 0 .5lh;
-		}
-	}
-
-	.label {
-		writing-mode: vertical-lr;
-		rotate: .5turn;
-		margin-right: .5em;
-	}
-}
-
-@property --chart-width {
-	syntax: '<length-percentage>';
-	initial-value: 100%;
-	inherits: true;
-}
-
-#chart-container {
-	container-name: chart;
-	container-type: size;
-}
-
-#chart {
-	overflow: hidden;
-
-	position: relative;
-	border: 1px solid gray;
-	min-height: 100%;
-	background: linear-gradient(to bottom, hsl(220 10% 50% / 40%) 0 1px, transparent 0) 0 -1px / 100% calc(100% / var(--steps-y, 10)),
-	            linear-gradient(to right, hsl(220 10% 50% / 30%) 0 1px, transparent 0) -1px 0 / calc(100% / var(--steps-x, 10)) 100%;
-
-	--chart-width: 100cqw;
-	--chart-height: 100cqh;
-	--extent-x: calc(var(--max-x) - var(--min-x));
-	--extent-y: calc(var(--max-y) - var(--min-y));
-}
-
-::slotted(color-scale) {
-	--details-style: compact;
-
-	/*
-	  We want color scales to be easy to style: one can hide them, lower their opacity, etc.
-	  At the same time, we don't want their containers to mess up with other chart parts.
-	  For example, we don't want color scales to get the hover styles when one moves the cursor to the top left part of the chart,
-	  where all the color scale containers reside. So, we need to shrink them.
-	*/
-	display: block;
-	width: 0;
-	height: 0;
-}
+@import url("color-chart-shadow.css");
+@import url("color-chart-global.css");