@oscarpalmer/oui 0.26.1 → 0.27.0

package/dist/js/{sortable.mjs → sortable/sortable.embedded.mjs}

@@ -1,18 +1,13 @@
-import { attributable } from "./internal/attributable.mjs";
-import { OuiDraggable, addDraggable, removeDraggable } from "./internal/draggable.mjs";
+import { attributable } from "../internal/attributable.mjs";
+import { OuiDraggable, addDraggable, getDraggableStates, removeDraggable } from "../internal/draggable.mjs";
 import { getPosition } from "@oscarpalmer/toretto/event";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
 import { createElement } from "@oscarpalmer/toretto/create";
-//#region src/js/sortable.ts
+//#region src/js/sortable/sortable.embedded.ts
 var OuiSortable = class extends OuiDraggable {
-	connections;
-	origin;
-	get dragged() {
-		return getDragPlaceholder();
-	}
-	constructor(element) {
-		super("sort", element, {
+	constructor(element, options) {
+		super("sortable", "sort", ATTRIBUTE, element, {
 			container: {
 				attribute: ATTRIBUTE_CONTAINER,
 				map: CONTAINERS
@@ -24,17 +19,19 @@ var OuiSortable = class extends OuiDraggable {
 				onEnd,
 				onMove
 			},
+			input: options,
 			position: {
 				getOffset: getOffsetPosition,
 				getOriginal: getOriginalPosition
-			}
-		});
-		this.connections = this.element.getAttribute(ATTRIBUTE_CONNECTIONS);
+			},
+			getDragged: getDragPlaceholder,
+			getOrigin: () => (getDraggableStates(element)?.sortable)?.origin
+		}, { connections: element.getAttribute(ATTRIBUTE_CONNECTIONS) });
 	}
 };
 function afterEnd(insert, from, events, elements, position, valid) {
 	elements.origin?.removeAttribute(ATTRIBUTE_ORIGIN);
-	from.origin = void 0;
+	from.state.origin = void 0;
 	resetPlaceholders();
 	if (!valid || events.some((event) => event.defaultPrevented)) return;
 	if (insert !== "insert") {
@@ -49,44 +46,50 @@ function afterEnd(insert, from, events, elements, position, valid) {
 	elements.target?.insertAdjacentElement(insertion, elements.origin);
 	document.body.removeAttribute(ATTRIBUTE_ACTIVE);
 }
+/**
+* Creates _(or retrieves)_ a _OuiSortable_ instance for an element
+*
+* @param element Element to make sortable
+* @returns _OuiSortable_ instance
+*/
+function createSortable(element, options) {
+	if (!isHTMLOrSVGElement(element)) throw new TypeError(MESSAGE);
+	return addSortable(element, options);
+}
 function getDragPlaceholder() {
 	placeholder.drag.default ??= createElement("div");
 	return placeholder.drag.custom ?? placeholder.drag.default;
 }
-function getOffsetPosition(_, draggable, element, position) {
+function getOffsetPosition(_, item, element, position) {
 	const rectangle = element.getBoundingClientRect();
 	return {
-		x: draggable.horizontal ? 0 : position.x - rectangle.left,
-		y: draggable.vertical ? 0 : position.y - rectangle.top
+		x: item.state.horizontal ? 0 : position.x - rectangle.left,
+		y: item.state.vertical ? 0 : position.y - rectangle.top
 	};
 }
 function getOriginalPosition(_, __, position) {
 	return position;
 }
-function getPositionPlaceholder(sortable) {
+function getPositionPlaceholder(item) {
 	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`);
+	if (item.state.origin != null) placeholder.position.style.setProperty("--placeholder-height", `${item.state.origin.getBoundingClientRect().height}px`);
 	return placeholder.position;
 }
-function onBegin(_, state, draggable, element) {
-	const sortable = draggable;
-	sortable.origin = element;
-	setPlaceholder(state, sortable, element);
+function onBegin(_, globals, item, element) {
+	item.state.origin = element;
+	setPlaceholder(globals, item, element);
 	element.setAttribute(ATTRIBUTE_ORIGIN, "");
 	document.body.setAttribute(ATTRIBUTE_ACTIVE, "");
 }
-function onCancel(_, draggable) {
-	const sortable = draggable;
-	const { origin } = sortable;
-	origin?.removeAttribute(ATTRIBUTE_ORIGIN);
+function onCancel(_, item) {
+	item.state.origin?.removeAttribute(ATTRIBUTE_ORIGIN);
 	document.body.removeAttribute(ATTRIBUTE_ACTIVE);
 	resetPlaceholders();
-	sortable.origin = void 0;
+	item.state.origin = void 0;
 }
-function onEnd(event, state, draggable, reset) {
-	const from = draggable;
-	const { origin } = from;
+function onEnd(event, globals, item, reset) {
+	const { origin } = item.state;
 	const position = getPosition(event) ?? {
 		x: 0,
 		y: 0
@@ -96,18 +99,26 @@ function onEnd(event, state, draggable, reset) {
 	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;
+	let toInstance;
+	let toState;
 	if (element == null) {
 		element = findAncestor(target, SELECTOR);
-		to = state.instances.get(element)?.sortable;
+		toInstance = globals.instances.get(element)?.sortable;
+		toState = globals.states.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);
+	} else {
+		toInstance = globals.instances.get(element.parentElement)?.sortable;
+		toState = globals.states.get(element.parentElement)?.sortable;
+	}
+	const valid = insert != null && validatePosition(globals, item, {
+		instance: toInstance,
+		state: toState
+	}, position);
 	const options = {
 		detail: valid ? {
 			from: {
 				element: origin,
-				position: { ...state.original }
+				position: { ...globals.original }
 			},
 			to: {
 				element,
@@ -119,25 +130,34 @@ function onEnd(event, state, draggable, reset) {
 	};
 	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);
+	item.instance.element.dispatchEvent(fromEvent);
+	if (item.instance !== toInstance) toInstance?.element.dispatchEvent(toEvent);
 	setTimeout(() => {
-		afterEnd(insert, from, [fromEvent, toEvent], {
+		afterEnd(insert, item, [fromEvent, toEvent], {
 			origin,
 			target: element
 		}, position, valid);
 		reset();
 	});
 }
-function onMove(event, state, draggable, position) {
-	const from = draggable;
-	const fromElement = from.origin;
+function onMove(event, globals, item, position) {
+	const fromElement = item.state.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);
+	let toInstance;
+	let toState;
+	if (toElement == null) {
+		const element = findAncestor(event, SELECTOR);
+		toInstance = globals.instances.get(element)?.sortable;
+		toState = globals.states.get(element)?.sortable;
+	} else {
+		toInstance = globals.instances.get(toElement.parentElement)?.sortable;
+		toState = globals.states.get(toElement.parentElement)?.sortable;
+	}
+	if (toInstance == null || !validatePosition(globals, item, {
+		instance: toInstance,
+		state: toState
+	}, position.original)) return;
+	const placeholder = getPositionPlaceholder(item);
 	if (toElement != null && toElement !== fromElement) {
 		const { height, top } = toElement.getBoundingClientRect();
 		let place;
@@ -153,7 +173,7 @@ function onMove(event, state, draggable, position) {
 	return {
 		from: {
 			element: fromElement,
-			position: { ...state.original }
+			position: { ...globals.original }
 		},
 		to: {
 			element: toElement,
@@ -167,21 +187,21 @@ function resetPlaceholders() {
 	placeholder.position?.remove();
 	placeholder.drag.custom = void 0;
 }
-function setPlaceholder(state, sortable, origin) {
+function setPlaceholder(state, item, origin) {
 	const element = getDragPlaceholder();
 	placeholder.drag.default.innerHTML = "";
-	updatePlaceholder(sortable, element);
+	updatePlaceholder(item, element);
 	const event = new CustomEvent(EVENT_PLACEHOLDER, {
 		cancelable: true,
 		detail: {
 			origin,
-			parent: sortable.element,
+			parent: item.state.element,
 			placeholder: element,
 			create: (value) => {
 				if (!isHTMLOrSVGElement(value)) return;
 				const element = value;
 				placeholder.drag.custom = element;
-				updatePlaceholder(sortable, element);
+				updatePlaceholder(item, element);
 				state.element = {
 					rectangle: element.getBoundingClientRect(),
 					node: element
@@ -189,27 +209,30 @@ function setPlaceholder(state, sortable, origin) {
 			}
 		}
 	});
-	sortable.element.dispatchEvent(event);
+	item.instance.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) {
+function updatePlaceholder(item, element) {
 	element.style.position = "fixed";
 	element.setAttribute(ATTRIBUTE_PLACEHOLDER_DRAG, "");
-	if (sortable.horizontal) element.setAttribute(ATTRIBUTE_HORIZONTAL, "");
+	const state = getDraggableStates(item.state.element)?.sortable;
+	if (state == null) return;
+	if (state.horizontal) element.setAttribute(ATTRIBUTE_HORIZONTAL, "");
 	else element.removeAttribute(ATTRIBUTE_HORIZONTAL);
-	if (sortable.vertical) element.setAttribute(ATTRIBUTE_VERTICAL, "");
+	if (state.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);
+	const rectangle = from.state.origin?.getBoundingClientRect();
+	const fromState = getDraggableStates(from.state.element)?.sortable;
+	if (rectangle != null && !(fromState?.horizontal ?? true)) valid = position.x >= rectangle.left && position.x <= rectangle.right;
+	if (valid && rectangle != null && !(fromState?.vertical ?? true)) valid = position.y >= rectangle.top && position.y <= rectangle.bottom;
+	if (valid && from.state.connections != null) valid = to?.state.element.matches(from.state.connections) ?? true;
+	if (valid && to?.state.connections != null) valid = from.state.element.matches(to.state.connections);
 	return valid;
 }
 const ATTRIBUTE = "oui-sortable";
@@ -227,6 +250,7 @@ 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}] > *`;
 const bound = {
@@ -240,6 +264,7 @@ const placeholder = {
 	},
 	position: void 0
 };
-attributable(ATTRIBUTE, addDraggable.bind(bound), removeDraggable.bind(bound));
+const addSortable = addDraggable.bind(bound);
+attributable(ATTRIBUTE, addSortable, removeDraggable.bind(bound));
 //#endregion
-export { OuiSortable };
+export { OuiSortable, createSortable };

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

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

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

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

package/dist/js/splitter.mjs

@@ -282,11 +282,11 @@ const ATTRIBUTE_ACTIVE = `${SELECTOR}-active`;
 const ATTRIBUTE_HANDLE = `${SELECTOR}-handle`;
 const ATTRIBUTE_HORIZONTAL = `${SELECTOR}-horizontal`;
 const ATTRIBUTE_SEPARATOR = `${SELECTOR}-separator`;
-const KEYS_ABSOLUTE = new Set(["End", "Home"]);
-const KEYS_HORIZONTAL = new Set(["ArrowDown", "ArrowUp"]);
-const KEYS_NEGATIVE = new Set(["ArrowLeft", "ArrowUp"]);
-const KEYS_VERTICAL = new Set(["ArrowLeft", "ArrowRight"]);
-const KEYS_ALL = new Set([
+const KEYS_ABSOLUTE = /* @__PURE__ */ new Set(["End", "Home"]);
+const KEYS_HORIZONTAL = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp"]);
+const KEYS_NEGATIVE = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
+const KEYS_VERTICAL = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight"]);
+const KEYS_ALL = /* @__PURE__ */ new Set([
 	...KEYS_ABSOLUTE,
 	...KEYS_HORIZONTAL,
 	...KEYS_VERTICAL

package/dist/js/toolbar.mjs

@@ -88,17 +88,17 @@ const KEY_ARROW_DOWN = "ArrowDown";
 const KEY_ARROW_RIGHT = "ArrowRight";
 const KEY_END = "End";
 const KEY_HOME = "Home";
-const KEYS_ABSOLUTE = new Set([KEY_END, KEY_HOME]);
-const KEYS_HORIZONTAL = new Set([KEY_ARROW_RIGHT, "ArrowLeft"]);
-const KEYS_VERTICAL = new Set([KEY_ARROW_DOWN, "ArrowUp"]);
-const KEYS_ALL = new Set([
+const KEYS_ABSOLUTE = /* @__PURE__ */ new Set([KEY_END, KEY_HOME]);
+const KEYS_HORIZONTAL = /* @__PURE__ */ new Set([KEY_ARROW_RIGHT, "ArrowLeft"]);
+const KEYS_VERTICAL = /* @__PURE__ */ new Set([KEY_ARROW_DOWN, "ArrowUp"]);
+const KEYS_ALL = /* @__PURE__ */ new Set([
 	...KEYS_ABSOLUTE,
 	...KEYS_HORIZONTAL,
 	...KEYS_VERTICAL
 ]);
-const KEYS_NEXT = new Set([KEY_ARROW_DOWN, KEY_ARROW_RIGHT]);
+const KEYS_NEXT = /* @__PURE__ */ new Set([KEY_ARROW_DOWN, KEY_ARROW_RIGHT]);
 const ORIENTATION_HORIZONTAL = "horizontal";
-const ORIENTATIONS = new Set([ORIENTATION_HORIZONTAL, "vertical"]);
+const ORIENTATIONS = /* @__PURE__ */ new Set([ORIENTATION_HORIZONTAL, "vertical"]);
 const PROPERTY_DISABLED = "disabled";
 const SELECTOR = `[${ATTRIBUTE}-item]`;
 const instances = /* @__PURE__ */ new WeakMap();

package/dist/js/tooltip.d.mts

@@ -1,4 +1,4 @@
-import { n as OuiFloatable } from "./embedded-CSOh5njI.mjs";
+import { i as OuiFloatable } from "./floatable.embedded-YxGwzgbE.mjs";
 
 //#region src/js/tooltip.d.ts
 declare class OuiTooltip {
@@ -23,7 +23,7 @@ declare class OuiTooltip {
 }
 type OuiTooltipState = {
   anchor: HTMLElement;
-  content: HTMLElement;
+  elements: HTMLElement[];
   floatable: OuiFloatable;
   timer?: number;
   tooltip: OuiTooltip;

package/dist/js/tooltip.mjs

@@ -1,4 +1,4 @@
-import { createEmbeddedFloatable } from "./floatable/embedded.mjs";
+import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
 import { attributable } from "./internal/attributable.mjs";
 import { on } from "@oscarpalmer/toretto/event";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
@@ -12,7 +12,7 @@ var OuiTooltip = class {
 	* Is the tooltip open?
 	*/
 	get open() {
-		return this.#state.content.checkVisibility();
+		return this === activeTooltip && content.checkVisibility();
 	}
 	/**
 	* Open or close the tooltip
@@ -39,52 +39,50 @@ var OuiTooltip = class {
 	}
 };
 function activate(event, focus) {
-	const anchor = findAncestor(event, SELECTOR);
-	const content = findAncestor(event, SELECTOR_CONTENT);
-	if (anchor == null && content == null) {
+	const targetAnchor = findAncestor(event, SELECTOR);
+	const targetContent = findAncestor(event, SELECTOR_CONTENT);
+	if (targetAnchor == null && targetContent == null) {
 		if (!focused) {
-			closeTooltip(activeState);
+			closeTooltip(true, activeState);
 			activeState = void 0;
 			activeTooltip = void 0;
 		}
 		return;
 	}
-	const state = states.get(anchor ?? content);
+	const state = states.get(targetAnchor ?? targetContent);
 	if (state == null || state.tooltip === activeTooltip) return;
 	const shouldDelay = activeTooltip == null;
-	closeTooltip(activeState);
+	closeTooltip(false, activeState);
 	activeState = state;
 	activeTooltip = state.tooltip;
 	focused = focus;
 	state.timer = setTimeout(() => {
-		state.content.showPopover({ source: state.anchor });
+		content.innerHTML = "";
+		content.append(...state.elements);
+		state.floatable.show();
 		setTimeout(() => {
 			state.floatable.update();
-			state.content.setAttribute(ATTRIBUTE_CONTENT_OPEN, "");
 		});
 	}, shouldDelay ? delay : 0);
 }
 function addTooltip(element) {
 	if (!states.has(element)) createTooltip(element);
 }
-function closeTooltip(state) {
+function closeTooltip(clear, state) {
 	if (state == null) return;
 	if (state.timer != null) clearTimeout(state.timer);
-	state.content?.hidePopover();
-	state.content?.removeAttribute(ATTRIBUTE_CONTENT_OPEN);
+	if (clear) content?.hidePopover();
 }
 function createTooltip(anchor) {
-	const content = getContent(anchor);
-	if (content == null) return;
-	anchor.insertAdjacentElement("afterend", content);
-	states.set(anchor, getState(anchor, content));
+	const elements = getElements(anchor);
+	if (elements == null) return;
+	states.set(anchor, getState(anchor, elements));
 }
 function destroyTooltip(state) {
 	clearTimeout(state.timer);
-	state.content.remove();
 	state.floatable.destroy();
 	state.anchor = void 0;
-	state.content = void 0;
+	state.elements = void 0;
 	state.floatable = void 0;
 	state.tooltip = void 0;
 }
@@ -102,34 +100,31 @@ function findElements(attribute) {
 	}
 	return elements;
 }
-function getContent(anchor) {
-	const elements = getElements(anchor);
-	if (elements == null) return;
+function getContent() {
 	const content = createElement(CONTENT_TAGNAME, {
 		popover: "hint",
 		role: "tooltip",
 		tabIndex: -1
 	});
 	content.setAttribute(ATTRIBUTE_CONTENT, "");
-	content.append(...elements);
 	return content;
 }
 function getElements(anchor) {
 	let elements = findElements(anchor.getAttribute(ARIA_LABELLEDBY));
-	if (elements.length > 0) return elements.map((element) => element.cloneNode(true));
+	if (elements.length > 0) return elements;
 	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;
+	if (elements.length > 0) return elements;
+	let text = anchor.getAttribute(ARIA_LABEL);
+	if (isNullableOrWhitespace(text)) text = anchor.getAttribute(ARIA_DESCRIPTION);
+	if (isNullableOrWhitespace(text)) return;
 	const paragraph = document.createElement("p");
-	paragraph.textContent = content;
+	paragraph.textContent = text;
 	return [paragraph];
 }
-function getState(anchor, content) {
+function getState(anchor, elements) {
 	const state = {
 		anchor,
-		content,
+		elements,
 		floatable: createEmbeddedFloatable(anchor, content, options),
 		tooltip: null
 	};
@@ -153,7 +148,7 @@ function onFocusout() {
 	if (focusTimer != null) clearTimeout(focusTimer);
 	focusTimer = setTimeout(() => {
 		if (activeTooltip == null || document.activeElement == null || findAncestor(document.activeElement, SELECTOR) != null) return;
-		closeTooltip(activeState);
+		closeTooltip(true, activeState);
 		activeState = void 0;
 		activeTooltip = void 0;
 	});
@@ -161,6 +156,10 @@ function onFocusout() {
 function onPointermove(event) {
 	activate(event, false);
 }
+function onToggle(event) {
+	if (event.newState === "open") content.setAttribute(ATTRIBUTE_CONTENT_OPEN, "");
+	else content.removeAttribute(ATTRIBUTE_CONTENT_OPEN);
+}
 function removeTooltip(element) {
 	const state = states.get(element);
 	if (state == null) return;
@@ -187,16 +186,20 @@ const ATTRIBUTE_CONTENT = `${ATTRIBUTE}-content`;
 const ATTRIBUTE_CONTENT_OPEN = `${ATTRIBUTE_CONTENT}-open`;
 const SELECTOR = `[${ATTRIBUTE}]`;
 const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
+const content = getContent();
 const states = /* @__PURE__ */ new WeakMap();
 const options = {
 	attribute: `${ATTRIBUTE}-position`,
-	position: "above"
+	position: "above",
+	reusable: true
 };
 let delay = 500;
 let focused = false;
 let activeState;
 let activeTooltip;
 let focusTimer;
+document.body.append(content);
+on(content, "toggle", onToggle);
 on(document, "focusin", onFocusin);
 on(document, "focusout", onFocusout);
 on(document, "pointermove", onPointermove);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.26.1",
+	"version": "0.27.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -38,24 +38,24 @@
 			"default": "./dist/js/dialog.mjs"
 		},
 		"./floatable": {
-			"types": "./dist/js/floatable/standalone.d.mts",
-			"default": "./dist/js/floatable/standalone.mjs"
+			"types": "./dist/js/floatable/floatable.standalone.d.mts",
+			"default": "./dist/js/floatable/floatable.standalone.mjs"
 		},
 		"./focus-trap": {
-			"types": "./dist/js/focus-trap/standalone.d.mts",
-			"default": "./dist/js/focus-trap/standalone.mjs"
+			"types": "./dist/js/focus-trap/focus-trap.standalone.d.mts",
+			"default": "./dist/js/focus-trap/focus-trap.standalone.mjs"
 		},
 		"./movable": {
-			"types": "./dist/js/movable.d.mts",
-			"default": "./dist/js/movable.mjs"
+			"types": "./dist/js/movable/movable.standalone.d.mts",
+			"default": "./dist/js/movable/movable.standalone.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"
+			"types": "./dist/js/sortable/sortable.standalone.d.mts",
+			"default": "./dist/js/sortable/sortable.standalone.mjs"
 		},
 		"./splitter": {
 			"types": "./dist/js/splitter.d.mts",
@@ -86,7 +86,7 @@
 		"@oscarpalmer/toretto": "^0.46"
 	},
 	"devDependencies": {
-		"@oxlint/plugins": "^1.70",
+		"@oxlint/plugins": "^1.72",
 		"@vitest/coverage-istanbul": "^4.1",
 		"autoprefixer": "^10.5",
 		"concurrently": "^10",
@@ -95,7 +95,7 @@
 		"postcss-input-range": "^6",
 		"postcss-scss": "^4",
 		"sass": "^1.101",
-		"stylelint": "^17.13",
+		"stylelint": "^17.14",
 		"stylelint-config-standard-scss": "^17",
 		"tsdown": "^0.22",
 		"typescript": "^6",

package/src/css/floatable.scss

@@ -77,8 +77,6 @@
 :where([oui-tooltip-content]) {
 	max-width: 48ch;
 	padding: 0.75em 1em;
-	overflow: visible;
-	opacity: 0;
 	background-color: var(--oui-absolute);
 	border-radius: 0.25rem;
 	font-size: 0.875rem;

package/src/css/message.scss

@@ -24,6 +24,7 @@
 	}
 
 	:where(& h2, & h3, & h4, & h5, & h6) {
+		color: var(--oui-foreground, var(--oui-gray-10));
 		font-size: 1em;
 		font-weight: bold;
 	}

package/src/css/reset.scss

@@ -123,6 +123,7 @@
 
 :where(dialog) {
 	display: none !important;
+	overflow: visible;
 	overscroll-behavior: contain;
 	border: none;
 	color: currentcolor;