color-elements 0.0.3 → 0.0.5

package/src/space-picker/space-picker.css

@@ -1,9 +1,9 @@
 :host {
 	--border-width: 1px;
-	--border-color: rgb(0 0 0 / .2);
-	--border-radius: .2em;
+	--border-color: rgb(0 0 0 / 0.2);
+	--border-radius: 0.2em;
 
-	padding: .3em .5em;
+	padding: 0.3em 0.5em;
 
 	border-radius: var(--border-radius);
 	border: var(--border-width) solid var(--border-color);

package/src/space-picker/space-picker.js

@@ -3,7 +3,7 @@ import ColorElement from "../common/color-element.js";
 const Self = class SpacePicker extends ColorElement {
 	static tagName = "space-picker";
 	static url = import.meta.url;
-	static shadowStyle = true;
+	static styles = "./space-picker.css";
 	static shadowTemplate = `<select id="picker" part="base"></select>`;
 
 	constructor () {
@@ -29,11 +29,14 @@ const Self = class SpacePicker extends ColorElement {
 		}
 	}
 
-	propChangedCallback ({name, prop, detail: change}) {
+	propChangedCallback ({ name, prop, detail: change }) {
 		if (name === "spaces") {
 			if (!this.groups) {
 				this._el.picker.innerHTML = Object.entries(this.spaces)
-					.map(([id, space]) => `<option value="${ id }">${ this.getSpaceLabel(space) }</option>`)
+					.map(
+						([id, space]) =>
+							`<option value="${id}">${this.getSpaceLabel(space)}</option>`,
+					)
 					.join("\n");
 			}
 			else {
@@ -42,7 +45,9 @@ const Self = class SpacePicker extends ColorElement {
 				// Remove empty groups
 				groups = Object.entries(groups).filter(([type, spaces]) => {
 					if (Object.keys(spaces).length === 0) {
-						console.warn(`Removed empty group of color spaces with the label "${type}."`);
+						console.warn(
+							`Removed empty group of color spaces with the label "${type}."`,
+						);
 						return false;
 					}
 
@@ -50,17 +55,26 @@ const Self = class SpacePicker extends ColorElement {
 				});
 
 				if (!groups.length) {
-					console.warn("All provided groups of color spaces are empty. Falling back to default grouping.");
+					console.warn(
+						"All provided groups of color spaces are empty. Falling back to default grouping.",
+					);
 					groups = [["All spaces", this.spaces]];
 				}
 
-				this._el.picker.innerHTML = groups.map(([type, spaces]) => `
+				this._el.picker.innerHTML = groups
+					.map(
+						([type, spaces]) => `
 					<optgroup label="${type}">
 						${Object.entries(spaces)
-							.map(([id, space]) => `<option value="${ id }">${ this.getSpaceLabel(space) }</option>`)
+							.map(
+								([id, space]) =>
+									`<option value="${id}">${this.getSpaceLabel(space)}</option>`,
+							)
 							.join("\n")}
 					</optgroup>
-				`).join("\n");
+				`,
+					)
+					.join("\n");
 			}
 
 			this._el.picker.value = this.value;
@@ -76,7 +90,9 @@ const Self = class SpacePicker extends ColorElement {
 					let currentSpace = this._el.picker.value;
 					let fallback = spaces.includes(currentSpace) ? currentSpace : firstSpace;
 
-					console.warn(`No color space found with id = "${ value }". Choose one of the following: ${ spaces.join(", ") }. Falling back to "${ fallback }".`);
+					console.warn(
+						`No color space found with id = "${value}". Choose one of the following: ${spaces.join(", ")}. Falling back to "${fallback}".`,
+					);
 					this.value = value = fallback;
 				}
 
@@ -140,7 +156,9 @@ const Self = class SpacePicker extends ColorElement {
 				return value;
 			},
 			stringify (value) {
-				return Object.entries(value).map(([id, space]) => id).join(", ");
+				return Object.entries(value)
+					.map(([id, space]) => id)
+					.join(", ");
 			},
 		},
 
@@ -201,7 +219,7 @@ const Self = class SpacePicker extends ColorElement {
 		},
 	};
 
-	static formAssociated = {
+	static formBehavior = {
 		like: el => el._el.picker,
 		role: "combobox",
 		changeEvent: "change",

package/src/src.json

@@ -1,3 +1,3 @@
 {
 	"layout": "component"
-}
+}