@oscarpalmer/oui 0.39.0 → 0.41.0

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

@@ -0,0 +1,243 @@
+import { DRAGGABLE_SELECTOR, DRAGGABLE_SELECTOR_MOVABLE_HANDLE, DRAGGABLE_SELECTOR_SORTABLE_HANDLE, DRAGGABLE_SELECTOR_SORTABLE_ITEM, DRAGGABLE_SYMBOL, draggableContainers, draggableGlobals, draggableHorizontals, draggableProperties, draggableStyleToggler, draggableStyles, draggableVerticals } from "./draggable.model.mjs";
+import { MOVABLE_ATTRIBUTE } from "../../movable/movable.model.mjs";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
+import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { setStyle, setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
+import { clamp } from "@oscarpalmer/atoms/number";
+import { supportsTouch } from "@oscarpalmer/toretto/touch";
+//#region src/js/internal/draggable/index.ts
+function addDraggable(element, options) {
+	let instances = draggableGlobals.instances.get(element);
+	if (instances == null) {
+		instances = {};
+		draggableGlobals.instances.set(element, instances);
+	}
+	instances[this.property] ??= new this.constructor(element, options);
+	return instances[this.property];
+}
+function cancelDrag(item) {
+	if (item == null) return;
+	item.state.options.drag.onCancel?.(item);
+	dispatch(item.state.element, `oui:${item.state.name}:cancel`, { detail: { element: item.state.options.getOrigin() } });
+	reset();
+}
+function destroyDraggable(draggable) {
+	const state = draggable[DRAGGABLE_SYMBOL];
+	if (state.destroyed) return;
+	state.destroyed = true;
+	destroyInstance(draggable, state);
+}
+function destroyInstance(instance, state) {
+	unsetContainer({
+		instance,
+		state
+	});
+	state.element.removeAttribute(state.attribute);
+	state.styling.remove();
+	state.container = void 0;
+	state.element = void 0;
+	state.options = void 0;
+	state.styling = void 0;
+}
+function getDraggableStates(element) {
+	return draggableGlobals.states.get(element);
+}
+function getDraggableElement() {
+	return this[DRAGGABLE_SYMBOL].element;
+}
+function getHandle(event, isMovable) {
+	return findAncestor(event, isMovable ? DRAGGABLE_SELECTOR_MOVABLE_HANDLE : DRAGGABLE_SELECTOR_SORTABLE_HANDLE);
+}
+function getNextPosition(item, position) {
+	let x = draggableGlobals.original?.x ?? 0;
+	let y = draggableGlobals.original?.y ?? 0;
+	if (item.state.horizontal) {
+		x = position.x - (draggableGlobals.offset?.x ?? 0);
+		if (draggableGlobals.container != null && draggableGlobals.element != null) x = clamp(x, draggableGlobals.container.left, draggableGlobals.container.right - draggableGlobals.element.rectangle.width);
+	}
+	if (item.state.vertical) {
+		y = position.y - (draggableGlobals.offset?.y ?? 0);
+		if (draggableGlobals.container != null && draggableGlobals.element != null) y = clamp(y, draggableGlobals.container.top, draggableGlobals.container.bottom - draggableGlobals.element.rectangle.height);
+	}
+	return {
+		x,
+		y
+	};
+}
+function initializeDraggable(draggable, name, event, attribute, element, options, extras) {
+	const state = {
+		...extras,
+		attribute,
+		element,
+		event,
+		name,
+		options,
+		destroyed: false,
+		horizontal: true,
+		styling: toggleStyles(element, draggableStyles),
+		vertical: true
+	};
+	const item = {
+		state,
+		instance: draggable
+	};
+	setContainer(item);
+	setDirection(item);
+	setAttribute(element, attribute, "");
+	let states = draggableGlobals.states.get(element);
+	states ??= {};
+	states[state.name] = state;
+	draggableGlobals.states.set(element, states);
+	return state;
+}
+function onKeydown(event) {
+	if (current != null && event.key === "Escape") cancelDrag(current);
+}
+function onPointerdown(event) {
+	if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || (supportsTouch.value ? event.type === "mousedown" : event.type === "touchstart" || event.button !== 0)) return;
+	const container = findAncestor(event, DRAGGABLE_SELECTOR);
+	if (container == null) return;
+	const instances = draggableGlobals.instances.get(container);
+	const states = draggableGlobals.states.get(container);
+	if (instances == null || states == null) return;
+	const isMovable = container.hasAttribute(MOVABLE_ATTRIBUTE);
+	const item = {
+		instance: isMovable ? instances.movable : instances.sortable,
+		state: isMovable ? states.movable : states.sortable
+	};
+	if (item.instance == null || item.state == null) return;
+	if (supportsTouch.value) event.preventDefault();
+	let element = container;
+	if (!isMovable) {
+		element = findAncestor(event, DRAGGABLE_SELECTOR_SORTABLE_ITEM);
+		if (element == null || element.parentElement !== container) return;
+	}
+	let handle = element;
+	item.state.hasHandles ??= element.querySelector(DRAGGABLE_SELECTOR_SORTABLE_HANDLE) != null;
+	if (item.state.hasHandles) handle = getHandle(event, isMovable);
+	if (handle == null) return;
+	const dragged = item.state.options.getDragged();
+	const rectangle = dragged.getBoundingClientRect();
+	const position = getEventPosition(event) ?? {
+		x: 0,
+		y: 0
+	};
+	current = item;
+	draggableGlobals.container = item.state.container?.getBoundingClientRect();
+	draggableGlobals.element = {
+		rectangle,
+		node: dragged
+	};
+	draggableGlobals.offset = item.state.options.position.getOffset(item, element, position);
+	draggableGlobals.original = item.state.options.position.getOriginal(item, position);
+	if (dispatch(item.state.element, `oui:${item.state.name}:begin`, { detail: {
+		element,
+		position: { ...draggableGlobals.original }
+	} }).defaultPrevented) {
+		item.state.options.drag.onCancel?.(item);
+		reset();
+		return;
+	}
+	const next = getNextPosition(item, position);
+	setStyles(dragged, {
+		position: "fixed",
+		inset: `${next.y}px auto auto ${next.x}px`,
+		transform: "translate3d(0, 0, 0)"
+	});
+	item.state.options.drag.onBegin?.(event, item, element, handle, next);
+	item.state.styling.set();
+	draggableStyleToggler.set();
+}
+function onPointermove(event) {
+	if (current == null) return;
+	const position = getEventPosition(event);
+	if (position == null) return;
+	const next = getNextPosition(current, position);
+	if (draggableGlobals.element != null) setStyle(draggableGlobals.element.node, "inset", `${next.y}px auto auto ${next.x}px`);
+	const detail = current.state.options.drag.onMove(event, current, {
+		calculated: next,
+		original: position
+	});
+	if (dispatch(current.state.element, `oui:${current.state.name}:move`, { detail }).defaultPrevented) cancelDrag(current);
+}
+function onPointerup(event) {
+	current?.state.options.drag.onEnd?.(event, current, reset);
+}
+function removeDraggable(element) {
+	const { property } = this;
+	removeInstance(draggableGlobals.instances, property, element);
+	removeState(draggableGlobals.states, property, element);
+}
+function removeInstance(instances, name, element) {
+	removeStored(instances, name, element);
+}
+function removeState(map, name, element) {
+	removeStored(map, name, element);
+}
+function removeStored(map, name, element) {
+	const stored = map.get(element);
+	const item = stored?.[name];
+	if (stored == null || item == null) return;
+	const itemAsPlainObject = item;
+	if (typeof itemAsPlainObject.destroy === "function") itemAsPlainObject.destroy();
+	stored[name] = void 0;
+	if (stored[draggableProperties[name]] == null) map.delete(element);
+}
+function reset() {
+	current?.state.styling.remove();
+	draggableStyleToggler.remove();
+	current = void 0;
+	draggableGlobals.container = void 0;
+	draggableGlobals.element = void 0;
+	draggableGlobals.offset = void 0;
+	draggableGlobals.original = void 0;
+}
+function setContainer(item) {
+	const { container } = item.state.options.input ?? {};
+	if (isHTMLOrSVGElement(container)) {
+		setContainerElement(item, container);
+		return;
+	}
+	const selector = container ?? getAttribute(item.state.element, item.state.options.container.attribute);
+	if (typeof selector !== "string") return;
+	const element = draggableContainers.has(selector) ? item.state.element.ownerDocument.body : document.querySelector(selector) ?? void 0;
+	if (isHTMLOrSVGElement(element)) setContainerElement(item, element);
+}
+function setContainerElement(item, element) {
+	item.state.container = element;
+	const set = item.state.options.container.map.get(element);
+	if (set == null) item.state.options.container.map.set(element, /* @__PURE__ */ new Set([item.instance]));
+	else set.add(item.instance);
+	item.state.options.container.onInitialize?.(item);
+}
+function setDirection(item) {
+	const direction = getAttribute(item.state.element, item.state.options.direction.attribute);
+	if (draggableHorizontals.has(direction)) item.state.vertical = false;
+	else if (draggableVerticals.has(direction)) item.state.horizontal = false;
+	item.state.options.direction.onAfter?.(item);
+}
+function unsetContainer(item) {
+	const { container } = item.state;
+	if (container == null) return;
+	const set = item.state.options.container.map.get(container);
+	let empty = false;
+	if (set != null) {
+		set.delete(item.instance);
+		if (set.size === 0) {
+			empty = true;
+			item.state.options.container.map.delete(container);
+		}
+	}
+	item.state.options.container.onDestroy?.(item, container, empty);
+}
+let current;
+on(document, "keydown", onKeydown);
+on(document, "mousedown", onPointerdown);
+on(document, "pointermove", onPointermove);
+on(document, "pointerup", onPointerup);
+on(document, "touchcancel", onPointerup);
+on(document, "touchstart", onPointerdown, { passive: false });
+//#endregion
+export { addDraggable, destroyDraggable, getDraggableElement, getDraggableStates, initializeDraggable, removeDraggable };

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

