@oscarpalmer/oui 0.27.0 → 0.29.0

package/dist/css/floatable.css

@@ -30,6 +30,15 @@
   transition-delay: 0.125s;
 }
 
+:where([oui-dialog]) {
+  position: relative;
+}
+
+:where([oui-dialog-resizer]) {
+  position: absolute;
+  inset: auto 0 0 auto;
+}
+
 :where([oui-popover], [oui-tooltip-content]) {
   --margin-bottom: 0.5em;
   --margin-left: 0.5em;

package/dist/js/dialog.d.mts

@@ -1,4 +1,5 @@
-import { h as OuiMovable } from "./draggable-zszaW1qS.mjs";
+import { h as OuiMovable } from "./draggable-fIYXd8eO.mjs";
+import { n as OuiResizable } from "./resizable.embedded-CXrUVPzR.mjs";
 import { RemovableEventListener } from "@oscarpalmer/toretto/models";
 
 //#region src/js/dialog.d.ts
@@ -32,6 +33,7 @@ type OuiDialogState = {
   listeners: RemovableEventListener[];
   modal: boolean;
   movable?: OuiMovable;
+  resizable?: OuiResizable;
 };
 /**
  * Get the _OuiDialog_ for an element

package/dist/js/dialog.mjs

@@ -2,7 +2,11 @@ import { getOnBeforeToggleListener } from "./floatable/floatable.embedded.mjs";
 import { attributable } from "./internal/attributable.mjs";
 import { ATTRIBUTE_MOVABLE_HANDLE, createMovable } from "./movable/movable.embedded.mjs";
 import "./movable/movable.standalone.mjs";
+import { RESIZABLE_ATTRIBUTE_HANDLE, createResizable } from "./resizable/resizable.embedded.mjs";
+import { getAria, setAria } from "@oscarpalmer/toretto/aria";
 import { on } from "@oscarpalmer/toretto/event";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
+import { setStyles } from "@oscarpalmer/toretto/style";
 //#region src/js/dialog.ts
 var OuiDialog = class {
 	#state;
@@ -34,7 +38,7 @@ var OuiDialog = class {
 		const { element } = this.#state;
 		if (element == null || element.open) return;
 		const isModal = modal !== false;
-		element.setAttribute(ARIA_MODAL, String(isModal));
+		setAria(element, "modal", isModal);
 		if (isModal) element.showModal();
 		else element.show();
 	}
@@ -45,12 +49,16 @@ function addDialog(element) {
 }
 function destroyDialog(state) {
 	state.element.close();
-	state.element.setAttribute(ARIA_MODAL, String(state.modal));
+	setAria(state.element, "modal", state.modal);
 	state.element.removeAttribute(ATTRIBUTE_OPEN);
 	for (const listener of state.listeners) listener();
+	state.movable?.destroy();
+	state.resizable?.destroy();
 	state.dialog = void 0;
 	state.element = void 0;
 	state.listeners = void 0;
+	state.movable = void 0;
+	state.resizable = void 0;
 }
 /**
 * Get the _OuiDialog_ for an element
@@ -64,32 +72,44 @@ function getDialog(element) {
 function getMovable(element) {
 	const handles = element.querySelectorAll(SELECTOR_MOVER);
 	if (handles.length === 0) return;
-	for (const handle of handles) handle.setAttribute(ATTRIBUTE_MOVABLE_HANDLE, "");
-	return createMovable(element, { container: element.getAttribute(ATTRIBUTE_CONTAINER) ?? void 0 });
+	for (const handle of handles) setAttribute(handle, ATTRIBUTE_MOVABLE_HANDLE, "");
+	return createMovable(element, { container: getAttribute(element, ATTRIBUTE_CONTAINER) });
+}
+function getResizable(element) {
+	const handle = element.querySelector(SELECTOR_RESIZER);
+	if (handle == null) return;
+	setAttribute(handle, RESIZABLE_ATTRIBUTE_HANDLE, "");
+	return createResizable(element);
 }
 function getState(element) {
 	const state = {
 		element,
 		dialog: void 0,
-		listeners: [getOnBeforeToggleListener(element), on(element, EVENT_TOGGLE, (event) => {
+		listeners: [getOnBeforeToggleListener(element), on(element, "toggle", (event) => {
 			const { source } = event;
 			if (element.open) {
-				const modal = source instanceof HTMLButtonElement && source.command === COMMAND_SHOW_MODAL || element.matches(SELECTOR_MODAL);
-				element.setAttribute(ARIA_MODAL, String(modal));
-				element.setAttribute(ATTRIBUTE_OPEN, "");
+				setAria(element, "modal", source instanceof HTMLButtonElement && source.command === "show-modal" || element.matches(":modal"));
+				setAttribute(element, ATTRIBUTE_OPEN, "");
 				element.focus();
+				setTimeout(() => {
+					state.resizable?.set();
+				}, 500);
 			} else {
-				element.removeAttribute(ATTRIBUTE_OPEN);
-				element.setAttribute(ARIA_MODAL, String(state.modal));
-				element.style.inset = "";
-				element.style.position = "";
-				element.style.transform = "";
+				setAttribute(element, ATTRIBUTE_OPEN);
+				setAria(element, "modal", state.modal);
+				setStyles(element, {
+					inset: "",
+					position: "",
+					transform: ""
+				});
+				state.resizable?.reset();
 			}
 		})],
-		modal: element.getAttribute(ARIA_MODAL) === TRUE
+		modal: getAria(element, "modal") === "true" || element.matches(":modal")
 	};
 	state.dialog = new OuiDialog(state);
 	state.movable = getMovable(element);
+	state.resizable = getResizable(element);
 	return state;
 }
 function removeDialog(element) {
@@ -98,16 +118,12 @@ function removeDialog(element) {
 	destroyDialog(state);
 	states.delete(element);
 }
-const ARIA_MODAL = "aria-modal";
 const ATTRIBUTE = "oui-dialog";
 const ATTRIBUTE_CONTAINER = `${ATTRIBUTE}-container`;
 const ATTRIBUTE_OPEN = `${ATTRIBUTE}-open`;
-const COMMAND_SHOW_MODAL = "show-modal";
-const EVENT_TOGGLE = "toggle";
 const MESSAGE = "The element must be an instance of HTMLDialogElement";
 const SELECTOR_MOVER = `[${ATTRIBUTE}-mover]`;
-const SELECTOR_MODAL = ":modal";
-const TRUE = "true";
+const SELECTOR_RESIZER = `[${ATTRIBUTE}-resizer]`;
 const states = /* @__PURE__ */ new WeakMap();
 attributable(ATTRIBUTE, addDialog, removeDialog);
 //#endregion

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

@@ -17,8 +17,8 @@ type OuiMovableState = {
   style: OuiMovableStyle;
 };
 type OuiMovableStyle = {
-  inset: string;
-  position: string;
+  inset: string | undefined;
+  position: string | undefined;
 };
 /**
  * Creates _(or retrieves)_ a _OuiMovable_ instance for an element
@@ -35,7 +35,7 @@ declare class OuiSortable extends OuiDraggable<OuiSortableState> {
   constructor(element: HTMLElement, options?: CreateOuiDraggableOptions);
 }
 type OuiSortableState = {
-  connections: string | null;
+  connections: string | null | undefined;
   origin?: HTMLElement;
 };
 /**

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

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

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

@@ -1,6 +1,9 @@
+import { getAria } from "@oscarpalmer/toretto/aria";
 import { on } from "@oscarpalmer/toretto/event";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { setStyle, setStyles } from "@oscarpalmer/toretto/style";
 //#region src/js/floatable/floatable.embedded.ts
 var OuiFloatable = class {
 	#destroyed = false;
@@ -22,11 +25,11 @@ var OuiFloatable = class {
 		this.#state = state;
 		const { anchor, content } = state;
 		if (standalone) {
-			content.setAttribute(ATTRIBUTE_FLOATABLE, "");
+			setAttribute(content, ATTRIBUTE_FLOATABLE, "");
 			content.popover = "manual";
-		}
-		anchor.style.anchorName = state.name;
-		content.style.positionAnchor = state.name;
+		} else content.popover ??= "auto";
+		setStyle(anchor, "anchorName", state.name);
+		setStyle(content, "positionAnchor", state.name);
 	}
 	/**
 	* Destroy the floatable, removing it from the DOM and cleaning up references
@@ -96,9 +99,9 @@ function createInstance(anchor, content, options, standalone) {
 	return floatable;
 }
 function getOnBeforeToggleListener(element) {
-	return on(element, EVENT_BEFORE, (event) => {
+	return on(element, "beforetoggle", (event) => {
 		const { newState, source } = event;
-		if (newState === "open" && source?.getAttribute(ARIA_DISABLED) === TRUE) event.preventDefault();
+		if (newState === "open" && source != null && getAria(source, "disabled") === "true") event.preventDefault();
 	}, { passive: false });
 }
 function getOptions(input) {
@@ -112,8 +115,8 @@ function getPosition$1(state, override) {
 	if (override != null && override in AREAS) return override;
 	const { anchor, options } = state;
 	if (options.attribute == null) return options.position;
-	const attribute = anchor.getAttribute(options.attribute) ?? "";
-	return attribute in AREAS ? attribute : options.position;
+	const attribute = getAttribute(anchor, options.attribute);
+	return attribute != null && attribute in AREAS ? attribute : options.position;
 }
 function getState(anchor, content, options) {
 	return {
@@ -130,9 +133,11 @@ function removeFloatable(content) {
 function setPosition(state, override) {
 	const position = getPosition$1(state, override);
 	const area = AREAS[position];
-	state.content.style.positionAnchor = state.name;
-	state.content.style.positionArea = area;
-	state.content.setAttribute(ATTRIBUTE_POSITION, POSITIONS[area]);
+	setAttribute(state.content, ATTRIBUTE_POSITION, POSITIONS[area]);
+	setStyles(state.content, {
+		positionAnchor: state.name,
+		positionArea: area
+	});
 }
 const AREAS = {
 	above: "block-start",
@@ -148,15 +153,11 @@ const AREAS = {
 	"start-bottom": "span-start start",
 	"start-top": "span-end start"
 };
-const ARIA_DISABLED = "aria-disabled";
 const ATTRIBUTE_FLOATABLE = "oui-floatable";
 const ATTRIBUTE_POSITION = "oui-position";
-const EVENT_BEFORE = "beforetoggle";
-const FLOATABLE_STATE_OPEN = "open";
 const MESSAGE = "Anchor and content must be an HTMLElement or SVGElement";
 const POSITIONS = Object.fromEntries(Object.entries(AREAS).map(([position, area]) => [area, position]));
-const TRUE = "true";
 const instances = /* @__PURE__ */ new WeakMap();
 let index = 0;
 //#endregion
-export { ATTRIBUTE_FLOATABLE, FLOATABLE_STATE_OPEN, OuiFloatable, createEmbeddedFloatable, createFloatable, getOnBeforeToggleListener, removeFloatable };
+export { ATTRIBUTE_FLOATABLE, OuiFloatable, createEmbeddedFloatable, createFloatable, getOnBeforeToggleListener, removeFloatable };

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

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

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

@@ -66,6 +66,5 @@ declare function createFloatable(anchor: HTMLElement, content: HTMLElement, opti
 declare function getOnBeforeToggleListener(element: HTMLElement): RemovableEventListener;
 declare function removeFloatable(content: HTMLElement): void;
 declare const ATTRIBUTE_FLOATABLE = "oui-floatable";
-declare const FLOATABLE_STATE_OPEN = "open";
 //#endregion
-export { OuiFloatableOptions as a, createFloatable as c, OuiFloatable as i, getOnBeforeToggleListener as l, CreateOuiFloatableOptions as n, OuiFloatablePosition as o, FLOATABLE_STATE_OPEN as r, createEmbeddedFloatable as s, ATTRIBUTE_FLOATABLE as t, removeFloatable as u };
+export { OuiFloatablePosition as a, getOnBeforeToggleListener as c, OuiFloatableOptions as i, removeFloatable as l, CreateOuiFloatableOptions as n, createEmbeddedFloatable as o, OuiFloatable as r, createFloatable as s, ATTRIBUTE_FLOATABLE as t };

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

@@ -1,6 +1,7 @@
 import { attributable } from "../internal/attributable.mjs";
 import { on } from "@oscarpalmer/toretto/event";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
+import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import { clamp } from "@oscarpalmer/atoms/number";
 import { findAncestor } from "@oscarpalmer/toretto/find";
@@ -20,8 +21,8 @@ var OuiFocusTrap = class {
 	* Should focus be maintained within the _focus trap_ when clicking outside of it?
 	*/
 	set contain(value) {
-		if (value === true) this.#state.element.setAttribute(ATTRIBUTE_FOCUSTRAP_CONTAIN, "");
-		else if (value === false) this.#state.element.removeAttribute(ATTRIBUTE_FOCUSTRAP_CONTAIN);
+		if (value === true) setAttribute(this.#state.element, ATTRIBUTE_FOCUSTRAP_CONTAIN, "");
+		else if (value === false) setAttribute(this.#state.element, ATTRIBUTE_FOCUSTRAP_CONTAIN, void 0);
 	}
 	/**
 	* Is the _focus trap_ disabled?
@@ -46,14 +47,14 @@ var OuiFocusTrap = class {
 	* Should the _focus trap_ allow focus to escape when pressing _Escape_?
 	*/
 	set noescape(value) {
-		if (value === true) this.#state.element.setAttribute(ATTRIBUTE_FOCUSTRAP_NOESCAPE, "");
-		else if (value === false) this.#state.element.removeAttribute(ATTRIBUTE_FOCUSTRAP_NOESCAPE);
+		if (value === true) setAttribute(this.#state.element, ATTRIBUTE_FOCUSTRAP_NOESCAPE, "");
+		else if (value === false) setAttribute(this.#state.element, ATTRIBUTE_FOCUSTRAP_NOESCAPE, void 0);
 	}
 	constructor(state) {
 		this.#state = state;
 		this.#tabIndex = state.element.tabIndex;
 		state.element.tabIndex = -1;
-		state.element.setAttribute(ATTRIBUTE_FOCUSTRAP, "");
+		setAttribute(state.element, ATTRIBUTE_FOCUSTRAP, "");
 		this.contain = state.options.contain;
 		this.noescape = state.options.noescape;
 		states.set(this, state);

package/dist/js/index.d.mts

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

package/dist/js/index.mjs

@@ -1,13 +1,17 @@
 import { createFloatable } from "./floatable/floatable.embedded.mjs";
 import { createMovable } from "./movable/movable.embedded.mjs";
 import "./movable/movable.standalone.mjs";
+import { createResizable } from "./resizable/resizable.embedded.mjs";
 import { getDialog } from "./dialog.mjs";
-import "./sortable/sortable.embedded.mjs";
+import "./menu.mjs";
 import "./toolbar.mjs";
 import "./floatable/floatable.standalone.mjs";
 import { createFocusTrap } from "./focus-trap/focus-trap.embedded.mjs";
 import "./focus-trap/focus-trap.standalone.mjs";
 import { getPopover } from "./popover.mjs";
+import "./resizable/resizable.standalone.mjs";
+import { createSortable } from "./sortable/sortable.embedded.mjs";
+import "./sortable/sortable.standalone.mjs";
 import { OuiSplitterElement } from "./splitter.mjs";
 import { getTooltip, setTooltipDelay } from "./tooltip.mjs";
-export { OuiSplitterElement, createFloatable, createFocusTrap, createMovable, getDialog, getPopover, getTooltip, setTooltipDelay };
+export { OuiSplitterElement, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setTooltipDelay };

package/dist/js/internal/attributable.mjs

@@ -1,11 +1,10 @@
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/internal/attributable.ts
 function attributable(attribute, add, remove) {
 	new MutationObserver((entries) => {
 		const { length } = entries;
 		for (let index = 0; index < length; index += 1) {
 			const entry = entries[index];
-			if (entry.type === "attributes" && isHTMLOrSVGElement(entry.target)) if (entry.target.hasAttribute(attribute)) handleAdded(attribute, [entry.target], add);
+			if (entry.type === "attributes" && entry.target instanceof Element) if (entry.target.hasAttribute(attribute)) handleAdded(attribute, [entry.target], add);
 			else handleRemoved([entry.target], remove);
 			else if (entry.type === "childList") {
 				handleAdded(attribute, entry.addedNodes, add);
@@ -23,7 +22,7 @@ function attributable(attribute, add, remove) {
 	});
 }
 function handleAdded(attribute, nodes, add) {
-	const elements = [...nodes].filter(isHTMLOrSVGElement);
+	const elements = [...nodes].filter((node) => node instanceof Element);
 	const { length } = elements;
 	for (let index = 0; index < length; index += 1) {
 		const element = elements[index];
@@ -32,7 +31,7 @@ function handleAdded(attribute, nodes, add) {
 	}
 }
 function handleRemoved(nodes, remove) {
-	const elements = [...nodes].filter(isHTMLOrSVGElement);
+	const elements = [...nodes].filter((node) => node instanceof Element);
 	const { length } = elements;
 	for (let index = 0; index < length; index += 1) {
 		const element = elements[index];

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

@@ -1,2 +1,2 @@
-import { a as OuiDraggableGlobals, c as addDraggable, i as OuiDraggableBound, l as getDraggableStates, n as OuiDragMovePosition, o as OuiDraggableItem, r as OuiDraggable, s as OuiDraggableState, t as CreateOuiDraggableOptions, u as removeDraggable } from "../draggable-zszaW1qS.mjs";
+import { a as OuiDraggableGlobals, c as addDraggable, i as OuiDraggableBound, l as getDraggableStates, n as OuiDragMovePosition, o as OuiDraggableItem, r as OuiDraggable, s as OuiDraggableState, t as CreateOuiDraggableOptions, u as removeDraggable } from "../draggable-fIYXd8eO.mjs";
 export { CreateOuiDraggableOptions, OuiDragMovePosition, OuiDraggable, OuiDraggableBound, OuiDraggableGlobals, OuiDraggableItem, OuiDraggableState, addDraggable, getDraggableStates, removeDraggable };

package/dist/js/internal/draggable.mjs

@@ -1,8 +1,9 @@
 import { getPosition, on } from "@oscarpalmer/toretto/event";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { setStyle, setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
 import { clamp } from "@oscarpalmer/atoms/number";
 import { findAncestor } from "@oscarpalmer/toretto/find";
-import { toggleStyles } from "@oscarpalmer/toretto/style";
 import supportsTouch from "@oscarpalmer/toretto/touch";
 //#region src/js/internal/draggable.ts
 var OuiDraggable = class {
@@ -30,7 +31,7 @@ var OuiDraggable = class {
 		};
 		setContainer(item);
 		setDirection(item);
-		element.setAttribute(attribute, "");
+		setAttribute(element, attribute, "");
 		let states = globals.states.get(element);
 		states ??= {};
 		states[this.#name] = this.#state;
@@ -142,9 +143,11 @@ function onPointerdown(event) {
 			return;
 		}
 		const next = getNextPosition(item, position);
-		dragged.style.position = "fixed";
-		dragged.style.inset = `${next.y}px auto auto ${next.x}px`;
-		dragged.style.transform = "translate3d(0, 0, 0)";
+		setStyles(dragged, {
+			position: "fixed",
+			inset: `${next.y}px auto auto ${next.x}px`,
+			transform: "translate3d(0, 0, 0)"
+		});
 		item.state.options.drag.onBegin?.(event, globals, item, element, handle, next);
 		item.state.styling.set();
 		styleToggler.set();
@@ -155,7 +158,7 @@ function onPointermove(event) {
 	const position = getPosition(event);
 	if (position == null) return;
 	const next = getNextPosition(current, position);
-	if (globals.element != null) globals.element.node.style.inset = `${next.y}px auto auto ${next.x}px`;
+	if (globals.element != null) setStyle(globals.element.node, "inset", `${next.y}px auto auto ${next.x}px`);
 	const detail = current.state.options.drag.onMove(event, globals, current, {
 		calculated: next,
 		original: position
@@ -192,7 +195,7 @@ function setContainer(item) {
 		setContainerElement(item, container);
 		return;
 	}
-	const selector = container ?? item.instance.element.getAttribute(item.state.options.container.attribute);
+	const selector = container ?? getAttribute(item.instance.element, item.state.options.container.attribute);
 	if (typeof selector !== "string") return;
 	const element = containers.has(selector) ? item.state.element.ownerDocument.body : document.querySelector(selector) ?? void 0;
 	if (isHTMLOrSVGElement(element)) setContainerElement(item, element);
@@ -205,7 +208,7 @@ function setContainerElement(item, element) {
 	item.state.options.container.onInitialize?.(item);
 }
 function setDirection(item) {
-	const direction = item.state.element.getAttribute(item.state.options.direction.attribute);
+	const direction = getAttribute(item.state.element, item.state.options.direction.attribute);
 	if (horizontals.has(direction)) item.state.vertical = false;
 	else if (verticals.has(direction)) item.state.horizontal = false;
 	item.state.options.direction.onAfter?.(item);
@@ -261,7 +264,7 @@ on(document, "keydown", onKeydown);
 on(document, "mousedown", onPointerdown);
 on(document, "pointermove", onPointermove);
 on(document, "pointerup", onPointerup);
-on(document, "touchcancel", onPointerup, { passive: false });
+on(document, "touchcancel", onPointerup);
 on(document, "touchstart", onPointerdown, { passive: false });
 //#endregion
 export { OuiDraggable, addDraggable, getDraggableStates, removeDraggable };

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

@@ -0,0 +1,32 @@
+import { AriaRole, RemovableEventListener } from "@oscarpalmer/toretto/models";
+
+//#region src/js/internal/navigable.d.ts
+declare class OuiNavigable {
+  active: OuiNavigableActive;
+  element: HTMLElement;
+  listeners: RemovableEventListener[];
+  options: OuiNavigableOptions;
+  orientation: OuiNavigableOrientation;
+  constructor(element: HTMLElement, options: OuiNavigableOptions);
+  destroy(): void;
+}
+type OuiNavigableActive = {
+  element?: HTMLElement;
+  index: number;
+};
+type OuiNavigableOptions = {
+  role?: AriaRole;
+  selector: string;
+  vertical: boolean;
+  onDeactivate?: (event: KeyboardEvent, navigable: OuiNavigable) => void;
+  onPreventNavigation?: (event: KeyboardEvent, navigable: OuiNavigable) => boolean;
+  onShouldActivate?: (event: KeyboardEvent, navigable: OuiNavigable) => boolean;
+  onShouldDeactivate?: (event: KeyboardEvent, navigable: OuiNavigable) => boolean | undefined;
+};
+type OuiNavigableOrientation = 'horizontal' | 'vertical';
+declare function getNavigable(element: HTMLElement, options: OuiNavigableOptions): OuiNavigable;
+declare function updateNavigableFocus(navigable: OuiNavigable, focus: boolean, items?: HTMLElement[]): void;
+declare const NAVIGABLE_KEYS_HORIZONTAL: Set<string>;
+declare const NAVIGABLE_KEYS_VERTICAL: Set<string>;
+//#endregion
+export { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, OuiNavigable, OuiNavigableOptions, getNavigable, updateNavigableFocus };

package/dist/js/internal/navigable.mjs

@@ -0,0 +1,107 @@
+import { getAria, setRole } from "@oscarpalmer/toretto/aria";
+import { on } from "@oscarpalmer/toretto/event";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { clamp } from "@oscarpalmer/atoms/number";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+//#region src/js/internal/navigable.ts
+var OuiNavigable = class {
+	active = { index: 0 };
+	element;
+	listeners;
+	options;
+	orientation;
+	constructor(element, options) {
+		this.element = element;
+		this.options = options;
+		this.listeners = [on(element, "focusin", (event) => {
+			onFocusin(this, event);
+		}), on(element, "keydown", (event) => {
+			onKeydown(this, event);
+		})];
+		this.orientation = getOrientation(element, options);
+		if (options.role != null) setRole(element, options.role);
+	}
+	destroy() {
+		const listeners = this.listeners.splice(0);
+		for (const listener of listeners) listener();
+		this.active.element = void 0;
+		this.element = void 0;
+	}
+};
+function getItems(container, selector) {
+	return [...container.querySelectorAll(selector)].filter(isValidItem);
+}
+function getNavigable(element, options) {
+	return new OuiNavigable(element, options);
+}
+function getOrientation(element, options) {
+	const attribute = getAria(element, "orientation");
+	return ORIENTATIONS.has(attribute) ? attribute : options.vertical ? ORIENTATION_VERTICAL : ORIENTATION_HORIZONTAL;
+}
+function isValidItem(element) {
+	return "disabled" in element ? element.disabled !== true : true;
+}
+function onFocusin(navigable, event) {
+	const item = findAncestor(event, navigable.options.selector);
+	if (!isHTMLOrSVGElement(item) || !isValidItem(item)) return;
+	const items = getItems(navigable.element, navigable.options.selector);
+	const index = items.indexOf(item);
+	if (index === -1) return;
+	navigable.active.element = item;
+	navigable.active.index = index;
+	updateNavigableFocus(navigable, false, items);
+}
+function onKeydown(navigable, event) {
+	const escaped = event.key === "Escape";
+	const stopPropagation = navigable.options.onShouldDeactivate?.(event, navigable);
+	if (escaped || stopPropagation != null) {
+		if (escaped || stopPropagation) event.stopPropagation();
+		navigable.options.onDeactivate?.(event, navigable);
+		return;
+	}
+	if (!KEYS_ALL.has(event.key)) return;
+	const mustActivate = KEYS_ACTIVATE.has(event.key);
+	const shouldActivate = navigable.options.onShouldActivate?.(event, navigable) === true;
+	if (mustActivate || shouldActivate || navigable.options.onPreventNavigation?.(event, navigable) === true) event.stopPropagation();
+	if (mustActivate || shouldActivate) return;
+	const items = getItems(navigable.element, navigable.options.selector);
+	const { length } = items;
+	if (length === 0) return;
+	let index;
+	if (KEYS_ABSOLUTE.has(event.key)) index = event.key === "Home" ? 0 : items.length - 1;
+	else {
+		const direction = NAVIGABLE_KEYS_HORIZONTAL.has(event.key) ? ORIENTATION_HORIZONTAL : ORIENTATION_VERTICAL;
+		if (navigable.orientation === direction) {
+			if (navigable.active.element instanceof HTMLSelectElement) event.preventDefault();
+			index = clamp(navigable.active.index + (KEYS_NEXT.has(event.key) ? 1 : -1), 0, length - 1, true);
+		}
+	}
+	if (index == null || index === navigable.active.index) return;
+	navigable.active.element = items[index];
+	navigable.active.index = index;
+	updateNavigableFocus(navigable, true, items);
+}
+function updateNavigableFocus(navigable, focus, items) {
+	const updated = items ?? getItems(navigable.element, navigable.options.selector);
+	const { length } = updated;
+	if (length === 0) return;
+	for (let index = 0; index < length; index += 1) updated[index].tabIndex = index === navigable.active.index ? 0 : -1;
+	navigable.active.element ??= updated[navigable.active.index];
+	if (focus) navigable.active.element?.focus();
+}
+const KEYS_ABSOLUTE = /* @__PURE__ */ new Set(["End", "Home"]);
+const KEYS_ACTIVATE = /* @__PURE__ */ new Set(["Enter", " "]);
+const NAVIGABLE_KEYS_HORIZONTAL = /* @__PURE__ */ new Set(["ArrowRight", "ArrowLeft"]);
+const NAVIGABLE_KEYS_VERTICAL = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp"]);
+const KEYS_ALL = /* @__PURE__ */ new Set([
+	...KEYS_ABSOLUTE,
+	...KEYS_ACTIVATE,
+	...NAVIGABLE_KEYS_HORIZONTAL,
+	...NAVIGABLE_KEYS_VERTICAL
+]);
+const KEYS_NEXT = /* @__PURE__ */ new Set(["ArrowDown", "ArrowRight"]);
+const ORIENTATION_HORIZONTAL = "horizontal";
+const ORIENTATION_VERTICAL = "vertical";
+const ORIENTATIONS = /* @__PURE__ */ new Set([ORIENTATION_HORIZONTAL, ORIENTATION_VERTICAL]);
+//#endregion
+export { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, OuiNavigable, getNavigable, updateNavigableFocus };

package/dist/js/menu.d.mts

@@ -0,0 +1 @@
+export { };