@oscarpalmer/oui 0.38.0 → 0.40.0

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

@@ -0,0 +1,191 @@
+import { COLOR_PICKER_ATTRIBUTE_COPY, COLOR_PICKER_ATTRIBUTE_WELL, COLOR_PICKER_ATTRIBUTE_WELL_KNOB, COLOR_PICKER_TAGNAME, colorPickerLocalizations } from "./color-picker.constants.mjs";
+import { createColorPickerOutput } from "./color-picker.output.mjs";
+import { createElement } from "@oscarpalmer/toretto/create";
+//#region src/js/color-picker/color-picker.dom.ts
+function createColorPickerAnchor(parameters) {
+	const { alpha, color, id, inline } = parameters;
+	const container = createElement("div", { attribute: { [`${COLOR_PICKER_TAGNAME}-anchor`]: "" } });
+	const input = createElement("input", {
+		attribute: {
+			[`${COLOR_PICKER_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 toggle;
+	if (!inline) toggle = createElement("button", {
+		aria: { label: "" },
+		attribute: {
+			[`${COLOR_PICKER_TAGNAME}-toggle`]: "",
+			popovertarget: `${id}_content`
+		},
+		property: { type: "button" }
+	});
+	let copy;
+	if (parameters.copy) copy = createColorPickerCopy(parameters, "hex");
+	container.append(input);
+	if (toggle != null) container.append(toggle);
+	if (copy != null) container.append(copy.button);
+	return {
+		container,
+		copy,
+		input,
+		toggle
+	};
+}
+function createColorPickerContent(parameters) {
+	const { id, inline } = parameters;
+	const element = createElement("div", {
+		attribute: {
+			[`${COLOR_PICKER_TAGNAME}-content`]: "",
+			popover: inline ? void 0 : ""
+		},
+		property: { id: `${id}_content` }
+	});
+	const hue = createColorPickerHue(parameters);
+	const opacity = createColorPickerOpacity(parameters);
+	const well = createColorPickerWell(parameters);
+	let output;
+	element.append(well.element, hue.container);
+	if (opacity != null) element.append(opacity.container);
+	if (parameters.output !== "none") {
+		output = createColorPickerOutput(parameters, createColorPickerCopy(parameters));
+		if (output != null) element.append(output.container);
+	}
+	return {
+		element,
+		hue,
+		opacity,
+		output,
+		well
+	};
+}
+function createColorPickerCopy(parameters, color) {
+	if (!parameters.copy) return;
+	return { button: createElement("button", {
+		attribute: { [COLOR_PICKER_ATTRIBUTE_COPY]: "" },
+		aria: { label: colorPickerLocalizations.defaults.copy },
+		data: { color },
+		property: {
+			textContent: colorPickerLocalizations.defaults.copy,
+			type: "button"
+		}
+	}) };
+}
+function createColorPickerHue(parameters) {
+	const { color, id } = parameters;
+	const container = createElement("div", { attribute: { [`${COLOR_PICKER_TAGNAME}-hue`]: "" } });
+	const label = createElement("label", {
+		attribute: { [`${COLOR_PICKER_TAGNAME}-hue-label`]: "" },
+		property: {
+			htmlFor: `${id}_hue`,
+			id: `${id}_hue_label`
+		}
+	});
+	const input = createElement("input", {
+		aria: { labelledby: `${id}_label ${label.id}` },
+		attribute: {
+			[`${COLOR_PICKER_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: { [`${COLOR_PICKER_TAGNAME}-hue-knob`]: "" }
+	});
+	const track = createElement("div", {
+		aria: { hidden: true },
+		attribute: { [`${COLOR_PICKER_TAGNAME}-hue-track`]: "" }
+	});
+	track.append(knob);
+	container.append(label, input, track);
+	return {
+		container,
+		input,
+		knob,
+		label,
+		track
+	};
+}
+function createColorPickerOpacity(parameters) {
+	const { alpha, color, id } = parameters;
+	if (!alpha) return;
+	const container = createElement("div", { attribute: { [`${COLOR_PICKER_TAGNAME}-opacity`]: "" } });
+	const label = createElement("label", {
+		attribute: { [`${COLOR_PICKER_TAGNAME}-opacity-label`]: "" },
+		property: {
+			htmlFor: `${id}_opacity`,
+			id: `${id}_opacity_label`
+		}
+	});
+	const input = createElement("input", {
+		aria: { labelledby: `${id}_label ${label.id}` },
+		attribute: {
+			[`${COLOR_PICKER_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: { [`${COLOR_PICKER_TAGNAME}-opacity-knob`]: "" }
+	});
+	const track = createElement("div", {
+		aria: { hidden: true },
+		attribute: { [`${COLOR_PICKER_TAGNAME}-opacity-track`]: "" }
+	});
+	track.append(knob);
+	container.append(label, input, track);
+	return {
+		container,
+		input,
+		label
+	};
+}
+function createColorPickerWell(parameters) {
+	const { id } = parameters;
+	const element = createElement("div", { attribute: { [COLOR_PICKER_ATTRIBUTE_WELL]: "" } });
+	const label = createElement("span", { property: {
+		id: `${id}_well_label`,
+		hidden: true
+	} });
+	const knob = createElement("span", {
+		aria: { labelledby: `${id}_label ${label.id}` },
+		attribute: { [COLOR_PICKER_ATTRIBUTE_WELL_KNOB]: "" },
+		property: {
+			role: "slider",
+			tabIndex: 0
+		}
+	});
+	element.append(label, knob);
+	return {
+		element,
+		knob,
+		label
+	};
+}
+//#endregion
+export { createColorPickerAnchor, createColorPickerContent, createColorPickerHue, createColorPickerOpacity, createColorPickerWell };

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

@@ -0,0 +1,9 @@
+import { P as OuiColorPickerMovement, z as OuiColorPickerState } from "../color-picker.constants-D1mxw_Le.mjs";
+//#region src/js/color-picker/color-picker.event.d.ts
+export declare function onColorPickerHue(state: OuiColorPickerState): void;
+export declare function onColorPickerInput(state: OuiColorPickerState): void;
+export declare function onColorPickerOpacity(state: OuiColorPickerState): void;
+export declare function onColorPickerOutputFormat(state: OuiColorPickerState): void;
+export declare function onColorPickerOutputValue(event: Event, state: OuiColorPickerState): void;
+export declare const colorPickerMovement: OuiColorPickerMovement;
+//#endregion

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

@@ -0,0 +1,2 @@
+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";
+export { colorPickerMovement, onColorPickerHue, onColorPickerInput, onColorPickerOpacity, onColorPickerOutputFormat, onColorPickerOutputValue };

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

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

@@ -0,0 +1,27 @@
+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
+function updateColorPickerForm(state, valid) {
+	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 { 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, {}, []);
+	internals.setValidity({ typeMismatch: true }, message, anchor.input);
+	internals.checkValidity();
+}
+//#endregion
+export { updateColorPickerForm, updateColorPickerValidity };

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

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

@@ -0,0 +1,2 @@
+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 };

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

@@ -0,0 +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 };

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

@@ -0,0 +1,24 @@
+//#region src/js/color-picker/color-picker.model.ts
+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
+		};
+	}
+};
+//#endregion
+export { OuiColorPickerEvent };

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

@@ -0,0 +1,8 @@
+import { A as OuiColorPickerCopy, I as OuiColorPickerOutputColor, O as OuiColorPickerContentOutput, j as OuiColorPickerCreateParameters, z as OuiColorPickerState } from "../color-picker.constants-D1mxw_Le.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;
+export declare function updateColorPickerOutputInputs(state: OuiColorPickerState): void;
+export declare function updateColorPickerOutputLabels(state: OuiColorPickerState): void;
+//#endregion

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

@@ -0,0 +1,235 @@
+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";
+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`]: "" } });
+	let inputs;
+	let item;
+	let items;
+	let itemsContainer;
+	let toggle;
+	let toggleContainer;
+	if (parameters.output === "all") {
+		[toggleContainer, toggle] = createOutputFormat(parameters, copy?.button);
+		[itemsContainer, items, inputs] = createOutputItems(parameters, copy?.button);
+		container.append(toggleContainer, itemsContainer);
+	} else {
+		[item, inputs] = createOutputItem(parameters.output, parameters, copy?.button, true, false);
+		items = [item];
+		container.append(item);
+	}
+	return {
+		container,
+		copy,
+		inputs,
+		items,
+		toggle
+	};
+}
+function createOutputFormat(parameters, copy) {
+	const container = createElement("div", { attribute: { [`${COLOR_PICKER_TAGNAME}-output-format`]: "" } });
+	const toggle = createElement("div", { attribute: { [`${COLOR_PICKER_TAGNAME}-output-toggle`]: "" } });
+	const id = `${parameters.id}_output_format`;
+	const label = createElement("label", {
+		attribute: {
+			[`${COLOR_PICKER_TAGNAME}-output-label`]: "",
+			[`${COLOR_PICKER_TAGNAME}-output-format-label`]: ""
+		},
+		property: {
+			htmlFor: id,
+			textContent: colorPickerLocalizations.defaults.output
+		}
+	});
+	const select = createElement("select", {
+		attribute: {
+			[`${COLOR_PICKER_TAGNAME}-output-format-value`]: "",
+			form: ""
+		},
+		property: { id }
+	});
+	select.append(...colors.map((color) => createElement("option", { property: {
+		textContent: colorPickerLocalizations.defaults[color],
+		value: color
+	} })));
+	toggle.append(label, select);
+	container.append(toggle);
+	if (copy != null) container.append(copy);
+	return [container, select];
+}
+function createOutputInput(color, property, value, parameters) {
+	const item = createElement("div", {});
+	const id = `${parameters.id}_output_${color}_${property}`;
+	const label = createElement("label", {
+		attribute: {
+			[`${COLOR_PICKER_TAGNAME}-output-label`]: "",
+			[`${COLOR_PICKER_ATTRIBUTE_OUTPUT_INPUT}-label`]: ""
+		},
+		data: { label: property },
+		property: {
+			htmlFor: id,
+			textContent: colorPickerLocalizations.defaults[property]
+		}
+	});
+	const input = createElement("input", {
+		attribute: {
+			[COLOR_PICKER_ATTRIBUTE_OUTPUT_INPUT]: "",
+			[`${COLOR_PICKER_TAGNAME}-output-${property}`]: "",
+			autocomplete: "off",
+			autocorrect: "off",
+			form: "",
+			inputmode: "text",
+			spellcheck: "false"
+		},
+		data: {
+			color,
+			property
+		},
+		property: {
+			id,
+			max: max[property],
+			min: "0",
+			type: "number",
+			valueAsNumber: value[property]
+		}
+	});
+	item.append(label, input);
+	return [item, input];
+}
+function createOutputItem(color, parameters, copy, single, hidden) {
+	const item = createElement("div", {
+		aria: { label: colorPickerLocalizations.defaults[color] },
+		data: { label: color },
+		attribute: {
+			[`${COLOR_PICKER_TAGNAME}-output-item`]: "",
+			[`${COLOR_PICKER_TAGNAME}-output-${color}`]: ""
+		},
+		property: { hidden }
+	});
+	const value = parameters.color[color];
+	const inputs = [];
+	for (const property of properties[color]) {
+		const [container, input] = createOutputInput(color, property, value, parameters);
+		inputs.push(input);
+		item.append(container);
+	}
+	if (single && copy != null) item.append(copy);
+	return [item, inputs];
+}
+function createOutputItems(parameters, copy) {
+	const container = createElement("div", {});
+	const inputs = [];
+	const items = [];
+	for (let index = 0; index < colors.length; index += 1) {
+		const color = colors[index];
+		const [item, itemInputs] = createOutputItem(color, parameters, copy, false, index > 0);
+		inputs.push(...itemInputs);
+		items.push(item);
+	}
+	container.append(...items);
+	return [
+		container,
+		items,
+		inputs
+	];
+}
+function getColorPickerOutputFormat(state) {
+	const { component } = state;
+	if (component.output === "none") return;
+	let color;
+	if (component.output === "all") color = component.content.output?.toggle?.value;
+	else color = component.output;
+	return color;
+}
+function updateColorPickerOutputCopyLabel(state, button) {
+	const { host, localizations } = state.component;
+	const prefix = localize(getLocalization(localizations.global, host, "copy", localizations.component), {}, []);
+	const color = getColorPickerOutputFormat(state);
+	let content;
+	if (color == null) content = prefix;
+	else content = `${prefix} ${localize(getLocalization(localizations.global, host, color, localizations.component), {}, [])}`;
+	setAria(button, "label", content);
+	button.textContent = prefix;
+}
+function updateColorPickerOutputInputs(state) {
+	const { component } = state;
+	const { content } = component;
+	if (content.output?.inputs == null) return;
+	const inputs = content.output.inputs;
+	const { length } = inputs;
+	for (let index = 0; index < length; index += 1) {
+		const input = inputs[index];
+		const color = input.dataset.color;
+		const property = input.dataset.property;
+		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.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) {
+		const label = labels[labelsIndex];
+		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), {}, []);
+		for (let elementsIndex = 0; elementsIndex < elementsLength; elementsIndex += 1) {
+			const element = elements[elementsIndex];
+			if (element instanceof HTMLLabelElement) element.textContent = textContent;
+			else setAria(element, "label", textContent);
+		}
+	}
+}
+const colors = [
+	"hsl",
+	"hwb",
+	"rgb"
+];
+const labels = [
+	"blackness",
+	"blue",
+	"green",
+	"hsl",
+	"hue",
+	"hwb",
+	"lightness",
+	"output",
+	"red",
+	"rgb",
+	"saturation",
+	"whiteness"
+];
+const labelsLength = labels.length;
+const max = {
+	blackness: "100",
+	blue: "255",
+	green: "255",
+	hue: "360",
+	lightness: "100",
+	red: "255",
+	saturation: "100",
+	whiteness: "100"
+};
+const properties = {
+	hsl: [
+		"hue",
+		"saturation",
+		"lightness"
+	],
+	hwb: [
+		"hue",
+		"whiteness",
+		"blackness"
+	],
+	rgb: [
+		"red",
+		"green",
+		"blue"
+	]
+};
+//#endregion
+export { createColorPickerOutput, getColorPickerOutputFormat, updateColorPickerOutputCopyLabel, updateColorPickerOutputInputs, updateColorPickerOutputLabels };

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

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

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

@@ -0,0 +1,2 @@
+import { _ as attachColorPicker, b as initializeColorPicker, v as colorPickers, x as initializeColorPickerComponent, y as detachColorPicker } from "../color-picker.event-Cksj5TvS.mjs";
+export { attachColorPicker, colorPickers, detachColorPicker, initializeColorPicker, initializeColorPickerComponent };

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

@@ -1,12 +1,16 @@
-import { Color, HSLAColor, HSLColor, HWBAColor, HWBColor, RGBAColor, RGBColor } from "@oscarpalmer/atoms/color";
-//#region src/js/color-picker.d.ts
+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 { HSLAColor, HSLColor, HWBAColor, HWBColor, RGBAColor, RGBColor } from "@oscarpalmer/atoms/color";
+//#region src/js/color-picker/index.d.ts
 declare global {
   interface HTMLElementTagNameMap {
-    [TAGNAME]: OuiColorPickerElement;
+    [COLOR_PICKER_TAGNAME]: OuiColorPickerElement;
   }
 }
-declare class OuiColorPickerElement extends HTMLElement {
-  #private;
+export interface OuiColorPickerElement {
+  [COLOR_PICKER_SYMBOL]: OuiColorPickerState;
+}
+export declare class OuiColorPickerElement extends HTMLElement {
   static formAssociated: boolean;
   static observedAttributes: string[];
   /**
@@ -172,42 +176,5 @@ declare class OuiColorPickerElement extends HTMLElement {
    */
   setLocalizations(localizations: Record<string, Partial<OuiColorPickerLocalizations>>): void;
 }
-declare class OuiColorPickerEvent extends Event {
-  readonly valid: boolean;
-  readonly value: OuiColorPickerEventValue;
-  constructor(type: 'oui:change' | 'oui:input', color: Color, valid: boolean);
-}
-type OuiColorPickerEventValue = {
-  hex: string;
-  hexa: string;
-  hsl: HSLColor;
-  hsla: HSLAColor;
-  hwb: HWBColor;
-  hwba: HWBAColor;
-  rgb: RGBColor;
-  rgba: RGBAColor;
-};
-type OuiColorPickerLocalizations = {
-  hue: string;
-  invalid: string;
-  lightnessSaturationLabel: string;
-  lightnessSaturationValue: string | ((lightness: number, saturation: number) => string);
-  opacity: string;
-  toggle: string;
-};
-/**
- * Set localizations for a specific language
- *
- * @param language Language code
- * @param localizations Localizations for language
- */
-declare function setColorPickerLocalizations(language: string, localizations: Partial<OuiColorPickerLocalizations>): void;
-/**
- * Set localizations for one or more languages
- *
- * @param localizations Localizations for one or more languages
- */
-declare function setColorPickerLocalizations(localizations: Record<string, Partial<OuiColorPickerLocalizations>>): void;
-declare const TAGNAME = "oui-color-picker";
 //#endregion
-export { OuiColorPickerElement, OuiColorPickerEvent, setColorPickerLocalizations };
+export { OuiColorPickerEvent, setColorPickerLocalizations };