@oscarpalmer/oui 0.39.0 → 0.40.0

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

@@ -1,34 +1,36 @@
 import { LISTBOX_KEYS_NAVIGATION, LISTBOX_KEYS_SELECTION } from "./listbox.constants.mjs";
-import { S as getListboxVisibleOptions } from "../../listbox.data-DQ7-x2uY.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);
+			if (!ignore) callbacks.keydown.onSelection?.(state);
 			break;
 		case LISTBOX_KEYS_NAVIGATION.has(event.key):
-			if (!state.disabled) onNavigation(event, state);
+			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,4 +1,4 @@
-import { l as OuiListboxState } from "../../listbox.model-BHPA7GM4.mjs";
+import { l as OuiListboxState } from "../../listbox.model-CuBOj4qe.mjs";
 //#region src/js/internal/listbox/listbox.form.d.ts
 export declare function updateListboxForm<State extends OuiListboxState>(state: State, values: string[], emit?: boolean): void;
 export declare function updateListboxValidity(state: OuiListboxState): void;

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,4 +1,4 @@
-import { l as OuiListboxState } from "../../listbox.model-BHPA7GM4.mjs";
+import { l as OuiListboxState } from "../../listbox.model-CuBOj4qe.mjs";
 //#region src/js/internal/listbox/listbox.misc.d.ts
 export declare function generateListboxIds(prefix: string, select: HTMLSelectElement): void;
 export declare function getListboxVisibleOptions(state: OuiListboxState): HTMLElement[];

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

@@ -3,4 +3,5 @@ import { AnyAriaBooleanAttribute } from "@oscarpalmer/toretto/models";
 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,13 +1,10 @@
 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) {
-	try {
-		navigator.clipboard.writeText(value).then(onSuccess ?? noop, onError ?? noop);
-	} catch {
-		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);
@@ -17,5 +14,6 @@ function getBooleanAriaValue(element, attribute) {
 	const value = getAria(element, attribute);
 	return value === true || value === "true";
 }
+const EXPRESSION_WHITESPACE = /\s+/;
 //#endregion
-export { copyValue, 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

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

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

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

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

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

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

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

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

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

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

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

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