@oscarpalmer/oui 0.26.0 → 0.27.0

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

@@ -1,57 +1,57 @@
-//#region src/js/focus-trap/embedded.d.ts
+//#region src/js/focus-trap/focus-trap.embedded.d.ts
 declare class OuiFocusTrap {
   #private;
   /**
-   * Is focused maintained within the _FocusTrap_ when clicking outside of it?
+   * Is focused maintained within the _focus trap_ when clicking outside of it?
    */
   get contain(): boolean;
   /**
-   * Should focus be maintained within the _FocusTrap_ when clicking outside of it?
+   * Should focus be maintained within the _focus trap_ when clicking outside of it?
    */
   set contain(value: boolean);
   /**
-   * Is the _FocusTrap_ disabled?
+   * Is the _focus trap_ disabled?
    */
   get disabled(): boolean;
   /**
-   * Should the _FocusTrap_ be disabled?
+   * Should the _focus trap_ be disabled?
    */
   set disabled(value: boolean);
   /**
-   * Is focus allowed to escape when pressing _Escape_ within the _FocusTrap_?
+   * Is focus allowed to escape when pressing _Escape_ within the _focus trap_?
    */
   get noescape(): boolean;
   /**
-   * Should the _FocusTrap_ allow focus to escape when pressing _Escape_?
+   * Should the _focus trap_ allow focus to escape when pressing _Escape_?
    */
   set noescape(value: boolean);
   constructor(state: OuiFocusTrapState);
   /**
-   * Destroys the _FocusTrap_
+   * Destroys the _focus trap_
    */
   destroy(): void;
   /**
-   * Disables the _FocusTrap_
+   * Disables the _focus trap_
    */
   disable(): void;
   /**
-   * Enables the _FocusTrap_
+   * Enables the _focus trap_
    */
   enable(): void;
   /**
-   * Focuses the _FocusTrap_
+   * Focuses the _focus trap_
    *
-   * @param last When `true`, focuses the last focusable element within the _FocusTrap_ instead of the first
+   * @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 _FocusTrap_ when clicking outside of it?
+   * Should focus be maintained within the _focus trap_ when clicking outside of it?
    */
   contain?: boolean;
   /**
-   * Should the _FocusTrap_ allow focus to escape when pressing _Escape_?
+   * Should the _focus trap_ allow focus to escape when pressing _Escape_?
    */
   noescape?: boolean;
 };
@@ -61,11 +61,11 @@ type OuiFocusTrapState = {
   options: Required<OuiFocusTrapOptions>;
 };
 /**
- * Creates _(or retrieves)_ a _FocusTrap_ for an element
+ * Creates _(or retrieves)_ a _focus trap_ for an element
  *
  * @param element Element to trap focus within
- * @param options _FocusTrap_ options
- * @returns _FocusTrap_ instance
+ * @param options _Focus trap_ options
+ * @returns _Focus trap_ instance
  */
 declare function createFocusTrap(element: HTMLElement, options?: OuiFocusTrapOptions): OuiFocusTrap;
 declare function removeFocusTrap(element: HTMLElement): void;
@@ -73,4 +73,4 @@ 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";
 //#endregion
-export { createFocusTrap as a, OuiFocusTrap as i, ATTRIBUTE_FOCUSTRAP_CONTAIN as n, removeFocusTrap as o, ATTRIBUTE_FOCUSTRAP_NOESCAPE as r, ATTRIBUTE_FOCUSTRAP as t };
+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 };

package/dist/js/index.d.mts

