@oscarpalmer/oui 0.37.0 → 0.39.0

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

@@ -0,0 +1,233 @@
+import { getLocalization, localize } from "../l10n.mjs";
+import { COLOR_PICKER_ATTRIBUTE_OUTPUT_INPUT, COLOR_PICKER_TAGNAME, colorPickerLocalizations } from "./constants.color-picker.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
+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) {
+	if (state.output === "none") return;
+	let color;
+	if (state.output === "all") color = state.content.output?.toggle?.value;
+	else color = state.output;
+	return color;
+}
+function updateColorPickerOutputCopyLabel(state, button) {
+	const { host, localizations } = state;
+	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 { content } = state;
+	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 state.color.value && property in state.color.value[color] ? round(state.color.value[color][property]) : 0;
+	}
+}
+function updateColorPickerOutputLabels(state) {
+	const { content, host, localizations } = state;
+	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/state.color-picker.d.mts

@@ -0,0 +1,8 @@
+import { B as OuiColorPickerElement, L as OuiColorPickerState } from "../constants.color-picker-B-gFjL8m.mjs";
+//#region src/js/color-picker/state.color-picker.d.ts
+export declare function attachColorPicker(state: OuiColorPickerState): void;
+export declare function detachColorPicker(state: OuiColorPickerState): void;
+export declare function initializeColorPicker(element: OuiColorPickerElement, internals: ElementInternals): OuiColorPickerState;
+export declare const colorPickerMap: WeakMap<OuiColorPickerElement, OuiColorPickerState>;
+export declare const colorPickerSet: Set<OuiColorPickerState>;
+//#endregion

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

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

package/dist/js/combobox/constants.combobox.d.mts

@@ -1,2 +1,2 @@
-import { a as COMBOBOX_AUTOCOMPLETES, c as COMBOBOX_TAGNAME, d as selectorAnchor, f as selectorContent, i as COMBOBOX_ATTRIBUTE_SELECTION_ITEM, l as messageLabel, m as selectorSelectionItem, n as COMBOBOX_ATTRIBUTE_ANCHOR, o as COMBOBOX_MESSAGES, p as selectorOption, r as COMBOBOX_ATTRIBUTE_SELECTION, s as COMBOBOX_SELECTORS, t as COMBOBOX_ATTRIBUTES, u as messageSelect } from "../constants.combobox-DmRAMC64.mjs";
+import { a as COMBOBOX_AUTOCOMPLETES, c as COMBOBOX_TAGNAME, d as selectorAnchor, f as selectorContent, i as COMBOBOX_ATTRIBUTE_SELECTION_ITEM, l as messageLabel, m as selectorSelectionItem, n as COMBOBOX_ATTRIBUTE_ANCHOR, o as COMBOBOX_MESSAGES, p as selectorOption, r as COMBOBOX_ATTRIBUTE_SELECTION, s as COMBOBOX_SELECTORS, t as COMBOBOX_ATTRIBUTES, u as messageSelect } from "../constants.combobox-8EMRmv09.mjs";
 export { COMBOBOX_ATTRIBUTES, COMBOBOX_ATTRIBUTE_ANCHOR, COMBOBOX_ATTRIBUTE_SELECTION, COMBOBOX_ATTRIBUTE_SELECTION_ITEM, COMBOBOX_AUTOCOMPLETES, COMBOBOX_MESSAGES, COMBOBOX_SELECTORS, COMBOBOX_TAGNAME, messageLabel, messageSelect, selectorAnchor, selectorContent, selectorOption, selectorSelectionItem };

package/dist/js/combobox/dom.combobox.d.mts

@@ -1,4 +1,4 @@
-import { c as OuiListboxPreview } from "../listbox.model-CRReGOmu.mjs";
+import { c as OuiListboxPreview } from "../listbox.model-BHPA7GM4.mjs";
 import { CreateListboxContent, CreateListboxContentParameters } from "../internal/listbox/listbox.dom.mjs";
 import { OuiComboboxSelection, OuiComboboxSelectionItem, OuiComboboxState } from "./models.combobox.mjs";
 //#region src/js/combobox/dom.combobox.d.ts
@@ -13,15 +13,14 @@ type CreateSelectionItemsParameters = {
   options: HTMLElement[];
   state?: OuiComboboxState;
 };
-declare function createComboboxAnchor(parameters: CreateListboxContentParameters): CreateAnchor;
-declare function createComboboxButton(parameters: CreateListboxContentParameters): CreateAnchor;
-declare function createComboboxContent(parameters: CreateListboxContentParameters): CreateListboxContent;
-declare function createComboboxSelection(id: string, select: HTMLSelectElement): OuiComboboxSelection;
-declare function createComboboxSelectionItem(option: HTMLElement, state?: OuiComboboxState): OuiComboboxSelectionItem;
-declare function createComboboxSelectionItems(parameters: CreateSelectionItemsParameters): void;
-declare function updateComboboxTabindices(state: OuiComboboxState, active?: HTMLElement): void;
-declare function updateComboboxAutocomplete(preview: OuiListboxPreview, state: OuiComboboxState, active?: HTMLElement): void;
-declare function updateComboboxSelection(state: OuiComboboxState, active: HTMLElement | undefined, added: boolean, selected?: HTMLElement[]): void;
-declare function updateComboboxSelectionItems(state: OuiComboboxState): void;
-//#endregion
-export { createComboboxAnchor, createComboboxButton, createComboboxContent, createComboboxSelection, createComboboxSelectionItem, createComboboxSelectionItems, updateComboboxAutocomplete, updateComboboxSelection, updateComboboxSelectionItems, updateComboboxTabindices };
+export declare function createComboboxAnchor(parameters: CreateListboxContentParameters): CreateAnchor;
+export declare function createComboboxButton(parameters: CreateListboxContentParameters): CreateAnchor;
+export declare function createComboboxContent(parameters: CreateListboxContentParameters): CreateListboxContent;
+export declare function createComboboxSelection(id: string, select: HTMLSelectElement): OuiComboboxSelection;
+export declare function createComboboxSelectionItem(option: HTMLElement, state?: OuiComboboxState): OuiComboboxSelectionItem;
+export declare function createComboboxSelectionItems(parameters: CreateSelectionItemsParameters): void;
+export declare function updateComboboxTabindices(state: OuiComboboxState, active?: HTMLElement): void;
+export declare function updateComboboxAutocomplete(preview: OuiListboxPreview, state: OuiComboboxState, active?: HTMLElement): void;
+export declare function updateComboboxSelection(state: OuiComboboxState, active: HTMLElement | undefined, added: boolean, selected?: HTMLElement[]): void;
+export declare function updateComboboxSelectionItems(state: OuiComboboxState): void;
+//#endregion

package/dist/js/combobox/dom.combobox.mjs

@@ -1,10 +1,10 @@
 import { getLocalization, localize } from "../l10n.mjs";
-import { _ as createListboxValueLabel, f as createListboxInput, l as createListboxFilter, m as createListboxMessage, p as createListboxList } from "../listbox.data-BWd0PCy7.mjs";
+import { _ as createListboxValueLabel, f as createListboxInput, l as createListboxFilter, m as createListboxMessage, p as createListboxList } from "../listbox.data-DQ7-x2uY.mjs";
 import { COMBOBOX_ATTRIBUTE_ANCHOR, COMBOBOX_ATTRIBUTE_SELECTION, COMBOBOX_ATTRIBUTE_SELECTION_ITEM } from "./constants.combobox.mjs";
 import { setAria } from "@oscarpalmer/toretto/aria";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
-import { getData } from "@oscarpalmer/toretto/data";
 import { createElement } from "@oscarpalmer/toretto/create";
+import { getData } from "@oscarpalmer/toretto/data";
 //#region src/js/combobox/dom.combobox.ts
 function createComboboxAnchor(parameters) {
 	const { select } = parameters;
@@ -29,7 +29,10 @@ function createComboboxButton(parameters) {
 			haspopup: "listbox",
 			labelledby: `${label.id} ${id}_value`
 		},
-		property: { textContent: multiple ? "" : select.selectedOptions[0]?.textContent ?? "" }
+		property: {
+			textContent: multiple ? "" : select.selectedOptions[0]?.textContent ?? "",
+			type: "button"
+		}
 	});
 	if (!multiple) return { element };
 	const container = createElement("div");
