@acusti/dropdown 0.56.0 → 1.0.0-alpha.0

package/dist/Dropdown.js

@@ -1,57 +1,172 @@
 import { c } from "react/compiler-runtime";
 import useKeyboardEvents, { isEventTargetUsingKeyEvent } from "@acusti/use-keyboard-events";
 import clsx from "clsx";
-import { Children, Fragment, cloneElement, isValidElement, useEffect, useId, useRef, useState } from "react";
+import { Children, Fragment, cloneElement, createContext, isValidElement, useContext, useEffect, useId, useRef, useState } from "react";
 import { getBestMatch } from "@acusti/matchmaking";
 import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/context.ts
+var DropdownContext = createContext(null);
+var MenubarContext = createContext(null);
+//#endregion
 //#region src/Dropdown.css?inline
-var Dropdown_default = ":root{--uktdd-font-family:system-ui, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Helvetica, Arial, sans-serif;--uktdd-body-bg-color:#fff;--uktdd-body-bg-color-hover:#69a2f9;--uktdd-body-color-hover:#fff;--uktdd-body-buffer:10px;--uktdd-body-max-height:calc(100dvh - var(--uktdd-body-buffer));--uktdd-body-max-width:calc(100dvw - var(--uktdd-body-buffer));--uktdd-body-min-height:30px;--uktdd-body-pad-bottom:9px;--uktdd-body-pad-left:12px;--uktdd-body-pad-right:12px;--uktdd-body-pad-top:9px;--uktdd-body-min-width:min(50px, 100%);--uktdd-body-position-area:bottom span-right;--uktdd-body-position-try-fallbacks:--uktdd-top-left, --uktdd-bottom-right, --uktdd-top-right;--uktdd-body-translate:0 0;--uktdd-label-pad-right:10px}.uktdropdown,.uktdropdown-trigger{font-family:var(--uktdd-font-family)}.uktdropdown{anchor-scope:--uktdd-anchor;width:max-content}.uktdropdown.disabled{pointer-events:none}.uktdropdown>*{cursor:default}.uktdropdown>:first-child{anchor-name:--uktdd-anchor}.uktdropdown-label{align-items:center;display:flex}.uktdropdown-label-text{padding-right:var(--uktdd-label-pad-right)}.uktdropdown-body{box-sizing:border-box;position-anchor:--uktdd-anchor;position-area:var(--uktdd-body-position-area);position-try-order:most-height;position-try-fallbacks:var(--uktdd-body-position-try-fallbacks);min-block-size:min(var(--uktdd-body-min-height), var(--uktdd-body-max-height));max-block-size:min(var(--uktdd-body-max-height), 100%);min-inline-size:min(var(--uktdd-body-min-width), var(--uktdd-body-max-width));max-inline-size:var(--uktdd-body-max-width);inline-size:max-content;translate:var(--uktdd-body-translate);z-index:2;background-color:var(--uktdd-body-bg-color);flex-direction:column;display:flex;position:fixed;overflow:hidden;box-shadow:0 8px 18px #00000040}.uktdropdown-body.has-items{-webkit-user-select:none;user-select:none}.uktdropdown-body [data-ukt-active]{background-color:var(--uktdd-body-bg-color-hover);color:var(--uktdd-body-color-hover)}.uktdropdown-content{box-sizing:border-box;overscroll-behavior:contain;min-block-size:0;padding:var(--uktdd-body-pad-top) var(--uktdd-body-pad-right) var(--uktdd-body-pad-bottom) var(--uktdd-body-pad-left);overflow:auto}@position-try --uktdd-top-left{position-area: top span-right;}@position-try --uktdd-bottom-left{position-area: bottom span-right;}@position-try --uktdd-bottom-right{position-area: bottom span-left;}@position-try --uktdd-top-right{position-area: top span-left;}";
+var Dropdown_default = ":root{--uktdd-font-family:system-ui, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Helvetica, Arial, sans-serif;--uktdd-body-bg-color:#fff;--uktdd-body-bg-color-hover:#69a2f9;--uktdd-body-color-hover:#fff;--uktdd-body-buffer:10px;--uktdd-body-max-height:calc(100dvh - var(--uktdd-body-buffer));--uktdd-body-max-width:calc(100dvw - var(--uktdd-body-buffer));--uktdd-body-min-height:30px;--uktdd-body-pad-bottom:.5em;--uktdd-body-pad-left:.6875em;--uktdd-body-pad-right:.6875em;--uktdd-body-pad-top:.5em;--uktdd-body-min-width:min(50px, 100%);--uktdd-body-position-area:bottom span-right;--uktdd-body-position-try-fallbacks:--uktdd-top-left, --uktdd-bottom-right, --uktdd-top-right;--uktdd-body-gap:0px;--uktdd-body-color:canvastext;--uktdd-body-bg-color-path:#dcdcdc;--uktdd-body-color-path:currentColor;--uktdd-label-pad-right:.625em;--uktdd-submenu-position-area:inline-end span-block-end;--uktdd-submenu-position-try-fallbacks:--uktdd-submenu-inline-start;--uktdd-submenu-gap:0px;--uktdd-menubar-trigger-bg-color-active:#0000001f}.uktdropdown,.uktdropdown-trigger{font-family:var(--uktdd-font-family)}.uktdropdown{anchor-scope:--uktdd-anchor;width:max-content}.uktdropdown.disabled{pointer-events:none}.uktdropdown>*{cursor:default}.uktdropdown>:first-child{anchor-name:--uktdd-anchor}.uktdropdown-label{align-items:center;display:flex}.uktdropdown-label-text{padding-right:var(--uktdd-label-pad-right)}.uktdropdown-body{box-sizing:border-box;position-anchor:--uktdd-anchor;position-area:var(--uktdd-body-position-area);position-try-order:most-height;position-try-fallbacks:var(--uktdd-body-position-try-fallbacks);min-block-size:min(var(--uktdd-body-min-height), var(--uktdd-body-max-height));max-block-size:min(var(--uktdd-body-max-height), 100%);min-inline-size:min(var(--uktdd-body-min-width), var(--uktdd-body-max-width));max-inline-size:var(--uktdd-body-max-width);inline-size:max-content;color:inherit;background-color:var(--uktdd-body-bg-color);flex-direction:column;display:flex;position:fixed;overflow:hidden;box-shadow:0 8px 18px #00000040}.uktdropdown-body.has-items{-webkit-user-select:none;user-select:none}.uktdropdown-body [data-ukt-active]{background-color:var(--uktdd-body-bg-color-hover);color:var(--uktdd-body-color-hover)}:is(.uktdropdown-body [data-ukt-active]:has([data-ukt-submenu] [data-ukt-active]),.uktdropdown-body [data-ukt-active]:has([data-ukt-submenu]:hover)){background-color:var(--uktdd-body-bg-color-path);color:var(--uktdd-body-color-path)}.uktdropdown-body [data-ukt-item][aria-disabled=true]{opacity:.5;pointer-events:none}.uktdropdown-body [data-ukt-item]{anchor-scope:--uktdd-submenu-anchor}.uktdropdown-body :is([data-ukt-item],[data-ukt-value])[aria-haspopup=menu]{padding-inline-end:2em;position:relative}.uktdropdown-body :is([data-ukt-item],[data-ukt-value])[aria-haspopup=menu]:after{content:\"\";border-block-start:.14em solid;border-inline-end:.14em solid;block-size:.3em;inline-size:.3em;position:absolute;inset-block-start:50%;inset-inline-end:.9em;translate:0 -50%;rotate:45deg}.uktdropdown-body :is([data-ukt-item],[data-ukt-value])[aria-haspopup=menu]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):after{rotate:-45deg}.uktdropdown-body [data-ukt-item][aria-expanded=true]{anchor-name:--uktdd-submenu-anchor}.uktdropdown-body [data-ukt-item][aria-expanded=true]>[data-ukt-submenu]{display:block}.uktdropdown-body [data-ukt-submenu]{box-sizing:border-box;color:var(--uktdd-body-color);position-anchor:--uktdd-submenu-anchor;position-area:var(--uktdd-submenu-position-area);position-try-fallbacks:var(--uktdd-submenu-position-try-fallbacks);z-index:2;margin-block:0;margin-inline:var(--uktdd-submenu-gap);padding:var(--uktdd-body-pad-top) var(--uktdd-body-pad-right) var(--uktdd-body-pad-bottom) var(--uktdd-body-pad-left);inline-size:max-content;max-inline-size:var(--uktdd-body-max-width);max-block-size:var(--uktdd-body-max-height);overscroll-behavior:contain;background-color:var(--uktdd-body-bg-color);list-style:none;display:none;position:fixed;overflow:auto;box-shadow:0 8px 18px #00000040}div.uktdropdown-body{block-size:auto;margin-block:var(--uktdd-body-gap);border:0;margin-inline:0;padding:0;inset:auto}.uktmenubar{width:max-content;font-family:var(--uktdd-font-family);align-items:stretch;display:flex}.uktmenubar .uktdropdown.is-open .uktdropdown-trigger{box-shadow:inset 0 0 0 100vmax var(--uktdd-menubar-trigger-bg-color-active)}.uktdropdown-content{box-sizing:border-box;overscroll-behavior:contain;min-block-size:0;padding:var(--uktdd-body-pad-top) var(--uktdd-body-pad-right) var(--uktdd-body-pad-bottom) var(--uktdd-body-pad-left);overflow:auto}@position-try --uktdd-top-left{position-area: top span-right;}@position-try --uktdd-bottom-left{position-area: bottom span-right;}@position-try --uktdd-bottom-right{position-area: bottom span-left;}@position-try --uktdd-top-right{position-area: top span-left;}@position-try --uktdd-submenu-inline-start{position-area: inline-start span-block-end;}";
 //#endregion
 //#region src/helpers.ts