@@ -1,7 +1,8 @@
+import { g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "./draggable-zszaW1qS.mjs";
 import { OuiDialog, getDialog } from "./dialog.mjs";
-import { i as OuiFloatablePosition, n as OuiFloatable, o as createFloatable } from "./embedded-ai6cqURc.mjs";
-import { a as createFocusTrap, i as OuiFocusTrap } from "./embedded-CHK82Uh5.mjs";
+import { c as createFloatable, i as OuiFloatable, n as CreateOuiFloatableOptions, o as OuiFloatablePosition } from "./floatable.embedded-YxGwzgbE.mjs";
+import { a as OuiFocusTrapOptions, i as OuiFocusTrap, o as createFocusTrap } from "./focus-trap.embedded-DR8NpZfr.mjs";
 import { OuiPopover, getPopover } from "./popover.mjs";
 import { OuiSplitterElement } from "./splitter.mjs";
 import { OuiTooltip, getTooltip, setTooltipDelay } from "./tooltip.mjs";
-export { type OuiDialog, type OuiFloatable, type OuiFloatablePosition, type OuiFocusTrap, type OuiPopover, OuiSplitterElement, type OuiTooltip, createFloatable, createFocusTrap, getDialog, getPopover, getTooltip, setTooltipDelay };
+export { type CreateOuiFloatableOptions, type CreateOuiDraggableOptions as CreateOuiMovableOptions, type OuiDialog, type OuiFloatable, type OuiFloatablePosition, type OuiFocusTrap, type OuiFocusTrapOptions, type OuiMovable, type OuiPopover, OuiSplitterElement, type OuiTooltip, createFloatable, createFocusTrap, createMovable, getDialog, getPopover, getTooltip, setTooltipDelay };

package/dist/js/index.mjs

@@ -1,12 +1,13 @@
-import { createFloatable } from "./floatable/embedded.mjs";
+import { createFloatable } from "./floatable/floatable.embedded.mjs";
+import { createMovable } from "./movable/movable.embedded.mjs";
+import "./movable/movable.standalone.mjs";
 import { getDialog } from "./dialog.mjs";
-import "./movable.mjs";
-import "./sortable.mjs";
+import "./sortable/sortable.embedded.mjs";
 import "./toolbar.mjs";
-import "./floatable/standalone.mjs";
-import { createFocusTrap } from "./focus-trap/embedded.mjs";
-import "./focus-trap/standalone.mjs";
+import "./floatable/floatable.standalone.mjs";
+import { createFocusTrap } from "./focus-trap/focus-trap.embedded.mjs";
+import "./focus-trap/focus-trap.standalone.mjs";
 import { getPopover } from "./popover.mjs";
 import { OuiSplitterElement } from "./splitter.mjs";
 import { getTooltip, setTooltipDelay } from "./tooltip.mjs";
-export { OuiSplitterElement, createFloatable, createFocusTrap, getDialog, getPopover, getTooltip, setTooltipDelay };
+export { OuiSplitterElement, createFloatable, createFocusTrap, createMovable, getDialog, getPopover, getTooltip, setTooltipDelay };

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

@@ -1,2 +1,2 @@
-import { a as OuiDraggable, i as DraggableState, n as DragMovePosition, o as addDraggable, r as DraggableBound, s as removeDraggable } from "../movable-dNqBctx3.mjs";
-export { DragMovePosition, DraggableBound, DraggableState, OuiDraggable, addDraggable, removeDraggable };
+import { a as OuiDraggableGlobals, c as addDraggable, i as OuiDraggableBound, l as getDraggableStates, n as OuiDragMovePosition, o as OuiDraggableItem, r as OuiDraggable, s as OuiDraggableState, t as CreateOuiDraggableOptions, u as removeDraggable } from "../draggable-zszaW1qS.mjs";
+export { CreateOuiDraggableOptions, OuiDragMovePosition, OuiDraggable, OuiDraggableBound, OuiDraggableGlobals, OuiDraggableItem, OuiDraggableState, addDraggable, getDraggableStates, removeDraggable };

package/dist/js/internal/draggable.mjs

@@ -1,52 +1,84 @@
 import { getPosition, on } from "@oscarpalmer/toretto/event";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import { clamp } from "@oscarpalmer/atoms/number";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 import { toggleStyles } from "@oscarpalmer/toretto/style";
 import supportsTouch from "@oscarpalmer/toretto/touch";
 //#region src/js/internal/draggable.ts
 var OuiDraggable = class {
-	prefix;
-	element;
-	options;
-	container;
-	hasHandles;
-	horizontal = true;
-	vertical = true;
-	constructor(prefix, element, options) {
-		this.prefix = prefix;
-		this.element = element;
-		this.options = options;
-		setContainer(this, options);
-		setDirection(this, options);
+	#destroyed = false;
+	#name;
+	#state;
+	get element() {
+		return this.#state.element;
+	}
+	constructor(name, event, attribute, element, options, extras) {
+		this.#name = name;
+		this.#state = {
+			...extras,
+			attribute,
+			element,
+			event,
+			options,
+			horizontal: true,
+			vertical: true,
+			styling: toggleStyles(element, styles)
+		};
+		const item = {
+			instance: this,
+			state: this.#state
+		};
+		setContainer(item);
+		setDirection(item);
+		element.setAttribute(attribute, "");
+		let states = globals.states.get(element);
+		states ??= {};
+		states[this.#name] = this.#state;
+		globals.states.set(element, states);
 	}
 	destroy() {
-		unsetContainer(this, this.options);
-		this.container = void 0;
-		this.element = void 0;
-		this.options = void 0;
+		if (this.#destroyed) return;
+		this.#destroyed = true;
+		destroyInstance(this, this.#state);
 	}
 };
-function addDraggable(element) {
-	let instances = state.instances.get(element);
+function addDraggable(element, options) {
+	let instances = globals.instances.get(element);
 	if (instances == null) {
 		instances = {};
-		state.instances.set(element, instances);
+		globals.instances.set(element, instances);
 	}
-	instances[this.property] ??= new this.constructor(element);
+	instances[this.property] ??= new this.constructor(element, options);
+	return instances[this.property];
+}
+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 globals.states.get(element);
 }
 function getHandle(event, isMovable) {
 	return findAncestor(event, isMovable ? SELECTOR_MOVABLE_HANDLE : SELECTOR_SORTABLE_HANDLE);
 }
-function getNextPosition(draggable, position) {
-	let x = state.original?.x ?? 0;
-	let y = state.original?.y ?? 0;
-	if (draggable.horizontal) {
-		x = position.x - (state.offset?.x ?? 0);
-		if (state.container != null && state.element != null) x = clamp(x, state.container.left, state.container.right - state.element.rectangle.width);
+function getNextPosition(item, position) {
+	let x = globals.original?.x ?? 0;
+	let y = globals.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);
 	}
-	if (draggable.vertical) {
-		y = position.y - (state.offset?.y ?? 0);
-		if (state.container != null && state.element != null) y = clamp(y, state.container.top, state.container.bottom - state.element.rectangle.height);
+	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);
 	}
 	return {
 		x,
@@ -55,19 +87,22 @@ function getNextPosition(draggable, position) {
 }
 function onKeydown(event) {
 	if (current == null || event.key !== KEY_ESCAPE) return;
-	const { origin } = current;
-	current.options.drag.onCancel?.(state, current);
-	current.element.dispatchEvent(new CustomEvent(`${current.prefix}:cancel`, { detail: { element: origin } }));
+	current.state.options.drag.onCancel?.(globals, current);
+	current.state.element.dispatchEvent(new CustomEvent(`${current.state.event}:cancel`, { detail: { element: current.state.options.getOrigin() } }));
 	reset();
 }
 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 = state.instances.get(container);
-	if (instances == null) return;
+	const instances = globals.instances.get(container);
+	const states = globals.states.get(container);
+	if (instances == null || states == null) return;
 	const isMovable = container.hasAttribute(ATTRIBUTE_MOVABLE);
-	const instance = isMovable ? instances.movable : instances.sortable;
-	if (instance == null) return;
+	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) {
@@ -75,41 +110,43 @@ function onPointerdown(event) {
 		if (element == null || element.parentElement !== container) return;
 	}
 	let handle = element;
-	instance.hasHandles ??= element.querySelector(SELECTOR_SORTABLE_HANDLE) != null;
-	if (instance.hasHandles) handle = getHandle(event, isMovable);
+	item.state.hasHandles ??= element.querySelector(SELECTOR_SORTABLE_HANDLE) != null;
+	if (item.state.hasHandles) handle = getHandle(event, isMovable);
 	if (handle == null) return;
-	const { dragged } = instance;
+	const dragged = item.state.options.getDragged();
 	const rectangle = dragged.getBoundingClientRect();
 	const position = getPosition(event) ?? {
 		x: 0,
 		y: 0
 	};
-	current = instance;
-	state.container = instance.container?.getBoundingClientRect();
-	state.element = {
+	current = item;
+	globals.container = item.state.container?.getBoundingClientRect();
+	globals.element = {
 		rectangle,
 		node: dragged
 	};
-	state.offset = instance.options.position.getOffset(state, instance, element, position);
-	state.original = instance.options.position.getOriginal(state, instance, position);
-	const begin = new CustomEvent(`${instance.prefix}:begin`, {
+	globals.offset = item.state.options.position.getOffset(globals, item, element, position);
+	globals.original = item.state.options.position.getOriginal(globals, item, position);
+	const begin = new CustomEvent(`${item.state.event}:begin`, {
 		detail: {
 			element,
-			position: { ...state.original }
+			position: { ...globals.original }
 		},
 		cancelable: true
 	});
-	instance.element.dispatchEvent(begin);
+	item.state.element.dispatchEvent(begin);
 	setTimeout(() => {
 		if (begin.defaultPrevented) {
-			current?.options.drag.onCancel(state, instance);
+			item.state.options.drag.onCancel?.(globals, item);
 			reset();
 			return;
 		}
-		const next = getNextPosition(instance, position);
+		const next = getNextPosition(item, position);
 		dragged.style.position = "fixed";
 		dragged.style.inset = `${next.y}px auto auto ${next.x}px`;
-		instance.options.drag.onBegin(event, state, instance, element, handle, next);
+		dragged.style.transform = "translate3d(0, 0, 0)";
+		item.state.options.drag.onBegin?.(event, globals, item, element, handle, next);
+		item.state.styling.set();
 		styleToggler.set();
 	});
 }
@@ -118,61 +155,74 @@ function onPointermove(event) {
 	const position = getPosition(event);
 	if (position == null) return;
 	const next = getNextPosition(current, position);
-	if (state.element != null) state.element.node.style.inset = `${next.y}px auto auto ${next.x}px`;
-	const detail = current.options.drag.onMove(event, state, current, {
+	if (globals.element != null) globals.element.node.style.inset = `${next.y}px auto auto ${next.x}px`;
+	const detail = current.state.options.drag.onMove(event, globals, current, {
 		calculated: next,
 		original: position
 	});
-	current.element.dispatchEvent(new CustomEvent(`${current.prefix}:move`, { detail }));
+	current.state.element.dispatchEvent(new CustomEvent(`${current.state.event}:move`, { detail }));
 }
 function onPointerup(event) {
-	current?.options.drag.onEnd?.(event, state, current, reset);
+	current?.state.options.drag.onEnd?.(event, globals, current, reset);
 }
 function removeDraggable(element) {
 	const { property } = this;
-	const instances = state.instances.get(element);
-	if (instances == null || instances[property] == null) return;
-	instances[property]?.destroy();
-	instances[property] = void 0;
-	if (instances[properties[property]] == null) state.instances.delete(element);
+	removeInstance(globals.instances, property, element);
+	removeInstance(globals.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);
 }
 function reset() {
-	current = void 0;
-	state.container = void 0;
-	state.element = void 0;
-	state.offset = void 0;
-	state.original = void 0;
+	current?.state.styling.remove();
 	styleToggler.remove();
+	current = void 0;
+	globals.container = void 0;
+	globals.element = void 0;
+	globals.offset = void 0;
+	globals.original = void 0;
 }
-function setContainer(draggable, options) {
-	const selector = draggable.element.getAttribute(options.container.attribute);
+function setContainer(item) {
+	const { container } = item.state.options.input ?? {};
+	if (isHTMLOrSVGElement(container)) {
+		setContainerElement(item, container);
+		return;
+	}
+	const selector = container ?? item.instance.element.getAttribute(item.state.options.container.attribute);
 	if (typeof selector !== "string") return;
-	draggable.container = globals.has(selector) ? draggable.element.ownerDocument.body : document.querySelector(selector) ?? void 0;
-	if (draggable.container == null) return;
-	const set = options.container.map.get(draggable.container);
-	if (set == null) options.container.map.set(draggable.container, new Set([draggable]));
-	else set.add(draggable);
-	options.container.onInitialize?.(draggable);
-}
-function setDirection(draggable, options) {
-	const direction = draggable.element.getAttribute(options.direction.attribute);
-	if (horizontals.has(direction)) draggable.vertical = false;
-	else if (verticals.has(direction)) draggable.horizontal = false;
-	options.direction.onAfter?.(draggable);
-}
-function unsetContainer(draggable, options) {
-	const { container } = draggable;
+	const element = containers.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 = item.state.element.getAttribute(item.state.options.direction.attribute);
+	if (horizontals.has(direction)) item.state.vertical = false;
+	else if (verticals.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 = options.container.map.get(container);
+	const set = item.state.options.container.map.get(container);
 	let empty = false;
 	if (set != null) {
-		set.delete(draggable);
+		set.delete(item.instance);
 		if (set.size === 0) {
 			empty = true;
-			options.container.map.delete(container);
+			item.state.options.container.map.delete(container);
 		}
 	}
-	options.container.onDestroy?.(draggable, container, empty);
+	item.state.options.container.onDestroy?.(item, container, empty);
 }
 const ATTRIBUTE_MOVABLE = "oui-movable";
 const ATTRIBUTE_SORTABLE = "oui-sortable";
@@ -181,29 +231,31 @@ 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 globals = new Set([
+const containers = /* @__PURE__ */ new Set([
 	"body",
 	"document",
 	"window"
 ]);
-const horizontals = new Set(["horizontal", "x"]);
+const horizontals = /* @__PURE__ */ new Set(["horizontal", "x"]);
 const properties = {
 	movable: "sortable",
 	sortable: "movable"
 };
-const state = {
+const globals = {
 	container: void 0,
 	element: void 0,
 	instances: /* @__PURE__ */ new WeakMap(),
 	offset: void 0,
-	original: void 0
+	original: void 0,
+	states: /* @__PURE__ */ new WeakMap()
 };
-const styleToggler = toggleStyles(document.body, {
+const styles = {
 	touchAction: "none",
 	userSelect: "none",
 	webkitUserSelect: "none"
-});
-const verticals = new Set(["vertical", "y"]);
+};
+const styleToggler = toggleStyles(document.body, styles);
+const verticals = /* @__PURE__ */ new Set(["vertical", "y"]);
 let current;
 on(document, "keydown", onKeydown);
 on(document, "mousedown", onPointerdown);
@@ -212,4 +264,4 @@ on(document, "pointerup", onPointerup);
 on(document, "touchcancel", onPointerup, { passive: false });
 on(document, "touchstart", onPointerdown, { passive: false });
 //#endregion
-export { OuiDraggable, addDraggable, removeDraggable };
+export { OuiDraggable, addDraggable, getDraggableStates, removeDraggable };

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

@@ -0,0 +1,2 @@
+import { g as createMovable, h as OuiMovable, m as ATTRIBUTE_MOVABLE_HANDLE, p as ATTRIBUTE_MOVABLE } from "../draggable-zszaW1qS.mjs";
+export { ATTRIBUTE_MOVABLE, ATTRIBUTE_MOVABLE_HANDLE, OuiMovable, createMovable };