@oscarpalmer/oui 0.38.0 → 0.40.0

package/dist/js/{misc.listbox-Cyz2CRDy.mjs → misc.listbox-CjfBUbHD.mjs}

@@ -1,63 +1,18 @@
-import { getLocalizations, updateLocalizations } from "./l10n.mjs";
-import { b as updateListboxValueLabel, c as createListboxContent, n as filterListbox, s as toggleListboxOption, t as applyListboxSelection, v as updateListboxMessage, x as generateListboxIds, y as updateListboxPreview } from "./listbox.data-C7CRa5Ya.mjs";
-import { initializeListboxState } from "./internal/listbox/listbox.state.mjs";
+import { createLocalizations, updateLocalizations } from "./l10n/index.mjs";
 import { getBooleanAriaValue } from "./internal/misc.mjs";
-import { processListboxKeydown } from "./internal/listbox/listbox.event.mjs";
-import { LISTBOX_ATTRIBUTES, LISTBOX_MESSAGES, LISTBOX_SELECTORS, LISTBOX_TAGNAME } from "./listbox/constants.listbox.mjs";
+import { b as updateListboxValueLabel, c as createListboxContent, o as setListboxValues, v as updateListboxMessage, x as generateListboxIds } from "./listbox.data-BQyZGKgr.mjs";
+import { initializeListboxState } from "./internal/listbox/listbox.state.mjs";
+import { listboxAttributes, listboxMessages } from "./listbox/constants.listbox.mjs";
+import { onListboxEnter, onListboxFilter, onListboxNavigation, onListboxToggle } from "./listbox/event.listbox.mjs";
 import { setAttributes } from "@oscarpalmer/toretto/attribute";
