@oscarpalmer/oui 0.40.0 → 0.41.0

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

@@ -1,2 +1,233 @@
-import { a as onColorPickerOutputFormat, i as onColorPickerOpacity, n as onColorPickerHue, o as onColorPickerOutputValue, r as onColorPickerInput, t as colorPickerMovement } from "../color-picker.event-Cksj5TvS.mjs";
+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/color-picker.form.d.mts

@@ -1,4 +1,4 @@
-import { z as OuiColorPickerState } from "../color-picker.constants-D1mxw_Le.mjs";
+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;

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

@@ -1,4 +1,3 @@
-import { getLocalization, localize } from "../l10n/index.mjs";
 import { OuiColorPickerEvent } from "./color-picker.model.mjs";
 import { dispatch } from "@oscarpalmer/toretto/event";
 //#region src/js/color-picker/color-picker.form.ts
@@ -18,8 +17,7 @@ function updateColorPickerValidity(state, valid) {
 		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

@@ -1,2 +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, u as updateColorPickerLocalizations } from "../color-picker.misc-CtsXGrOe.mjs";
-export { getColorPickerId, getColorPickerOutput, getColorPickerValueType, setColorPickerDisabled, setColorPickerLocalizations, setColorPickerRequired, setColorPickerValue, setColorPickerValues, updateColorPickerLabels, updateColorPickerLocalizations };
+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

@@ -1,2 +1,104 @@
-import { c as getColorPickerOutput, d as setColorPickerLocalizations, f as setColorPickerRequired, g as updateColorPickerLocalizations, h as updateColorPickerLabels, l as getColorPickerValueType, m as setColorPickerValues, p as setColorPickerValue, s as getColorPickerId, u as setColorPickerDisabled } from "../color-picker.event-Cksj5TvS.mjs";
-export { getColorPickerId, getColorPickerOutput, getColorPickerValueType, setColorPickerDisabled, setColorPickerLocalizations, setColorPickerRequired, setColorPickerValue, setColorPickerValues, updateColorPickerLabels, updateColorPickerLocalizations };
+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

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

@@ -1,4 +1,4 @@
-import { A as OuiColorPickerCopy, I as OuiColorPickerOutputColor, O as OuiColorPickerContentOutput, j as OuiColorPickerCreateParameters, z as OuiColorPickerState } from "../color-picker.constants-D1mxw_Le.mjs";
+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;

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

@@ -1,4 +1,3 @@
-import { getLocalization, localize } from "../l10n/index.mjs";
 import { COLOR_PICKER_ATTRIBUTE_OUTPUT_INPUT, COLOR_PICKER_TAGNAME, colorPickerLocalizations } from "./color-picker.constants.mjs";
 import { setAria } from "@oscarpalmer/toretto/aria";
 import { createElement } from "@oscarpalmer/toretto/create";
