@oscarpalmer/oui 0.38.0 → 0.40.0

package/dist/js/combobox/{dom.combobox.mjs → combobox.dom.mjs}

@@ -1,11 +1,11 @@
-import { getLocalization, localize } from "../l10n.mjs";
-import { _ as createListboxValueLabel, f as createListboxInput, l as createListboxFilter, m as createListboxMessage, p as createListboxList } from "../listbox.data-C7CRa5Ya.mjs";
-import { COMBOBOX_ATTRIBUTE_ANCHOR, COMBOBOX_ATTRIBUTE_SELECTION, COMBOBOX_ATTRIBUTE_SELECTION_ITEM } from "./constants.combobox.mjs";
+import { getLocalization, localize } from "../l10n/index.mjs";
+import { _ as createListboxValueLabel, f as createListboxInput, l as createListboxFilter, m as createListboxMessage, p as createListboxList } from "../listbox.data-BQyZGKgr.mjs";
+import { COMBOBOX_ATTRIBUTE_ANCHOR, COMBOBOX_ATTRIBUTE_SELECTION, COMBOBOX_ATTRIBUTE_SELECTION_ITEM } from "./combobox.constants.mjs";
 import { setAria } from "@oscarpalmer/toretto/aria";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { createElement } from "@oscarpalmer/toretto/create";
 import { getData } from "@oscarpalmer/toretto/data";
