@oscarpalmer/oui 0.21.0 → 0.22.0

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

@@ -1,2 +1,2 @@
-import { a as DraggableState, i as DraggableBound, n as DragMovePosition, o as addDraggable, r as Draggable, s as removeDraggable } from "../movable-BEo2LbUI.mjs";
+import { a as DraggableState, i as DraggableBound, n as DragMovePosition, o as addDraggable, r as Draggable, s as removeDraggable } from "../movable-BKFgoaOl.mjs";
 export { DragMovePosition, Draggable, DraggableBound, DraggableState, addDraggable, removeDraggable };

package/dist/js/internal/draggable.mjs

@@ -5,6 +5,9 @@ import { toggleStyles } from "@oscarpalmer/toretto/style";
 import supportsTouch from "@oscarpalmer/toretto/touch";
 //#region src/js/internal/draggable.ts
 var Draggable = class {
+	prefix;
+	element;
+	options;
 	container;
 	hasHandles;
 	horizontal = true;

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

@@ -17,10 +17,10 @@ type Options = {
   defaultPosition: Position;
   interactive: boolean;
   positionAttribute: string;
-  preferAbove: boolean;
+  reusable: boolean;
   onAfter?: (active: boolean) => void;
 };
-type Position = 'above' | 'above-end' | 'above-start' | 'below' | 'below-end' | 'below-start' | 'end' | 'end-bottom' | 'end-top' | 'horizontal' | 'horizontal-bottom' | 'horizontal-top' | 'start' | 'start-bottom' | 'start-top' | 'vertical' | 'vertical-end' | 'vertical-start';
+type Position = 'above' | 'above-end' | 'above-start' | 'below' | 'below-end' | 'below-start' | 'end' | 'end-bottom' | 'end-top' | 'start' | 'start-bottom' | 'start-top';
 declare function deactivate(floatable: Floatable): void;
 //#endregion
 export { Floatable, deactivate };

package/dist/js/internal/floatable.mjs

@@ -2,6 +2,7 @@ import { on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 //#region src/js/internal/floatable.ts
 var Floatable = class {
+	options;
 	active = false;
 	disabled = false;
 	frame;
@@ -51,7 +52,7 @@ function activate(floatable) {
 	floatable.active = true;
 	document.body.append(floatable.options.content);
 	floatable.options.content.hidden = false;
-	updatePosition(floatable);
+	setPosition(floatable);
 }
 function closeAbove(element) {
 	const state = getState();
@@ -71,82 +72,30 @@ function closeNonInteractive(state) {
 }
 function deactivate(floatable) {
 	floatable.active = false;
-	floatable.options.content.hidden = true;
-	floatable.options.anchor.insertAdjacentElement(INSERT_AFTEREND, floatable.options.content);
-	floatable.options.onAfter?.(false);
-}
-function getAttribute(position, anchor, top, left) {
-	switch (position) {
-		case "horizontal":
-		case "horizontal-bottom":
-		case "horizontal-top": return position.replace("horizontal", left >= anchor.right ? "right" : "left");
-		case "vertical":
-		case "vertical-end":
-		case "vertical-start": return position.replace("vertical", top >= anchor.bottom ? "bottom" : "top");
-		default: break;
+	if (!floatable.options.reusable) {
+		floatable.options.content.hidden = true;
+		floatable.options.anchor.insertAdjacentElement(INSERT_AFTEREND, floatable.options.content);
 	}
+	floatable.options.onAfter?.(false);
 }
-function getMargin() {
-	try {
-		const fontsize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-		if (Number.isNaN(fontsize)) return 5;
-		const margin = fontsize / 2;
-		return margin < 5 ? 5 : margin;
-	} catch {
-		return 5;
-	}
+function getAnchorName() {
+	index += 1;
+	return `--oui-floatable-anchor-${index}`;
 }
 function getState() {
 	return window._oscarpalmer_oui_floatable;
 }
-function getX(anchor, content, position, margin) {
-	if (position === "above" || position === "below" || position === "vertical") {
-		const center = anchor.left + anchor.width / 2;
-		const width = content.width / 2;
-		if (center + width + margin >= document.body.clientWidth) return document.body.clientWidth - content.width - margin / 2;
-		if (center - width - margin <= 0) return margin / 2;
-		return center - width;
-	}
-	if (position.startsWith("end")) return anchor.right;
-	if (position.startsWith("start")) return anchor.left - content.width;
-	if (position.endsWith("end")) return anchor.right - content.width - margin <= 0 ? margin / 2 : anchor.right - content.width;
-	if (position.endsWith("start")) {
-		if (anchor.left + content.width + margin >= document.body.clientWidth) return document.body.clientWidth - content.width - margin / 2;
-		return anchor.left - margin <= 0 ? margin / 2 : anchor.left;
-	}
-	if (!position.startsWith("horizontal")) return 0;
-	if (anchor.right + content.width + margin >= document.body.clientWidth) return anchor.left - content.width;
-	return anchor.right;
-}
-function getY(anchor, content, position, margin, preferAbove) {
-	if (position === "end" || position === "start" || position === "horizontal") {
-		const center = anchor.top + anchor.height / 2;
-		const height = content.height / 2;
-		if (center + height + margin >= document.body.clientHeight) return document.body.clientHeight - content.height - margin / 2;
-		if (center - height - margin <= 0) return margin / 2;
-		return center - height;
-	}
-	if (position.startsWith("above")) return anchor.top - content.height;
-	if (position.startsWith("below")) return anchor.bottom;
-	if (position.endsWith("bottom")) return anchor.bottom - content.height - margin <= 0 ? margin / 2 : anchor.bottom - content.height;
-	if (position.endsWith("top")) return anchor.top + content.height + margin >= document.body.clientHeight ? document.body.clientHeight - content.height - margin : anchor.top;
-	if (!position.startsWith("vertical")) return 0;
-	if (preferAbove) {
-		if (anchor.top - content.height - margin <= 0 && anchor.bottom + content.height + margin <= document.body.clientHeight) return anchor.bottom;
-		return anchor.top - content.height;
-	}
-	if (anchor.bottom + content.height + margin >= document.body.clientHeight) return anchor.top - content.height;
-	return anchor.bottom;
-}
 function initialize(floatable) {
 	const { anchor, content, interactive } = floatable.options;
 	if (interactive) {
 		anchor.setAttribute(ATTRIBUTE_ANCHOR, "");
 		content.setAttribute(ATTRIBUTE_CONTENT, "");
 	}
-	content.style.position = "fixed";
-	content.style.inset = "0 auto auto 0";
-	content.style.zIndex = "10";
+	const anchorName = getAnchorName();
+	anchor.style.anchorName = anchorName;
+	content.style.position = "absolute";
+	content.style.positionAnchor = anchorName;
+	content.style.positionTry = "normal flip-start";
 	const state = getState();
 	state?.mapped.set(anchor, floatable);
 	state?.mapped.set(content, floatable);
@@ -171,10 +120,13 @@ function onKeyDown(event) {
 	const floatable = state.mapped.get(related);
 	if (floatable != null) floatable.toggle(false);
 }
-function setAttribute(position, anchor, floater, top, left) {
-	let actual;
-	if (/^(horizontal|vertical)/.test(position)) actual = getAttribute(position, anchor, top, left);
-	floater.setAttribute("position", actual ?? position);
+function setPosition(floatable) {
+	let position = floatable.options.anchor.getAttribute(floatable.options.positionAttribute) ?? floatable.options.defaultPosition;
+	if (AREAS[position] == null) position = floatable.options.defaultPosition;
+	const area = AREAS[position];
+	floatable.options.content.style.positionArea = area;
+	floatable.options.content.setAttribute(ATTRIBUTE_POSITION, POSITIONS[area]);
+	floatable.options.onAfter?.(true);
 }
 function stop(floatable) {
 	if (floatable.frame != null) cancelAnimationFrame(floatable.frame);
@@ -192,77 +144,28 @@ function toggle(anchor) {
 	else closeAbove(content);
 	floatable.toggle(!active);
 }
-function updatePosition(floatable) {
-	let position = floatable.options.anchor.getAttribute(floatable.options.positionAttribute)?.trim() ?? floatable.options.defaultPosition;
-	if (!POSITIONS.has(position)) position = floatable.options.defaultPosition;
-	const margin = getMargin();
-	let previousAnchor;
-	let previousContent;
-	let calculated = false;
-	let runOnAfter = false;
-	function run() {
-		const anchor = floatable.options.anchor.getBoundingClientRect();
-		const content = floatable.options.content.getBoundingClientRect();
-		if (calculated) {
-			if (previousAnchor != null && previousContent != null) {
-				if (PROPERTIES.every((property) => anchor[property] === previousAnchor[property]) && PROPERTIES.every((property) => content[property] === previousContent[property])) {
-					floatable.frame = requestAnimationFrame(run);
-					return;
-				}
-			}
-		} else calculated = true;
-		update(anchor, content);
-	}
-	function update(anchor, content) {
-		previousAnchor = anchor;
-		previousContent = content;
-		const left = getX(anchor, content, position, margin);
-		const top = getY(anchor, content, position, margin, floatable.options.preferAbove);
-		setAttribute(position, anchor, floatable.options.content, top, left);
-		if (top + content.height > window.innerHeight) floatable.options.content.style.height = `${window.innerHeight - top}px`;
-		else floatable.options.content.style.height = "";
-		if (left + content.width > window.innerWidth) floatable.options.content.style.width = `${window.innerWidth - left}px`;
-		else floatable.options.content.style.width = "";
-		floatable.options.content.style.transform = `translate3d(${left}px, ${top}px, 0)`;
-		floatable.frame = requestAnimationFrame(run);
-		if (!runOnAfter) {
-			runOnAfter = true;
-			floatable.options.onAfter?.(true);
-		}
-	}
-	floatable.frame = requestAnimationFrame(run);
-}
+const AREAS = {
+	above: "block-start",
+	"above-end": "start span-start",
+	"above-start": "start span-end",
+	below: "block-end",
+	"below-end": "end span-start",
+	"below-start": "end span-end",
+	end: "center end",
+	"end-bottom": "span-start end",
+	"end-top": "span-end end",
+	start: "center start",
+	"start-bottom": "span-start start",
+	"start-top": "span-end start"
+};
 const ATTRIBUTE_ANCHOR = "oui-floatable-anchor";
 const ATTRIBUTE_CONTENT = "oui-floatable-content";
+const ATTRIBUTE_POSITION = "oui-position";
 const INSERT_AFTEREND = "afterend";
-const POSITIONS = new Set([
-	"above",
-	"above-end",
-	"above-start",
-	"below",
-	"below-end",
-	"below-start",
-	"end",
-	"end-bottom",
-	"end-top",
-	"horizontal",
-	"horizontal-bottom",
-	"horizontal-top",
-	"start",
-	"start-bottom",
-	"start-top",
-	"vertical",
-	"vertical-end",
-	"vertical-start"
-]);
-const PROPERTIES = [
-	"bottom",
-	"left",
-	"right",
-	"top"
-];
+const POSITIONS = Object.fromEntries(Object.entries(AREAS).map(([position, area]) => [area, position]));
 const SELECTOR_ALL = `[${ATTRIBUTE_ANCHOR}], [${ATTRIBUTE_CONTENT}]`;
 const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
+let index = 0;
 if (window._oscarpalmer_oui_floatable == null) {
 	Object.defineProperty(window, "_oscarpalmer_oui_floatable", {
 		enumerable: false,

package/dist/js/movable.d.mts

@@ -1,2 +1,2 @@
-import { t as Movable } from "./movable-BEo2LbUI.mjs";
+import { t as Movable } from "./movable-BKFgoaOl.mjs";
 export { Movable };

package/dist/js/popover.mjs

@@ -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

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

package/dist/js/tooltip.d.mts

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

package/dist/js/tooltip.mjs

@@ -5,89 +5,74 @@ 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 setTooltipDelay(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 { setTooltipDelay };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.21.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"
@@ -66,16 +74,16 @@
 		"@oscarpalmer/toretto": "^0.46"
 	},
 	"devDependencies": {
-		"@oxlint/plugins": "^1.67",
+		"@oxlint/plugins": "^1.68",
 		"@vitest/coverage-istanbul": "^4.1",
 		"autoprefixer": "^10.5",
-		"concurrently": "^9.2",
+		"concurrently": "^10",
 		"jsdom": "^29.1",
 		"postcss-cli": "^11",
 		"postcss-input-range": "^6",
 		"postcss-scss": "^4",
 		"sass": "^1.100",
-		"stylelint": "^17.11",
+		"stylelint": "^17.12",
 		"stylelint-config-standard-scss": "^17",
 		"tsdown": "^0.22",
 		"typescript": "^6",
@@ -84,4 +92,4 @@
 		"vitest": "npm:@voidzero-dev/vite-plus-test@latest"
 	},
 	"packageManager": "npm@11.12.1"
-}
+}

package/src/css/mixins.scss

@@ -60,24 +60,20 @@
 	margin: var(--margin-top, 0) 0 0 var(--margin-left, 0);
 	pointer-events: all !important;
 
-	&[position^='above'],
-	&[position^='top'] {
-		--margin-top: -0.5rem;
+	&[oui-position^='above'] {
+		margin: 0 0 0.5em;
 	}
 
-	&[position^='below'],
-	&[position^='bottom'] {
-		--margin-top: 0.5rem;
+	&[oui-position^='below'] {
+		margin: 0.5em 0 0;
 	}
 
-	&[position^='end'],
-	&[position^='right'] {
-		--margin-left: 0.5rem;
+	&[oui-position^='end'] {
+		margin: 0 0 0 0.5em;
 	}
 
-	&[position^='left'],
-	&[position^='start'] {
-		--margin-left: -0.5rem;
+	&[oui-position^='start'] {
+		margin: 0 0.5em 0 0;
 	}
 }
 

package/src/css/popover.scss

@@ -6,7 +6,7 @@
 	padding: 1rem;
 	overscroll-behavior: contain;
 	background-color: var(--oui-absolute);
-	border-radius: 0.5rem;
+	border-radius: 0.25rem;
 
 	&:focus {
 		outline: none;