-var ITEM_SELECTOR = `[data-ukt-item], [data-ukt-value]`;
-var getItemElements = (dropdownElement) => {
-	if (!dropdownElement) return null;
-	const bodyElement = dropdownElement.querySelector(".uktdropdown-body");
+var ITEM_SELECTOR = "[data-ukt-item], [data-ukt-value]";
+var SUBMENU_SELECTOR = "[data-ukt-submenu]";
+var DISABLED_ITEM_SELECTOR = "[aria-disabled=\"true\"]";
+var getBodyElement = (dropdownElement) => dropdownElement?.querySelector(".uktdropdown-body") ?? null;
+var getLevelRoot = (element) => element.closest(SUBMENU_SELECTOR);
+var getSubmenuOfItem = (item) => {
+	const submenu = item.querySelector(SUBMENU_SELECTOR);
+	if (!submenu) return null;
+	return submenu.parentElement?.closest("[data-ukt-item], [data-ukt-value]") === item ? submenu : null;
+};
+var getParentItem = (levelRoot) => levelRoot.parentElement?.closest("[data-ukt-item], [data-ukt-value]") ?? null;
+var getItemLabel = (item) => {
+	if (!getSubmenuOfItem(item)) return item.innerText ?? "";
+	const clone = item.cloneNode(true);
+	for (const submenu of Array.from(clone.querySelectorAll(SUBMENU_SELECTOR))) submenu.remove();
+	return (clone.textContent ?? "").trim();
+};
+var getItemPath = (element) => {
+	const path = [];
+	if (!element) return path;
+	let levelRoot = getLevelRoot(element);
+	while (levelRoot) {
+		const parentItem = getParentItem(levelRoot);
+		if (!parentItem) break;
+		const label = getItemLabel(parentItem);
+		path.unshift({
+			label,
+			value: parentItem.dataset.uktValue ?? label
+		});
+		levelRoot = getLevelRoot(parentItem);
+	}
+	return path;
+};
+var getItemElements = (dropdownElement, levelRoot) => {
+	const bodyElement = getBodyElement(dropdownElement);
 	if (!bodyElement) return null;
-	let items = bodyElement.querySelectorAll(ITEM_SELECTOR);
-	if (items.length) return items;
-	items = bodyElement.children;
+	const root = levelRoot ?? bodyElement;
+	const candidates = Array.from(root.querySelectorAll(ITEM_SELECTOR));
+	if (candidates.length) return candidates.filter((item) => {
+		if (item.matches(DISABLED_ITEM_SELECTOR)) return false;
+		return getLevelRoot(item) === (levelRoot ?? null);
+	});
+	let items = root.children;
 	while (items.length === 1) {
 		if (items[0].children == null) break;
 		items = items[0].children;
 	}
-	if (items.length === 1) items = bodyElement.children;
-	return items;
+	if (items.length === 1) items = root.children;
+	return Array.from(items).filter((item) => !item.matches(DISABLED_ITEM_SELECTOR));
+};
+var getItemForTarget = (dropdownElement, target) => {
+	let item = target.closest(ITEM_SELECTOR);
+	const targetLevelRoot = getLevelRoot(target);
+	if (!item || targetLevelRoot && item.contains(targetLevelRoot)) item = getItemElements(dropdownElement, targetLevelRoot)?.find((itemElement) => itemElement === target) ?? item;
+	if (!item || !dropdownElement.contains(item)) return null;
+	if (item.matches(DISABLED_ITEM_SELECTOR)) return null;
+	return item;
+};
+var getActiveItemElements = (dropdownElement) => {
+	if (!dropdownElement) return null;
+	const actives = dropdownElement.querySelectorAll("[data-ukt-active]");
+	return actives.length ? Array.from(actives) : null;
 };
 var getActiveItemElement = (dropdownElement) => {
+	const actives = getActiveItemElements(dropdownElement);
+	return actives ? actives[actives.length - 1] : null;
+};
+var getDeepestExpandedItem = (dropdownElement) => {
 	if (!dropdownElement) return null;
-	return dropdownElement.querySelector("[data-ukt-active]");
+	const expanded = Array.from(dropdownElement.querySelectorAll("[aria-expanded=\"true\"]")).filter((element) => element.matches(ITEM_SELECTOR));
+	return expanded.length ? expanded[expanded.length - 1] : null;
+};
+var isItemExpanded = (item) => item.getAttribute("aria-expanded") === "true";
+var submenuIdCounter = 0;
+var ensureSubmenuAria = (item, submenu) => {
+	if (!submenu.hasAttribute("role")) submenu.setAttribute("role", "menu");
+	if (!submenu.id) submenu.id = `uktdd-submenu-${++submenuIdCounter}`;
+	if (!item.hasAttribute("aria-haspopup")) item.setAttribute("aria-haspopup", "menu");
+	if (!item.hasAttribute("aria-expanded")) item.setAttribute("aria-expanded", "false");
+	if (!item.hasAttribute("aria-controls")) item.setAttribute("aria-controls", submenu.id);
+};
+var annotateParentItems = (bodyElement) => {
+	if (!bodyElement) return;
+	for (const submenu of Array.from(bodyElement.querySelectorAll(SUBMENU_SELECTOR))) {
+		const item = getParentItem(submenu);
+		if (item) ensureSubmenuAria(item, submenu);
+	}
+};
+var expandItem = (item, onToggleSubmenu) => {
+	const submenu = getSubmenuOfItem(item);
+	if (!submenu) return;
+	ensureSubmenuAria(item, submenu);
+	if (isItemExpanded(item)) return;
+	item.setAttribute("aria-expanded", "true");
+	onToggleSubmenu?.(item, true);
+};
+var collapseItem = (item, onToggleSubmenu) => {
+	if (!isItemExpanded(item)) return;
+	const submenu = getSubmenuOfItem(item);
+	if (submenu) {
+		const expandedDescendants = Array.from(submenu.querySelectorAll("[aria-expanded=\"true\"]")).filter((descendant) => descendant.matches(ITEM_SELECTOR));
+		for (const descendant of expandedDescendants) collapseItem(descendant, onToggleSubmenu);
+		for (const active of Array.from(submenu.querySelectorAll("[data-ukt-active]"))) delete active.dataset.uktActive;
+	}
+	item.setAttribute("aria-expanded", "false");
+	onToggleSubmenu?.(item, false);
+};
+var collapseItemsOutsidePath = (dropdownElement, element, onToggleSubmenu) => {
+	const bodyElement = getBodyElement(dropdownElement);
+	if (!bodyElement) return;
+	const expandedItems = Array.from(bodyElement.querySelectorAll("[aria-expanded=\"true\"]")).filter((item) => item.matches(ITEM_SELECTOR));
+	for (const item of expandedItems.reverse()) {
+		if (element && item.contains(element)) continue;
+		collapseItem(item, onToggleSubmenu);
+	}
 };
 var clearItemElementsState = (itemElements) => {
 	itemElements.forEach((itemElement) => {
 		if (itemElement.hasAttribute("data-ukt-active")) delete itemElement.dataset.uktActive;
+		for (const active of Array.from(itemElement.querySelectorAll("[data-ukt-active]"))) delete active.dataset.uktActive;
 	});
 };
+var setActiveChain = (dropdownElement, element) => {
+	const chain = /* @__PURE__ */ new Set([element]);
+	let levelRoot = getLevelRoot(element);
+	while (levelRoot) {
+		const parentItem = getParentItem(levelRoot);
+		if (!parentItem) break;
+		chain.add(parentItem);
+		levelRoot = getLevelRoot(parentItem);
+	}
+	for (const active of getActiveItemElements(dropdownElement) ?? []) if (!chain.has(active)) delete active.dataset.uktActive;
+	for (const item of chain) item.setAttribute("data-ukt-active", "");
+};
 var setActiveItem = ({ dropdownElement, element, event, index, indexAddend, isExactMatch, onActiveItem, text }) => {
-	const items = getItemElements(dropdownElement);
-	if (!items) return;
-	const itemElements = Array.from(items);
-	if (!itemElements.length) return;
+	const currentDeepest = getActiveItemElement(dropdownElement);
+	const itemElements = getItemElements(dropdownElement, element ? getLevelRoot(element) : currentDeepest ? getLevelRoot(currentDeepest) : null);
+	if (!itemElements || itemElements.length === 0) return currentDeepest;
 	const lastIndex = itemElements.length - 1;
-	const currentActiveIndex = itemElements.findIndex((itemElement) => itemElement.hasAttribute("data-ukt-active"));
+	const currentActiveIndex = itemElements.findIndex((itemElement) => itemElement === currentDeepest);
 	let nextActiveIndex = currentActiveIndex;
 	if (typeof index === "number") nextActiveIndex = index < 0 ? itemElements.length + index : index;
-	if (element) nextActiveIndex = itemElements.findIndex((itemElement) => itemElement === element);
-	else if (typeof indexAddend === "number") {
+	if (element) {
+		nextActiveIndex = itemElements.findIndex((itemElement) => itemElement === element);
+		if (nextActiveIndex === -1) return currentDeepest;
+	} else if (typeof indexAddend === "number") {
 		if (currentActiveIndex === -1 && indexAddend === -1) nextActiveIndex = lastIndex;
 		else nextActiveIndex += indexAddend;
 		nextActiveIndex = Math.max(0, Math.min(nextActiveIndex, lastIndex));
 	} else if (typeof text === "string") {
 		if (!text) {
 			clearItemElementsState(itemElements);
-			return;
+			return null;
 		}
-		const itemTexts = itemElements.map((itemElement) => itemElement.innerText);
+		const itemTexts = itemElements.map(getItemLabel);
 		if (isExactMatch) {
 			const textToCompare = text.toLowerCase();
 			nextActiveIndex = itemTexts.findIndex((itemText) => itemText.toLowerCase().startsWith(textToCompare));
@@ -64,16 +179,16 @@ var setActiveItem = ({ dropdownElement, element, event, index, indexAddend, isEx
 			nextActiveIndex = itemTexts.findIndex((itemText) => itemText === bestMatch);
 		}
 	}
-	const nextActiveItem = items[nextActiveIndex];
-	if (nextActiveItem == null || nextActiveIndex === currentActiveIndex) return;
-	clearItemElementsState(itemElements);
-	nextActiveItem.setAttribute("data-ukt-active", "");
-	const label = nextActiveItem.innerText;
+	const nextActiveItem = itemElements[nextActiveIndex];
+	if (nextActiveItem == null || nextActiveItem === currentDeepest) return currentDeepest;
+	setActiveChain(dropdownElement, nextActiveItem);
+	const label = getItemLabel(nextActiveItem);
 	const value = nextActiveItem.dataset.uktValue ?? label;
 	onActiveItem?.({
 		element: nextActiveItem,
 		event,
 		label,
+		path: getItemPath(nextActiveItem),
 		value
 	});
 	let { parentElement } = nextActiveItem;
@@ -92,21 +207,192 @@ var setActiveItem = ({ dropdownElement, element, event, index, indexAddend, isEx
 			scrollableParent.scrollTop = scrollTop;
 		}
 	}
+	return nextActiveItem;
+};
+var isPointInTriangle = (p, a, b, c) => {
+	const cross = (u, v, w) => (u.x - w.x) * (v.y - w.y) - (v.x - w.x) * (u.y - w.y);
+	const d1 = cross(p, a, b);
+	const d2 = cross(p, b, c);
+	const d3 = cross(p, c, a);
+	return !((d1 < 0 || d2 < 0 || d3 < 0) && (d1 > 0 || d2 > 0 || d3 > 0));
 };
 //#endregion
+//#region src/Menubar.tsx
+var compareDocumentOrder = (a, b) => {
+	if (a.element === b.element) return 0;
+	const position = a.element.compareDocumentPosition(b.element);
+	if ((position & Node.DOCUMENT_POSITION_FOLLOWING) !== 0) return -1;
+	if ((position & Node.DOCUMENT_POSITION_PRECEDING) !== 0) return 1;
+	return 0;
+};
+function Menubar(t0) {
+	const $ = c(15);
+	const { children, className, style } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ new Set();
+		$[0] = t1;
+	} else t1 = $[0];
+	const membersRef = useRef(t1);
+	let t2;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => Array.from(membersRef.current).sort(compareDocumentOrder);
+		$[1] = t2;
+	} else t2 = $[1];
+	const getOrderedMembersRef = useRef(t2);
+	const getOrderedMembers = getOrderedMembersRef.current;
+	let t3;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = {
+			moveOpen(fromElement, direction) {
+				const members = getOrderedMembersRef.current();
+				if (members.length < 2) return;
+				const index = members.findIndex((member) => member.element === fromElement);
+				if (index === -1) return;
+				const nextIndex = (index + direction + members.length) % members.length;
+				members[index].close();
+				members[nextIndex].open();
+				members[nextIndex].focusTrigger();
+			},
+			notifyOpened(element) {
+				for (const member_0 of membersRef.current) if (member_0.element !== element && member_0.isOpen()) member_0.close();
+			},
+			registerMember(member_1) {
+				membersRef.current.add(member_1);
+				return () => {
+					membersRef.current.delete(member_1);
+				};
+			}
+		};
+		$[2] = t3;
+	} else t3 = $[2];
+	const contextValue = t3;
+	let t4;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = (event) => {
+			const { key } = event;
+			if (key !== "ArrowLeft" && key !== "ArrowRight") return;
+			const members_0 = getOrderedMembers();
+			if (members_0.length < 2) return;
+			if (members_0.some(_temp$1)) return;
+			const eventTarget = event.target;
+			const index_0 = members_0.findIndex((member_3) => member_3.element.contains(eventTarget));
+			if (index_0 === -1) return;
+			event.preventDefault();
+			event.stopPropagation();
+			members_0[(index_0 + (key === "ArrowRight" ? 1 : -1) + members_0.length) % members_0.length].focusTrigger();
+		};
+		$[3] = t4;
+	} else t4 = $[3];
+	const handleKeyDown = t4;
+	let t5;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = (eventTarget_0) => {
+			const members_1 = getOrderedMembers();
+			if (!members_1.some(_temp2)) return;
+			const member_5 = members_1.find((m) => m.element.contains(eventTarget_0));
+			if (!member_5 || member_5.isOpen()) return;
+			member_5.open();
+		};
+		$[4] = t5;
+	} else t5 = $[4];
+	const switchToMemberAt = t5;
+	let t6;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = (event_0) => {
+			switchToMemberAt(event_0.target);
+		};
+		$[5] = t6;
+	} else t6 = $[5];
+	const handleFocus = t6;
+	let t7;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = (event_1) => {
+			switchToMemberAt(event_1.target);
+		};
+		$[6] = t7;
+	} else t7 = $[6];
+	const handleMouseOver = t7;
+	let t8;
+	if ($[7] !== className) {
+		t8 = clsx("uktmenubar", className);
+		$[7] = className;
+		$[8] = t8;
+	} else t8 = $[8];
+	let t9;
+	if ($[9] !== children) {
+		t9 = /* @__PURE__ */ jsx(MenubarContext.Provider, {
+			value: contextValue,
+			children
+		});
+		$[9] = children;
+		$[10] = t9;
+	} else t9 = $[10];
+	let t10;
+	if ($[11] !== style || $[12] !== t8 || $[13] !== t9) {
+		t10 = /* @__PURE__ */ jsx("div", {
+			className: t8,
+			onFocus: handleFocus,
+			onKeyDown: handleKeyDown,
+			onMouseOver: handleMouseOver,
+			role: "menubar",
+			style,
+			children: t9
+		});
+		$[11] = style;
+		$[12] = t8;
+		$[13] = t9;
+		$[14] = t10;
+	} else t10 = $[14];
+	return t10;
+}
+function _temp2(member_4) {
+	return member_4.isOpen();
+}
+function _temp$1(member_2) {
+	return member_2.isOpen();
+}
+//#endregion
 //#region src/Dropdown.tsx
 var CHILDREN_ERROR = "@acusti/dropdown requires either 1 child (the dropdown body) or 2 children: the dropdown trigger and the dropdown body.";
 var CLICKABLE_SELECTOR = "button, a[href], input[type=\"button\"], input[type=\"submit\"]";
