@oscarpalmer/oui 0.36.0 → 0.38.0

package/dist/js/color-picker.mjs

@@ -0,0 +1,924 @@
+import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
+import { getLocalization, getLocalizations, localize, updateLocalizations } from "./l10n.mjs";
+import { getColor, getForegroundColor, isHexColor, isHslColor, isHslaColor, isHwbColor, isHwbaColor, isRgbColor, isRgbaColor } from "@oscarpalmer/atoms/color";
+import { round } from "@oscarpalmer/atoms/math";
+import { clamp } from "@oscarpalmer/atoms/number";
+import { getAria, setAria } from "@oscarpalmer/toretto/aria";
+import { getAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
+import { createElement } from "@oscarpalmer/toretto/create";
+import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { setProperty } from "@oscarpalmer/toretto/property";
+import { toggleStyles } from "@oscarpalmer/toretto/style";
+import supportsTouch from "@oscarpalmer/toretto/touch";
+//#region src/js/color-picker.ts
+var OuiColorPickerElement = class extends HTMLElement {
+	static formAssociated = true;
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"value"
+	];
+	#internals;
+	#restored;
+	#state;
+	/**
+	* Is the color picker disabled?
+	*/
+	get disabled() {
+		return this.#state?.disabled ?? false;
+	}
+	/**
+	* Should the color picker be disabled?
+	*/
+	set disabled(value) {
+		if (this.#state != null && typeof value === "boolean" && value !== this.#state.disabled) setDisabled(this.#state, "disabled", value);
+	}
+	/**
+	* Form element associated with the color picker
+	*/
+	get form() {
+		return this.#internals.form;
+	}
+	/**
+	* Color value as hexadecimal string
+	*/
+	get hex() {
+		return this.#state?.color.value.hex ?? "";
+	}
+	/**
+	* Set color value from a hexadecimal string
+	*/
+	set hex(value) {
+		setValue(this.#state, value, "hex");
+	}
+	/**
+	* Color value as hexadecimal string with alpha channel
+	*/
+	get hexa() {
+		return this.#state?.color.value.hexa ?? "";
+	}
+	/**
+	* Set color value from a hexadecimal string with alpha channel
+	*/
+	set hexa(value) {
+		setValue(this.#state, value, "hexa");
+	}
+	/**
+	* Color value as an _HSL_ color object
+	*/
+	get hsl() {
+		return this.#state?.color.value.hsl ?? {
+			hue: 0,
+			lightness: 0,
+			saturation: 0
+		};
+	}
+	/**
+	* Set color value from an _HSL_ color object
+	*/
+	set hsl(value) {
+		setValue(this.#state, value, "hsl");
+	}
+	/**
+	* Color value as an _HSLA_ color object _(HSL with alpha channel)_
+	*/
+	get hsla() {
+		return this.#state?.color.value.hsla ?? {
+			hue: 0,
+			lightness: 0,
+			saturation: 0,
+			alpha: 100
+		};
+	}
+	/**
+	* Set color value from an _HSLA_ color object _(HSL with alpha channel)_
+	*/
+	set hsla(value) {
+		setValue(this.#state, value, "hsla");
+	}
+	/**
+	* Color value as an _HWB_ color object
+	*/
+	get hwb() {
+		return this.#state?.color.value.hwb ?? {
+			hue: 0,
+			whiteness: 0,
+			blackness: 0
+		};
+	}
+	/**
+	* Set color value from an _HWB_ color object
+	*/
+	set hwb(value) {
+		setValue(this.#state, value, "hwb");
+	}
+	/**
+	* Color value as an _HWBA_ color object _(HWB with alpha channel)_
+	*/
+	get hwba() {
+		return this.#state?.color.value.hwba ?? {
+			hue: 0,
+			whiteness: 0,
+			blackness: 0,
+			alpha: 100
+		};
+	}
+	/**
+	* Set color value from an _HWBA_ color object _(HWB with alpha channel)_
+	*/
+	set hwba(value) {
+		setValue(this.#state, value, "hwba");
+	}
+	/**
+	* Text input value
+	*/
+	get input() {
+		return this.#state?.anchor.input.value ?? "";
+	}
+	/**
+	* Label elements associated with the color picker
+	*/
+	get labels() {
+		return this.#internals.labels;
+	}
+	/**
+	* Is the color picker readonly?
+	*/
+	get readonly() {
+		return this.#state?.readonly ?? false;
+	}
+	/**
+	* Should the color picker be readonly?
+	*/
+	set readonly(value) {
+		if (this.#state != null && typeof value === "boolean" && value !== this.#state.readonly) setDisabled(this.#state, "readonly", value);
+	}
+	/**
+	* Is the color picker required?
+	*/
+	get required() {
+		return this.#state?.required ?? false;
+	}
+	/**
+	* Should the color picker be required?
+	*/
+	set required(value) {
+		if (this.#state != null && typeof value === "boolean" && value !== this.#state.required) setRequired(this.#state, value);
+	}
+	/**
+	* Color value as an _RGB_ color object
+	*/
+	get rgb() {
+		return this.#state?.color.value.rgb ?? {
+			red: 0,
+			green: 0,
+			blue: 0
+		};
+	}
+	/**
+	* Set color value from an _RGB_ color object
+	*/
+	set rgb(value) {
+		setValue(this.#state, value, "rgb");
+	}
+	/**
+	* Color value as an _RGBA_ color object _(RGB with alpha channel)_
+	*/
+	get rgba() {
+		return this.#state?.color.value.rgba ?? {
+			red: 0,
+			green: 0,
+			blue: 0,
+			alpha: 100
+		};
+	}
+	/**
+	* Set color value from an _RGBA_ color object _(RGB with alpha channel)_
+	*/
+	set rgba(value) {
+		setValue(this.#state, value, "rgba");
+	}
+	/**
+	* Validation message for the color picker
+	*/
+	get validationMessage() {
+		return this.#internals.validationMessage;
+	}
+	/**
+	* Validity state for the color picker
+	*/
+	get validity() {
+		return this.#internals.validity;
+	}
+	/**
+	* Current color value
+	*/
+	get value() {
+		return this.#state?.value.current ?? "";
+	}
+	/**
+	* Set color value from a string, _HSL(A)_, _HWB(A)_, or _RGB(A)_ color object
+	*/
+	set value(value) {
+		if (typeof value === "string") {
+			this.#state.anchor.input.value = value;
+			onInput(this.#state);
+		} else setValue(this.#state, value);
+	}
+	/**
+	* Can the color picker be validated?
+	*/
+	get willValidate() {
+		return this.#internals.willValidate;
+	}
+	constructor() {
+		super();
+		this.#internals = this.attachInternals();
+	}
+	attributeChangedCallback(name, _, value) {
+		if (this.#state == null) return;
+		switch (name) {
+			case "disabled":
+				this.disabled = value != null;
+				break;
+			case "required":
+				this.required = value != null;
+				break;
+			case "value": this.value = value ?? "";
+		}
+	}
+	/**
+	* Check if the color picker is valid
+	*
+	* @returns `true` if the color picker is valid, otherwise `false`
+	*/
+	checkValidity() {
+		return this.#internals.checkValidity();
+	}
+	/**
+	* Clear the color picker's value
+	*/
+	clear() {
+		this.value = "";
+	}
+	connectedCallback() {
+		if (this.#state == null) this.#initialize();
+		else attach(this.#state);
+	}
+	disconnectedCallback() {
+		if (this.#state != null) detach(this.#state);
+	}
+	formDisabledCallback(disabled) {
+		this.disabled = disabled;
+	}
+	formResetCallback() {
+		this.value = this.#state?.value.initial ?? "";
+	}
+	formStateRestoreCallback(state, reason) {
+		if (reason !== "restore" || typeof state !== "string" || this.#state == null) return;
+		if (this.#state == null) this.#restored = state;
+		else this.value = state;
+	}
+	/**
+	* Check if the color picker is valid and report any validation errors
+	*
+	* @returns `true` if the color picker is valid, otherwise `false`
+	*/
+	reportValidity() {
+		return this.#internals.reportValidity();
+	}
+	/**
+	* Set a custom validation message for the color picker
+	*
+	* @param message Validation message
+	*/
+	setCustomValidity(message) {
+		this.#internals.setValidity({ customError: message !== "" }, message, this);
+	}
+	setLocalizations(first, second) {
+		updateColorPickerLocalizations(localizations, this.#state.localizations.component, first, second);
+	}
+	#initialize() {
+		this.#state = initialize(this, this.#internals);
+		if (this.#restored != null) {
+			this.value = this.#restored;
+			this.#restored = void 0;
+		}
+	}
+};
+var OuiColorPickerEvent = class extends Event {
+	valid;
+	value;
+	constructor(type, color, valid) {
+		super(type, {
+			bubbles: true,
+			cancelable: true
+		});
+		this.valid = valid;
+		this.value = {
+			hex: color.hex,
+			hexa: color.hexa,
+			hsl: color.hsl,
+			hsla: color.hsla,
+			hwb: color.hwb,
+			hwba: color.hwba,
+			rgb: color.rgb,
+			rgba: color.rgba
+		};
+	}
+};
+function attach(state) {
+	const { anchor, content, host, id, inline, input, label, listeners, style } = state;
+	if (!inline) {
+		state.floatable = createEmbeddedFloatable(anchor.container ?? anchor.container, content.element, {
+			position: "below-start",
+			reusable: false
+		});
+		state.floatable.update();
+	}
+	const labelId = `${id}_label`;
+	setAria(host, {
+		describedby: getAria(input, "describedby"),
+		labelledby: labelId
+	});
+	setAttributes(host, { name: input.name === "" ? input.id : input.name });
+	label.element.htmlFor = anchor.input.id;
+	label.element.id = labelId;
+	if (anchor.button != null) setAria(anchor.button, "expanded", false);
+	input.before(style, anchor.container, content.element);
+	input.remove();
+	listeners.push(on(host, "focusout", () => {
+		setTimeout(() => {
+			if (moved == null && !host.contains(document.activeElement)) state.floatable?.hide();
+		});
+	}), on(anchor.input, "change", () => {
+		onInput(state);
+	}), on(anchor.input, "input", () => {
+		onInput(state);
+	}), on(content.element, "beforetoggle", (event) => {
+		if (state.disabled) event.preventDefault();
+	}, { passive: false }), on(content.element, "toggle", (event) => {
+		const open = event.newState === "open";
+		if (anchor.button != null) setAria(anchor.button, "expanded", open);
+		if (open) content.well.knob.focus();
+	}), on(content.hue.input, "input", () => {
+		onHue(state);
+	}));
+	if (content.opacity != null) listeners.push(on(content.opacity.input, "input", () => {
+		onOpacity(state);
+	}));
+	instances.set(host, state);
+	states.add(state);
+}
+function cancelMove(parameters) {
+	parameters.state.color.value.hexa = parameters.value;
+	setValues(parameters.state, true);
+	moved = void 0;
+	styleToggler.remove();
+}
+function createAnchor(parameters) {
+	const { alpha, color, id, inline } = parameters;
+	const container = createElement("div", { attribute: { [`${TAGNAME}-anchor`]: "" } });
+	const input = createElement("input", {
+		attribute: {
+			[`${TAGNAME}-input`]: "",
+			autocomplete: "off",
+			autocorrect: "off",
+			form: "",
+			inputmode: "text",
+			placeholder: parameters.input.placeholder,
+			spellcheck: "false"
+		},
+		property: {
+			id,
+			type: "text",
+			value: alpha ? color.hexa : color.hex
+		}
+	});
+	let button;
+	if (!inline) button = createElement("button", {
+		aria: { label: "" },
+		attribute: {
+			[`${TAGNAME}-button`]: "",
+			popovertarget: `${id}_content`
+		},
+		property: { type: "button" }
+	});
+	container.append(input);
+	if (button != null) container.append(button);
+	return {
+		button,
+		container,
+		input
+	};
+}
+function createContent(parameters) {
+	const { id, inline } = parameters;
+	const element = createElement("div", {
+		attribute: {
+			[`${TAGNAME}-content`]: "",
+			popover: inline ? void 0 : ""
+		},
+		property: { id: `${id}_content` }
+	});
+	const hue = createHue(parameters);
+	const opacity = createOpacity(parameters);
+	const well = createWell(parameters);
+	element.append(well.element, hue.container);
+	if (opacity != null) element.append(opacity.container);
+	return {
+		element,
+		hue,
+		opacity,
+		well
+	};
+}
+function createHue(parameters) {
+	const { color, id } = parameters;
+	const container = createElement("div", { attribute: { [`${TAGNAME}-hue`]: "" } });
+	const label = createElement("label", {
+		attribute: { [`${TAGNAME}-hue-label`]: "" },
+		property: {
+			htmlFor: `${id}_hue`,
+			id: `${id}_hue_label`
+		}
+	});
+	const input = createElement("input", {
+		aria: { labelledby: `${id}_label ${label.id}` },
+		attribute: {
+			[`${TAGNAME}-hue-input`]: "",
+			form: "",
+			inputmode: "numeric",
+			max: 360,
+			min: 0
+		},
+		property: {
+			id: `${id}_hue`,
+			type: "range",
+			value: color.hsl.hue.toString()
+		}
+	});
+	const knob = createElement("span", {
+		aria: { hidden: true },
+		attribute: { [`${TAGNAME}-hue-knob`]: "" }
+	});
+	const track = createElement("div", {
+		aria: { hidden: true },
+		attribute: { [`${TAGNAME}-hue-track`]: "" }
+	});
+	track.append(knob);
+	container.append(label, input, track);
+	return {
+		container,
+		input,
+		knob,
+		label,
+		track
+	};
+}
+function createOpacity(parameters) {
+	const { alpha, color, id } = parameters;
+	if (!alpha) return;
+	const container = createElement("div", { attribute: { [`${TAGNAME}-opacity`]: "" } });
+	const label = createElement("label", {
+		attribute: { [`${TAGNAME}-opacity-label`]: "" },
+		property: {
+			htmlFor: `${id}_opacity`,
+			id: `${id}_opacity_label`
+		}
+	});
+	const input = createElement("input", {
+		aria: { labelledby: `${id}_label ${label.id}` },
+		attribute: {
+			[`${TAGNAME}-opacity-input`]: "",
+			form: "",
+			max: 100,
+			min: 0
+		},
+		property: {
+			id: `${id}_opacity`,
+			type: "range",
+			value: color.alpha.toString()
+		}
+	});
+	const knob = createElement("span", {
+		aria: { hidden: true },
+		attribute: { [`${TAGNAME}-opacity-knob`]: "" }
+	});
+	const track = createElement("div", {
+		aria: { hidden: true },
+		attribute: { [`${TAGNAME}-opacity-track`]: "" }
+	});
+	track.append(knob);
+	container.append(label, input, track);
+	return {
+		container,
+		input,
+		label
+	};
+}
+function createWell(parameters) {
+	const { id } = parameters;
+	const element = createElement("div", { attribute: { [ATTRIBUTE_WELL]: "" } });
+	const label = createElement("span", { property: {
+		id: `${id}_well_label`,
+		hidden: true
+	} });
+	const knob = createElement("span", {
+		aria: { labelledby: `${id}_label ${label.id}` },
+		attribute: { [ATTRIBUTE_WELL_KNOB]: "" },
+		property: {
+			role: "slider",
+			tabIndex: 0
+		}
+	});
+	element.append(label, knob);
+	return {
+		element,
+		knob,
+		label
+	};
+}
+function detach(state) {
+	const { anchor, content, floatable, host, input, label, style } = state;
+	floatable?.destroy();
+	setAria(host, {
+		describedby: void 0,
+		labelledby: void 0
+	});
+	setAttributes(host, { name: void 0 });
+	label.element.htmlFor = input.id;
+	label.element.id = label.id;
+	anchor.container.before(input);
+	anchor.container.remove();
+	content.element.remove();
+	style.remove();
+	const listeners = state.listeners.splice(0);
+	const { length } = listeners;
+	for (let index = 0; index < length; index += 1) listeners[index]();
+	instances.set(host, state);
+	states.add(state);
+}
+function getId() {
+	index += 1;
+	return `oui_color_picker_${index}`;
+}
+function getOutput(element) {
+	const attribute = getAttribute(element, "output");
+	return OUTPUTS.has(attribute) ? attribute : "none";
+}
+function getValueType(state, value) {
+	switch (true) {
+		case isHexColor(value, state.alpha): return state.alpha ? "hexa" : "hex";
+		case isHslColor(value): return "hsl";
+		case isHslaColor(value): return "hsla";
+		case isHwbColor(value): return "hwb";
+		case isHwbaColor(value): return "hwba";
+		case isRgbColor(value): return "rgb";
+		case isRgbaColor(value): return "rgba";
+	}
+}
+function initialize(element, internals) {
+	const input = element.querySelector("input");
+	if (input == null || !TYPES.has(input.type)) throw new Error(MESSAGE_INPUT);
+	const label = element.querySelector(`label[for="${input.id}"]`);
+	if (label == null) throw new Error(MESSAGE_LABEL);
+	element.id = input.id;
+	const id = getId();
+	const labelId = label.id;
+	const alpha = element.hasAttribute("alpha");
+	const color = getColor(input.value);
+	const disabled = element.hasAttribute("disabled") || input.disabled;
+	const inline = element.hasAttribute("inline");
+	const output = getOutput(element);
+	const readonly = element.hasAttribute("readonly") || input.readOnly;
+	const required = element.hasAttribute("required") || input.required;
+	const parameters = {
+		alpha,
+		color,
+		id,
+		inline,
+		input,
+		output
+	};
+	const anchor = createAnchor(parameters);
+	const content = createContent(parameters);
+	const formatted = color.toHexString(alpha);
+	const state = {
+		alpha,
+		anchor,
+		content,
+		disabled,
+		id,
+		inline,
+		input,
+		internals,
+		output,
+		readonly,
+		required,
+		color: {
+			foreground: "",
+			value: color
+		},
+		host: element,
+		label: {
+			element: label,
+			id: labelId
+		},
+		listeners: [],
+		localizations: {
+			component: {},
+			global: localizations
+		},
+		style: createElement("style"),
+		value: {
+			current: formatted,
+			initial: formatted
+		}
+	};
+	attach(state);
+	setAttributes(element, {
+		output,
+		alpha: alpha ? "" : void 0,
+		inline: inline ? "" : void 0
+	});
+	setDisabled(state, "disabled", disabled);
+	setDisabled(state, "readonly", readonly);
+	setRequired(state, required);
+	setValues(state, false);
+	updateLabels(state);
+	updateValidity(state, isHexColor(state.value.current, alpha));
+	return state;
+}
+function onEnter(state) {
+	const { alpha, anchor, color, internals } = state;
+	const input = anchor.input.value.replace(EXPRESSION_HEX_PREFIX, "");
+	const short = alpha ? input.length === 4 : input.length === 3;
+	if (isHexColor(input, alpha) && short) anchor.input.value = color.value.toHexString(alpha);
+	internals.form?.requestSubmit();
+}
+function onHue(state) {
+	const hue = state.content.hue.input.valueAsNumber;
+	state.color.value.hsla = {
+		...state.color.value.hsla,
+		hue
+	};
+	setValues(state, false);
+}
+function onInput(state) {
+	const { alpha, anchor, color, host } = state;
+	const value = anchor.input.value.replace(EXPRESSION_HEX_PREFIX, "");
+	if (value.toLowerCase() === (alpha ? color.value.hexa : color.value.hex).toLowerCase()) return;
+	state.value.current = anchor.input.value;
+	const { length } = value;
+	let valid;
+	if (alpha) valid = isHexColor(value, true) && (length === 4 || length === 8);
+	else valid = isHexColor(value) && (length === 3 || length === 6);
+	if (valid) {
+		if (length === 3 || length === 6) color.value.hex = value;
+		else color.value.hexa = value;
+	}
+	setValues(state, false, anchor.input.value);
+	dispatch(host, new OuiColorPickerEvent("oui:input", color.value, valid));
+}
+function onKeydown(event) {
+	if (moved != null && event.key === "Escape") {
+		cancelMove(moved);
+		return;
+	}
+	const knob = findAncestor(event, SELECTOR_WELL_KNOB);
+	if (!(event.key === "Enter" && findAncestor(event, SELECTOR_INPUT) != null || KEYS.has(event.key) && knob != null)) return;
+	const state = instances.get(findAncestor(event, TAGNAME));
+	if (state == null || state.disabled || state.readonly) return;
+	event.preventDefault();
+	if (event.key === "Enter") {
+		onEnter(state);
+		return;
+	}
+	if (knob == null) return;
+	const modifier = event.shiftKey ? 10 : 1;
+	let { lightness, saturation } = state.color.value.hsl;
+	switch (event.key) {
+		case "ArrowDown":
+			lightness -= 1 * modifier;
+			break;
+		case "ArrowLeft":
+			saturation -= 1 * modifier;
+			break;
+		case "ArrowRight":
+			saturation += 1 * modifier;
+			break;
+		case "ArrowUp":
+			lightness += 1 * modifier;
+			break;
+		case "End":
+			lightness = 0;
+			break;
+		case "Home":
+			lightness = 100;
+			break;
+		case "PageDown":
+			lightness -= 10;
+			break;
+		case "PageUp": lightness += 10;
+	}
+	state.color.value.hsl = {
+		...state.color.value.hsl,
+		lightness: clamp(lightness, 0, 100),
+		saturation: clamp(saturation, 0, 100)
+	};
+	setValues(state, false);
+}
+function onOpacity(state) {
+	const opacity = state.content.opacity?.input.valueAsNumber;
+	if (opacity == null) return;
+	state.color.value.alpha = opacity;
+	setValues(state, false);
+}
+function onPointerdown(event) {
+	if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || (supportsTouch.value ? event.type === "mousedown" : event.type === "touchstart" || event.button !== 0)) return;
+	const well = findAncestor(event, SELECTOR_WELL);
+	if (well == null) return;
+	const element = findAncestor(event, TAGNAME);
+	if (element == null) return;
+	if (supportsTouch.value) event.preventDefault();
+	if (getEventPosition(event) == null) return;
+	const state = instances.get(element);
+	if (state == null || state.disabled || state.readonly) return;
+	moved = {
+		state,
+		rectangle: well.getBoundingClientRect(),
+		value: state.color.value.hexa
+	};
+	styleToggler.set();
+}
+function onPointermove(event) {
+	if (moved == null) return;
+	const position = getEventPosition(event);
+	if (position != null) updateValues(moved, position);
+}
+function onPointerup(event) {
+	if (moved == null) return;
+	const position = getEventPosition(event);
+	if (position != null) updateValues(moved, position);
+	moved = void 0;
+	styleToggler.remove();
+}
+function setColorPickerLocalizations(first, second) {
+	updateColorPickerLocalizations(localizations, localizations.values, first, second);
+}
+function setDisabled(state, type, value) {
+	state[type] = value;
+	setAria(state.host, type, value);
+	state.anchor.input.readOnly = value;
+	setAria(state.anchor.input, type, value);
+	setProperty(state.content.hue.input, "disabled", state.disabled || state.readonly);
+	if (state.anchor.button != null) setAria(state.anchor.button, "disabled", state.disabled);
+	if (state.content.opacity != null) setProperty(state.content.opacity.input, "disabled", state.disabled || state.readonly);
+}
+function setRequired(state, value) {
+	state.required = value;
+	setAria(state.host, "required", value);
+	setAria(state.anchor.input, "required", value);
+	updateValidity(state, isHexColor(state.value.current, state.alpha));
+}
+function setValue(state, value, type) {
+	if (state == null) return;
+	const actual = type ?? getValueType(state, value);
+	if (actual == null || type != null && type !== actual) return;
+	state.color.value[actual] = value;
+	setValues(state, true);
+}
+function setValues(state, focus, input) {
+	const { anchor, color, content, host, style } = state;
+	color.foreground = getForegroundColor(color.value).hex;
+	const { alpha, hex, hsl, rgb } = color.value;
+	const { hue, lightness, saturation } = hsl;
+	const { blue, green, red } = rgb;
+	const value = input ?? color.value.toHexString(state.alpha);
+	anchor.input.value = value;
+	content.hue.input.valueAsNumber = hue;
+	if (content.opacity != null) content.opacity.input.valueAsNumber = alpha;
+	state.value.current = value;
+	style.textContent = `#${host.id} {
+	--oui-color-picker-alpha: ${alpha};
+	--oui-color-picker-blue: ${blue};
+	--oui-color-picker-green: ${green};
+	--oui-color-picker-foreground: #${color.foreground};
+	--oui-color-picker-hex: #${hex};
+	--oui-color-picker-hue: ${hue};
+	--oui-color-picker-lightness: ${lightness};
+	--oui-color-picker-red: ${red};
+	--oui-color-picker-saturation: ${saturation};
+}`;
+	updateForm(state, isHexColor(state.value.current, state.alpha));
+	updateWell(state);
+	if (focus) content.well.knob.focus();
+}
+function updateForm(state, valid) {
+	const { color, host, internals, value } = state;
+	internals.setFormValue(valid ? value.current : "");
+	updateValidity(state, valid);
+	dispatch(host, new OuiColorPickerEvent("oui:change", color.value, valid));
+}
+function updateLabels(state) {
+	const { anchor, content, host, localizations } = state;
+	const { component, global } = localizations;
+	if (anchor.button != null) setAria(anchor.button, "label", localize(getLocalization(global, host, "toggle", component), {}, []));
+	content.hue.label.textContent = localize(getLocalization(global, host, "hue", component), {}, []);
+	content.well.label.textContent = localize(getLocalization(global, host, "lightnessSaturationLabel", component), {}, []);
+	updateWell(state);
+	if (content.opacity != null) content.opacity.label.textContent = localize(getLocalization(global, host, "opacity", component), {}, []);
+}
+function updateColorPickerLocalizations(instance, destination, first, second) {
+	updateLocalizations(instance, typeof first === "string" ? { [first]: second } : first, destination, () => {
+		for (const state of states) updateLabels(state);
+	});
+}
+function updateValidity(state, valid) {
+	const { anchor, host, internals, localizations } = state;
+	if (valid) {
+		internals.setValidity({});
+		internals.checkValidity();
+		return;
+	}
+	const localization = getLocalization(localizations.global, host, "invalid", localizations.component);
+	const message = localization == null ? void 0 : localize(localization, {}, []);
+	internals.setValidity({ typeMismatch: true }, message, anchor.input);
+	internals.checkValidity();
+}
+function updateValues(parameters, position) {
+	const { rectangle, state } = parameters;
+	const { x, y } = position;
+	const top = clamp((y - rectangle.top) / rectangle.height, 0, 1);
+	const left = clamp((x - rectangle.left) / rectangle.width, 0, 1);
+	state.color.value.hsl = {
+		...state.color.value.hsl,
+		lightness: (1 - top) * 100,
+		saturation: left * 100
+	};
+	setValues(state, true);
+}
+function updateWell(state) {
+	const { color, content, host, localizations } = state;
+	const { component, global } = localizations;
+	const { lightness, saturation } = color.value.hsl;
+	setAria(content.well.knob, "valuetext", localize(getLocalization(global, host, "lightnessSaturationValue", component), {
+		lightness,
+		saturation
+	}, [lightness, saturation]));
+}
+const TAGNAME = "oui-color-picker";
+const ATTRIBUTE_INPUT = `${TAGNAME}-input`;
+const ATTRIBUTE_WELL = `${TAGNAME}-well`;
+const ATTRIBUTE_WELL_KNOB = `${TAGNAME}-well-knob`;
+const EXPRESSION_HEX_PREFIX = /^#/;
+const KEYS = /* @__PURE__ */ new Set([
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"End",
+	"Home",
+	"PageDown",
+	"PageUp"
+]);
+const MESSAGE_INPUT = `<${TAGNAME}> must contain a valid <input> element`;
+const MESSAGE_LABEL = `<${TAGNAME}> must contain a <label> element for the <input> element`;
+const OUTPUTS = /* @__PURE__ */ new Set([
+	"all",
+	"none",
+	"hsl",
+	"rgb"
+]);
+const SELECTOR_INPUT = `[${ATTRIBUTE_INPUT}]`;
+const SELECTOR_WELL = `[${ATTRIBUTE_WELL}]`;
+const SELECTOR_WELL_KNOB = `[${ATTRIBUTE_WELL_KNOB}]`;
+const TYPES = /* @__PURE__ */ new Set(["color", "text"]);
+const instances = /* @__PURE__ */ new WeakMap();
+const localizations = getLocalizations({
+	hue: "Hue",
+	invalid: "Please enter or select a color",
+	lightnessSaturationLabel: "Lightness and saturation",
+	lightnessSaturationValue: (lightness, saturation) => `Lightness: ${round(lightness, 1)}%, saturation: ${round(saturation, 1)}%`,
+	opacity: "Opacity",
+	toggle: "Toggle color picker"
+});
+const states = /* @__PURE__ */ new Set();
+const styleToggler = toggleStyles(document.body, {
+	touchAction: "none",
+	userSelect: "none",
+	webkitUserSelect: "none"
+});
+let index = 0;
+let moved;
+on(document, "keydown", onKeydown, { passive: false });
+on(document, "mousedown", onPointerdown);
+on(document, "pointermove", onPointermove);
+on(document, "pointerup", onPointerup);
+on(document, "touchcancel", onPointerup);
+on(document, "touchstart", onPointerdown, { passive: false });
+customElements.define(TAGNAME, OuiColorPickerElement);
+//#endregion
+export { OuiColorPickerElement, OuiColorPickerEvent, setColorPickerLocalizations };