@@ -101,11 +104,15 @@ function createComboboxSelectionItem(option, state) {
 			[COMBOBOX_ATTRIBUTE_SELECTION_ITEM]: "",
 			tabindex: -1
 		},
-		data: { option: option.id }
+		data: { option: option.id },
+		property: { type: "button" }
 	});
 	const icon = createElement("span", {
 		aria: { hidden: true },
-		property: { innerHTML: "×" }
+		property: {
+			className: "oui-icon oui-icon--x",
+			innerHTML: ""
+		}
 	});
 	const label = createElement("span", { property: { textContent: option.textContent } });
 	button.append(icon, label);

package/dist/js/combobox/event.combobox.d.mts

@@ -1,23 +1,22 @@
-import { c as OuiListboxPreview } from "../listbox.model-CRReGOmu.mjs";
+import { c as OuiListboxPreview } from "../listbox.model-BHPA7GM4.mjs";
 import { OuiComboboxState } from "./models.combobox.mjs";
 //#region src/js/combobox/event.combobox.d.ts
-declare function onComboboxActivation(state: OuiComboboxState): void;
-declare function onComboboxApply(state: OuiComboboxState, option: HTMLElement | undefined, _: string[], added: boolean, selected?: HTMLElement[]): void;
-declare function onComboboxClickContent(event: PointerEvent, state: OuiComboboxState): void;
-declare function onComboboxEnter(state: OuiComboboxState): void;
-declare function onComboboxEscape(state: OuiComboboxState): void;
-declare function onComboboxFilter(preview: OuiListboxPreview, state: OuiComboboxState, update: boolean, active?: HTMLElement, emit?: boolean): void;
-declare function onComboboxFocusout(event: FocusEvent): void;
-declare function onComboboxInput(event: InputEvent): void;
-declare function onComboboxKeydown(event: KeyboardEvent): void;
-declare function onComboboxKeydownSelection(event: KeyboardEvent, state: OuiComboboxState, item: HTMLElement): void;
-declare function onComboboxPreview(preview: OuiListboxPreview, state: OuiComboboxState, active?: HTMLElement): void;
-declare function onComboboxRemoveSelection(state: OuiComboboxState, item: HTMLElement): void;
-declare function onComboboxNavigation(preview: OuiListboxPreview, state: OuiComboboxState, active?: HTMLElement): void;
-declare function onComboboxSelection(state: OuiComboboxState, hasSelection?: boolean): void;
-declare function onComboboxTab(state: OuiComboboxState): void;
-declare function onComboboxToggle(state: OuiComboboxState): void;
-declare function preventComboboxActivation(state: OuiComboboxState): boolean;
-declare function skipComboboxNavigation(state: OuiComboboxState): boolean;
-//#endregion
-export { onComboboxActivation, onComboboxApply, onComboboxClickContent, onComboboxEnter, onComboboxEscape, onComboboxFilter, onComboboxFocusout, onComboboxInput, onComboboxKeydown, onComboboxKeydownSelection, onComboboxNavigation, onComboboxPreview, onComboboxRemoveSelection, onComboboxSelection, onComboboxTab, onComboboxToggle, preventComboboxActivation, skipComboboxNavigation };
+export declare function onComboboxActivation(state: OuiComboboxState): void;
+export declare function onComboboxApply(state: OuiComboboxState, option: HTMLElement | undefined, _: string[], added: boolean, selected?: HTMLElement[]): void;
+export declare function onComboboxClickContent(event: PointerEvent, state: OuiComboboxState): void;
+export declare function onComboboxEnter(state: OuiComboboxState): void;
+export declare function onComboboxEscape(state: OuiComboboxState): void;
+export declare function onComboboxFilter(preview: OuiListboxPreview, state: OuiComboboxState, update: boolean, active?: HTMLElement, emit?: boolean): void;
+export declare function onComboboxFocusout(event: FocusEvent): void;
+export declare function onComboboxInput(event: InputEvent): void;
+export declare function onComboboxKeydown(event: KeyboardEvent): void;
+export declare function onComboboxKeydownSelection(event: KeyboardEvent, state: OuiComboboxState, item: HTMLElement): void;
+export declare function onComboboxPreview(preview: OuiListboxPreview, state: OuiComboboxState, active?: HTMLElement): void;
+export declare function onComboboxRemoveSelection(state: OuiComboboxState, item: HTMLElement): void;
+export declare function onComboboxNavigation(preview: OuiListboxPreview, state: OuiComboboxState, active?: HTMLElement): void;
+export declare function onComboboxSelection(state: OuiComboboxState, hasSelection?: boolean): void;
+export declare function onComboboxTab(state: OuiComboboxState): void;
+export declare function onComboboxToggle(state: OuiComboboxState): void;
+export declare function preventComboboxActivation(state: OuiComboboxState): boolean;
+export declare function skipComboboxNavigation(state: OuiComboboxState): boolean;
+//#endregion

