@oscarpalmer/oui 0.39.0 → 0.40.0

package/README.md

@@ -2,7 +2,7 @@
 
 [![npm](https://badge.fury.io/js/@oscarpalmer%2Foui.svg)](https://www.npmjs.com/package/@oscarpalmer/oui)
 
-_Oui_ _(Oscar UI)_ is a collection of styles, components, and related thingamjigs for designing websites and applications, which I often use to build prototypes and proof-of-concepts for myself and at work.
+_Oui_ _(Oscar UI)_ is a collection of styles, components, and related whatchamacallits for designing websites and applications, which I often use to build prototypes and proof-of-concepts for myself and at work.
 
 ## License
 

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

@@ -0,0 +1,2 @@
+import { _ as COLOR_PICKER_SELECTOR_WELL, a as COLOR_PICKER_ATTRIBUTE_OUTPUT_INPUT, b as COLOR_PICKER_TAGNAME, c as COLOR_PICKER_EXPRESSION_HEX_PREFIX, d as COLOR_PICKER_MESSAGE_INPUT, f as COLOR_PICKER_MESSAGE_LABEL, g as COLOR_PICKER_SELECTOR_OUTPUT_INPUT, h as COLOR_PICKER_SELECTOR_INPUT, i as COLOR_PICKER_ATTRIBUTE_INPUT, l as COLOR_PICKER_INPUT_TYPES, m as COLOR_PICKER_SELECTOR_COPY, n as COLOR_PICKER_ATTRIBUTE_COPY_ERROR, o as COLOR_PICKER_ATTRIBUTE_WELL, p as COLOR_PICKER_OUTPUTS, r as COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS, s as COLOR_PICKER_ATTRIBUTE_WELL_KNOB, t as COLOR_PICKER_ATTRIBUTE_COPY, u as COLOR_PICKER_KEYS, v as COLOR_PICKER_SELECTOR_WELL_KNOB, x as colorPickerLocalizations, y as COLOR_PICKER_SYMBOL } from "../color-picker.constants-D1mxw_Le.mjs";
+export { COLOR_PICKER_ATTRIBUTE_COPY, COLOR_PICKER_ATTRIBUTE_COPY_ERROR, COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS, COLOR_PICKER_ATTRIBUTE_INPUT, COLOR_PICKER_ATTRIBUTE_OUTPUT_INPUT, COLOR_PICKER_ATTRIBUTE_WELL, COLOR_PICKER_ATTRIBUTE_WELL_KNOB, COLOR_PICKER_EXPRESSION_HEX_PREFIX, COLOR_PICKER_INPUT_TYPES, COLOR_PICKER_KEYS, COLOR_PICKER_MESSAGE_INPUT, COLOR_PICKER_MESSAGE_LABEL, COLOR_PICKER_OUTPUTS, 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, colorPickerLocalizations };

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

@@ -1,6 +1,6 @@
-import { getLocalizations } from "../l10n.mjs";
+import { createLocalizations } from "../l10n/index.mjs";
 import { round } from "@oscarpalmer/atoms/math";
-//#region src/js/color-picker/constants.color-picker.ts
+//#region src/js/color-picker/color-picker.constants.ts
 const COLOR_PICKER_TAGNAME = "oui-color-picker";
 const COLOR_PICKER_ATTRIBUTE_COPY = `${COLOR_PICKER_TAGNAME}-copy`;
 const COLOR_PICKER_ATTRIBUTE_COPY_ERROR = `${COLOR_PICKER_ATTRIBUTE_COPY}-error`;
@@ -34,7 +34,8 @@ const COLOR_PICKER_SELECTOR_INPUT = `[${COLOR_PICKER_ATTRIBUTE_INPUT}]`;
 const COLOR_PICKER_SELECTOR_OUTPUT_INPUT = `[${COLOR_PICKER_ATTRIBUTE_OUTPUT_INPUT}]`;
 const COLOR_PICKER_SELECTOR_WELL = `[${COLOR_PICKER_ATTRIBUTE_WELL}]`;
 const COLOR_PICKER_SELECTOR_WELL_KNOB = `[${COLOR_PICKER_ATTRIBUTE_WELL_KNOB}]`;
-const colorPickerLocalizations = getLocalizations({
+const COLOR_PICKER_SYMBOL = Symbol(COLOR_PICKER_TAGNAME);
+const colorPickerLocalizations = createLocalizations({
 	blackness: "Blackness",
 	blue: "Blue",
 	copy: "Copy",
@@ -56,4 +57,4 @@ const colorPickerLocalizations = getLocalizations({
 	whiteness: "Whiteness"
 });
 //#endregion
-export { COLOR_PICKER_ATTRIBUTE_COPY, COLOR_PICKER_ATTRIBUTE_COPY_ERROR, COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS, COLOR_PICKER_ATTRIBUTE_INPUT, COLOR_PICKER_ATTRIBUTE_OUTPUT_INPUT, COLOR_PICKER_ATTRIBUTE_WELL, COLOR_PICKER_ATTRIBUTE_WELL_KNOB, COLOR_PICKER_EXPRESSION_HEX_PREFIX, COLOR_PICKER_INPUT_TYPES, COLOR_PICKER_KEYS, COLOR_PICKER_MESSAGE_INPUT, COLOR_PICKER_MESSAGE_LABEL, COLOR_PICKER_OUTPUTS, COLOR_PICKER_SELECTOR_COPY, COLOR_PICKER_SELECTOR_INPUT, COLOR_PICKER_SELECTOR_OUTPUT_INPUT, COLOR_PICKER_SELECTOR_WELL, COLOR_PICKER_SELECTOR_WELL_KNOB, COLOR_PICKER_TAGNAME, colorPickerLocalizations };
+export { COLOR_PICKER_ATTRIBUTE_COPY, COLOR_PICKER_ATTRIBUTE_COPY_ERROR, COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS, COLOR_PICKER_ATTRIBUTE_INPUT, COLOR_PICKER_ATTRIBUTE_OUTPUT_INPUT, COLOR_PICKER_ATTRIBUTE_WELL, COLOR_PICKER_ATTRIBUTE_WELL_KNOB, COLOR_PICKER_EXPRESSION_HEX_PREFIX, COLOR_PICKER_INPUT_TYPES, COLOR_PICKER_KEYS, COLOR_PICKER_MESSAGE_INPUT, COLOR_PICKER_MESSAGE_LABEL, COLOR_PICKER_OUTPUTS, 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, colorPickerLocalizations };

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

@@ -1,5 +1,5 @@
-import { C as OuiColorPickerContent, D as OuiColorPickerContentWell, T as OuiColorPickerContentOpacity, k as OuiColorPickerCreateParameters, w as OuiColorPickerContentHue, x as OuiColorPickerAnchor } from "../constants.color-picker-B-gFjL8m.mjs";
-//#region src/js/color-picker/dom.color-picker.d.ts
+import { C as OuiColorPickerAnchor, D as OuiColorPickerContentOpacity, E as OuiColorPickerContentHue, T as OuiColorPickerContent, j as OuiColorPickerCreateParameters, k as OuiColorPickerContentWell } from "../color-picker.constants-D1mxw_Le.mjs";
+//#region src/js/color-picker/color-picker.dom.d.ts
 export declare function createColorPickerAnchor(parameters: OuiColorPickerCreateParameters): OuiColorPickerAnchor;
 export declare function createColorPickerContent(parameters: OuiColorPickerCreateParameters): OuiColorPickerContent;
 export declare function createColorPickerHue(parameters: OuiColorPickerCreateParameters): OuiColorPickerContentHue;

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

@@ -1,7 +1,7 @@
-import { COLOR_PICKER_ATTRIBUTE_COPY, COLOR_PICKER_ATTRIBUTE_WELL, COLOR_PICKER_ATTRIBUTE_WELL_KNOB, COLOR_PICKER_TAGNAME, colorPickerLocalizations } from "./constants.color-picker.mjs";
-import { createColorPickerOutput } from "./output.color-picker.mjs";
+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/dom.color-picker.ts
+//#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`]: "" } });

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

@@ -1,5 +1,5 @@
-import { L as OuiColorPickerState, M as OuiColorPickerMovement } from "../constants.color-picker-B-gFjL8m.mjs";
-//#region src/js/color-picker/event.color-picker.d.ts
+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;

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

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

@@ -1,15 +1,18 @@
-import { getLocalization, localize } from "../l10n.mjs";
-import { OuiColorPickerEvent } from "./models.color-picker.mjs";
+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/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();

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/{misc.color-picker.mjs → color-picker.misc.mjs}

@@ -1,2 +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 "../event.color-picker-BEpq0Adu.mjs";
+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/{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 { 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;

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

@@ -1,9 +1,9 @@
-import { getLocalization, localize } from "../l10n.mjs";
-import { COLOR_PICKER_ATTRIBUTE_OUTPUT_INPUT, COLOR_PICKER_TAGNAME, colorPickerLocalizations } from "./constants.color-picker.mjs";
+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 { 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`]: "" } });
@@ -137,14 +137,15 @@ 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 { host, localizations } = state.component;
 	const prefix = localize(getLocalization(localizations.global, host, "copy", localizations.component), {}, []);
 	const color = getColorPickerOutputFormat(state);
 	let content;
@@ -154,7 +155,8 @@ function updateColorPickerOutputCopyLabel(state, button) {
 	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 +164,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) {

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/index.d.mts

@@ -1,2 +1,180 @@
-import { A as OuiColorPickerEvent, B as OuiColorPickerElement, G as setColorPickerLocalizations } from "../constants.color-picker-B-gFjL8m.mjs";
-export { OuiColorPickerElement, OuiColorPickerEvent, setColorPickerLocalizations };
+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 {
+    [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;
+  /**
+   * 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;
+  /**
+   * 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 };