@@ -0,0 +1,5 @@
+import { _ as OuiLocalizationsValues, p as OuiLocalizations, u as OuiDefaultLocalizations } from "../../l10n.model-D1E1u35L.mjs";
+//#region src/js/internal/l10n/index.d.ts
+export declare function createDefaultLocalizations<Localizations extends OuiLocalizationsValues>(values: Localizations): OuiDefaultLocalizations<Localizations>;
+export declare function createLocalizations<Localizations extends OuiLocalizationsValues>(defaults: OuiDefaultLocalizations<Localizations>): OuiLocalizations<Localizations>;
+//#endregion

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

@@ -0,0 +1,147 @@
+import { L10N_MESSAGE_DEFAULT, L10N_MESSAGE_ITEM_CREATE, L10N_MESSAGE_ITEM_UPDATE_KEY, L10N_MESSAGE_ITEM_UPDATE_VALUE, L10N_MESSAGE_OBJECT_CREATE, L10N_MESSAGE_OBJECT_UPDATE, L10N_SYMBOL, L10N_TYPE_DEFAULT, L10N_TYPE_INSTANCE } from "./l10n.model.mjs";
+import { isPlainObject } from "@oscarpalmer/atoms/is";
+//#region src/js/internal/l10n/index.ts
+function OuiDefaultLocalizations(values) {
+	this[L10N_SYMBOL] = {
+		defaults: values,
+		keys: new Set(Object.keys(values)),
+		type: L10N_TYPE_DEFAULT,
+		values: {}
+	};
+}
+OuiDefaultLocalizations.prototype.localize = localizeDefault;
+OuiDefaultLocalizations.prototype.setDefaults = setDefaultLocalizations;
+OuiDefaultLocalizations.prototype.setLanguages = setLocalizations;
+Object.defineProperties(OuiDefaultLocalizations.prototype, {
+	keys: {
+		enumerable: true,
+		get: getKeys
+	},
+	values: {
+		enumerable: true,
+		get: getValues
+	}
+});
+function OuiLocalizations(defaults) {
+	this[L10N_SYMBOL] = {
+		defaults,
+		keys: new Set(defaults.keys),
+		values: {},
+		type: L10N_TYPE_INSTANCE
+	};
+}
+OuiLocalizations.prototype.localize = localizeWithLanguage;
+OuiLocalizations.prototype.set = setLocalizations;
+Object.defineProperties(OuiLocalizations.prototype, { defaults: {
+	enumerable: true,
+	get: getDefaults
+} });
+function createDefaultLocalizations(values) {
+	validateDefaultValues(values);
+	return new OuiDefaultLocalizations(values);
+}
+function createLocalizations(defaults) {
+	validateDefaultInstance(defaults);
+	return new OuiLocalizations(defaults);
+}
+function getDefaults() {
+	return this[L10N_SYMBOL].defaults;
+}
+function getKeys() {
+	return [...this[L10N_SYMBOL].keys];
+}
+function getLanguage(parameters) {
+	return (typeof parameters?.language === "string" ? parameters.language : parameters?.element?.closest("[lang]")?.getAttribute("lang") ?? document.documentElement.lang).toLowerCase();
+}
+function getLocalization(key, parameters, defaultLocalizations, instanceLocalizations) {
+	const defaultState = defaultLocalizations?.[L10N_SYMBOL];
+	const instanceState = instanceLocalizations?.[L10N_SYMBOL];
+	const language = getLanguage(parameters);
+	const values = defaultState == null ? instanceState == null ? [] : [instanceState.values, instanceState.defaults.values.languages] : [defaultState.values];
+	const { length } = values;
+	let localization;
+	let shortLanguage;
+	for (let index = 0; index < length; index += 1) {
+		const value = values[index];
+		localization = value?.[language]?.[key];
+		if (localization != null) break;
+		shortLanguage ??= language.split("-")[0];
+		if (shortLanguage === language) continue;
+		localization = value?.[shortLanguage]?.[key];
+		if (localization != null) break;
+	}
+	if (localization != null) return localization;
+	return defaultState?.defaults[key] ?? instanceState?.defaults.values.defaults[key] ?? "";
+}
+function getValues() {
+	const { defaults, values } = this[L10N_SYMBOL];
+	return {
+		defaults,
+		languages: values
+	};
+}
+function isValidLocalization(value) {
+	return typeof value === "string" || typeof value === "function";
+}
+function localizeDefault(key, parameters) {
+	return localizeValue(key, parameters, this, void 0);
+}
+function localizeWithLanguage(key, parameters) {
+	return localizeValue(key, parameters, void 0, this);
+}
+function localizeValue(key, parameters, defaultLocalizations, instanceLocalizations) {
+	const localization = getLocalization(key, parameters, defaultLocalizations, instanceLocalizations);
+	if (typeof localization === "function") return localization(...Array.isArray(parameters?.arguments) ? parameters.arguments : []);
+	return localization;
+}
+async function setDefaultLocalizations(values) {
+	if (typeof values !== "object" || values == null) throw new TypeError(L10N_MESSAGE_OBJECT_UPDATE);
+	const state = this[L10N_SYMBOL];
+	return updateLocalizationValues(state, state.defaults, values).then((count) => count > 0);
+}
+function setLocalizations(first, second) {
+	return updateLocalizations(this, typeof first === "string" ? { [first]: second } : first);
+}
+async function updateLocalizationValues(state, to, from) {
+	const keys = Object.keys(from);
+	const keysLength = keys.length;
+	const toAsPlainObject = to;
+	let count = 0;
+	for (let keysIndex = 0; keysIndex < keysLength; keysIndex += 1) {
+		const key = keys[keysIndex];
+		const keyValue = from[key];
+		const normalizedKey = key.toLowerCase();
+		if (!state.keys.has(normalizedKey)) throw new TypeError(L10N_MESSAGE_ITEM_UPDATE_KEY);
+		if (!isValidLocalization(keyValue)) throw new TypeError(L10N_MESSAGE_ITEM_UPDATE_VALUE);
+		if (state.keys.has(normalizedKey) && isValidLocalization(keyValue)) {
+			count += 1;
+			toAsPlainObject[normalizedKey] = keyValue;
+		}
+	}
+	return count;
+}
+async function updateLocalizations(localizations, values) {
+	if (typeof values !== "object" || values == null) throw new TypeError(L10N_MESSAGE_OBJECT_UPDATE);
+	const state = localizations[L10N_SYMBOL];
+	const languages = Object.keys(values);
+	const languagesLength = languages.length;
+	let count = 0;
+	for (let languagesIndex = 0; languagesIndex < languagesLength; languagesIndex += 1) {
+		const language = languages[languagesIndex];
+		const languageValue = values[language];
+		if (typeof languageValue !== "object" || languageValue == null) throw new TypeError(L10N_MESSAGE_OBJECT_UPDATE);
+		const normalizedLanguage = language.toLowerCase();
+		state.values[normalizedLanguage] ??= {};
+		count += await updateLocalizationValues(state, state.values[normalizedLanguage], languageValue);
+	}
+	return count > 0;
+}
+function validateDefaultInstance(value) {
+	if (typeof value !== "object" || value === null || !(L10N_SYMBOL in value)) throw new TypeError(L10N_MESSAGE_DEFAULT);
+}
+function validateDefaultValues(value) {
+	if (!isPlainObject(value) || Object.keys(value).length === 0) throw new TypeError(L10N_MESSAGE_OBJECT_CREATE);
+	if (!Object.values(value).every(isValidLocalization)) throw new TypeError(L10N_MESSAGE_ITEM_CREATE);
+}
+//#endregion
+export { createDefaultLocalizations, createLocalizations };

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

