@oscarpalmer/oui 0.39.0 → 0.41.0

package/dist/js/color-picker/color-picker.event.mjs

@@ -0,0 +1,233 @@
+import { COLOR_PICKER_ATTRIBUTE_COPY_ERROR, COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS, COLOR_PICKER_EXPRESSION_HEX_PREFIX, COLOR_PICKER_KEYS, COLOR_PICKER_SELECTOR_COPY, COLOR_PICKER_SELECTOR_INPUT, COLOR_PICKER_SELECTOR_OUTPUT_INPUT, COLOR_PICKER_SELECTOR_WELL, COLOR_PICKER_SELECTOR_WELL_KNOB, COLOR_PICKER_SYMBOL, COLOR_PICKER_TAGNAME } from "./color-picker.constants.mjs";
+import { copyValue } from "../internal/misc.mjs";
+import { OuiColorPickerEvent } from "./color-picker.model.mjs";
+import { getColorPickerOutputFormat, updateColorPickerOutputCopyLabel } from "./color-picker.output.mjs";
+import { setColorPickerValues } from "./color-picker.misc.mjs";
+import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
+import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { toggleStyles } from "@oscarpalmer/toretto/style";
+import { clamp } from "@oscarpalmer/atoms/number";
+import { supportsTouch } from "@oscarpalmer/toretto/touch";
+import { isHexColor } from "@oscarpalmer/atoms/color";
+//#region src/js/color-picker/color-picker.event.ts
+function cancelMove(parameters) {
+	parameters.state.component.color.value.hexa = parameters.value;
+	setColorPickerValues(parameters.state, true);
+	colorPickerMovement.parameters = void 0;
+	styleToggler.remove();
+}
+function onClick(event) {
+	const button = findAncestor(event, COLOR_PICKER_SELECTOR_COPY);
+	if (!(button instanceof HTMLButtonElement)) return;
+	setAttributes(button, {
+		[COLOR_PICKER_ATTRIBUTE_COPY_ERROR]: void 0,
+		[COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS]: void 0
+	});
+	const state = findAncestor(event, COLOR_PICKER_TAGNAME)?.[COLOR_PICKER_SYMBOL];
+	if (state == null || state.component.disabled) return;
+	const { component } = state;
+	const copy = button.dataset.color == null ? component.content.output?.copy : component.anchor.copy;
+	if (copy == null) return;
+	if (copy.timer != null) {
+		clearTimeout(copy.timer);
+		copy.timer = void 0;
+	}
+	const color = button.dataset.color ?? getColorPickerOutputFormat(state);
+	if (color == null) return;
+	let value;
+	switch (color) {
+		case "hex":
+			value = component.color.value.toHexString(component.alpha);
+			break;
+		case "hsl":
+			value = component.color.value.toHslString(component.alpha);
+			break;
+		case "hwb":
+			value = component.color.value.toHwbString(component.alpha);
+			break;
+		case "rgb": value = component.color.value.toRgbString(component.alpha);
+	}
+	if (value != null) copyValue(value, () => {
+		updateColorPickerCopy(copy, COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS);
+	}, () => {
+		updateColorPickerCopy(copy, COLOR_PICKER_ATTRIBUTE_COPY_ERROR);
+	});
+}
+function onColorPickerHue(state) {
+	const { component } = state;
+	const hue = component.content.hue.input.valueAsNumber;
+	component.color.value.hsla = {
+		...component.color.value.hsla,
+		hue
+	};
+	setColorPickerValues(state, false);
+}
+function onColorPickerInput(state) {
+	const { component } = state;
+	const { alpha, anchor, color, host } = component;
+	const value = anchor.input.value.replace(COLOR_PICKER_EXPRESSION_HEX_PREFIX, "");
+	if (value.toLowerCase() === (alpha ? color.value.hexa : color.value.hex).toLowerCase()) return;
+	component.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;
+	}
+	setColorPickerValues(state, false, anchor.input.value);
+	dispatch(host, new OuiColorPickerEvent("oui:input", color.value, valid));
+}
+function onColorPickerOpacity(state, input) {
+	state.component.color.value.alpha = input.valueAsNumber;
+	setColorPickerValues(state, false);
+}
+function onColorPickerOutputFormat(state) {
+	const { content } = state.component;
+	const { items, toggle } = content.output ?? {};
+	if (items == null || toggle == null) return;
+	const attribute = `${COLOR_PICKER_TAGNAME}-output-${toggle.value}`;
+	for (const item of items) item.hidden = !item.hasAttribute(attribute);
+	if (content.output?.copy != null) updateColorPickerOutputCopyLabel(state, content.output.copy.button);
+}
+function onColorPickerOutputValue(event, state) {
+	const input = findAncestor(event, COLOR_PICKER_SELECTOR_OUTPUT_INPUT);
+	if (!(input instanceof HTMLInputElement)) return;
+	const color = input.dataset.color;
+	const property = input.dataset.property;
+	if (color == null || property == null) return;
+	if (outputTimer != null) clearTimeout(outputTimer);
+	outputTimer = setTimeout(() => {
+		outputTimer = void 0;
+		state.component.color.value[color] = {
+			...state.component.color.value[color],
+			[property]: input.valueAsNumber
+		};
+		setColorPickerValues(state, false);
+	});
+}
+function onEnter(state) {
+	const { component, form } = state;
+	const { alpha, anchor, color } = component;
+	const input = anchor.input.value.replace(COLOR_PICKER_EXPRESSION_HEX_PREFIX, "");
+	const short = alpha ? input.length === 4 : input.length === 3;
+	if (isHexColor(input, alpha) && short) anchor.input.value = color.value.toHexString(alpha);
+	form.internals.form?.requestSubmit();
+}
+function onKeydown(event) {
+	if (colorPickerMovement.parameters != null && event.key === "Escape") {
+		cancelMove(colorPickerMovement.parameters);
+		return;
+	}
+	const knob = findAncestor(event, COLOR_PICKER_SELECTOR_WELL_KNOB);
+	if (!(event.key === "Enter" && findAncestor(event, COLOR_PICKER_SELECTOR_INPUT) != null || COLOR_PICKER_KEYS.has(event.key) && knob != null)) return;
+	const state = findAncestor(event, COLOR_PICKER_TAGNAME)?.[COLOR_PICKER_SYMBOL];
+	if (state == null || state.component.disabled || state.component.readonly) return;
+	event.preventDefault();
+	const { component } = state;
+	if (event.key === "Enter") {
+		onEnter(state);
+		return;
+	}
+	if (knob == null) return;
+	const modifier = event.shiftKey ? 10 : 1;
+	let { lightness, saturation } = component.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;
+	}
+	component.color.value.hsl = {
+		...state.component.color.value.hsl,
+		lightness: clamp(lightness, 0, 100),
+		saturation: clamp(saturation, 0, 100)
+	};
+	setColorPickerValues(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, COLOR_PICKER_SELECTOR_WELL);
+	if (well == null) return;
+	const element = findAncestor(event, COLOR_PICKER_TAGNAME);
+	if (element == null) return;
+	if (supportsTouch.value) event.preventDefault();
+	if (getEventPosition(event) == null) return;
+	const state = element?.[COLOR_PICKER_SYMBOL];
+	if (state == null || state.component.disabled || state.component.readonly) return;
+	colorPickerMovement.parameters = {
+		state,
+		rectangle: well.getBoundingClientRect(),
+		value: state.component.color.value.hexa
+	};
+	styleToggler.set();
+}
+function onPointermove(event) {
+	if (colorPickerMovement.parameters == null) return;
+	const position = getEventPosition(event);
+	if (position != null) updateColorPickerValues(colorPickerMovement.parameters, position);
+}
+function onPointerup(event) {
+	if (colorPickerMovement.parameters == null) return;
+	const position = getEventPosition(event);
+	if (position != null) updateColorPickerValues(colorPickerMovement.parameters, position);
+	colorPickerMovement.parameters = void 0;
+	styleToggler.remove();
+}
+function updateColorPickerCopy(copy, attribute) {
+	const { button } = copy;
+	setAttribute(button, attribute, "");
+	copy.timer = setTimeout(() => {
+		copy.timer = void 0;
+		setAttribute(button, attribute, void 0);
+	}, styleTime);
+}
+function updateColorPickerValues(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.component.color.value.hsl = {
+		...state.component.color.value.hsl,
+		lightness: (1 - top) * 100,
+		saturation: left * 100
+	};
+	setColorPickerValues(state, true);
+}
+const styleToggler = toggleStyles(document.body, {
+	touchAction: "none",
+	userSelect: "none",
+	webkitUserSelect: "none"
+});
+const colorPickerMovement = {};
+const styleTime = 2500;
+let outputTimer;
+on(document, "click", onClick);
+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 });
+//#endregion
+export { colorPickerMovement, onColorPickerHue, onColorPickerInput, onColorPickerOpacity, onColorPickerOutputFormat, onColorPickerOutputValue };

