@oscarpalmer/oui 0.20.0 → 0.22.0

package/dist/js/popover.mjs

@@ -1,5 +1,5 @@
-import { Floatable } from "./floatable.mjs";
 import { createFocusTrap } from "./focus-trap/embedded.mjs";
+import { Floatable } from "./internal/floatable.mjs";
 import { getFocusable } from "@oscarpalmer/toretto/focusable";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 //#region src/js/popover.ts
@@ -25,7 +25,7 @@ var OuiPopoverElement = class extends HTMLElement {
 			defaultPosition: "below-start",
 			interactive: true,
 			positionAttribute: "position",
-			preferAbove: false,
+			reusable: false,
 			onAfter: (active) => {
 				if (active) focus(content);
 				else if (!this.#floatable.ignoreFocus) toggle.focus();

package/dist/js/sortable.d.mts

@@ -0,0 +1,2 @@
+import { c as Sortable } from "./movable-BKFgoaOl.mjs";
+export { Sortable };

package/dist/js/sortable.mjs

@@ -0,0 +1,243 @@
+import { attributable } from "./internal/attributable.mjs";
+import { Draggable, addDraggable, removeDraggable } from "./internal/draggable.mjs";
+import { getPosition } from "@oscarpalmer/toretto/event";
+import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
+import { createElement } from "@oscarpalmer/toretto/create";
+//#region src/js/sortable.ts
+var Sortable = class extends Draggable {
+	connections;
+	origin;
+	get dragged() {
+		return getDragPlaceholder();
+	}
+	constructor(element) {
+		super("sort", element, {
+			container: {
+				attribute: ATTRIBUTE_CONTAINER,
+				map: CONTAINERS
+			},
+			direction: { attribute: ATTRIBUTE_DIRECTION },
+			drag: {
+				onBegin,
+				onCancel,
+				onEnd,
+				onMove
+			},
+			position: {
+				getOffset: getOffsetPosition,
+				getOriginal: getOriginalPosition
+			}
+		});
+		this.connections = this.element.getAttribute(ATTRIBUTE_CONNECTIONS);
+	}
+};
+function afterEnd(insert, from, events, elements, position, valid) {
+	elements.origin?.removeAttribute(ATTRIBUTE_ORIGIN);
+	from.origin = void 0;
+	resetPlaceholders();
+	if (!valid || events.some((event) => event.defaultPrevented)) return;
+	if (insert !== "insert") {
+		elements.target.append(elements.origin);
+		return;
+	}
+	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;
+	elements.target?.insertAdjacentElement(insertion, elements.origin);
+	document.body.removeAttribute(ATTRIBUTE_ACTIVE);
+}
+function getDragPlaceholder() {
+	placeholder.drag.default ??= createElement("div");
+	return placeholder.drag.custom ?? placeholder.drag.default;
+}
+function getOffsetPosition(_, draggable, element, position) {
+	const rectangle = element.getBoundingClientRect();
+	return {
+		x: draggable.horizontal ? 0 : position.x - rectangle.left,
+		y: draggable.vertical ? 0 : position.y - rectangle.top
+	};
+}
+function getOriginalPosition(_, __, position) {
+	return position;
+}
+function getPositionPlaceholder(sortable) {
+	placeholder.position ??= createElement("div");
+	placeholder.position.setAttribute(ATTRIBUTE_PLACEHOLDER_POSITION, "");
+	if (sortable.origin != null) placeholder.position.style.setProperty("--placeholder-height", `${sortable.origin.getBoundingClientRect().height}px`);
+	return placeholder.position;
+}
+function onBegin(_, state, draggable, element) {
+	const sortable = draggable;
+	sortable.origin = element;
+	setPlaceholder(state, sortable, element);
+	element.setAttribute(ATTRIBUTE_ORIGIN, "");
+	document.body.setAttribute(ATTRIBUTE_ACTIVE, "");
+}
+function onCancel(_, draggable) {
+	const sortable = draggable;
+	const { origin } = sortable;
+	origin?.removeAttribute(ATTRIBUTE_ORIGIN);
+	document.body.removeAttribute(ATTRIBUTE_ACTIVE);
+	resetPlaceholders();
+	sortable.origin = void 0;
+}
+function onEnd(event, state, draggable, reset) {
+	const from = draggable;
+	const { origin } = from;
+	const position = getPosition(event) ?? {
+		x: 0,
+		y: 0
+	};
+	const target = getElementFromPosition(position)[0];
+	let element = findAncestor(target, SELECTOR_ITEM);
+	if (element?.hasAttribute(ATTRIBUTE_PLACEHOLDER_POSITION)) if (element.getAttribute(ATTRIBUTE_PLACEHOLDER_POSITION) === "after") element = element.previousElementSibling;
+	else element = element.nextElementSibling;
+	let insert = "insert";
+	let to;
+	if (element == null) {
+		element = findAncestor(target, SELECTOR);
+		to = state.instances.get(element)?.sortable;
+		insert = element == null ? void 0 : element.children.length === 0 ? "append" : "prepend";
+	} else to = state.instances.get(element.parentElement)?.sortable;
+	const valid = insert != null && validatePosition(state, from, to, position);
+	const options = {
+		detail: valid ? {
+			from: {
+				element: origin,
+				position: { ...state.original }
+			},
+			to: {
+				element,
+				position: { ...position }
+			}
+		} : void 0,
+		bubbles: false,
+		cancelable: true
+	};
+	const fromEvent = new CustomEvent(EVENT_END, options);
+	const toEvent = new CustomEvent(EVENT_END, options);
+	from.element.dispatchEvent(fromEvent);
+	if (from !== to) to?.element.dispatchEvent(toEvent);
+	setTimeout(() => {
+		afterEnd(insert, from, [fromEvent, toEvent], {
+			origin,
+			target: element
+		}, position, valid);
+		reset();
+	});
+}
+function onMove(event, state, draggable, position) {
+	const from = draggable;
+	const fromElement = from.origin;
+	const toElement = findAncestor(event, SELECTOR_ITEM);
+	let to;
+	if (toElement == null) to = state.instances.get(findAncestor(event, SELECTOR))?.sortable;
+	else to = state.instances.get(toElement.parentElement)?.sortable;
+	if (!validatePosition(state, from, to, position.original)) return;
+	const placeholder = getPositionPlaceholder(from);
+	if (toElement != null && toElement !== fromElement) {
+		const { height, top } = toElement.getBoundingClientRect();
+		let place;
+		if (position.calculated.y < top + height / 2) {
+			place = "before";
+			toElement.insertAdjacentElement(INSERT_BEFORE, placeholder);
+		} else {
+			place = "after";
+			toElement.insertAdjacentElement(INSERT_AFTER, placeholder);
+		}
+		placeholder.setAttribute(ATTRIBUTE_PLACEHOLDER_POSITION, place);
+	} else placeholder.remove();
+	return {
+		from: {
+			element: fromElement,
+			position: { ...state.original }
+		},
+		to: {
+			element: toElement,
+			position: { ...position.calculated }
+		}
+	};
+}
+function resetPlaceholders() {
+	placeholder.drag.custom?.remove();
+	placeholder.drag.default?.remove();
+	placeholder.position?.remove();
+	placeholder.drag.custom = void 0;
+}
+function setPlaceholder(state, sortable, origin) {
+	const element = getDragPlaceholder();
+	placeholder.drag.default.innerHTML = "";
+	updatePlaceholder(sortable, element);
+	const event = new CustomEvent(EVENT_PLACEHOLDER, {
+		cancelable: true,
+		detail: {
+			origin,
+			parent: sortable.element,
+			placeholder: element,
+			create: (value) => {
+				if (!(value instanceof HTMLElement)) return;
+				placeholder.drag.custom = value;
+				updatePlaceholder(sortable, value);
+				state.element = {
+					rectangle: value.getBoundingClientRect(),
+					node: value
+				};
+			}
+		}
+	});
+	sortable.element.dispatchEvent(event);
+	setTimeout(() => {
+		if (!event.defaultPrevented && placeholder.drag.custom == null) placeholder.drag.default?.append(element.cloneNode(true));
+		document.body.append(placeholder.drag.custom ?? placeholder.drag.default ?? "");
+	});
+}
+function updatePlaceholder(sortable, element) {
+	element.style.position = "fixed";
+	element.setAttribute(ATTRIBUTE_PLACEHOLDER_DRAG, "");
+	if (sortable.horizontal) element.setAttribute(ATTRIBUTE_HORIZONTAL, "");
+	else element.removeAttribute(ATTRIBUTE_HORIZONTAL);
+	if (sortable.vertical) element.setAttribute(ATTRIBUTE_VERTICAL, "");
+	else element.removeAttribute(ATTRIBUTE_VERTICAL);
+}
+function validatePosition(_, from, to, position) {
+	let valid = true;
+	const rectangle = from.origin?.getBoundingClientRect();
+	if (rectangle != null && !from.horizontal) valid = position.x >= rectangle.left && position.x <= rectangle.right;
+	if (valid && rectangle != null && !from.vertical) valid = position.y >= rectangle.top && position.y <= rectangle.bottom;
+	if (valid && from.connections != null) valid = to?.element.matches(from.connections) ?? true;
+	if (valid && to?.connections != null) valid = from.element.matches(to.connections);
+	return valid;
+}
+const ATTRIBUTE = "oui-sortable";
+const ATTRIBUTE_ACTIVE = `${ATTRIBUTE}-active`;
+const ATTRIBUTE_CONNECTIONS = `${ATTRIBUTE}-connections`;
+const ATTRIBUTE_CONTAINER = `${ATTRIBUTE}-container`;
+const ATTRIBUTE_DIRECTION = `${ATTRIBUTE}-direction`;
+const ATTRIBUTE_HORIZONTAL = `${ATTRIBUTE}-horizontal`;
+const ATTRIBUTE_ORIGIN = `${ATTRIBUTE}-origin`;
+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 SELECTOR = `[${ATTRIBUTE}]`;
+const SELECTOR_ITEM = `[${ATTRIBUTE}] > *`;
+const bound = {
+	constructor: Sortable,
+	property: "sortable"
+};
+const placeholder = {
+	drag: {
+		custom: void 0,
+		default: void 0
+	},
+	position: void 0
+};
+attributable(ATTRIBUTE, addDraggable.bind(bound), removeDraggable.bind(bound));
+//#endregion
+export { Sortable };

package/dist/js/splitter.mjs

@@ -1,10 +1,10 @@
+import { clamp } from "@oscarpalmer/atoms/number";
 import { getPosition, on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
-import { clamp } from "@oscarpalmer/atoms/number";
-import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
-import { round } from "@oscarpalmer/atoms/math";
 import { toggleStyles } from "@oscarpalmer/toretto/style";
 import supportsTouch from "@oscarpalmer/toretto/touch";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { round } from "@oscarpalmer/atoms/math";
 //#region src/js/splitter.ts
 var OuiSplitterElement = class extends HTMLElement {
 	static observedAttributes = [
@@ -216,7 +216,7 @@ function onObservation(entries) {
 	});
 }
 function onPointerdown(event) {
-	if (event.type === "mousedown" && supportsTouch.value || event.type === "touchstart" && !supportsTouch.value) return;
+	if (supportsTouch.value ? event.type === "mousedown" : event.type === "touchstart") return;
 	splitter = MAPPED_ELEMENTS.get(findAncestor(event, SELECTOR_HANDLE));
 	if (splitter == null) return;
 	if (supportsTouch.value) event.preventDefault();

package/dist/js/tooltip.d.mts

@@ -1,4 +1,4 @@
 //#region src/js/tooltip.d.ts
-declare function setDelay(value: number): void;
+declare function setTooltipDelay(open?: number, close?: number): void;
 //#endregion
-export { setDelay };
+export { setTooltipDelay };

package/dist/js/tooltip.mjs

@@ -1,93 +1,78 @@
-import { attributable } from "./attributable.mjs";
-import { Floatable } from "./floatable.mjs";
+import { attributable } from "./internal/attributable.mjs";
+import { Floatable } from "./internal/floatable.mjs";
 import { on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 //#region src/js/tooltip.ts
 var Tooltip = class {
-	attributes;
+	elements;
 	floatable;
-	timer;
-	constructor(anchor, content) {
-		this.attributes = content.attributes;
+	constructor(anchor, elements) {
+		const content = getContent();
+		this.elements = elements;
 		this.floatable = new Floatable({
 			anchor,
-			content: content.element,
-			defaultPosition: "vertical",
+			content,
+			defaultPosition: "above",
 			interactive: false,
-			preferAbove: true,
-			positionAttribute: ATTRIBUTE_POSITION
+			positionAttribute: ATTRIBUTE_POSITION,
+			reusable: true,
+			onAfter: (active) => {
+				if (active) {
+					content.innerHTML = "";
+					content.append(...this.elements);
+				}
+				if (active || TOOLTIPS_ACTIVE.size > 0) return;
+				content.removeAttribute(ATTRIBUTE_CONTENT_ACTIVE);
+				contentTimer = setTimeout(() => {
+					content.innerHTML = "";
+					content.remove();
+				}, delayClose);
+			}
 		});
-		anchor.insertAdjacentElement("afterend", content.element);
-		TOOLTIPS_ALL.set(content.element, this);
 	}
 	destroy() {
-		const { attributes, floatable } = this;
+		const { floatable } = this;
 		TOOLTIPS_ACTIVE.delete(this);
+		TOOLTIPS_PENDING.delete(this);
 		TOOLTIPS_ALL.delete(floatable.options.anchor);
 		TOOLTIPS_ALL.delete(floatable.options.content);
-		reset(floatable.options.anchor, attributes);
-		floatable.options.content.remove();
 		floatable.destroy();
-		this.attributes = void 0;
+		this.elements = [];
 		this.floatable = void 0;
 	}
 };
 function addTooltip(anchor) {
 	if (TOOLTIPS_ALL.has(anchor)) return;
-	const content = getContent(anchor);
-	if (content != null) TOOLTIPS_ALL.set(anchor, new Tooltip(anchor, content));
+	const elements = getElements(anchor);
+	if (elements != null) TOOLTIPS_ALL.set(anchor, new Tooltip(anchor, elements));
 }
-function closeTooltips(next) {
-	const tooltips = [...TOOLTIPS_ACTIVE];
-	for (const active of tooltips) {
-		if (active === next) continue;
-		if (active.timer != null) clearTimeout(active.timer);
-		active.floatable?.options.content.removeAttribute("oui-tooltip-content-active");
-		requestAnimationFrame(() => {
-			active.timer = setTimeout(() => {
-				TOOLTIPS_ACTIVE.delete(active);
-				active.floatable?.toggle(false);
-			}, delay);
-		});
-	}
-}
-function getContent(anchor) {
-	const attributes = {
-		ariaDescribedby: anchor.getAttribute("aria-describedby"),
-		ariaLabelledBy: anchor.getAttribute("aria-labelledby")
-	};
-	const wrapper = getWrapper(anchor);
-	const labelledElements = getElements(attributes.ariaLabelledBy);
-	if (labelledElements.length > 0) {
-		anchor.setAttribute("aria-labelledby", wrapper.id);
-		for (const element of labelledElements) wrapper.append(element);
-		return {
-			attributes,
-			element: wrapper
-		};
+function closeTooltips(current) {
+	const pending = [...TOOLTIPS_PENDING];
+	for (const item of pending) {
+		if (item === current) continue;
+		TOOLTIPS_PENDING.delete(item);
 	}
-	const describedElements = getElements(attributes.ariaDescribedby);
-	if (describedElements.length > 0) {
-		anchor.setAttribute("aria-describedby", wrapper.id);
-		for (const element of describedElements) wrapper.append(element);
-		return {
-			attributes,
-			element: wrapper
-		};
+	const active = [...TOOLTIPS_ACTIVE];
+	for (const item of active) {
+		if (item === current) continue;
+		TOOLTIPS_ACTIVE.delete(item);
+		item.floatable.toggle(false);
 	}
-	let content = anchor.getAttribute("aria-label");
-	if (isNullableOrWhitespace(content)) content = anchor.getAttribute("aria-description");
+}
+function getElements(anchor) {
+	let elements = findElements(anchor.getAttribute(ARIA_LABELLEDBY));
+	if (elements.length > 0) return elements.map((element) => element.cloneNode(true));
+	elements = findElements(anchor.getAttribute(ARIA_DESCRIBEDBY));
+	if (elements.length > 0) return elements.map((element) => element.cloneNode(true));
+	let content = anchor.getAttribute(ARIA_LABEL);
+	if (isNullableOrWhitespace(content)) content = anchor.getAttribute(ARIA_DESCRIPTION);
 	if (isNullableOrWhitespace(content)) return;
 	const paragraph = document.createElement("p");
 	paragraph.textContent = content;
-	wrapper.append(paragraph);
-	return {
-		attributes,
-		element: wrapper
-	};
+	return [paragraph];
 }
-function getElements(attribute) {
+function findElements(attribute) {
 	const ids = attribute?.split(EXPRESSION_WHITESPACE) ?? [];
 	const elements = [];
 	for (const id of ids) {
@@ -101,19 +86,20 @@ function getElements(attribute) {
 	}
 	return elements;
 }
-function getWrapper(anchor) {
-	const wrapper = document.createElement("div");
-	wrapper.setAttribute(ATTRIBUTE_CONTENT, "");
-	wrapper.className = anchor.getAttribute(ATTRIBUTE_CLASS) ?? "";
-	wrapper.hidden = true;
-	wrapper.id = `${SELECTOR}-${++index}`;
-	wrapper.role = "tooltip";
-	wrapper.tabIndex = -1;
-	return wrapper;
+function getContent() {
+	if (contentElement != null) return contentElement;
+	contentElement = document.createElement("div");
+	contentElement.setAttribute(ATTRIBUTE_CONTENT, "");
+	contentElement.role = "tooltip";
+	contentElement.tabIndex = -1;
+	return contentElement;
 }
 function onActivate(event) {
 	onToggle(event, true);
 }
+function onChange() {
+	if (TOOLTIPS_ACTIVE.size === 0) return;
+}
 function onClick(event) {
 	if (findAncestor(event, SELECTOR_CONTENT) != null) event.stopPropagation();
 }
@@ -122,55 +108,67 @@ function onDeactivate(event) {
 }
 function onToggle(event, activate) {
 	if (toggle != null) cancelAnimationFrame(toggle);
+	if (findAncestor(event, SELECTOR_CONTENT) != null) {
+		if (contentTimer != null) clearTimeout(contentTimer);
+		return;
+	}
 	toggle = requestAnimationFrame(() => {
 		toggle = void 0;
-		const element = findAncestor(event, SELECTOR_FULL);
+		const element = findAncestor(event, SELECTOR);
 		const tooltip = TOOLTIPS_ALL.get(element);
-		if (TOOLTIPS_ACTIVE.size > 0) closeTooltips(tooltip);
-		if (tooltip == null || tooltip.floatable.options.content.hasAttribute("oui-tooltip-content-active") === activate) return;
+		if (TOOLTIPS_ACTIVE.size > 0 || TOOLTIPS_PENDING.size > 0) closeTooltips(tooltip);
+		if (tooltip == null || tooltip.floatable.active === activate) return;
 		if (activate) {
-			if (tooltip.timer != null) clearTimeout(tooltip.timer);
-			TOOLTIPS_ACTIVE.add(tooltip);
-			tooltip.floatable.toggle(true);
-			requestAnimationFrame(() => {
-				tooltip.floatable.options.content.setAttribute("oui-tooltip-content-active", "");
-			});
+			clearTimeout(contentTimer);
+			TOOLTIPS_PENDING.add(tooltip);
+			contentTimer = setTimeout(() => {
+				TOOLTIPS_ACTIVE.add(tooltip);
+				TOOLTIPS_PENDING.delete(tooltip);
+				tooltip.floatable.options.content.style.positionAnchor = tooltip.floatable.options.anchor.style.anchorName;
+				tooltip.floatable.toggle(true);
+				setTimeout(() => {
+					tooltip.floatable.options.content.setAttribute(ATTRIBUTE_CONTENT_ACTIVE, "");
+				});
+			}, delayOpen);
 			return;
 		}
-		tooltip.floatable.options.content.removeAttribute("oui-tooltip-content-active");
-		tooltip.timer ??= setTimeout(() => {
-			TOOLTIPS_ACTIVE.delete(tooltip);
-			tooltip.floatable.toggle(false);
-		}, delay);
+		TOOLTIPS_ACTIVE.delete(tooltip);
+		tooltip.floatable.toggle(false);
 	});
 }
 function removeTooltip(element) {
 	if (!element.hasAttribute(ATTRIBUTE_CONTENT)) TOOLTIPS_ALL.get(element)?.destroy();
 }
-function reset(anchor, attributes) {
-	if (attributes.ariaDescribedby == null) anchor.removeAttribute("aria-describedby");
-	else anchor.setAttribute("aria-describedby", attributes.ariaDescribedby);
-}
-function setDelay(value) {
-	delay = typeof value === "number" && value >= 0 ? value : delay;
+function setTooltipDelay(open, close) {
+	delayClose = typeof close === "number" && close >= 0 ? close : delayClose;
+	delayOpen = typeof open === "number" && open >= 0 ? open : delayOpen;
 }
-const SELECTOR = "oui-tooltip";
-const ATTRIBUTE_CLASS = `${SELECTOR}-class`;
-const ATTRIBUTE_CONTENT = `${SELECTOR}-content`;
-const ATTRIBUTE_POSITION = `${SELECTOR}-position`;
+const ARIA_DESCRIBEDBY = "aria-describedby";
+const ARIA_DESCRIPTION = "aria-description";
+const ARIA_LABEL = "aria-label";
+const ARIA_LABELLEDBY = "aria-labelledby";
+const ATTRIBUTE = "oui-tooltip";
+const ATTRIBUTE_CONTENT = `${ATTRIBUTE}-content`;
+const ATTRIBUTE_CONTENT_ACTIVE = `${ATTRIBUTE_CONTENT}-active`;
+const ATTRIBUTE_POSITION = `${ATTRIBUTE}-position`;
+const SELECTOR = `[${ATTRIBUTE}]`;
 const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
-const SELECTOR_FULL = `[${SELECTOR}], [${ATTRIBUTE_CONTENT}]`;
 const EXPRESSION_WHITESPACE = /\s+/;
 const TOOLTIPS_ACTIVE = /* @__PURE__ */ new Set();
 const TOOLTIPS_ALL = /* @__PURE__ */ new WeakMap();
-let delay = 500;
-let index = 0;
+const TOOLTIPS_PENDING = /* @__PURE__ */ new Set();
+let contentElement;
+let contentTimer;
+let delayClose = 250;
+let delayOpen = 500;
 let toggle;
-attributable(SELECTOR, addTooltip, removeTooltip);
+attributable(ATTRIBUTE, addTooltip, removeTooltip);
 on(document, "click", onClick, { capture: true });
 on(document, "focusin", onActivate);
 on(document, "focusout", onDeactivate);
 on(document, "mousemove", onActivate);
+on(window, "resize", onChange);
+on(document, "scroll", onChange);
 on(document, "touchstart", onActivate);
 //#endregion
-export { setDelay };
+export { setTooltipDelay };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.20.0",
+	"version": "0.22.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -37,10 +37,18 @@
 			"types": "./dist/js/focus-trap/standalone.d.mts",
 			"default": "./dist/js/focus-trap/standalone.mjs"
 		},
+		"./movable": {
+			"types": "./dist/js/movable.d.mts",
+			"default": "./dist/js/movable.mjs"
+		},
 		"./popover": {
 			"types": "./dist/js/popover.d.mts",
 			"default": "./dist/js/popover.mjs"
 		},
+		"./sortable": {
+			"types": "./dist/js/sortable.d.mts",
+			"default": "./dist/js/sortable.mjs"
+		},
 		"./splitter": {
 			"types": "./dist/js/splitter.d.mts",
 			"default": "./dist/js/splitter.mjs"
@@ -51,35 +59,37 @@
 		}
 	},
 	"scripts": {
-		"build": "vp run build:js && vp run build:css",
-		"build:css": "vp run build:postcss && vpx sass ./postcss:./dist/css --no-source-map",
-		"build:postcss": "vpx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss",
-		"build:js": "vpx vp pack",
+		"build": "vp run clean && vp pack && vp run css:build",
+		"clean": "rm -rf ./dist && rm -rf ./postcss",
+		"css:build": "vp run postcss:build && vpx sass ./postcss:./dist/css --no-source-map",
+		"css:watch": "vpx sass ./postcss:./dist/css --no-source-map --watch",
+		"postcss:build": "vpx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss",
+		"postcss:watch": "vpx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss --watch",
 		"test": "vpx vitest --coverage",
-		"tsdown:build": "vpx tsdown -c ./tsdown.config.ts",
-		"tsdown:watch": "vpx tsdown -c ./tsdown.config.ts --watch",
-		"watch:css": "vpx sass ./postcss:./dist/css --no-source-map --watch",
-		"watch:postcss": "vpx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss --watch",
-		"watch:js": "vpx vite build --watch"
+		"tsdown": "vpx tsdown -c ./tsdown.config.ts --watch",
+		"watch": "vp run clean && concurrently \"php -S localhost:3000\" \"vp run postcss:watch\" \"vp run css:watch\" \"vp run tsdown\""
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.170",
-		"@oscarpalmer/toretto": "^0.41"
+		"@oscarpalmer/atoms": "^0.187.2",
+		"@oscarpalmer/toretto": "^0.46"
 	},
 	"devDependencies": {
+		"@oxlint/plugins": "^1.68",
 		"@vitest/coverage-istanbul": "^4.1",
-		"autoprefixer": "^10.4",
-		"jsdom": "^29",
+		"autoprefixer": "^10.5",
+		"concurrently": "^10",
+		"jsdom": "^29.1",
 		"postcss-cli": "^11",
 		"postcss-input-range": "^6",
 		"postcss-scss": "^4",
-		"sass": "^1.98",
-		"stylelint": "^17.6",
+		"sass": "^1.100",
+		"stylelint": "^17.12",
 		"stylelint-config-standard-scss": "^17",
-		"typescript": "^5.9",
+		"tsdown": "^0.22",
+		"typescript": "^6",
 		"vite": "npm:@voidzero-dev/vite-plus-core@latest",
 		"vite-plus": "latest",
 		"vitest": "npm:@voidzero-dev/vite-plus-test@latest"
 	},
 	"packageManager": "npm@11.12.1"
-}
+}