@@ -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`]: "",
@@ -146,11 +145,11 @@ function getColorPickerOutputFormat(state) {
 }
 function updateColorPickerOutputCopyLabel(state, button) {
 	const { host, localizations } = state.component;
-	const prefix = localize(getLocalization(localizations.global, host, "copy", localizations.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;
 }
@@ -176,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

@@ -1,4 +1,4 @@
-import { B as OuiColorPickerStateComponent, S as GenericOuiColorPickerElement, z as OuiColorPickerState } from "../color-picker.constants-D1mxw_Le.mjs";
+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;

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

@@ -1,2 +1,168 @@
-import { _ as attachColorPicker, b as initializeColorPicker, v as colorPickers, x as initializeColorPickerComponent, y as detachColorPicker } from "../color-picker.event-Cksj5TvS.mjs";
+import { createEmbeddedFloatable } from "../floatable/floatable.embedded.mjs";
+import { createLocalizations } from "../internal/l10n/index.mjs";
+import { COLOR_PICKER_INPUT_TYPES, COLOR_PICKER_MESSAGE_INPUT, COLOR_PICKER_MESSAGE_LABEL, COLOR_PICKER_SYMBOL, colorPickerLocalizations } from "./color-picker.constants.mjs";
+import { updateColorPickerValidity } from "./color-picker.form.mjs";
+import { getColorPickerId, getColorPickerOutput, setColorPickerDisabled, setColorPickerRequired, setColorPickerValues, updateColorPickerLabels } from "./color-picker.misc.mjs";
+import { colorPickerMovement, onColorPickerHue, onColorPickerInput, onColorPickerOpacity, onColorPickerOutputFormat, onColorPickerOutputValue } from "./color-picker.event.mjs";
+import { createColorPickerAnchor, createColorPickerContent } from "./color-picker.dom.mjs";
+import { getAria, setAria } from "@oscarpalmer/toretto/aria";
+import { setAttributes } from "@oscarpalmer/toretto/attribute";
+import { on } from "@oscarpalmer/toretto/event";
+import { createElement } from "@oscarpalmer/toretto/create";
+import { getColor, isHexColor } from "@oscarpalmer/atoms/color";
+//#region src/js/color-picker/color-picker.state.ts
+function attachColorPicker(state) {
+	const { component } = state;
+	const { anchor, content, host, id, inline, input, label, listeners, style } = state.component;
+	if (!inline) {
+		component.floatable = createEmbeddedFloatable(anchor.container ?? anchor.container, content.element, {
+			position: "below-start",
+			reusable: false
+		});
+		component.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.toggle != null) setAria(anchor.toggle, "expanded", false);
+	input.before(style, anchor.container, content.element);
+	input.remove();
+	listeners.push(on(host, "focusout", () => {
+		setTimeout(() => {
+			if (colorPickerMovement.parameters == null && !host.contains(document.activeElement)) component.floatable?.hide();
+		});
+	}), on(anchor.input, "change", () => {
+		onColorPickerInput(state);
+	}), on(anchor.input, "input", () => {
+		onColorPickerInput(state);
+	}), on(content.element, "beforetoggle", (event) => {
+		if (component.disabled) event.preventDefault();
+	}, { passive: false }), on(content.element, "toggle", (event) => {
+		const open = event.newState === "open";
+		if (anchor.toggle != null) setAria(anchor.toggle, "expanded", open);
+		if (open) content.well.knob.focus();
+	}), on(content.hue.input, "input", () => {
+		onColorPickerHue(state);
+	}));
+	if (content.opacity != null) listeners.push(on(content.opacity.input, "input", () => {
+		onColorPickerOpacity(state, content.opacity.input);
+	}), on(content.opacity.range, "input", () => {
+		onColorPickerOpacity(state, content.opacity.range);
+	}));
+	if (content.output?.toggle != null) listeners.push(on(content.element, "change", (event) => {
+		onColorPickerOutputValue(event, state);
+	}), on(content.element, "input", (event) => {
+		onColorPickerOutputValue(event, state);
+	}), on(content.output.toggle, "change", () => {
+		onColorPickerOutputFormat(state);
+	}));
+	colorPickers.add(state);
+}
+function detachColorPicker(state) {
+	const { component } = state;
+	const { anchor, content, floatable, host, input, label, style } = component;
+	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 = component.listeners.splice(0);
+	const { length } = listeners;
+	for (let index = 0; index < length; index += 1) listeners[index]();
+	colorPickers.delete(state);
+}
+function initializeColorPicker(colorPicker) {
+	const state = colorPicker[COLOR_PICKER_SYMBOL];
+	colorPicker[COLOR_PICKER_SYMBOL].component = initializeColorPickerComponent(colorPicker, state);
+	if (state.form.restored != null) {
+		colorPicker.value = state.form.restored;
+		state.form.restored = void 0;
+	}
+}
+function initializeColorPickerComponent(element, state) {
+	const input = element.querySelector("input");
+	if (input == null || !COLOR_PICKER_INPUT_TYPES.has(input.type)) throw new Error(COLOR_PICKER_MESSAGE_INPUT);
+	const label = element.querySelector(`label[for="${input.id}"]`);
+	if (!(label instanceof HTMLLabelElement)) throw new Error(COLOR_PICKER_MESSAGE_LABEL);
+	element.id = input.id;
+	const id = getColorPickerId();
+	const labelId = label.id;
+	const alpha = element.hasAttribute("alpha");
+	const color = getColor(input.value);
+	const copy = element.hasAttribute("copy");
+	const disabled = element.hasAttribute("disabled") || input.disabled;
+	const inline = element.hasAttribute("inline");
+	const output = getColorPickerOutput(element);
+	const readonly = element.hasAttribute("readonly") || input.readOnly;
+	const required = element.hasAttribute("required") || input.required;
+	const parameters = {
+		alpha,
+		color,
+		copy,
+		id,
+		inline,
+		input,
+		output
+	};
+	const anchor = createColorPickerAnchor(parameters);
+	const content = createColorPickerContent(parameters);
+	const formatted = color.toHexString(alpha);
+	state.component = {
+		alpha,
+		anchor,
+		content,
+		copy,
+		disabled,
+		id,
+		inline,
+		input,
+		output,
+		readonly,
+		required,
+		color: {
+			foreground: "",
+			value: color
+		},
+		host: element,
+		label: {
+			element: label,
+			id: labelId
+		},
+		listeners: [],
+		localizations: createLocalizations(colorPickerLocalizations),
+		style: createElement("style"),
+		value: {
+			current: formatted,
+			initial: formatted
+		}
+	};
+	attachColorPicker(state);
+	setAttributes(element, {
+		output,
+		alpha: alpha ? "" : void 0,
+		copy: copy ? "" : void 0,
+		inline: inline ? "" : void 0
+	});
+	setColorPickerDisabled(state, "disabled", disabled);
+	setColorPickerDisabled(state, "readonly", readonly);
+	setColorPickerRequired(state, required);
+	setColorPickerValues(state, false);
+	updateColorPickerLabels(state);
+	updateColorPickerValidity(state, isHexColor(state.component.value.current, alpha));
+	return state.component;
+}
+const colorPickers = /* @__PURE__ */ new Set();
+//#endregion
 export { attachColorPicker, colorPickers, detachColorPicker, initializeColorPicker, initializeColorPickerComponent };

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

@@ -1,5 +1,6 @@
-import { M as OuiColorPickerEvent, N as OuiColorPickerLocalizations, b as COLOR_PICKER_TAGNAME, y as COLOR_PICKER_SYMBOL, z as OuiColorPickerState } from "../color-picker.constants-D1mxw_Le.mjs";
-import { a as setColorPickerLocalizations } from "../color-picker.misc-CtsXGrOe.mjs";
+import { p as OuiLocalizations } from "../l10n.model-D1E1u35L.mjs";
+import { B as OuiColorPickerState, N as OuiColorPickerEvent, P as OuiColorPickerLocalizations, b as COLOR_PICKER_SYMBOL, x as COLOR_PICKER_TAGNAME } from "../color-picker.constants-BZgXQr5o.mjs";
+import { a as setColorPickerLocalizations } from "../color-picker.misc-BIS3R6jk.mjs";
 import { HSLAColor, HSLColor, HWBAColor, HWBColor, RGBAColor, RGBColor } from "@oscarpalmer/atoms/color";
 //#region src/js/color-picker/index.d.ts
 declare global {
@@ -81,6 +82,10 @@ export declare class OuiColorPickerElement extends HTMLElement {
    * Label elements associated with the color picker
    */
   get labels(): NodeList;
+  /**
+   * Localization information for the color picker
+   */
+  get localizations(): OuiLocalizations<OuiColorPickerLocalizations>;
   /**
    * Is the color picker readonly?
    */
@@ -162,19 +167,6 @@ export declare class OuiColorPickerElement extends HTMLElement {
    * @param message Validation message
    */
   setCustomValidity(message: string): void;
-  /**
-   * Set localizations for a specific language
-   *
-   * @param language Language code
-   * @param localizations Localizations for language
-   */
-  setLocalizations(language: string, localizations: Partial<OuiColorPickerLocalizations>): void;
-  /**
-   * Set localizations for one or more languages
-   *
-   * @param localizations Localizations for one or more languages
-   */
-  setLocalizations(localizations: Record<string, Partial<OuiColorPickerLocalizations>>): void;
 }
 //#endregion
 export { OuiColorPickerEvent, setColorPickerLocalizations };