package/dist/js/color-picker/{form.color-picker.d.mts → color-picker.form.d.mts}

@@ -1,5 +1,5 @@
-import { L as OuiColorPickerState } from "../constants.color-picker-B-gFjL8m.mjs";
-//#region src/js/color-picker/form.color-picker.d.ts
+import { B as OuiColorPickerState } from "../color-picker.constants-BZgXQr5o.mjs";
+//#region src/js/color-picker/color-picker.form.d.ts
 export declare function updateColorPickerForm(state: OuiColorPickerState, valid: boolean): void;
 export declare function updateColorPickerValidity(state: OuiColorPickerState, valid: boolean): void;
 //#endregion

package/dist/js/color-picker/{form.color-picker.mjs → color-picker.form.mjs}

@@ -1,22 +1,23 @@
-import { getLocalization, localize } from "../l10n.mjs";
-import { OuiColorPickerEvent } from "./models.color-picker.mjs";
+import { OuiColorPickerEvent } from "./color-picker.model.mjs";
 import { dispatch } from "@oscarpalmer/toretto/event";
-//#region src/js/color-picker/form.color-picker.ts
+//#region src/js/color-picker/color-picker.form.ts
 function updateColorPickerForm(state, valid) {
-	const { color, host, internals, value } = state;
-	internals.setFormValue(valid ? value.current : "");
+	const { component, form } = state;
+	const { color, host, value } = component;
+	form.internals.setFormValue(valid ? value.current : "");
 	updateColorPickerValidity(state, valid);
 	dispatch(host, new OuiColorPickerEvent("oui:change", color.value, valid));
 }
 function updateColorPickerValidity(state, valid) {
-	const { anchor, host, internals, localizations } = state;
+	const { component, form } = state;
+	const { anchor, host, localizations } = component;
+	const { internals } = form;
 	if (valid) {
 		internals.setValidity({});
 		internals.checkValidity();
 		return;
 	}
-	const localization = getLocalization(localizations.global, host, "invalid", localizations.component);
-	const message = localization == null ? void 0 : localize(localization, {}, []);
+	const message = localizations.localize("invalid", { element: host });
 	internals.setValidity({ typeMismatch: true }, message, anchor.input);
 	internals.checkValidity();
 }

