@oscarpalmer/oui 0.38.0 → 0.40.0

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

@@ -1,18 +1,17 @@
-const LISTBOX_KEYS = {
-	activation: /* @__PURE__ */ new Set([
-		" ",
-		"Backspace",
-		"Delete",
-		"Enter"
-	]),
-	navigation: /* @__PURE__ */ new Set([
-		"ArrowDown",
-		"ArrowUp",
-		"PageDown",
-		"PageUp"
-	]),
-	selection: /* @__PURE__ */ new Set(["ArrowRight", "End"])
-};
+//#region src/js/internal/listbox/listbox.constants.ts
+const LISTBOX_KEYS_ACTIVATION = /* @__PURE__ */ new Set([
+	" ",
+	"Backspace",
+	"Delete",
+	"Enter"
+]);
+const LISTBOX_KEYS_NAVIGATION = /* @__PURE__ */ new Set([
+	"ArrowDown",
+	"ArrowUp",
+	"PageDown",
+	"PageUp"
+]);
+const LISTBOX_KEYS_SELECTION = /* @__PURE__ */ new Set(["ArrowRight", "End"]);
 const LISTBOX_TYPES = /* @__PURE__ */ new Set(["autocomplete", "select"]);
 const listboxScrollOptions = {
 	behavior: "auto",
@@ -20,4 +19,4 @@ const listboxScrollOptions = {
 	inline: "nearest"
 };
 //#endregion
-export { LISTBOX_KEYS, LISTBOX_TYPES, listboxScrollOptions };
+export { LISTBOX_KEYS_ACTIVATION, LISTBOX_KEYS_NAVIGATION, LISTBOX_KEYS_SELECTION, LISTBOX_TYPES, listboxScrollOptions };

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

@@ -1,4 +1,4 @@
-import { l as OuiListboxState } from "../../listbox.model-CRReGOmu.mjs";
+import { l as OuiListboxState } from "../../listbox.model-CuBOj4qe.mjs";
 //#region src/js/internal/listbox/listbox.data.d.ts
 type ApplySelectionParameters<State extends OuiListboxState = OuiListboxState> = {
   added: boolean;
@@ -9,12 +9,11 @@ type ApplySelectionParameters<State extends OuiListboxState = OuiListboxState> =
   state: State;
   values?: string[];
 };
-declare function applyListboxSelection<State extends OuiListboxState>(parameters: ApplySelectionParameters<State>): void;
-declare function filterListbox(type: InputEvent['inputType'], state: OuiListboxState): void;
-declare function filterListboxOption(state: OuiListboxState, value: unknown, textContent?: boolean): HTMLElement | undefined;
-declare function filterListboxOptions(state: OuiListboxState): HTMLElement | undefined;
-declare function setListboxValue<State extends OuiListboxState>(state: State, value: unknown, emit?: boolean): void;
-declare function setListboxValues<State extends OuiListboxState>(state: State, value: unknown[], emit?: boolean): void;
-declare function toggleListboxOption<State extends OuiListboxState>(state: State, option?: HTMLElement): void;
-//#endregion
-export { applyListboxSelection, filterListbox, filterListboxOption, filterListboxOptions, setListboxValue, setListboxValues, toggleListboxOption };
+export declare function applyListboxSelection<State extends OuiListboxState>(parameters: ApplySelectionParameters<State>): void;
+export declare function filterListbox(type: InputEvent["inputType"], state: OuiListboxState): void;
+export declare function filterListboxOption(state: OuiListboxState, value: unknown, textContent?: boolean): HTMLElement | undefined;
+export declare function filterListboxOptions(state: OuiListboxState): HTMLElement | undefined;
+export declare function setListboxValue<State extends OuiListboxState>(state: State, value: unknown, emit?: boolean): void;
+export declare function setListboxValues<State extends OuiListboxState>(state: State, value: unknown[], emit?: boolean): void;
+export declare function toggleListboxOption<State extends OuiListboxState>(state: State, option?: HTMLElement): void;
+//#endregion

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

@@ -1,2 +1,2 @@
-import { a as setListboxValue, i as filterListboxOptions, n as filterListbox, o as setListboxValues, r as filterListboxOption, s as toggleListboxOption, t as applyListboxSelection } from "../../listbox.data-C7CRa5Ya.mjs";
+import { a as setListboxValue, i as filterListboxOptions, n as filterListbox, o as setListboxValues, r as filterListboxOption, s as toggleListboxOption, t as applyListboxSelection } from "../../listbox.data-BQyZGKgr.mjs";
 export { applyListboxSelection, filterListbox, filterListboxOption, filterListboxOptions, setListboxValue, setListboxValues, toggleListboxOption };

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

@@ -1,13 +1,13 @@
-import { a as OuiListboxGroup, c as OuiListboxPreview, d as OuiListboxType, l as OuiListboxState, n as OuiListboxAutoComplete, s as OuiListboxOptions, t as OuiListboxAttributes } from "../../listbox.model-CRReGOmu.mjs";
+import { a as OuiListboxGroup, c as OuiListboxPreview, f as OuiListboxType, l as OuiListboxState, n as OuiListboxAutoComplete, s as OuiListboxOptions, t as OuiListboxAttributes } from "../../listbox.model-CuBOj4qe.mjs";
 //#region src/js/internal/listbox/listbox.dom.d.ts
-type CreateListboxContent = {
+export type CreateListboxContent = {
   element: HTMLDivElement;
   filter?: CreateListboxFilter;
   list: CreateListboxList;
   message: HTMLDivElement;
   value: HTMLSpanElement;
 };
-type CreateListboxContentParameters = {
+export type CreateListboxContentParameters = {
   attributes: OuiListboxAttributes;
   autocomplete: OuiListboxAutoComplete;
   element: HTMLElement;
@@ -18,7 +18,7 @@ type CreateListboxContentParameters = {
   select: HTMLSelectElement;
   type: OuiListboxType;
 };
-type CreateListboxFilter = {
+export type CreateListboxFilter = {
   container: HTMLElement;
   element: HTMLInputElement;
 };
@@ -29,7 +29,7 @@ type CreateListboxGroupParameters = {
   selected: HTMLElement[];
   type: OuiListboxType;
 };
-type CreateListboxList = {
+export type CreateListboxList = {
   element: HTMLUListElement;
   groups?: OuiListboxGroup[];
   options: OuiListboxOptions;
@@ -49,18 +49,17 @@ type CreateListboxOptionsParameters = {
   selected: HTMLElement[];
   type: OuiListboxType;
 };
-declare function createListboxContent(parameters: CreateListboxContentParameters): CreateListboxContent;
-declare function createListboxFilter(parameters: CreateListboxContentParameters): CreateListboxFilter | undefined;
-declare function createListboxGroup(parameters: CreateListboxGroupParameters): OuiListboxGroup;
-declare function createListboxHeader(parameters: CreateListboxGroupParameters, group: HTMLOptGroupElement): HTMLElement;
-declare function createListboxInput(parameters: CreateListboxContentParameters, value: string): HTMLInputElement;
-declare function createListboxList(parameters: CreateListboxContentParameters): CreateListboxList;
-declare function createListboxMessage(attribute: string): HTMLDivElement;
-declare function createListboxOption(parameters: CreateListboxOptionParameters): HTMLElement;
-declare function createListboxOptions(parameters: CreateListboxOptionsParameters): HTMLElement[];
-declare function createListboxValueLabel(id: string): HTMLSpanElement;
-declare function updateListboxMessage(state: OuiListboxState): void;
-declare function updateListboxPreview<State extends OuiListboxState>(preview: OuiListboxPreview, state: State, active?: HTMLElement, scroll?: boolean): void;
-declare function updateListboxValueLabel<State extends OuiListboxState>(state: State): void;
-//#endregion
-export { CreateListboxContent, CreateListboxContentParameters, CreateListboxFilter, CreateListboxList, createListboxContent, createListboxFilter, createListboxGroup, createListboxHeader, createListboxInput, createListboxList, createListboxMessage, createListboxOption, createListboxOptions, createListboxValueLabel, updateListboxMessage, updateListboxPreview, updateListboxValueLabel };
+export declare function createListboxContent(parameters: CreateListboxContentParameters): CreateListboxContent;
+export declare function createListboxFilter(parameters: CreateListboxContentParameters): CreateListboxFilter | undefined;
+export declare function createListboxGroup(parameters: CreateListboxGroupParameters): OuiListboxGroup;
+export declare function createListboxHeader(parameters: CreateListboxGroupParameters, group: HTMLOptGroupElement): HTMLElement;
+export declare function createListboxInput(parameters: CreateListboxContentParameters, value: string): HTMLInputElement;
+export declare function createListboxList(parameters: CreateListboxContentParameters): CreateListboxList;
+export declare function createListboxMessage(attribute: string): HTMLDivElement;
+export declare function createListboxOption(parameters: CreateListboxOptionParameters): HTMLElement;
+export declare function createListboxOptions(parameters: CreateListboxOptionsParameters): HTMLElement[];
+export declare function createListboxValueLabel(id: string): HTMLSpanElement;
+export declare function updateListboxMessage(state: OuiListboxState): void;
+export declare function updateListboxPreview<State extends OuiListboxState>(preview: OuiListboxPreview, state: State, active?: HTMLElement, scroll?: boolean): void;
+export declare function updateListboxValueLabel<State extends OuiListboxState>(state: State): void;
+//#endregion

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

@@ -1,2 +1,2 @@
-import { _ as createListboxValueLabel, b as updateListboxValueLabel, c as createListboxContent, d as createListboxHeader, f as createListboxInput, g as createListboxOptions, h as createListboxOption, l as createListboxFilter, m as createListboxMessage, p as createListboxList, u as createListboxGroup, v as updateListboxMessage, y as updateListboxPreview } from "../../listbox.data-C7CRa5Ya.mjs";
+import { _ as createListboxValueLabel, b as updateListboxValueLabel, c as createListboxContent, d as createListboxHeader, f as createListboxInput, g as createListboxOptions, h as createListboxOption, l as createListboxFilter, m as createListboxMessage, p as createListboxList, u as createListboxGroup, v as updateListboxMessage, y as updateListboxPreview } from "../../listbox.data-BQyZGKgr.mjs";
 export { createListboxContent, createListboxFilter, createListboxGroup, createListboxHeader, createListboxInput, createListboxList, createListboxMessage, createListboxOption, createListboxOptions, createListboxValueLabel, updateListboxMessage, updateListboxPreview, updateListboxValueLabel };

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

@@ -1,5 +1,4 @@
-import { l as OuiListboxState } from "../../listbox.model-CRReGOmu.mjs";
+import { l as OuiListboxState } from "../../listbox.model-CuBOj4qe.mjs";
 //#region src/js/internal/listbox/listbox.event.d.ts
-declare function processListboxKeydown<State extends OuiListboxState>(event: KeyboardEvent, state: State): void;
-//#endregion
-export { processListboxKeydown };
+export declare function processListboxKeydown<State extends OuiListboxState>(event: KeyboardEvent, state: State): void;
+//#endregion

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

@@ -1,34 +1,36 @@
-import { LISTBOX_KEYS } from "./listbox.constants.mjs";
-import { S as getListboxVisibleOptions } from "../../listbox.data-C7CRa5Ya.mjs";
+import { LISTBOX_KEYS_NAVIGATION, LISTBOX_KEYS_SELECTION } from "./listbox.constants.mjs";
+import { S as getListboxVisibleOptions } from "../../listbox.data-BQyZGKgr.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";
+	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 (!state.disabled) state.callbacks.keydown.onActivation?.(state);
+			if (!disabled) 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();
+			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;
-			state.callbacks.keydown.onEscape?.(state);
+			callbacks.keydown.onEscape?.(state);
 			break;
-		case !isSelect && LISTBOX_KEYS.selection.has(event.key):
-			if (!ignore) state.callbacks.keydown.onSelection?.(state);
+		case !isSelect && LISTBOX_KEYS_SELECTION.has(event.key):
+			if (!ignore) callbacks.keydown.onSelection?.(state);
 			break;
-		case LISTBOX_KEYS.navigation.has(event.key):
-			if (!state.disabled) onNavigation(event, state);
+		case LISTBOX_KEYS_NAVIGATION.has(event.key):
+			if (!disabled) onNavigation(event, state);
 			break;
 		default:
 			preventDefault = false;
-			if (event.key === "Tab") state.callbacks.keydown.onTab?.(state);
+			if (event.key === "Tab") callbacks.keydown.onTab?.(state);
 	}
 	if (preventDefault) {
 		event.preventDefault();
@@ -36,13 +38,14 @@ function processListboxKeydown(event, state) {
 	}
 }
 function onNavigation(event, state) {
-	const skip = state.callbacks.keydown.skipNavigation?.(state) ?? false;
+	const { active, autocomplete, callbacks, type } = state.component;
+	const skip = 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);
+	if (skip || active == null) next = active ?? visible.at(event.key === "ArrowDown" ? 0 : -1);
 	else {
-		const current = visible.findIndex((option) => option.id === state.active?.id);
+		const current = visible.findIndex((option) => option.id === active?.id);
 		let index;
 		switch (event.key) {
 			case "ArrowDown":
@@ -55,9 +58,9 @@ function onNavigation(event, state) {
 		if (index != null) next = visible[index];
 	}
 	let preview;
-	if (state.type === "autocomplete" && (state.autocomplete.both || state.autocomplete.inline)) preview = "set";
+	if (type === "autocomplete" && (autocomplete.both || autocomplete.inline)) preview = "set";
 	else preview = "none";
-	state.callbacks.keydown.onNavigation(preview, state, next ?? state.active ?? visible[0]);
+	callbacks.keydown.onNavigation(preview, state, next ?? active ?? visible[0]);
 }
 //#endregion
 export { processListboxKeydown };

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

@@ -1,6 +1,5 @@
-import { l as OuiListboxState } from "../../listbox.model-CRReGOmu.mjs";
+import { l as OuiListboxState } from "../../listbox.model-CuBOj4qe.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 };
+export declare function updateListboxForm<State extends OuiListboxState>(state: State, values: string[], emit?: boolean): void;
+export declare function updateListboxValidity(state: OuiListboxState): void;
+//#endregion

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

@@ -1,26 +1,29 @@
-import { getLocalization, localize } from "../../l10n.mjs";
+import { getLocalization, localize } from "../../l10n/index.mjs";
 import { dispatch } from "@oscarpalmer/toretto/event";
 //#region src/js/internal/listbox/listbox.form.ts
 function updateListboxForm(state, values, emit) {
+	const { component, form } = state;
+	const { callbacks, host, multiple, name } = component;
 	let value;
-	if (state.multiple) {
+	if (multiple) {
 		const { length } = values;
 		value = new FormData();
-		for (let index = 0; index < length; index += 1) value.append(state.name, values[index]);
+		for (let index = 0; index < length; index += 1) value.append(name, values[index]);
 	} else value = values[0];
-	state.values.current = values;
-	state.internals.setFormValue(value, JSON.stringify(values));
-	state.callbacks.data.onForm(state);
+	component.values.current = values;
+	form.internals.setFormValue(value, JSON.stringify(values));
+	callbacks.data.onForm(state);
 	updateListboxValidity(state);
-	if (emit ?? true) dispatch(state.host, "oui:change");
+	if (emit ?? true) dispatch(host, "oui:change");
 }
 function updateListboxValidity(state) {
-	const { autocomplete, filter, host, internals, listbox, localizations, max, min, multiple, options, required } = 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;
 		const localization = getLocalization(localizations.global, host, "invalid", localizations.component);
-		internals.setValidity({ valueMissing }, localize(localization, {}, []));
-		internals.checkValidity();
+		form.internals.setValidity({ valueMissing }, localize(localization, {}, []));
+		form.internals.checkValidity();
 		return;
 	}
 	let data = {};
@@ -46,8 +49,8 @@ function updateListboxValidity(state) {
 	}
 	const localization = key == null ? void 0 : getLocalization(localizations.global, host, key, localizations.component);
 	const message = localization == null ? void 0 : localize(localization, data, parameters);
-	internals.setValidity(error == null ? {} : { [error]: true }, message);
-	internals.checkValidity();
+	form.internals.setValidity(error == null ? {} : { [error]: true }, message);
+	form.internals.checkValidity();
 }
 //#endregion
 export { updateListboxForm, updateListboxValidity };

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

@@ -1,12 +1,11 @@
-import { l as OuiListboxState } from "../../listbox.model-CRReGOmu.mjs";
+import { l as OuiListboxState } from "../../listbox.model-CuBOj4qe.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 };
+export declare function generateListboxIds(prefix: string, select: HTMLSelectElement): void;
+export declare function getListboxVisibleOptions(state: OuiListboxState): HTMLElement[];
+export declare function setListboxDisabled<State extends OuiListboxState>(state: State, value: boolean): void;
+export declare function setListboxFilter<State extends OuiListboxState>(state: State, value: unknown): void;
+export declare function setListboxLimit<State extends OuiListboxState>(type: "max" | "min", state: State, value?: unknown): void;
+export declare function setListboxMultiple(element: HTMLElement, value: boolean): void;
+export declare function setListboxReadonly<State extends OuiListboxState>(state: State, value: boolean): void;
+export declare function setListboxRequired<State extends OuiListboxState>(state: State, value: boolean): void;
+//#endregion

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

@@ -1,2 +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-C7CRa5Ya.mjs";
+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-BQyZGKgr.mjs";
 export { generateListboxIds, getListboxVisibleOptions, setListboxDisabled, setListboxFilter, setListboxLimit, setListboxMultiple, setListboxReadonly, setListboxRequired };

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

@@ -1,2 +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 };
+import { a as OuiListboxGroup, c as OuiListboxPreview, d as OuiListboxStateForm, f 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 OuiListboxStateComponent } from "../../listbox.model-CuBOj4qe.mjs";
+export { OuiListboxAttributes, OuiListboxAutoComplete, OuiListboxAutoCompleteType, OuiListboxCallbacks, OuiListboxGroup, OuiListboxLocalizations, OuiListboxOptions, OuiListboxPreview, OuiListboxState, OuiListboxStateComponent, OuiListboxStateForm, OuiListboxType };

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

@@ -1,7 +1,6 @@
-import { l as OuiListboxState, u as OuiListboxStates } from "../../listbox.model-CRReGOmu.mjs";
+import { l as OuiListboxState } from "../../listbox.model-CuBOj4qe.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 };
+export declare function attachListbox<State extends OuiListboxState>(state: State, set: Set<State>, onAttach: (state: State) => void): void;
+export declare function detachListbox<State extends OuiListboxState>(state: State, set: Set<State>, onDetach: (state: State) => void): void;
+export declare function initializeListboxState<State extends OuiListboxState>(state: State, set: Set<State>, onAttach: (state: State) => void): State;
+//#endregion

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

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

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

@@ -1,6 +1,7 @@
 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 };
+export declare function copyValue(value: string, onSuccess?: () => void, onError?: () => void): void;
+export declare function getAttributeValue<Value>(element: HTMLElement, attribute: string, possible: Set<Value>, defaultValue: Value): Value;
+export declare function getBooleanAriaValue(element: HTMLElement, attribute: AnyAriaBooleanAttribute): boolean;
+export declare const EXPRESSION_WHITESPACE: RegExp;
+//#endregion

package/dist/js/internal/misc.mjs

@@ -1,6 +1,11 @@
 import { getAria } from "@oscarpalmer/toretto/aria";
 import { getAttribute } from "@oscarpalmer/toretto/attribute";
+import { noop } from "@oscarpalmer/atoms/function";
+import { attempt } from "@oscarpalmer/atoms/result";
 //#region src/js/internal/misc.ts
+function copyValue(value, onSuccess, onError) {
+	if (!attempt(() => navigator.clipboard.writeText(value).then(onSuccess ?? noop, onError ?? noop)).ok) onError?.();
+}
 function getAttributeValue(element, attribute, possible, defaultValue) {
 	const value = getAttribute(element, attribute);
 	return possible.has(value) ? value : defaultValue;
@@ -9,5 +14,6 @@ function getBooleanAriaValue(element, attribute) {
 	const value = getAria(element, attribute);
 	return value === true || value === "true";
 }
+const EXPRESSION_WHITESPACE = /\s+/;
 //#endregion
-export { getAttributeValue, getBooleanAriaValue };
+export { EXPRESSION_WHITESPACE, copyValue, getAttributeValue, getBooleanAriaValue };

package/dist/js/internal/navigable/index.d.mts

@@ -0,0 +1,6 @@
+import { d as OuiNavigable, h as OuiNavigableOrientation, m as OuiNavigableOptions } from "../../navigable.model-BPOM8DZk.mjs";
+//#region src/js/internal/navigable/index.d.ts
+export declare function getNavigable(element: HTMLElement, options: OuiNavigableOptions): OuiNavigable;
+export declare function getNavigableOrientation(element: HTMLElement, vertical: boolean, aria?: boolean): OuiNavigableOrientation;
+export declare function updateNavigableFocus(navigable: OuiNavigable, focus: boolean, items?: HTMLElement[]): void;
+//#endregion

package/dist/js/internal/navigable/index.mjs

@@ -0,0 +1,125 @@
+import { NAVIGABLE_KEYS_ABSOLUTE, NAVIGABLE_KEYS_ACTIVATE, NAVIGABLE_KEYS_ALL, NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_NEXT, NAVIGABLE_ORIENTATIONS, NAVIGABLE_ORIENTATION_HORIZONTAL, NAVIGABLE_ORIENTATION_VERTICAL, NAVIGABLE_SYMBOL } from "./navigable.model.mjs";
+import { getAria, setAria, setRole } from "@oscarpalmer/toretto/aria";
+import { getAttribute } from "@oscarpalmer/toretto/attribute";
+import { on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { filter } from "@oscarpalmer/atoms/array/filter";
+import { clamp } from "@oscarpalmer/atoms/number";
+//#region src/js/internal/navigable/index.ts
+function OuiNavigable(element, options) {
+	this[NAVIGABLE_SYMBOL] = {
+		element,
+		options,
+		active: { index: 0 },
+		listeners: [
+			on(element, "click", (event) => {
+				onClick(this, event);
+			}, { passive: false }),
+			on(element, "focusin", (event) => {
+				onFocusin(this, event);
+			}),
+			on(element, "keydown", (event) => {
+				onKeydown(this, event);
+			}, { passive: false })
+		],
+		orientation: options?.orientation ?? getNavigableOrientation(element, options.vertical)
+	};
+	setAria(element, "orientation", this[NAVIGABLE_SYMBOL].orientation);
+	if (options.role != null) setRole(element, options.role);
+}
+OuiNavigable.prototype.destroy = destroyNavigable;
+OuiNavigable.prototype.navigate = navigateWithNavigable;
+function destroyNavigable() {
+	const state = this[NAVIGABLE_SYMBOL];
+	const listeners = state.listeners.splice(0);
+	for (const listener of listeners) listener();
+	state.active.element = void 0;
+	state.element = void 0;
+}
+function getItems(container, selector) {
+	return filter([...container.querySelectorAll(selector)], isValidItem);
+}
+function getNavigable(element, options) {
+	return new OuiNavigable(element, options);
+}
+function getNavigableOrientation(element, vertical, aria) {
+	const attribute = aria ?? true ? getAria(element, "orientation") : getAttribute(element, "orientation");
+	return NAVIGABLE_ORIENTATIONS.has(attribute) ? attribute : vertical ? NAVIGABLE_ORIENTATION_VERTICAL : NAVIGABLE_ORIENTATION_HORIZONTAL;
+}
+function isValidItem(element) {
+	return "disabled" in element ? element.disabled !== true : true;
+}
+function navigateWithNavigable(index, focus) {
+	const { element, options } = this[NAVIGABLE_SYMBOL];
+	const items = getItems(element, options.selector);
+	if (index >= 0 && index < items.length) onNavigate(this, index, items, focus ?? false);
+}
+function onClick(navigable, event) {
+	const { active, element, options } = navigable[NAVIGABLE_SYMBOL];
+	const item = findAncestor(event, options.selector);
+	const items = getItems(element, options.selector);
+	const index = items.indexOf(item);
+	if (index === -1) return;
+	if (index !== active.index) onNavigate(navigable, index, items, false);
+	options.onActivate?.(navigable);
+	item.focus();
+}
+function onNavigate(navigable, index, items, focus) {
+	const { active, options } = navigable[NAVIGABLE_SYMBOL];
+	active.element = items[index];
+	active.index = index;
+	updateNavigableFocus(navigable, focus, items);
+	options.onNavigation?.(navigable);
+}
+function onFocusin(navigable, event) {
+	const { active, element, options } = navigable[NAVIGABLE_SYMBOL];
+	const item = findAncestor(event, options.selector);
+	if (!isHTMLOrSVGElement(item) || !isValidItem(item)) return;
+	const items = getItems(element, options.selector);
+	const index = items.indexOf(item);
+	if (index === -1) return;
+	active.element = item;
+	active.index = index;
+	updateNavigableFocus(navigable, false, items);
+}
+function onKeydown(navigable, event) {
+	const { active, element, options, orientation } = navigable[NAVIGABLE_SYMBOL];
+	const escaped = event.key === "Escape";
+	const stopPropagation = options.onShouldDeactivate?.(event, navigable);
+	if (escaped || stopPropagation != null) {
+		if (escaped || stopPropagation) event.stopPropagation();
+		options.onDeactivate?.(event, navigable);
+		return;
+	}
+	if (!NAVIGABLE_KEYS_ALL.has(event.key)) return;
+	const mustActivate = NAVIGABLE_KEYS_ACTIVATE.has(event.key);
+	const shouldActivate = options.onShouldActivate?.(event, navigable) === true;
+	if (mustActivate || shouldActivate || options.onPreventNavigation?.(event, navigable) === true) event.stopPropagation();
+	if (mustActivate || shouldActivate) {
+		options.onActivate?.(navigable);
+		return;
+	}
+	const items = getItems(element, options.selector);
+	const { length } = items;
+	if (length === 0) return;
+	event.preventDefault();
+	let index;
+	if (NAVIGABLE_KEYS_ABSOLUTE.has(event.key)) index = event.key === "Home" ? 0 : items.length - 1;
+	else if (orientation === (NAVIGABLE_KEYS_HORIZONTAL.has(event.key) ? "horizontal" : "vertical")) {
+		if (active.element instanceof HTMLSelectElement) event.preventDefault();
+		index = clamp(active.index + (NAVIGABLE_KEYS_NEXT.has(event.key) ? 1 : -1), 0, length - 1, true);
+	}
+	if (index != null && index !== active.index) onNavigate(navigable, index, items, true);
+}
+function updateNavigableFocus(navigable, focus, items) {
+	const { active, element, options } = navigable[NAVIGABLE_SYMBOL];
+	const updated = items ?? getItems(element, options.selector);
+	const { length } = updated;
+	if (length === 0) return;
+	for (let index = 0; index < length; index += 1) updated[index].tabIndex = index === active.index ? 0 : -1;
+	active.element ??= updated[active.index];
+	if (focus) active.element?.focus();
+}
+//#endregion
+export { getNavigable, getNavigableOrientation, updateNavigableFocus };

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

@@ -0,0 +1,2 @@
+import { a as NAVIGABLE_KEYS_NEXT, c as NAVIGABLE_ORIENTATION_HORIZONTAL, d as OuiNavigable, f as OuiNavigableActive, g as OuiNavigableState, h as OuiNavigableOrientation, i as NAVIGABLE_KEYS_HORIZONTAL, l as NAVIGABLE_ORIENTATION_VERTICAL, m as OuiNavigableOptions, n as NAVIGABLE_KEYS_ACTIVATE, o as NAVIGABLE_KEYS_VERTICAL, p as OuiNavigableCallback, r as NAVIGABLE_KEYS_ALL, s as NAVIGABLE_ORIENTATIONS, t as NAVIGABLE_KEYS_ABSOLUTE, u as NAVIGABLE_SYMBOL } from "../../navigable.model-BPOM8DZk.mjs";
+export { NAVIGABLE_KEYS_ABSOLUTE, NAVIGABLE_KEYS_ACTIVATE, NAVIGABLE_KEYS_ALL, NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_NEXT, NAVIGABLE_KEYS_VERTICAL, NAVIGABLE_ORIENTATIONS, NAVIGABLE_ORIENTATION_HORIZONTAL, NAVIGABLE_ORIENTATION_VERTICAL, NAVIGABLE_SYMBOL, OuiNavigable, OuiNavigableActive, OuiNavigableCallback, OuiNavigableOptions, OuiNavigableOrientation, OuiNavigableState };

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

@@ -0,0 +1,18 @@
+//#region src/js/internal/navigable/navigable.model.ts
+const NAVIGABLE_KEYS_ABSOLUTE = /* @__PURE__ */ new Set(["End", "Home"]);
+const NAVIGABLE_KEYS_ACTIVATE = /* @__PURE__ */ new Set(["Enter", " "]);
+const NAVIGABLE_KEYS_HORIZONTAL = /* @__PURE__ */ new Set(["ArrowRight", "ArrowLeft"]);
+const NAVIGABLE_KEYS_VERTICAL = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp"]);
+const NAVIGABLE_KEYS_ALL = /* @__PURE__ */ new Set([
+	...NAVIGABLE_KEYS_ABSOLUTE,
+	...NAVIGABLE_KEYS_ACTIVATE,
+	...NAVIGABLE_KEYS_HORIZONTAL,
+	...NAVIGABLE_KEYS_VERTICAL
+]);
+const NAVIGABLE_KEYS_NEXT = /* @__PURE__ */ new Set(["ArrowDown", "ArrowRight"]);
+const NAVIGABLE_ORIENTATION_HORIZONTAL = "horizontal";
+const NAVIGABLE_ORIENTATION_VERTICAL = "vertical";
+const NAVIGABLE_ORIENTATIONS = /* @__PURE__ */ new Set([NAVIGABLE_ORIENTATION_HORIZONTAL, NAVIGABLE_ORIENTATION_VERTICAL]);
+const NAVIGABLE_SYMBOL = Symbol("oui-navigable");
+//#endregion
+export { NAVIGABLE_KEYS_ABSOLUTE, NAVIGABLE_KEYS_ACTIVATE, NAVIGABLE_KEYS_ALL, NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_NEXT, NAVIGABLE_KEYS_VERTICAL, NAVIGABLE_ORIENTATIONS, NAVIGABLE_ORIENTATION_HORIZONTAL, NAVIGABLE_ORIENTATION_VERTICAL, NAVIGABLE_SYMBOL };

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

@@ -0,0 +1,9 @@
+import { c as OuiLocalizations, s as OuiLocalizationParameters, u as OuiLocalizationsValues } from "../l10n.model-D6a9frgl.mjs";
+import { GenericCallback } from "@oscarpalmer/atoms/models";
+//#region src/js/l10n/index.d.ts
+export declare function createLocalizations<Localizations extends OuiLocalizationsValues>(defaults: Localizations): OuiLocalizations<Localizations>;
+export declare function getLanguage(element: Element): string;
+export 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;
+export declare function localize<Localizations extends OuiLocalizationsValues, Key extends keyof Localizations, Localization extends Localizations[Key]>(localization: Localization, data: Record<string, unknown>, parameters: OuiLocalizationParameters<Localization>): string;
+export declare function updateLocalizations<Localizations extends OuiLocalizationsValues>(instance: OuiLocalizations<Localizations>, values: Record<string, Partial<Localizations>>, destination: Record<string, Partial<Localizations>>, onAfter?: () => void): void;
+//#endregion