color-elements 0.0.2 → 0.0.4

package/src/channel-slider/README.md

@@ -6,8 +6,8 @@ A [`<color-slider>`](../color-slider) for a specific channel, intended for color
 
 This is a higher level component than `<color-slider>` for the cases where you want to control a single channel of a color space.
 It offers many conveniences for these cases:
-- It takes care of applying the right `min` and `max` values to the slider
-- It automatically generates the start and end colors,
+- It takes care of applying the right `min`, `max`, and `step` values to the slider
+- It automatically generates the start and end colors
 - It can provide an editable tooltip as a tooltip that both shows and edits the current value
 - Already includes a suitable label
 
@@ -19,6 +19,12 @@ Basic example:
 <channel-slider space="oklch" channel="h"></channel-slider>
 ```
 
+The alpha channel is also supported:
+
+```html
+<channel-slider space="oklch" channel="alpha"></channel-slider>
+```
+
 In most cases you’d also want to set a color to set the other channels and the initial value:
 
 ```html
@@ -81,6 +87,7 @@ All attributes are reactive:
 		<option>l</option>
 		<option>c</option>
 		<option>h</option>
+		<option>alpha</option>
 	</select>
 </label>
 
@@ -90,13 +97,13 @@ All attributes are reactive:
 <script>
 	function fromSlider () {
 		space_select.value = dynamic_slider.space.id;
-		channel_select.innerHTML = Object.keys(dynamic_slider.space.coords).map(c => `<option>${c}</option>`).join('\n');
-		channel_select.value = dynamic_slider.channel;
+		channel_select.innerHTML = [...Object.keys(dynamic_slider.space.coords).map(c => `<option>${c}</option>`), "<option>alpha</option>"].join('\n');
+		channel_select.value = dynamic_slider.channel || channel_select.options[0].value;
 	}
 
 	function fromSelects () {
 		dynamic_slider.space = space_select.value;
-		dynamic_slider.channel = channel_select.value;
+		dynamic_slider.channel = channel_select.value || channel_select.options[0].value;
 	}
 
 	space_select.oninput = channel_select.oninput = fromSelects;
@@ -109,6 +116,12 @@ All attributes are reactive:
 
 ## Reference
 
+### Slots
+
+| Name | Description |
+|------|-------------|
+| _(default)_ | The channel slider's label. |
+
 ### Attributes & Properties
 
 | Attribute | Property | Property type | Default value | Description |