package/dist/js/combobox/event.combobox.mjs

@@ -1,2 +1,2 @@
-import { C as skipComboboxNavigation, S as preventComboboxActivation, _ as onComboboxPreview, b as onComboboxTab, c as onComboboxClickContent, d as onComboboxFilter, f as onComboboxFocusout, g as onComboboxNavigation, h as onComboboxKeydownSelection, l as onComboboxEnter, m as onComboboxKeydown, o as onComboboxActivation, p as onComboboxInput, s as onComboboxApply, u as onComboboxEscape, v as onComboboxRemoveSelection, x as onComboboxToggle, y as onComboboxSelection } from "../state.combobox-4xq0FPCF.mjs";
+import { C as skipComboboxNavigation, S as preventComboboxActivation, _ as onComboboxPreview, b as onComboboxTab, c as onComboboxClickContent, d as onComboboxFilter, f as onComboboxFocusout, g as onComboboxNavigation, h as onComboboxKeydownSelection, l as onComboboxEnter, m as onComboboxKeydown, o as onComboboxActivation, p as onComboboxInput, s as onComboboxApply, u as onComboboxEscape, v as onComboboxRemoveSelection, x as onComboboxToggle, y as onComboboxSelection } from "../state.combobox-BWDFHwoi.mjs";
 export { onComboboxActivation, onComboboxApply, onComboboxClickContent, onComboboxEnter, onComboboxEscape, onComboboxFilter, onComboboxFocusout, onComboboxInput, onComboboxKeydown, onComboboxKeydownSelection, onComboboxNavigation, onComboboxPreview, onComboboxRemoveSelection, onComboboxSelection, onComboboxTab, onComboboxToggle, preventComboboxActivation, skipComboboxNavigation };

