color-elements 0.0.4 → 0.0.5

package/src/color-inline/style.css

@@ -11,4 +11,4 @@ html {
 color-inline {
 	display: block;
 	margin: 1em 0;
-}
+}

package/src/color-picker/color-picker.css

@@ -5,9 +5,9 @@
 }
 
 #space_picker {
-	margin-inline-start: -.7em; /* align with the channel names */
+	margin-inline-start: -0.7em; /* align with the channel names */
 	font-size: 150%;
-	transition: border-color .2s;
+	transition: border-color 0.2s;
 
 	&:not(:hover) {
 		border-color: transparent;
@@ -24,7 +24,7 @@ slot[name="color-space"]::slotted(*) {
 	display: flex;
 	flex-flow: column;
 	justify-content: space-between;
-	gap: .3em;
+	gap: 0.3em;
 	min-inline-size: 10em;
 }
 

package/src/color-picker/color-picker.js

@@ -63,14 +63,17 @@ const Self = class ColorPicker extends ColorElement {
 			}
 			this.color = this._el.swatch.color;
 		}
-		else if (this._el.space_picker.contains(source) || this._slots.color_space.assignedElements().includes(source)) {
+		else if (
+			this._el.space_picker.contains(source) ||
+			this._slots.color_space.assignedElements().includes(source)
+		) {
 			this.spaceId = event.target.value;
 		}
 
-		this.dispatchEvent(new event.constructor(event.type, {...event}));
+		this.dispatchEvent(new event.constructor(event.type, { ...event }));
 	}
 
