@oscarpalmer/oui 0.39.0 → 0.41.0

package/dist/js/internal/option-list/option-list.dom.d.mts

@@ -0,0 +1,18 @@
+import { _ as OuiLocalizationsValues } from "../../l10n.model-D1E1u35L.mjs";
+import { a as CreateOptionListList, f as OptionListGroup, g as OptionListState, h as OptionListPreview, i as CreateOptionListGroupParameters, n as CreateOptionListContentParameters, o as CreateOptionListOptionParameters, r as CreateOptionListFilter, s as CreateOptionListOptionsParameters, t as CreateOptionListContent } from "../../option-list.model-CCPUlPeX.mjs";
+import { PlainObject } from "@oscarpalmer/atoms/models";
+//#region src/js/internal/option-list/option-list.dom.d.ts
+export declare function createOptionListContent(parameters: CreateOptionListContentParameters): CreateOptionListContent;
+export declare function createOptionListFilter(parameters: CreateOptionListContentParameters): CreateOptionListFilter | undefined;
+export declare function createOptionListGroup(parameters: CreateOptionListGroupParameters): OptionListGroup;
+export declare function createOptionListHeader(parameters: CreateOptionListGroupParameters, group: HTMLOptGroupElement): HTMLElement;
+export declare function createOptionListInput(parameters: CreateOptionListContentParameters, value: string): HTMLInputElement;
+export declare function createOptionListList(parameters: CreateOptionListContentParameters): CreateOptionListList;
+export declare function createOptionListMessage(attribute: string): HTMLDivElement;
+export declare function createOptionListOption(parameters: CreateOptionListOptionParameters): HTMLElement;
+export declare function createOptionListOptions(parameters: CreateOptionListOptionsParameters): HTMLElement[];
+export declare function createOptionListValueLabel(id: string): HTMLSpanElement;
+export declare function updateOptionListMessage<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>): void;
+export declare function updateOptionListPreview<State extends PlainObject, Localizations extends OuiLocalizationsValues>(preview: OptionListPreview, state: OptionListState<State, Localizations>, active?: HTMLElement, scroll?: boolean): void;
+export declare function updateOptionListValueLabel<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>): void;
+//#endregion

package/dist/js/internal/option-list/option-list.dom.mjs

@@ -0,0 +1,2 @@
+import { _ as createOptionListValueLabel, b as updateOptionListValueLabel, c as createOptionListContent, d as createOptionListHeader, f as createOptionListInput, g as createOptionListOptions, h as createOptionListOption, l as createOptionListFilter, m as createOptionListMessage, p as createOptionListList, u as createOptionListGroup, v as updateOptionListMessage, y as updateOptionListPreview } from "../../option-list.data-CgMyUwPc.mjs";
+export { createOptionListContent, createOptionListFilter, createOptionListGroup, createOptionListHeader, createOptionListInput, createOptionListList, createOptionListMessage, createOptionListOption, createOptionListOptions, createOptionListValueLabel, updateOptionListMessage, updateOptionListPreview, updateOptionListValueLabel };

package/dist/js/internal/option-list/option-list.event.d.mts

@@ -0,0 +1,6 @@
+import { _ as OuiLocalizationsValues } from "../../l10n.model-D1E1u35L.mjs";
+import { g as OptionListState } from "../../option-list.model-CCPUlPeX.mjs";
+import { PlainObject } from "@oscarpalmer/atoms/models";
+//#region src/js/internal/option-list/option-list.event.d.ts
+export declare function processOptionListKeydown<State extends PlainObject, Localizations extends OuiLocalizationsValues>(event: KeyboardEvent, state: OptionListState<State, Localizations>): void;
+//#endregion

package/dist/js/internal/option-list/option-list.event.mjs