package/dist/js/combobox/index.d.mts

@@ -1,2 +1,2 @@
-import { a as setComboboxLocalizations, t as OuiComboboxElement } from "../index-EfkUSals.mjs";
+import { a as setComboboxLocalizations, t as OuiComboboxElement } from "../index-C5D3-oiI.mjs";
 export { OuiComboboxElement, setComboboxLocalizations };

package/dist/js/combobox/index.mjs

@@ -1,8 +1,8 @@
 import { updateLocalizations } from "../l10n.mjs";
-import { C as setListboxDisabled, D as setListboxReadonly, O as setListboxRequired, T as setListboxLimit, a as setListboxValue, o as setListboxValues, w as setListboxFilter } from "../listbox.data-BWd0PCy7.mjs";
+import { C as setListboxDisabled, D as setListboxReadonly, O as setListboxRequired, T as setListboxLimit, a as setListboxValue, o as setListboxValues, w as setListboxFilter } from "../listbox.data-DQ7-x2uY.mjs";
 import { attachListbox, detachListbox } from "../internal/listbox/listbox.state.mjs";
 import { COMBOBOX_TAGNAME } from "./constants.combobox.mjs";
-import { D as setComboboxLocalizations, a as onDetachCombobox, i as onAttachCombobox, n as comboboxStates, r as createComboboxState } from "../state.combobox-4xq0FPCF.mjs";
+import { D as setComboboxLocalizations, a as onDetachCombobox, i as onAttachCombobox, n as comboboxStates, r as createComboboxState } from "../state.combobox-BWDFHwoi.mjs";
 import { getAttribute } from "@oscarpalmer/toretto/attribute";
 import { parse } from "@oscarpalmer/atoms/string";
 //#region src/js/combobox/index.ts
