@oscarpalmer/oui 0.29.1 → 0.31.0

package/dist/js/dialog.d.mts

@@ -1,7 +1,8 @@
-import { h as OuiMovable } from "./draggable-fIYXd8eO.mjs";
-import { n as OuiResizable } from "./resizable.embedded-CXrUVPzR.mjs";
+import { h as OuiMovable } from "./draggable-a6w0J1OD.mjs";
+import "./movable/movable.standalone.mjs";
+import { n as OuiResizable } from "./resizable.embedded-3qoR0Bjm.mjs";
+import "./resizable/resizable.standalone.mjs";
 import { RemovableEventListener } from "@oscarpalmer/toretto/models";
-
 //#region src/js/dialog.d.ts
 declare class OuiDialog {
   #private;

package/dist/js/dialog.mjs

@@ -4,8 +4,8 @@ import { ATTRIBUTE_MOVABLE_HANDLE, createMovable } from "./movable/movable.embed
 import "./movable/movable.standalone.mjs";
 import { RESIZABLE_ATTRIBUTE_HANDLE, createResizable } from "./resizable/resizable.embedded.mjs";
 import { getAria, setAria } from "@oscarpalmer/toretto/aria";
-import { on } from "@oscarpalmer/toretto/event";
 import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
+import { on } from "@oscarpalmer/toretto/event";
 import { setStyles } from "@oscarpalmer/toretto/style";
 //#region src/js/dialog.ts
 var OuiDialog = class {

package/dist/js/{draggable-fIYXd8eO.d.mts → draggable-a6w0J1OD.d.mts}

@@ -1,6 +1,5 @@
 import { StyleToggler } from "@oscarpalmer/toretto/style";
 import { EventPosition, PlainObject } from "@oscarpalmer/atoms/models";
-
 //#region src/js/movable/movable.embedded.d.ts
 declare class OuiMovable extends OuiDraggable<OuiMovableState> {
   #private;
@@ -134,9 +133,9 @@ type OuiDraggableState = {
   attribute: string;
   container?: HTMLElement;
   element: HTMLElement;
-  event: string;
   hasHandles?: boolean;
   horizontal: boolean;
+  name: keyof OuiDraggableStates;
   options: OuiDraggableOptions;
   styling: StyleToggler;
   vertical: boolean;

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

@@ -1,2 +1,2 @@
-import { a as OuiFloatablePosition, c as getOnBeforeToggleListener, i as OuiFloatableOptions, l as removeFloatable, n as CreateOuiFloatableOptions, o as createEmbeddedFloatable, r as OuiFloatable, s as createFloatable, t as ATTRIBUTE_FLOATABLE } from "../floatable.embedded-DUR8bQBK.mjs";
+import { a as OuiFloatablePosition, c as getOnBeforeToggleListener, i as OuiFloatableOptions, l as removeFloatable, n as CreateOuiFloatableOptions, o as createEmbeddedFloatable, r as OuiFloatable, s as createFloatable, t as ATTRIBUTE_FLOATABLE } from "../floatable.embedded-Bct4U5Dm.mjs";
 export { ATTRIBUTE_FLOATABLE, CreateOuiFloatableOptions, OuiFloatable, OuiFloatableOptions, OuiFloatablePosition, createEmbeddedFloatable, createFloatable, getOnBeforeToggleListener, removeFloatable };

package/dist/js/floatable/floatable.embedded.mjs

@@ -1,9 +1,9 @@
 import { getAria } from "@oscarpalmer/toretto/aria";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
 import { on } from "@oscarpalmer/toretto/event";
+import { setStyle, setStyles } from "@oscarpalmer/toretto/style";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
-import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
-import { setStyle, setStyles } from "@oscarpalmer/toretto/style";
 //#region src/js/floatable/floatable.embedded.ts
 var OuiFloatable = class {
 	#destroyed = false;

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

@@ -1,2 +1,2 @@
-import { a as OuiFloatablePosition, n as CreateOuiFloatableOptions, r as OuiFloatable, s as createFloatable } from "../floatable.embedded-DUR8bQBK.mjs";
+import { a as OuiFloatablePosition, n as CreateOuiFloatableOptions, r as OuiFloatable, s as createFloatable } from "../floatable.embedded-Bct4U5Dm.mjs";
 export { type CreateOuiFloatableOptions, type OuiFloatable, type OuiFloatablePosition, createFloatable };

package/dist/js/{floatable.embedded-DUR8bQBK.d.mts → floatable.embedded-Bct4U5Dm.d.mts}

@@ -1,5 +1,4 @@
 import { RemovableEventListener } from "@oscarpalmer/toretto/models";
-
 //#region src/js/floatable/floatable.embedded.d.ts
 type CreateOuiFloatableOptions = {
   /**

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

@@ -1,10 +1,10 @@
 import { attributable } from "../internal/attributable.mjs";
-import { on } from "@oscarpalmer/toretto/event";
-import { isPlainObject } from "@oscarpalmer/atoms/is";
-import { setAttribute } from "@oscarpalmer/toretto/attribute";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import { clamp } from "@oscarpalmer/atoms/number";
+import { setAttribute } from "@oscarpalmer/toretto/attribute";
+import { dispatch, on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
+import { isPlainObject } from "@oscarpalmer/atoms/is";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import { getFocusable } from "@oscarpalmer/toretto/focusable";
 //#region src/js/focus-trap/focus-trap.embedded.ts
 var OuiFocusTrap = class {
@@ -172,11 +172,15 @@ function onTab(event) {
 	const element = findAncestor(event, SELECTOR);
 	const instance = instances.get(element);
 	if (instance == null) return;
-	if (!instance.disabled) event.preventDefault();
-	const elements = getFocusable(element);
-	const index = elements.indexOf(event.target);
-	if (index === -1 || elements.length === 0) tabToTrap(instance, elements, element);
-	else tabToElement(instance, elements, index, event.shiftKey ? -1 : 1);
+	const dispatched = dispatch(element, "focus-trap");
+	setTimeout(() => {
+		if (dispatched.defaultPrevented) return;
+		if (!instance.disabled) event.preventDefault();
+		const elements = getFocusable(element);
+		const index = elements.indexOf(event.target);
+		if (index === -1 || elements.length === 0) tabToTrap(instance, elements, element);
+		else tabToElement(instance, elements, index, event.shiftKey ? -1 : 1);
+	});
 }
 function removeFocusTrap(element) {
 	instances.get(element)?.destroy();

package/dist/js/index.d.mts

@@ -1,9 +1,14 @@
-import { d as OuiSortable, f as createSortable, g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "./draggable-fIYXd8eO.mjs";
-import { a as createResizable, n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.embedded-CXrUVPzR.mjs";
+import { OuiComboboxElement } from "./combobox.mjs";
+import { d as OuiSortable, f as createSortable, g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "./draggable-a6w0J1OD.mjs";
+import "./movable/movable.standalone.mjs";
+import { a as createResizable, n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.embedded-3qoR0Bjm.mjs";
+import "./resizable/resizable.standalone.mjs";
 import { OuiDialog, getDialog } from "./dialog.mjs";
-import { a as OuiFloatablePosition, n as CreateOuiFloatableOptions, r as OuiFloatable, s as createFloatable } from "./floatable.embedded-DUR8bQBK.mjs";
+import { a as OuiFloatablePosition, n as CreateOuiFloatableOptions, r as OuiFloatable, s as createFloatable } from "./floatable.embedded-Bct4U5Dm.mjs";
+import "./floatable/floatable.standalone.mjs";
 import { a as OuiFocusTrapOptions, i as OuiFocusTrap, o as createFocusTrap } from "./focus-trap.embedded-DR8NpZfr.mjs";
 import { OuiPopover, getPopover } from "./popover.mjs";
+import "./sortable/sortable.standalone.mjs";
 import { OuiSplitterElement } from "./splitter.mjs";
 import { OuiTooltip, getTooltip, setTooltipDelay } from "./tooltip.mjs";
-export { type CreateOuiFloatableOptions, type CreateOuiDraggableOptions as CreateOuiMovableOptions, type CreateOuiDraggableOptions as CreateOuiSortableOptions, type CreateOuiResizableOptions, type OuiDialog, type OuiFloatable, type OuiFloatablePosition, type OuiFocusTrap, type OuiFocusTrapOptions, type OuiMovable, type OuiPopover, type OuiResizable, type OuiSortable, OuiSplitterElement, type OuiTooltip, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setTooltipDelay };
+export { type CreateOuiFloatableOptions, type CreateOuiDraggableOptions as CreateOuiMovableOptions, type CreateOuiDraggableOptions as CreateOuiSortableOptions, type CreateOuiResizableOptions, OuiComboboxElement, type OuiDialog, type OuiFloatable, type OuiFloatablePosition, type OuiFocusTrap, type OuiFocusTrapOptions, type OuiMovable, type OuiPopover, type OuiResizable, type OuiSortable, OuiSplitterElement, type OuiTooltip, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setTooltipDelay };

package/dist/js/index.mjs

@@ -1,4 +1,5 @@
 import { createFloatable } from "./floatable/floatable.embedded.mjs";
+import { OuiComboboxElement } from "./combobox.mjs";
 import { createMovable } from "./movable/movable.embedded.mjs";
 import "./movable/movable.standalone.mjs";
 import { createResizable } from "./resizable/resizable.embedded.mjs";
@@ -14,4 +15,4 @@ import { createSortable } from "./sortable/sortable.embedded.mjs";
 import "./sortable/sortable.standalone.mjs";
 import { OuiSplitterElement } from "./splitter.mjs";
 import { getTooltip, setTooltipDelay } from "./tooltip.mjs";
-export { OuiSplitterElement, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setTooltipDelay };
+export { OuiComboboxElement, OuiSplitterElement, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setTooltipDelay };

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

@@ -1,2 +1,2 @@
-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-fIYXd8eO.mjs";
+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-a6w0J1OD.mjs";
 export { CreateOuiDraggableOptions, OuiDragMovePosition, OuiDraggable, OuiDraggableBound, OuiDraggableGlobals, OuiDraggableItem, OuiDraggableState, addDraggable, getDraggableStates, removeDraggable };

package/dist/js/internal/draggable.mjs

@@ -1,25 +1,24 @@
-import { getPosition, on } from "@oscarpalmer/toretto/event";
-import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
-import { setStyle, setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
 import { clamp } from "@oscarpalmer/atoms/number";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
+import { dispatch, getPosition, on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
+import { setStyle, setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import supportsTouch from "@oscarpalmer/toretto/touch";
 //#region src/js/internal/draggable.ts
 var OuiDraggable = class {
 	#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,
+			name,
 			options,
 			horizontal: true,
 			vertical: true,
@@ -34,7 +33,7 @@ var OuiDraggable = class {
 		setAttribute(element, attribute, "");
 		let states = globals.states.get(element);
 		states ??= {};
-		states[this.#name] = this.#state;
+		states[this.#state.name] = this.#state;
 		globals.states.set(element, states);
 	}
 	destroy() {
@@ -52,6 +51,12 @@ function addDraggable(element, options) {
 	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);
+	dispatch(item.state.element, `${item.state.name}:cancel`, { detail: { element: item.state.options.getOrigin() } });
+	reset();
+}
 function destroyInstance(instance, state) {
 	unsetContainer({
 		instance,
@@ -87,10 +92,7 @@ function getNextPosition(item, position) {
 	};
 }
 function onKeydown(event) {
-	if (current == null || event.key !== KEY_ESCAPE) return;
-	current.state.options.drag.onCancel?.(globals, current);
-	current.state.element.dispatchEvent(new CustomEvent(`${current.state.event}:cancel`, { detail: { element: current.state.options.getOrigin() } }));
-	reset();
+	if (current != null && event.key === 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;
@@ -128,16 +130,12 @@ function onPointerdown(event) {
 	};
 	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: { ...globals.original }
-		},
-		cancelable: true
-	});
-	item.state.element.dispatchEvent(begin);
+	const dispatched = dispatch(item.state.element, `${item.state.name}:begin`, { detail: {
+		element,
+		position: { ...globals.original }
+	} });
 	setTimeout(() => {
-		if (begin.defaultPrevented) {
+		if (dispatched.defaultPrevented) {
 			item.state.options.drag.onCancel?.(globals, item);
 			reset();
 			return;
@@ -163,7 +161,10 @@ function onPointermove(event) {
 		calculated: next,
 		original: position
 	});
-	current.state.element.dispatchEvent(new CustomEvent(`${current.state.event}:move`, { detail }));
+	const dispatched = dispatch(current.state.element, `${current.state.name}:move`, { detail });
+	setTimeout(() => {
+		if (dispatched.defaultPrevented) cancelDrag(current);
+	});
 }
 function onPointerup(event) {
 	current?.state.options.drag.onEnd?.(event, globals, current, reset);

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

@@ -1,5 +1,4 @@
 import { AriaRole, RemovableEventListener } from "@oscarpalmer/toretto/models";
-
 //#region src/js/internal/navigable.d.ts
 declare class OuiNavigable {
   active: OuiNavigableActive;

package/dist/js/internal/navigable.mjs

@@ -1,8 +1,8 @@
-import { getAria, setRole } from "@oscarpalmer/toretto/aria";
-import { on } from "@oscarpalmer/toretto/event";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import { clamp } from "@oscarpalmer/atoms/number";
+import { getAria, setRole } from "@oscarpalmer/toretto/aria";
+import { dispatch, on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/internal/navigable.ts
 var OuiNavigable = class {
 	active = { index: 0 };
@@ -88,6 +88,7 @@ function updateNavigableFocus(navigable, focus, items) {
 	for (let index = 0; index < length; index += 1) updated[index].tabIndex = index === navigable.active.index ? 0 : -1;
 	navigable.active.element ??= updated[navigable.active.index];
 	if (focus) navigable.active.element?.focus();
+	dispatch(navigable.active.element, "navigable:change", { detail: { ...navigable.active } });
 }
 const KEYS_ABSOLUTE = /* @__PURE__ */ new Set(["End", "Home"]);
 const KEYS_ACTIVATE = /* @__PURE__ */ new Set(["Enter", " "]);

package/dist/js/menu.mjs

@@ -2,8 +2,8 @@ import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/
 import { attributable } from "./internal/attributable.mjs";
 import { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, getNavigable, updateNavigableFocus } from "./internal/navigable.mjs";
 import { setAria, setRole } from "@oscarpalmer/toretto/aria";
+import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
 import { on } from "@oscarpalmer/toretto/event";
-import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 //#region src/js/menu.ts
 var OuiMenu = class {
@@ -104,7 +104,10 @@ function initializeMenu(menu) {
 		expanded: "false",
 		haspopup: "menu"
 	});
-	setAttribute(menu.content, "tabindex", "-1");
+	setAttributes(menu.content, {
+		popover: "",
+		tabindex: "-1"
+	});
 	setRole(menu.content, "menu");
 }
 function onDeactivate(_, navigable) {

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-fIYXd8eO.mjs";
+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 };

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

@@ -1,9 +1,9 @@
 import { attributable } from "../internal/attributable.mjs";
 import { OuiDraggable, addDraggable, getDraggableStates, removeDraggable } from "../internal/draggable.mjs";
-import { getPosition, on } from "@oscarpalmer/toretto/event";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { dispatch, getPosition, on } from "@oscarpalmer/toretto/event";
 import { getStyles, setStyle, setStyles } from "@oscarpalmer/toretto/style";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/movable/movable.embedded.ts
 var OuiMovable = class extends OuiDraggable {
 	#element;
@@ -110,16 +110,12 @@ function onEnd(event, globals, item, reset) {
 	}
 	const container = state.container?.getBoundingClientRect();
 	if (container != null) setOffset(state, container);
-	const end = new CustomEvent(EVENT_END, {
-		detail: {
-			from: { ...globals.original },
-			to: getPosition(event)
-		},
-		cancelable: true
-	});
-	state.element.dispatchEvent(end);
+	const dispatched = dispatch(state.element, "movable:end", { detail: {
+		from: { ...globals.original },
+		to: getPosition(event)
+	} });
 	setTimeout(() => {
-		if (end.defaultPrevented) onCancel(globals, item);
+		if (dispatched.defaultPrevented) onCancel(globals, item);
 		reset();
 	});
 }
@@ -162,7 +158,6 @@ 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 EVENT_END = "move:end";
 const MESSAGE = "The element must be an instance of HTMLElement or SVGElement";
 const MOVED = /* @__PURE__ */ new Set();
 const SELECTOR_HANDLE = `[${ATTRIBUTE_MOVABLE_HANDLE}]`;

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

@@ -1,2 +1,2 @@
-import { g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "../draggable-fIYXd8eO.mjs";
+import { g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "../draggable-a6w0J1OD.mjs";
 export { type CreateOuiDraggableOptions as CreateOuiMovableOptions, type OuiMovable, createMovable };

package/dist/js/popover.d.mts

@@ -1,7 +1,6 @@
-import { r as OuiFloatable } from "./floatable.embedded-DUR8bQBK.mjs";
+import { r as OuiFloatable } from "./floatable.embedded-Bct4U5Dm.mjs";
 import { i as OuiFocusTrap } from "./focus-trap.embedded-DR8NpZfr.mjs";
 import { RemovableEventListener } from "@oscarpalmer/toretto/models";
-
 //#region src/js/popover.d.ts
 declare class OuiPopover {
   #private;

package/dist/js/popover.mjs

@@ -2,8 +2,8 @@ import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/
 import { attributable } from "./internal/attributable.mjs";
 import { createFocusTrap } from "./focus-trap/focus-trap.embedded.mjs";
 import { getAria, setAria } from "@oscarpalmer/toretto/aria";
-import { on } from "@oscarpalmer/toretto/event";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
+import { on } from "@oscarpalmer/toretto/event";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/popover.ts
 var OuiPopover = class {

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

@@ -1,2 +1,2 @@
-import { a as createResizable, i as RESIZABLE_ATTRIBUTE_HANDLE, n as OuiResizable, r as RESIZABLE_ATTRIBUTE, t as CreateOuiResizableOptions } from "../resizable.embedded-CXrUVPzR.mjs";
+import { a as createResizable, i as RESIZABLE_ATTRIBUTE_HANDLE, n as OuiResizable, r as RESIZABLE_ATTRIBUTE, t as CreateOuiResizableOptions } from "../resizable.embedded-3qoR0Bjm.mjs";
 export { CreateOuiResizableOptions, OuiResizable, RESIZABLE_ATTRIBUTE, RESIZABLE_ATTRIBUTE_HANDLE, createResizable };

package/dist/js/resizable/resizable.embedded.mjs

@@ -1,11 +1,11 @@
 import { attributable } from "../internal/attributable.mjs";
-import { getPosition, on } from "@oscarpalmer/toretto/event";
-import { isPlainObject } from "@oscarpalmer/atoms/is";
-import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
-import { setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
 import { getNumber } from "@oscarpalmer/atoms/number";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
+import { dispatch, getPosition, on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
+import { setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
+import { isPlainObject } from "@oscarpalmer/atoms/is";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import supportsTouch from "@oscarpalmer/toretto/touch";
 //#region src/js/resizable/resizable.embedded.ts
 var OuiResizable = class {
@@ -18,7 +18,6 @@ var OuiResizable = class {
 	}
 	set() {
 		const [width, height] = getAndSetDimensions(this.#state.element, this.#state.options);
-		console.log("set", width, height);
 		this.#state.width = width;
 		this.#state.height = height;
 	}
@@ -43,6 +42,15 @@ function addResizable(element, options) {
 	}
 	return item?.instance;
 }
+function cancelResize(item) {
+	if (item == null) return;
+	setStyles(item.state.element, {
+		height: `${item.state.height}px`,
+		width: `${item.state.width}px`
+	});
+	resetResizable();
+	dispatch(item.state.element, "resizable:cancel");
+}
 /**
 * Creates _(or retrieves)_ a _OuiResizable_ instance for an element
 *
@@ -112,12 +120,7 @@ function getXAndY(first, second) {
 	return [xAsNumber, yAsNumber];
 }
 function onKeydown(event) {
-	if (current == null || event.key !== "Escape") return;
-	setStyles(current.state.element, {
-		height: `${current.state.height}px`,
-		width: `${current.state.width}px`
-	});
-	resetResizable();
+	if (current != null && event.key === "Escape") cancelResize(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;
@@ -127,10 +130,14 @@ function onPointerdown(event) {
 	const position = getPosition(event);
 	if (stored == null || position == null) return;
 	if (supportsTouch.value) event.preventDefault();
-	current = stored;
-	start = position;
-	current.state.styles.set();
-	styleToggler.set();
+	const dispatched = dispatch(element, "resizable:begin");
+	setTimeout(() => {
+		if (dispatched.defaultPrevented) return;
+		current = stored;
+		start = position;
+		current.state.styles.set();
+		styleToggler.set();
+	});
 }
 function onPointermove(event) {
 	if (current == null) return;
@@ -142,13 +149,27 @@ function onPointermove(event) {
 		height,
 		width
 	});
+	const dispatched = dispatch(current.state.element, "resizable:resize", { detail: {
+		height,
+		width
+	} });
+	setTimeout(() => {
+		if (dispatched.defaultPrevented) cancelResize(current);
+	});
 }
 function onPointerup() {
 	if (current == null) return;
-	const { height, width } = current.state.element.getBoundingClientRect();
-	current.state.height = height;
-	current.state.width = width;
-	resetResizable();
+	const dispatched = dispatch(current.state.element, "resizable:end");
+	setTimeout(() => {
+		if (current == null || dispatched.defaultPrevented) {
+			cancelResize(current);
+			return;
+		}
+		const { height, width } = current.state.element.getBoundingClientRect();
+		current.state.height = height;
+		current.state.width = width;
+		resetResizable();
+	});
 }
 function removeResizable(element) {
 	items.get(element)?.instance.destroy();

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

@@ -1,2 +1,2 @@
-import { a as createResizable, n as OuiResizable, t as CreateOuiResizableOptions } from "../resizable.embedded-CXrUVPzR.mjs";
+import { a as createResizable, n as OuiResizable, t as CreateOuiResizableOptions } from "../resizable.embedded-3qoR0Bjm.mjs";
 export { type CreateOuiResizableOptions, type OuiResizable, createResizable as createOuiResizable };

package/dist/js/{resizable.embedded-CXrUVPzR.d.mts → resizable.embedded-3qoR0Bjm.d.mts}

@@ -1,5 +1,4 @@
 import { StyleToggler } from "@oscarpalmer/toretto/style";
-
 //#region src/js/resizable/resizable.embedded.d.ts
 type CreateOuiResizableOptions = {
   maximumHeight?: number;

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

@@ -1,2 +1,2 @@
-import { d as OuiSortable, f as createSortable } from "../draggable-fIYXd8eO.mjs";
+import { d as OuiSortable, f as createSortable } from "../draggable-a6w0J1OD.mjs";
 export { OuiSortable, createSortable };

package/dist/js/sortable/sortable.embedded.mjs

@@ -1,11 +1,11 @@
 import { attributable } from "../internal/attributable.mjs";
 import { OuiDraggable, addDraggable, getDraggableStates, removeDraggable } from "../internal/draggable.mjs";
-import { getPosition } from "@oscarpalmer/toretto/event";
 import { getAttribute, setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
-import { setStyle } from "@oscarpalmer/toretto/style";
-import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
 import { createElement } from "@oscarpalmer/toretto/create";
+import { dispatch, getPosition } from "@oscarpalmer/toretto/event";
+import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
+import { setStyle } from "@oscarpalmer/toretto/style";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/sortable/sortable.embedded.ts
 var OuiSortable = class extends OuiDraggable {
 	constructor(element, options) {
@@ -35,7 +35,7 @@ function afterEnd(insert, from, events, elements, position, valid) {
 	elements.origin?.removeAttribute(ATTRIBUTE_ORIGIN);
 	from.state.origin = void 0;
 	resetPlaceholders();
-	if (!valid || events.some((event) => event.defaultPrevented)) return;
+	if (!valid || events.some((event) => event?.defaultPrevented)) return;
 	if (insert !== "insert") {
 		elements.target.append(elements.origin);
 		return;
@@ -43,8 +43,8 @@ function afterEnd(insert, from, events, elements, position, valid) {
 	if (position == null) return;
 	const { height, top } = elements.target.getBoundingClientRect();
 	let insertion;
-	if (position.y < top + height / 2) insertion = INSERT_BEFORE;
-	else insertion = INSERT_AFTER;
+	if (position.y < top + height / 2) insertion = "beforebegin";
+	else insertion = "afterend";
 	elements.target?.insertAdjacentElement(insertion, elements.origin);
 	document.body.removeAttribute(ATTRIBUTE_ACTIVE);
 }
@@ -130,12 +130,11 @@ function onEnd(event, globals, item, reset) {
 		bubbles: false,
 		cancelable: true
 	};
-	const fromEvent = new CustomEvent(EVENT_END, options);
-	const toEvent = new CustomEvent(EVENT_END, options);
-	item.instance.element.dispatchEvent(fromEvent);
-	if (item.instance !== toInstance) toInstance?.element.dispatchEvent(toEvent);
+	const dispatchedFrom = dispatch(item.instance.element, "sortable:end", options);
+	let dispatchedTo;
+	if (item.instance !== toInstance && toInstance != null) dispatchedTo = dispatch(toInstance.element, "sortable:end", options);
 	setTimeout(() => {
-		afterEnd(insert, item, [fromEvent, toEvent], {
+		afterEnd(insert, item, [dispatchedFrom, dispatchedTo], {
 			origin,
 			target: element
 		}, position, valid);
@@ -165,10 +164,10 @@ function onMove(event, globals, item, position) {
 		let place;
 		if (position.calculated.y < top + height / 2) {
 			place = "before";
-			toElement.insertAdjacentElement(INSERT_BEFORE, placeholder);
+			toElement.insertAdjacentElement("beforebegin", placeholder);
 		} else {
 			place = "after";
-			toElement.insertAdjacentElement(INSERT_AFTER, placeholder);
+			toElement.insertAdjacentElement("afterend", placeholder);
 		}
 		setAttribute(placeholder, ATTRIBUTE_PLACEHOLDER_POSITION, place);
 	} else placeholder.remove();
@@ -193,27 +192,23 @@ function setPlaceholder(state, item, origin) {
 	const element = getDragPlaceholder();
 	placeholder.drag.default.innerHTML = "";
 	updatePlaceholder(item, element);
-	const event = new CustomEvent(EVENT_PLACEHOLDER, {
-		cancelable: true,
-		detail: {
-			origin,
-			parent: item.state.element,
-			placeholder: element,
-			create: (value) => {
-				if (!isHTMLOrSVGElement(value)) return;
-				const element = value;
-				placeholder.drag.custom = element;
-				updatePlaceholder(item, element);
-				state.element = {
-					rectangle: element.getBoundingClientRect(),
-					node: element
-				};
-			}
+	const dispatched = dispatch(item.instance.element, "sortable:placeholder", { detail: {
+		origin,
+		parent: item.state.element,
+		placeholder: element,
+		create: (value) => {
+			if (!isHTMLOrSVGElement(value)) return;
+			const element = value;
+			placeholder.drag.custom = element;
+			updatePlaceholder(item, element);
+			state.element = {
+				rectangle: element.getBoundingClientRect(),
+				node: element
+			};
 		}
-	});
-	item.instance.element.dispatchEvent(event);
+	} });
 	setTimeout(() => {
-		if (!event.defaultPrevented && placeholder.drag.custom == null) placeholder.drag.default?.append(element.cloneNode(true));
+		if (!dispatched.defaultPrevented && placeholder.drag.custom == null) placeholder.drag.default?.append(element.cloneNode(true));
 		document.body.append(placeholder.drag.custom ?? placeholder.drag.default ?? "");
 	});
 }
@@ -248,10 +243,6 @@ const ATTRIBUTE_PLACEHOLDER_DRAG = `${ATTRIBUTE}-placeholder-drag`;
 const ATTRIBUTE_PLACEHOLDER_POSITION = `${ATTRIBUTE}-placeholder-position`;
 const ATTRIBUTE_VERTICAL = `${ATTRIBUTE}-vertical`;
 const CONTAINERS = /* @__PURE__ */ new Map();
-const EVENT_END = "sort:end";
-const EVENT_PLACEHOLDER = "sort:placeholder";
-const INSERT_AFTER = "afterend";
-const INSERT_BEFORE = "beforebegin";
 const MESSAGE = "The element must be an instance of HTMLElement or SVGElement";
 const SELECTOR = `[${ATTRIBUTE}]`;
 const SELECTOR_ITEM = `[${ATTRIBUTE}] > *`;

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

@@ -1,2 +1,2 @@
-import { d as OuiSortable, f as createSortable, t as CreateOuiDraggableOptions } from "../draggable-fIYXd8eO.mjs";
+import { d as OuiSortable, f as createSortable, t as CreateOuiDraggableOptions } from "../draggable-a6w0J1OD.mjs";
 export { type CreateOuiDraggableOptions as CreateOuiSortableOptions, type OuiSortable, createSortable };