@oscarpalmer/oui 0.38.0 → 0.40.0

package/dist/js/focus-trap/focus-trap.model.mjs

@@ -0,0 +1,15 @@
+//#region src/js/focus-trap/focus-trap.model.ts
+const FOCUSTRAP_ATTRIBUTE = "oui-focus-trap";
+const FOCUSTRAP_ATTRIBUTE_CONTAIN = `${FOCUSTRAP_ATTRIBUTE}-contain`;
+const FOCUSTRAP_ATTRIBUTE_NOESCAPE = `${FOCUSTRAP_ATTRIBUTE}-noescape`;
+const FOCUSTRAP_EVENT_OPTIONS = {
+	capture: true,
+	passive: false
+};
+const FOCUSTRAP_MESSAGE = "Element must be an HTMLElement or SVGElement";
+const FOCUSTRAP_SELECTOR = `[${FOCUSTRAP_ATTRIBUTE}]`;
+const FOCUSTRAP_SYMBOL = Symbol(FOCUSTRAP_ATTRIBUTE);
+const disabledFocusTraps = /* @__PURE__ */ new Set();
+const focusTraps = /* @__PURE__ */ new WeakMap();
+//#endregion
+export { FOCUSTRAP_ATTRIBUTE, FOCUSTRAP_ATTRIBUTE_CONTAIN, FOCUSTRAP_ATTRIBUTE_NOESCAPE, FOCUSTRAP_EVENT_OPTIONS, FOCUSTRAP_MESSAGE, FOCUSTRAP_SELECTOR, FOCUSTRAP_SYMBOL, disabledFocusTraps, focusTraps };

package/dist/js/focus-trap/focus-trap.standalone.d.mts

@@ -1,2 +1,3 @@
-import { a as OuiFocusTrapOptions, i as OuiFocusTrap, o as createFocusTrap } from "../focus-trap.embedded-DR8NpZfr.mjs";
+import { c as OuiFocusTrap, l as OuiFocusTrapOptions } from "../focus-trap.model-BeX6UYlw.mjs";
+import { t as createFocusTrap } from "../focus-trap.embedded-DIU05m1z.mjs";
 export { type OuiFocusTrap, type OuiFocusTrapOptions, createFocusTrap };

package/dist/js/focus-trap.embedded-DIU05m1z.d.mts

@@ -0,0 +1,13 @@
+import { c as OuiFocusTrap, l as OuiFocusTrapOptions } from "./focus-trap.model-BeX6UYlw.mjs";
+//#region src/js/focus-trap/focus-trap.embedded.d.ts
+/**
+ * Creates _(or retrieves)_ a _focus trap_ for an element
+ *
+ * @param element Element to trap focus within
+ * @param options _Focus trap_ options
+ * @returns _Focus trap_ instance
+ */
+declare function createFocusTrap(element: HTMLElement, options?: OuiFocusTrapOptions): OuiFocusTrap;
+declare function removeFocusTrap(element: HTMLElement): void;
+//#endregion
+export { removeFocusTrap as n, createFocusTrap as t };

package/dist/js/{focus-trap.embedded-DR8NpZfr.d.mts → focus-trap.model-BeX6UYlw.d.mts}