-	propChangedCallback ({name, prop, detail: change}) {
+	propChangedCallback ({ name, prop, detail: change }) {
 		if (name === "space" || name === "alpha") {
 			let space = this.space;
 
@@ -91,7 +94,10 @@ const Self = class ColorPicker extends ColorElement {
 					slider.channel = channel;
 				}
 				else {
-					this._el.sliders.insertAdjacentHTML("beforeend", `<channel-slider space="${ space.id }" channel="${ channel }" part="channel-slider"></channel-slider>`);
+					this._el.sliders.insertAdjacentHTML(
+						"beforeend",
+						`<channel-slider space="${space.id}" channel="${channel}" part="channel-slider"></channel-slider>`,
+					);
 				}
 			}
 
@@ -130,7 +136,7 @@ const Self = class ColorPicker extends ColorElement {
 
 				return value + "";
 			},
-			changed ({parsedValue, source, ...change}) {
+			changed ({ parsedValue, source, ...change }) {
 				if (!parsedValue && source !== "default") {
 					// Something went wrong. We should always have a value. Falling back to the current space
 					this.spaceId = this.space.id;
@@ -152,7 +158,7 @@ const Self = class ColorPicker extends ColorElement {
 				return this._el.space_picker.selectedSpace;
 			},
 			set: true,
-			changed ({parsedValue, ...change}) {
+			changed ({ parsedValue, ...change }) {
 				if (parsedValue === undefined) {
 					// this.spaceId changed
 					if (this._el.space_picker.value !== this.spaceId) {
@@ -167,7 +173,8 @@ const Self = class ColorPicker extends ColorElement {
 					return;
 				}
 
-				parsedValue = parsedValue instanceof Self.Color.Space ? parsedValue.id : parsedValue;
+				parsedValue =
+					parsedValue instanceof Self.Color.Space ? parsedValue.id : parsedValue;
 				if (this.spaceId !== parsedValue) {
 					this._el.space_picker.value = parsedValue;
 					this.spaceId = parsedValue;

package/src/color-scale/README.md

@@ -36,7 +36,6 @@ You can also give them optional names:
 "></color-scale>
 ```
 
-
 You can only specify your core colors, and insert steps via interpolation:
 
 ```html
@@ -58,7 +57,6 @@ You can specify the `info` attribute to show additional information about the co
 
 You can also create compact color scales, by simply setting `--details-style: compact`:
 
-
 ```html
 <color-scale space="oklch" info="L: oklch.l, C: oklch.c, H: oklch.h"
              style="--details-style: compact"
@@ -73,3 +71,45 @@ If you want to insert interpolated colors only in specific places, you can use e
 ```html
 <color-scale space="oklch" colors="#e3fafc, , , , , , , , , #0b7285"></color-scale>
 ``` -->
+
+## Reference
+
+### Attributes & Properties
+
+| Attribute | Property | Property type                         | Default value | Description                                                                                                                  |
+| --------- | -------- | ------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| `colors`  | `colors` | `{ [string]: Color }` &#124; `string` | -             | Object or comma-separated string defining the colors and their optional names.                                               |
+| `space`   | `space`  | `ColorSpace` &#124; `string`          | `oklch`       | The color space to use for interpolation.                                                                                    |
+| `steps`   | `steps`  | `number`                              | `0`           | Number of interpolated steps to insert between each pair of colors.                                                          |
+| `info`    | `info`   | `string`                              | -             | Comma-separated list of coords of the colors to be shown. Passed to generated [`<color-swatch>`](../color-swatch/) elements. |
+
+### Getters
+
+These properties are read-only.
+
+| Property         | Type                                                | Description                                                                                                          |
+| ---------------- | --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `computedColors` | `Array<{name: string, color: Color}>` &#124; `null` | The array of color objects after processing interpolation and steps. Returns `null` if `this.colors` is not defined. |
+
+### CSS variables
+
+The styling of `<color-scale>` is fully customizable via CSS variables provided by the [`<color-swatch>`](../color-swatch/#css-variables) elements it generates.
+
+| Name              | Type                                | Description                                                                                                    |
+| ----------------- | ----------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| `--details-style` | `compact` &#124; `normal` (default) | Controls how color information is displayed. Inherited by child [`<color-swatch>`](../color-swatch/) elements. |
+
+### Parts
+
+| Name           | Description                                                                                         |
+| -------------- | --------------------------------------------------------------------------------------------------- |
+| `color-swatch` | Each individual [`<color-swatch>`](../color-swatch/) element generated for the colors in the scale. |
+
+The component also exports parts from its child `<color-swatch>` elements: `swatch`, `info`, `gamut`, and `swatch-label` (exported as `label`). See the [`<color-swatch>` parts table](../color-swatch/#parts) for details.
+
+### Events
+
+| Name           | Description                                                                                                        |
+| -------------- | ------------------------------------------------------------------------------------------------------------------ |
+| `colorschange` | Fired when the computed colors change for any reason, and once during initialization.                              |
+| `colorchange`  | Fired when any individual color swatch changes (bubbled from child [`<color-swatch>`](../color-swatch/) elements). |

package/src/color-scale/color-scale.css

@@ -1,6 +1,6 @@
 :host {
 	display: grid;
-	gap: .3em;
+	gap: 0.3em;
 	grid-auto-flow: row;
 	grid-template-rows: auto auto;
 	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));

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

@@ -21,19 +21,19 @@ const Self = class ColorScale extends ColorElement {
 
 	connectedCallback () {
 		super.connectedCallback?.();
-		this._el.swatches.addEventListener("colorchange", this, {capture: true});
+		this._el.swatches.addEventListener("colorchange", this, { capture: true });
 	}
 
 	disconnectedCallback () {
 		this.#swatches = [];
-		this._el.swatches.removeEventListener("colorchange", this, {capture: true});
+		this._el.swatches.removeEventListener("colorchange", this, { capture: true });
 	}
 
 	handleEvent (event) {
-		this.dispatchEvent(new event.constructor(event.type, {...event}));
+		this.dispatchEvent(new event.constructor(event.type, { ...event }));
 	}
 
-	propChangedCallback ({name, prop, detail: change}) {
+	propChangedCallback ({ name, prop, detail: change }) {
 		if (name === "computedColors") {
 			// Re-render swatches
 			this.render();
@@ -53,8 +53,8 @@ const Self = class ColorScale extends ColorElement {
 
 		let i = 0;
 		let newSwatches = [];
-		for (let {name, color} of colors) {
-			let swatch = this.#swatches[i] = this._el.swatches.children[i];
+		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");
@@ -118,7 +118,7 @@ const Self = class ColorScale extends ColorElement {
 					return null;
 				}
 
-				let colors = Object.entries(this.colors).map(([name, color]) => ({name, color}));
+				let colors = Object.entries(this.colors).map(([name, color]) => ({ name, color }));
 
 				if (this.steps > 0) {
 					// Insert intermediate steps
@@ -127,11 +127,14 @@ const Self = class ColorScale extends ColorElement {
 					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 });
+						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}));
+						steps = steps.map(color => ({ name: color + "", color }));
 
 						tessellated.push(start, ...steps);
 

package/src/color-slider/README.md

@@ -118,10 +118,24 @@ You can style it to look quite different:
 ### CSS-only usage
 
 If you just want the styling of `<color-slider>` and not any of the API (or are fine dealing with the lower level details on your own),
-you *can* just use the CSS file:
+you *can* just use the CSS file.
+
+If using a local-first dependency manager (e.g. [Nudeps](https://nudeps.dev)), you can import the CSS file using a plain local URL:
+
+```css
+@import "/client_modules/color-elements/color-slider.css";
+```
+
+Or with a bundler that supports CSS imports:
+
+```css
+@import "color-elements/color-slider.css";
+```
+
+Otherwise, use a CDN:
 
 ```css
-@import url("https://elements.colorjs.io/src/color-slider/color-slider.css");
+@import url("https://esm.sh/color-elements/color-slider.css");
 ```
 
 This is perfect for when the gradient is more of a visual aid than a functional part of your UI,
@@ -217,4 +231,4 @@ These properties are read-only.
 
 ## Planned features
 
-- Discrete scales & steps
+- Discrete scales & steps

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

@@ -6,37 +6,47 @@
 .color-slider,
 .slider-tooltip {
 	--transparency-cell-size: 1.5em;
-	--_transparency-cell-size: var(--transparency-cell-size, .5em);
+	--_transparency-cell-size: var(--transparency-cell-size, 0.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)
+	--_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)));
+	--_slider-gradient: var(
+		--slider-gradient,
+		linear-gradient(to right var(--in-space,), var(--_slider-color-stops))
+	);
 	--_slider-height: var(--slider-height, 2.2em);
 
 	--_slider-thumb-width: var(--slider-thumb-width, 1em);
 	--_slider-thumb-height-offset: var(--slider-thumb-height-offset, 2px);
-	--_slider-thumb-height: var(--slider-thumb-height, calc(var(--_slider-height) + var(--_slider-thumb-height-offset)));
-	--_slider-thumb-radius: var(--slider-thumb-radius, .16em);
+	--_slider-thumb-height: var(
+		--slider-thumb-height,
+		calc(var(--_slider-height) + var(--_slider-thumb-height-offset))
+	);
+	--_slider-thumb-radius: var(--slider-thumb-radius, 0.16em);
 	--_slider-thumb-background: var(--slider-thumb-background, var(--color, transparent));
-	--_slider-thumb-border: var(--slider-thumb-border, 1px solid oklab(.2 0 0));
-	--_slider-thumb-border-active: var(--slider-thumb-border-active, 2px solid oklab(.4 0 0));
+	--_slider-thumb-border: var(--slider-thumb-border, 1px solid oklab(0.2 0 0));
+	--_slider-thumb-border-active: var(--slider-thumb-border-active, 2px solid oklab(0.4 0 0));
 	--_slider-thumb-scale-active: var(--slider-thumb-scale-active, 1.1);
 
 	--_tooltip-background: var(--tooltip-background, hsl(0 0 0 / 80%));
-	--_tooltip-border-radius: var(--tooltip-border-radius, .3em);
-	--_tooltip-pointer-height: var(--tooltip-pointer-height, .3em);
+	--_tooltip-border-radius: var(--tooltip-border-radius, 0.3em);
+	--_tooltip-pointer-height: var(--tooltip-pointer-height, 0.3em);
 	--_tooltip-pointer-angle: var(--tooltip-pointer-angle, 90deg);
 }
 
 .color-slider {
 	@supports (background: linear-gradient(in oklab, red, tan)) {
-		--in-space: in var(--color-space, oklab) var(--hue-interpolation, );
+		--in-space: in var(--color-space, oklab) var(--hue-interpolation,);
 	}
 
 	display: block;
@@ -48,7 +58,7 @@
 	background-origin: border-box;
 	background-clip: border-box;
 	height: var(--_slider-height);
-	border-radius: .3em;
+	border-radius: 0.3em;
 	border: 1px solid rgb(0 0 0 / 8%);
 
 	&::-webkit-slider-thumb {
@@ -60,7 +70,9 @@
 		border: var(--_slider-thumb-border);
 		box-shadow: 0 0 0 1px white;
 		background: var(--color, transparent);
-		transition: 200ms, 0s background;
+		transition:
+			200ms,
+			0s background;
 	}
 
 	&::-moz-range-thumb {
@@ -71,13 +83,15 @@
 		border: var(--_slider-thumb-border);
 		box-shadow: 0 0 0 1px white;
 		background: var(--color, transparent);
-		transition: 200ms, 0s background;
+		transition:
+			200ms,
+			0s background;
 	}
 
-		&::-moz-range-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);
+	}
 
 	&::-moz-range-track {
 		background: none;
@@ -93,22 +107,29 @@
 
 .slider-tooltip {
 	position: absolute;
-	left: clamp(-20%,
-			100% * var(--progress)
-			- (var(--progress) - 0.5) * var(--_slider-thumb-width) / 2 /* center on slider thumb */
-		, 100%);
+	left: clamp(
+		-20%,
+		100% * var(--progress) - (var(--progress) - 0.5) * var(--_slider-thumb-width) / 2
+			/* center on slider thumb */,
+		100%
+	);
 	bottom: calc(100% + 3px);
 	translate: -50%;
 	transform-origin: bottom;
 	display: flex;
-	padding-block: .3em;
-	padding-inline: .4em;
+	padding-block: 0.3em;
+	padding-inline: 0.4em;
 	border: var(--_tooltip-pointer-height) solid transparent;
 	border-radius: calc(var(--_tooltip-border-radius) + var(--_tooltip-pointer-height));
 	text-align: center;
 	color: white;
 	background:
-		conic-gradient(from calc(-1 * var(--_tooltip-pointer-angle) / 2) at bottom, var(--_tooltip-background) var(--_tooltip-pointer-angle), transparent 0) border-box bottom / 100% var(--_tooltip-pointer-height) no-repeat,
+		conic-gradient(
+				from calc(-1 * var(--_tooltip-pointer-angle) / 2) at bottom,
+				var(--_tooltip-background) var(--_tooltip-pointer-angle),
+				transparent 0
+			)
+			border-box bottom / 100% var(--_tooltip-pointer-height) no-repeat,
 		var(--_tooltip-background) padding-box;
 	color-scheme: dark;
 	transition:
@@ -116,7 +137,7 @@
 		opacity 200ms,
 		scale 200ms,
 		width 100ms,
-		left 200ms cubic-bezier(.17,.67,.49,1.48);
+		left 200ms cubic-bezier(0.17, 0.67, 0.49, 1.48);
 
 	&::after {
 		content: var(--tooltip-suffix);
@@ -125,14 +146,14 @@
 	input {
 		all: unset;
 
-		&:where([type=number]) {
+		&:where([type="number"]) {
 			--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;
 
 			&::-webkit-textfield-decoration-container {
-				gap: .2em;
+				gap: 0.2em;
 			}
 
 			@container style(--tooltip-suffix) {
@@ -154,14 +175,14 @@
 
 		/* Prevent input from moving all over the place as we type */
 		&:focus {
-			transition-delay: .5s;
+			transition-delay: 0.5s;
 		}
 	}
 
 	&:not(:is(:focus-within, :hover) > *, .color-slider:is(:focus, :hover) + *, :focus, :hover) {
 		visibility: hidden;
 		opacity: 0;
-		scale: .5;
+		scale: 0.5;
 	}
 }
 
@@ -171,4 +192,4 @@
 
 :host([tooltip="progress"]) .slider-tooltip {
 	--tooltip-suffix: "%";
-}
+}

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

@@ -49,11 +49,11 @@ const Self = class ColorSlider extends ColorElement {
 				this.value = event.target.value;
 			}
 
-			this.dispatchEvent(new event.constructor(event.type, {...event}));
+			this.dispatchEvent(new event.constructor(event.type, { ...event }));
 		}
 	}
 
-	propChangedCallback ({name, prop, detail: change}) {
+	propChangedCallback ({ name, prop, detail: change }) {
 		if (["min", "max", "step", "value", "defaultValue"].includes(name)) {
 			prop.applyChange(this._el.slider, change);
 
@@ -64,10 +64,10 @@ const Self = class ColorSlider extends ColorElement {
 				}
 				else {
 					// Spinner values when tooltip is "progress"
-					value = ({ min: 1, max: 100, step: 1 })[name];
+					value = { min: 1, max: 100, step: 1 }[name];
 				}
 			}
-			prop.applyChange(this._el.spinner, {...change, value: +(+value).toPrecision(4)});
+			prop.applyChange(this._el.spinner, { ...change, value: +(+value).toPrecision(4) });
 		}
 
 		if (name === "stops") {
@@ -106,7 +106,7 @@ const Self = class ColorSlider extends ColorElement {
 		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)`);
+			let supported = CSS.supports("background", `linear-gradient(in ${spaceId}, red, tan)`);
 
 			if (!supported) {
 				spaceId = this.space.isPolar ? "oklch" : "oklab";
@@ -135,7 +135,9 @@ const Self = class ColorSlider extends ColorElement {
 				let values = this;
 				if (change.value === "progress") {
 					values = {
-						min: 1, max: 100, step: 1,
+						min: 1,
+						max: 100,
+						step: 1,
 						value: +(this.progress * 100).toPrecision(4),
 					};
 				}
@@ -307,7 +309,7 @@ const Self = class ColorSlider extends ColorElement {
 		},
 	};
 
-	static formAssociated = {
+	static formBehavior = {
 		like: el => el._el.slider,
 		role: "slider",
 		valueProp: "value",

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

@@ -1,24 +1,28 @@
 :host {
-	--_transparency-cell-size: var(--transparency-cell-size, .5em);
+	--_transparency-cell-size: var(--transparency-cell-size, 0.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)
+	--_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;
+	gap: 0.3em;
 	width: var(--color-swatch-width, fit-content);
-	margin: .3em;
-	border-radius: var(--color-swatch-radius, .2rem);
+	margin: 0.3em;
+	border-radius: var(--color-swatch-radius, 0.2rem);
 }
 
 :host([size="large"]) {
 	flex-flow: column;
-	inline-size: 11em;
+	inline-size: min(11em, 100%);
 	min-block-size: 6em;
 	contain: inline-size;
 	container-name: color-swatch;
@@ -37,7 +41,7 @@ slot {
 		position: absolute;
 		top: 0;
 		right: 0;
-		margin: .5rem;
+		margin: 0.5rem;
 	}
 
 	&:not(:host([size="large"]) *) {
@@ -46,7 +50,7 @@ slot {
 			font-size: 50%;
 			top: 0;
 			right: 0;
-			margin: .2rem;
+			margin: 0.2rem;
 		}
 
 		&:is(.static *) {
@@ -54,8 +58,6 @@ slot {
 		}
 	}
 
-
-
 	&[style*="--gamut-level: 0"] {
 		display: none;
 	}
@@ -65,12 +67,12 @@ slot {
 	margin: 0;
 	display: inline-flex;
 	display: none;
-	gap: .5em;
+	gap: 0.5em;
 
 	&:is(:host([size="large"]) &) {
 		display: grid;
 		grid-template-columns: max-content auto;
-		gap: .1em .2em;
+		gap: 0.1em 0.2em;
 		font-size: max(9px, 80%);
 		justify-content: start;
 
@@ -81,7 +83,7 @@ slot {
 
 	.coord {
 		display: flex;
-		gap: .2em;
+		gap: 0.2em;
 
 		dd {
 			margin: 0;
@@ -114,8 +116,11 @@ slot {
 	}
 
 	@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);
+		--_border-color: var(
+			--border-color,
+			color-mix(in oklab, buttonborder 20%, oklab(none none none / 0%))
+		);
+		--_pointer-height: var(--pointer-height, 0.5em);
 		--_transition-duration: var(--transition-duration, 400ms);
 		--_details-popup-width: var(--details-popup-width, max-content);
 
@@ -124,13 +129,13 @@ slot {
 		z-index: 2;
 		translate: -50% 0;
 		bottom: 100%;
-		margin-bottom: calc(var(--_pointer-height) * .8);
+		margin-bottom: calc(var(--_pointer-height) * 0.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;
+		padding: 0.6em 1em;
+		border-radius: 0.2rem;
+		box-shadow: 0 0.05em 1em -0.7em black;
 		transition: var(--_transition-duration) allow-discrete;
 		transition-property: all, display;
 		transition-delay: 0s, var(--_transition-duration);
@@ -165,8 +170,14 @@ slot {
 			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]) *) {
+		/*
+		 More straightforward selector:
+		 &:not(:is(:host(:hover), :host(:focus-within), :host(:active), :host(:target), :host([open])) *)
+		 doesn't work in Safari!
+		 See https://bugs.webkit.org/show_bug.cgi?id=296577
+		*/
+		&:is(:host(:not(:hover):not(:focus-within):not(:active):not(:target):not([open])) *),
+		&:is(:host([open="false"]) *) {
 			display: none;
 			opacity: 0;
 			scale: 0;
@@ -176,7 +187,7 @@ slot {
 
 [part="color"] {
 	display: flex;
-	gap: .2em;
+	gap: 0.2em;
 }
 
 [part="label"] {
@@ -199,25 +210,23 @@ slot:not([name]) {
 }
 
 [part="color-wrapper"],
-slot[name=swatch]::slotted(*),
+slot[name="swatch"]::slotted(*),
 #swatch {
 	border-radius: inherit;
 }
 
-slot[name=swatch]::slotted(*),
+slot[name="swatch"]::slotted(*),
 #swatch {
 	flex: 1;
 	display: flex;
 	flex-flow: column;
 	align-items: center;
 	justify-content: center;
-	padding: .5em;
+	padding: 0.5em;
 	display: flex;
 	flex-flow: column;
 	flex: 1;
-	background:
-		linear-gradient(var(--color) 0 100%),
-		var(--_transparency-grid);
+	background: linear-gradient(var(--color) 0 100%), var(--_transparency-grid);
 
 	&:is(:host([size="large"]) *) {
 		min-block-size: 3em;
@@ -232,7 +241,7 @@ slot[name=swatch]::slotted(*),
 	}
 }
 
-slot[name=swatch-content] {
+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);