@oscarpalmer/oui 0.28.0 → 0.29.0

package/dist/js/dialog.d.mts

@@ -1,4 +1,4 @@
-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";
 

package/dist/js/dialog.mjs

@@ -3,7 +3,10 @@ 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;
@@ -35,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();
 	}
@@ -46,7 +49,7 @@ 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();
@@ -69,39 +72,40 @@ 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;
-	handle.setAttribute(RESIZABLE_ATTRIBUTE_HANDLE, "");
+	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);
@@ -114,17 +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 SELECTOR_RESIZER = `[${ATTRIBUTE}-resizer]`;
-const TRUE = "true";
 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,7 +1,7 @@
-import { d as OuiSortable, f as createSortable, 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";

package/dist/js/index.mjs

@@ -3,6 +3,7 @@ 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 "./menu.mjs";
 import "./toolbar.mjs";
 import "./floatable/floatable.standalone.mjs";
 import { createFocusTrap } from "./focus-trap/focus-trap.embedded.mjs";

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);

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 { };