@@ -1,6 +1,6 @@
-//#region src/js/focus-trap/focus-trap.embedded.d.ts
-declare class OuiFocusTrap {
-  #private;
+//#region src/js/focus-trap/focus-trap.model.d.ts
+type OuiFocusTrap = {
+  [FOCUSTRAP_SYMBOL]: OuiFocusTrapState;
   /**
    * Is focused maintained within the _focus trap_ when clicking outside of it?
    */
@@ -25,7 +25,6 @@ declare class OuiFocusTrap {
    * Should the _focus trap_ allow focus to escape when pressing _Escape_?
    */
   set noescape(value: boolean);
-  constructor(state: OuiFocusTrapState);
   /**
    * Destroys the _focus trap_
    */
@@ -44,7 +43,7 @@ declare class OuiFocusTrap {
    * @param last When `true`, focuses the last focusable element within the _focus trap_ instead of the first
    */
   focus(last: boolean): void;
-}
+};
 type OuiFocusTrapOptions = {
   /**
    * Should focus be maintained within the _focus trap_ when clicking outside of it?
@@ -56,21 +55,20 @@ type OuiFocusTrapOptions = {
   noescape?: boolean;
 };
 type OuiFocusTrapState = {
+  destroyed: boolean;
   disabled: boolean;
   element: HTMLElement;
   options: Required<OuiFocusTrapOptions>;
+  tabIndex: number;
 };
-/**
- * Creates _(or retrieves)_ a _focus trap_ for an element
- *
- * @param element Element to trap focus within
- * @param options _Focus trap_ options
- * @returns _Focus trap_ instance
- */
-declare function createFocusTrap(element: HTMLElement, options?: OuiFocusTrapOptions): OuiFocusTrap;
-declare function removeFocusTrap(element: HTMLElement): void;
-declare const ATTRIBUTE_FOCUSTRAP = "oui-focus-trap";
-declare const ATTRIBUTE_FOCUSTRAP_CONTAIN = "oui-focus-trap-contain";
-declare const ATTRIBUTE_FOCUSTRAP_NOESCAPE = "oui-focus-trap-noescape";
+declare const FOCUSTRAP_ATTRIBUTE = "oui-focus-trap";
+declare const FOCUSTRAP_ATTRIBUTE_CONTAIN: string;
+declare const FOCUSTRAP_ATTRIBUTE_NOESCAPE: string;
+declare const FOCUSTRAP_EVENT_OPTIONS: AddEventListenerOptions;
+declare const FOCUSTRAP_MESSAGE = "Element must be an HTMLElement or SVGElement";
+declare const FOCUSTRAP_SELECTOR: string;
+declare const FOCUSTRAP_SYMBOL: unique symbol;
+declare const disabledFocusTraps: Set<OuiFocusTrap>;
+declare const focusTraps: WeakMap<HTMLElement, OuiFocusTrap>;
 //#endregion
-export { OuiFocusTrapOptions as a, OuiFocusTrap as i, ATTRIBUTE_FOCUSTRAP_CONTAIN as n, createFocusTrap as o, ATTRIBUTE_FOCUSTRAP_NOESCAPE as r, removeFocusTrap as s, ATTRIBUTE_FOCUSTRAP as t };
+export { FOCUSTRAP_MESSAGE as a, OuiFocusTrap as c, disabledFocusTraps as d, focusTraps as f, FOCUSTRAP_EVENT_OPTIONS as i, OuiFocusTrapOptions as l, FOCUSTRAP_ATTRIBUTE_CONTAIN as n, FOCUSTRAP_SELECTOR as o, FOCUSTRAP_ATTRIBUTE_NOESCAPE as r, FOCUSTRAP_SYMBOL as s, FOCUSTRAP_ATTRIBUTE as t, OuiFocusTrapState as u };

package/dist/js/index.d.mts

@@ -1,18 +1,30 @@
-import { OuiColorPickerElement, OuiColorPickerEvent, setColorPickerLocalizations } from "./color-picker.mjs";
-import { a as OuiFloatablePosition, n as CreateOuiFloatableOptions, r as OuiFloatable, s as createFloatable } from "./floatable.embedded-Bct4U5Dm.mjs";
-import { a as setComboboxLocalizations, t as OuiComboboxElement } from "./index-DJdFlTLm.mjs";
-import { d as OuiSortable, f as createSortable, g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "./draggable-a6w0J1OD.mjs";
+import { c as OuiFloatable, t as CreateOuiFloatableOptions, u as OuiFloatablePosition } from "./floatable.model-DXsQgoU7.mjs";
+import { M as OuiColorPickerEvent } from "./color-picker.constants-D1mxw_Le.mjs";
+import { a as setColorPickerLocalizations } from "./color-picker.misc-CtsXGrOe.mjs";
+import { OuiColorPickerElement } from "./color-picker/index.mjs";
+import { i as setComboboxLocalizations } from "./combobox.misc-C1tPZZDi.mjs";
+import { OuiComboboxElement } from "./combobox/index.mjs";
+import { $ as OuiSortable, p as CreateOuiDraggableOptions, u as OuiMovable } from "./movable.model-BHaK_mKw.mjs";
+import { n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.model-BwzJcTVJ.mjs";
+import { c as OuiDialog } from "./dialog.model-DX2mndMh.mjs";
+import { getDialog } from "./dialog/index.mjs";
+import { n as createFloatable } from "./floatable.embedded-MeTyXjFn.mjs";
+import "./floatable/floatable.standalone.mjs";
+import { c as OuiFocusTrap, l as OuiFocusTrapOptions } from "./focus-trap.model-BeX6UYlw.mjs";
+import { t as createFocusTrap } from "./focus-trap.embedded-DIU05m1z.mjs";
+import { t as createMovable } from "./movable.embedded-DoyXLegc.mjs";
 import "./movable/movable.standalone.mjs";
-import { a as createResizable, n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.embedded-3qoR0Bjm.mjs";
+import { t as createResizable } from "./resizable.embedded-Bf1qBUdt.mjs";
 import "./resizable/resizable.standalone.mjs";
-import { OuiDialog, getDialog } from "./dialog.mjs";
-import "./floatable/floatable.standalone.mjs";
-import { a as OuiFocusTrapOptions, i as OuiFocusTrap, o as createFocusTrap } from "./focus-trap.embedded-DR8NpZfr.mjs";
-import { n as setListboxLocalizations } from "./misc.listbox-gnoJhrTr.mjs";
-import { OuiListboxElement } from "./listbox/index.mjs";
-import { OuiPopover, getPopover } from "./popover.mjs";
+import { t as createSortable } from "./sortable.embedded-DzBKAwSG.mjs";
 import "./sortable/sortable.standalone.mjs";
-import { OuiSplitterElement } from "./splitter.mjs";
-import { OuiTabsElement, OuiTabsEvent } from "./tabs.mjs";
-import { OuiTooltip, getTooltip, setTooltipDelay } from "./tooltip.mjs";
+import { n as setListboxLocalizations } from "./misc.listbox-CtoGvXQo.mjs";
+import { OuiListboxElement } from "./listbox/index.mjs";
+import { t as OuiPopover } from "./popover.model-ubKNG612.mjs";
+import { getPopover } from "./popover/index.mjs";
+import { OuiSplitterElement } from "./splitter/index.mjs";
+import { r as OuiTabsEvent } from "./tabs.model-DRBX_JtI.mjs";
+import { OuiTabsElement } from "./tabs/index.mjs";
+import { t as OuiTooltip } from "./tooltip.model-DRkY_BsL.mjs";
+import { getTooltip, setTooltipDelay } from "./tooltip/index.mjs";
 export { type CreateOuiFloatableOptions, type CreateOuiDraggableOptions as CreateOuiMovableOptions, type CreateOuiDraggableOptions as CreateOuiSortableOptions, type CreateOuiResizableOptions, OuiColorPickerElement, OuiColorPickerEvent, OuiComboboxElement, type OuiDialog, type OuiFloatable, type OuiFloatablePosition, type OuiFocusTrap, type OuiFocusTrapOptions, OuiListboxElement, type OuiMovable, type OuiPopover, type OuiResizable, type OuiSortable, OuiSplitterElement, OuiTabsElement, OuiTabsEvent, type OuiTooltip, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setColorPickerLocalizations, setComboboxLocalizations, setListboxLocalizations, setTooltipDelay };

package/dist/js/index.mjs

@@ -1,23 +1,26 @@
 import { createFloatable } from "./floatable/floatable.embedded.mjs";
-import { OuiColorPickerElement, OuiColorPickerEvent, setColorPickerLocalizations } from "./color-picker.mjs";
-import { createMovable } from "./movable/movable.embedded.mjs";
-import "./movable/movable.standalone.mjs";
-import { createResizable } from "./resizable/resizable.embedded.mjs";
-import { getDialog } from "./dialog.mjs";
-import "./menu.mjs";
-import "./toolbar.mjs";
-import { D as setComboboxLocalizations } from "./state.combobox-Qm3FWzYW.mjs";
-import { OuiComboboxElement } from "./combobox/index.mjs";
+import "./menu/index.mjs";
+import "./toolbar/index.mjs";
 import "./floatable/floatable.standalone.mjs";
 import { createFocusTrap } from "./focus-trap/focus-trap.embedded.mjs";
 import "./focus-trap/focus-trap.standalone.mjs";
-import { n as setListboxLocalizations } from "./misc.listbox-Cyz2CRDy.mjs";
-import { OuiListboxElement } from "./listbox/index.mjs";
-import { getPopover } from "./popover.mjs";
+import { createMovable } from "./movable/movable.embedded.mjs";
+import "./movable/movable.standalone.mjs";
+import { createResizable } from "./resizable/resizable.embedded.mjs";
 import "./resizable/resizable.standalone.mjs";
 import { createSortable } from "./sortable/sortable.embedded.mjs";
 import "./sortable/sortable.standalone.mjs";
-import { OuiSplitterElement } from "./splitter.mjs";
-import { OuiTabsElement, OuiTabsEvent } from "./tabs.mjs";
-import { getTooltip, setTooltipDelay } from "./tooltip.mjs";
+import { OuiColorPickerEvent } from "./color-picker/color-picker.model.mjs";
+import { d as setColorPickerLocalizations } from "./color-picker.event-Cksj5TvS.mjs";
+import { OuiColorPickerElement } from "./color-picker/index.mjs";
+import { D as setComboboxLocalizations } from "./combobox.state-BfJ3Hxg8.mjs";
+import { OuiComboboxElement } from "./combobox/index.mjs";
+import { getDialog } from "./dialog/index.mjs";
+import { n as setListboxLocalizations } from "./misc.listbox-CjfBUbHD.mjs";
+import { OuiListboxElement } from "./listbox/index.mjs";
+import { getPopover } from "./popover/index.mjs";
+import { OuiSplitterElement } from "./splitter/index.mjs";
+import { OuiTabsEvent } from "./tabs/tabs.model.mjs";
+import { OuiTabsElement } from "./tabs/index.mjs";
+import { getTooltip, setTooltipDelay } from "./tooltip/index.mjs";
 export { OuiColorPickerElement, OuiColorPickerEvent, OuiComboboxElement, OuiListboxElement, OuiSplitterElement, OuiTabsElement, OuiTabsEvent, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setColorPickerLocalizations, setComboboxLocalizations, setListboxLocalizations, setTooltipDelay };

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

@@ -1,4 +1,3 @@
 //#region src/js/internal/attributable.d.ts
-declare function attributable(attribute: string, add: (element: HTMLElement) => void, remove: (element: HTMLElement) => void): void;
-//#endregion
-export { attributable };
+export declare function attributable(attribute: string, add: (element: HTMLElement) => void, remove: (element: HTMLElement) => void): void;
+//#endregion

package/dist/js/internal/attributable.mjs

@@ -1,3 +1,4 @@
+import { filter } from "@oscarpalmer/atoms/array/filter";
 //#region src/js/internal/attributable.ts
 function attributable(attribute, add, remove) {
 	new MutationObserver((entries) => {
@@ -23,7 +24,7 @@ function attributable(attribute, add, remove) {
 	});
 }
 function handleAdded(attribute, nodes, add) {
-	const elements = [...nodes].filter((node) => node instanceof Element);
+	const elements = filter([...nodes], (node) => node instanceof Element);
 	const { length } = elements;
 	for (let index = 0; index < length; index += 1) {
 		const element = elements[index];
@@ -32,7 +33,7 @@ function handleAdded(attribute, nodes, add) {
 	}
 }
 function handleRemoved(nodes, remove) {
-	const elements = [...nodes].filter((node) => node instanceof Element);
+	const elements = filter([...nodes], (node) => node instanceof Element);
 	const { length } = elements;
 	for (let index = 0; index < length; index += 1) {
 		const element = elements[index];

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

@@ -0,0 +1,2 @@
+import { A as OuiDraggableGlobals, B as OuiDraggableOptionsDrag, C as OuiDragCancel, D as OuiDraggable, E as OuiDragMovePosition, F as OuiDraggableOptionsContainer, G as OuiDraggableStates, H as OuiDraggableOptionsPositionGetOffset, I as OuiDraggableOptionsContainerOnDestroy, J as draggableHorizontals, K as draggableContainers, L as OuiDraggableOptionsContainerOnInitialize, M as OuiDraggableInstances, N as OuiDraggableItem, O as OuiDraggableBound, P as OuiDraggableOptions, Q as draggableVerticals, R as OuiDraggableOptionsDirection, S as OuiDragBegin, T as OuiDragMove, U as OuiDraggableOptionsPositionGetOriginal, V as OuiDraggableOptionsPosition, W as OuiDraggableState, X as draggableStyleToggler, Y as draggableProperties, Z as draggableStyles, _ as DRAGGABLE_SELECTOR, b as DRAGGABLE_SELECTOR_SORTABLE_ITEM, g as DRAGGABLE_KEY_ESCAPE, h as DRAGGABLE_ATTRIBUTE_SORTABLE, j as OuiDraggableGlobalsElement, k as OuiDraggableDirection, m as DRAGGABLE_ATTRIBUTE_MOVABLE, p as CreateOuiDraggableOptions, q as draggableGlobals, v as DRAGGABLE_SELECTOR_MOVABLE_HANDLE, w as OuiDragEnd, x as DRAGGABLE_SYMBOL, y as DRAGGABLE_SELECTOR_SORTABLE_HANDLE, z as OuiDraggableOptionsDirectionOnAfter } from "../../movable.model-BHaK_mKw.mjs";
+export { CreateOuiDraggableOptions, DRAGGABLE_ATTRIBUTE_MOVABLE, DRAGGABLE_ATTRIBUTE_SORTABLE, DRAGGABLE_KEY_ESCAPE, DRAGGABLE_SELECTOR, DRAGGABLE_SELECTOR_MOVABLE_HANDLE, DRAGGABLE_SELECTOR_SORTABLE_HANDLE, DRAGGABLE_SELECTOR_SORTABLE_ITEM, DRAGGABLE_SYMBOL, OuiDragBegin, OuiDragCancel, OuiDragEnd, OuiDragMove, OuiDragMovePosition, OuiDraggable, OuiDraggableBound, OuiDraggableDirection, OuiDraggableGlobals, OuiDraggableGlobalsElement, OuiDraggableInstances, OuiDraggableItem, OuiDraggableOptions, OuiDraggableOptionsContainer, OuiDraggableOptionsContainerOnDestroy, OuiDraggableOptionsContainerOnInitialize, OuiDraggableOptionsDirection, OuiDraggableOptionsDirectionOnAfter, OuiDraggableOptionsDrag, OuiDraggableOptionsPosition, OuiDraggableOptionsPositionGetOffset, OuiDraggableOptionsPositionGetOriginal, OuiDraggableState, OuiDraggableStates, draggableContainers, draggableGlobals, draggableHorizontals, draggableProperties, draggableStyleToggler, draggableStyles, draggableVerticals };

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

@@ -0,0 +1,37 @@
+import { toggleStyles } from "@oscarpalmer/toretto/style";
+//#region src/js/internal/draggable/draggable.model.ts
+const DRAGGABLE_ATTRIBUTE_MOVABLE = "oui-movable";
+const DRAGGABLE_ATTRIBUTE_SORTABLE = "oui-sortable";
+const DRAGGABLE_KEY_ESCAPE = "Escape";
+const DRAGGABLE_SELECTOR = `[${DRAGGABLE_ATTRIBUTE_MOVABLE}], [${DRAGGABLE_ATTRIBUTE_SORTABLE}]`;
+const DRAGGABLE_SELECTOR_MOVABLE_HANDLE = `[${DRAGGABLE_ATTRIBUTE_MOVABLE}-handle]`;
+const DRAGGABLE_SELECTOR_SORTABLE_HANDLE = `[${DRAGGABLE_ATTRIBUTE_SORTABLE}-handle]`;
+const DRAGGABLE_SELECTOR_SORTABLE_ITEM = `[${DRAGGABLE_ATTRIBUTE_SORTABLE}] > *`;
+const DRAGGABLE_SYMBOL = Symbol(DRAGGABLE_ATTRIBUTE_MOVABLE);
+const draggableContainers = /* @__PURE__ */ new Set([
+	"body",
+	"document",
+	"window"
+]);
+const draggableHorizontals = /* @__PURE__ */ new Set(["horizontal", "x"]);
+const draggableProperties = {
+	movable: "sortable",
+	sortable: "movable"
+};
+const draggableGlobals = {
+	container: void 0,
+	element: void 0,
+	instances: /* @__PURE__ */ new WeakMap(),
+	offset: void 0,
+	original: void 0,
+	states: /* @__PURE__ */ new WeakMap()
+};
+const draggableStyles = {
+	touchAction: "none",
+	userSelect: "none",
+	webkitUserSelect: "none"
+};
+const draggableStyleToggler = toggleStyles(document.body, draggableStyles);
+const draggableVerticals = /* @__PURE__ */ new Set(["vertical", "y"]);
+//#endregion
+export { DRAGGABLE_ATTRIBUTE_MOVABLE, DRAGGABLE_ATTRIBUTE_SORTABLE, DRAGGABLE_KEY_ESCAPE, DRAGGABLE_SELECTOR, DRAGGABLE_SELECTOR_MOVABLE_HANDLE, DRAGGABLE_SELECTOR_SORTABLE_HANDLE, DRAGGABLE_SELECTOR_SORTABLE_ITEM, DRAGGABLE_SYMBOL, draggableContainers, draggableGlobals, draggableHorizontals, draggableProperties, draggableStyleToggler, draggableStyles, draggableVerticals };

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

@@ -0,0 +1,13 @@
+import { D as OuiDraggable, G as OuiDraggableStates, M as OuiDraggableInstances, O as OuiDraggableBound, P as OuiDraggableOptions, W as OuiDraggableState, p as CreateOuiDraggableOptions } from "../../movable.model-BHaK_mKw.mjs";
+import { PlainObject } from "@oscarpalmer/atoms/models";
+//#region src/js/internal/draggable/index.d.ts
+export declare function addDraggable<Property extends keyof OuiDraggableInstances, Instance extends OuiDraggableInstances[Property]>(this: OuiDraggableBound<Property, Instance>, element: HTMLElement, options?: CreateOuiDraggableOptions): Instance;
+export declare function destroyDraggable(draggable: OuiDraggable): void;
+export declare function getDraggableStates(element: HTMLElement): OuiDraggableStates | undefined;
+export declare function getDraggableElement(this: OuiDraggable): HTMLElement;
+export declare function initializeDraggable<ExtraState extends PlainObject = PlainObject>(draggable: OuiDraggable, name: keyof OuiDraggableStates, event: string, attribute: string, element: HTMLElement, options: OuiDraggableOptions<ExtraState>, extras: ExtraState): OuiDraggableState & ExtraState;
+export declare function removeDraggable<Property extends keyof OuiDraggableInstances, Instance extends OuiDraggableInstances[Property]>(this: {
+  constructor: new (element: HTMLElement) => Instance;
+  property: Property;
+}, element: HTMLElement): void;
+//#endregion

package/dist/js/internal/{draggable.mjs → draggable/index.mjs}

@@ -1,62 +1,34 @@
-import { clamp } from "@oscarpalmer/atoms/number";
+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 { setStyle, setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
-import supportsTouch from "@oscarpalmer/toretto/touch";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
-//#region src/js/internal/draggable.ts
-var OuiDraggable = class {
-	#destroyed = false;
-	#state;
-	get element() {
-		return this.#state.element;
-	}
-	constructor(name, event, attribute, element, options, extras) {
-		this.#state = {
-			...extras,
-			attribute,
-			element,
-			event,
-			name,
-			options,
-			horizontal: true,
-			vertical: true,
-			styling: toggleStyles(element, styles)
-		};
-		const item = {
-			instance: this,
-			state: this.#state
-		};
-		setContainer(item);
-		setDirection(item);
-		setAttribute(element, attribute, "");
-		let states = globals.states.get(element);
-		states ??= {};
-		states[this.#state.name] = this.#state;
-		globals.states.set(element, states);
-	}
-	destroy() {
-		if (this.#destroyed) return;
-		this.#destroyed = true;
-		destroyInstance(this, this.#state);
-	}
-};
+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 = globals.instances.get(element);
+	let instances = draggableGlobals.instances.get(element);
 	if (instances == null) {
 		instances = {};
-		globals.instances.set(element, 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?.(globals, item);
+	item.state.options.drag.onCancel?.(draggableGlobals, 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,
@@ -70,37 +42,66 @@ function destroyInstance(instance, state) {
 	state.styling = void 0;
 }
 function getDraggableStates(element) {
-	return globals.states.get(element);
+	return draggableGlobals.states.get(element);
+}
+function getDraggableElement() {
+	return this[DRAGGABLE_SYMBOL].element;
 }
 function getHandle(event, isMovable) {
-	return findAncestor(event, isMovable ? SELECTOR_MOVABLE_HANDLE : SELECTOR_SORTABLE_HANDLE);
+	return findAncestor(event, isMovable ? DRAGGABLE_SELECTOR_MOVABLE_HANDLE : DRAGGABLE_SELECTOR_SORTABLE_HANDLE);
 }
 function getNextPosition(item, position) {
-	let x = globals.original?.x ?? 0;
-	let y = globals.original?.y ?? 0;
+	let x = draggableGlobals.original?.x ?? 0;
+	let y = draggableGlobals.original?.y ?? 0;
 	if (item.state.horizontal) {
-		x = position.x - (globals.offset?.x ?? 0);
-		if (globals.container != null && globals.element != null) x = clamp(x, globals.container.left, globals.container.right - globals.element.rectangle.width);
+		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 - (globals.offset?.y ?? 0);
-		if (globals.container != null && globals.element != null) y = clamp(y, globals.container.top, globals.container.bottom - globals.element.rectangle.height);
+		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,
+		horizontal: true,
+		vertical: true,
+		destroyed: false,
+		styling: toggleStyles(element, draggableStyles)
+	};
+	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 === KEY_ESCAPE) cancelDrag(current);
+	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, SELECTOR);
-	const instances = globals.instances.get(container);
-	const states = globals.states.get(container);
+	const container = findAncestor(event, DRAGGABLE_SELECTOR);
+	const instances = draggableGlobals.instances.get(container);
+	const states = draggableGlobals.states.get(container);
 	if (instances == null || states == null) return;
-	const isMovable = container.hasAttribute(ATTRIBUTE_MOVABLE);
+	const isMovable = container.hasAttribute(MOVABLE_ATTRIBUTE);
 	const item = {
 		instance: isMovable ? instances.movable : instances.sortable,
 		state: isMovable ? states.movable : states.sortable
@@ -109,11 +110,11 @@ function onPointerdown(event) {
 	if (supportsTouch.value) event.preventDefault();
 	let element = container;
 	if (!isMovable) {
-		element = findAncestor(event, SELECTOR_SORTABLE_ITEM);
+		element = findAncestor(event, DRAGGABLE_SELECTOR_SORTABLE_ITEM);
 		if (element == null || element.parentElement !== container) return;
 	}
 	let handle = element;
-	item.state.hasHandles ??= element.querySelector(SELECTOR_SORTABLE_HANDLE) != null;
+	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();
@@ -123,18 +124,18 @@ function onPointerdown(event) {
 		y: 0
 	};
 	current = item;
-	globals.container = item.state.container?.getBoundingClientRect();
-	globals.element = {
+	draggableGlobals.container = item.state.container?.getBoundingClientRect();
+	draggableGlobals.element = {
 		rectangle,
 		node: dragged
 	};
-	globals.offset = item.state.options.position.getOffset(globals, item, element, position);
-	globals.original = item.state.options.position.getOriginal(globals, item, position);
+	draggableGlobals.offset = item.state.options.position.getOffset(draggableGlobals, item, element, position);
+	draggableGlobals.original = item.state.options.position.getOriginal(draggableGlobals, item, position);
 	if (dispatch(item.state.element, `oui:${item.state.name}:begin`, { detail: {
 		element,
-		position: { ...globals.original }
+		position: { ...draggableGlobals.original }
 	} }).defaultPrevented) {
-		item.state.options.drag.onCancel?.(globals, item);
+		item.state.options.drag.onCancel?.(draggableGlobals, item);
 		reset();
 		return;
 	}
@@ -144,45 +145,45 @@ function onPointerdown(event) {
 		inset: `${next.y}px auto auto ${next.x}px`,
 		transform: "translate3d(0, 0, 0)"
 	});
-	item.state.options.drag.onBegin?.(event, globals, item, element, handle, next);
+	item.state.options.drag.onBegin?.(event, draggableGlobals, item, element, handle, next);
 	item.state.styling.set();
-	styleToggler.set();
+	draggableStyleToggler.set();
 }
 function onPointermove(event) {
 	if (current == null) return;
 	const position = getEventPosition(event);
 	if (position == null) return;
 	const next = getNextPosition(current, position);
-	if (globals.element != null) setStyle(globals.element.node, "inset", `${next.y}px auto auto ${next.x}px`);
-	const detail = current.state.options.drag.onMove(event, globals, current, {
+	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, draggableGlobals, 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, globals, current, reset);
+	current?.state.options.drag.onEnd?.(event, draggableGlobals, current, reset);
 }
 function removeDraggable(element) {
 	const { property } = this;
-	removeInstance(globals.instances, property, element);
-	removeInstance(globals.states, property, element);
+	removeInstance(draggableGlobals.instances, property, element);
+	removeInstance(draggableGlobals.states, property, element);
 }
 function removeInstance(map, name, element) {
 	const instances = map.get(element);
 	if (instances == null || instances[name] == null) return;
 	if (typeof instances[name].destroy === "function") instances[name].destroy();
 	instances[name] = void 0;
-	if (instances[properties[name]] == null) map.delete(element);
+	if (instances[draggableProperties[name]] == null) map.delete(element);
 }
 function reset() {
 	current?.state.styling.remove();
-	styleToggler.remove();
+	draggableStyleToggler.remove();
 	current = void 0;
-	globals.container = void 0;
-	globals.element = void 0;
-	globals.offset = void 0;
-	globals.original = 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 ?? {};
@@ -190,9 +191,9 @@ function setContainer(item) {
 		setContainerElement(item, container);
 		return;
 	}
-	const selector = container ?? getAttribute(item.instance.element, item.state.options.container.attribute);
+	const selector = container ?? getAttribute(item.state.element, item.state.options.container.attribute);
 	if (typeof selector !== "string") return;
-	const element = containers.has(selector) ? item.state.element.ownerDocument.body : document.querySelector(selector) ?? void 0;
+	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) {
@@ -204,8 +205,8 @@ function setContainerElement(item, element) {
 }
 function setDirection(item) {
 	const direction = getAttribute(item.state.element, item.state.options.direction.attribute);
-	if (horizontals.has(direction)) item.state.vertical = false;
-	else if (verticals.has(direction)) item.state.horizontal = false;
+	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) {
@@ -222,38 +223,6 @@ function unsetContainer(item) {
 	}
 	item.state.options.container.onDestroy?.(item, container, empty);
 }
-const ATTRIBUTE_MOVABLE = "oui-movable";
-const ATTRIBUTE_SORTABLE = "oui-sortable";
-const KEY_ESCAPE = "Escape";
-const SELECTOR = `[${ATTRIBUTE_MOVABLE}], [${ATTRIBUTE_SORTABLE}]`;
-const SELECTOR_MOVABLE_HANDLE = `[${ATTRIBUTE_MOVABLE}-handle]`;
-const SELECTOR_SORTABLE_HANDLE = `[${ATTRIBUTE_SORTABLE}-handle]`;
-const SELECTOR_SORTABLE_ITEM = `[${ATTRIBUTE_SORTABLE}] > *`;
-const containers = /* @__PURE__ */ new Set([
-	"body",
-	"document",
-	"window"
-]);
-const horizontals = /* @__PURE__ */ new Set(["horizontal", "x"]);
-const properties = {
-	movable: "sortable",
-	sortable: "movable"
-};
-const globals = {
-	container: void 0,
-	element: void 0,
-	instances: /* @__PURE__ */ new WeakMap(),
-	offset: void 0,
-	original: void 0,
-	states: /* @__PURE__ */ new WeakMap()
-};
-const styles = {
-	touchAction: "none",
-	userSelect: "none",
-	webkitUserSelect: "none"
-};
-const styleToggler = toggleStyles(document.body, styles);
-const verticals = /* @__PURE__ */ new Set(["vertical", "y"]);
 let current;
 on(document, "keydown", onKeydown);
 on(document, "mousedown", onPointerdown);
@@ -262,4 +231,4 @@ on(document, "pointerup", onPointerup);
 on(document, "touchcancel", onPointerup);
 on(document, "touchstart", onPointerdown, { passive: false });
 //#endregion
-export { OuiDraggable, addDraggable, getDraggableStates, removeDraggable };
+export { addDraggable, destroyDraggable, getDraggableElement, getDraggableStates, initializeDraggable, removeDraggable };

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

@@ -1,11 +1,8 @@
-import { d as OuiListboxType } from "../../listbox.model-CRReGOmu.mjs";
+import { f as OuiListboxType } from "../../listbox.model-CuBOj4qe.mjs";
 //#region src/js/internal/listbox/listbox.constants.d.ts
-declare const LISTBOX_KEYS: {
-  activation: Set<string>;
-  navigation: Set<string>;
-  selection: Set<string>;
-};
-declare const LISTBOX_TYPES: Set<OuiListboxType>;
-declare const listboxScrollOptions: ScrollIntoViewOptions;
-//#endregion
-export { LISTBOX_KEYS, LISTBOX_TYPES, listboxScrollOptions };
+export declare const LISTBOX_KEYS_ACTIVATION: Set<string>;
+export declare const LISTBOX_KEYS_NAVIGATION: Set<string>;
+export declare const LISTBOX_KEYS_SELECTION: Set<string>;
+export declare const LISTBOX_TYPES: Set<OuiListboxType>;
+export declare const listboxScrollOptions: ScrollIntoViewOptions;
+//#endregion