@@ -0,0 +1,66 @@
+import { LISTBOX_KEYS_NAVIGATION, OPTION_LIST_KEYS_SELECTION } from "./option-list.constants.mjs";
+import { S as getOptionListVisibleOptions } from "../../option-list.data-CgMyUwPc.mjs";
+import { clamp } from "@oscarpalmer/atoms/number";
+//#region src/js/internal/option-list/option-list.event.ts
+function processOptionListKeydown(event, state) {
+	const { component, form } = state;
+	const { callbacks, disabled, readonly, type } = component;
+	const ignore = disabled || readonly;
+	const isSelect = type === "select";
+	let preventDefault = ignore;
+	switch (true) {
+		case event.key === " ":
+			if (!disabled) callbacks.keydown.onActivation?.(state);
+			break;
+		case event.key === "Enter":
+			preventDefault = callbacks.keydown.preventActivation?.(state) ?? true;
+			if (preventDefault) callbacks.keydown.onEnter?.(state);
+			else if (!ignore && type === "select") callbacks.keydown.onActivation?.(state);
+			else if (!ignore) form.internals.form?.requestSubmit();
+			break;
+		case event.key === "Escape":
+			preventDefault = false;
+			callbacks.keydown.onEscape?.(state);
+			break;
+		case !isSelect && OPTION_LIST_KEYS_SELECTION.has(event.key):
+			if (!ignore) callbacks.keydown.onSelection?.(state);
+			break;
+		case LISTBOX_KEYS_NAVIGATION.has(event.key):
+			if (!disabled) onNavigation(event, state);
+			break;
+		default:
+			preventDefault = false;
+			if (event.key === "Tab") callbacks.keydown.onTab?.(state);
+	}
+	if (preventDefault) {
+		event.preventDefault();
+		event.stopPropagation();
+	}
+}
+function onNavigation(event, state) {
+	const { active, autocomplete, callbacks, type } = state.component;
+	const skip = callbacks.keydown.skipNavigation?.(state) ?? false;
+	const visible = getOptionListVisibleOptions(state);
+	if (visible.length === 0) return;
+	let next;
+	if (skip || active == null) next = active ?? visible.at(event.key === "ArrowDown" ? 0 : -1);
+	else {
+		const current = visible.findIndex((option) => option.id === active?.id);
+		let index;
+		switch (event.key) {
+			case "ArrowDown":
+			case "ArrowUp":
+				index = clamp(current + (event.key === "ArrowDown" ? 1 : -1), 0, visible.length - 1, true);
+				break;
+			case "PageDown":
+			case "PageUp": index = clamp(current + (event.key === "PageDown" ? 10 : -10), 0, visible.length - 1);
+		}
+		if (index != null) next = visible[index];
+	}
+	let preview;
+	if (type === "autocomplete" && (autocomplete.both || autocomplete.inline)) preview = "set";
+	else preview = "none";
+	callbacks.keydown.onNavigation(preview, state, next ?? active ?? visible[0]);
+}
+//#endregion
+export { processOptionListKeydown };

package/dist/js/internal/option-list/option-list.form.d.mts

@@ -0,0 +1,7 @@
+import { _ as OuiLocalizationsValues } from "../../l10n.model-D1E1u35L.mjs";
+import { g as OptionListState } from "../../option-list.model-CCPUlPeX.mjs";
+import { PlainObject } from "@oscarpalmer/atoms/models";
+//#region src/js/internal/option-list/option-list.form.d.ts
+export declare function updateOptionListForm<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, values: string[], emit?: boolean): void;
+export declare function updateOptionListValidity<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>): void;
+//#endregion

package/dist/js/internal/option-list/option-list.form.mjs

@@ -0,0 +1,53 @@
+import { dispatch } from "@oscarpalmer/toretto/event";
+//#region src/js/internal/option-list/option-list.form.ts
+function updateOptionListForm(state, values, emit) {
+	const { component, form } = state;
+	const { callbacks, host, multiple, name } = component;
+	let value;
+	if (multiple) {
+		const { length } = values;
+		value = new FormData();
+		for (let index = 0; index < length; index += 1) value.append(name, values[index]);
+	} else value = values[0];
+	component.values.current = values;
+	form.internals.setFormValue(value, JSON.stringify(values));
+	callbacks.data.onForm(state);
+	updateOptionListValidity(state);
+	if (emit ?? true) dispatch(host, "oui:change");
+}
+function updateOptionListValidity(state) {
+	const { component, form } = state;
+	const { autocomplete, filter, host, listbox, localizations, max, min, multiple, options, required } = component;
+	if (autocomplete.none && !listbox) {
+		const valueMissing = required && filter.element.value.length === 0;
+		form.internals.setValidity({ valueMissing }, localizations.localize("invalid", { element: host }));
+		form.internals.checkValidity();
+		return;
+	}
+	let error;
+	let key;
+	let parameters = [];
+	switch (true) {
+		case required && options.selected.length === 0:
+			error = "badInput";
+			key = "input";
+			break;
+		case multiple && typeof max === "number" && options.selected.length > max:
+			error = "rangeOverflow";
+			key = "max";
+			parameters = [max];
+			break;
+		case multiple && typeof min === "number" && options.selected.length < min:
+			error = "rangeUnderflow";
+			key = "min";
+			parameters = [min];
+	}
+	const message = key == null ? void 0 : localizations.localize(key, {
+		arguments: parameters,
+		element: host
+	});
+	form.internals.setValidity(error == null ? {} : { [error]: true }, message);
+	form.internals.checkValidity();
+}
+//#endregion
+export { updateOptionListForm, updateOptionListValidity };