-//#region src/js/combobox/dom.combobox.ts
+//#region src/js/combobox/combobox.dom.ts
 function createComboboxAnchor(parameters) {
 	const { select } = parameters;
 	let container;
@@ -94,7 +94,7 @@ function createComboboxSelectionItem(option, state) {
 	const optionLabel = option.textContent;
 	const optionValue = getData(option, "value", false) ?? "";
 	const element = createElement("li");
-	const localization = state == null ? option.textContent : getLocalization(state.localizations.global, state.host, "remove", state.localizations.component);
+	const localization = state == null ? option.textContent : getLocalization(state.component.localizations.global, state.component.host, "remove", state.component.localizations.component);
 	const button = createElement("button", {
 		aria: { label: localize(localization, {
 			label: optionLabel,
@@ -109,7 +109,10 @@ function createComboboxSelectionItem(option, state) {
 	});
 	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);
@@ -130,71 +133,75 @@ function createComboboxSelectionItems(parameters) {
 	}
 }
 function updateComboboxTabindices(state, active) {
-	if (active == null || state.selection == null) return;
-	const next = state.selection.items.find((item) => getData(item.button, "option", false) === active.id);
+	const { selection } = state.component;
+	if (active == null || selection == null) return;
+	const next = selection.items.find((item) => getData(item.button, "option", false) === active.id);
 	if (next == null) return;
-	const { length } = state.selection.items;
+	const { length } = selection.items;
 	for (let index = 0; index < length; index += 1) {
-		const item = state.selection.items[index];
+		const item = selection.items[index];
 		item.button.tabIndex = item === next ? 0 : -1;
 	}
 	next.button.focus();
 }
 function updateComboboxAutocomplete(preview, state, active) {
-	if (state.multiple) return;
-	const content = active?.textContent ?? state.filter.element.value;
-	if (preview === "typed" && !content.toLocaleLowerCase().startsWith(state.filter.element.value.toLocaleLowerCase())) return;
-	if (state.anchor.element instanceof HTMLInputElement) {
+	const { anchor, filter, multiple } = state.component;
+	if (multiple) return;
+	const content = active?.textContent ?? filter.element.value;
+	if (preview === "typed" && !content.toLocaleLowerCase().startsWith(filter.element.value.toLocaleLowerCase())) return;
+	if (anchor.element instanceof HTMLInputElement) {
 		const contentLength = content.length;
-		const filterLength = state.filter.element.value.length;
+		const filterLength = filter.element.value.length;
 		if (preview === "set" || preview === "typed") {
-			state.anchor.element.value = content;
-			state.anchor.element.setSelectionRange(preview === "typed" ? filterLength : contentLength, contentLength);
+			anchor.element.value = content;
+			anchor.element.setSelectionRange(preview === "typed" ? filterLength : contentLength, contentLength);
 		}
-	} else state.anchor.element.textContent = content;
+	} else anchor.element.textContent = content;
 }
 function updateComboboxSelection(state, active, added, selected) {
-	if (state.selection == null) return;
+	const { anchor, selection } = state.component;
+	if (selection == null) return;
 	let options = active == null ? [] : [active];
 	if (added && selected != null) {
 		options = selected;
-		const { length } = state.selection.items;
-		for (let index = 0; index < length; index += 1) state.selection.items[index].element.remove();
-		state.selection.items.splice(0);
+		const { length } = selection.items;
+		for (let index = 0; index < length; index += 1) selection.items[index].element.remove();
+		selection.items.splice(0);
 	}
 	if (added) {
 		createComboboxSelectionItems({
 			options,
 			state,
-			container: state.selection.container,
-			items: state.selection.items
+			container: selection.container,
+			items: selection.items
 		});
 		return;
 	}
-	let current = state.selection.items.findIndex((item) => getData(item.button, "option", false) === active?.id);
+	let current = selection.items.findIndex((item) => getData(item.button, "option", false) === active?.id);
 	if (current === -1) return;
-	state.selection.items[current].element.remove();
-	state.selection.items.splice(current, 1);
-	if (state.selection.items.length === 0) {
-		state.anchor.element.focus();
+	selection.items[current].element.remove();
+	selection.items.splice(current, 1);
+	if (selection.items.length === 0) {
+		anchor.element.focus();
 		return;
 	}
-	const { length } = state.selection.items;
+	const { length } = selection.items;
 	if (current < 0) current = 0;
 	else if (current >= length) current = length - 1;
 	for (let index = 0; index < length; index += 1) {
-		const { button } = state.selection.items[index];
+		const { button } = selection.items[index];
 		button.tabIndex = index === current ? 0 : -1;
 	}
-	state.selection.items[current].button.focus();
+	selection.items[current].button.focus();
 }
 function updateComboboxSelectionItems(state) {
-	if (state.selection == null) return;
-	const localization = getLocalization(state.localizations.global, state.host, "remove", state.localizations.component);
-	const { length } = state.selection.items;
+	const { host, localizations, options, selection } = state.component;
+	if (selection == null) return;
+	const localization = getLocalization(localizations.global, host, "remove", localizations.component);
+	const { length } = selection.items;
 	for (let index = 0; index < length; index += 1) {
-		const item = state.selection.items[index];
-		const option = state.options.selected.find((option) => option.id === getData(item.button, "option", false));
+		const item = selection.items[index];
+		const option = options.selected.find((option) => option.id === getData(item.button, "option", false));
 		if (option == null) continue;
 		const optionLabel = option.textContent;
 		const optionValue = getData(option, "value", false) ?? "";

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

@@ -0,0 +1,22 @@
+import { c as OuiListboxPreview } from "../listbox.model-CuBOj4qe.mjs";
+import { c as OuiComboboxState } from "../combobox.model-oDV06XCN.mjs";
+//#region src/js/combobox/combobox.event.d.ts
+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 → combobox.event.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-Qm3FWzYW.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 "../combobox.state-BfJ3Hxg8.mjs";
 export { onComboboxActivation, onComboboxApply, onComboboxClickContent, onComboboxEnter, onComboboxEscape, onComboboxFilter, onComboboxFocusout, onComboboxInput, onComboboxKeydown, onComboboxKeydownSelection, onComboboxNavigation, onComboboxPreview, onComboboxRemoveSelection, onComboboxSelection, onComboboxTab, onComboboxToggle, preventComboboxActivation, skipComboboxNavigation };

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

@@ -0,0 +1,2 @@
+import { a as updateComboboxLocalizations, i as setComboboxLocalizations, n as getComboboxId, r as hasTextSelection, t as getComboboxAutoComplete } from "../combobox.misc-C1tPZZDi.mjs";
+export { getComboboxAutoComplete, getComboboxId, hasTextSelection, setComboboxLocalizations, updateComboboxLocalizations };

package/dist/js/combobox/{misc.combobox.mjs → combobox.misc.mjs}

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

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

@@ -0,0 +1,2 @@
+import { a as OuiComboboxOptions, c as OuiComboboxState, i as OuiComboboxLabel, l as OuiComboboxValues, n as OuiComboboxFilter, o as OuiComboboxSelection, r as OuiComboboxGroup, s as OuiComboboxSelectionItem, t as OuiComboboxAnchor } from "../combobox.model-oDV06XCN.mjs";
+export { OuiComboboxAnchor, OuiComboboxFilter, OuiComboboxGroup, OuiComboboxLabel, OuiComboboxOptions, OuiComboboxSelection, OuiComboboxSelectionItem, OuiComboboxState, OuiComboboxValues };

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

@@ -0,0 +1,10 @@
+import { c as OuiLocalizations } from "../l10n.model-D6a9frgl.mjs";
+import { o as OuiListboxLocalizations } from "../listbox.model-CuBOj4qe.mjs";
+import { c as OuiComboboxState } from "../combobox.model-oDV06XCN.mjs";
+//#region src/js/combobox/combobox.state.d.ts
+export declare function initializeCombobox(element: HTMLElement, state: OuiComboboxState): void;
+export declare function onAttachCombobox(state: OuiComboboxState): void;
+export declare function onDetachCombobox(state: OuiComboboxState): void;
+export declare const comboboxLocalizations: OuiLocalizations<OuiListboxLocalizations>;
+export declare const comboboxes: Set<OuiComboboxState>;
+//#endregion

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

@@ -0,0 +1,2 @@
+import { a as onDetachCombobox, i as onAttachCombobox, n as comboboxes, r as initializeCombobox, t as comboboxLocalizations } from "../combobox.state-BfJ3Hxg8.mjs";
+export { comboboxLocalizations, comboboxes, initializeCombobox, onAttachCombobox, onDetachCombobox };

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

@@ -1,2 +1,163 @@
-import { a as setComboboxLocalizations, t as OuiComboboxElement } from "../index-DJdFlTLm.mjs";
-export { OuiComboboxElement, setComboboxLocalizations };
+import { f as OuiListboxType, o as OuiListboxLocalizations } from "../listbox.model-CuBOj4qe.mjs";
+import { a as COMBOBOX_SYMBOL, o as COMBOBOX_TAGNAME } from "../combobox.constants-DZVkMP5g.mjs";
+import { c as OuiComboboxState } from "../combobox.model-oDV06XCN.mjs";
+import { i as setComboboxLocalizations } from "../combobox.misc-C1tPZZDi.mjs";
+//#region src/js/combobox/index.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    [COMBOBOX_TAGNAME]: OuiComboboxElement & {
+      [COMBOBOX_SYMBOL]: OuiComboboxState;
+    };
+  }
+}
+export interface OuiComboboxElement {
+  [COMBOBOX_SYMBOL]: OuiComboboxState;
+}
+export declare class OuiComboboxElement extends HTMLElement {
+  static formAssociated: boolean;
+  static observedAttributes: string[];
+  /**
+   * Is the combobox disabled?
+   */
+  get disabled(): boolean;
+  /**
+   * Should the combobox be disabled?
+   */
+  set disabled(value: boolean);
+  /**
+   * Current filter value
+   */
+  get filter(): string;
+  /**
+   * Set the filter value
+   */
+  set filter(value: string);
+  /**
+   * Form element associated with the combobox
+   */
+  get form(): HTMLFormElement | null;
+  /**
+   * Label elements associated with the combobox
+   */
+  get labels(): NodeList;
+  /**
+   * Maximum number of selected options
+   */
+  get max(): number | undefined;
+  /**
+   * Set the maximum number of selected options
+   */
+  set max(value: number);
+  /**
+   * Minimum number of selected options
+   */
+  get min(): number | undefined;
+  /**
+   * Set the minimum number of selected options
+   */
+  set min(value: number);
+  /**
+   * Does the combobox allow multiple values?
+   */
+  get multiple(): boolean;
+  /**
+   * Name of the combobox
+   */
+  get name(): string;
+  /**
+   * Is the combobox readonly?
+   */
+  get readonly(): boolean;
+  /**
+   * Should the combobox be readonly?
+   */
+  set readonly(value: boolean);
+  /**
+   * Is the combobox required?
+   */
+  get required(): boolean;
+  /**
+   * Should the combobox be required?
+   */
+  set required(value: boolean);
+  /**
+   * Selected options
+   */
+  get selected(): HTMLElement[];
+  /**
+   * Type of combobox
+   */
+  get type(): OuiListboxType;
+  /**
+   * Validation message for the combobox
+   */
+  get validationMessage(): string;
+  /**
+   * Validity state for the combobox
+   */
+  get validity(): ValidityState;
+  /**
+   * Current value
+   */
+  get value(): string;
+  /**
+   * Set the value
+   */
+  set value(value: unknown);
+  /**
+   * Current values
+   */
+  get values(): string[];
+  /**
+   * Set the values
+   */
+  set values(values: unknown[]);
+  /**
+   * Can the combobox be validated?
+   */
+  get willValidate(): boolean;
+  constructor();
+  attributeChangedCallback(name: string, _: string | null, value: string | null): void;
+  /**
+   * Check if the combobox is valid
+   *
+   * @returns `true` if the combobox is valid, otherwise `false`
+   */
+  checkValidity(): boolean;
+  /**
+   * Clear all selected options
+   */
+  clear(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  formDisabledCallback(disabled: boolean): void;
+  formResetCallback(): void;
+  formStateRestoreCallback(state: unknown, reason: unknown): void;
+  /**
+   * Check if the combobox is valid and report any validation errors
+   *
+   * @returns `true` if the combobox is valid, otherwise `false`
+   */
+  reportValidity(): boolean;
+  /**
+   * Set a custom validation message for the combobox
+   *
+   * @param message Validation message
+   */
+  setCustomValidity(message: string): void;
+  /**
+   * Set combobox localizations for a specific language
+   *
+   * @param language Language code
+   * @param localizations Localizations for language
+   */
+  setLocalizations(language: string, localizations: Partial<OuiListboxLocalizations>): void;
+  /**
+   * Set combobox localizations for one or more languages
+   *
+   * @param localizations Localizations for one or more languages
+   */
+  setLocalizations(localizations: Record<string, Partial<OuiListboxLocalizations>>): void;
+}
+//#endregion
+export { 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-C7CRa5Ya.mjs";
+import { updateLocalizations } from "../l10n/index.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-BQyZGKgr.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-Qm3FWzYW.mjs";
+import { COMBOBOX_SYMBOL, COMBOBOX_TAGNAME } from "./combobox.constants.mjs";
+import { D as setComboboxLocalizations, a as onDetachCombobox, i as onAttachCombobox, n as comboboxes, r as initializeCombobox } from "../combobox.state-BfJ3Hxg8.mjs";
 import { getAttribute } from "@oscarpalmer/toretto/attribute";
 import { parse } from "@oscarpalmer/atoms/string";
 //#region src/js/combobox/index.ts
@@ -14,68 +14,65 @@ var OuiComboboxElement = class extends HTMLElement {
 		"required",
 		"value"
 	];
-	#internals;
-	#restored;
-	#state;
 	/**
 	* Is the combobox disabled?
 	*/
 	get disabled() {
-		return this.#state?.disabled ?? false;
+		return this[COMBOBOX_SYMBOL].component?.disabled ?? false;
 	}
 	/**
 	* Should the combobox be disabled?
 	*/
 	set disabled(value) {
-		if (typeof value === "boolean" && value !== this.disabled) setListboxDisabled(this.#state, value);
+		if (typeof value === "boolean" && value !== this.disabled) setListboxDisabled(this[COMBOBOX_SYMBOL], value);
 	}
 	/**
 	* Current filter value
 	*/
 	get filter() {
-		return this.#state.filter.element.value;
+		return this[COMBOBOX_SYMBOL].component?.filter.element.value ?? "";
 	}
 	/**
 	* Set the filter value
 	*/
 	set filter(value) {
-		setListboxFilter(this.#state, value);
+		setListboxFilter(this[COMBOBOX_SYMBOL], value);
 	}
 	/**
 	* Form element associated with the combobox
 	*/
 	get form() {
-		return this.#internals.form;
+		return this[COMBOBOX_SYMBOL].form.internals.form;
 	}
 	/**
 	* Label elements associated with the combobox
 	*/
 	get labels() {
-		return this.#internals.labels;
+		return this[COMBOBOX_SYMBOL].form.internals.labels;
 	}
 	/**
 	* Maximum number of selected options
 	*/
 	get max() {
-		return this.#state?.max;
+		return this[COMBOBOX_SYMBOL].component?.max;
 	}
 	/**
 	* Set the maximum number of selected options
 	*/
 	set max(value) {
-		setListboxLimit("max", this.#state, value);
+		setListboxLimit("max", this[COMBOBOX_SYMBOL], value);
 	}
 	/**
 	* Minimum number of selected options
 	*/
 	get min() {
-		return this.#state?.min;
+		return this[COMBOBOX_SYMBOL].component?.min;
 	}
 	/**
 	* Set the minimum number of selected options
 	*/
 	set min(value) {
-		setListboxLimit("min", this.#state, value);
+		setListboxLimit("min", this[COMBOBOX_SYMBOL], value);
 	}
 	/**
 	* Does the combobox allow multiple values?
@@ -93,93 +90,97 @@ var OuiComboboxElement = class extends HTMLElement {
 	* Is the combobox readonly?
 	*/
 	get readonly() {
-		return this.#state?.readonly ?? false;
+		return this[COMBOBOX_SYMBOL].component?.readonly ?? false;
 	}
 	/**
 	* Should the combobox be readonly?
 	*/
 	set readonly(value) {
-		if (typeof value === "boolean" && value !== this.readonly) setListboxReadonly(this.#state, value);
+		if (typeof value === "boolean" && value !== this.readonly) setListboxReadonly(this[COMBOBOX_SYMBOL], value);
 	}
 	/**
 	* Is the combobox required?
 	*/
 	get required() {
-		return this.#state?.required ?? false;
+		return this[COMBOBOX_SYMBOL].component?.required ?? false;
 	}
 	/**
 	* Should the combobox be required?
 	*/
 	set required(value) {
-		if (typeof value === "boolean" && value !== this.required) setListboxRequired(this.#state, value);
+		if (typeof value === "boolean" && value !== this.required) setListboxRequired(this[COMBOBOX_SYMBOL], value);
 	}
 	/**
 	* Selected options
 	*/
 	get selected() {
-		return this.#state.options.selected.slice();
+		return this[COMBOBOX_SYMBOL].component?.options.selected.slice() ?? [];
 	}
 	/**
 	* Type of combobox
 	*/
 	get type() {
-		return this.#state.type;
+		return this[COMBOBOX_SYMBOL].component?.type;
 	}
 	/**
 	* Validation message for the combobox
 	*/
 	get validationMessage() {
-		return this.#internals.validationMessage;
+		return this[COMBOBOX_SYMBOL].form.internals.validationMessage;
 	}
 	/**
 	* Validity state for the combobox
 	*/
 	get validity() {
-		return this.#internals.validity;
+		return this[COMBOBOX_SYMBOL].form.internals.validity;
 	}
 	/**
 	* Current value
 	*/
 	get value() {
-		return this.#state.values.current[0];
+		return this[COMBOBOX_SYMBOL].component?.values.current[0] ?? "";
 	}
 	/**
 	* Set the value
 	*/
 	set value(value) {
-		setListboxValue(this.#state, value);
+		setListboxValue(this[COMBOBOX_SYMBOL], value);
 	}
 	/**
 	* Current values
 	*/
 	get values() {
-		return this.#state.values.current.slice();
+		return this[COMBOBOX_SYMBOL].component?.values.current.slice() ?? [];
 	}
 	/**
 	* Set the values
 	*/
 	set values(values) {
-		setListboxValues(this.#state, values);
+		setListboxValues(this[COMBOBOX_SYMBOL], values);
 	}
 	/**
 	* Can the combobox be validated?
 	*/
 	get willValidate() {
-		return this.#internals.willValidate;
+		return this[COMBOBOX_SYMBOL].form.internals.willValidate;
 	}
 	constructor() {
 		super();
-		this.#internals = this.attachInternals();
+		this[COMBOBOX_SYMBOL] = {
+			component: null,
+			form: { internals: this.attachInternals() }
+		};
 	}
 	attributeChangedCallback(name, _, value) {
-		if (this.#state == null) return;
+		const state = this[COMBOBOX_SYMBOL];
+		if (state == null) return;
 		switch (name) {
 			case "required":
 				this[name] = this.hasAttribute(name);
 				break;
 			case "max":
 			case "min":
-				setListboxLimit(name, this.#state, value);
+				setListboxLimit(name, state, value);
 				break;
 			case "value": this.value = value ?? "";
 		}
@@ -190,33 +191,40 @@ var OuiComboboxElement = class extends HTMLElement {
 	* @returns `true` if the combobox is valid, otherwise `false`
 	*/
 	checkValidity() {
-		return this.#internals.checkValidity();
+		return this[COMBOBOX_SYMBOL].form.internals.checkValidity();
 	}
 	/**
 	* Clear all selected options
 	*/
 	clear() {
-		setListboxValues(this.#state, []);
+		setListboxValues(this[COMBOBOX_SYMBOL], []);
 	}
 	connectedCallback() {
-		if (this.#state == null) this.#initialize();
-		else attachListbox(this.#state, comboboxStates, onAttachCombobox);
+		const state = this[COMBOBOX_SYMBOL];
+		if (state.component == null) initializeCombobox(this, state);
+		else attachListbox(state, comboboxes, onAttachCombobox);
 	}
 	disconnectedCallback() {
-		if (this.#state != null) detachListbox(this.#state, comboboxStates, onDetachCombobox);
+		const state = this[COMBOBOX_SYMBOL];
+		if (state.component != null) detachListbox(state, comboboxes, onDetachCombobox);
 	}
 	formDisabledCallback(disabled) {
 		this.disabled = disabled;
 	}
 	formResetCallback() {
-		setListboxValues(this.#state, this.#state.values.initial);
+		const state = this[COMBOBOX_SYMBOL];
+		if (state.component != null) setListboxValues(state, state.component.values.initial);
 	}
 	formStateRestoreCallback(state, reason) {
 		if (reason !== "restore") return;
 		const parsed = typeof state === "string" ? parse(state) : void 0;
 		if (!Array.isArray(parsed)) return;
-		if (this.#state == null) this.#restored = parsed;
-		else setListboxValues(this.#state, parsed);
+		const { component, form } = this[COMBOBOX_SYMBOL];
+		if (component == null) form.restored = parsed;
+		else setListboxValues({
+			component,
+			form
+		}, parsed);
 	}
 	/**
 	* Check if the combobox is valid and report any validation errors
@@ -224,7 +232,7 @@ var OuiComboboxElement = class extends HTMLElement {
 	* @returns `true` if the combobox is valid, otherwise `false`
 	*/
 	reportValidity() {
-		return this.#internals.reportValidity();
+		return this[COMBOBOX_SYMBOL].form.internals.reportValidity();
 	}
 	/**
 	* Set a custom validation message for the combobox
@@ -232,18 +240,11 @@ var OuiComboboxElement = class extends HTMLElement {
 	* @param message Validation message
 	*/
 	setCustomValidity(message) {
-		this.#internals.setValidity({ customError: message !== "" }, message, this);
+		this[COMBOBOX_SYMBOL].form.internals.setValidity({ customError: message !== "" }, message, this);
 	}
 	setLocalizations(first, second) {
-		updateLocalizations(this.#state.localizations.global, typeof first === "string" ? { [first]: second } : first, this.#state.localizations.component);
-	}
-	#initialize() {
-		this.tabIndex = -1;
-		this.#state = createComboboxState(this, this.#internals);
-		if (this.#restored != null) {
-			setListboxValues(this.#state, this.#restored);
-			this.#restored = void 0;
-		}
+		const { localizations } = this[COMBOBOX_SYMBOL].component;
+		updateLocalizations(localizations.global, typeof first === "string" ? { [first]: second } : first, localizations.component);
 	}
 };
 customElements.define(COMBOBOX_TAGNAME, OuiComboboxElement);