@oscarpalmer/oui 0.38.0 → 0.40.0

package/dist/js/{l10n.mjs → l10n/index.mjs}

@@ -1,26 +1,44 @@
+import { L10N_MESSAGE_ITEM_CREATE, L10N_MESSAGE_ITEM_UPDATE_KEY, L10N_MESSAGE_ITEM_UPDATE_VALUE, L10N_MESSAGE_OBJECT_CREATE, L10N_MESSAGE_OBJECT_UPDATE, L10N_SYMBOL } from "./l10n.model.mjs";
+import { isPlainObject } from "@oscarpalmer/atoms/is";
 import { getString } from "@oscarpalmer/atoms/string";
-//#region src/js/l10n.ts
-var OuiLocalizations = class {
-	defaults;
-	keys;
-	values = {};
-	constructor(defaults) {
-		this.defaults = defaults;
-		this.keys = new Set(Object.keys(defaults));
-	}
-	get(element, key, localizations) {
-		return getLocalization(this, element, key, localizations);
-	}
-	set(first, second) {
-		updateLocalizations(this, typeof first === "string" ? { [first]: second } : first, this.values);
+//#region src/js/l10n/index.ts
+function OuiLocalizations(defaults) {
+	this[L10N_SYMBOL] = {
+		defaults,
+		keys: new Set(Object.keys(defaults)),
+		values: {}
+	};
+}
+OuiLocalizations.prototype.get = getLocalizationValue;
+OuiLocalizations.prototype.set = setLocalizationValues;
+Object.defineProperties(OuiLocalizations.prototype, {
+	defaults: {
+		enumerable: true,
+		get: getDefaults
+	},
+	keys: {
+		enumerable: true,
+		get: getKeys
 	}
-};
+});
+function createLocalizations(defaults) {
+	if (!isPlainObject(defaults) || Object.keys(defaults).length === 0) throw new Error(L10N_MESSAGE_OBJECT_CREATE);
+	if (!Object.values(defaults).every(isValidLocalization)) throw new Error(L10N_MESSAGE_ITEM_CREATE);
+	return new OuiLocalizations(defaults);
+}
+function getDefaults() {
+	return { ...this[L10N_SYMBOL].defaults };
+}
+function getKeys() {
+	return [...this[L10N_SYMBOL].keys];
+}
 function getLanguage(element) {
 	return (element.closest("[lang]")?.getAttribute("lang") ?? document.documentElement.lang).toLowerCase();
 }
 function getLocalization(localizations, element, key, value) {
 	const language = getLanguage(element);
-	const values = [value, localizations.values];
+	const state = localizations[L10N_SYMBOL];
+	const values = [value, state.values];
 	const { length } = values;
 	let localization;
 	let shortLanguage;
@@ -33,10 +51,13 @@ function getLocalization(localizations, element, key, value) {
 		localization = value?.[shortLanguage]?.[key];
 		if (localization != null) break;
 	}
-	return localization ?? localizations.defaults[key];
+	return localization ?? state.defaults[key];
 }
-function getLocalizations(defaults) {
-	return new OuiLocalizations(defaults);
+function getLocalizationValue(element, key, localizations) {
+	return getLocalization(this, element, key, localizations);
+}
+function isValidLocalization(value) {
+	return typeof value === "string" || typeof value === "function";
 }
 function localize(localization, data, parameters) {
 	if (typeof localization === "function") return localization(...parameters);
@@ -50,9 +71,13 @@ function localize(localization, data, parameters) {
 	}
 	return localized;
 }
+function setLocalizationValues(first, second) {
+	updateLocalizations(this, typeof first === "string" ? { [first]: second } : first, this[L10N_SYMBOL].values);
+}
 function updateLocalizations(instance, values, destination, onAfter) {
-	if (typeof values !== "object" || values == null) return;
-	const localizations = destination ?? instance.values;
+	if (typeof values !== "object" || values == null) throw new Error(L10N_MESSAGE_OBJECT_UPDATE);
+	const state = instance[L10N_SYMBOL];
+	const localizations = destination ?? state.values;
 	const languages = Object.keys(values);
 	const languagesLength = languages.length;
 	let updated = false;
@@ -68,7 +93,9 @@ function updateLocalizations(instance, values, destination, onAfter) {
 			const key = keys[keysIndex];
 			const keyValue = languageValue[key];
 			const normalizedKey = key.toLowerCase();
-			if (instance.keys.has(normalizedKey) && (typeof keyValue === "string" || typeof keyValue === "function")) {
+			if (!state.keys.has(normalizedKey)) throw new Error(L10N_MESSAGE_ITEM_UPDATE_KEY);
+			if (!isValidLocalization(keyValue)) throw new Error(L10N_MESSAGE_ITEM_UPDATE_VALUE);
+			if (state.keys.has(normalizedKey) && isValidLocalization(keyValue)) {
 				updated = true;
 				localizations[normalizedLanguage][normalizedKey] = keyValue;
 			}
@@ -77,4 +104,4 @@ function updateLocalizations(instance, values, destination, onAfter) {
 	if (updated && typeof onAfter === "function") onAfter();
 }
 //#endregion
-export { OuiLocalizations, getLanguage, getLocalization, getLocalizations, localize, updateLocalizations };
+export { createLocalizations, getLanguage, getLocalization, localize, updateLocalizations };

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

@@ -0,0 +1,2 @@
+import { a as L10N_MESSAGE_OBJECT_UPDATE, c as OuiLocalizations, i as L10N_MESSAGE_OBJECT_CREATE, l as OuiLocalizationsState, n as L10N_MESSAGE_ITEM_UPDATE_KEY, o as L10N_SYMBOL, r as L10N_MESSAGE_ITEM_UPDATE_VALUE, s as OuiLocalizationParameters, t as L10N_MESSAGE_ITEM_CREATE, u as OuiLocalizationsValues } from "../l10n.model-D6a9frgl.mjs";
+export { L10N_MESSAGE_ITEM_CREATE, L10N_MESSAGE_ITEM_UPDATE_KEY, L10N_MESSAGE_ITEM_UPDATE_VALUE, L10N_MESSAGE_OBJECT_CREATE, L10N_MESSAGE_OBJECT_UPDATE, L10N_SYMBOL, OuiLocalizationParameters, OuiLocalizations, OuiLocalizationsState, OuiLocalizationsValues };

package/dist/js/l10n/l10n.model.mjs

@@ -0,0 +1,9 @@
+//#region src/js/l10n/l10n.model.ts
+const L10N_MESSAGE_ITEM_CREATE = "Localization item must be a string or a function.";
+const L10N_MESSAGE_ITEM_UPDATE_KEY = "Localization item key must be known.";
+const L10N_MESSAGE_ITEM_UPDATE_VALUE = "Localization item value must be a string or a function.";
+const L10N_MESSAGE_OBJECT_CREATE = "Default localizations must be a non-empty plain object.";
+const L10N_MESSAGE_OBJECT_UPDATE = "Localizations update object must be a plain object.";
+const L10N_SYMBOL = Symbol("l10n");
+//#endregion
+export { L10N_MESSAGE_ITEM_CREATE, L10N_MESSAGE_ITEM_UPDATE_KEY, L10N_MESSAGE_ITEM_UPDATE_VALUE, L10N_MESSAGE_OBJECT_CREATE, L10N_MESSAGE_OBJECT_UPDATE, L10N_SYMBOL };

package/dist/js/l10n.model-D6a9frgl.d.mts

@@ -0,0 +1,26 @@
+import { GenericCallback } from "@oscarpalmer/atoms/models";
+//#region src/js/l10n/l10n.model.d.ts
+type OuiLocalizationParameters<Localization> = Localization extends GenericCallback ? Parameters<Localization> : never;
+type OuiLocalizations<Localizations extends OuiLocalizationsValues> = {
+  [L10N_SYMBOL]: OuiLocalizationsState<Localizations>;
+  get defaults(): Localizations;
+  get keys(): Set<keyof Localizations>;
+  get values(): Record<string, Partial<Localizations>>;
+  get<Key extends keyof Localizations>(element: Element, key: Key, localizations: Record<string, Partial<Localizations>>): string | GenericCallback;
+  set(language: string, localizations: Partial<Localizations>): void;
+  set(localizations: Record<string, Partial<Localizations>>): void;
+};
+type OuiLocalizationsState<Localizations extends OuiLocalizationsValues> = {
+  readonly defaults: Localizations;
+  readonly keys: Set<string>;
+  readonly values: Record<string, Partial<Localizations>>;
+};
+type OuiLocalizationsValues = Record<string, string | GenericCallback>;
+declare const L10N_MESSAGE_ITEM_CREATE = "Localization item must be a string or a function.";
+declare const L10N_MESSAGE_ITEM_UPDATE_KEY = "Localization item key must be known.";
+declare const L10N_MESSAGE_ITEM_UPDATE_VALUE = "Localization item value must be a string or a function.";
+declare const L10N_MESSAGE_OBJECT_CREATE = "Default localizations must be a non-empty plain object.";
+declare const L10N_MESSAGE_OBJECT_UPDATE = "Localizations update object must be a plain object.";
+declare const L10N_SYMBOL: unique symbol;
+//#endregion
+export { L10N_MESSAGE_OBJECT_UPDATE as a, OuiLocalizations as c, L10N_MESSAGE_OBJECT_CREATE as i, OuiLocalizationsState as l, L10N_MESSAGE_ITEM_UPDATE_KEY as n, L10N_SYMBOL as o, L10N_MESSAGE_ITEM_UPDATE_VALUE as r, OuiLocalizationParameters as s, L10N_MESSAGE_ITEM_CREATE as t, OuiLocalizationsValues as u };

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

@@ -1,2 +1,2 @@
-import { i as LISTBOX_TAGNAME, n as LISTBOX_MESSAGES, r as LISTBOX_SELECTORS, t as LISTBOX_ATTRIBUTES } from "../constants.listbox-DRsXUxd3.mjs";
-export { LISTBOX_ATTRIBUTES, LISTBOX_MESSAGES, LISTBOX_SELECTORS, LISTBOX_TAGNAME };
+import { a as listboxSelectors, i as listboxMessages, n as LISTBOX_TAGNAME, r as listboxAttributes, t as LISTBOX_SYMBOL } from "../constants.listbox-C5Ap6Ag_.mjs";
+export { LISTBOX_SYMBOL, LISTBOX_TAGNAME, listboxAttributes, listboxMessages, listboxSelectors };

package/dist/js/listbox/constants.listbox.mjs

@@ -1,5 +1,6 @@
 //#region src/js/listbox/constants.listbox.ts
 const LISTBOX_TAGNAME = "oui-listbox";
+const LISTBOX_SYMBOL = Symbol(LISTBOX_TAGNAME);
 const attributeContent = `${LISTBOX_TAGNAME}-content`;
 const attributeFilter = `${LISTBOX_TAGNAME}-filter`;
 const attributeFilterInput = `${attributeFilter}-input`;
@@ -10,13 +11,8 @@ const attributeList = `${LISTBOX_TAGNAME}-list`;
 const attributeListEmpty = `${attributeList}-empty`;
 const attributeMessage = `${LISTBOX_TAGNAME}-message`;
 const attributeOption = `${LISTBOX_TAGNAME}-option`;
-const attributeOptionActive = `${LISTBOX_TAGNAME}-option-active`;
-const messageLabel = `<${LISTBOX_TAGNAME}> must contain a <label> element for the <select> element`;
-const messageSelect = `<${LISTBOX_TAGNAME}> must contain a valid <select> element`;
-const selectorFilter = `[${attributeFilterInput}]`;
-const selectorOption = `[${attributeOption}]`;
-const LISTBOX_ATTRIBUTES = {
-	active: attributeOptionActive,
+const listboxAttributes = {
+	active: `${LISTBOX_TAGNAME}-option-active`,
 	content: attributeContent,
 	empty: attributeListEmpty,
 	filter: attributeFilter,
@@ -28,13 +24,13 @@ const LISTBOX_ATTRIBUTES = {
 	message: attributeMessage,
 	option: attributeOption
 };
-const LISTBOX_MESSAGES = {
-	label: messageLabel,
-	select: messageSelect
+const listboxMessages = {
+	label: `<${LISTBOX_TAGNAME}> must contain a <label> element for the <select> element`,
+	select: `<${LISTBOX_TAGNAME}> must contain a valid <select> element`
 };
-const LISTBOX_SELECTORS = {
-	filter: selectorFilter,
-	option: selectorOption
+const listboxSelectors = {
+	filter: `[${attributeFilterInput}]`,
+	option: `[${attributeOption}]`
 };
 //#endregion
-export { LISTBOX_ATTRIBUTES, LISTBOX_MESSAGES, LISTBOX_SELECTORS, LISTBOX_TAGNAME };
+export { LISTBOX_SYMBOL, LISTBOX_TAGNAME, listboxAttributes, listboxMessages, listboxSelectors };

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

@@ -1,8 +1,7 @@
-import { c as OuiListboxPreview, l as OuiListboxState } from "../listbox.model-CRReGOmu.mjs";
+import { c as OuiListboxPreview, l as OuiListboxState } from "../listbox.model-CuBOj4qe.mjs";
 //#region src/js/listbox/event.listbox.d.ts
-declare function onListboxEnter(state: OuiListboxState): void;
-declare function onListboxFilter(preview: OuiListboxPreview, state: OuiListboxState, _: boolean, active?: HTMLElement): void;
-declare function onListboxNavigation(preview: OuiListboxPreview, state: OuiListboxState, active?: HTMLElement): void;
-declare function onListboxToggle(state: OuiListboxState): void;
-//#endregion
-export { onListboxEnter, onListboxFilter, onListboxNavigation, onListboxToggle };
+export declare function onListboxEnter(state: OuiListboxState): void;
+export declare function onListboxFilter(preview: OuiListboxPreview, state: OuiListboxState, _: boolean, active?: HTMLElement): void;
+export declare function onListboxNavigation(preview: OuiListboxPreview, state: OuiListboxState, active?: HTMLElement): void;
+export declare function onListboxToggle(state: OuiListboxState): void;
+//#endregion

package/dist/js/listbox/event.listbox.mjs

@@ -1,2 +1,48 @@
-import { d as onListboxNavigation, f as onListboxToggle, l as onListboxEnter, u as onListboxFilter } from "../misc.listbox-Cyz2CRDy.mjs";
+import { n as filterListbox, s as toggleListboxOption, t as applyListboxSelection, y as updateListboxPreview } from "../listbox.data-BQyZGKgr.mjs";
+import { processListboxKeydown } from "../internal/listbox/listbox.event.mjs";
+import { LISTBOX_SYMBOL, LISTBOX_TAGNAME, listboxSelectors } from "./constants.listbox.mjs";
+import { on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+//#region src/js/listbox/event.listbox.ts
+function onListboxClick(event) {
+	const listbox = findAncestor(event, LISTBOX_TAGNAME);
+	const state = listbox?.[LISTBOX_SYMBOL];
+	if (listbox == null || state == null) return;
+	const option = findAncestor(event, listboxSelectors.option);
+	if (option == null) return;
+	const { disabled, filter, readonly } = state.component;
+	if (disabled) filter.element.focus();
+	else if (readonly) updateListboxPreview("none", state, option, false);
+	else toggleListboxOption(state, option);
+}
+function onListboxEnter(state) {
+	if (!state.component.disabled && !state.component.readonly) toggleListboxOption(state, state.component.active);
+}
+function onListboxFilter(preview, state, _, active) {
+	updateListboxPreview(preview, state, active);
+}
+function onListboxInput(event) {
+	const state = findAncestor(event, LISTBOX_TAGNAME)?.[LISTBOX_SYMBOL];
+	if (state?.component.filter.element === event.target) filterListbox(event.inputType, state);
+}
+function onListboxKeydown(event) {
+	const state = findAncestor(event, LISTBOX_TAGNAME)?.[LISTBOX_SYMBOL];
+	if (state?.component.filter.element === event.target) processListboxKeydown(event, state);
+}
+function onListboxNavigation(preview, state, active) {
+	if (state.component.multiple || state.component.readonly) updateListboxPreview(preview, state, active);
+	else applyListboxSelection({
+		state,
+		option: active,
+		added: true,
+		selected: active == null ? [] : [active]
+	});
+}
+function onListboxToggle(state) {
+	state.component.filter.element.focus();
+}
+on(document, "click", onListboxClick);
+on(document, "input", onListboxInput);
+on(document, "keydown", onListboxKeydown, { passive: false });
+//#endregion
 export { onListboxEnter, onListboxFilter, onListboxNavigation, onListboxToggle };

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

@@ -1,14 +1,16 @@
-import { o as OuiListboxLocalizations } from "../listbox.model-CRReGOmu.mjs";
-import { i as LISTBOX_TAGNAME } from "../constants.listbox-DRsXUxd3.mjs";
-import { n as setListboxLocalizations } from "../misc.listbox-gnoJhrTr.mjs";
+import { l as OuiListboxState, o as OuiListboxLocalizations } from "../listbox.model-CuBOj4qe.mjs";
+import { n as LISTBOX_TAGNAME, t as LISTBOX_SYMBOL } from "../constants.listbox-C5Ap6Ag_.mjs";
+import { n as setListboxLocalizations } from "../misc.listbox-CtoGvXQo.mjs";
 //#region src/js/listbox/index.d.ts
 declare global {
   interface HTMLElementTagNameMap {
     [LISTBOX_TAGNAME]: OuiListboxElement;
   }
 }
-declare class OuiListboxElement extends HTMLElement {
-  #private;
+export interface OuiListboxElement {
+  [LISTBOX_SYMBOL]: OuiListboxState;
+}
+export declare class OuiListboxElement extends HTMLElement {
   static formAssociated: boolean;
   static observedAttributes: string[];
   /**
@@ -151,4 +153,4 @@ declare class OuiListboxElement extends HTMLElement {
   setLocalizations(localizations: Record<string, Partial<OuiListboxLocalizations>>): void;
 }
 //#endregion
-export { OuiListboxElement, setListboxLocalizations };
+export { setListboxLocalizations };

package/dist/js/listbox/index.mjs

@@ -1,7 +1,7 @@
-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 { 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 { LISTBOX_TAGNAME } from "./constants.listbox.mjs";
-import { c as onDetachListbox, i as createListboxState, n as setListboxLocalizations, o as listboxStates, r as updateListboxLocalizations, s as onAttachListbox } from "../misc.listbox-Cyz2CRDy.mjs";
+import { LISTBOX_SYMBOL, LISTBOX_TAGNAME } from "./constants.listbox.mjs";
+import { c as onDetachListbox, i as initializeListbox, n as setListboxLocalizations, o as listboxes, r as updateListboxLocalizations, s as onAttachListbox } from "../misc.listbox-CjfBUbHD.mjs";
 import { getAttribute } from "@oscarpalmer/toretto/attribute";
 import { parse } from "@oscarpalmer/atoms/string";
 //#region src/js/listbox/index.ts
@@ -13,68 +13,65 @@ var OuiListboxElement = class extends HTMLElement {
 		"required",
 		"value"
 	];
-	#internals;
-	#restored;
-	#state;
 	/**
 	* Is the listbox disabled?
 	*/
 	get disabled() {
-		return this.#state?.disabled ?? false;
+		return this[LISTBOX_SYMBOL].component?.disabled ?? false;
 	}
 	/**
 	* Should the listbox 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[LISTBOX_SYMBOL], value);
 	}
 	/**
 	* Current filter value
 	*/
 	get filter() {
-		return this.#state.filter.element.value;
+		return this[LISTBOX_SYMBOL].component?.filter.element.value ?? "";
 	}
 	/**
 	* Set the filter value
 	*/
 	set filter(value) {
-		setListboxFilter(this.#state, value);
+		setListboxFilter(this[LISTBOX_SYMBOL], value);
 	}
 	/**
 	* Form element associated with the listbox
 	*/
 	get form() {
-		return this.#internals.form;
+		return this[LISTBOX_SYMBOL].form.internals.form;
 	}
 	/**
 	* Label elements associated with the listbox
 	*/
 	get labels() {
-		return this.#internals.labels;
+		return this[LISTBOX_SYMBOL].form.internals.labels;
 	}
 	/**
 	* Maximum number of selected options
 	*/
 	get max() {
-		return this.#state?.max;
+		return this[LISTBOX_SYMBOL].component?.max;
 	}
 	/**
 	* Set the maximum number of selected options
 	*/
 	set max(value) {
-		setListboxLimit("max", this.#state, value);
+		setListboxLimit("max", this[LISTBOX_SYMBOL], value);
 	}
 	/**
 	* Minimum number of selected options
 	*/
 	get min() {
-		return this.#state?.min;
+		return this[LISTBOX_SYMBOL].component?.min;
 	}
 	/**
 	* Set the minimum number of selected options
 	*/
 	set min(value) {
-		setListboxLimit("min", this.#state, value);
+		setListboxLimit("min", this[LISTBOX_SYMBOL], value);
 	}
 	/**
 	* Does the listbox allow multiple values?
@@ -92,87 +89,91 @@ var OuiListboxElement = class extends HTMLElement {
 	* Is the listbox readonly?
 	*/
 	get readonly() {
-		return this.#state?.readonly ?? false;
+		return this[LISTBOX_SYMBOL].component?.readonly ?? false;
 	}
 	/**
 	* Should the listbox 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[LISTBOX_SYMBOL], value);
 	}
 	/**
 	* Is the listbox required?
 	*/
 	get required() {
-		return this.#state?.required ?? false;
+		return this[LISTBOX_SYMBOL].component?.required ?? false;
 	}
 	/**
 	* Should the listbox 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[LISTBOX_SYMBOL], value);
 	}
 	/**
 	* Selected options
 	*/
 	get selected() {
-		return this.#state.options.selected.slice();
+		return this[LISTBOX_SYMBOL].component?.options.selected.slice() ?? [];
 	}
 	/**
 	* Validation message for the listbox
 	*/
 	get validationMessage() {
-		return this.#internals.validationMessage;
+		return this[LISTBOX_SYMBOL].form.internals.validationMessage;
 	}
 	/**
 	* Validity state for the listbox
 	*/
 	get validity() {
-		return this.#internals.validity;
+		return this[LISTBOX_SYMBOL].form.internals.validity;
 	}
 	/**
 	* Current value
 	*/
 	get value() {
-		return this.#state.values.current[0];
+		return this[LISTBOX_SYMBOL].component?.values.current[0] ?? "";
 	}
 	/**
 	* Set the value
 	*/
 	set value(value) {
-		setListboxValue(this.#state, value);
+		setListboxValue(this[LISTBOX_SYMBOL], value);
 	}
 	/**
 	* Current values
 	*/
 	get values() {
-		return this.#state.values.current.slice();
+		return this[LISTBOX_SYMBOL].component?.values.current.slice() ?? [];
 	}
 	/**
 	* Set the values
 	*/
 	set values(values) {
-		setListboxValues(this.#state, values);
+		setListboxValues(this[LISTBOX_SYMBOL], values);
 	}
 	/**
 	* Can the listbox be validated?
 	*/
 	get willValidate() {
-		return this.#internals.willValidate;
+		return this[LISTBOX_SYMBOL].form.internals.willValidate;
 	}
 	constructor() {
 		super();
-		this.#internals = this.attachInternals();
+		this[LISTBOX_SYMBOL] = {
+			component: null,
+			form: { internals: this.attachInternals() }
+		};
 	}
 	attributeChangedCallback(name, _, value) {
-		if (this.#state == null) return;
+		const state = this[LISTBOX_SYMBOL];
+		if (state.component == 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 ?? "";
 		}
@@ -183,33 +184,36 @@ var OuiListboxElement = class extends HTMLElement {
 	* @returns `true` if the listbox is valid, otherwise `false`
 	*/
 	checkValidity() {
-		return this.#internals.checkValidity();
+		return this[LISTBOX_SYMBOL].form.internals.checkValidity();
 	}
 	/**
 	* Clear all selected options
 	*/
 	clear() {
-		setListboxValues(this.#state, []);
+		setListboxValues(this[LISTBOX_SYMBOL], []);
 	}
 	connectedCallback() {
-		if (this.#state == null) this.#initialize();
-		else attachListbox(this.#state, listboxStates, onAttachListbox);
+		const state = this[LISTBOX_SYMBOL];
+		if (state.component == null) initializeListbox(this, state);
+		else attachListbox(state, listboxes, onAttachListbox);
 	}
 	disconnectedCallback() {
-		if (this.#state != null) detachListbox(this.#state, listboxStates, onDetachListbox);
+		const state = this[LISTBOX_SYMBOL];
+		if (state.component != null) detachListbox(state, listboxes, onDetachListbox);
 	}
 	formDisabledCallback(disabled) {
 		this.disabled = disabled;
 	}
 	formResetCallback() {
-		setListboxValues(this.#state, this.#state.values.initial);
+		const state = this[LISTBOX_SYMBOL];
+		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);
+		if (this[LISTBOX_SYMBOL]?.component == null) this[LISTBOX_SYMBOL].form.restored = parsed;
+		else setListboxValues(this[LISTBOX_SYMBOL], parsed);
 	}
 	/**
 	* Check if the listbox is valid and report any validation errors
@@ -217,7 +221,7 @@ var OuiListboxElement = class extends HTMLElement {
 	* @returns `true` if the listbox is valid, otherwise `false`
 	*/
 	reportValidity() {
-		return this.#internals.reportValidity();
+		return this[LISTBOX_SYMBOL].form.internals.reportValidity();
 	}
 	/**
 	* Set a custom validation message for the listbox
@@ -225,17 +229,11 @@ var OuiListboxElement = class extends HTMLElement {
 	* @param message Validation message
 	*/
 	setCustomValidity(message) {
-		this.#internals.setValidity({ customError: message !== "" }, message, this);
+		this[LISTBOX_SYMBOL].form.internals.setValidity({ customError: message !== "" }, message, this);
 	}
 	setLocalizations(first, second) {
-		updateListboxLocalizations(this.#state.localizations.global, this.#state.localizations.component, first, second);
-	}
-	#initialize() {
-		this.#state = createListboxState(this, this.#internals);
-		if (this.#restored != null) {
-			setListboxValues(this.#state, this.#restored);
-			this.#restored = void 0;
-		}
+		const { localizations } = this[LISTBOX_SYMBOL].component;
+		updateListboxLocalizations(localizations.global, localizations.component, first, second);
 	}
 };
 customElements.define(LISTBOX_TAGNAME, OuiListboxElement);

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

@@ -1,2 +1,2 @@
-import { n as setListboxLocalizations, r as updateListboxLocalizations, t as getListboxId } from "../misc.listbox-gnoJhrTr.mjs";
+import { n as setListboxLocalizations, r as updateListboxLocalizations, t as getListboxId } from "../misc.listbox-CtoGvXQo.mjs";
 export { getListboxId, setListboxLocalizations, updateListboxLocalizations };

package/dist/js/listbox/misc.listbox.mjs

@@ -1,2 +1,2 @@
-import { n as setListboxLocalizations, r as updateListboxLocalizations, t as getListboxId } from "../misc.listbox-Cyz2CRDy.mjs";
+import { n as setListboxLocalizations, r as updateListboxLocalizations, t as getListboxId } from "../misc.listbox-CjfBUbHD.mjs";
 export { getListboxId, setListboxLocalizations, updateListboxLocalizations };

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

@@ -1,11 +1,9 @@
-import { t as OuiLocalizations } from "../l10n-Bn-7RcwR.mjs";
-import { l as OuiListboxState, o as OuiListboxLocalizations, u as OuiListboxStates } from "../listbox.model-CRReGOmu.mjs";
-import { OuiListboxElement } from "./index.mjs";
+import { c as OuiLocalizations } from "../l10n.model-D6a9frgl.mjs";
+import { l as OuiListboxState, o as OuiListboxLocalizations } from "../listbox.model-CuBOj4qe.mjs";
 //#region src/js/listbox/state.listbox.d.ts
-declare function createListboxState(element: OuiListboxElement, internals: ElementInternals): OuiListboxState;
-declare function onAttachListbox(state: OuiListboxState): void;
-declare function onDetachListbox(state: OuiListboxState): void;
-declare const listboxLocalizations: OuiLocalizations<OuiListboxLocalizations>;
-declare const listboxStates: OuiListboxStates;
-//#endregion
-export { createListboxState, listboxLocalizations, listboxStates, onAttachListbox, onDetachListbox };
+export declare function initializeListbox(element: HTMLElement, state: OuiListboxState): void;
+export declare function onAttachListbox(state: OuiListboxState): void;
+export declare function onDetachListbox(state: OuiListboxState): void;
+export declare const listboxLocalizations: OuiLocalizations<OuiListboxLocalizations>;
+export declare const listboxes: Set<OuiListboxState>;
+//#endregion

package/dist/js/listbox/state.listbox.mjs

@@ -1,2 +1,2 @@
-import { a as listboxLocalizations, c as onDetachListbox, i as createListboxState, o as listboxStates, s as onAttachListbox } from "../misc.listbox-Cyz2CRDy.mjs";
-export { createListboxState, listboxLocalizations, listboxStates, onAttachListbox, onDetachListbox };
+import { a as listboxLocalizations, c as onDetachListbox, i as initializeListbox, o as listboxes, s as onAttachListbox } from "../misc.listbox-CjfBUbHD.mjs";
+export { initializeListbox, listboxLocalizations, listboxes, onAttachListbox, onDetachListbox };