package/dist/js/internal/option-list/option-list.misc.d.mts

@@ -0,0 +1,13 @@
+import { _ as OuiLocalizationsValues } from "../../l10n.model-D1E1u35L.mjs";
+import { g as OptionListState } from "../../option-list.model-CCPUlPeX.mjs";
+import { PlainObject } from "@oscarpalmer/atoms/models";
+//#region src/js/internal/option-list/option-list.misc.d.ts
+export declare function generateOptionListIds(prefix: string, select: HTMLSelectElement): void;
+export declare function getOptionListVisibleOptions<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>): Element[];
+export declare function setOptionListDisabled<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, value: boolean): void;
+export declare function setOptionListFilter<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, value: unknown): void;
+export declare function setOptionListLimit<State extends PlainObject, Localizations extends OuiLocalizationsValues>(type: "max" | "min", state: OptionListState<State, Localizations>, value?: unknown): void;
+export declare function setOptionListMultiple(element: Element, value: boolean): void;
+export declare function setOptionListReadonly<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, value: boolean): void;
+export declare function setOptionListRequired<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, value: boolean): void;
+//#endregion

package/dist/js/internal/option-list/option-list.misc.mjs

@@ -0,0 +1,2 @@
+import { C as setOptionListDisabled, D as setOptionListReadonly, E as setOptionListMultiple, O as setOptionListRequired, S as getOptionListVisibleOptions, T as setOptionListLimit, w as setOptionListFilter, x as generateOptionListIds } from "../../option-list.data-CgMyUwPc.mjs";
+export { generateOptionListIds, getOptionListVisibleOptions, setOptionListDisabled, setOptionListFilter, setOptionListLimit, setOptionListMultiple, setOptionListReadonly, setOptionListRequired };

package/dist/js/internal/option-list/option-list.model.d.mts

@@ -0,0 +1,2 @@
+import { _ as OptionListType, a as CreateOptionListList, c as OptionListAttributes, d as OptionListCallbacks, f as OptionListGroup, g as OptionListState, h as OptionListPreview, i as CreateOptionListGroupParameters, l as OptionListAutoComplete, m as OptionListOptions, n as CreateOptionListContentParameters, o as CreateOptionListOptionParameters, p as OptionListLocalizationValues, r as CreateOptionListFilter, s as CreateOptionListOptionsParameters, t as CreateOptionListContent, u as OptionListAutoCompleteType } from "../../option-list.model-CCPUlPeX.mjs";
+export { CreateOptionListContent, CreateOptionListContentParameters, CreateOptionListFilter, CreateOptionListGroupParameters, CreateOptionListList, CreateOptionListOptionParameters, CreateOptionListOptionsParameters, OptionListAttributes, OptionListAutoComplete, OptionListAutoCompleteType, OptionListCallbacks, OptionListGroup, OptionListLocalizationValues, OptionListOptions, OptionListPreview, OptionListState, OptionListType };

package/dist/js/internal/option-list/option-list.state.d.mts

