@oscarpalmer/oui 0.39.0 → 0.41.0

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

@@ -0,0 +1,168 @@
+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,2 +1,172 @@
-import { A as OuiColorPickerEvent, B as OuiColorPickerElement, G as setColorPickerLocalizations } from "../constants.color-picker-B-gFjL8m.mjs";
-export { OuiColorPickerElement, OuiColorPickerEvent, setColorPickerLocalizations };
+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 {
+  interface HTMLElementTagNameMap {
+    [COLOR_PICKER_TAGNAME]: OuiColorPickerElement;
+  }
+}
+export interface OuiColorPickerElement {
+  [COLOR_PICKER_SYMBOL]: OuiColorPickerState;
+}
+export declare class OuiColorPickerElement extends HTMLElement {
+  static formAssociated: boolean;
+  static observedAttributes: string[];
+  /**
+   * Is the color picker disabled?
+   */
+  get disabled(): boolean;
+  /**
+   * Should the color picker be disabled?
+   */
+  set disabled(value: boolean);
+  /**
+   * Form element associated with the color picker
+   */
+  get form(): HTMLFormElement | null;
+  /**
+   * Color value as hexadecimal string
+   */
+  get hex(): string;
+  /**
+   * Set color value from a hexadecimal string
+   */
+  set hex(value: string);
+  /**
+   * Color value as hexadecimal string with alpha channel
+   */
+  get hexa(): string;
+  /**
+   * Set color value from a hexadecimal string with alpha channel
+   */
+  set hexa(value: string);
+  /**
+   * Color value as an _HSL_ color object
+   */
+  get hsl(): HSLColor;
+  /**
+   * Set color value from an _HSL_ color object
+   */
+  set hsl(value: HSLColor);
+  /**
+   * Color value as an _HSLA_ color object _(HSL with alpha channel)_
+   */
+  get hsla(): HSLAColor;
+  /**
+   * Set color value from an _HSLA_ color object _(HSL with alpha channel)_
+   */
+  set hsla(value: HSLAColor);
+  /**
+   * Color value as an _HWB_ color object
+   */
+  get hwb(): HWBColor;
+  /**
+   * Set color value from an _HWB_ color object
+   */
+  set hwb(value: HWBColor);
+  /**
+   * Color value as an _HWBA_ color object _(HWB with alpha channel)_
+   */
+  get hwba(): HWBAColor;
+  /**
+   * Set color value from an _HWBA_ color object _(HWB with alpha channel)_
+   */
+  set hwba(value: HWBAColor);
+  /**
+   * Text input value
+   */
+  get input(): string;
+  /**
+   * 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?
+   */
+  get readonly(): boolean;
+  /**
+   * Should the color picker be readonly?
+   */
+  set readonly(value: boolean);
+  /**
+   * Is the color picker required?
+   */
+  get required(): boolean;
+  /**
+   * Should the color picker be required?
+   */
+  set required(value: boolean);
+  /**
+   * Color value as an _RGB_ color object
+   */
+  get rgb(): RGBColor;
+  /**
+   * Set color value from an _RGB_ color object
+   */
+  set rgb(value: RGBColor);
+  /**
+   * Color value as an _RGBA_ color object _(RGB with alpha channel)_
+   */
+  get rgba(): RGBAColor;
+  /**
+   * Set color value from an _RGBA_ color object _(RGB with alpha channel)_
+   */
+  set rgba(value: RGBAColor);
+  /**
+   * Validation message for the color picker
+   */
+  get validationMessage(): string;
+  /**
+   * Validity state for the color picker
+   */
+  get validity(): ValidityState;
+  /**
+   * Current color value
+   */
+  get value(): string;
+  /**
+   * Set color value from a string, _HSL(A)_, _HWB(A)_, or _RGB(A)_ color object
+   */
+  set value(value: string | HSLColor | HSLAColor | HWBColor | HWBAColor | RGBColor | RGBAColor);
+  /**
+   * Can the color picker be validated?
+   */
+  get willValidate(): boolean;
+  constructor();
+  attributeChangedCallback(name: string, _: string | null, value: string | null): void;
+  /**
+   * Check if the color picker is valid
+   *
+   * @returns `true` if the color picker is valid, otherwise `false`
+   */
+  checkValidity(): boolean;
+  /**
+   * Clear the color picker's value
+   */
+  clear(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  formDisabledCallback(disabled: boolean): void;
+  formResetCallback(): void;
+  formStateRestoreCallback(state: unknown, reason: unknown): void;
+  /**
+   * Check if the color picker is valid and report any validation errors
+   *
+   * @returns `true` if the color picker is valid, otherwise `false`
+   */
+  reportValidity(): boolean;
+  /**
+   * Set a custom validation message for the color picker
+   *
+   * @param message Validation message
+   */
+  setCustomValidity(message: string): void;
+}
+//#endregion
+export { OuiColorPickerEvent, setColorPickerLocalizations };

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

@@ -1,6 +1,8 @@
-import { COLOR_PICKER_TAGNAME, colorPickerLocalizations } from "./constants.color-picker.mjs";
-import { OuiColorPickerEvent } from "./models.color-picker.mjs";
-import { _ as attachColorPicker, b as detachColorPicker, d as setColorPickerLocalizations, f as setColorPickerRequired, g as updateColorPickerLocalizations, p as setColorPickerValue, r as onColorPickerInput, u as setColorPickerDisabled, x as initializeColorPicker } from "../event.color-picker-BEpq0Adu.mjs";
+import { COLOR_PICKER_SYMBOL, COLOR_PICKER_TAGNAME } from "./color-picker.constants.mjs";
+import { OuiColorPickerEvent } from "./color-picker.model.mjs";
+import { setColorPickerDisabled, setColorPickerLocalizations, setColorPickerRequired, setColorPickerValue } from "./color-picker.misc.mjs";
+import { onColorPickerInput } from "./color-picker.event.mjs";
+import { attachColorPicker, detachColorPicker, initializeColorPickerComponent } from "./color-picker.state.mjs";
 import "@oscarpalmer/atoms/color";
 //#region src/js/color-picker/index.ts
 var OuiColorPickerElement = class extends HTMLElement {
@@ -10,56 +12,54 @@ var OuiColorPickerElement = class extends HTMLElement {
 		"required",
 		"value"
 	];
-	#internals;
-	#restored;
-	#state;
 	/**
 	* Is the color picker disabled?
 	*/
 	get disabled() {
-		return this.#state?.disabled ?? false;
+		return this[COLOR_PICKER_SYMBOL]?.component.disabled ?? false;
 	}
 	/**
 	* Should the color picker be disabled?
 	*/
 	set disabled(value) {
-		if (this.#state != null && typeof value === "boolean" && value !== this.#state.disabled) setColorPickerDisabled(this.#state, "disabled", value);
+		const state = this[COLOR_PICKER_SYMBOL];
+		if (state.component != null && typeof value === "boolean" && value !== state.component.disabled) setColorPickerDisabled(state, "disabled", value);
 	}
 	/**
 	* Form element associated with the color picker
 	*/
 	get form() {
-		return this.#internals.form;
+		return this[COLOR_PICKER_SYMBOL].form.internals.form;
 	}
 	/**
 	* Color value as hexadecimal string
 	*/
 	get hex() {
-		return this.#state?.color.value.hex ?? "";
+		return this[COLOR_PICKER_SYMBOL]?.component.color.value.hex ?? "";
 	}
 	/**
 	* Set color value from a hexadecimal string
 	*/
 	set hex(value) {
-		setColorPickerValue(this.#state, value, "hex");
+		setColorPickerValue(this[COLOR_PICKER_SYMBOL], value, "hex");
 	}
 	/**
 	* Color value as hexadecimal string with alpha channel
 	*/
 	get hexa() {
-		return this.#state?.color.value.hexa ?? "";
+		return this[COLOR_PICKER_SYMBOL]?.component.color.value.hexa ?? "";
 	}
 	/**
 	* Set color value from a hexadecimal string with alpha channel
 	*/
 	set hexa(value) {
-		setColorPickerValue(this.#state, value, "hexa");
+		setColorPickerValue(this[COLOR_PICKER_SYMBOL], value, "hexa");
 	}
 	/**
 	* Color value as an _HSL_ color object
 	*/
 	get hsl() {
-		return this.#state?.color.value.hsl ?? {
+		return this[COLOR_PICKER_SYMBOL]?.component.color.value.hsl ?? {
 			hue: 0,
 			lightness: 0,
 			saturation: 0
@@ -69,13 +69,13 @@ var OuiColorPickerElement = class extends HTMLElement {
 	* Set color value from an _HSL_ color object
 	*/
 	set hsl(value) {
-		setColorPickerValue(this.#state, value, "hsl");
+		setColorPickerValue(this[COLOR_PICKER_SYMBOL], value, "hsl");
 	}
 	/**
 	* Color value as an _HSLA_ color object _(HSL with alpha channel)_
 	*/
 	get hsla() {
-		return this.#state?.color.value.hsla ?? {
+		return this[COLOR_PICKER_SYMBOL]?.component.color.value.hsla ?? {
 			hue: 0,
 			lightness: 0,
 			saturation: 0,
@@ -86,13 +86,13 @@ var OuiColorPickerElement = class extends HTMLElement {
 	* Set color value from an _HSLA_ color object _(HSL with alpha channel)_
 	*/
 	set hsla(value) {
-		setColorPickerValue(this.#state, value, "hsla");
+		setColorPickerValue(this[COLOR_PICKER_SYMBOL], value, "hsla");
 	}
 	/**
 	* Color value as an _HWB_ color object
 	*/
 	get hwb() {
-		return this.#state?.color.value.hwb ?? {
+		return this[COLOR_PICKER_SYMBOL]?.component.color.value.hwb ?? {
 			hue: 0,
 			whiteness: 0,
 			blackness: 0
@@ -102,13 +102,13 @@ var OuiColorPickerElement = class extends HTMLElement {
 	* Set color value from an _HWB_ color object
 	*/
 	set hwb(value) {
-		setColorPickerValue(this.#state, value, "hwb");
+		setColorPickerValue(this[COLOR_PICKER_SYMBOL], value, "hwb");
 	}
 	/**
 	* Color value as an _HWBA_ color object _(HWB with alpha channel)_
 	*/
 	get hwba() {
-		return this.#state?.color.value.hwba ?? {
+		return this[COLOR_PICKER_SYMBOL]?.component.color.value.hwba ?? {
 			hue: 0,
 			whiteness: 0,
 			blackness: 0,
@@ -119,49 +119,57 @@ var OuiColorPickerElement = class extends HTMLElement {
 	* Set color value from an _HWBA_ color object _(HWB with alpha channel)_
 	*/
 	set hwba(value) {
-		setColorPickerValue(this.#state, value, "hwba");
+		setColorPickerValue(this[COLOR_PICKER_SYMBOL], value, "hwba");
 	}
 	/**
 	* Text input value
 	*/
 	get input() {
-		return this.#state?.anchor.input.value ?? "";
+		return this[COLOR_PICKER_SYMBOL]?.component.anchor.input.value ?? "";
 	}
 	/**
 	* Label elements associated with the color picker
 	*/
 	get labels() {
-		return this.#internals.labels;
+		return this[COLOR_PICKER_SYMBOL].form.internals.labels;
+	}
+	/**
+	* Localization information for the color picker
+	*/
+	get localizations() {
+		return this[COLOR_PICKER_SYMBOL]?.component.localizations;
 	}
 	/**
 	* Is the color picker readonly?
 	*/
 	get readonly() {
-		return this.#state?.readonly ?? false;
+		return this[COLOR_PICKER_SYMBOL]?.component.readonly ?? false;
 	}
 	/**
 	* Should the color picker be readonly?
 	*/
 	set readonly(value) {
-		if (this.#state != null && typeof value === "boolean" && value !== this.#state.readonly) setColorPickerDisabled(this.#state, "readonly", value);
+		const state = this[COLOR_PICKER_SYMBOL];
+		if (state.component != null && typeof value === "boolean" && value !== state.component.readonly) setColorPickerDisabled(state, "readonly", value);
 	}
 	/**
 	* Is the color picker required?
 	*/
 	get required() {
-		return this.#state?.required ?? false;
+		return this[COLOR_PICKER_SYMBOL]?.component.required ?? false;
 	}
 	/**
 	* Should the color picker be required?
 	*/
 	set required(value) {
-		if (this.#state != null && typeof value === "boolean" && value !== this.#state.required) setColorPickerRequired(this.#state, value);
+		const state = this[COLOR_PICKER_SYMBOL];
+		if (state.component != null && typeof value === "boolean" && value !== state.component.required) setColorPickerRequired(state, value);
 	}
 	/**
 	* Color value as an _RGB_ color object
 	*/
 	get rgb() {
-		return this.#state?.color.value.rgb ?? {
+		return this[COLOR_PICKER_SYMBOL]?.component.color.value.rgb ?? {
 			red: 0,
 			green: 0,
 			blue: 0
@@ -171,13 +179,13 @@ var OuiColorPickerElement = class extends HTMLElement {
 	* Set color value from an _RGB_ color object
 	*/
 	set rgb(value) {
-		setColorPickerValue(this.#state, value, "rgb");
+		setColorPickerValue(this[COLOR_PICKER_SYMBOL], value, "rgb");
 	}
 	/**
 	* Color value as an _RGBA_ color object _(RGB with alpha channel)_
 	*/
 	get rgba() {
-		return this.#state?.color.value.rgba ?? {
+		return this[COLOR_PICKER_SYMBOL]?.component.color.value.rgba ?? {
 			red: 0,
 			green: 0,
 			blue: 0,
@@ -188,47 +196,52 @@ var OuiColorPickerElement = class extends HTMLElement {
 	* Set color value from an _RGBA_ color object _(RGB with alpha channel)_
 	*/
 	set rgba(value) {
-		setColorPickerValue(this.#state, value, "rgba");
+		setColorPickerValue(this[COLOR_PICKER_SYMBOL], value, "rgba");
 	}
 	/**
 	* Validation message for the color picker
 	*/
 	get validationMessage() {
-		return this.#internals.validationMessage;
+		return this[COLOR_PICKER_SYMBOL].form.internals.validationMessage;
 	}
 	/**
 	* Validity state for the color picker
 	*/
 	get validity() {
-		return this.#internals.validity;
+		return this[COLOR_PICKER_SYMBOL].form.internals.validity;
 	}
 	/**
 	* Current color value
 	*/
 	get value() {
-		return this.#state?.value.current ?? "";
+		return this[COLOR_PICKER_SYMBOL]?.component.value.current ?? "";
 	}
 	/**
 	* Set color value from a string, _HSL(A)_, _HWB(A)_, or _RGB(A)_ color object
 	*/
 	set value(value) {
+		const state = this[COLOR_PICKER_SYMBOL];
+		if (state.component == null) return;
 		if (typeof value === "string") {
-			this.#state.anchor.input.value = value;
-			onColorPickerInput(this.#state);
-		} else setColorPickerValue(this.#state, value);
+			state.component.anchor.input.value = value;
+			onColorPickerInput(state);
+		} else setColorPickerValue(state, value);
 	}
 	/**
 	* Can the color picker be validated?
 	*/
 	get willValidate() {
-		return this.#internals.willValidate;
+		return this[COLOR_PICKER_SYMBOL].form.internals.willValidate;
 	}
 	constructor() {
 		super();
-		this.#internals = this.attachInternals();
+		this[COLOR_PICKER_SYMBOL] = {
+			component: void 0,
+			form: { internals: this.attachInternals() }
+		};
 	}
 	attributeChangedCallback(name, _, value) {
-		if (this.#state == null) return;
+		if (this[COLOR_PICKER_SYMBOL].component == null) return;
 		switch (name) {
 			case "disabled":
 				this.disabled = value != null;
@@ -245,7 +258,7 @@ var OuiColorPickerElement = class extends HTMLElement {
 	* @returns `true` if the color picker is valid, otherwise `false`
 	*/
 	checkValidity() {
-		return this.#internals.checkValidity();
+		return this[COLOR_PICKER_SYMBOL].form.internals.checkValidity();
 	}
 	/**
 	* Clear the color picker's value
@@ -254,21 +267,25 @@ var OuiColorPickerElement = class extends HTMLElement {
 		this.value = "";
 	}
 	connectedCallback() {
-		if (this.#state == null) this.#initialize();
-		else attachColorPicker(this.#state);
+		const state = this[COLOR_PICKER_SYMBOL];
+		const { component } = state;
+		if (component == null) initializeColorPickerComponent(this, state);
+		else attachColorPicker(state);
 	}
 	disconnectedCallback() {
-		if (this.#state != null) detachColorPicker(this.#state);
+		const state = this[COLOR_PICKER_SYMBOL];
+		if (state.component != null) detachColorPicker(state);
 	}
 	formDisabledCallback(disabled) {
 		this.disabled = disabled;
 	}
 	formResetCallback() {
-		this.value = this.#state?.value.initial ?? "";
+		this.value = this[COLOR_PICKER_SYMBOL]?.component.value.initial ?? "";
 	}
 	formStateRestoreCallback(state, reason) {
-		if (reason !== "restore" || typeof state !== "string" || this.#state == null) return;
-		if (this.#state == null) this.#restored = state;
+		const { component, form } = this[COLOR_PICKER_SYMBOL];
+		if (reason !== "restore" || typeof state !== "string" || component == null) return;
+		if (component == null) form.restored = state;
 		else this.value = state;
 	}
 	/**
@@ -277,7 +294,7 @@ var OuiColorPickerElement = class extends HTMLElement {
 	* @returns `true` if the color picker is valid, otherwise `false`
 	*/
 	reportValidity() {
-		return this.#internals.reportValidity();
+		return this[COLOR_PICKER_SYMBOL].form.internals.reportValidity();
 	}
 	/**
 	* Set a custom validation message for the color picker
@@ -285,17 +302,7 @@ var OuiColorPickerElement = class extends HTMLElement {
 	* @param message Validation message
 	*/
 	setCustomValidity(message) {
-		this.#internals.setValidity({ customError: message !== "" }, message, this);
-	}
-	setLocalizations(first, second) {
-		updateColorPickerLocalizations(colorPickerLocalizations, this.#state.localizations.component, first, second);
-	}
-	#initialize() {
-		this.#state = initializeColorPicker(this, this.#internals);
-		if (this.#restored != null) {
-			this.value = this.#restored;
-			this.#restored = void 0;
-		}
+		this[COLOR_PICKER_SYMBOL].form.internals.setValidity({ customError: message !== "" }, message, this);
 	}
 };
 customElements.define(COLOR_PICKER_TAGNAME, OuiColorPickerElement);