@oscarpalmer/oui 0.35.0 → 0.36.0

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

@@ -0,0 +1,63 @@
+import { LISTBOX_KEYS } from "./listbox.constants.mjs";
+import { S as getListboxVisibleOptions } from "../../listbox.data-BWd0PCy7.mjs";
+import { clamp } from "@oscarpalmer/atoms/number";
+//#region src/js/internal/listbox/listbox.event.ts
+function processListboxKeydown(event, state) {
+	const ignore = state.disabled || state.readonly;
+	const isSelect = state.type === "select";
+	let preventDefault = ignore;
+	switch (true) {
+		case event.key === " ":
+			if (!state.disabled) state.callbacks.keydown.onActivation?.(state);
+			break;
+		case event.key === "Enter":
+			preventDefault = state.callbacks.keydown.preventActivation?.(state) ?? true;
+			if (preventDefault) state.callbacks.keydown.onEnter?.(state);
+			else if (!ignore && state.type === "select") state.callbacks.keydown.onActivation?.(state);
+			else if (!ignore) state.internals.form?.requestSubmit();
+			break;
+		case event.key === "Escape":
+			preventDefault = false;
+			state.callbacks.keydown.onEscape?.(state);
+			break;
+		case !isSelect && LISTBOX_KEYS.selection.has(event.key):
+			if (!ignore) state.callbacks.keydown.onSelection?.(state);
+			break;
+		case LISTBOX_KEYS.navigation.has(event.key):
+			if (!state.disabled) onNavigation(event, state);
+			break;
+		default:
+			preventDefault = false;
+			if (event.key === "Tab") state.callbacks.keydown.onTab?.(state);
+	}
+	if (preventDefault) {
+		event.preventDefault();
+		event.stopPropagation();
+	}
+}
+function onNavigation(event, state) {
+	const skip = state.callbacks.keydown.skipNavigation?.(state) ?? false;
+	const visible = getListboxVisibleOptions(state);
+	if (visible.length === 0) return;
+	let next;
+	if (skip || state.active == null) next = state.active ?? visible.at(event.key === "ArrowDown" ? 0 : -1);
+	else {
+		const current = visible.findIndex((option) => option.id === state.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 (state.type === "autocomplete" && (state.autocomplete.both || state.autocomplete.inline)) preview = "set";
+	else preview = "none";
+	state.callbacks.keydown.onNavigation(preview, state, next ?? state.active ?? visible[0]);
+}
+//#endregion
+export { processListboxKeydown };

package/dist/js/internal/listbox/listbox.form.d.mts

@@ -0,0 +1,6 @@
+import { l as OuiListboxState } from "../../listbox.model-CRReGOmu.mjs";
+//#region src/js/internal/listbox/listbox.form.d.ts
+declare function updateListboxForm<State extends OuiListboxState>(state: State, values: string[], emit?: boolean): void;
+declare function updateListboxValidity(state: OuiListboxState): void;
+//#endregion
+export { updateListboxForm, updateListboxValidity };

package/dist/js/internal/listbox/listbox.form.mjs

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

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

@@ -0,0 +1,12 @@
+import { l as OuiListboxState } from "../../listbox.model-CRReGOmu.mjs";
+//#region src/js/internal/listbox/listbox.misc.d.ts
+declare function generateListboxIds(prefix: string, select: HTMLSelectElement): void;
+declare function getListboxVisibleOptions(state: OuiListboxState): HTMLElement[];
+declare function setListboxDisabled<State extends OuiListboxState>(state: State, value: boolean): void;
+declare function setListboxFilter<State extends OuiListboxState>(state: State, value: unknown): void;
+declare function setListboxLimit<State extends OuiListboxState>(type: 'max' | 'min', state: State, value?: unknown): void;
+declare function setListboxMultiple(element: HTMLElement, value: boolean): void;
+declare function setListboxReadonly<State extends OuiListboxState>(state: State, value: boolean): void;
+declare function setListboxRequired<State extends OuiListboxState>(state: State, value: boolean): void;
+//#endregion
+export { generateListboxIds, getListboxVisibleOptions, setListboxDisabled, setListboxFilter, setListboxLimit, setListboxMultiple, setListboxReadonly, setListboxRequired };

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

@@ -0,0 +1,2 @@
+import { C as setListboxDisabled, D as setListboxReadonly, E as setListboxMultiple, O as setListboxRequired, S as getListboxVisibleOptions, T as setListboxLimit, w as setListboxFilter, x as generateListboxIds } from "../../listbox.data-BWd0PCy7.mjs";
+export { generateListboxIds, getListboxVisibleOptions, setListboxDisabled, setListboxFilter, setListboxLimit, setListboxMultiple, setListboxReadonly, setListboxRequired };

package/dist/js/internal/listbox/listbox.model.d.mts

@@ -0,0 +1,2 @@
+import { a as OuiListboxGroup, c as OuiListboxPreview, d as OuiListboxType, i as OuiListboxCallbacks, l as OuiListboxState, n as OuiListboxAutoComplete, o as OuiListboxLocalizations, r as OuiListboxAutoCompleteType, s as OuiListboxOptions, t as OuiListboxAttributes, u as OuiListboxStates } from "../../listbox.model-CRReGOmu.mjs";
+export { OuiListboxAttributes, OuiListboxAutoComplete, OuiListboxAutoCompleteType, OuiListboxCallbacks, OuiListboxGroup, OuiListboxLocalizations, OuiListboxOptions, OuiListboxPreview, OuiListboxState, OuiListboxStates, OuiListboxType };

package/dist/js/internal/listbox/listbox.model.mjs

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,7 @@
+import { l as OuiListboxState, u as OuiListboxStates } from "../../listbox.model-CRReGOmu.mjs";
+//#region src/js/internal/listbox/listbox.state.d.ts
+declare function attachListbox<State extends OuiListboxState>(state: State, states: OuiListboxStates<State>, onAttach: (state: State) => void): void;
+declare function detachListbox<State extends OuiListboxState>(state: State, states: OuiListboxStates<State>, onDetach: (state: State) => void): void;
+declare function initializeListboxState<State extends OuiListboxState>(state: State, states: OuiListboxStates<State>, onAttach: (state: State) => void): State;
+//#endregion
+export { attachListbox, detachListbox, initializeListboxState };

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

@@ -0,0 +1,40 @@
+import { updateListboxForm } from "./listbox.form.mjs";
+import { C as setListboxDisabled, D as setListboxReadonly, E as setListboxMultiple, O as setListboxRequired, T as setListboxLimit, b as updateListboxValueLabel, i as filterListboxOptions, v as updateListboxMessage, y as updateListboxPreview } from "../../listbox.data-BWd0PCy7.mjs";
+import { getAttribute } from "@oscarpalmer/toretto/attribute";
+//#region src/js/internal/listbox/listbox.state.ts
+function attachListbox(state, states, onAttach) {
+	const { filter, host, label } = state;
+	label.element.htmlFor = filter.element.id;
+	label.element.id = `${state.id}_label`;
+	onAttach(state);
+	states.map.set(host, state);
+	states.set.add(state);
+}
+function detachListbox(state, states, onDetach) {
+	const { host, label, select } = state;
+	const listeners = state.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);
+	states.map.delete(host);
+	states.set.delete(state);
+}
+function initializeListboxState(state, states, onAttach) {
+	attachListbox(state, states, onAttach);
+	setListboxDisabled(state, state.disabled);
+	setListboxLimit("max", state, getAttribute(state.host, "max"));
+	setListboxLimit("min", state, getAttribute(state.host, "min"));
+	setListboxMultiple(state.host, state.multiple);
+	setListboxReadonly(state, state.readonly);
+	setListboxRequired(state, state.required);
+	filterListboxOptions(state);
+	updateListboxForm(state, state.values.current, false);
+	updateListboxMessage(state);
+	updateListboxValueLabel(state);
+	if (state.options.selected.length > 0) updateListboxPreview("none", state, state.options.selected[0]);
+	return state;
+}
+//#endregion
+export { attachListbox, detachListbox, initializeListboxState };

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

@@ -0,0 +1,6 @@
+import { AnyAriaBooleanAttribute } from "@oscarpalmer/toretto/models";
+//#region src/js/internal/misc.d.ts
+declare function getAttributeValue<Value>(element: HTMLElement, attribute: string, possible: Set<Value>, defaultValue: Value): Value;
+declare function getBooleanAriaValue(element: HTMLElement, attribute: AnyAriaBooleanAttribute): boolean;
+//#endregion
+export { getAttributeValue, getBooleanAriaValue };

package/dist/js/internal/misc.mjs

@@ -0,0 +1,13 @@
+import { getAria } from "@oscarpalmer/toretto/aria";
+import { getAttribute } from "@oscarpalmer/toretto/attribute";
+//#region src/js/internal/misc.ts
+function getAttributeValue(element, attribute, possible, defaultValue) {
+	const value = getAttribute(element, attribute);
+	return possible.has(value) ? value : defaultValue;
+}
+function getBooleanAriaValue(element, attribute) {
+	const value = getAria(element, attribute);
+	return value === true || value === "true";
+}
+//#endregion
+export { getAttributeValue, getBooleanAriaValue };

package/dist/js/l10n-Bn-7RcwR.d.mts

@@ -0,0 +1,20 @@
+import { GenericCallback } from "@oscarpalmer/atoms/models";
+//#region src/js/l10n.d.ts
+type LocalizationParameters<Localization> = Localization extends GenericCallback ? Parameters<Localization> : never;
+declare class OuiLocalizations<Localizations extends OuiLocalizationsValues> {
+  readonly defaults: Localizations;
+  readonly keys: Set<keyof Localizations>;
+  readonly values: Record<string, Partial<Localizations>>;
+  constructor(defaults: 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 OuiLocalizationsValues = Record<string, string | GenericCallback>;
+declare function getLanguage(element: Element): string;
+declare function getLocalization<Localizations extends OuiLocalizationsValues, Key extends keyof Localizations>(localizations: OuiLocalizations<Localizations>, element: Element, key: Key, value: Record<string, Partial<Localizations>>): Localizations[Key] | GenericCallback;
+declare function getLocalizations<Localizations extends OuiLocalizationsValues>(defaults: Localizations): OuiLocalizations<Localizations>;
+declare function localize<Localizations extends OuiLocalizationsValues, Key extends keyof Localizations, Localization extends Localizations[Key]>(localization: Localization, data: Record<string, unknown>, parameters: LocalizationParameters<Localization>): string;
+declare function updateLocalizations<Localizations extends OuiLocalizationsValues>(instance: OuiLocalizations<Localizations>, values: Record<string, Partial<Localizations>>, destination: Record<string, Partial<Localizations>>, onAfter?: () => void): void;
+//#endregion
+export { getLocalizations as a, getLocalization as i, OuiLocalizationsValues as n, localize as o, getLanguage as r, updateLocalizations as s, OuiLocalizations as t };

package/dist/js/l10n.d.mts

@@ -1,20 +1,2 @@
-import { GenericCallback } from "@oscarpalmer/atoms/models";
-//#region src/js/l10n.d.ts
-type LocalizationParameters<Localization> = Localization extends GenericCallback ? Parameters<Localization> : never;
-type OuiLocalizationValues = Record<string, string | GenericCallback>;
-declare class OuiLocalizations<Localizations extends OuiLocalizationValues> {
-  readonly defaults: Localizations;
-  readonly keys: Set<keyof Localizations>;
-  readonly values: Record<string, Partial<Localizations>>;
-  constructor(defaults: 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;
-}
-declare function getLanguage(element: Element): string;
-declare function getLocalization<Localizations extends OuiLocalizationValues, Key extends keyof Localizations>(localizations: OuiLocalizations<Localizations>, element: Element, key: Key, value: Record<string, Partial<Localizations>>): Localizations[Key] | GenericCallback;
-declare function getLocalizations<Localizations extends OuiLocalizationValues>(defaults: Localizations): OuiLocalizations<Localizations>;
-declare function localize<Localizations extends OuiLocalizationValues, Key extends keyof Localizations, Localization extends Localizations[Key]>(localization: Localization, data: Record<string, unknown>, parameters: LocalizationParameters<Localization>): string;
-declare function updateLocalizations<Localizations extends OuiLocalizationValues>(instance: OuiLocalizations<Localizations>, values: Record<string, Partial<Localizations>>, destination?: Record<string, Partial<Localizations>>, onAfter?: () => void): void;
-//#endregion
-export { OuiLocalizations, getLanguage, getLocalization, getLocalizations, localize, updateLocalizations };
+import { a as getLocalizations, i as getLocalization, n as OuiLocalizationsValues, o as localize, r as getLanguage, s as updateLocalizations, t as OuiLocalizations } from "./l10n-Bn-7RcwR.mjs";
+export { OuiLocalizations, OuiLocalizationsValues, getLanguage, getLocalization, getLocalizations, localize, updateLocalizations };

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

@@ -0,0 +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 };

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

@@ -0,0 +1,40 @@
+//#region src/js/listbox/constants.listbox.ts
+const LISTBOX_TAGNAME = "oui-listbox";
+const attributeContent = `${LISTBOX_TAGNAME}-content`;
+const attributeFilter = `${LISTBOX_TAGNAME}-filter`;
+const attributeFilterInput = `${attributeFilter}-input`;
+const attributeGroup = `${LISTBOX_TAGNAME}-group`;
+const attributeHeader = `${LISTBOX_TAGNAME}-header`;
+const attributeHidden = `${LISTBOX_TAGNAME}-hidden`;
+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,
+	content: attributeContent,
+	empty: attributeListEmpty,
+	filter: attributeFilter,
+	group: attributeGroup,
+	header: attributeHeader,
+	hidden: attributeHidden,
+	input: attributeFilterInput,
+	list: attributeList,
+	message: attributeMessage,
+	option: attributeOption
+};
+const LISTBOX_MESSAGES = {
+	label: messageLabel,
+	select: messageSelect
+};
+const LISTBOX_SELECTORS = {
+	filter: selectorFilter,
+	option: selectorOption
+};
+//#endregion
+export { LISTBOX_ATTRIBUTES, LISTBOX_MESSAGES, LISTBOX_SELECTORS, LISTBOX_TAGNAME };

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

@@ -0,0 +1,8 @@
+import { c as OuiListboxPreview, l as OuiListboxState } from "../listbox.model-CRReGOmu.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 };

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

@@ -0,0 +1,2 @@
+import { d as onListboxNavigation, f as onListboxToggle, l as onListboxEnter, u as onListboxFilter } from "../misc.listbox-BI-XsTOf.mjs";
+export { onListboxEnter, onListboxFilter, onListboxNavigation, onListboxToggle };

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

@@ -0,0 +1,116 @@
+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";
+//#region src/js/listbox/index.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    [LISTBOX_TAGNAME]: OuiListboxElement;
+  }
+}
+declare class OuiListboxElement extends HTMLElement {
+  #private;
+  static formAssociated: boolean;
+  static observedAttributes: string[];
+  /**
+   * Is the listbox disabled?
+   */
+  get disabled(): boolean;
+  /**
+   * Should the listbox be disabled?
+   */
+  set disabled(value: boolean);
+  /**
+   * Current filter value
+   */
+  get filter(): string;
+  /**
+   * Set the filter value
+   */
+  set filter(value: string);
+  /**
+   * 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 listbox allow multiple values?
+   */
+  get multiple(): boolean;
+  /**
+   * Name of the listbox
+   */
+  get name(): string;
+  /**
+   * Is the listbox readonly?
+   */
+  get readonly(): boolean;
+  /**
+   * Should the listbox be readonly?
+   */
+  set readonly(value: boolean);
+  /**
+   * Is the listbox required?
+   */
+  get required(): boolean;
+  /**
+   * Should the listbox be required?
+   */
+  set required(value: boolean);
+  /**
+   * Selected options
+   */
+  get selected(): HTMLElement[];
+  /**
+   * Current value
+   */
+  get value(): string;
+  /**
+   * Set the value
+   */
+  set value(value: unknown);
+  /**
+   * Current values
+   */
+  get values(): string[];
+  /**
+   * Set the values
+   */
+  set values(values: unknown[]);
+  constructor();
+  attributeChangedCallback(name: string, _: string | null, value: string | null): void;
+  /**
+   * Clear all selected options
+   */
+  clear(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  formDisabledCallback(disabled: boolean): void;
+  formResetCallback(): void;
+  formStateRestoreCallback(state: string | File | FormData, reason: unknown): 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 { OuiListboxElement, setListboxLocalizations };

package/dist/js/listbox/index.mjs

@@ -0,0 +1,189 @@
+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 { 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-BI-XsTOf.mjs";
+import { getAttribute } from "@oscarpalmer/toretto/attribute";
+import { parse } from "@oscarpalmer/atoms/string";
+//#region src/js/listbox/index.ts
+var OuiListboxElement = class extends HTMLElement {
+	static formAssociated = true;
+	static observedAttributes = [
+		"max",
+		"min",
+		"required",
+		"value"
+	];
+	#internals;
+	#restored;
+	#state;
+	/**
+	* Is the listbox disabled?
+	*/
+	get disabled() {
+		return this.#state?.disabled ?? false;
+	}
+	/**
+	* Should the listbox be disabled?
+	*/
+	set disabled(value) {
+		if (typeof value === "boolean" && value !== this.disabled) setListboxDisabled(this.#state, value);
+	}
+	/**
+	* Current filter value
+	*/
+	get filter() {
+		return this.#state.filter.element.value;
+	}
+	/**
+	* Set the filter value
+	*/
+	set filter(value) {
+		setListboxFilter(this.#state, value);
+	}
+	/**
+	* Maximum number of selected options
+	*/
+	get max() {
+		return this.#state?.max;
+	}
+	/**
+	* Set the maximum number of selected options
+	*/
+	set max(value) {
+		setListboxLimit("max", this.#state, value);
+	}
+	/**
+	* Minimum number of selected options
+	*/
+	get min() {
+		return this.#state?.min;
+	}
+	/**
+	* Set the minimum number of selected options
+	*/
+	set min(value) {
+		setListboxLimit("min", this.#state, value);
+	}
+	/**
+	* Does the listbox allow multiple values?
+	*/
+	get multiple() {
+		return this.hasAttribute("multiple");
+	}
+	/**
+	* Name of the listbox
+	*/
+	get name() {
+		return getAttribute(this, "name") ?? "";
+	}
+	/**
+	* Is the listbox readonly?
+	*/
+	get readonly() {
+		return this.#state?.readonly ?? false;
+	}
+	/**
+	* Should the listbox be readonly?
+	*/
+	set readonly(value) {
+		if (typeof value === "boolean" && value !== this.readonly) setListboxReadonly(this.#state, value);
+	}
+	/**
+	* Is the listbox required?
+	*/
+	get required() {
+		return this.#state?.required ?? false;
+	}
+	/**
+	* Should the listbox be required?
+	*/
+	set required(value) {
+		if (typeof value === "boolean" && value !== this.required) setListboxRequired(this.#state, value);
+	}
+	/**
+	* Selected options
+	*/
+	get selected() {
+		return this.#state.options.selected.slice();
+	}
+	/**
+	* Current value
+	*/
+	get value() {
+		return this.#state.values.current[0];
+	}
+	/**
+	* Set the value
+	*/
+	set value(value) {
+		setListboxValue(this.#state, value);
+	}
+	/**
+	* Current values
+	*/
+	get values() {
+		return this.#state.values.current.slice();
+	}
+	/**
+	* Set the values
+	*/
+	set values(values) {
+		setListboxValues(this.#state, values);
+	}
+	constructor() {
+		super();
+		this.#internals = this.attachInternals();
+	}
+	attributeChangedCallback(name, _, value) {
+		if (this.#state == null) return;
+		switch (name) {
+			case "required":
+				this[name] = this.hasAttribute(name);
+				break;
+			case "max":
+			case "min":
+				setListboxLimit(name, this.#state, value);
+				break;
+			case "value": this.value = value ?? "";
+		}
+	}
+	/**
+	* Clear all selected options
+	*/
+	clear() {
+		setListboxValues(this.#state, []);
+	}
+	connectedCallback() {
+		if (this.#state == null) this.#initialize();
+		else attachListbox(this.#state, listboxStates, onAttachListbox);
+	}
+	disconnectedCallback() {
+		if (this.#state != null) detachListbox(this.#state, listboxStates, onDetachListbox);
+	}
+	formDisabledCallback(disabled) {
+		this.disabled = disabled;
+	}
+	formResetCallback() {
+		setListboxValues(this.#state, this.#state.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);
+	}
+	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;
+		}
+	}
+};
+customElements.define(LISTBOX_TAGNAME, OuiListboxElement);
+//#endregion
+export { OuiListboxElement, setListboxLocalizations };

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

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

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

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

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

@@ -0,0 +1,11 @@
+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";
+//#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 };

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

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