@@ -0,0 +1,8 @@
+import { _ as OuiLocalizationsValues } from "../../l10n.model-D1E1u35L.mjs";
+import { g as OptionListState } from "../../option-list.model-CCPUlPeX.mjs";
+import { PlainObject } from "@oscarpalmer/atoms/models";
+//#region src/js/internal/option-list/option-list.state.d.ts
+export declare function attachOptionList<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, set: Set<OptionListState<State, Localizations>>, onAttach: (state: OptionListState<State, Localizations>) => void): void;
+export declare function detachOptionList<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, set: Set<OptionListState<State, Localizations>>, onDetach: (state: OptionListState<State, Localizations>) => void): void;
+export declare function initializeOptionListState<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, set: Set<OptionListState<State, Localizations>>, onAttach: (state: OptionListState<State, Localizations>) => void): OptionListState<State, Localizations>;
+//#endregion

package/dist/js/internal/option-list/option-list.state.mjs

@@ -0,0 +1,39 @@
+import { updateOptionListForm } from "./option-list.form.mjs";
+import { C as setOptionListDisabled, D as setOptionListReadonly, E as setOptionListMultiple, O as setOptionListRequired, T as setOptionListLimit, b as updateOptionListValueLabel, i as filterOptionListOptions, v as updateOptionListMessage, y as updateOptionListPreview } from "../../option-list.data-CgMyUwPc.mjs";
+import { getAttribute } from "@oscarpalmer/toretto/attribute";
+//#region src/js/internal/option-list/option-list.state.ts
+function attachOptionList(state, set, onAttach) {
+	const { filter, id, label } = state.component;
+	label.element.htmlFor = filter.element.id;
+	label.element.id = `${id}_label`;
+	onAttach(state);
+	set.add(state);
+}
+function detachOptionList(state, set, onDetach) {
+	const { label, select } = state.component;
+	const listeners = state.component.listeners.splice(0);
+	const { length } = listeners;
+	for (let index = 0; index < length; index += 1) listeners[index]();
+	label.element.htmlFor = select.id;
+	label.element.id = label.id;
+	onDetach(state);
+	set.delete(state);
+}
+function initializeOptionListState(state, set, onAttach) {
+	const { component } = state;
+	attachOptionList(state, set, onAttach);
+	setOptionListDisabled(state, component.disabled);
+	setOptionListLimit("max", state, getAttribute(component.host, "max"));
+	setOptionListLimit("min", state, getAttribute(component.host, "min"));
+	setOptionListMultiple(component.host, component.multiple);
+	setOptionListReadonly(state, component.readonly);
+	setOptionListRequired(state, component.required);
+	filterOptionListOptions(state);
+	updateOptionListForm(state, component.values.current, false);
+	updateOptionListMessage(state);
+	updateOptionListValueLabel(state);
+	if (component.options.selected.length > 0) updateOptionListPreview("none", state, component.options.selected[0], false);
+	return state;
+}
+//#endregion
+export { attachOptionList, detachOptionList, initializeOptionListState };

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

@@ -0,0 +1,3 @@
+import { p as OuiLocalizations, u as OuiDefaultLocalizations } from "../l10n.model-D1E1u35L.mjs";
+import { createDefaultLocalizations, createLocalizations } from "../internal/l10n/index.mjs";
+export { type OuiDefaultLocalizations, type OuiLocalizations, createDefaultLocalizations, createLocalizations };

package/dist/js/l10n/index.mjs

@@ -0,0 +1,2 @@
+import { createDefaultLocalizations, createLocalizations } from "../internal/l10n/index.mjs";
+export { createDefaultLocalizations, createLocalizations };

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

