@oscarpalmer/oui 0.40.0 → 0.42.0

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

@@ -1,5 +1,5 @@
 import { attributable } from "../internal/attributable.mjs";
-import { RESIZABLE_ATTRIBUTE, RESIZABLE_ATTRIBUTE_MAXIMUM, RESIZABLE_ATTRIBUTE_MINIMUM, RESIZABLE_MESSAGE_ELEMENT, RESIZABLE_MESSAGE_HANDLE, RESIZABLE_MESSAGE_HEIGHT, RESIZABLE_MESSAGE_WIDTH, RESIZABLE_SELECTOR, RESIZABLE_SELECTOR_HANDLE, RESIZABLE_SELECTOR_HANDLE_SCOPED, RESIZABLE_SYMBOL, resizableItems, resizableStyles } from "./resizable.model.mjs";
+import { RESIZABLE_ATTRIBUTE, RESIZABLE_ATTRIBUTE_DIRECTION, RESIZABLE_MESSAGE_ELEMENT, RESIZABLE_MESSAGE_HANDLE, RESIZABLE_MESSAGE_HEIGHT, RESIZABLE_MESSAGE_WIDTH, RESIZABLE_SELECTOR_HANDLE, RESIZABLE_SELECTOR_HANDLE_SCOPED, RESIZABLE_SYMBOL, resizableHorizontals, resizableItems, resizableStyles, resizableVerticals } from "./resizable.model.mjs";
 import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
 import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
@@ -46,7 +46,7 @@ function cancelResize(item) {
 */
 function createResizable(element, options) {
 	if (!isHTMLOrSVGElement(element)) throw new TypeError(RESIZABLE_MESSAGE_ELEMENT);
-	if (!isHTMLOrSVGElement(element.querySelector(RESIZABLE_SELECTOR_HANDLE_SCOPED))) throw new Error(RESIZABLE_MESSAGE_HANDLE);
+	if (!isHTMLOrSVGElement(element.querySelector(":scope > [oui-resizable-handle]"))) throw new Error(RESIZABLE_MESSAGE_HANDLE);
 	return addResizable(element, options ?? {});
 }
 function destroyResizable() {
@@ -68,6 +68,12 @@ function getAndSetDimensions(element, options, input) {
 	});
 	return [width, height];
 }