@@ -42,6 +42,18 @@ var OuiComboboxElement = class extends HTMLElement {
 		setListboxFilter(this.#state, value);
 	}
 	/**
+	* Form element associated with the combobox
+	*/
+	get form() {
+		return this.#internals.form;
+	}
+	/**
+	* Label elements associated with the combobox
+	*/
+	get labels() {
+		return this.#internals.labels;
+	}
+	/**
 	* Maximum number of selected options
 	*/
 	get max() {
@@ -114,6 +126,18 @@ var OuiComboboxElement = class extends HTMLElement {
 		return this.#state.type;
 	}
 	/**
+	* Validation message for the combobox
+	*/
+	get validationMessage() {
+		return this.#internals.validationMessage;
+	}
+	/**
+	* Validity state for the combobox
+	*/
+	get validity() {
+		return this.#internals.validity;
+	}
+	/**
 	* Current value
 	*/
 	get value() {
@@ -137,6 +161,12 @@ var OuiComboboxElement = class extends HTMLElement {
 	set values(values) {
 		setListboxValues(this.#state, values);
 	}
+	/**
+	* Can the combobox be validated?
+	*/
+	get willValidate() {
+		return this.#internals.willValidate;
+	}
 	constructor() {
 		super();
 		this.#internals = this.attachInternals();
@@ -155,6 +185,14 @@ var OuiComboboxElement = class extends HTMLElement {
 		}
 	}
 	/**
+	* Check if the combobox is valid
+	*
+	* @returns `true` if the combobox is valid, otherwise `false`
+	*/
+	checkValidity() {
+		return this.#internals.checkValidity();
+	}
+	/**
 	* Clear all selected options
 	*/
 	clear() {
@@ -180,6 +218,22 @@ var OuiComboboxElement = class extends HTMLElement {
 		if (this.#state == null) this.#restored = parsed;
 		else setListboxValues(this.#state, parsed);
 	}
+	/**
+	* Check if the combobox is valid and report any validation errors
+	*
+	* @returns `true` if the combobox is valid, otherwise `false`
+	*/
+	reportValidity() {
+		return this.#internals.reportValidity();
+	}
+	/**
+	* Set a custom validation message for the combobox
+	*
+	* @param message Validation message
+	*/
+	setCustomValidity(message) {
+		this.#internals.setValidity({ customError: message !== "" }, message, this);
+	}
 	setLocalizations(first, second) {
 		updateLocalizations(this.#state.localizations.global, typeof first === "string" ? { [first]: second } : first, this.#state.localizations.component);
 	}

package/dist/js/combobox/misc.combobox.d.mts

@@ -1,2 +1,2 @@
-import { a as setComboboxLocalizations, i as hasTextSelection, n as getComboboxAutoComplete, o as updateComboboxLocalizations, r as getComboboxId } from "../index-EfkUSals.mjs";
+import { a as setComboboxLocalizations, i as hasTextSelection, n as getComboboxAutoComplete, o as updateComboboxLocalizations, r as getComboboxId } from "../index-C5D3-oiI.mjs";
 export { getComboboxAutoComplete, getComboboxId, hasTextSelection, setComboboxLocalizations, updateComboboxLocalizations };

package/dist/js/combobox/misc.combobox.mjs

@@ -1,2 +1,2 @@
-import { D as setComboboxLocalizations, E as hasTextSelection, O as updateComboboxLocalizations, T as getComboboxId, w as getComboboxAutoComplete } from "../state.combobox-4xq0FPCF.mjs";
+import { D as setComboboxLocalizations, E as hasTextSelection, O as updateComboboxLocalizations, T as getComboboxId, w as getComboboxAutoComplete } from "../state.combobox-BWDFHwoi.mjs";
 export { getComboboxAutoComplete, getComboboxId, hasTextSelection, setComboboxLocalizations, updateComboboxLocalizations };

package/dist/js/combobox/models.combobox.d.mts

@@ -1,44 +1,43 @@
-import { d as OuiListboxType, l as OuiListboxState } from "../listbox.model-CRReGOmu.mjs";
-import { r as OuiFloatable } from "../floatable.embedded-Bct4U5Dm.mjs";
+import { r as OuiFloatable } from "../floatable.embedded-DQYkXt8X.mjs";
+import { d as OuiListboxType, l as OuiListboxState } from "../listbox.model-BHPA7GM4.mjs";
 //#region src/js/combobox/models.combobox.d.ts
-type OuiComboboxAnchor = {
+export type OuiComboboxAnchor = {
   container?: HTMLElement;
   element: HTMLElement;
 };
-type OuiComboboxFilter = {
+export type OuiComboboxFilter = {
   element: HTMLInputElement;
   value: string;
 };
-type OuiComboboxGroup = {
+export type OuiComboboxGroup = {
   element: HTMLElement;
   header: HTMLElement;
   options: HTMLElement[];
 };
-type OuiComboboxLabel = {
+export type OuiComboboxLabel = {
   element: HTMLLabelElement;
   id: string;
 };
-type OuiComboboxOptions = {
+export type OuiComboboxOptions = {
   all: HTMLElement[];
   selected: HTMLElement[];
 };
-type OuiComboboxSelection = {
+export type OuiComboboxSelection = {
   container: HTMLElement;
   items: OuiComboboxSelectionItem[];
 };
-type OuiComboboxSelectionItem = {
+export type OuiComboboxSelectionItem = {
   button: HTMLButtonElement;
   element: HTMLElement;
 };
-type OuiComboboxState = {
+export type OuiComboboxState = {
   anchor: OuiComboboxAnchor;
   floatable: OuiFloatable;
   selection?: OuiComboboxSelection;
   type: OuiListboxType;
 } & OuiListboxState;
-type OuiComboboxValues = {
+export type OuiComboboxValues = {
   current: string[];
   initial: string[];
 };
-//#endregion
-export { OuiComboboxAnchor, OuiComboboxFilter, OuiComboboxGroup, OuiComboboxLabel, OuiComboboxOptions, OuiComboboxSelection, OuiComboboxSelectionItem, OuiComboboxState, OuiComboboxValues };
+//#endregion

package/dist/js/combobox/state.combobox.d.mts

@@ -1,12 +1,11 @@
 import { t as OuiLocalizations } from "../l10n-Bn-7RcwR.mjs";
-import { o as OuiListboxLocalizations, u as OuiListboxStates } from "../listbox.model-CRReGOmu.mjs";
+import { o as OuiListboxLocalizations, u as OuiListboxStates } from "../listbox.model-BHPA7GM4.mjs";
 import { OuiComboboxState } from "./models.combobox.mjs";
-import { t as OuiComboboxElement } from "../index-EfkUSals.mjs";
+import { t as OuiComboboxElement } from "../index-C5D3-oiI.mjs";
 //#region src/js/combobox/state.combobox.d.ts
-declare function createComboboxState(element: OuiComboboxElement, internals: ElementInternals): OuiComboboxState;
-declare function onAttachCombobox(state: OuiComboboxState): void;
-declare function onDetachCombobox(state: OuiComboboxState): void;
-declare const comboboxLocalizations: OuiLocalizations<OuiListboxLocalizations>;
-declare const comboboxStates: OuiListboxStates<OuiComboboxState>;
-//#endregion
-export { comboboxLocalizations, comboboxStates, createComboboxState, onAttachCombobox, onDetachCombobox };
+export declare function createComboboxState(element: OuiComboboxElement, internals: ElementInternals): OuiComboboxState;
+export declare function onAttachCombobox(state: OuiComboboxState): void;
+export declare function onDetachCombobox(state: OuiComboboxState): void;
+export declare const comboboxLocalizations: OuiLocalizations<OuiListboxLocalizations>;
+export declare const comboboxStates: OuiListboxStates<OuiComboboxState>;
+//#endregion

package/dist/js/combobox/state.combobox.mjs

@@ -1,2 +1,2 @@
-import { a as onDetachCombobox, i as onAttachCombobox, n as comboboxStates, r as createComboboxState, t as comboboxLocalizations } from "../state.combobox-4xq0FPCF.mjs";
+import { a as onDetachCombobox, i as onAttachCombobox, n as comboboxStates, r as createComboboxState, t as comboboxLocalizations } from "../state.combobox-BWDFHwoi.mjs";
 export { comboboxLocalizations, comboboxStates, createComboboxState, onAttachCombobox, onDetachCombobox };