@@ -0,0 +1,2 @@
+import { _ as OuiLocalizationsValues, a as L10N_MESSAGE_OBJECT_CREATE, c as L10N_TYPE_DEFAULT, d as OuiDefaultLocalizationsState, f as OuiDefaultLocalizationsValues, g as OuiLocalizationsType, h as OuiLocalizationsState, i as L10N_MESSAGE_ITEM_UPDATE_VALUE, l as L10N_TYPE_INSTANCE, m as OuiLocalizationsParameters, n as L10N_MESSAGE_ITEM_CREATE, o as L10N_MESSAGE_OBJECT_UPDATE, p as OuiLocalizations, r as L10N_MESSAGE_ITEM_UPDATE_KEY, s as L10N_SYMBOL, t as L10N_MESSAGE_DEFAULT, u as OuiDefaultLocalizations } from "../../l10n.model-D1E1u35L.mjs";
+export { L10N_MESSAGE_DEFAULT, L10N_MESSAGE_ITEM_CREATE, L10N_MESSAGE_ITEM_UPDATE_KEY, L10N_MESSAGE_ITEM_UPDATE_VALUE, L10N_MESSAGE_OBJECT_CREATE, L10N_MESSAGE_OBJECT_UPDATE, L10N_SYMBOL, L10N_TYPE_DEFAULT, L10N_TYPE_INSTANCE, OuiDefaultLocalizations, OuiDefaultLocalizationsState, OuiDefaultLocalizationsValues, OuiLocalizations, OuiLocalizationsParameters, OuiLocalizationsState, OuiLocalizationsType, OuiLocalizationsValues };

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