-import { on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto/find";
-import { getData } from "@oscarpalmer/toretto/data";
 import { noop } from "@oscarpalmer/atoms/function";
-//#region src/js/listbox/event.listbox.ts
-function onListboxClick(event) {
-	const listbox = findAncestor(event, LISTBOX_TAGNAME);
-	const state = listboxStates.map.get(listbox);
-	if (listbox == null || state == null) return;
-	const option = findAncestor(event, LISTBOX_SELECTORS.option);
-	if (option == null) return;
-	if (state.disabled) state.filter.element.focus();
-	else if (state.readonly) updateListboxPreview("none", state, option, false);
-	else toggleListboxOption(state, option);
-}
-function onListboxEnter(state) {
-	if (!state.disabled && !state.readonly) toggleListboxOption(state, state.active);
-}
-function onListboxFilter(preview, state, _, active) {
-	updateListboxPreview(preview, state, active);
-}
-function onListboxInput(event) {
-	const listbox = findAncestor(event, LISTBOX_TAGNAME);
-	const state = listboxStates.map.get(listbox);
-	if (state?.filter.element === event.target) filterListbox(event.inputType, state);
-}
-function onListboxKeydown(event) {
-	const listbox = findAncestor(event, LISTBOX_TAGNAME);
-	const state = listboxStates.map.get(listbox);
-	if (state?.filter.element === event.target) processListboxKeydown(event, state);
-}
-function onListboxNavigation(preview, state, active) {
-	if (state.multiple || state.readonly) updateListboxPreview(preview, state, active);
-	else applyListboxSelection({
-		state,
-		option: active,
-		added: true,
-		selected: active == null ? [] : [active]
-	});
-}
-function onListboxToggle(state) {
-	state.filter.element.focus();
-}
-on(document, "click", onListboxClick);
-on(document, "input", onListboxInput);
-on(document, "keydown", onListboxKeydown, { passive: false });
-//#endregion
+import { getData } from "@oscarpalmer/toretto/data";
 //#region src/js/listbox/state.listbox.ts
-function createListboxState(element, internals) {
+function createComponentState(element, state) {
 	const select = element.querySelector("select");
-	if (select == null) throw new Error(LISTBOX_MESSAGES.select);
+	if (select == null) throw new Error(listboxMessages.select);
 	const label = element.querySelector(`label[for="${select.id}"]`);
-	if (label == null) throw new Error(LISTBOX_MESSAGES.label);
+	if (label == null) throw new Error(listboxMessages.label);
 	element.id = select.id;
 	const disabled = getBooleanAriaValue(element, "disabled") || select.disabled;
 	const multiple = element.multiple || select.multiple;
@@ -80,24 +35,22 @@ function createListboxState(element, internals) {
 		multiple,
 		select,
 		type,
-		attributes: LISTBOX_ATTRIBUTES,
+		attributes: listboxAttributes,
 		autocomplete: listboxAutoComplete,
 		listbox: true
 	});
 	const { selected } = content.list.options;
 	const values = selected.length === 0 ? [""] : selected.map((option) => getData(option, "value", false) ?? "");
-	const state = {
+	state.component = {
 		disabled,
 		id,
-		internals,
-		message: content.message,
 		multiple,
 		readonly,
 		required,
 		select,
 		type,
 		active: selected[0],
-		attributes: LISTBOX_ATTRIBUTES,
+		attributes: listboxAttributes,
 		autocomplete: listboxAutoComplete,
 		callbacks: listboxCallbacks,
 		content: content.element,
@@ -118,6 +71,7 @@ function createListboxState(element, internals) {
 			component: {},
 			global: listboxLocalizations
 		},
+		message: content.message,
 		name: element.name,
 		options: content.list.options,
 		values: {
@@ -126,16 +80,23 @@ function createListboxState(element, internals) {
 			label: content.value
 		}
 	};
-	return initializeListboxState(state, listboxStates, onAttachListbox);
+	return initializeListboxState(state, listboxes, onAttachListbox);
+}
+function initializeListbox(element, state) {
+	createComponentState(element, state);
+	if (state.form.restored != null) {
+		setListboxValues(state, state.form.restored);
+		state.form.restored = void 0;
+	}
 }
 function onAttachListbox(state) {
-	const { content, select } = state;
+	const { content, select } = state.component;
 	select.hidden = true;
 	select.insertAdjacentElement("afterend", content);
 	select.remove();
 }
 function onDetachListbox(state) {
-	const { content, select } = state;
+	const { content, select } = state.component;
 	content.insertAdjacentElement("beforebegin", select);
 	content.remove();
 	select.hidden = false;
@@ -160,7 +121,7 @@ const listboxCallbacks = {
 		onToggle: onListboxToggle
 	}
 };
-const listboxLocalizations = getLocalizations({
+const listboxLocalizations = createLocalizations({
 	empty: "No results found",
 	input: "",
 	invalid: "Please select an option from the list",
@@ -170,10 +131,7 @@ const listboxLocalizations = getLocalizations({
 	results: (amount) => `${amount} results available`,
 	selected: (amount) => `${amount} selected`
 });
-const listboxStates = {
-	map: /* @__PURE__ */ new WeakMap(),
-	set: /* @__PURE__ */ new Set()
-};
+const listboxes = /* @__PURE__ */ new Set();
 //#endregion
 //#region src/js/listbox/misc.listbox.ts
 function getListboxId() {
@@ -185,7 +143,7 @@ function setListboxLocalizations(first, second) {
 }
 function updateListboxLocalizations(instance, destination, first, second) {
 	updateLocalizations(instance, typeof first === "string" ? { [first]: second } : first, destination, () => {
-		for (const state of listboxStates.set) {
+		for (const state of listboxes) {
 			updateListboxMessage(state);
 			updateListboxValueLabel(state);
 		}
@@ -193,4 +151,4 @@ function updateListboxLocalizations(instance, destination, first, second) {
 }
 let index = 0;
 //#endregion
-export { listboxLocalizations as a, onDetachListbox as c, onListboxNavigation as d, onListboxToggle as f, createListboxState as i, onListboxEnter as l, setListboxLocalizations as n, listboxStates as o, updateListboxLocalizations as r, onAttachListbox as s, getListboxId as t, onListboxFilter as u };
+export { listboxLocalizations as a, onDetachListbox as c, initializeListbox as i, setListboxLocalizations as n, listboxes as o, updateListboxLocalizations as r, onAttachListbox as s, getListboxId as t };

package/dist/js/{misc.listbox-gnoJhrTr.d.mts → misc.listbox-CtoGvXQo.d.mts}

@@ -1,5 +1,5 @@
-import { t as OuiLocalizations } from "./l10n-Bn-7RcwR.mjs";
-import { o as OuiListboxLocalizations } from "./listbox.model-CRReGOmu.mjs";
+import { c as OuiLocalizations } from "./l10n.model-D6a9frgl.mjs";
+import { o as OuiListboxLocalizations } from "./listbox.model-CuBOj4qe.mjs";
 //#region src/js/listbox/misc.listbox.d.ts
 declare function getListboxId(): string;
 /**

package/dist/js/movable/movable.embedded.d.mts

@@ -1,2 +1,2 @@
-import { g as createMovable, h as OuiMovable, m as ATTRIBUTE_MOVABLE_HANDLE, p as ATTRIBUTE_MOVABLE } from "../draggable-a6w0J1OD.mjs";
-export { ATTRIBUTE_MOVABLE, ATTRIBUTE_MOVABLE_HANDLE, OuiMovable, createMovable };
+import { t as createMovable } from "../movable.embedded-DoyXLegc.mjs";
+export { createMovable };

package/dist/js/movable/movable.embedded.mjs

@@ -1,62 +1,53 @@
 import { attributable } from "../internal/attributable.mjs";
-import { OuiDraggable, addDraggable, getDraggableStates, removeDraggable } from "../internal/draggable.mjs";
+import { DRAGGABLE_SYMBOL } from "../internal/draggable/draggable.model.mjs";
+import { MOVABLE_ATTRIBUTE, MOVABLE_ATTRIBUTE_CONTAINER, MOVABLE_ATTRIBUTE_DIRECTION, MOVABLE_ATTRIBUTE_MOVING, MOVABLE_CONTAINERS, MOVABLE_MESSAGE, MOVABLE_MOVED, MOVABLE_SELECTOR_HANDLE } from "./movable.model.mjs";
+import { addDraggable, destroyDraggable, getDraggableElement, getDraggableStates, initializeDraggable, removeDraggable } from "../internal/draggable/index.mjs";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
-import { getStyles, setStyle, setStyles } from "@oscarpalmer/toretto/style";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { getStyles, setStyle, setStyles } from "@oscarpalmer/toretto/style";
 //#region src/js/movable/movable.embedded.ts
-var OuiMovable = class extends OuiDraggable {
-	#element;
-	#style;
-	constructor(element, options) {
-		const style = getStyles(element, ["inset", "position"]);
-		super("movable", "move", ATTRIBUTE_MOVABLE, element, {
-			container: {
-				attribute: ATTRIBUTE_CONTAINER,
-				map: CONTAINERS,
-				onDestroy: destroyContainer,
-				onInitialize: initializeContainer
-			},
-			direction: {
-				attribute: ATTRIBUTE_DIRECTION,
-				onAfter: afterDirection
-			},
-			drag: {
-				onBegin,
-				onCancel,
-				onEnd,
-				onMove
-			},
-			input: options,
-			position: {
-				getOffset: getOffsetPosition,
-				getOriginal: getOriginalPosition
-			},
-			getDragged() {
-				return element;
-			},
-			getOrigin() {
-				return element;
-			}
-		}, {
-			style,
-			hasHandles: element.querySelector(SELECTOR_HANDLE) != null,
-			moved: false
-		});
-		this.#element = element;
-		this.#style = style;
-	}
-	/**
-	* Destroys the _Movable_
-	*/
-	destroy() {
-		MOVED.delete(this);
-		setStyles(this.#element, this.#style);
-		this.#element = void 0;
-		this.#style = void 0;
-		super.destroy();
-	}
-};
+function OuiMovable(element, options) {
+	const style = getStyles(element, ["inset", "position"]);
+	this[DRAGGABLE_SYMBOL] = initializeDraggable(this, "movable", "move", MOVABLE_ATTRIBUTE, element, {
+		container: {
+			attribute: MOVABLE_ATTRIBUTE_CONTAINER,
+			map: MOVABLE_CONTAINERS,
+			onDestroy: destroyContainer,
+			onInitialize: initializeContainer
+		},
+		direction: {
+			attribute: MOVABLE_ATTRIBUTE_DIRECTION,
+			onAfter: afterDirection
+		},
+		drag: {
+			onBegin,
+			onCancel,
+			onEnd,
+			onMove
+		},
+		input: options,
+		position: {
+			getOffset: getOffsetPosition,
+			getOriginal: getOriginalPosition
+		},
+		getDragged() {
+			return element;
+		},
+		getOrigin() {
+			return element;
+		}
+	}, {
+		style,
+		hasHandles: element.querySelector(MOVABLE_SELECTOR_HANDLE) != null,
+		moved: false
+	});
+}
+OuiMovable.prototype.destroy = destroyMovable;
+Object.defineProperties(OuiMovable.prototype, { element: {
+	enumerable: true,
+	get: getDraggableElement
+} });
 function afterDirection(item) {
 	const container = item.state.container?.getBoundingClientRect();
 	if (container != null) setOffset(item.state, container);
@@ -68,12 +59,18 @@ function afterDirection(item) {
 * @returns _OuiMovable_ instance
 */
 function createMovable(element, options) {
-	if (!isHTMLOrSVGElement(element)) throw new TypeError(MESSAGE);
+	if (!isHTMLOrSVGElement(element)) throw new TypeError(MOVABLE_MESSAGE);
 	return addMovable(element, options);
 }
 function destroyContainer(_, container, empty) {
 	if (empty) resizer.unobserve(container);
 }
+function destroyMovable() {
+	const { element, style } = this[DRAGGABLE_SYMBOL];
+	MOVABLE_MOVED.delete(this);
+	setStyles(element, style);
+	destroyDraggable(this);
+}
 function getOffsetPosition(globals, _, __, position) {
 	return {
 		x: position.x - (globals.element?.rectangle.left ?? 0),
@@ -98,15 +95,15 @@ function onCancel(globals, item) {
 	};
 	if (moved) setStyle(element, "inset", `${y}px auto auto ${x}px`);
 	else setStyles(element, style);
-	element.removeAttribute(ATTRIBUTE_MOVING);
+	element.removeAttribute(MOVABLE_ATTRIBUTE_MOVING);
 }
 function onEnd(event, globals, item, reset) {
 	const movable = item.instance;
 	const state = item.state;
-	state.element.removeAttribute(ATTRIBUTE_MOVING);
+	state.element.removeAttribute(MOVABLE_ATTRIBUTE_MOVING);
 	if (!state.moved) {
 		state.moved = true;
-		if (state.container != null) MOVED.add(movable);
+		if (state.container != null) MOVABLE_MOVED.add(movable);
 	}
 	const container = state.container?.getBoundingClientRect();
 	if (container != null) setOffset(state, container);
@@ -117,7 +114,7 @@ function onEnd(event, globals, item, reset) {
 	reset();
 }
 function onMove(_, globals, __, position) {
-	setAttribute(globals.element?.node, ATTRIBUTE_MOVING, "");
+	setAttribute(globals.element?.node, MOVABLE_ATTRIBUTE_MOVING, "");
 	return {
 		from: { ...globals.original },
 		to: { ...position.calculated }
@@ -127,13 +124,13 @@ function onResize(entries) {
 	const { length } = entries;
 	for (let index = 0; index < length; index += 1) {
 		const entry = entries[index];
-		const set = CONTAINERS.get(entry.target);
+		const set = MOVABLE_CONTAINERS.get(entry.target);
 		if (set == null) continue;
 		for (const movable of set) reposition(movable);
 	}
 }
 function onScroll() {
-	for (const moved of MOVED) reposition(moved);
+	for (const moved of MOVABLE_MOVED) reposition(moved);
 }
 function reposition(movable) {
 	const state = getDraggableStates(movable.element)?.movable;
@@ -149,15 +146,6 @@ function setOffset(state, container) {
 	state.offset.y = element.top - container.top;
 	state.offset.x = element.left - container.left;
 }
-const ATTRIBUTE_MOVABLE = "oui-movable";
-const ATTRIBUTE_CONTAINER = `${ATTRIBUTE_MOVABLE}-container`;
-const ATTRIBUTE_DIRECTION = `${ATTRIBUTE_MOVABLE}-direction`;
-const ATTRIBUTE_MOVABLE_HANDLE = `${ATTRIBUTE_MOVABLE}-handle`;
-const ATTRIBUTE_MOVING = `${ATTRIBUTE_MOVABLE}-moving`;
-const CONTAINERS = /* @__PURE__ */ new Map();
-const MESSAGE = "The element must be an instance of HTMLElement or SVGElement";
-const MOVED = /* @__PURE__ */ new Set();
-const SELECTOR_HANDLE = `[${ATTRIBUTE_MOVABLE_HANDLE}]`;
 const bound = {
 	constructor: OuiMovable,
 	property: "movable"
@@ -166,6 +154,6 @@ const resizer = new ResizeObserver(onResize);
 const addMovable = addDraggable.bind(bound);
 const removeMovable = removeDraggable.bind(bound);
 on(document, "scroll", onScroll);
-attributable(ATTRIBUTE_MOVABLE, addMovable, removeMovable);
+attributable(MOVABLE_ATTRIBUTE, addMovable, removeMovable);
 //#endregion
-export { ATTRIBUTE_MOVABLE, ATTRIBUTE_MOVABLE_HANDLE, OuiMovable, createMovable };
+export { createMovable };

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

@@ -0,0 +1,2 @@
+import { a as MOVABLE_ATTRIBUTE_MOVING, c as MOVABLE_MOVED, d as OuiMovableState, f as OuiMovableStyle, i as MOVABLE_ATTRIBUTE_HANDLE, l as MOVABLE_SELECTOR_HANDLE, n as MOVABLE_ATTRIBUTE_CONTAINER, o as MOVABLE_CONTAINERS, r as MOVABLE_ATTRIBUTE_DIRECTION, s as MOVABLE_MESSAGE, t as MOVABLE_ATTRIBUTE, u as OuiMovable } from "../movable.model-BHaK_mKw.mjs";
+export { MOVABLE_ATTRIBUTE, MOVABLE_ATTRIBUTE_CONTAINER, MOVABLE_ATTRIBUTE_DIRECTION, MOVABLE_ATTRIBUTE_HANDLE, MOVABLE_ATTRIBUTE_MOVING, MOVABLE_CONTAINERS, MOVABLE_MESSAGE, MOVABLE_MOVED, MOVABLE_SELECTOR_HANDLE, OuiMovable, OuiMovableState, OuiMovableStyle };

package/dist/js/movable/movable.model.mjs

@@ -0,0 +1,12 @@
+//#region src/js/movable/movable.model.ts
+const MOVABLE_ATTRIBUTE = "oui-movable";
+const MOVABLE_ATTRIBUTE_CONTAINER = `${MOVABLE_ATTRIBUTE}-container`;
+const MOVABLE_ATTRIBUTE_DIRECTION = `${MOVABLE_ATTRIBUTE}-direction`;
+const MOVABLE_ATTRIBUTE_HANDLE = `${MOVABLE_ATTRIBUTE}-handle`;
+const MOVABLE_ATTRIBUTE_MOVING = `${MOVABLE_ATTRIBUTE}-moving`;
+const MOVABLE_CONTAINERS = /* @__PURE__ */ new Map();
+const MOVABLE_MESSAGE = "The element must be an instance of HTMLElement or SVGElement";
+const MOVABLE_MOVED = /* @__PURE__ */ new Set();
+const MOVABLE_SELECTOR_HANDLE = `[${MOVABLE_ATTRIBUTE_HANDLE}]`;
+//#endregion
+export { MOVABLE_ATTRIBUTE, MOVABLE_ATTRIBUTE_CONTAINER, MOVABLE_ATTRIBUTE_DIRECTION, MOVABLE_ATTRIBUTE_HANDLE, MOVABLE_ATTRIBUTE_MOVING, MOVABLE_CONTAINERS, MOVABLE_MESSAGE, MOVABLE_MOVED, MOVABLE_SELECTOR_HANDLE };

package/dist/js/movable/movable.standalone.d.mts

@@ -1,2 +1,3 @@
-import { g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "../draggable-a6w0J1OD.mjs";
+import { p as CreateOuiDraggableOptions, u as OuiMovable } from "../movable.model-BHaK_mKw.mjs";
+import { t as createMovable } from "../movable.embedded-DoyXLegc.mjs";
 export { type CreateOuiDraggableOptions as CreateOuiMovableOptions, type OuiMovable, createMovable };

package/dist/js/movable.embedded-DoyXLegc.d.mts

@@ -0,0 +1,11 @@
+import { p as CreateOuiDraggableOptions, u as OuiMovable } from "./movable.model-BHaK_mKw.mjs";
+//#region src/js/movable/movable.embedded.d.ts
+/**
+ * Creates _(or retrieves)_ a _OuiMovable_ instance for an element
+ *
+ * @param element Element to make movable
+ * @returns _OuiMovable_ instance
+ */
+declare function createMovable(element: HTMLElement, options?: CreateOuiDraggableOptions): OuiMovable;
+//#endregion
+export { createMovable as t };

package/dist/js/movable.model-BHaK_mKw.d.mts

@@ -0,0 +1,186 @@
+import { StyleToggler } from "@oscarpalmer/toretto/style";
+import { PlainObject } from "@oscarpalmer/atoms/models";
+import { EventPosition } from "@oscarpalmer/toretto/models";
+//#region src/js/sortable/sortable.model.d.ts
+type OuiSortable = {
+  destroy(): void;
+} & OuiDraggable<OuiSortableState>;
+type OuiSortablePlaceholder = {
+  drag: OuiSortablePlaceholderDrag;
+  position: HTMLElement | undefined;
+};
+type OuiSortablePlaceholderDrag = {
+  custom: HTMLElement | undefined;
+  default: HTMLElement | undefined;
+};
+type OuiSortableState = {
+  connections: string | null | undefined;
+  origin?: HTMLElement;
+};
+declare const SORTABLE_ATTRIBUTE = "oui-sortable";
+declare const SORTABLE_ATTRIBUTE_ACTIVE: string;
+declare const SORTABLE_ATTRIBUTE_CONNECTIONS: string;
+declare const SORTABLE_ATTRIBUTE_CONTAINER: string;
+declare const SORTABLE_ATTRIBUTE_DIRECTION: string;
+declare const SORTABLE_ATTRIBUTE_HORIZONTAL: string;
+declare const SORTABLE_ATTRIBUTE_ORIGIN: string;
+declare const SORTABLE_ATTRIBUTE_PLACEHOLDER_DRAG: string;
+declare const SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION: string;
+declare const SORTABLE_ATTRIBUTE_VERTICAL: string;
+declare const SORTABLE_CONTAINERS: Map<HTMLElement, Set<OuiSortable>>;
+declare const SORTABLE_MESSAGE = "The element must be an instance of HTMLElement or SVGElement";
+declare const SORTABLE_SELECTOR: string;
+declare const SORTABLE_SELECTOR_ITEM: string;
+declare const sortablePlaceholder: OuiSortablePlaceholder;
+//#endregion
+//#region src/js/internal/draggable/draggable.model.d.ts
+type CreateOuiDraggableOptions = {
+  /**
+   * Container to hold the draggable element and restrict its movement within. Can be `body`, `document`, `window`, a _CSS_ selector, or an element. _(If not provided, the draggable element will not have any constraints)_
+   */
+  container?: string | HTMLElement;
+  /**
+   * Direction in which the element can be dragged. _(If not provided, the element can be dragged in any direction)_
+   */
+  direction?: OuiDraggableDirection;
+};
+type OuiDraggableDirection = "horizontal" | "vertical" | "x" | "y";
+interface OuiDraggable<ExtraState extends PlainObject = PlainObject> {
+  [DRAGGABLE_SYMBOL]: OuiDraggableState & ExtraState;
+  get element(): HTMLElement;
+  destroy(): void;
+}
+type OuiDragBegin<State extends PlainObject = PlainObject> = (event: MouseEvent | TouchEvent, globals: OuiDraggableGlobals, item: OuiDraggableItem<State>, element: HTMLElement, handle: HTMLElement, position: EventPosition) => void;
+type OuiDragCancel<State extends PlainObject = PlainObject> = (globals: OuiDraggableGlobals, item: OuiDraggableItem<State>) => void;
+type OuiDragEnd<State extends PlainObject = PlainObject> = (event: MouseEvent | TouchEvent, globals: OuiDraggableGlobals, item: OuiDraggableItem<State>, reset: () => void) => void;
+type OuiDragMove<State extends PlainObject = PlainObject> = (event: MouseEvent | TouchEvent, globals: OuiDraggableGlobals, item: OuiDraggableItem<State>, position: OuiDragMovePosition) => PlainObject | undefined;
+type OuiDragMovePosition = {
+  calculated: EventPosition;
+  original: EventPosition;
+};
+type OuiDraggableBound<Property extends keyof OuiDraggableInstances = keyof OuiDraggableInstances, Instance extends OuiDraggableInstances[Property] = OuiDraggableInstances[Property]> = {
+  constructor: new (element: HTMLElement, options?: CreateOuiDraggableOptions) => Instance;
+  property: Property;
+};
+type OuiDraggableGlobals = {
+  container?: DOMRect;
+  element?: OuiDraggableGlobalsElement;
+  instances: WeakMap<HTMLElement, OuiDraggableInstances>;
+  offset?: EventPosition;
+  original?: EventPosition;
+  states: WeakMap<HTMLElement, OuiDraggableStates>;
+};
+type OuiDraggableGlobalsElement = {
+  node: HTMLElement;
+  rectangle: DOMRect;
+};
+type OuiDraggableInstances = {
+  movable?: OuiMovable;
+  sortable?: OuiSortable;
+};
+type OuiDraggableItem<ExtraState extends PlainObject = PlainObject> = {
+  instance: OuiDraggable<ExtraState>;
+  state: OuiDraggableState & ExtraState;
+};
+type OuiDraggableOptions<ExtraState extends PlainObject = PlainObject> = {
+  container: OuiDraggableOptionsContainer<ExtraState>;
+  direction: OuiDraggableOptionsDirection<ExtraState>;
+  drag: OuiDraggableOptionsDrag<ExtraState>;
+  input?: CreateOuiDraggableOptions;
+  position: OuiDraggableOptionsPosition<ExtraState>;
+  getDragged(): HTMLElement;
+  getOrigin(): HTMLElement | undefined;
+};
+type OuiDraggableOptionsContainer<ExtraState extends PlainObject = PlainObject> = {
+  attribute: string;
+  map: Map<HTMLElement, Set<OuiDraggable>>;
+  onDestroy?: OuiDraggableOptionsContainerOnDestroy<ExtraState>;
+  onInitialize?: OuiDraggableOptionsContainerOnInitialize;
+};
+type OuiDraggableOptionsContainerOnDestroy<ExtraState extends PlainObject = PlainObject> = (item: OuiDraggableItem<ExtraState>, container: HTMLElement, empty: boolean) => void;
+type OuiDraggableOptionsContainerOnInitialize<ExtraState extends PlainObject = PlainObject> = (item: OuiDraggableItem<ExtraState>) => void;
+type OuiDraggableOptionsDirection<ExtraState extends PlainObject = PlainObject> = {
+  attribute: string;
+  onAfter?: OuiDraggableOptionsDirectionOnAfter<ExtraState>;
+};
+type OuiDraggableOptionsDirectionOnAfter<ExtraState extends PlainObject = PlainObject> = (item: OuiDraggableItem<ExtraState>) => void;
+type OuiDraggableOptionsDrag<ExtraState extends PlainObject = PlainObject> = {
+  onBegin: OuiDragBegin<ExtraState>;
+  onCancel: OuiDragCancel<ExtraState>;
+  onEnd: OuiDragEnd<ExtraState>;
+  onMove: OuiDragMove<ExtraState>;
+};
+type OuiDraggableOptionsPosition<ExtraState extends PlainObject = PlainObject> = {
+  getOffset: OuiDraggableOptionsPositionGetOffset<ExtraState>;
+  getOriginal: OuiDraggableOptionsPositionGetOriginal<ExtraState>;
+};
+type OuiDraggableOptionsPositionGetOffset<ExtraState extends PlainObject = PlainObject> = (globals: OuiDraggableGlobals, item: OuiDraggableItem<ExtraState>, element: HTMLElement, position: EventPosition) => EventPosition;
+type OuiDraggableOptionsPositionGetOriginal<ExtraState extends PlainObject = PlainObject> = (globals: OuiDraggableGlobals, item: OuiDraggableItem<ExtraState>, position: EventPosition) => EventPosition;
+type OuiDraggableState = {
+  attribute: string;
+  container?: HTMLElement;
+  destroyed: boolean;
+  element: HTMLElement;
+  hasHandles?: boolean;
+  horizontal: boolean;
+  name: keyof OuiDraggableStates;
+  options: OuiDraggableOptions;
+  styling: StyleToggler;
+  vertical: boolean;
+};
+type OuiDraggableStates = {
+  movable?: OuiDraggableState;
+  sortable?: OuiDraggableState;
+};
+declare const DRAGGABLE_ATTRIBUTE_MOVABLE = "oui-movable";
+declare const DRAGGABLE_ATTRIBUTE_SORTABLE = "oui-sortable";
+declare const DRAGGABLE_KEY_ESCAPE = "Escape";
+declare const DRAGGABLE_SELECTOR: string;
+declare const DRAGGABLE_SELECTOR_MOVABLE_HANDLE: string;
+declare const DRAGGABLE_SELECTOR_SORTABLE_HANDLE: string;
+declare const DRAGGABLE_SELECTOR_SORTABLE_ITEM: string;
+declare const DRAGGABLE_SYMBOL: unique symbol;
+declare const draggableContainers: Set<string>;
+declare const draggableHorizontals: Set<OuiDraggableDirection>;
+declare const draggableProperties: Record<keyof OuiDraggableInstances, keyof OuiDraggableInstances>;
+declare const draggableGlobals: OuiDraggableGlobals;
+declare const draggableStyles: {
+  touchAction: string;
+  userSelect: string;
+  webkitUserSelect: string;
+};
+declare const draggableStyleToggler: StyleToggler;
+declare const draggableVerticals: Set<OuiDraggableDirection>;
+//#endregion
+//#region src/js/movable/movable.model.d.ts
+type OuiMovable = {
+  /**
+   * The movable element
+   */
+  get element(): HTMLElement;
+  /**
+   * Destroy the movable
+   */
+  destroy(): void;
+} & OuiDraggable<OuiMovableState>;
+type OuiMovableState = {
+  hasHandles?: boolean;
+  moved: boolean;
+  offset?: Partial<EventPosition>;
+  style: OuiMovableStyle;
+};
+type OuiMovableStyle = {
+  inset?: string;
+  position?: string;
+};
+declare const MOVABLE_ATTRIBUTE = "oui-movable";
+declare const MOVABLE_ATTRIBUTE_CONTAINER: string;
+declare const MOVABLE_ATTRIBUTE_DIRECTION: string;
+declare const MOVABLE_ATTRIBUTE_HANDLE: string;
+declare const MOVABLE_ATTRIBUTE_MOVING: string;
+declare const MOVABLE_CONTAINERS: Map<HTMLElement, Set<OuiMovable>>;
+declare const MOVABLE_MESSAGE = "The element must be an instance of HTMLElement or SVGElement";
+declare const MOVABLE_MOVED: Set<OuiMovable>;
+declare const MOVABLE_SELECTOR_HANDLE: string;
+//#endregion
+export { OuiSortable as $, OuiDraggableGlobals as A, OuiDraggableOptionsDrag as B, OuiDragCancel as C, OuiDraggable as D, OuiDragMovePosition as E, OuiDraggableOptionsContainer as F, OuiDraggableStates as G, OuiDraggableOptionsPositionGetOffset as H, OuiDraggableOptionsContainerOnDestroy as I, draggableHorizontals as J, draggableContainers as K, OuiDraggableOptionsContainerOnInitialize as L, OuiDraggableInstances as M, OuiDraggableItem as N, OuiDraggableBound as O, OuiDraggableOptions as P, draggableVerticals as Q, OuiDraggableOptionsDirection as R, OuiDragBegin as S, OuiDragMove as T, OuiDraggableOptionsPositionGetOriginal as U, OuiDraggableOptionsPosition as V, OuiDraggableState as W, draggableStyleToggler as X, draggableProperties as Y, draggableStyles as Z, DRAGGABLE_SELECTOR as _, sortablePlaceholder as _t, MOVABLE_ATTRIBUTE_MOVING as a, SORTABLE_ATTRIBUTE_CONNECTIONS as at, DRAGGABLE_SELECTOR_SORTABLE_ITEM as b, MOVABLE_MOVED as c, SORTABLE_ATTRIBUTE_HORIZONTAL as ct, OuiMovableState as d, SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION as dt, OuiSortablePlaceholder as et, OuiMovableStyle as f, SORTABLE_ATTRIBUTE_VERTICAL as ft, DRAGGABLE_KEY_ESCAPE as g, SORTABLE_SELECTOR_ITEM as gt, DRAGGABLE_ATTRIBUTE_SORTABLE as h, SORTABLE_SELECTOR as ht, MOVABLE_ATTRIBUTE_HANDLE as i, SORTABLE_ATTRIBUTE_ACTIVE as it, OuiDraggableGlobalsElement as j, OuiDraggableDirection as k, MOVABLE_SELECTOR_HANDLE as l, SORTABLE_ATTRIBUTE_ORIGIN as lt, DRAGGABLE_ATTRIBUTE_MOVABLE as m, SORTABLE_MESSAGE as mt, MOVABLE_ATTRIBUTE_CONTAINER as n, OuiSortableState as nt, MOVABLE_CONTAINERS as o, SORTABLE_ATTRIBUTE_CONTAINER as ot, CreateOuiDraggableOptions as p, SORTABLE_CONTAINERS as pt, draggableGlobals as q, MOVABLE_ATTRIBUTE_DIRECTION as r, SORTABLE_ATTRIBUTE as rt, MOVABLE_MESSAGE as s, SORTABLE_ATTRIBUTE_DIRECTION as st, MOVABLE_ATTRIBUTE as t, OuiSortablePlaceholderDrag as tt, OuiMovable as u, SORTABLE_ATTRIBUTE_PLACEHOLDER_DRAG as ut, DRAGGABLE_SELECTOR_MOVABLE_HANDLE as v, OuiDragEnd as w, DRAGGABLE_SYMBOL as x, DRAGGABLE_SELECTOR_SORTABLE_HANDLE as y, OuiDraggableOptionsDirectionOnAfter as z };

package/dist/js/navigable.model-BPOM8DZk.d.mts

@@ -0,0 +1,44 @@
+import { AriaRole, RemovableEventListener } from "@oscarpalmer/toretto/models";
+//#region src/js/internal/navigable/navigable.model.d.ts
+type OuiNavigable = {
+  [NAVIGABLE_SYMBOL]: OuiNavigableState;
+  destroy(): void;
+  navigate(index: number, focus?: boolean): void;
+};
+type OuiNavigableActive = {
+  element?: HTMLElement;
+  index: number;
+};
+type OuiNavigableCallback<ReturnType> = (event: KeyboardEvent, navigable: OuiNavigable) => ReturnType;
+type OuiNavigableOptions = {
+  orientation?: OuiNavigableOrientation;
+  role?: AriaRole;
+  selector: string;
+  vertical: boolean;
+  onActivate?: (navigable: OuiNavigable) => void;
+  onDeactivate?: OuiNavigableCallback<void>;
+  onNavigation?: (navigable: OuiNavigable) => void;
+  onPreventNavigation?: OuiNavigableCallback<boolean>;
+  onShouldActivate?: OuiNavigableCallback<boolean>;
+  onShouldDeactivate?: OuiNavigableCallback<boolean | undefined>;
+};
+type OuiNavigableOrientation = "horizontal" | "vertical";
+type OuiNavigableState = {
+  active: OuiNavigableActive;
+  element: HTMLElement;
+  listeners: RemovableEventListener[];
+  options: OuiNavigableOptions;
+  orientation: OuiNavigableOrientation;
+};
+declare const NAVIGABLE_KEYS_ABSOLUTE: Set<string>;
+declare const NAVIGABLE_KEYS_ACTIVATE: Set<string>;
+declare const NAVIGABLE_KEYS_HORIZONTAL: Set<string>;
+declare const NAVIGABLE_KEYS_VERTICAL: Set<string>;
+declare const NAVIGABLE_KEYS_ALL: Set<string>;
+declare const NAVIGABLE_KEYS_NEXT: Set<string>;
+declare const NAVIGABLE_ORIENTATION_HORIZONTAL: OuiNavigableOrientation;
+declare const NAVIGABLE_ORIENTATION_VERTICAL: OuiNavigableOrientation;
+declare const NAVIGABLE_ORIENTATIONS: Set<OuiNavigableOrientation>;
+declare const NAVIGABLE_SYMBOL: unique symbol;
+//#endregion
+export { NAVIGABLE_KEYS_NEXT as a, NAVIGABLE_ORIENTATION_HORIZONTAL as c, OuiNavigable as d, OuiNavigableActive as f, OuiNavigableState as g, OuiNavigableOrientation as h, NAVIGABLE_KEYS_HORIZONTAL as i, NAVIGABLE_ORIENTATION_VERTICAL as l, OuiNavigableOptions as m, NAVIGABLE_KEYS_ACTIVATE as n, NAVIGABLE_KEYS_VERTICAL as o, OuiNavigableCallback as p, NAVIGABLE_KEYS_ALL as r, NAVIGABLE_ORIENTATIONS as s, NAVIGABLE_KEYS_ABSOLUTE as t, NAVIGABLE_SYMBOL as u };

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

@@ -0,0 +1,12 @@
+import { n as OuiPopoverState, t as OuiPopover } from "../popover.model-ubKNG612.mjs";
+//#region src/js/popover/index.d.ts
+declare function OuiPopover(this: OuiPopover, state: OuiPopoverState): void;
+/**
+ * Get the _OuiPopover_ for an element
+ *
+ * @param element Element to get _OuiPopover_ for
+ * @returns _OuiPopover_ instance
+ */
+export declare function getPopover(element: HTMLElement): OuiPopover | undefined;
+//#endregion
+export type { OuiPopover };