+function getDirections(element) {
+	const attribute = getAttribute(element, RESIZABLE_ATTRIBUTE_DIRECTION);
+	if (resizableHorizontals.has(attribute)) return [true, false];
+	if (resizableVerticals.has(attribute)) return [false, true];
+	return [true, true];
+}
 function getProperties(element, widthProperty, heightProperty) {
 	const computed = getComputedStyle(element);
 	return [computed[widthProperty], computed[heightProperty]];
@@ -88,18 +94,21 @@ function getState(element, handle, input) {
 	setAttribute(element, RESIZABLE_ATTRIBUTE, "");
 	const options = getValidOptions(element, input);
 	const [width, height] = getAndSetDimensions(element, options);
+	const [horizontal, vertical] = getDirections(element);
 	return {
 		element,
 		handle,
 		height,
+		horizontal,
 		options,
+		vertical,
 		width,
 		styles: toggleStyles(element, resizableStyles)
 	};
 }
 function getValidOptions(element, input) {
 	const original = isPlainObject(input) ? input : {};
-	return { ...getRestrictions(input == null ? getAttribute(element, RESIZABLE_ATTRIBUTE_MAXIMUM) ?? getProperties(element, "maxWidth", "maxHeight") : [original.maximumWidth, original.maximumHeight], input == null ? getAttribute(element, RESIZABLE_ATTRIBUTE_MINIMUM) ?? getProperties(element, "minWidth", "minHeight") : [original.minimumWidth, original.minimumHeight]) };
+	return { ...getRestrictions(input == null ? getAttribute(element, "oui-resizable-maximum") ?? getProperties(element, "maxWidth", "maxHeight") : [original.maximumWidth, original.maximumHeight], input == null ? getAttribute(element, "oui-resizable-minimum") ?? getProperties(element, "minWidth", "minHeight") : [original.minimumWidth, original.minimumHeight]) };
 }
 function getXAndY(first, second) {
 	const [x, y] = typeof first === "string" && second == null ? first.split(",") : [first, second];
@@ -115,7 +124,7 @@ function onKeydown(event) {
 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 handle = findAncestor(event, RESIZABLE_SELECTOR_HANDLE);
-	const element = handle && findAncestor(handle, RESIZABLE_SELECTOR);
+	const element = handle && findAncestor(handle, "[oui-resizable]");
 	const stored = element && resizableItems.get(element);
 	const position = getEventPosition(event);
 	if (stored == null || position == null) return;
@@ -130,9 +139,9 @@ function onPointermove(event) {
 	if (current == null) return;
 	const { x, y } = getEventPosition(event) ?? {};
 	if (x == null || y == null) return;
-	const width = current.state.width + (x - (start?.x ?? 0));
-	const height = current.state.height + (y - (start?.y ?? 0));
-	getAndSetDimensions(current.state.element, current.state.options, {
+	let width = current.state.horizontal ? current.state.width + (x - (start?.x ?? 0)) : current.state.width;
+	let height = current.state.vertical ? current.state.height + (y - (start?.y ?? 0)) : current.state.height;
+	[width, height] = getAndSetDimensions(current.state.element, current.state.options, {
 		height,
 		width
 	});

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

@@ -1,2 +1,2 @@
-import { _ as resizableItems, a as RESIZABLE_ATTRIBUTE, c as RESIZABLE_ATTRIBUTE_MINIMUM, d as RESIZABLE_MESSAGE_HEIGHT, f as RESIZABLE_MESSAGE_WIDTH, g as RESIZABLE_SYMBOL, h as RESIZABLE_SELECTOR_HANDLE_SCOPED, i as OuiResizableState, l as RESIZABLE_MESSAGE_ELEMENT, m as RESIZABLE_SELECTOR_HANDLE, n as OuiResizable, o as RESIZABLE_ATTRIBUTE_HANDLE, p as RESIZABLE_SELECTOR, r as OuiResizableItem, s as RESIZABLE_ATTRIBUTE_MAXIMUM, t as CreateOuiResizableOptions, u as RESIZABLE_MESSAGE_HANDLE, v as resizableStyles } from "../resizable.model-BwzJcTVJ.mjs";
-export { CreateOuiResizableOptions, OuiResizable, OuiResizableItem, OuiResizableState, RESIZABLE_ATTRIBUTE, RESIZABLE_ATTRIBUTE_HANDLE, RESIZABLE_ATTRIBUTE_MAXIMUM, RESIZABLE_ATTRIBUTE_MINIMUM, RESIZABLE_MESSAGE_ELEMENT, RESIZABLE_MESSAGE_HANDLE, RESIZABLE_MESSAGE_HEIGHT, RESIZABLE_MESSAGE_WIDTH, RESIZABLE_SELECTOR, RESIZABLE_SELECTOR_HANDLE, RESIZABLE_SELECTOR_HANDLE_SCOPED, RESIZABLE_SYMBOL, resizableItems, resizableStyles };
+import { S as resizableVerticals, _ as RESIZABLE_SELECTOR_HANDLE_SCOPED, a as OuiResizableState, b as resizableItems, c as RESIZABLE_ATTRIBUTE_HANDLE, d as RESIZABLE_MESSAGE_ELEMENT, f as RESIZABLE_MESSAGE_HANDLE, g as RESIZABLE_SELECTOR_HANDLE, h as RESIZABLE_SELECTOR, i as OuiResizableItem, l as RESIZABLE_ATTRIBUTE_MAXIMUM, m as RESIZABLE_MESSAGE_WIDTH, n as OuiResizable, o as RESIZABLE_ATTRIBUTE, p as RESIZABLE_MESSAGE_HEIGHT, r as OuiResizableDirection, s as RESIZABLE_ATTRIBUTE_DIRECTION, t as CreateOuiResizableOptions, u as RESIZABLE_ATTRIBUTE_MINIMUM, v as RESIZABLE_SYMBOL, x as resizableStyles, y as resizableHorizontals } from "../resizable.model-vCxaFdOA.mjs";
+export { CreateOuiResizableOptions, OuiResizable, OuiResizableDirection, OuiResizableItem, OuiResizableState, RESIZABLE_ATTRIBUTE, RESIZABLE_ATTRIBUTE_DIRECTION, RESIZABLE_ATTRIBUTE_HANDLE, RESIZABLE_ATTRIBUTE_MAXIMUM, RESIZABLE_ATTRIBUTE_MINIMUM, RESIZABLE_MESSAGE_ELEMENT, RESIZABLE_MESSAGE_HANDLE, RESIZABLE_MESSAGE_HEIGHT, RESIZABLE_MESSAGE_WIDTH, RESIZABLE_SELECTOR, RESIZABLE_SELECTOR_HANDLE, RESIZABLE_SELECTOR_HANDLE_SCOPED, RESIZABLE_SYMBOL, resizableHorizontals, resizableItems, resizableStyles, resizableVerticals };

package/dist/js/resizable/resizable.model.mjs

@@ -1,5 +1,6 @@
 //#region src/js/resizable/resizable.model.ts
 const RESIZABLE_ATTRIBUTE = "oui-resizable";
+const RESIZABLE_ATTRIBUTE_DIRECTION = `${RESIZABLE_ATTRIBUTE}-direction`;
 const RESIZABLE_ATTRIBUTE_HANDLE = `${RESIZABLE_ATTRIBUTE}-handle`;
 const RESIZABLE_ATTRIBUTE_MAXIMUM = `${RESIZABLE_ATTRIBUTE}-maximum`;
 const RESIZABLE_ATTRIBUTE_MINIMUM = `${RESIZABLE_ATTRIBUTE}-minimum`;
@@ -11,11 +12,13 @@ const RESIZABLE_SELECTOR = `[${RESIZABLE_ATTRIBUTE}]`;
 const RESIZABLE_SELECTOR_HANDLE = `[${RESIZABLE_ATTRIBUTE_HANDLE}]`;
 const RESIZABLE_SELECTOR_HANDLE_SCOPED = `:scope > ${RESIZABLE_SELECTOR_HANDLE}`;
 const RESIZABLE_SYMBOL = Symbol(RESIZABLE_ATTRIBUTE);
+const resizableHorizontals = /* @__PURE__ */ new Set(["horizontal", "x"]);
 const resizableItems = /* @__PURE__ */ new WeakMap();
 const resizableStyles = {
 	touchAction: "none",
 	userSelect: "none",
 	webkitUserSelect: "none"
 };
+const resizableVerticals = /* @__PURE__ */ new Set(["vertical", "y"]);
 //#endregion
-export { RESIZABLE_ATTRIBUTE, RESIZABLE_ATTRIBUTE_HANDLE, RESIZABLE_ATTRIBUTE_MAXIMUM, RESIZABLE_ATTRIBUTE_MINIMUM, RESIZABLE_MESSAGE_ELEMENT, RESIZABLE_MESSAGE_HANDLE, RESIZABLE_MESSAGE_HEIGHT, RESIZABLE_MESSAGE_WIDTH, RESIZABLE_SELECTOR, RESIZABLE_SELECTOR_HANDLE, RESIZABLE_SELECTOR_HANDLE_SCOPED, RESIZABLE_SYMBOL, resizableItems, resizableStyles };
+export { RESIZABLE_ATTRIBUTE, RESIZABLE_ATTRIBUTE_DIRECTION, RESIZABLE_ATTRIBUTE_HANDLE, RESIZABLE_ATTRIBUTE_MAXIMUM, RESIZABLE_ATTRIBUTE_MINIMUM, RESIZABLE_MESSAGE_ELEMENT, RESIZABLE_MESSAGE_HANDLE, RESIZABLE_MESSAGE_HEIGHT, RESIZABLE_MESSAGE_WIDTH, RESIZABLE_SELECTOR, RESIZABLE_SELECTOR_HANDLE, RESIZABLE_SELECTOR_HANDLE_SCOPED, RESIZABLE_SYMBOL, resizableHorizontals, resizableItems, resizableStyles, resizableVerticals };

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

@@ -1,3 +1,3 @@
-import { n as OuiResizable, t as CreateOuiResizableOptions } from "../resizable.model-BwzJcTVJ.mjs";
-import { t as createResizable } from "../resizable.embedded-Bf1qBUdt.mjs";
+import { n as OuiResizable, t as CreateOuiResizableOptions } from "../resizable.model-vCxaFdOA.mjs";
+import { t as createResizable } from "../resizable.embedded-D9mb-Wm_.mjs";
 export { type CreateOuiResizableOptions, type OuiResizable, createResizable as createOuiResizable };

package/dist/js/resizable/resizable.standalone.mjs

@@ -1,2 +1 @@
-import { createResizable } from "./resizable.embedded.mjs";
-export { createResizable as createOuiResizable };
+export { createResizable as createOuiResizable } from "./resizable.embedded.mjs";

package/dist/js/{resizable.embedded-Bf1qBUdt.d.mts → resizable.embedded-D9mb-Wm_.d.mts}

@@ -1,4 +1,4 @@
-import { n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.model-BwzJcTVJ.mjs";
+import { n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.model-vCxaFdOA.mjs";
 //#region src/js/resizable/resizable.embedded.d.ts
 /**
  * Creates _(or retrieves)_ a _OuiResizable_ instance for an element
@@ -6,6 +6,6 @@ import { n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.m
  * @param element Element to make resizable
  * @returns _OuiResizable_ instance
  */
-declare function createResizable(element: HTMLElement, options?: CreateOuiResizableOptions): OuiResizable;
+declare function createResizable(element: Element, options?: CreateOuiResizableOptions): OuiResizable;
 //#endregion
 export { createResizable as t };

package/dist/js/{resizable.model-BwzJcTVJ.d.mts → resizable.model-vCxaFdOA.d.mts}

@@ -12,19 +12,23 @@ type OuiResizable = {
   reset(): void;
   set(): void;
 };
+type OuiResizableDirection = "horizontal" | "vertical" | "x" | "y";
 type OuiResizableItem = {
   instance: OuiResizable;
   state: OuiResizableState;
 };
 type OuiResizableState = {
-  element: HTMLElement;
-  handle: HTMLElement;
+  element: Element;
+  handle: Element;
   height: number;
+  horizontal: boolean;
   options: Required<CreateOuiResizableOptions>;
   styles: StyleToggler;
+  vertical: boolean;
   width: number;
 };
 declare const RESIZABLE_ATTRIBUTE = "oui-resizable";
+declare const RESIZABLE_ATTRIBUTE_DIRECTION: string;
 declare const RESIZABLE_ATTRIBUTE_HANDLE: string;
 declare const RESIZABLE_ATTRIBUTE_MAXIMUM: string;
 declare const RESIZABLE_ATTRIBUTE_MINIMUM: string;
@@ -36,11 +40,13 @@ declare const RESIZABLE_SELECTOR: string;
 declare const RESIZABLE_SELECTOR_HANDLE: string;
 declare const RESIZABLE_SELECTOR_HANDLE_SCOPED: string;
 declare const RESIZABLE_SYMBOL: unique symbol;
-declare const resizableItems: WeakMap<HTMLElement, OuiResizableItem>;
+declare const resizableHorizontals: Set<OuiResizableDirection>;
+declare const resizableItems: WeakMap<Element, OuiResizableItem>;
 declare const resizableStyles: {
   touchAction: string;
   userSelect: string;
   webkitUserSelect: string;
 };
+declare const resizableVerticals: Set<OuiResizableDirection>;
 //#endregion
-export { resizableItems as _, RESIZABLE_ATTRIBUTE as a, RESIZABLE_ATTRIBUTE_MINIMUM as c, RESIZABLE_MESSAGE_HEIGHT as d, RESIZABLE_MESSAGE_WIDTH as f, RESIZABLE_SYMBOL as g, RESIZABLE_SELECTOR_HANDLE_SCOPED as h, OuiResizableState as i, RESIZABLE_MESSAGE_ELEMENT as l, RESIZABLE_SELECTOR_HANDLE as m, OuiResizable as n, RESIZABLE_ATTRIBUTE_HANDLE as o, RESIZABLE_SELECTOR as p, OuiResizableItem as r, RESIZABLE_ATTRIBUTE_MAXIMUM as s, CreateOuiResizableOptions as t, RESIZABLE_MESSAGE_HANDLE as u, resizableStyles as v };
+export { resizableVerticals as S, RESIZABLE_SELECTOR_HANDLE_SCOPED as _, OuiResizableState as a, resizableItems as b, RESIZABLE_ATTRIBUTE_HANDLE as c, RESIZABLE_MESSAGE_ELEMENT as d, RESIZABLE_MESSAGE_HANDLE as f, RESIZABLE_SELECTOR_HANDLE as g, RESIZABLE_SELECTOR as h, OuiResizableItem as i, RESIZABLE_ATTRIBUTE_MAXIMUM as l, RESIZABLE_MESSAGE_WIDTH as m, OuiResizable as n, RESIZABLE_ATTRIBUTE as o, RESIZABLE_MESSAGE_HEIGHT as p, OuiResizableDirection as r, RESIZABLE_ATTRIBUTE_DIRECTION as s, CreateOuiResizableOptions as t, RESIZABLE_ATTRIBUTE_MINIMUM as u, RESIZABLE_SYMBOL as v, resizableStyles as x, resizableHorizontals as y };

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

@@ -1,2 +1,2 @@
-import { t as createSortable } from "../sortable.embedded-DzBKAwSG.mjs";
+import { t as createSortable } from "../sortable.embedded-CrEGff9k.mjs";
 export { createSortable };

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

@@ -1,5 +1,5 @@
 import { attributable } from "../internal/attributable.mjs";
-import { DRAGGABLE_SYMBOL } from "../internal/draggable/draggable.model.mjs";
+import { DRAGGABLE_SYMBOL, draggableGlobals } from "../internal/draggable/draggable.model.mjs";
 import { addDraggable, destroyDraggable, getDraggableElement, getDraggableStates, initializeDraggable, removeDraggable } from "../internal/draggable/index.mjs";
 import { SORTABLE_ATTRIBUTE, SORTABLE_ATTRIBUTE_ACTIVE, SORTABLE_ATTRIBUTE_CONNECTIONS, SORTABLE_ATTRIBUTE_CONTAINER, SORTABLE_ATTRIBUTE_DIRECTION, SORTABLE_ATTRIBUTE_HORIZONTAL, SORTABLE_ATTRIBUTE_ORIGIN, SORTABLE_ATTRIBUTE_PLACEHOLDER_DRAG, SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION, SORTABLE_ATTRIBUTE_VERTICAL, SORTABLE_CONTAINERS, SORTABLE_MESSAGE, SORTABLE_SELECTOR_ITEM, sortablePlaceholder } from "./sortable.model.mjs";
 import { getAttribute, setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
@@ -28,7 +28,7 @@ function OuiSortable(element, options) {
 			getOriginal: getOriginalPosition
 		},
 		getDragged: getDragPlaceholder,
-		getOrigin: () => (getDraggableStates(element)?.sortable)?.origin
+		getOrigin: () => getState(element)?.origin
 	}, { connections: getAttribute(element, SORTABLE_ATTRIBUTE_CONNECTIONS) });
 }
 OuiSortable.prototype.destroy = destroySortable;
@@ -70,14 +70,17 @@ function getDragPlaceholder() {
 	sortablePlaceholder.drag.default ??= createElement("div");
 	return sortablePlaceholder.drag.custom ?? sortablePlaceholder.drag.default;
 }
-function getOffsetPosition(_, item, element, position) {
+function getInstance(element) {
+	return element == null ? void 0 : draggableGlobals.instances.get(element)?.sortable;
+}
+function getOffsetPosition(item, element, position) {
 	const rectangle = element.getBoundingClientRect();
 	return {
 		x: item.state.horizontal ? 0 : position.x - rectangle.left,
 		y: item.state.vertical ? 0 : position.y - rectangle.top
 	};
 }
-function getOriginalPosition(_, __, position) {
+function getOriginalPosition(__, position) {
 	return position;
 }
 function getPositionPlaceholder(item) {
@@ -86,51 +89,55 @@ function getPositionPlaceholder(item) {
 	if (item.state.origin != null) setStyle(sortablePlaceholder.position, "--placeholder-height", `${item.state.origin.getBoundingClientRect().height}px`);
 	return sortablePlaceholder.position;
 }
-function onBegin(_, globals, item, element) {
+function getState(element) {
+	return element == null ? void 0 : draggableGlobals.states.get(element)?.sortable;
+}
+function onBegin(_, item, element) {
 	item.state.origin = element;
-	setPlaceholder(globals, item, element);
+	setPlaceholder(item, element);
 	setAttribute(element, SORTABLE_ATTRIBUTE_ORIGIN, "");
 	setAttribute(document.body, SORTABLE_ATTRIBUTE_ACTIVE, "");
 }
-function onCancel(_, item) {
+function onCancel(item) {
 	item.state.origin?.removeAttribute(SORTABLE_ATTRIBUTE_ORIGIN);
 	document.body.removeAttribute(SORTABLE_ATTRIBUTE_ACTIVE);
 	resetPlaceholders();
 	item.state.origin = void 0;
 }
-function onEnd(event, globals, item, reset) {
+function onEnd(event, item, reset) {
+	const { original } = draggableGlobals;
 	const { origin } = item.state;
 	const position = getEventPosition(event) ?? {
 		x: 0,
 		y: 0
 	};
-	const target = getElementFromPosition(position)[0];
+	const [target] = getElementFromPosition(position);
 	let element = findAncestor(target, SORTABLE_SELECTOR_ITEM);
-	if (element?.hasAttribute(SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION)) {
-		if (getAttribute(element, SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION) === "after") element = element.previousElementSibling;
-		else element = element.nextElementSibling;
-	}
+	const attribute = element?.getAttribute(SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION);
+	if (attribute != null && attribute === "after") element = element?.previousElementSibling;
+	else if (attribute != null) element = element?.nextElementSibling;
 	let insert = "insert";
-	let toInstance;
-	let toState;
+	let instance;
+	let state;
 	if (element == null) {
 		element = findAncestor(target, SORTABLE_SELECTOR_ITEM);
-		toInstance = globals.instances.get(element)?.sortable;
-		toState = globals.states.get(element)?.sortable;
+		instance = getInstance(element);
+		state = getState(element);
 		insert = element == null ? void 0 : element.children.length === 0 ? "append" : "prepend";
 	} else {
-		toInstance = globals.instances.get(element.parentElement)?.sortable;
-		toState = globals.states.get(element.parentElement)?.sortable;
+		instance = getInstance(element.parentElement);
+		state = getState(element.parentElement);
 	}
-	const valid = insert != null && validatePosition(globals, item, {
-		instance: toInstance,
-		state: toState
+	if (element == null || instance == null || state == null) return;
+	const valid = insert != null && validatePosition(item, {
+		instance,
+		state
 	}, position);
 	const options = {
 		detail: valid ? {
 			from: {
 				element: origin,
-				position: { ...globals.original }
+				position: { ...original }
 			},
 			to: {
 				element,
@@ -142,7 +149,7 @@ function onEnd(event, globals, item, reset) {
 	};
 	const dispatchedFrom = dispatch(item.instance.element, "sortable:end", options);
 	let dispatchedTo;
-	if (item.instance !== toInstance && toInstance != null) dispatchedTo = dispatch(toInstance.element, "sortable:end", options);
+	if (item.instance !== instance && instance != null) dispatchedTo = dispatch(instance.element, "sortable:end", options);
 	setTimeout(() => {
 		afterEnd(insert, item, [dispatchedFrom, dispatchedTo], {
 			origin,
@@ -151,22 +158,23 @@ function onEnd(event, globals, item, reset) {
 		reset();
 	});
 }
-function onMove(event, globals, item, position) {
+function onMove(event, item, position) {
+	const { original } = draggableGlobals;
 	const fromElement = item.state.origin;
 	const toElement = findAncestor(event, SORTABLE_SELECTOR_ITEM);
-	let toInstance;
-	let toState;
+	let instance;
+	let state;
 	if (toElement == null) {
 		const element = findAncestor(event, SORTABLE_SELECTOR_ITEM);
-		toInstance = globals.instances.get(element)?.sortable;
-		toState = globals.states.get(element)?.sortable;
+		instance = getInstance(element);
+		state = getState(element);
 	} else {
-		toInstance = globals.instances.get(toElement.parentElement)?.sortable;
-		toState = globals.states.get(toElement.parentElement)?.sortable;
+		instance = getInstance(toElement.parentElement);
+		state = getState(toElement.parentElement);
 	}
-	if (toInstance == null || !validatePosition(globals, item, {
-		instance: toInstance,
-		state: toState
+	if (instance == null || state == null || !validatePosition(item, {
+		instance,
+		state
 	}, position.original)) return;
 	const placeholder = getPositionPlaceholder(item);
 	if (toElement != null && toElement !== fromElement) {
@@ -184,7 +192,7 @@ function onMove(event, globals, item, position) {
 	return {
 		from: {
 			element: fromElement,
-			position: { ...globals.original }
+			position: { ...original }
 		},
 		to: {
 			element: toElement,
@@ -198,7 +206,7 @@ function resetPlaceholders() {
 	sortablePlaceholder.position?.remove();
 	sortablePlaceholder.drag.custom = void 0;
 }
-function setPlaceholder(state, item, origin) {
+function setPlaceholder(item, origin) {
 	const element = getDragPlaceholder();
 	if (sortablePlaceholder.drag.default != null) sortablePlaceholder.drag.default.innerHTML = "";
 	updatePlaceholder(item, element);
@@ -211,7 +219,7 @@ function setPlaceholder(state, item, origin) {
 			const element = value;
 			sortablePlaceholder.drag.custom = element;
 			updatePlaceholder(item, element);
-			state.element = {
+			draggableGlobals.element = {
 				rectangle: element.getBoundingClientRect(),
 				node: element
 			};
@@ -232,7 +240,7 @@ function updatePlaceholder(item, element) {
 		[SORTABLE_ATTRIBUTE_VERTICAL]: state.vertical ? "" : void 0
 	});
 }
-function validatePosition(_, from, to, position) {
+function validatePosition(from, to, position) {
 	let valid = true;
 	const rectangle = from.state.origin?.getBoundingClientRect();
 	const fromState = getDraggableStates(from.state.element)?.sortable;

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

@@ -1,2 +1,2 @@
-import { $ as OuiSortable, _t as sortablePlaceholder, at as SORTABLE_ATTRIBUTE_CONNECTIONS, ct as SORTABLE_ATTRIBUTE_HORIZONTAL, dt as SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION, et as OuiSortablePlaceholder, ft as SORTABLE_ATTRIBUTE_VERTICAL, gt as SORTABLE_SELECTOR_ITEM, ht as SORTABLE_SELECTOR, it as SORTABLE_ATTRIBUTE_ACTIVE, lt as SORTABLE_ATTRIBUTE_ORIGIN, mt as SORTABLE_MESSAGE, nt as OuiSortableState, ot as SORTABLE_ATTRIBUTE_CONTAINER, pt as SORTABLE_CONTAINERS, rt as SORTABLE_ATTRIBUTE, st as SORTABLE_ATTRIBUTE_DIRECTION, tt as OuiSortablePlaceholderDrag, ut as SORTABLE_ATTRIBUTE_PLACEHOLDER_DRAG } from "../movable.model-BHaK_mKw.mjs";
+import { $ as OuiSortable, _t as sortablePlaceholder, at as SORTABLE_ATTRIBUTE_CONNECTIONS, ct as SORTABLE_ATTRIBUTE_HORIZONTAL, dt as SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION, et as OuiSortablePlaceholder, ft as SORTABLE_ATTRIBUTE_VERTICAL, gt as SORTABLE_SELECTOR_ITEM, ht as SORTABLE_SELECTOR, it as SORTABLE_ATTRIBUTE_ACTIVE, lt as SORTABLE_ATTRIBUTE_ORIGIN, mt as SORTABLE_MESSAGE, nt as OuiSortableState, ot as SORTABLE_ATTRIBUTE_CONTAINER, pt as SORTABLE_CONTAINERS, rt as SORTABLE_ATTRIBUTE, st as SORTABLE_ATTRIBUTE_DIRECTION, tt as OuiSortablePlaceholderDrag, ut as SORTABLE_ATTRIBUTE_PLACEHOLDER_DRAG } from "../movable.model-D9nnPWKk.mjs";
 export { OuiSortable, OuiSortablePlaceholder, OuiSortablePlaceholderDrag, OuiSortableState, SORTABLE_ATTRIBUTE, SORTABLE_ATTRIBUTE_ACTIVE, SORTABLE_ATTRIBUTE_CONNECTIONS, SORTABLE_ATTRIBUTE_CONTAINER, SORTABLE_ATTRIBUTE_DIRECTION, SORTABLE_ATTRIBUTE_HORIZONTAL, SORTABLE_ATTRIBUTE_ORIGIN, SORTABLE_ATTRIBUTE_PLACEHOLDER_DRAG, SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION, SORTABLE_ATTRIBUTE_VERTICAL, SORTABLE_CONTAINERS, SORTABLE_MESSAGE, SORTABLE_SELECTOR, SORTABLE_SELECTOR_ITEM, sortablePlaceholder };

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

@@ -1,3 +1,3 @@
-import { $ as OuiSortable, p as CreateOuiDraggableOptions } from "../movable.model-BHaK_mKw.mjs";
-import { t as createSortable } from "../sortable.embedded-DzBKAwSG.mjs";
+import { $ as OuiSortable, p as CreateOuiDraggableOptions } from "../movable.model-D9nnPWKk.mjs";
+import { t as createSortable } from "../sortable.embedded-CrEGff9k.mjs";
 export { type CreateOuiDraggableOptions as CreateOuiSortableOptions, type OuiSortable, createSortable };

package/dist/js/sortable/sortable.standalone.mjs

@@ -1,2 +1 @@
-import { createSortable } from "./sortable.embedded.mjs";
-export { createSortable };
+export { createSortable } from "./sortable.embedded.mjs";

package/dist/js/{sortable.embedded-DzBKAwSG.d.mts → sortable.embedded-CrEGff9k.d.mts}

@@ -1,4 +1,4 @@
-import { $ as OuiSortable, p as CreateOuiDraggableOptions } from "./movable.model-BHaK_mKw.mjs";
+import { $ as OuiSortable, p as CreateOuiDraggableOptions } from "./movable.model-D9nnPWKk.mjs";
 //#region src/js/sortable/sortable.embedded.d.ts
 /**
  * Creates _(or retrieves)_ a _OuiSortable_ instance for an element
@@ -6,6 +6,6 @@ import { $ as OuiSortable, p as CreateOuiDraggableOptions } from "./movable.mode
  * @param element Element to make sortable
  * @returns _OuiSortable_ instance
  */
-declare function createSortable(element: HTMLElement, options?: CreateOuiDraggableOptions): OuiSortable;
+declare function createSortable(element: Element, options?: CreateOuiDraggableOptions): OuiSortable;
 //#endregion
 export { createSortable as t };

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

@@ -1,4 +1,4 @@
-import { D as SPLITTER_SYMBOL, O as SPLITTER_TAGNAME, n as OuiSplitter } from "../splitter.model-DOLNjLVS.mjs";
+import { D as SPLITTER_SYMBOL, O as SPLITTER_TAGNAME, n as OuiSplitter } from "../splitter.model-C24W6eZ7.mjs";
 //#region src/js/splitter/index.d.ts
 declare global {
   interface HTMLElementTagNameMap {

package/dist/js/splitter/index.mjs

@@ -204,7 +204,7 @@ function onObservation(entries) {
 	if (frame != null) cancelAnimationFrame(frame);
 	frame = requestAnimationFrame(() => {
 		for (const entry of entries) {
-			const splitter = entry.target instanceof OuiSplitterElement || entry.target.hasAttribute(SPLITTER_ATTRIBUTE_HANDLE) || entry.target.hasAttribute(SPLITTER_ATTRIBUTE_SEPARATOR) ? findAncestor(entry.target, SPLITTER_TAGNAME)?.[SPLITTER_SYMBOL] : void 0;
+			const splitter = entry.target instanceof OuiSplitterElement || entry.target.hasAttribute("oui-splitter-handle") || entry.target.hasAttribute("oui-splitter-separator") ? findAncestor(entry.target, SPLITTER_TAGNAME)?.[SPLITTER_SYMBOL] : void 0;
 			if (splitter == null) return;
 			splitter.types = getTypes(splitter, entry.contentRect.width, entry.contentRect.height);
 			setAttribute(splitter.element, SPLITTER_ATTRIBUTE_HORIZONTAL, splitter.types.horizontal ? "" : void 0);

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

@@ -1,2 +1,2 @@
-import { A as splitterStyling, C as SPLITTER_NAVIGATION_MAXIMUM_TOTAL, D as SPLITTER_SYMBOL, E as SPLITTER_SELECTOR_HANDLE, O as SPLITTER_TAGNAME, S as SPLITTER_NAVIGATION_MAXIMUM_PERCENTAGE, T as SPLITTER_NAVIGATION_MODIFIER, _ as SPLITTER_KEYS_NEGATIVE, a as OuiSplitterValuesNow, b as SPLITTER_METHODS_CONNECT, c as SPLITTER_ATTRIBUTE_HORIZONTAL, d as SPLITTER_ATTRIBUTE_SEPARATOR, f as SPLITTER_ATTRIBUTE_SIZE, g as SPLITTER_KEYS_HORIZONTAL, h as SPLITTER_KEYS_ALL, i as OuiSplitterValues, k as SPLITTER_VALUE_DECIMALS, l as SPLITTER_ATTRIBUTE_MAX, m as SPLITTER_KEYS_ABSOLUTE, n as OuiSplitter, o as SPLITTER_ATTRIBUTE_ACTIVE, p as SPLITTER_ATTRIBUTE_TYPE, r as OuiSplitterTypes, s as SPLITTER_ATTRIBUTE_HANDLE, t as GenericOuiSplitterElement, u as SPLITTER_ATTRIBUTE_MIN, v as SPLITTER_KEYS_VERTICAL, w as SPLITTER_NAVIGATION_MINIMUM_PERCENTAGE, x as SPLITTER_METHODS_OBSERVE, y as SPLITTER_MESSAGE } from "../splitter.model-DOLNjLVS.mjs";
+import { A as splitterStyling, C as SPLITTER_NAVIGATION_MAXIMUM_TOTAL, D as SPLITTER_SYMBOL, E as SPLITTER_SELECTOR_HANDLE, O as SPLITTER_TAGNAME, S as SPLITTER_NAVIGATION_MAXIMUM_PERCENTAGE, T as SPLITTER_NAVIGATION_MODIFIER, _ as SPLITTER_KEYS_NEGATIVE, a as OuiSplitterValuesNow, b as SPLITTER_METHODS_CONNECT, c as SPLITTER_ATTRIBUTE_HORIZONTAL, d as SPLITTER_ATTRIBUTE_SEPARATOR, f as SPLITTER_ATTRIBUTE_SIZE, g as SPLITTER_KEYS_HORIZONTAL, h as SPLITTER_KEYS_ALL, i as OuiSplitterValues, k as SPLITTER_VALUE_DECIMALS, l as SPLITTER_ATTRIBUTE_MAX, m as SPLITTER_KEYS_ABSOLUTE, n as OuiSplitter, o as SPLITTER_ATTRIBUTE_ACTIVE, p as SPLITTER_ATTRIBUTE_TYPE, r as OuiSplitterTypes, s as SPLITTER_ATTRIBUTE_HANDLE, t as GenericOuiSplitterElement, u as SPLITTER_ATTRIBUTE_MIN, v as SPLITTER_KEYS_VERTICAL, w as SPLITTER_NAVIGATION_MINIMUM_PERCENTAGE, x as SPLITTER_METHODS_OBSERVE, y as SPLITTER_MESSAGE } from "../splitter.model-C24W6eZ7.mjs";
 export { GenericOuiSplitterElement, OuiSplitter, OuiSplitterTypes, OuiSplitterValues, OuiSplitterValuesNow, SPLITTER_ATTRIBUTE_ACTIVE, SPLITTER_ATTRIBUTE_HANDLE, SPLITTER_ATTRIBUTE_HORIZONTAL, SPLITTER_ATTRIBUTE_MAX, SPLITTER_ATTRIBUTE_MIN, SPLITTER_ATTRIBUTE_SEPARATOR, SPLITTER_ATTRIBUTE_SIZE, SPLITTER_ATTRIBUTE_TYPE, SPLITTER_KEYS_ABSOLUTE, SPLITTER_KEYS_ALL, SPLITTER_KEYS_HORIZONTAL, SPLITTER_KEYS_NEGATIVE, SPLITTER_KEYS_VERTICAL, SPLITTER_MESSAGE, SPLITTER_METHODS_CONNECT, SPLITTER_METHODS_OBSERVE, SPLITTER_NAVIGATION_MAXIMUM_PERCENTAGE, SPLITTER_NAVIGATION_MAXIMUM_TOTAL, SPLITTER_NAVIGATION_MINIMUM_PERCENTAGE, SPLITTER_NAVIGATION_MODIFIER, SPLITTER_SELECTOR_HANDLE, SPLITTER_SYMBOL, SPLITTER_TAGNAME, SPLITTER_VALUE_DECIMALS, splitterStyling };

package/dist/js/{splitter.model-DOLNjLVS.d.mts → splitter.model-C24W6eZ7.d.mts}

@@ -5,8 +5,8 @@ type GenericOuiSplitterElement = {
 } & HTMLElement;
 type OuiSplitter = {
   element: GenericOuiSplitterElement;
-  handle: HTMLSpanElement;
-  panels: HTMLElement[];
+  handle: Element;
+  panels: Element[];
   rectangle: DOMRect;
   separator: HTMLDivElement;
   types: OuiSplitterTypes;

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

@@ -1,4 +1,4 @@
-import { a as OuiTabsState, c as TABS_SYMBOL, r as OuiTabsEvent } from "../tabs.model-DRBX_JtI.mjs";
+import { a as OuiTabsState, c as TABS_SYMBOL, r as OuiTabsEvent } from "../tabs.model-BHPy7fPo.mjs";
 //#region src/js/tabs/index.d.ts
 declare global {
   interface HTMLElementTagNameMap {
@@ -12,7 +12,7 @@ export declare class OuiTabsElement extends HTMLElement {
   static observedAttributes: string[];
   get active(): number;
   set active(value: number);
-  get panel(): HTMLElement;
+  get panel(): Element;
   get tab(): HTMLButtonElement;
   constructor();
   attributeChangedCallback(name: string, _: string | null, value: string | null): void;

package/dist/js/tabs/index.mjs

@@ -21,7 +21,7 @@ var OuiTabsElement = class extends HTMLElement {
 	}
 	constructor() {
 		super();
-		this[TABS_SYMBOL] = { component: null };
+		this[TABS_SYMBOL] = { component: void 0 };
 	}
 	attributeChangedCallback(name, _, value) {
 		switch (name) {

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

@@ -1,2 +1,2 @@
-import { a as OuiTabsState, c as TABS_SYMBOL, i as OuiTabsPanels, l as TABS_TAGNAME, n as OuiTabsContent, o as OuiTabsStateComponent, r as OuiTabsEvent, s as OuiTabsTabList, t as GenericOuiTabsElement } from "../tabs.model-DRBX_JtI.mjs";
+import { a as OuiTabsState, c as TABS_SYMBOL, i as OuiTabsPanels, l as TABS_TAGNAME, n as OuiTabsContent, o as OuiTabsStateComponent, r as OuiTabsEvent, s as OuiTabsTabList, t as GenericOuiTabsElement } from "../tabs.model-BHPy7fPo.mjs";
 export { GenericOuiTabsElement, OuiTabsContent, OuiTabsEvent, OuiTabsPanels, OuiTabsState, OuiTabsStateComponent, OuiTabsTabList, TABS_SYMBOL, TABS_TAGNAME };

package/dist/js/{tabs.model-DRBX_JtI.d.mts → tabs.model-BHPy7fPo.d.mts}

@@ -1,4 +1,4 @@
-import { d as OuiNavigable, h as OuiNavigableOrientation } from "./navigable.model-BPOM8DZk.mjs";
+import { d as OuiNavigable, h as OuiNavigableOrientation } from "./navigable.model-BqoR6iBv.mjs";
 //#region src/js/tabs/tabs.model.d.ts
 type GenericOuiTabsElement = {
   [TABS_SYMBOL]: OuiTabsState;

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

@@ -1,4 +1,4 @@
-import { d as OuiNavigable } from "../navigable.model-BPOM8DZk.mjs";
+import { d as OuiNavigable } from "../navigable.model-BqoR6iBv.mjs";
 //#region src/js/toolbar/toolbar.model.d.ts
 export type OuiToolbar = {
   [TOOLBAR_SYMBOL]: OuiNavigable;
@@ -7,5 +7,5 @@ export type OuiToolbar = {
 export declare const TOOLBAR_ATTRIBUTE = "oui-toolbar";
 export declare const TOOLBAR_SYMBOL: unique symbol;
 export declare const TOOLBAR_SELECTOR: string;
-export declare const toolbars: WeakMap<HTMLElement, OuiToolbar>;
+export declare const toolbars: WeakMap<Element, OuiToolbar>;
 //#endregion

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

@@ -1,4 +1,4 @@
-import { n as OuiTooltipState, t as OuiTooltip } from "../tooltip.model-DRkY_BsL.mjs";
+import { n as OuiTooltipState, t as OuiTooltip } from "../tooltip.model-BpNStw5z.mjs";
 //#region src/js/tooltip/index.d.ts
 declare function OuiTooltip(this: OuiTooltip, state: OuiTooltipState): void;
 /**
@@ -7,7 +7,7 @@ declare function OuiTooltip(this: OuiTooltip, state: OuiTooltipState): void;
  * @param element Element to get _OuiTooltip_ for
  * @returns _OuiTooltip_ instance
  */
-export declare function getTooltip(element: HTMLElement): OuiTooltip | undefined;
+export declare function getTooltip(element: Element): OuiTooltip | undefined;
 /**
  * Set the delay before showing the tooltip, in milliseconds
  *

package/dist/js/tooltip/index.mjs

@@ -132,7 +132,7 @@ function onFocusout() {
 	if (activeTooltip == null) return;
 	if (focusTimer != null) clearTimeout(focusTimer);
 	focusTimer = setTimeout(() => {
-		if (activeTooltip == null || document.activeElement == null || findAncestor(document.activeElement, TOOLTIP_SELECTOR) != null) return;
+		if (activeTooltip == null || document.activeElement == null || findAncestor(document.activeElement, "[oui-tooltip]") != null) return;
 		closeTooltip(true, activeTooltip);
 		activeTooltip = void 0;
 	});

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

@@ -1,2 +1,2 @@
-import { a as TOOLTIP_ATTRIBUTE_CONTENT_OPEN, c as TOOLTIP_SYMBOL, i as TOOLTIP_ATTRIBUTE_CONTENT, l as tooltipFloatableOptions, n as OuiTooltipState, o as TOOLTIP_SELECTOR, r as TOOLTIP_ATTRIBUTE, s as TOOLTIP_SELECTOR_CONTENT, t as OuiTooltip, u as tooltips } from "../tooltip.model-DRkY_BsL.mjs";
+import { a as TOOLTIP_ATTRIBUTE_CONTENT_OPEN, c as TOOLTIP_SYMBOL, i as TOOLTIP_ATTRIBUTE_CONTENT, l as tooltipFloatableOptions, n as OuiTooltipState, o as TOOLTIP_SELECTOR, r as TOOLTIP_ATTRIBUTE, s as TOOLTIP_SELECTOR_CONTENT, t as OuiTooltip, u as tooltips } from "../tooltip.model-BpNStw5z.mjs";
 export { OuiTooltip, OuiTooltipState, TOOLTIP_ATTRIBUTE, TOOLTIP_ATTRIBUTE_CONTENT, TOOLTIP_ATTRIBUTE_CONTENT_OPEN, TOOLTIP_SELECTOR, TOOLTIP_SELECTOR_CONTENT, TOOLTIP_SYMBOL, tooltipFloatableOptions, tooltips };

package/dist/js/{tooltip.model-DRkY_BsL.d.mts → tooltip.model-BpNStw5z.d.mts}

@@ -20,8 +20,8 @@ type OuiTooltip = {
   show(): void;
 };
 type OuiTooltipState = {
-  anchor: HTMLElement;
-  elements: HTMLElement[];
+  anchor: Element;
+  elements: Element[];
   floatable: OuiFloatable;
   timer?: number;
 };
@@ -32,6 +32,6 @@ declare const TOOLTIP_SELECTOR: string;
 declare const TOOLTIP_SELECTOR_CONTENT: string;
 declare const TOOLTIP_SYMBOL: unique symbol;
 declare const tooltipFloatableOptions: OuiFloatableOptions;
-declare const tooltips: WeakMap<HTMLElement, OuiTooltip>;
+declare const tooltips: WeakMap<Element, OuiTooltip>;
 //#endregion
 export { TOOLTIP_ATTRIBUTE_CONTENT_OPEN as a, TOOLTIP_SYMBOL as c, TOOLTIP_ATTRIBUTE_CONTENT as i, tooltipFloatableOptions as l, OuiTooltipState as n, TOOLTIP_SELECTOR as o, TOOLTIP_ATTRIBUTE as r, TOOLTIP_SELECTOR_CONTENT as s, OuiTooltip as t, tooltips as u };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.40.0",
+	"version": "0.42.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -109,7 +109,7 @@
 		"watch": "concurrently \"cd ./demo/public && php -qS localhost:4567 \" \"vp run postcss:watch\" \"vp run css:watch\" \"vp run tsdown\""
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.216",
+		"@oscarpalmer/atoms": "^0.220",
 		"@oscarpalmer/toretto": "^0.56"
 	},
 	"devDependencies": {
@@ -120,7 +120,7 @@
 		"postcss-cli": "^12",
 		"postcss-input-range": "^6",
 		"postcss-scss": "^4",
-		"sass": "^1.105",
+		"sass": "^1.106",
 		"stylelint": "^17.16",
 		"stylelint-config-standard-scss": "^17",
 		"tsdown": "^0.23",