+var FOCUSABLE_SELECTOR = "a[href], button, input, select, textarea, [tabindex]";
 var TEXT_INPUT_SELECTOR = "input:not([type=radio]):not([type=checkbox]):not([type=range]),textarea";
-function Dropdown(t0) {
-	const $ = c(95);
-	const { allowCreate, allowEmpty: t1, children, className, disabled, hasItems: t2, isOpenOnMount, isSearchable, keepOpenOnSubmit: t3, label, minHeightBody, minWidthBody, name, onActiveItem, onClick, onClose, onMouseDown, onMouseUp, onOpen, onSubmitItem, placeholder, style: styleFromProps, tabIndex, value } = t0;
+var SUBMENU_DISCLOSURE_DELAY = 200;
+var SAFE_AREA_TIMEOUT = 300;
+function Dropdown(props) {
+	const $ = c(5);
+	const parentDropdown = useContext(DropdownContext);
+	if (parentDropdown && props.hasItems !== false) {
+		let t0;
+		if ($[0] !== parentDropdown || $[1] !== props) {
+			t0 = /* @__PURE__ */ jsx(SubmenuDropdown, {
+				...props,
+				parentDropdown
+			});
+			$[0] = parentDropdown;
+			$[1] = props;
+			$[2] = t0;
+		} else t0 = $[2];
+		return t0;
+	}
+	let t0;
+	if ($[3] !== props) {
+		t0 = /* @__PURE__ */ jsx(RootDropdown, { ...props });
+		$[3] = props;
+		$[4] = t0;
+	} else t0 = $[4];
+	return t0;
+}
+function RootDropdown(t0) {
+	const $ = c(130);
+	const { allowCreate, allowEmpty: t1, children, className, disabled, hasItems: t2, isOpenOnMount, isSearchable, keepOpenOnSubmit: t3, label, name, onActiveItem, onClick, onClose, onMouseDown, onMouseUp, onOpen, onSubmitItem, placeholder, style: styleFromProps, tabIndex, value } = t0;
 	const allowEmpty = t1 === void 0 ? true : t1;
 	const hasItems = t2 === void 0 ? true : t2;
 	const keepOpenOnSubmit = t3 === void 0 ? !hasItems : t3;
 	const childrenCount = Children.count(children);
 	if (childrenCount !== 1 && childrenCount !== 2) {
-		if (childrenCount === 0) throw new Error(CHILDREN_ERROR + " Received no children.");
+		if (childrenCount === 0) throw new Error("@acusti/dropdown requires either 1 child (the dropdown body) or 2 children: the dropdown trigger and the dropdown body. Received no children.");
 		console.error(`${CHILDREN_ERROR} Received ${childrenCount} children.`);
 	}
 	let trigger;
@@ -116,6 +402,7 @@ function Dropdown(t0) {
 	const [dropdownElement, setDropdownElement] = useState(null);
 	const bodyId = useId();
 	const popupRole = isSearchable ? "listbox" : hasItems ? "menu" : "dialog";
+	const menubar = useContext(MenubarContext);
 	const inputElementRef = useRef(null);
 	const closingTimerRef = useRef(null);
 	const isOpeningTimerRef = useRef(null);
@@ -123,6 +410,19 @@ function Dropdown(t0) {
 	const clearEnteredCharactersTimerRef = useRef(null);
 	const enteredCharactersRef = useRef("");
 	const mouseDownPositionRef = useRef(null);
+	const disclosureTimerRef = useRef(null);
+	const pendingDisclosureItemRef = useRef(null);
+	let t4;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ new Set();
+		$[0] = t4;
+	} else t4 = $[0];
+	const submenuRegistrationsRef = useRef(t4);
+	const pointerRef = useRef(null);
+	const lastMouseEventRef = useRef(null);
+	const safeAreaRef = useRef(null);
+	const safeAreaTimerRef = useRef(null);
+	const wasInSafeAreaRef = useRef(false);
 	const allowCreateRef = useRef(allowCreate);
 	const allowEmptyRef = useRef(allowEmpty);
 	const hasItemsRef = useRef(hasItems);
@@ -133,10 +433,10 @@ function Dropdown(t0) {
 	const onOpenRef = useRef(onOpen);
 	const onSubmitItemRef = useRef(onSubmitItem);
 	const valueRef = useRef(value);
-	let t4;
 	let t5;
-	if ($[0] !== allowCreate || $[1] !== allowEmpty || $[2] !== hasItems || $[3] !== isOpen || $[4] !== isOpening || $[5] !== keepOpenOnSubmit || $[6] !== onClose || $[7] !== onOpen || $[8] !== onSubmitItem || $[9] !== value) {
-		t4 = () => {
+	let t6;
+	if ($[1] !== allowCreate || $[2] !== allowEmpty || $[3] !== hasItems || $[4] !== isOpen || $[5] !== isOpening || $[6] !== keepOpenOnSubmit || $[7] !== onClose || $[8] !== onOpen || $[9] !== onSubmitItem || $[10] !== value) {
+		t5 = () => {
 			allowCreateRef.current = allowCreate;
 			allowEmptyRef.current = allowEmpty;
 			hasItemsRef.current = hasItems;
@@ -148,7 +448,7 @@ function Dropdown(t0) {
 			onSubmitItemRef.current = onSubmitItem;
 			valueRef.current = value;
 		};
-		t5 = [
+		t6 = [
 			allowCreate,
 			allowEmpty,
 			hasItems,
@@ -160,28 +460,28 @@ function Dropdown(t0) {
 			onSubmitItem,
 			value
 		];
-		$[0] = allowCreate;
-		$[1] = allowEmpty;
-		$[2] = hasItems;
-		$[3] = isOpen;
-		$[4] = isOpening;
-		$[5] = keepOpenOnSubmit;
-		$[6] = onClose;
-		$[7] = onOpen;
-		$[8] = onSubmitItem;
-		$[9] = value;
-		$[10] = t4;
+		$[1] = allowCreate;
+		$[2] = allowEmpty;
+		$[3] = hasItems;
+		$[4] = isOpen;
+		$[5] = isOpening;
+		$[6] = keepOpenOnSubmit;
+		$[7] = onClose;
+		$[8] = onOpen;
+		$[9] = onSubmitItem;
+		$[10] = value;
 		$[11] = t5;
+		$[12] = t6;
 	} else {
-		t4 = $[10];
 		t5 = $[11];
+		t6 = $[12];
 	}
-	useEffect(t4, t5);
+	useEffect(t5, t6);
 	const isMountedRef = useRef(false);
-	let t6;
 	let t7;
-	if ($[12] !== isOpen) {
-		t6 = () => {
+	let t8;
+	if ($[13] !== isOpen) {
+		t7 = () => {
 			if (!isMountedRef.current) {
 				isMountedRef.current = true;
 				if (isOpenRef.current && onOpenRef.current) onOpenRef.current();
@@ -190,38 +490,308 @@ function Dropdown(t0) {
 			if (isOpen && onOpenRef.current) onOpenRef.current();
 			else if (!isOpen && onCloseRef.current) onCloseRef.current();
 		};
-		t7 = [isOpen];
-		$[12] = isOpen;
-		$[13] = t6;
+		t8 = [isOpen];
+		$[13] = isOpen;
 		$[14] = t7;
+		$[15] = t8;
 	} else {
-		t6 = $[13];
 		t7 = $[14];
+		t8 = $[15];
 	}
-	useEffect(t6, t7);
-	let t8;
-	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = () => {
+	useEffect(t7, t8);
+	let t9;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = { registerSubmenu(registration) {
+			submenuRegistrationsRef.current.add(registration);
+			return () => {
+				submenuRegistrationsRef.current.delete(registration);
+			};
+		} };
+		$[16] = t9;
+	} else t9 = $[16];
+	const dropdownContextValue = t9;
+	let t10;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = (key, payload) => {
+			if (!payload.element) return;
+			for (const registration_0 of submenuRegistrationsRef.current) if (registration_0.element.contains(payload.element)) registration_0[key]?.(payload);
+		};
+		$[17] = t10;
+	} else t10 = $[17];
+	const dispatchToSubmenus = t10;
+	let t11;
+	if ($[18] !== onActiveItem) {
+		t11 = (payload_0) => {
+			onActiveItem?.(payload_0);
+			dispatchToSubmenus("onActiveItem", payload_0);
+		};
+		$[18] = onActiveItem;
+		$[19] = t11;
+	} else t11 = $[19];
+	const handleActiveItem = t11;
+	let t12;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = (item, isExpanded) => {
+			for (const registration_1 of submenuRegistrationsRef.current) if (registration_1.element === item) (isExpanded ? registration_1.onOpen : registration_1.onClose)?.();
+		};
+		$[20] = t12;
+	} else t12 = $[20];
+	const handleToggleSubmenu = t12;
+	let t13;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = () => {
+			if (disclosureTimerRef.current != null) {
+				clearTimeout(disclosureTimerRef.current);
+				disclosureTimerRef.current = null;
+			}
+			pendingDisclosureItemRef.current = null;
+		};
+		$[21] = t13;
+	} else t13 = $[21];
+	const clearDisclosureTimer = t13;
+	let t14;
+	let t15;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = () => clearDisclosureTimer;
+		t15 = [];
+		$[22] = t14;
+		$[23] = t15;
+	} else {
+		t14 = $[22];
+		t15 = $[23];
+	}
+	useEffect(t14, t15);
+	let t16;
+	if ($[24] !== dropdownElement) {
+		t16 = () => {
+			if (!dropdownElement) return;
+			const activeElement = getActiveItemElement(dropdownElement);
+			collapseItemsOutsidePath(dropdownElement, activeElement, handleToggleSubmenu);
+			const submenu = activeElement ? getSubmenuOfItem(activeElement) : null;
+			if (activeElement && submenu && !isItemExpanded(activeElement)) {
+				if (pendingDisclosureItemRef.current === activeElement) return;
+				clearDisclosureTimer();
+				pendingDisclosureItemRef.current = activeElement;
+				disclosureTimerRef.current = setTimeout(() => {
+					disclosureTimerRef.current = null;
+					pendingDisclosureItemRef.current = null;
+					if (!activeElement.hasAttribute("data-ukt-active")) return;
+					expandItem(activeElement, handleToggleSubmenu);
+				}, SUBMENU_DISCLOSURE_DELAY);
+				return;
+			}
+			clearDisclosureTimer();
+		};
+		$[24] = dropdownElement;
+		$[25] = t16;
+	} else t16 = $[25];
+	const syncSubmenuDisclosure = t16;
+	let t17;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = () => {
+			if (safeAreaTimerRef.current != null) {
+				clearTimeout(safeAreaTimerRef.current);
+				safeAreaTimerRef.current = null;
+			}
+		};
+		$[26] = t17;
+	} else t17 = $[26];
+	const clearSafeAreaTimer = t17;
+	let t18;
+	let t19;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = () => clearSafeAreaTimer;
+		t19 = [];
+		$[27] = t18;
+		$[28] = t19;
+	} else {
+		t18 = $[27];
+		t19 = $[28];
+	}
+	useEffect(t18, t19);
+	let t20;
+	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = (x, y) => {
+			const safeArea = safeAreaRef.current;
+			if (!safeArea || !isItemExpanded(safeArea.parent)) return false;
+			const submenu_0 = getSubmenuOfItem(safeArea.parent);
+			if (!submenu_0) return false;
+			const submenuRect = submenu_0.getBoundingClientRect();
+			const parentRect = safeArea.parent.getBoundingClientRect();
+			const nearX = submenuRect.left >= parentRect.right - 1 ? submenuRect.left : submenuRect.right;
+			return isPointInTriangle({
+				x,
+				y
+			}, safeArea.apex, {
+				x: nearX,
+				y: submenuRect.top
+			}, {
+				x: nearX,
+				y: submenuRect.bottom
+			});
+		};
+		$[29] = t20;
+	} else t20 = $[29];
+	const isPointerInSafeArea = t20;
+	let t21;
+	if ($[30] !== dropdownElement || $[31] !== handleActiveItem || $[32] !== syncSubmenuDisclosure) {
+		t21 = (targetElement) => {
+			clearSafeAreaTimer();
+			safeAreaRef.current = null;
+			wasInSafeAreaRef.current = false;
+			const pointer = pointerRef.current;
+			const target = targetElement ?? (pointer ? dropdownElement?.ownerDocument.elementFromPoint(pointer.x, pointer.y) : null);
+			if (!dropdownElement || !target || !dropdownElement.contains(target)) return;
+			const item_0 = getItemForTarget(dropdownElement, target);
+			const event = lastMouseEventRef.current;
+			if (item_0 && event) setActiveItem({
+				dropdownElement,
+				element: item_0,
+				event,
+				onActiveItem: handleActiveItem
+			});
+			syncSubmenuDisclosure();
+		};
+		$[30] = dropdownElement;
+		$[31] = handleActiveItem;
+		$[32] = syncSubmenuDisclosure;
+		$[33] = t21;
+	} else t21 = $[33];
+	const commitPointerTarget = t21;
+	let t22;
+	if ($[34] !== commitPointerTarget || $[35] !== dropdownElement) {
+		t22 = (event_0) => {
+			if (!dropdownElement || !isOpenRef.current || !hasItemsRef.current) return;
+			const pointer_0 = {
+				x: event_0.clientX,
+				y: event_0.clientY
+			};
+			pointerRef.current = pointer_0;
+			lastMouseEventRef.current = event_0.nativeEvent;
+			const parent = getDeepestExpandedItem(dropdownElement);
+			if (!parent) {
+				safeAreaRef.current = null;
+				wasInSafeAreaRef.current = false;
+				clearSafeAreaTimer();
+				return;
+			}
+			const target_0 = event_0.target;
+			const submenu_1 = getSubmenuOfItem(parent);
+			if (parent.contains(target_0) && !(submenu_1?.contains(target_0) ?? false)) {
+				safeAreaRef.current = {
+					apex: pointer_0,
+					parent
+				};
+				wasInSafeAreaRef.current = false;
+				clearSafeAreaTimer();
+				return;
+			}
+			if (safeAreaRef.current?.parent !== parent) safeAreaRef.current = null;
+			clearSafeAreaTimer();
+			if (isPointerInSafeArea(pointer_0.x, pointer_0.y)) {
+				wasInSafeAreaRef.current = true;
+				safeAreaTimerRef.current = setTimeout(commitPointerTarget, SAFE_AREA_TIMEOUT);
+			} else if (wasInSafeAreaRef.current) commitPointerTarget(target_0);
+		};
+		$[34] = commitPointerTarget;
+		$[35] = dropdownElement;
+		$[36] = t22;
+	} else t22 = $[36];
+	const trackSafeArea = t22;
+	let t23;
+	if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
+		t23 = () => {
 			setIsOpen(false);
 			setIsOpening(false);
 			mouseDownPositionRef.current = null;
+			clearDisclosureTimer();
+			clearSafeAreaTimer();
+			safeAreaRef.current = null;
+			wasInSafeAreaRef.current = false;
 			if (closingTimerRef.current != null) {
 				clearTimeout(closingTimerRef.current);
 				closingTimerRef.current = null;
 			}
 		};
-		$[15] = t8;
-	} else t8 = $[15];
-	const closeDropdown = t8;
-	let t9;
-	if ($[16] !== dropdownElement) {
-		t9 = (event) => {
+		$[37] = t23;
+	} else t23 = $[37];
+	const closeDropdown = t23;
+	let t24;
+	if ($[38] !== dropdownElement?.firstElementChild) {
+		t24 = () => {
+			const firstChild = dropdownElement?.firstElementChild;
+			if (!firstChild) return;
+			(firstChild.matches(FOCUSABLE_SELECTOR) ? firstChild : firstChild.querySelector(FOCUSABLE_SELECTOR))?.focus();
+		};
+		$[38] = dropdownElement?.firstElementChild;
+		$[39] = t24;
+	} else t24 = $[39];
+	const focusTrigger = t24;
+	let t25;
+	if ($[40] !== dropdownElement || $[41] !== focusTrigger || $[42] !== menubar) {
+		t25 = () => {
+			if (!menubar || !dropdownElement) return;
+			return menubar.registerMember({
+				close: closeDropdown,
+				element: dropdownElement,
+				focusTrigger,
+				isOpen: () => isOpenRef.current,
+				open: () => setIsOpen(true)
+			});
+		};
+		$[40] = dropdownElement;
+		$[41] = focusTrigger;
+		$[42] = menubar;
+		$[43] = t25;
+	} else t25 = $[43];
+	useEffect(t25);
+	let t26;
+	let t27;
+	if ($[44] !== dropdownElement || $[45] !== isOpen || $[46] !== menubar) {
+		t26 = () => {
+			if (isOpen && menubar && dropdownElement) menubar.notifyOpened(dropdownElement);
+		};
+		t27 = [
+			dropdownElement,
+			isOpen,
+			menubar
+		];
+		$[44] = dropdownElement;
+		$[45] = isOpen;
+		$[46] = menubar;
+		$[47] = t26;
+		$[48] = t27;
+	} else {
+		t26 = $[47];
+		t27 = $[48];
+	}
+	useEffect(t26, t27);
+	let t28;
+	if ($[49] !== dropdownElement || $[50] !== handleActiveItem) {
+		t28 = (event_1) => {
+			const element = hasItemsRef.current ? getActiveItemElement(dropdownElement) : null;
+			const submenuOfActive = element ? getSubmenuOfItem(element) : null;
+			if (element && submenuOfActive) {
+				clearDisclosureTimer();
+				expandItem(element, handleToggleSubmenu);
+				if (currentInputMethodRef.current === "keyboard" && dropdownElement) {
+					const firstItem = getItemElements(dropdownElement, submenuOfActive)?.[0];
+					if (firstItem) setActiveItem({
+						dropdownElement,
+						element: firstItem,
+						event: event_1,
+						onActiveItem: handleActiveItem
+					});
+				}
+				return;
+			}
 			if (isOpenRef.current && !keepOpenOnSubmitRef.current) closingTimerRef.current = setTimeout(closeDropdown, 90);
 			if (!hasItemsRef.current) return;
-			const element = getActiveItemElement(dropdownElement);
-			if (!element && !allowCreateRef.current) {
-				if (!allowEmptyRef.current) return;
-				if (inputElementRef.current?.value) return;
+			if (!element) {
+				if (!inputElementRef.current) return;
+				if (inputElementRef.current.value) {
+					if (!allowCreateRef.current) return;
+				} else if (!allowEmptyRef.current) return;
 			}
 			let itemLabel = element?.innerText ?? "";
 			if (inputElementRef.current) {
@@ -232,7 +802,7 @@ function Dropdown(t0) {
 			const nextValue = element?.dataset.uktValue ?? itemLabel;
 			if (valueRef.current && valueRef.current === nextValue) return;
 			if (element) {
-				const eventTarget = event.target;
+				const eventTarget = event_1.target;
 				if (element.matches(CLICKABLE_SELECTOR)) {
 					if (element !== eventTarget && !element.contains(eventTarget)) element.click();
 				} else {
@@ -243,142 +813,177 @@ function Dropdown(t0) {
 					}
 				}
 			}
-			onSubmitItemRef.current?.({
+			const payload_1 = {
 				element,
-				event,
+				event: event_1,
 				label: itemLabel,
+				path: getItemPath(element),
 				value: nextValue
-			});
+			};
+			onSubmitItemRef.current?.(payload_1);
+			dispatchToSubmenus("onSubmitItem", payload_1);
 		};
-		$[16] = dropdownElement;
-		$[17] = t9;
-	} else t9 = $[17];
-	const handleSubmitItem = t9;
-	let t10;
-	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = (t11) => {
-			const { clientX, clientY } = t11;
+		$[49] = dropdownElement;
+		$[50] = handleActiveItem;
+		$[51] = t28;
+	} else t28 = $[51];
+	const handleSubmitItem = t28;
+	let t29;
+	if ($[52] !== trackSafeArea) {
+		t29 = (event_2) => {
+			const { clientX, clientY } = event_2;
 			currentInputMethodRef.current = "mouse";
+			trackSafeArea(event_2);
 			const initialPosition = mouseDownPositionRef.current;
 			if (!initialPosition) return;
 			if (Math.abs(initialPosition.clientX - clientX) < 12 && Math.abs(initialPosition.clientY - clientY) < 12) return;
 			setIsOpening(false);
 		};
-		$[18] = t10;
-	} else t10 = $[18];
-	const handleMouseMove = t10;
-	let t11;
-	if ($[19] !== dropdownElement || $[20] !== onActiveItem) {
-		t11 = (event_0) => {
+		$[52] = trackSafeArea;
+		$[53] = t29;
+	} else t29 = $[53];
+	const handleMouseMove = t29;
+	let t30;
+	if ($[54] !== dropdownElement || $[55] !== handleActiveItem || $[56] !== syncSubmenuDisclosure) {
+		t30 = (event_3) => {
 			if (!hasItemsRef.current) return;
 			if (currentInputMethodRef.current !== "mouse") return;
 			if (!dropdownElement) return;
-			const itemElements = getItemElements(dropdownElement);
-			if (!itemElements) return;
-			const eventTarget_0 = event_0.target;
-			const element_0 = eventTarget_0.closest(ITEM_SELECTOR) ?? eventTarget_0;
-			for (const itemElement of itemElements) if (itemElement === element_0) {
-				setActiveItem({
-					dropdownElement,
-					element: element_0,
-					event: event_0,
-					onActiveItem
-				});
-				return;
-			}
+			const eventTarget_0 = event_3.target;
+			if (!eventTarget_0.closest(".uktdropdown-body")) return;
+			const hoveredRoot = eventTarget_0.closest(".uktdropdown");
+			if (hoveredRoot !== dropdownElement && hoveredRoot?.classList.contains("is-open")) return;
+			if (isPointerInSafeArea(event_3.clientX, event_3.clientY)) return;
+			const item_1 = getItemForTarget(dropdownElement, eventTarget_0);
+			if (!item_1) return;
+			setActiveItem({
+				dropdownElement,
+				element: item_1,
+				event: event_3,
+				onActiveItem: handleActiveItem
+			});
+			syncSubmenuDisclosure();
 		};
-		$[19] = dropdownElement;
-		$[20] = onActiveItem;
-		$[21] = t11;
-	} else t11 = $[21];
-	const handleMouseOver = t11;
-	let t12;
-	if ($[22] !== dropdownElement) {
-		t12 = (event_1) => {
+		$[54] = dropdownElement;
+		$[55] = handleActiveItem;
+		$[56] = syncSubmenuDisclosure;
+		$[57] = t30;
+	} else t30 = $[57];
+	const handleMouseOver = t30;
+	let t31;
+	if ($[58] !== dropdownElement || $[59] !== syncSubmenuDisclosure) {
+		t31 = (event_4) => {
 			if (!hasItemsRef.current) return;
+			const relatedTarget = event_4.relatedTarget;
+			if (!dropdownElement?.contains(relatedTarget)) {
+				clearSafeAreaTimer();
+				safeAreaRef.current = null;
+				wasInSafeAreaRef.current = false;
+			}
+			if (isPointerInSafeArea(event_4.clientX, event_4.clientY)) return;
 			const activeItem = getActiveItemElement(dropdownElement);
 			if (!activeItem) return;
-			const eventRelatedTarget = event_1.relatedTarget;
-			if (activeItem !== event_1.target || activeItem.contains(eventRelatedTarget)) return;
+			const eventRelatedTarget = event_4.relatedTarget;
+			if (activeItem !== event_4.target || activeItem.contains(eventRelatedTarget)) return;
 			delete activeItem.dataset.uktActive;
+			syncSubmenuDisclosure();
 		};
-		$[22] = dropdownElement;
-		$[23] = t12;
-	} else t12 = $[23];
-	const handleMouseOut = t12;
-	let t13;
-	if ($[24] !== onMouseDown) {
-		t13 = (event_2) => {
-			if (onMouseDown) onMouseDown(event_2);
+		$[58] = dropdownElement;
+		$[59] = syncSubmenuDisclosure;
+		$[60] = t31;
+	} else t31 = $[60];
+	const handleMouseOut = t31;
+	let t32;
+	if ($[61] !== onMouseDown) {
+		t32 = (event_5) => {
+			if (onMouseDown) onMouseDown(event_5);
 			if (isOpenRef.current) return;
 			setIsOpen(true);
 			setIsOpening(true);
 			mouseDownPositionRef.current = {
-				clientX: event_2.clientX,
-				clientY: event_2.clientY
+				clientX: event_5.clientX,
+				clientY: event_5.clientY
 			};
 			isOpeningTimerRef.current = setTimeout(() => {
 				setIsOpening(false);
 				isOpeningTimerRef.current = null;
 			}, 1e3);
 		};
-		$[24] = onMouseDown;
-		$[25] = t13;
-	} else t13 = $[25];
-	const handleMouseDown = t13;
-	let t14;
-	if ($[26] !== handleSubmitItem || $[27] !== onMouseUp) {
-		t14 = (event_3) => {
-			if (onMouseUp) onMouseUp(event_3);
+		$[61] = onMouseDown;
+		$[62] = t32;
+	} else t32 = $[62];
+	const handleMouseDown = t32;
+	let t33;
+	if ($[63] !== dropdownElement || $[64] !== handleActiveItem || $[65] !== handleSubmitItem || $[66] !== onMouseUp) {
+		t33 = (event_6) => {
+			if (onMouseUp) onMouseUp(event_6);
 			if (isOpeningRef.current || !isOpenRef.current || closingTimerRef.current != null) return;
-			const eventTarget_1 = event_3.target;
-			if (!eventTarget_1.closest(".uktdropdown-body")) {
+			const eventTarget_1 = event_6.target;
+			const clickedRoot = eventTarget_1.closest(".uktdropdown");
+			if (clickedRoot !== dropdownElement && clickedRoot?.classList.contains("is-open") && dropdownElement?.contains(clickedRoot)) return;
+			const targetBody = eventTarget_1.closest(".uktdropdown-body");
+			if (!Boolean(targetBody && targetBody.closest(".uktdropdown") === dropdownElement)) {
 				if (!isOpeningRef.current && inputElementRef.current !== eventTarget_1.ownerDocument.activeElement) closeDropdown();
 				return;
 			}
 			if (!hasItemsRef.current) return;
-			handleSubmitItem(event_3);
+			if (dropdownElement) {
+				const clickedItem = getItemForTarget(dropdownElement, eventTarget_1);
+				if (clickedItem) setActiveItem({
+					dropdownElement,
+					element: clickedItem,
+					event: event_6,
+					onActiveItem: handleActiveItem
+				});
+				else if (getActiveItemElement(dropdownElement)) return;
+			}
+			handleSubmitItem(event_6);
 		};
-		$[26] = handleSubmitItem;
-		$[27] = onMouseUp;
-		$[28] = t14;
-	} else t14 = $[28];
-	const handleMouseUp = t14;
-	let t15;
-	if ($[29] !== dropdownElement || $[30] !== handleSubmitItem || $[31] !== onActiveItem) {
-		t15 = (event_4) => {
-			const { altKey, ctrlKey, key, metaKey } = event_4;
-			const eventTarget_2 = event_4.target;
+		$[63] = dropdownElement;
+		$[64] = handleActiveItem;
+		$[65] = handleSubmitItem;
+		$[66] = onMouseUp;
+		$[67] = t33;
+	} else t33 = $[67];
+	const handleMouseUp = t33;
+	let t34;
+	if ($[68] !== dropdownElement || $[69] !== focusTrigger || $[70] !== handleActiveItem || $[71] !== handleSubmitItem || $[72] !== menubar || $[73] !== syncSubmenuDisclosure) {
+		t34 = (event_7) => {
+			const { altKey, ctrlKey, key: key_0, metaKey } = event_7;
+			const eventTarget_2 = event_7.target;
 			if (!dropdownElement) return;
 			const onEventHandled = () => {
-				event_4.stopPropagation();
-				event_4.preventDefault();
+				event_7.stopPropagation();
+				event_7.preventDefault();
 				currentInputMethodRef.current = "keyboard";
 			};
 			const isEventTargetingDropdown = dropdownElement.contains(eventTarget_2);
+			const nestedRoot = eventTarget_2.closest?.(".uktdropdown");
+			if (nestedRoot && nestedRoot !== dropdownElement && dropdownElement.contains(nestedRoot) && nestedRoot.classList.contains("is-open")) return;
 			if (!isOpenRef.current) {
 				if (!isEventTargetingDropdown) return;
-				if (key === " " || key === "Enter" || hasItemsRef.current && (key === "ArrowUp" || key === "ArrowDown")) {
+				if (key_0 === " " || key_0 === "Enter" || hasItemsRef.current && (key_0 === "ArrowUp" || key_0 === "ArrowDown")) {
 					onEventHandled();
 					setIsOpen(true);
 				}
 				return;
 			}
-			const isTargetUsingKeyEvents = isEventTargetUsingKeyEvent(event_4);
+			const isTargetUsingKeyEvents = isEventTargetUsingKeyEvent(event_7);
 			if (hasItemsRef.current && !isTargetUsingKeyEvents) {
-				let isEditingCharacters = !ctrlKey && !metaKey && /^[A-Za-z0-9]$/.test(key);
-				if (!isEditingCharacters && enteredCharactersRef.current) isEditingCharacters = key === " " || key === "Backspace";
+				let isEditingCharacters = !ctrlKey && !metaKey && /^[A-Za-z0-9]$/.test(key_0);
+				if (!isEditingCharacters && enteredCharactersRef.current) isEditingCharacters = key_0 === " " || key_0 === "Backspace";
 				if (isEditingCharacters) {
 					onEventHandled();
-					if (key === "Backspace") enteredCharactersRef.current = enteredCharactersRef.current.slice(0, -1);
-					else enteredCharactersRef.current = enteredCharactersRef.current + key;
+					if (key_0 === "Backspace") enteredCharactersRef.current = enteredCharactersRef.current.slice(0, -1);
+					else enteredCharactersRef.current = enteredCharactersRef.current + key_0;
 					setActiveItem({
 						dropdownElement,
-						event: event_4,
+						event: event_7,
 						isExactMatch: allowCreateRef.current,
-						onActiveItem,
+						onActiveItem: handleActiveItem,
 						text: enteredCharactersRef.current
 					});
+					syncSubmenuDisclosure();
 					if (clearEnteredCharactersTimerRef.current != null) clearTimeout(clearEnteredCharactersTimerRef.current);
 					clearEnteredCharactersTimerRef.current = setTimeout(() => {
 						enteredCharactersRef.current = "";
@@ -387,69 +992,117 @@ function Dropdown(t0) {
 					return;
 				}
 			}
-			if (key === "Enter" || key === " " && !inputElementRef.current) {
+			if (key_0 === "Enter" || key_0 === " " && !inputElementRef.current) {
 				onEventHandled();
-				handleSubmitItem(event_4);
+				handleSubmitItem(event_7);
 				return;
 			}
-			if (key === "Escape" || isEventTargetingDropdown && key === " " && !hasItemsRef.current) {
-				if (hasItemsRef.current || !isTargetUsingKeyEvents) closeDropdown();
+			if (key_0 === "Escape" || isEventTargetingDropdown && key_0 === " " && !hasItemsRef.current) {
+				if (hasItemsRef.current || !isTargetUsingKeyEvents) {
+					focusTrigger();
+					closeDropdown();
+				}
 				return;
 			}
 			if (hasItemsRef.current) {
-				if (key === "ArrowUp") {
+				if (key_0 === "ArrowUp") {
 					onEventHandled();
 					if (altKey || metaKey) setActiveItem({
 						dropdownElement,
-						event: event_4,
+						event: event_7,
 						index: 0,
-						onActiveItem
+						onActiveItem: handleActiveItem
 					});
 					else setActiveItem({
 						dropdownElement,
-						event: event_4,
+						event: event_7,
 						indexAddend: -1,
-						onActiveItem
+						onActiveItem: handleActiveItem
 					});
+					syncSubmenuDisclosure();
 					return;
 				}
-				if (key === "ArrowDown") {
+				if (key_0 === "ArrowDown") {
 					onEventHandled();
 					if (altKey || metaKey) setActiveItem({
 						dropdownElement,
-						event: event_4,
+						event: event_7,
 						index: -1,
-						onActiveItem
+						onActiveItem: handleActiveItem
 					});
 					else setActiveItem({
 						dropdownElement,
-						event: event_4,
+						event: event_7,
 						indexAddend: 1,
-						onActiveItem
+						onActiveItem: handleActiveItem
 					});
+					syncSubmenuDisclosure();
 					return;
 				}
+				if (!isTargetUsingKeyEvents) {
+					if (key_0 === "ArrowRight") {
+						const activeElement_0 = getActiveItemElement(dropdownElement);
+						const submenu_2 = activeElement_0 ? getSubmenuOfItem(activeElement_0) : null;
+						if (activeElement_0 && submenu_2) {
+							onEventHandled();
+							clearDisclosureTimer();
+							expandItem(activeElement_0, handleToggleSubmenu);
+							const firstItem_0 = getItemElements(dropdownElement, submenu_2)?.[0];
+							if (firstItem_0) setActiveItem({
+								dropdownElement,
+								element: firstItem_0,
+								event: event_7,
+								onActiveItem: handleActiveItem
+							});
+							return;
+						}
+						if (menubar) {
+							onEventHandled();
+							menubar.moveOpen(dropdownElement, 1);
+						}
+						return;
+					}
+					if (key_0 === "ArrowLeft") {
+						const activeElement_1 = getActiveItemElement(dropdownElement);
+						const levelRoot = activeElement_1 ? getLevelRoot(activeElement_1) : null;
+						if (levelRoot) {
+							onEventHandled();
+							clearDisclosureTimer();
+							const parentItem = getParentItem(levelRoot);
+							if (parentItem) collapseItem(parentItem, handleToggleSubmenu);
+							return;
+						}
+						if (menubar) {
+							onEventHandled();
+							menubar.moveOpen(dropdownElement, -1);
+						}
+						return;
+					}
+				}
 			}
 		};
-		$[29] = dropdownElement;
-		$[30] = handleSubmitItem;
-		$[31] = onActiveItem;
-		$[32] = t15;
-	} else t15 = $[32];
-	const handleKeyDown = t15;
-	let t16;
-	if ($[33] !== handleKeyDown) {
-		t16 = {
+		$[68] = dropdownElement;
+		$[69] = focusTrigger;
+		$[70] = handleActiveItem;
+		$[71] = handleSubmitItem;
+		$[72] = menubar;
+		$[73] = syncSubmenuDisclosure;
+		$[74] = t34;
+	} else t34 = $[74];
+	const handleKeyDown = t34;
+	let t35;
+	if ($[75] !== handleKeyDown) {
+		t35 = {
 			ignoreUsedKeyboardEvents: false,
 			onKeyDown: handleKeyDown
 		};
-		$[33] = handleKeyDown;
-		$[34] = t16;
-	} else t16 = $[34];
-	useKeyboardEvents(t16);
-	let t17;
-	if ($[35] !== isOpenOnMount || $[36] !== onActiveItem) {
-		t17 = (ref) => {
+		$[75] = handleKeyDown;
+		$[76] = t35;
+	} else t35 = $[76];
+	useKeyboardEvents(t35);
+	let t36;
+	if ($[77] !== handleActiveItem || $[78] !== isOpenOnMount) {
+		t36 = (ref) => {
 			setDropdownElement(ref);
 			if (!ref) return;
 			const { ownerDocument } = ref;
@@ -459,13 +1112,13 @@ function Dropdown(t0) {
 				else inputElement = ref.firstElementChild.querySelector(TEXT_INPUT_SELECTOR);
 				inputElementRef.current = inputElement;
 			}
-			const handleGlobalMouseDown = (t18) => {
-				const { target } = t18;
-				const eventTarget_3 = target;
+			const handleGlobalMouseDown = (t37) => {
+				const { target: target_1 } = t37;
+				const eventTarget_3 = target_1;
 				if (!ref.contains(eventTarget_3)) closeDropdown();
 			};
-			const handleGlobalMouseUp = (t19) => {
-				const { target: target_0 } = t19;
+			const handleGlobalMouseUp = (t38) => {
+				const { target: target_2 } = t38;
 				if (!isOpenRef.current || closingTimerRef.current != null) return;
 				if (isOpeningRef.current) {
 					setIsOpening(false);
@@ -475,13 +1128,13 @@ function Dropdown(t0) {
 					}
 					return;
 				}
-				const eventTarget_4 = target_0;
+				const eventTarget_4 = target_2;
 				if (!ref.contains(eventTarget_4)) closeDropdown();
 			};
-			const handleGlobalFocusIn = (t20) => {
-				const { target: target_1 } = t20;
+			const handleGlobalFocusIn = (t39) => {
+				const { target: target_3 } = t39;
 				if (!isOpenRef.current) return;
-				const eventTarget_5 = target_1;
+				const eventTarget_5 = target_3;
 				if (ref.contains(eventTarget_5) || eventTarget_5.contains(ref)) return;
 				closeDropdown();
 			};
@@ -494,17 +1147,17 @@ function Dropdown(t0) {
 				ownerDocument.addEventListener("mouseup", handleGlobalMouseUp);
 			}
 			if (isOpenOnMount) ref.focus();
-			const handleInput = (event_5) => {
+			const handleInput = (event_8) => {
 				if (!isOpenRef.current) setIsOpen(true);
-				const input = event_5.target;
+				const input = event_8.target;
 				const isDeleting = enteredCharactersRef.current.length > input.value.length;
 				enteredCharactersRef.current = input.value;
 				if (isDeleting && input.value.length && getActiveItemElement(ref)) return;
 				setActiveItem({
 					dropdownElement: ref,
-					event: event_5,
+					event: event_8,
 					isExactMatch: allowCreateRef.current,
-					onActiveItem,
+					onActiveItem: handleActiveItem,
 					text: enteredCharactersRef.current
 				});
 			};
@@ -521,50 +1174,51 @@ function Dropdown(t0) {
 				if (inputElement) inputElement.removeEventListener("input", handleInput);
 			};
 		};
-		$[35] = isOpenOnMount;
-		$[36] = onActiveItem;
-		$[37] = t17;
-	} else t17 = $[37];
-	const handleRef = t17;
+		$[77] = handleActiveItem;
+		$[78] = isOpenOnMount;
+		$[79] = t36;
+	} else t36 = $[79];
+	const handleRef = t36;
+	const handleBodyRef = _temp;
 	if (!isValidElement(trigger)) if (isSearchable) {
-		const t18 = value ?? "";
-		let t19;
-		if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
-			t19 = () => setIsOpen(true);
-			$[38] = t19;
-		} else t19 = $[38];
-		let t20;
-		if ($[39] !== bodyId || $[40] !== disabled || $[41] !== isOpen || $[42] !== name || $[43] !== placeholder || $[44] !== popupRole || $[45] !== t18 || $[46] !== tabIndex) {
-			t20 = /* @__PURE__ */ jsx("input", {
+		const t37 = value ?? "";
+		let t38;
+		if ($[80] === Symbol.for("react.memo_cache_sentinel")) {
+			t38 = () => setIsOpen(true);
+			$[80] = t38;
+		} else t38 = $[80];
+		let t39;
+		if ($[81] !== bodyId || $[82] !== disabled || $[83] !== isOpen || $[84] !== name || $[85] !== placeholder || $[86] !== popupRole || $[87] !== t37 || $[88] !== tabIndex) {
+			t39 = /* @__PURE__ */ jsx("input", {
 				"aria-controls": bodyId,
 				"aria-expanded": isOpen,
 				"aria-haspopup": popupRole,
 				autoComplete: "off",
 				className: "uktdropdown-trigger",
-				defaultValue: t18,
+				defaultValue: t37,
 				disabled,
 				name,
-				onFocus: t19,
+				onFocus: t38,
 				placeholder,
 				ref: inputElementRef,
 				tabIndex,
 				type: "text"
 			});
-			$[39] = bodyId;
-			$[40] = disabled;
-			$[41] = isOpen;
-			$[42] = name;
-			$[43] = placeholder;
-			$[44] = popupRole;
-			$[45] = t18;
-			$[46] = tabIndex;
-			$[47] = t20;
-		} else t20 = $[47];
-		trigger = t20;
+			$[81] = bodyId;
+			$[82] = disabled;
+			$[83] = isOpen;
+			$[84] = name;
+			$[85] = placeholder;
+			$[86] = popupRole;
+			$[87] = t37;
+			$[88] = tabIndex;
+			$[89] = t39;
+		} else t39 = $[89];
+		trigger = t39;
 	} else {
-		let t18;
-		if ($[48] !== bodyId || $[49] !== isOpen || $[50] !== popupRole || $[51] !== trigger) {
-			t18 = /* @__PURE__ */ jsx("button", {
+		let t37;
+		if ($[90] !== bodyId || $[91] !== isOpen || $[92] !== popupRole || $[93] !== trigger) {
+			t37 = /* @__PURE__ */ jsx("button", {
 				"aria-controls": bodyId,
 				"aria-expanded": isOpen,
 				"aria-haspopup": popupRole,
@@ -573,127 +1227,107 @@ function Dropdown(t0) {
 				type: "button",
 				children: trigger
 			});
-			$[48] = bodyId;
-			$[49] = isOpen;
-			$[50] = popupRole;
-			$[51] = trigger;
-			$[52] = t18;
-		} else t18 = $[52];
-		trigger = t18;
+			$[90] = bodyId;
+			$[91] = isOpen;
+			$[92] = popupRole;
+			$[93] = trigger;
+			$[94] = t37;
+		} else t37 = $[94];
+		trigger = t37;
 	}
 	else {
 		const triggerProps = trigger.props;
-		const t18 = trigger;
-		const t19 = triggerProps["aria-controls"] ?? bodyId;
-		const t20 = triggerProps["aria-expanded"] ?? isOpen;
-		const t21 = triggerProps["aria-haspopup"] ?? popupRole;
-		let t22;
-		if ($[53] !== t18 || $[54] !== t19 || $[55] !== t20 || $[56] !== t21) {
-			t22 = cloneElement(t18, {
-				"aria-controls": t19,
-				"aria-expanded": t20,
-				"aria-haspopup": t21
+		const t37 = trigger;
+		const t38 = triggerProps["aria-controls"] ?? bodyId;
+		const t39 = triggerProps["aria-expanded"] ?? isOpen;
+		const t40 = triggerProps["aria-haspopup"] ?? popupRole;
+		let t41;
+		if ($[95] !== t37 || $[96] !== t38 || $[97] !== t39 || $[98] !== t40) {
+			t41 = cloneElement(t37, {
+				"aria-controls": t38,
+				"aria-expanded": t39,
+				"aria-haspopup": t40
 			});
-			$[53] = t18;
-			$[54] = t19;
-			$[55] = t20;
-			$[56] = t21;
-			$[57] = t22;
-		} else t22 = $[57];
-		trigger = t22;
+			$[95] = t37;
+			$[96] = t38;
+			$[97] = t39;
+			$[98] = t40;
+			$[99] = t41;
+		} else t41 = $[99];
+		trigger = t41;
 	}
 	if (label != null) {
-		let t18;
-		if ($[58] !== label) {
-			t18 = /* @__PURE__ */ jsx("div", {
+		let t37;
+		if ($[100] !== label) {
+			t37 = /* @__PURE__ */ jsx("div", {
 				className: "uktdropdown-label-text",
 				children: label
 			});
-			$[58] = label;
-			$[59] = t18;
-		} else t18 = $[59];
-		let t19;
-		if ($[60] !== t18 || $[61] !== trigger) {
-			t19 = /* @__PURE__ */ jsxs("label", {
+			$[100] = label;
+			$[101] = t37;
+		} else t37 = $[101];
+		let t38;
+		if ($[102] !== t37 || $[103] !== trigger) {
+			t38 = /* @__PURE__ */ jsxs("label", {
 				className: "uktdropdown-label",
-				children: [t18, trigger]
+				children: [t37, trigger]
 			});
-			$[60] = t18;
-			$[61] = trigger;
-			$[62] = t19;
-		} else t19 = $[62];
-		trigger = t19;
+			$[102] = t37;
+			$[103] = trigger;
+			$[104] = t38;
+		} else t38 = $[104];
+		trigger = t38;
 	}
-	let t18;
-	if ($[63] !== minHeightBody) {
-		t18 = minHeightBody != null && minHeightBody > 0 ? { "--uktdd-body-min-height": `${minHeightBody}px` } : null;
-		$[63] = minHeightBody;
-		$[64] = t18;
-	} else t18 = $[64];
-	let t19;
-	if ($[65] !== minWidthBody) {
-		t19 = minWidthBody != null && minWidthBody > 0 ? { "--uktdd-body-min-width": `${minWidthBody}px` } : null;
-		$[65] = minWidthBody;
-		$[66] = t19;
-	} else t19 = $[66];
-	let t20;
-	if ($[67] !== styleFromProps || $[68] !== t18 || $[69] !== t19) {
-		t20 = {
-			...styleFromProps,
-			...t18,
-			...t19
-		};
-		$[67] = styleFromProps;
-		$[68] = t18;
-		$[69] = t19;
-		$[70] = t20;
-	} else t20 = $[70];
-	const style = t20;
-	let t21;
-	if ($[71] === Symbol.for("react.memo_cache_sentinel")) {
-		t21 = /* @__PURE__ */ jsx("style", {
+	let t37;
+	if ($[105] === Symbol.for("react.memo_cache_sentinel")) {
+		t37 = /* @__PURE__ */ jsx("style", {
 			href: "@acusti/dropdown/Dropdown",
 			precedence: "medium",
 			children: Dropdown_default
 		});
-		$[71] = t21;
-	} else t21 = $[71];
-	let t22;
-	if ($[72] !== className || $[73] !== disabled || $[74] !== isOpen || $[75] !== isSearchable) {
-		t22 = clsx("uktdropdown", className, {
+		$[105] = t37;
+	} else t37 = $[105];
+	let t38;
+	if ($[106] !== className || $[107] !== disabled || $[108] !== isOpen || $[109] !== isSearchable) {
+		t38 = clsx("uktdropdown", className, {
 			disabled,
 			"is-open": isOpen,
 			"is-searchable": isSearchable
 		});
-		$[72] = className;
-		$[73] = disabled;
-		$[74] = isOpen;
-		$[75] = isSearchable;
-		$[76] = t22;
-	} else t22 = $[76];
-	let t23;
-	if ($[77] !== bodyId || $[78] !== children || $[79] !== childrenCount || $[80] !== hasItems || $[81] !== isOpen || $[82] !== popupRole) {
-		t23 = isOpen ? /* @__PURE__ */ jsx("div", {
+		$[106] = className;
+		$[107] = disabled;
+		$[108] = isOpen;
+		$[109] = isSearchable;
+		$[110] = t38;
+	} else t38 = $[110];
+	let t39;
+	if ($[111] !== bodyId || $[112] !== children || $[113] !== childrenCount || $[114] !== hasItems || $[115] !== isOpen || $[116] !== popupRole) {
+		t39 = isOpen ? /* @__PURE__ */ jsx("div", {
 			className: clsx("uktdropdown-body", { "has-items": hasItems }),
 			id: bodyId,
+			popover: "manual",
+			ref: handleBodyRef,
 			role: popupRole,
 			children: /* @__PURE__ */ jsx("div", {
 				className: "uktdropdown-content",
-				children: childrenCount > 1 ? children[1] : children
+				children: /* @__PURE__ */ jsx(DropdownContext.Provider, {
+					value: dropdownContextValue,
+					children: childrenCount > 1 ? children[1] : children
+				})
 			})
 		}) : null;
-		$[77] = bodyId;
-		$[78] = children;
-		$[79] = childrenCount;
-		$[80] = hasItems;
-		$[81] = isOpen;
-		$[82] = popupRole;
-		$[83] = t23;
-	} else t23 = $[83];
-	let t24;
-	if ($[84] !== handleMouseDown || $[85] !== handleMouseOut || $[86] !== handleMouseOver || $[87] !== handleMouseUp || $[88] !== handleRef || $[89] !== onClick || $[90] !== style || $[91] !== t22 || $[92] !== t23 || $[93] !== trigger) {
-		t24 = /* @__PURE__ */ jsxs(Fragment, { children: [t21, /* @__PURE__ */ jsxs("div", {
-			className: t22,
+		$[111] = bodyId;
+		$[112] = children;
+		$[113] = childrenCount;
+		$[114] = hasItems;
+		$[115] = isOpen;
+		$[116] = popupRole;
+		$[117] = t39;
+	} else t39 = $[117];
+	let t40;
+	if ($[118] !== handleMouseDown || $[119] !== handleMouseMove || $[120] !== handleMouseOut || $[121] !== handleMouseOver || $[122] !== handleMouseUp || $[123] !== handleRef || $[124] !== onClick || $[125] !== styleFromProps || $[126] !== t38 || $[127] !== t39 || $[128] !== trigger) {
+		t40 = /* @__PURE__ */ jsxs(Fragment, { children: [t37, /* @__PURE__ */ jsxs("div", {
+			className: t38,
 			onClick,
 			onMouseDown: handleMouseDown,
 			onMouseMove: handleMouseMove,
@@ -701,24 +1335,129 @@ function Dropdown(t0) {
 			onMouseOver: handleMouseOver,
 			onMouseUp: handleMouseUp,
 			ref: handleRef,
-			style,
-			children: [trigger, t23]
+			style: styleFromProps,
+			children: [trigger, t39]
 		})] });
-		$[84] = handleMouseDown;
-		$[85] = handleMouseOut;
-		$[86] = handleMouseOver;
-		$[87] = handleMouseUp;
-		$[88] = handleRef;
-		$[89] = onClick;
-		$[90] = style;
-		$[91] = t22;
-		$[92] = t23;
-		$[93] = trigger;
-		$[94] = t24;
-	} else t24 = $[94];
-	return t24;
+		$[118] = handleMouseDown;
+		$[119] = handleMouseMove;
+		$[120] = handleMouseOut;
+		$[121] = handleMouseOver;
+		$[122] = handleMouseUp;
+		$[123] = handleRef;
+		$[124] = onClick;
+		$[125] = styleFromProps;
+		$[126] = t38;
+		$[127] = t39;
+		$[128] = trigger;
+		$[129] = t40;
+	} else t40 = $[129];
+	return t40;
+}
+function _temp(ref_0) {
+	if (!ref_0) return;
+	annotateParentItems(ref_0);
+	ref_0.showPopover();
+}
+var INERT_SUBMENU_PROPS = [
+	"allowCreate",
+	"allowEmpty",
+	"isOpenOnMount",
+	"isSearchable",
+	"keepOpenOnSubmit",
+	"name",
+	"placeholder",
+	"tabIndex",
+	"value"
+];
+function SubmenuDropdown(props) {
+	const $ = c(17);
+	const { children, className, disabled, label, onActiveItem, onClose, onOpen, onSubmitItem, parentDropdown, style } = props;
+	const itemRef = useRef(null);
+	let t0;
+	let t1;
+	if ($[0] !== onActiveItem || $[1] !== onClose || $[2] !== onOpen || $[3] !== onSubmitItem || $[4] !== parentDropdown) {
+		t0 = () => {
+			const element = itemRef.current;
+			if (!element) return;
+			return parentDropdown.registerSubmenu({
+				element,
+				onActiveItem,
+				onClose,
+				onOpen,
+				onSubmitItem
+			});
+		};
+		t1 = [
+			onActiveItem,
+			onClose,
+			onOpen,
+			onSubmitItem,
+			parentDropdown
+		];
+		$[0] = onActiveItem;
+		$[1] = onClose;
+		$[2] = onOpen;
+		$[3] = onSubmitItem;
+		$[4] = parentDropdown;
+		$[5] = t0;
+		$[6] = t1;
+	} else {
+		t0 = $[5];
+		t1 = $[6];
+	}
+	useEffect(t0, t1);
+	const warnedRef = useRef(false);
+	let t2;
+	if ($[7] !== props) {
+		t2 = () => {
+			if (warnedRef.current) return;
+			const inertProps = INERT_SUBMENU_PROPS.filter((propName) => props[propName] !== void 0);
+			if (!inertProps.length) return;
+			warnedRef.current = true;
+			console.error(`@acusti/dropdown: ${inertProps.join(", ")} only apply to a top-level Dropdown and are ignored on a nested (submenu) Dropdown.`);
+		};
+		$[7] = props;
+		$[8] = t2;
+	} else t2 = $[8];
+	useEffect(t2);
+	const childrenCount = Children.count(children);
+	let labelContent = label;
+	let body = children;
+	if (childrenCount > 1) {
+		labelContent = children[0];
+		body = children[1];
+	}
+	let t3;
+	if ($[9] !== body) {
+		t3 = isValidElement(body) ? cloneElement(body, { "data-ukt-submenu": "" }) : /* @__PURE__ */ jsx("div", {
+			"data-ukt-submenu": "",
+			children: body
+		});
+		$[9] = body;
+		$[10] = t3;
+	} else t3 = $[10];
+	const submenu = t3;
+	const t4 = disabled || void 0;
+	let t5;
+	if ($[11] !== className || $[12] !== labelContent || $[13] !== style || $[14] !== submenu || $[15] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("li", {
+			"aria-disabled": t4,
+			className,
+			"data-ukt-item": "",
+			ref: itemRef,
+			style,
+			children: [labelContent, submenu]
+		});
+		$[11] = className;
+		$[12] = labelContent;
+		$[13] = style;
+		$[14] = submenu;
+		$[15] = t4;
+		$[16] = t5;
+	} else t5 = $[16];
+	return t5;
 }
 //#endregion
-export { Dropdown as default };
+export { Menubar, Dropdown as default };
 
 //# sourceMappingURL=Dropdown.js.map