@@ -117,7 +130,36 @@ All attributes are reactive:
 | `channel` | `channel` | `string` | `h` | The component to use for the gradient. |
 | `min` | `min` | `number` | `this.refRange[0]` | The minimum value for the slider. |
 | `max` | `max` | `number` | `this.refRange[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. |
 | `value` | `value` | `number` | `(this.min + this.max) / 2` | The current value of the slider. |
-| `color` | `color` | `Color` &#124; `string` | `oklch(50 50% 180)` | The current color value. |
-| - | `minColor` | `Color` | `oklch(0 50% 180)` | The minimum color value _(read-only)_. |
-| - | `maxColor` | `Color` | `oklch(100 50% 180)` | The maximum color value _(read-only)_. |
+| `color` | `color` | `Color` &#124; `string` | `oklch(50% 50% 180)` | The current color value. |
+
+### Getters
+
+These properties are read-only.
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `minColor` | `Color` | The color corresponding to the minimum value of the slider. |
+| `maxColor` | `Color` | The color corresponding to the maximum value of the slider. |
+| `stops` | `Array<Color>` | The array of the slider color stops used for rendering. Unsupported color spaces or angular channels (hues) will have more color stops, while other channels may have as little as two: `minColor` and `maxColor`. |
+| `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. |
+| `channelName` | `string` | The name of the channel (e.g. `Hue` or `Alpha`). |
+
+
+### Events
+
+| Name | Description |
+|------|-------------|
+| `input` | Fired when the color changes due to user action. |
+| `change` | Fired when the color changes due to user action. |
+| `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 |
+|------|-------------|
+| `color_slider` | The internal `<color-slider>` element. |
+| `slider` | The `slider` part of the internal [`<color-slider>`](../color-slider/#parts) element. |
+| `label` | The internal `<label>` element used as a wrapper around the default slot and the slider. |

package/src/channel-slider/channel-slider.css

@@ -1,19 +1,61 @@
 .color-slider-label {
+	--_transition-duration: var(--transition-duration, 200ms);
+
 	display: grid;
 	grid-template-columns: 1fr auto;
 	gap: .3em;
-	position: relative;
+	align-items: center;
 
 	em {
 		opacity: 60%;
+		transition: opacity var(--_transition-duration);
 	}
-}
 
-color-slider {
-	grid-column: 1 / -1;
-}
+	&:not(:hover, :focus-within) em {
+		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%)));
+
+		all: unset;
 
+		--content-width: calc(var(--value-length) * 1ch);
+		width: calc(var(--content-width, 2ch) + 1.2em);
+		min-width: calc(2ch + 1.2em);
+		box-sizing: content-box;
+		padding: .1em .2em;
+		border-radius: .2em;
+		border: 1px solid var(--_border-color);
+		text-align: center;
+		font-size: 90%;
+		transition: var(--_transition-duration) allow-discrete;
+		transition-property: opacity, border-color;
 
+		&::-webkit-textfield-decoration-container {
+			gap: .2em;
+		}
 
+		&:not(:hover, :focus) {
+			--_current-color-percent: 10;
 
+			opacity: 60%;
+			border-color: var(--_border-color);
 
+			&::-webkit-inner-spin-button {
+				/* Fade out the spin buttons in Chrome and Safari */
+				opacity: .35;
+				filter: contrast(2);
+			}
+		}
+
+		@supports (field-sizing: content) {
+			field-sizing: content;
+			width: auto;
+		}
+	}
+}
+
+color-slider {
+	grid-column: 1 / -1;
+}

package/src/channel-slider/channel-slider.js

@@ -1,40 +1,41 @@
 import "../color-slider/color-slider.js";
 import * as dom from "../common/dom.js";
-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";
 
-export const tagName = "channel-slider";
+const Self = class ChannelSlider extends ColorElement {
+	static tagName = "channel-slider";
+	static url = import.meta.url;
+	static styles = "./channel-slider.css";
+	static shadowTemplate = `
+		<label class="color-slider-label" part="label">
+			<slot>
+				<span id="channel_info" part="channel-info"></span>
+				<input type="number" part="spinner" min="0" max="1" step="0.01" id="spinner" />
+			</slot>
+			<color-slider part="color_slider" exportparts="slider" id="slider"></color-slider>
+		</label>`;
 
-export default class ChannelSlider extends NudeElement {
 	constructor () {
 		super();
 
-		this.attachShadow({mode: "open"});
-		let styleURL = new URL(`./${tagName}.css`, import.meta.url);
-		this.shadowRoot.innerHTML = `
-			<style>@import url("${ styleURL }")</style>
-			<label class="color-slider-label" part="label">
-				<slot></slot>
-				<color-slider part="color_slider" exportparts="slider" id="slider" tooltip></color-slider>
-			</label>
-		`;
-
 		this._el = dom.named(this);
 		this._el.slot = this.shadowRoot.querySelector("slot");
 	}
 
-	connectedCallback() {
+	connectedCallback () {
 		super.connectedCallback?.();
 
 		this._el.slider.addEventListener("input", this);
+		this._el.slot.addEventListener("input", this);
 	}
 
-	disconnectedCallback() {
+	disconnectedCallback () {
 		this._el.slider.removeEventListener("input", this);
+		this._el.slot.removeEventListener("input", this);
 	}
 
-	handleEvent(event) {
+	handleEvent (event) {
 		if (event.type === "input") {
 			this.value = event.target.value;
 		}
@@ -42,12 +43,14 @@ export default class ChannelSlider extends NudeElement {
 
 	colorAt (value) {
 		let color = this.defaultColor.clone();
-		try {
-			color.set(this.channel, value);
+
+		if (this.channel === "alpha") {
+			color.alpha = value / 100;
 		}
-		catch (e) {
-			console.warn(e);
+		else if (this.channel in color.space.coords) {
+			color.set(this.channel, value);
 		}
+
 		return color;
 	}
 
@@ -86,19 +89,30 @@ export default class ChannelSlider extends NudeElement {
 	propChangedCallback ({name, prop, detail: change}) {
 		if (["space", "min", "max", "step", "value", "defaultValue"].includes(name)) {
 			prop.applyChange(this._el.slider, change);
-		};
+
+			if (["min", "max", "step", "value", "defaultValue"].includes(name)) {
+				prop.applyChange(this._el.spinner, change);
+
+				if (name === "value" && this.value !== undefined) {
+					this._el.spinner.value = Number(this.value.toPrecision(4));
+
+					if (!CSS.supports("field-sizing", "content")) {
+						let valueStr = this._el.spinner.value;
+						this._el.spinner.style.setProperty("--value-length", valueStr.length);
+					}
+				}
+			}
+		}
 
 		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.slot.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>`;
 			}
 		}
 	}
 