@@ -0,0 +1,12 @@
+//#region src/js/internal/l10n/l10n.model.ts
+const L10N_MESSAGE_DEFAULT = "Default localizations must be an instance of OuiDefaultLocalizations.";
+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_TYPE_DEFAULT = "default";
+const L10N_TYPE_INSTANCE = "instance";
+const L10N_SYMBOL = Symbol("l10n");
+//#endregion
+export { L10N_MESSAGE_DEFAULT, L10N_MESSAGE_ITEM_CREATE, L10N_MESSAGE_ITEM_UPDATE_KEY, L10N_MESSAGE_ITEM_UPDATE_VALUE, L10N_MESSAGE_OBJECT_CREATE, L10N_MESSAGE_OBJECT_UPDATE, L10N_SYMBOL, L10N_TYPE_DEFAULT, L10N_TYPE_INSTANCE };

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

@@ -1,6 +1,7 @@
 import { AnyAriaBooleanAttribute } from "@oscarpalmer/toretto/models";
 //#region src/js/internal/misc.d.ts
 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 function getAttributeValue<Value>(element: Element, attribute: string, possible: Set<Value>, defaultValue: Value): Value;
+export declare function getBooleanAriaValue(element: Element, 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-BqoR6iBv.mjs";
+//#region src/js/internal/navigable/index.d.ts
+export declare function getNavigable(element: Element, options: OuiNavigableOptions): OuiNavigable;
+export declare function getNavigableOrientation(element: Element, 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-BqoR6iBv.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/internal/option-list/option-list.constants.d.mts

@@ -0,0 +1,8 @@
+import { _ as OptionListType } from "../../option-list.model-CCPUlPeX.mjs";
+//#region src/js/internal/option-list/option-list.constants.d.ts
+export declare const OPTION_LIST_KEYS_ACTIVATION: Set<string>;
+export declare const LISTBOX_KEYS_NAVIGATION: Set<string>;
+export declare const OPTION_LIST_KEYS_SELECTION: Set<string>;
+export declare const OPTION_LIST_TYPES: Set<OptionListType>;
+export declare const optionListScrollOptions: ScrollIntoViewOptions;
+//#endregion

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

@@ -0,0 +1,22 @@
+//#region src/js/internal/option-list/option-list.constants.ts
+const OPTION_LIST_KEYS_ACTIVATION = /* @__PURE__ */ new Set([
+	" ",
+	"Backspace",
+	"Delete",
+	"Enter"
+]);
+const LISTBOX_KEYS_NAVIGATION = /* @__PURE__ */ new Set([
+	"ArrowDown",
+	"ArrowUp",
+	"PageDown",
+	"PageUp"
+]);
+const OPTION_LIST_KEYS_SELECTION = /* @__PURE__ */ new Set(["ArrowRight", "End"]);
+const OPTION_LIST_TYPES = /* @__PURE__ */ new Set(["autocomplete", "select"]);
+const optionListScrollOptions = {
+	behavior: "auto",
+	block: "nearest",
+	inline: "nearest"
+};
+//#endregion
+export { LISTBOX_KEYS_NAVIGATION, OPTION_LIST_KEYS_ACTIVATION, OPTION_LIST_KEYS_SELECTION, OPTION_LIST_TYPES, optionListScrollOptions };

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

@@ -0,0 +1,21 @@
+import { _ as OuiLocalizationsValues } from "../../l10n.model-D1E1u35L.mjs";
+import { g as OptionListState } from "../../option-list.model-CCPUlPeX.mjs";
+import { PlainObject } from "@oscarpalmer/atoms/models";
+//#region src/js/internal/option-list/option-list.data.d.ts
+type ApplySelectionParameters<State extends PlainObject, Localizations extends OuiLocalizationsValues> = {
+  added: boolean;
+  emit?: boolean;
+  option?: HTMLElement;
+  scroll?: boolean;
+  selected?: HTMLElement[];
+  state: OptionListState<State, Localizations>;
+  values?: string[];
+};
+export declare function applyOptionListSelection<State extends PlainObject, Localizations extends OuiLocalizationsValues>(parameters: ApplySelectionParameters<State, Localizations>): void;
+export declare function filterOptionList<State extends PlainObject, Localizations extends OuiLocalizationsValues>(type: InputEvent["inputType"], state: OptionListState<State, Localizations>): void;
+export declare function filterOptionListOption<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, value: unknown, textContent?: boolean): HTMLElement | undefined;
+export declare function filterOptionListOptions<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>): HTMLElement | undefined;
+export declare function setOptionListValue<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, value: unknown, emit?: boolean): void;
+export declare function setOptionListValues<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, value: unknown[], emit?: boolean): void;
+export declare function toggleOptionListOption<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, option?: HTMLElement): void;
+//#endregion

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

@@ -0,0 +1,2 @@
+import { a as setOptionListValue, i as filterOptionListOptions, n as filterOptionList, o as setOptionListValues, r as filterOptionListOption, s as toggleOptionListOption, t as applyOptionListSelection } from "../../option-list.data-CgMyUwPc.mjs";
+export { applyOptionListSelection, filterOptionList, filterOptionListOption, filterOptionListOptions, setOptionListValue, setOptionListValues, toggleOptionListOption };