package/dist/js/color-picker/color-picker.misc.d.mts

@@ -0,0 +1,2 @@
+import { a as setColorPickerLocalizations, c as setColorPickerValues, i as setColorPickerDisabled, l as updateColorPickerLabels, n as getColorPickerOutput, o as setColorPickerRequired, r as getColorPickerValueType, s as setColorPickerValue, t as getColorPickerId } from "../color-picker.misc-BIS3R6jk.mjs";
+export { getColorPickerId, getColorPickerOutput, getColorPickerValueType, setColorPickerDisabled, setColorPickerLocalizations, setColorPickerRequired, setColorPickerValue, setColorPickerValues, updateColorPickerLabels };

package/dist/js/color-picker/color-picker.misc.mjs

@@ -0,0 +1,104 @@
+import { COLOR_PICKER_OUTPUTS, colorPickerLocalizations } from "./color-picker.constants.mjs";
+import { updateColorPickerForm, updateColorPickerValidity } from "./color-picker.form.mjs";
+import { updateColorPickerOutputInputs, updateColorPickerOutputLabels } from "./color-picker.output.mjs";
+import { setAria } from "@oscarpalmer/toretto/aria";
+import { getAttribute } from "@oscarpalmer/toretto/attribute";
+import { getForegroundColor, isHexColor, isHslColor, isHslaColor, isHwbColor, isHwbaColor, isRgbColor, isRgbaColor } from "@oscarpalmer/atoms/color";
+import { setProperty } from "@oscarpalmer/toretto/property";
+//#region src/js/color-picker/color-picker.misc.ts
+function getColorPickerId() {
+	index += 1;
+	return `oui_color_picker_${index}`;
+}
+function getColorPickerOutput(element) {
+	const attribute = getAttribute(element, "output");
+	return COLOR_PICKER_OUTPUTS.has(attribute) ? attribute : "none";
+}
+function getColorPickerValueType(state, value) {
+	const { alpha } = state.component;
+	switch (true) {
+		case isHexColor(value, alpha): return 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 setColorPickerLocalizations(first, second) {
+	if (second === true) colorPickerLocalizations.setDefaults(first);
+	else colorPickerLocalizations.setLanguages(first, second);
+}
+function setColorPickerDisabled(state, type, value) {
+	const { component } = state;
+	component[type] = value;
+	setAria(component.host, type, value);
+	component.anchor.input.readOnly = value;
+	setAria(component.anchor.input, type, value);
+	setProperty(component.content.hue.input, "disabled", component.disabled || component.readonly);
+	if (component.anchor.toggle != null) setAria(component.anchor.toggle, "disabled", component.disabled);
+	if (component.content.opacity != null) setProperty(component.content.opacity.input, "disabled", component.disabled || component.readonly);
+}
+function setColorPickerRequired(state, value) {
+	const { component } = state;
+	component.required = value;
+	setAria(component.host, "required", value);
+	setAria(component.anchor.input, "required", value);
+	updateColorPickerValidity(state, isHexColor(component.value.current, component.alpha));
+}
+function setColorPickerValue(state, value, type) {
+	if (state == null) return;
+	const actual = type ?? getColorPickerValueType(state, value);
+	if (actual == null || type != null && type !== actual) return;
+	state.component.color.value[actual] = value;
+	setColorPickerValues(state, true);
+}
+function setColorPickerValues(state, focus, input) {
+	const { component } = state;
+	const { anchor, color, content, host, style } = component;
+	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(component.alpha);
+	anchor.input.value = value;
+	content.hue.input.valueAsNumber = hue;
+	if (content.opacity != null) content.opacity.input.valueAsNumber = alpha;
+	component.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};
+}`;
+	updateColorPickerForm(state, isHexColor(component.value.current, component.alpha));
+	updateColorPickerOutputInputs(state);
+	updateColorPickerWell(state);
+	if (focus) content.well.knob.focus();
+}
+function updateColorPickerLabels(state) {
+	const { anchor, content, host, localizations } = state.component;
+	if (anchor.toggle != null) setAria(anchor.toggle, "label", localizations.localize("toggle", { element: host }));
+	content.hue.label.textContent = localizations.localize("hue", { element: host });
+	content.well.label.textContent = localizations.localize("wellLabel", { element: host });
+	updateColorPickerOutputLabels(state);
+	updateColorPickerWell(state);
+	if (content.opacity != null) content.opacity.label.textContent = localizations.localize("opacity", { element: host });
+}
+function updateColorPickerWell(state) {
+	const { color, content, host, localizations } = state.component;
+	const { lightness, saturation } = color.value.hsl;
+	setAria(content.well.knob, "valuetext", localizations.localize("wellValue", {
+		arguments: [lightness, saturation],
+		element: host
+	}));
+}
+let index = 0;
+//#endregion
+export { getColorPickerId, getColorPickerOutput, getColorPickerValueType, setColorPickerDisabled, setColorPickerLocalizations, setColorPickerRequired, setColorPickerValue, setColorPickerValues, updateColorPickerLabels };

package/dist/js/color-picker/color-picker.model.d.mts

@@ -0,0 +1,2 @@
+import { A as OuiColorPickerContentWell, B as OuiColorPickerState, C as GenericOuiColorPickerElement, D as OuiColorPickerContentHue, E as OuiColorPickerContent, F as OuiColorPickerMovement, H as OuiColorPickerValueType, I as OuiColorPickerMovementParameters, L as OuiColorPickerOutputColor, M as OuiColorPickerCreateParameters, N as OuiColorPickerEvent, O as OuiColorPickerContentOpacity, P as OuiColorPickerLocalizations, R as OuiColorPickerOutputColorProperty, T as OuiColorPickerColor, V as OuiColorPickerStateComponent, j as OuiColorPickerCopy, k as OuiColorPickerContentOutput, w as OuiColorPickerAnchor, z as OuiColorPickerOutputType } from "../color-picker.constants-BZgXQr5o.mjs";
+export { GenericOuiColorPickerElement, OuiColorPickerAnchor, OuiColorPickerColor, OuiColorPickerContent, OuiColorPickerContentHue, OuiColorPickerContentOpacity, OuiColorPickerContentOutput, OuiColorPickerContentWell, OuiColorPickerCopy, OuiColorPickerCreateParameters, OuiColorPickerEvent, OuiColorPickerLocalizations, OuiColorPickerMovement, OuiColorPickerMovementParameters, OuiColorPickerOutputColor, OuiColorPickerOutputColorProperty, OuiColorPickerOutputType, OuiColorPickerState, OuiColorPickerStateComponent, OuiColorPickerValueType };

package/dist/js/color-picker/{models.color-picker.mjs → color-picker.model.mjs}

@@ -1,4 +1,4 @@
-//#region src/js/color-picker/models.color-picker.ts
+//#region src/js/color-picker/color-picker.model.ts
 var OuiColorPickerEvent = class extends Event {
 	valid;
 	value;

package/dist/js/color-picker/{output.color-picker.d.mts → color-picker.output.d.mts}

@@ -1,5 +1,5 @@
-import { E as OuiColorPickerContentOutput, L as OuiColorPickerState, O as OuiColorPickerCopy, P as OuiColorPickerOutputColor, k as OuiColorPickerCreateParameters } from "../constants.color-picker-B-gFjL8m.mjs";
-//#region src/js/color-picker/output.color-picker.d.ts
+import { B as OuiColorPickerState, L as OuiColorPickerOutputColor, M as OuiColorPickerCreateParameters, j as OuiColorPickerCopy, k as OuiColorPickerContentOutput } from "../color-picker.constants-BZgXQr5o.mjs";
+//#region src/js/color-picker/color-picker.output.d.ts
 export declare function createColorPickerOutput(parameters: OuiColorPickerCreateParameters, copy: OuiColorPickerCopy | undefined): OuiColorPickerContentOutput | undefined;
 export declare function getColorPickerOutputFormat(state: OuiColorPickerState): OuiColorPickerOutputColor | undefined;
 export declare function updateColorPickerOutputCopyLabel(state: OuiColorPickerState, button: HTMLButtonElement): void;

package/dist/js/color-picker/{output.color-picker.mjs → color-picker.output.mjs}

@@ -1,9 +1,8 @@
-import { getLocalization, localize } from "../l10n.mjs";
-import { COLOR_PICKER_ATTRIBUTE_OUTPUT_INPUT, COLOR_PICKER_TAGNAME, colorPickerLocalizations } from "./constants.color-picker.mjs";
+import { COLOR_PICKER_ATTRIBUTE_OUTPUT_INPUT, COLOR_PICKER_TAGNAME, colorPickerLocalizations } from "./color-picker.constants.mjs";
 import { setAria } from "@oscarpalmer/toretto/aria";
-import { round } from "@oscarpalmer/atoms/math";
 import { createElement } from "@oscarpalmer/toretto/create";
-//#region src/js/color-picker/output.color-picker.ts
+import { round } from "@oscarpalmer/atoms/math";
+//#region src/js/color-picker/color-picker.output.ts
 function createColorPickerOutput(parameters, copy) {
 	if (parameters.output === "none") return;
 	const container = createElement("div", { attribute: { [`${COLOR_PICKER_TAGNAME}-output`]: "" } });
@@ -41,7 +40,7 @@ function createOutputFormat(parameters, copy) {
 		},
 		property: {
 			htmlFor: id,
-			textContent: colorPickerLocalizations.defaults.output
+			textContent: colorPickerLocalizations.values.defaults.output
 		}
 	});
 	const select = createElement("select", {
@@ -52,7 +51,7 @@ function createOutputFormat(parameters, copy) {
 		property: { id }
 	});
 	select.append(...colors.map((color) => createElement("option", { property: {
-		textContent: colorPickerLocalizations.defaults[color],
+		textContent: colorPickerLocalizations.values.defaults[color],
 		value: color
 	} })));
 	toggle.append(label, select);
@@ -71,7 +70,7 @@ function createOutputInput(color, property, value, parameters) {
 		data: { label: property },
 		property: {
 			htmlFor: id,
-			textContent: colorPickerLocalizations.defaults[property]
+			textContent: colorPickerLocalizations.values.defaults[property]
 		}
 	});
 	const input = createElement("input", {
@@ -101,7 +100,7 @@ function createOutputInput(color, property, value, parameters) {
 }
 function createOutputItem(color, parameters, copy, single, hidden) {
 	const item = createElement("div", {
-		aria: { label: colorPickerLocalizations.defaults[color] },
+		aria: { label: colorPickerLocalizations.values.defaults[color] },
 		data: { label: color },
 		attribute: {
 			[`${COLOR_PICKER_TAGNAME}-output-item`]: "",
@@ -137,24 +136,26 @@ function createOutputItems(parameters, copy) {
 	];
 }
 function getColorPickerOutputFormat(state) {
-	if (state.output === "none") return;
+	const { component } = state;
+	if (component.output === "none") return;
 	let color;
-	if (state.output === "all") color = state.content.output?.toggle?.value;
-	else color = state.output;
+	if (component.output === "all") color = component.content.output?.toggle?.value;
+	else color = component.output;
 	return color;
 }
 function updateColorPickerOutputCopyLabel(state, button) {
-	const { host, localizations } = state;
-	const prefix = localize(getLocalization(localizations.global, host, "copy", localizations.component), {}, []);
+	const { host, localizations } = state.component;
+	const prefix = localizations.localize("copy", { element: host });
 	const color = getColorPickerOutputFormat(state);
 	let content;
 	if (color == null) content = prefix;
-	else content = `${prefix} ${localize(getLocalization(localizations.global, host, color, localizations.component), {}, [])}`;
+	else content = `${prefix} ${localizations.localize(color, { element: host })}`;
 	setAria(button, "label", content);
 	button.textContent = prefix;
 }
 function updateColorPickerOutputInputs(state) {
-	const { content } = state;
+	const { component } = state;
+	const { content } = component;
 	if (content.output?.inputs == null) return;
 	const inputs = content.output.inputs;
 	const { length } = inputs;
@@ -162,11 +163,11 @@ function updateColorPickerOutputInputs(state) {
 		const input = inputs[index];
 		const color = input.dataset.color;
 		const property = input.dataset.property;
-		if (color != null && property != null) input.valueAsNumber = color in state.color.value && property in state.color.value[color] ? round(state.color.value[color][property]) : 0;
+		if (color != null && property != null) input.valueAsNumber = color in component.color.value && property in component.color.value[color] ? round(component.color.value[color][property]) : 0;
 	}
 }
 function updateColorPickerOutputLabels(state) {
-	const { content, host, localizations } = state;
+	const { content, host, localizations } = state.component;
 	if (content.output == null) return;
 	if (content.output.copy?.button != null) updateColorPickerOutputCopyLabel(state, content.output.copy.button);
 	for (let labelsIndex = 0; labelsIndex < labelsLength; labelsIndex += 1) {
@@ -174,7 +175,7 @@ function updateColorPickerOutputLabels(state) {
 		const elements = [...content.element.querySelectorAll(`[data-label="${label}"]`)];
 		const elementsLength = elements.length;
 		if (elementsLength === 0) return;
-		const textContent = localize(getLocalization(localizations.global, host, label, localizations.component), {}, []);
+		const textContent = localizations.localize(label, { element: host });
 		for (let elementsIndex = 0; elementsIndex < elementsLength; elementsIndex += 1) {
 			const element = elements[elementsIndex];
 			if (element instanceof HTMLLabelElement) element.textContent = textContent;

package/dist/js/color-picker/color-picker.state.d.mts

@@ -0,0 +1,8 @@
+import { B as OuiColorPickerState, C as GenericOuiColorPickerElement, V as OuiColorPickerStateComponent } from "../color-picker.constants-BZgXQr5o.mjs";
+//#region src/js/color-picker/color-picker.state.d.ts
+export declare function attachColorPicker(state: OuiColorPickerState): void;
+export declare function detachColorPicker(state: OuiColorPickerState): void;
+export declare function initializeColorPicker(colorPicker: GenericOuiColorPickerElement): void;
+export declare function initializeColorPickerComponent(element: GenericOuiColorPickerElement, state: OuiColorPickerState): OuiColorPickerStateComponent;
+export declare const colorPickers: Set<OuiColorPickerState>;
+//#endregion