-
-
 	get channelName () {
 		return this.channelSpec?.name ?? this.channel;
 	}
@@ -107,13 +121,13 @@ export default class ChannelSlider extends NudeElement {
 		space: {
 			default: "oklch",
 			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;
@@ -140,6 +154,12 @@ export default class ChannelSlider extends NudeElement {
 		},
 		channelSpec: {
 			get () {
+				if (this.channel === "alpha") {
+					return {
+						name: "Alpha",
+					};
+				}
+
 				let channelSpec = this.space?.coords[this.channel];
 
 				if (!channelSpec && this.space) {
@@ -148,7 +168,7 @@ export default class ChannelSlider extends NudeElement {
 				}
 
 				return channelSpec;
-			}
+			},
 		},
 		refRange: {
 			get () {
@@ -178,7 +198,16 @@ export default class ChannelSlider extends NudeElement {
 		defaultValue: {
 			type: Number,
 			default () {
-				return this.defaultColor.get(this.channel);
+				if (this.channel === "alpha") {
+					return this.defaultColor.alpha * 100;
+				}
+				else if (this.channel in this.defaultColor.space.coords) {
+					return this.defaultColor.get(this.channel);
+				}
+				else {
+					let firstChannel = Object.keys(this.defaultColor.space.coords)[0];
+					return this.defaultColor.get(firstChannel);
+				}
 			},
 			reflect: {
 				from: "value",
@@ -191,7 +220,9 @@ export default class ChannelSlider extends NudeElement {
 		},
 
 		defaultColor: {
-			type: Color,
+			get type () {
+				return Self.Color;
+			},
 			convert (color) {
 				return color.to(this.space);
 			},
@@ -199,18 +230,20 @@ export default class ChannelSlider extends NudeElement {
 				let coords = [];
 				for (let channel in this.space.coords) {
 					let spec = this.space.coords[channel];
-					let range = spec.refRange ?? spec.range;
+					let range = spec.refRange ?? spec.range ?? [0, 100];
 					coords.push((range[0] + range[1]) / 2);
 				}
 
-				return new Color(this.space, coords);
+				return new Self.Color(this.space, coords);
 			},
 			reflect: {
 				from: "color",
 			},
 		},
 		color: {
-			type: Color,
+			get type () {
+				return Self.Color;
+			},
 			get () {
 				return this.colorAt(this.value);
 			},
@@ -220,18 +253,18 @@ export default class ChannelSlider extends NudeElement {
 				this.value = this.defaultValue;
 			},
 		},
-	}
+	};
 
 	static events = {
 		change: {
 			from () {
 				return this._el.slider;
-			}
+			},
 		},
 		input: {
 			from () {
 				return this._el.slider;
-			}
+			},
 		},
 		valuechange: {
 			propchange: "value",
@@ -242,11 +275,13 @@ export default class ChannelSlider extends NudeElement {
 	};
 
 	static formAssociated = {
-		getSource: el => el._el.slider,
+		like: el => el._el.slider,
 		role: "slider",
 		valueProp: "value",
 		changeEvent: "valuechange",
 	};
-}
+};
+
+Self.define();
 
-customElements.define(tagName, ChannelSlider);
+export default Self;

package/src/color-chart/README.md

@@ -0,0 +1,129 @@
+# `<color-chart>`
+
+Display lists of colors as a scatterplot or line chart.
+
+## Features
+
+- Plot any coordinate, in any color space
+
+## Examples
+
+### Basic usage
+
+Plotting a single color scale:
+
+```html
+<color-chart y="oklch.l">
+	<color-scale colors="#e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5, #2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1"></color-scale>
+</color-chart>
+```
+
+By default, the other coordinate would be the index of the color in the list, but you can specify it explicitly:
+
+```html
+<color-chart y="oklch.l">
+	<color-scale colors="50: #e3f2fd, 100: #bbdefb, 200: #90caf9, 300: #64b5f6, 400: #42a5f5, 500: #2196f3, 600: #1e88e5, 700: #1976d2, 800: #1565c0, 900: #0d47a1"></color-scale>
+</color-chart>
+```
+
+You can also specify a whole label, and if it contains a number, the number will become the X coordinate:
+
+```html
+<color-chart y="oklch.c">
+	<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>
+	<color-scale colors="Orange 50: #fff7ed, Orange 100: #ffedd5, Orange 200: #fed7aa, Orange 300: #fdba74, Orange 400: #fb923c, Orange 500: #f97316, Orange 600: #ea580c, Orange 700: #c2410c, Orange 800: #9a3412, Orange 900: #7c2d12, Orange 950: #431407"></color-scale>
+	<color-scale colors="Yellow 50: #fefce8, Yellow 100: #fef9c3, Yellow 200: #fef08a, Yellow 300: #fde047, Yellow 400: #facc15, Yellow 500: #eab308, Yellow 600: #ca8a04, Yellow 700: #a16207, Yellow 800: #854d0e, Yellow 900: #713f12, Yellow 950: #422006"></color-scale>
+</color-chart>
+```
+
+_(Colors courtesy of Tailwind)_
+
+### Plotting hues { #hues}
+
+Hues will be shifted as needed to produce a better result:
+
+```html
+<color-chart y="hsl.h">
+	<color-scale colors="hsl(5 50% 50%), hsl(355 50% 50%), hsl(10 50% 50%), hsl(-10 50% 50%)"></color-scale>
+</color-chart>
+```
+
+```html
+<color-chart y="oklch.h">
+	<color-scale colors="05: #2c0110, 10: #41031a, 20: #67082e, 30: #890e3f, 40: #ac1450, 50: #e01d6b, 60: #f2638c, 70: #fb8ea8, 80: #ffb4c5, 90: #ffdce3, 95: #ffeef1"></color-scale>
+	<color-scale colors="05 (WA) / 05: #26050c, 10 (WA) / 10: #3e0817, 20 (WA) / 20: #630d29, 30 (WA) / 30: #88123b, 40 (WA) / 40: #ab174e, 50 (WA) / 50: #de1d6a, 60 (WA) / 60: #ee669b, 70 (WA) / 70: #f391b9, 80 (WA) / 80: #f7b8d3, 90 (WA) / 90: #fbdeeb, 95 (WA) / 95: #fdeef5"></color-scale>
+</color-chart>
+```
+
+### The `info` attribute
+
+You can use the `info` attribute to show information about the color scale points. Currently, the only type of information supported is color coords (in any color space), but more will be added in the future.
+
+The format of this attribute is analogous to the one of [`<color-swatch>`](../color-swatch/#the-info-attribute).
+
+```html
+<color-chart y="oklch.c" info="L: oklch.l, C: oklch.c, H: oklch.h">
+	<color-scale colors="50: #eff6ff, 100: #dbeafe, 200: #bfdbfe, 300: #93c5fd, 400: #60a5fa, 500: #3b82f6, 600: #2563eb, 700: #1d4ed8, 800: #1e40af, 900: #1e3a8a, 950: #172554"></color-scale>
+	<color-scale colors="50: #ecfeff, 100: #cffafe, 200: #a5f3fc, 300: #67e8f9, 400: #22d3ee, 500: #06b6d4, 600: #0891b2, 700: #0e7490, 800: #155e75, 900: #164e63, 950: #083344"></color-scale>
+	<color-scale colors="50: #f0fdfa, 100: #ccfbf1, 200: #99f6e4, 300: #5eead4, 400: #2dd4bf, 500: #14b8a6, 600: #0d9488, 700: #0f766e, 800: #115e59, 900: #134e4a, 950: #042f2e"></color-scale>
+</color-chart>
+```
+
+Reactively changing the Y coordinate:
+
+```html
+<button onclick="this.nextElementSibling.y = 'hwb.w'">
+	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>
+	<color-scale colors="Orange 50: #fff7ed, Orange 100: #ffedd5, Orange 200: #fed7aa, Orange 300: #fdba74, Orange 400: #fb923c, Orange 500: #f97316, Orange 600: #ea580c, Orange 700: #c2410c, Orange 800: #9a3412, Orange 900: #7c2d12, Orange 950: #431407"></color-scale>
+	<color-scale colors="Yellow 50: #fefce8, Yellow 100: #fef9c3, Yellow 200: #fef08a, Yellow 300: #fde047, Yellow 400: #facc15, Yellow 500: #eab308, Yellow 600: #ca8a04, Yellow 700: #a16207, Yellow 800: #854d0e, Yellow 900: #713f12, Yellow 950: #422006"></color-scale>
+</color-chart>
+```
+
+Reactively setting/changing the colors:
+```html
+<label>Colors:
+	<select onchange="this.parentNode.nextElementSibling.firstElementChild.colors = this.value">
+		<option selected value="">None</option>
+		<option value="Yellow 50: #fefce8, Yellow 100: #fef9c3, Yellow 200: #fef08a, Yellow 300: #fde047, Yellow 400: #facc15, Yellow 500: #eab308, Yellow 600: #ca8a04, Yellow 700: #a16207, Yellow 800: #854d0e, Yellow 900: #713f12, Yellow 950: #422006">Yellow</option>
+		<option value="Orange 50: #fff7ed, Orange 100: #ffedd5, Orange 200: #fed7aa, Orange 300: #fdba74, Orange 400: #fb923c, Orange 500: #f97316, Orange 600: #ea580c, Orange 700: #c2410c, Orange 800: #9a3412, Orange 900: #7c2d12, Orange 950: #431407">Orange</option>
+		<option value="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">Red</option>
+	</select>
+</label>
+<color-chart y="oklch.l">
+	<color-scale></color-scale>
+</color-chart>
+```
+
+## Reference
+
+### Attributes & Properties
+
+| Attribute | Property | Property type | Default value | Description |
+|-----------|----------|---------------|---------------|-------------|
+| `x` | `x` | `string` | `null` | The coord to plot on the X axis, if any |
+| `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. |
+
+### Events
+
+| Name | Description |
+|------|-------------|
+
+### CSS variables
+
+| Name | Type | Description |
+|------|------|-------------|
+| `--color-scale-type` | `discrete` or `normal` | Whether to draw lines between consecutive points. Works on individual color swatches (to prevent drawing a line to the *next* point), entire color scales, or the entire chart. |
+
+### Parts
+
+| Name | Description |
+|------|-------------|
+| `color-channel` | The default [`<channel-picker>`](../channel-picker/) element, used if the `color-channel` slot has no slotted elements. |
+| `axis` | The axis line |
+| `ticks` | The container of ticks |
+| `tick` | A tick mark |
+| `label` | A label on the axis |

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

@@ -0,0 +1,101 @@
+@property --chart-width {
+	syntax: '<length-percentage>';
+	initial-value: 100%;
+	inherits: true;
+}
+
+@property --width {
+	syntax: "<length>";
+	initial-value: 0px;
+	inherits: true;
+}
+
+@property --height {
+	syntax: "<length>";
+	initial-value: 0px;
+	inherits: true;
+}
+
+@property --angle {
+	syntax: "<angle>";
+	initial-value: 0deg;
+	inherits: true;
+}
+
+color-chart {
+	--_point-size: var(--point-size, .6em);
+	--_line-width: var(--line-width, .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) {
+		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%);
+		width: var(--_point-size);
+		aspect-ratio: 1;
+		border-radius: 50%;
+		background: yellow;
+		min-block-size: 0;
+		translate: -50% -50%;
+		transition: 300ms .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);
+		z-index: 1;
+	}
+
+	/* Lines */
+	@container not style(--color-scale-type: discrete) {
+		&::part(color-swatch)::before {
+			--delta-x: calc(var(--next-x) - var(--x));
+			--delta-y: calc(var(--next-y) - var(--y));
+			--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));
+			--angle: atan2(var(--height), var(--width));
+
+			content: "";
+			position: absolute;
+			z-index: 1;
+			left: calc(50% - var(--_line-width) / 2);
+			top: calc(50% - var(--_line-width) / 2);
+			width: calc((var(--width) + var(--_line-width)) / cos(var(--angle)));
+			height: var(--_line-width);
+			transform-origin: calc(var(--_line-width) / 2) calc(var(--_line-width) / 2);
+			/* if delta y is negative, this needs to rotate the other way */
+			rotate: calc(-1 * var(--delta-y-sign) * var(--angle));
+			background: linear-gradient(to right, var(--color), var(--next-color));
+
+			/* Don't show points tooltips on hovering the line */
+			pointer-events: none;
+		}
+	}
+
+	&::part(info) {}
+
+	&::part(swatch) {
+		min-block-size: 0;
+		padding: .2em;
+	}
+
+	&::part(gamut) {
+		font-size: 40%;
+	}
+}
+
+color-chart:has(> color-scale:hover) {
+	> color-scale:not(:hover) {
+		opacity: .4;
+	}
+}