@@ -0,0 +1,54 @@
+import { GenericCallback } from "@oscarpalmer/atoms/models";
+//#region src/js/internal/l10n/l10n.model.d.ts
+type OuiDefaultLocalizations<Localizations extends OuiLocalizationsValues> = {
+  [L10N_SYMBOL]: OuiDefaultLocalizationsState<Localizations>;
+  get keys(): Array<keyof Localizations>;
+  get values(): OuiDefaultLocalizationsValues<Localizations>;
+  localize<Key extends keyof Localizations>(key: Key, parameters?: OuiLocalizationsParameters<Localizations[Key]>): string;
+  setDefaults(values: Partial<Localizations>): Promise<boolean>;
+  setLanguages(language: string, localizations: Partial<Localizations>): Promise<boolean>;
+  setLanguages(localizations: Record<string, Partial<Localizations>>): Promise<boolean>;
+};
+type OuiDefaultLocalizationsState<Localizations extends OuiLocalizationsValues> = {
+  defaults: Localizations;
+  keys: Set<keyof Localizations>;
+  type: typeof L10N_TYPE_DEFAULT;
+  values: Record<string, Partial<Localizations>>;
+};
+type OuiDefaultLocalizationsValues<Localizations extends OuiLocalizationsValues> = {
+  defaults: Localizations;
+  languages: Record<string, Partial<Localizations>>;
+};
+type OuiLocalizationsCallback<Localization> = Extract<Localization, GenericCallback>;
+type OuiLocalizationsParameters<Localization> = ([OuiLocalizationsCallback<Localization>] extends [never] ? {} : {
+  arguments: Parameters<OuiLocalizationsCallback<Localization>>;
+}) & {
+  element?: Element;
+  language?: string;
+};
+type OuiLocalizations<Localizations extends OuiLocalizationsValues> = {
+  [L10N_SYMBOL]: OuiLocalizationsState<Localizations>;
+  get defaults(): OuiDefaultLocalizations<Localizations>;
+  localize<Key extends keyof Localizations>(key: Key, parameters?: OuiLocalizationsParameters<Localizations[Key]>): string;
+  set(language: string, localizations: Partial<Localizations>): Promise<boolean>;
+  set(localizations: Record<string, Partial<Localizations>>): Promise<boolean>;
+};
+type OuiLocalizationsState<Localizations extends OuiLocalizationsValues> = {
+  defaults: OuiDefaultLocalizations<Localizations>;
+  keys: Set<keyof Localizations>;
+  type: typeof L10N_TYPE_INSTANCE;
+  values: Record<string, Partial<Localizations>>;
+};
+type OuiLocalizationsType = "default" | "instance";
+type OuiLocalizationsValues = Record<string, string | GenericCallback>;
+declare const L10N_MESSAGE_DEFAULT = "Default localizations must be an instance of OuiDefaultLocalizations.";
+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_TYPE_DEFAULT: OuiLocalizationsType;
+declare const L10N_TYPE_INSTANCE: OuiLocalizationsType;
+declare const L10N_SYMBOL: unique symbol;
+//#endregion
+export { OuiLocalizationsValues as _, L10N_MESSAGE_OBJECT_CREATE as a, L10N_TYPE_DEFAULT as c, OuiDefaultLocalizationsState as d, OuiDefaultLocalizationsValues as f, OuiLocalizationsType as g, OuiLocalizationsState as h, L10N_MESSAGE_ITEM_UPDATE_VALUE as i, L10N_TYPE_INSTANCE as l, OuiLocalizationsParameters as m, L10N_MESSAGE_ITEM_CREATE as n, L10N_MESSAGE_OBJECT_UPDATE as o, OuiLocalizations as p, L10N_MESSAGE_ITEM_UPDATE_KEY as r, L10N_SYMBOL as s, L10N_MESSAGE_DEFAULT as t, OuiDefaultLocalizations as u };

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

@@ -1,14 +1,17 @@
-import { o as OuiListboxLocalizations } from "../listbox.model-BHPA7GM4.mjs";
-import { i as LISTBOX_TAGNAME } from "../constants.listbox-DGnX32kv.mjs";
-import { n as setListboxLocalizations } from "../misc.listbox-mZMuYOxg.mjs";
+import { p as OuiLocalizations } from "../l10n.model-D1E1u35L.mjs";
+import { n as LISTBOX_TAGNAME, t as LISTBOX_SYMBOL } from "../listbox.constants-DOBMwKup.mjs";
+import { n as OuiListboxLocalizations, r as OuiListboxState } from "../listbox.model-C0MYWXZe.mjs";
+import { n as setListboxLocalizations } from "../listbox.misc-DwfB4Mu_.mjs";
 //#region src/js/listbox/index.d.ts
 declare global {
   interface HTMLElementTagNameMap {
     [LISTBOX_TAGNAME]: OuiListboxElement;
   }
 }
+export interface OuiListboxElement {
+  [LISTBOX_SYMBOL]: OuiListboxState;
+}
 export declare class OuiListboxElement extends HTMLElement {
-  #private;
   static formAssociated: boolean;
   static observedAttributes: string[];
   /**
@@ -35,6 +38,7 @@ export declare class OuiListboxElement extends HTMLElement {
    * Label elements associated with the listbox
    */
   get labels(): NodeList;
+  get localizations(): OuiLocalizations<OuiListboxLocalizations>;
   /**
    * Maximum number of selected options
    */
@@ -78,7 +82,7 @@ export declare class OuiListboxElement extends HTMLElement {
   /**
    * Selected options
    */
-  get selected(): HTMLElement[];
+  get selected(): Element[];
   /**
    * Validation message for the listbox
    */
@@ -136,19 +140,6 @@ export declare class OuiListboxElement extends HTMLElement {
    * @param message Validation message
    */
   setCustomValidity(message: string): void;
-  /**
-   * Set listbox localizations for a specific language
-   *
-   * @param language Language code
-   * @param localizations Localizations for language
-   */
-  setLocalizations(language: string, localizations: Partial<OuiListboxLocalizations>): void;
-  /**
-   * Set listbox localizations for one or more languages
-   *
-   * @param localizations Localizations for one or more languages
-   */
-  setLocalizations(localizations: Record<string, Partial<OuiListboxLocalizations>>): void;
 }
 //#endregion
 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-DQ7-x2uY.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-DKB-j0UK.mjs";
+import { C as setOptionListDisabled, D as setOptionListReadonly, O as setOptionListRequired, T as setOptionListLimit, a as setOptionListValue, o as setOptionListValues, w as setOptionListFilter } from "../option-list.data-CgMyUwPc.mjs";
+import { attachOptionList, detachOptionList } from "../internal/option-list/option-list.state.mjs";
+import { LISTBOX_SYMBOL, LISTBOX_TAGNAME } from "./listbox.constants.mjs";
+import { a as onDetachListbox, i as onAttachListbox, r as listboxes, s as setListboxLocalizations, t as initializeListbox } from "../listbox.state-BrN296BM.mjs";
 import { getAttribute } from "@oscarpalmer/toretto/attribute";
 import { parse } from "@oscarpalmer/atoms/string";
 //#region src/js/listbox/index.ts
@@ -13,68 +13,68 @@ 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) setOptionListDisabled(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);
+		setOptionListFilter(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;
+	}
+	get localizations() {
+		return this[LISTBOX_SYMBOL].component?.localizations;
 	}
 	/**
 	* 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);
+		setOptionListLimit("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);
+		setOptionListLimit("min", this[LISTBOX_SYMBOL], value);
 	}
 	/**
 	* Does the listbox allow multiple values?
@@ -92,87 +92,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) setOptionListReadonly(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) setOptionListRequired(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);
+		setOptionListValue(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);
+		setOptionListValues(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: void 0,
+			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);
+				setOptionListLimit(name, state, value);
 				break;
 			case "value": this.value = value ?? "";
 		}
@@ -183,33 +187,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, []);
+		setOptionListValues(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 attachOptionList(state, listboxes, onAttachListbox);
 	}
 	disconnectedCallback() {
-		if (this.#state != null) detachListbox(this.#state, listboxStates, onDetachListbox);
+		const state = this[LISTBOX_SYMBOL];
+		if (state.component != null) detachOptionList(state, listboxes, onDetachListbox);
 	}
 	formDisabledCallback(disabled) {
 		this.disabled = disabled;
 	}
 	formResetCallback() {
-		setListboxValues(this.#state, this.#state.values.initial);
+		const state = this[LISTBOX_SYMBOL];
+		setOptionListValues(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 setOptionListValues(this[LISTBOX_SYMBOL], parsed);
 	}
 	/**
 	* Check if the listbox is valid and report any validation errors
@@ -217,7 +224,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 +232,7 @@ var OuiListboxElement = class extends HTMLElement {
 	* @param message Validation message
 	*/
 	setCustomValidity(message) {
-		this.#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;
-		}
+		this[LISTBOX_SYMBOL].form.internals.setValidity({ customError: message !== "" }, message, this);
 	}
 };
 customElements.define(LISTBOX_TAGNAME, OuiListboxElement);

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

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