@acusti/dropdown 1.0.0-alpha.4 → 1.0.0-alpha.6

package/dist/Dropdown.js

@@ -9,7 +9,7 @@ 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:.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:block-end span-inline-end;--uktdd-body-position-try-fallbacks:--uktdd-top-start, --uktdd-bottom-end, --uktdd-top-end;--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-start{position-area: block-start span-inline-end;}@position-try --uktdd-bottom-start{position-area: block-end span-inline-end;}@position-try --uktdd-bottom-end{position-area: block-end span-inline-start;}@position-try --uktdd-top-end{position-area: block-start span-inline-start;}@position-try --uktdd-submenu-inline-start{position-area: inline-start span-block-end;}";
+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-bg-color-selected:#0000000f;--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:block-end span-inline-end;--uktdd-body-position-try-fallbacks:--uktdd-top-start, --uktdd-bottom-end, --uktdd-top-end;--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-fallbacks:var(--uktdd-body-position-try-fallbacks), --uktdd-fill, --uktdd-fill flip-inline, --uktdd-fill flip-block, --uktdd-fill flip-block flip-inline;min-block-size:min(var(--uktdd-body-min-height), var(--uktdd-body-max-height));max-block-size:var(--uktdd-body-max-height);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 [aria-selected=true]{background-color:var(--uktdd-body-bg-color-selected)}.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-submenu]:not([popover]){display:none}.uktdropdown-body [data-ukt-submenu]{box-sizing:border-box;block-size:auto;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), --uktdd-fill, --uktdd-fill flip-inline, --uktdd-fill flip-block, --uktdd-fill flip-block flip-inline;z-index:2;margin-block:0;margin-inline:var(--uktdd-submenu-gap);--uktdd-body-gap:0;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);min-block-size:min(var(--uktdd-body-min-height), var(--uktdd-body-max-height));max-block-size:var(--uktdd-body-max-height);overscroll-behavior:contain;background-color:var(--uktdd-body-bg-color);border:0;list-style:none;position:fixed;inset:auto;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-start{position-area: block-start span-inline-end;}@position-try --uktdd-bottom-start{position-area: block-end span-inline-end;}@position-try --uktdd-bottom-end{position-area: block-end span-inline-start;}@position-try --uktdd-top-end{position-area: block-start span-inline-start;}@position-try --uktdd-submenu-inline-start{position-area: inline-start span-block-end;}@position-try --uktdd-fill{block-size: calc(100% - var(--uktdd-body-gap) * 2);}";
 //#endregion
 //#region src/helpers.ts
 var ITEM_SELECTOR = "[data-ukt-item], [data-ukt-value]";
@@ -29,6 +29,36 @@ var getItemLabel = (item) => {
 	for (const submenu of Array.from(clone.querySelectorAll(SUBMENU_SELECTOR))) submenu.remove();
 	return (clone.textContent ?? "").trim();
 };
+var getNodeText = (node) => {
+	let text = "";
+	Children.forEach(node, (child) => {
+		if (typeof child === "string" || typeof child === "number") text += child;
+		else if (isValidElement(child)) {
+			const childProps = child.props;
+			if (childProps["data-ukt-submenu"] !== void 0) return;
+			text += getNodeText(childProps.children);
+		}
+	});
+	return text;
+};
+var getLabelFromChildren = (children, value) => {
+	let label;
+	const visit = (node) => {
+		if (label != null) return;
+		Children.forEach(node, (child) => {
+			if (label != null || !isValidElement(child)) return;
+			const childProps = child.props;
+			const uktValue = childProps["data-ukt-value"];
+			if (uktValue != null && String(uktValue) === value) {
+				label = getNodeText(childProps.children).replace(/\s+/g, " ").trim();
+				return;
+			}
+			visit(childProps.children);
+		});
+	};
+	visit(children);
+	return label;
+};
 var getItemPath = (element) => {
 	const path = [];
 	if (!element) return path;
@@ -86,9 +116,10 @@ var getDeepestExpandedItem = (dropdownElement) => {
 };
 var isItemExpanded = (item) => item.getAttribute("aria-expanded") === "true";
 var submenuIdCounter = 0;
-var ensureSubmenuAria = (item, submenu) => {
+var ensureSubmenuARIA = (item, submenu) => {
 	if (!submenu.hasAttribute("role")) submenu.setAttribute("role", "menu");
 	if (!submenu.id) submenu.id = `uktdd-submenu-${++submenuIdCounter}`;
+	if (submenu.getAttribute("popover") !== "manual") submenu.setAttribute("popover", "manual");
 	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);
@@ -97,13 +128,23 @@ 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);
+		if (item) ensureSubmenuARIA(item, submenu);
+	}
+};
+var annotateItemRoles = (bodyElement, popupRole) => {
+	if (!bodyElement) return;
+	for (const list of Array.from(bodyElement.querySelectorAll("ul, ol"))) if (!list.hasAttribute("role") && list.querySelector("[data-ukt-item], [data-ukt-value]")) list.setAttribute("role", "presentation");
+	for (const item of Array.from(bodyElement.querySelectorAll(ITEM_SELECTOR))) {
+		if (item.hasAttribute("role") || item.matches("a[href], button, input, select, textarea")) continue;
+		const isMenuItem = popupRole === "menu" || getLevelRoot(item) != null;
+		if (!isMenuItem && getSubmenuOfItem(item)) continue;
+		item.setAttribute("role", isMenuItem ? "menuitem" : "option");
 	}
 };
 var expandItem = (item, onToggleSubmenu) => {
 	const submenu = getSubmenuOfItem(item);
 	if (!submenu) return;
-	ensureSubmenuAria(item, submenu);
+	ensureSubmenuARIA(item, submenu);
 	if (isItemExpanded(item)) return;
 	item.setAttribute("aria-expanded", "true");
 	onToggleSubmenu?.(item, true);
@@ -182,15 +223,16 @@ var setActiveItem = ({ dropdownElement, element, event, index, indexAddend, isEx
 	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
-	});
+	if (event) {
+		const label = getItemLabel(nextActiveItem);
+		onActiveItem?.({
+			element: nextActiveItem,
+			event,
+			label,
+			path: getItemPath(nextActiveItem),
+			value: nextActiveItem.dataset.uktValue ?? label
+		});
+	}
 	let { parentElement } = nextActiveItem;
 	let scrollableParent = null;
 	while (!scrollableParent && parentElement && parentElement !== dropdownElement) if (parentElement.scrollHeight > parentElement.clientHeight + 15) scrollableParent = parentElement;
@@ -280,7 +322,7 @@ function Menubar(t0) {
 			if (key !== "ArrowLeft" && key !== "ArrowRight") return;
 			const members_0 = getOrderedMembers();
 			if (members_0.length < 2) return;
-			if (members_0.some(_temp$1)) return;
+			if (members_0.some(_temp)) return;
 			const eventTarget = event.target;
 			const index_0 = members_0.findIndex((member_3) => member_3.element.contains(eventTarget));
 			if (index_0 === -1) return;
@@ -360,7 +402,7 @@ function Menubar(t0) {
 	} else t10 = $[14];
 	return t10;
 }
-function _temp$1(member_2) {
+function _temp(member_2) {
 	return member_2.isOpen();
 }
 //#endregion
@@ -397,7 +439,7 @@ function Dropdown(props) {
 	return t0;
 }
 function RootDropdown(t0) {
-	const $ = c(147);
+	const $ = c(158);
 	const { allowCreate, allowEmpty: t1, children, className, disabled, hasItems: t2, isOpenOnMount, isSearchable, keepOpenOnSubmit: t3, label, name, onActiveItem, onClick, onClose, onMouseDown, onMouseUp, onOpen, onSubmitItem, openOnHover, placeholder, style: styleFromProps, tabIndex, value } = t0;
 	const allowEmpty = t1 === void 0 ? true : t1;
 	const hasItems = t2 === void 0 ? true : t2;
@@ -409,6 +451,18 @@ function RootDropdown(t0) {
 	}
 	let trigger;
 	if (childrenCount > 1) trigger = children[0];
+	const body = childrenCount > 1 ? children[1] : children;
+	const valueIdentity = typeof value === "string" ? value : value?.value;
+	let t4;
+	if ($[0] !== allowCreate || $[1] !== body || $[2] !== isSearchable || $[3] !== value) {
+		t4 = !isSearchable ? void 0 : typeof value !== "string" ? value?.label : getLabelFromChildren(body, value) ?? (allowCreate ? value : void 0);
+		$[0] = allowCreate;
+		$[1] = body;
+		$[2] = isSearchable;
+		$[3] = value;
+		$[4] = t4;
+	} else t4 = $[4];
+	const valueLabel = t4;
 	const [isOpen, setIsOpen] = useState(isOpenOnMount ?? false);
 	const [isOpening, setIsOpening] = useState(!isOpenOnMount);
 	const [dropdownElement, setDropdownElement] = useState(null);
@@ -416,6 +470,13 @@ function RootDropdown(t0) {
 	const popupRole = isSearchable ? "listbox" : hasItems ? "menu" : "dialog";
 	const menubar = useContext(MenubarContext);
 	const inputElementRef = useRef(null);
+	const consumerOwnsARIASelectedRef = useRef(false);
+	let t5;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ new WeakSet();
+		$[5] = t5;
+	} else t5 = $[5];
+	const annotatedBodiesRef = useRef(t5);
 	const closingTimerRef = useRef(null);
 	const isOpeningTimerRef = useRef(null);
 	const currentInputMethodRef = useRef("mouse");
@@ -424,12 +485,12 @@ function RootDropdown(t0) {
 	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);
+	let t6;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ new Set();
+		$[6] = t6;
+	} else t6 = $[6];
+	const submenuRegistrationsRef = useRef(t6);
 	const pointerRef = useRef(null);
 	const lastMouseEventRef = useRef(null);
 	const safeAreaRef = useRef(null);
@@ -445,11 +506,11 @@ function RootDropdown(t0) {
 	const onCloseRef = useRef(onClose);
 	const onOpenRef = useRef(onOpen);
 	const onSubmitItemRef = useRef(onSubmitItem);
-	const valueRef = useRef(value);
-	let t5;
-	let t6;
-	if ($[1] !== allowCreate || $[2] !== allowEmpty || $[3] !== hasItems || $[4] !== isOpen || $[5] !== isOpening || $[6] !== keepOpenOnSubmit || $[7] !== onClose || $[8] !== onOpen || $[9] !== onSubmitItem || $[10] !== value) {
-		t5 = () => {
+	const valueRef = useRef(valueIdentity);
+	let t7;
+	let t8;
+	if ($[7] !== allowCreate || $[8] !== allowEmpty || $[9] !== hasItems || $[10] !== isOpen || $[11] !== isOpening || $[12] !== keepOpenOnSubmit || $[13] !== onClose || $[14] !== onOpen || $[15] !== onSubmitItem || $[16] !== valueIdentity) {
+		t7 = () => {
 			allowCreateRef.current = allowCreate;
 			allowEmptyRef.current = allowEmpty;
 			hasItemsRef.current = hasItems;
@@ -459,9 +520,9 @@ function RootDropdown(t0) {
 			onCloseRef.current = onClose;
 			onOpenRef.current = onOpen;
 			onSubmitItemRef.current = onSubmitItem;
-			valueRef.current = value;
+			valueRef.current = valueIdentity;
 		};
-		t6 = [
+		t8 = [
 			allowCreate,
 			allowEmpty,
 			hasItems,
@@ -471,30 +532,30 @@ function RootDropdown(t0) {
 			onClose,
 			onOpen,
 			onSubmitItem,
-			value
+			valueIdentity
 		];
-		$[1] = allowCreate;
-		$[2] = allowEmpty;
-		$[3] = hasItems;
-		$[4] = isOpen;
-		$[5] = isOpening;
-		$[6] = keepOpenOnSubmit;
-		$[7] = onClose;
-		$[8] = onOpen;
-		$[9] = onSubmitItem;
-		$[10] = value;
-		$[11] = t5;
-		$[12] = t6;
+		$[7] = allowCreate;
+		$[8] = allowEmpty;
+		$[9] = hasItems;
+		$[10] = isOpen;
+		$[11] = isOpening;
+		$[12] = keepOpenOnSubmit;
+		$[13] = onClose;
+		$[14] = onOpen;
+		$[15] = onSubmitItem;
+		$[16] = valueIdentity;
+		$[17] = t7;
+		$[18] = t8;
 	} else {
-		t5 = $[11];
-		t6 = $[12];
+		t7 = $[17];
+		t8 = $[18];
 	}
-	useEffect(t5, t6);
+	useEffect(t7, t8);
 	const isMountedRef = useRef(false);
-	let t7;
-	let t8;
-	if ($[13] !== isOpen) {
-		t7 = () => {
+	let t10;
+	let t9;
+	if ($[19] !== isOpen) {
+		t9 = () => {
 			if (!isMountedRef.current) {
 				isMountedRef.current = true;
 				if (isOpenRef.current && onOpenRef.current) onOpenRef.current();
@@ -503,85 +564,91 @@ function RootDropdown(t0) {
 			if (isOpen && onOpenRef.current) onOpenRef.current();
 			else if (!isOpen && onCloseRef.current) onCloseRef.current();
 		};
-		t8 = [isOpen];
-		$[13] = isOpen;
-		$[14] = t7;
-		$[15] = t8;
+		t10 = [isOpen];
+		$[19] = isOpen;
+		$[20] = t10;
+		$[21] = t9;
 	} else {
-		t7 = $[14];
-		t8 = $[15];
+		t10 = $[20];
+		t9 = $[21];
 	}
-	useEffect(t7, t8);
-	let t9;
-	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = { registerSubmenu(registration) {
+	useEffect(t9, t10);
+	let t11;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = { 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) => {
+		$[22] = t11;
+	} else t11 = $[22];
+	const dropdownContextValue = t11;
+	let t12;
+	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = (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) => {
+		$[23] = t12;
+	} else t12 = $[23];
+	const dispatchToSubmenus = t12;
+	let t13;
+	if ($[24] !== onActiveItem) {
+		t13 = (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) => {
+		$[24] = onActiveItem;
+		$[25] = t13;
+	} else t13 = $[25];
+	const handleActiveItem = t13;
+	let t14;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = (item, isExpanded) => {
+			const submenu = getSubmenuOfItem(item);
+			if (submenu) {
+				const isShown = submenu.matches(":popover-open");
+				if (isExpanded && !isShown) submenu.showPopover();
+				else if (!isExpanded && isShown) submenu.hidePopover();
+			}
 			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 = () => {
+		$[26] = t14;
+	} else t14 = $[26];
+	const handleToggleSubmenu = t14;
+	let t15;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = () => {
 			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;
+		$[27] = t15;
+	} else t15 = $[27];
+	const clearDisclosureTimer = t15;
+	let t16;
+	let t17;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = () => clearDisclosureTimer;
+		t17 = [];
+		$[28] = t16;
+		$[29] = t17;
 	} else {
-		t14 = $[22];
-		t15 = $[23];
+		t16 = $[28];
+		t17 = $[29];
 	}
-	useEffect(t14, t15);
-	let t16;
-	if ($[24] !== dropdownElement) {
-		t16 = () => {
+	useEffect(t16, t17);
+	let t18;
+	if ($[30] !== dropdownElement) {
+		t18 = () => {
 			if (!dropdownElement) return;
 			const activeElement = getActiveItemElement(dropdownElement);
 			collapseItemsOutsidePath(dropdownElement, activeElement, handleToggleSubmenu);
-			const submenu = activeElement ? getSubmenuOfItem(activeElement) : null;
-			if (activeElement && submenu && !isItemExpanded(activeElement)) {
+			const submenu_0 = activeElement ? getSubmenuOfItem(activeElement) : null;
+			if (activeElement && submenu_0 && !isItemExpanded(activeElement)) {
 				if (pendingDisclosureItemRef.current === activeElement) return;
 				clearDisclosureTimer();
 				pendingDisclosureItemRef.current = activeElement;
@@ -595,41 +662,41 @@ function RootDropdown(t0) {
 			}
 			clearDisclosureTimer();
 		};
-		$[24] = dropdownElement;
-		$[25] = t16;
-	} else t16 = $[25];
-	const syncSubmenuDisclosure = t16;
-	let t17;
-	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
-		t17 = () => {
+		$[30] = dropdownElement;
+		$[31] = t18;
+	} else t18 = $[31];
+	const syncSubmenuDisclosure = t18;
+	let t19;
+	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = () => {
 			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;
+		$[32] = t19;
+	} else t19 = $[32];
+	const clearSafeAreaTimer = t19;
+	let t20;
+	let t21;
+	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = () => clearSafeAreaTimer;
+		t21 = [];
+		$[33] = t20;
+		$[34] = t21;
 	} else {
-		t18 = $[27];
-		t19 = $[28];
+		t20 = $[33];
+		t21 = $[34];
 	}
-	useEffect(t18, t19);
-	let t20;
-	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
-		t20 = (x, y) => {
+	useEffect(t20, t21);
+	let t22;
+	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+		t22 = (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 submenu_1 = getSubmenuOfItem(safeArea.parent);
+			if (!submenu_1) return false;
+			const submenuRect = submenu_1.getBoundingClientRect();
 			const parentRect = safeArea.parent.getBoundingClientRect();
 			const nearX = submenuRect.left >= parentRect.right - 1 ? submenuRect.left : submenuRect.right;
 			return isPointInTriangle({
@@ -643,12 +710,12 @@ function RootDropdown(t0) {
 				y: submenuRect.bottom
 			});
 		};
-		$[29] = t20;
-	} else t20 = $[29];
-	const isPointerInSafeArea = t20;
-	let t21;
-	if ($[30] !== dropdownElement || $[31] !== handleActiveItem || $[32] !== syncSubmenuDisclosure) {
-		t21 = (targetElement) => {
+		$[35] = t22;
+	} else t22 = $[35];
+	const isPointerInSafeArea = t22;
+	let t23;
+	if ($[36] !== dropdownElement || $[37] !== handleActiveItem || $[38] !== syncSubmenuDisclosure) {
+		t23 = (targetElement) => {
 			clearSafeAreaTimer();
 			safeAreaRef.current = null;
 			wasInSafeAreaRef.current = false;
@@ -665,15 +732,15 @@ function RootDropdown(t0) {
 			});
 			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) => {
+		$[36] = dropdownElement;
+		$[37] = handleActiveItem;
+		$[38] = syncSubmenuDisclosure;
+		$[39] = t23;
+	} else t23 = $[39];
+	const commitPointerTarget = t23;
+	let t24;
+	if ($[40] !== commitPointerTarget || $[41] !== dropdownElement) {
+		t24 = (event_0) => {
 			if (!dropdownElement || !isOpenRef.current || !hasItemsRef.current) return;
 			const pointer_0 = {
 				x: event_0.clientX,
@@ -689,8 +756,8 @@ function RootDropdown(t0) {
 				return;
 			}
 			const target_0 = event_0.target;
-			const submenu_1 = getSubmenuOfItem(parent);
-			if (parent.contains(target_0) && !(submenu_1?.contains(target_0) ?? false)) {
+			const submenu_2 = getSubmenuOfItem(parent);
+			if (parent.contains(target_0) && !(submenu_2?.contains(target_0) ?? false)) {
 				safeAreaRef.current = {
 					apex: pointer_0,
 					parent
@@ -706,37 +773,37 @@ function RootDropdown(t0) {
 				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 = () => {
+		$[40] = commitPointerTarget;
+		$[41] = dropdownElement;
+		$[42] = t24;
+	} else t24 = $[42];
+	const trackSafeArea = t24;
+	let t25;
+	if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+		t25 = () => {
 			if (hoverCloseTimerRef.current != null) {
 				clearTimeout(hoverCloseTimerRef.current);
 				hoverCloseTimerRef.current = null;
 			}
 		};
-		$[37] = t23;
-	} else t23 = $[37];
-	const clearHoverCloseTimer = t23;
-	let t24;
-	let t25;
-	if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
-		t24 = () => clearHoverCloseTimer;
-		t25 = [];
-		$[38] = t24;
-		$[39] = t25;
+		$[43] = t25;
+	} else t25 = $[43];
+	const clearHoverCloseTimer = t25;
+	let t26;
+	let t27;
+	if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+		t26 = () => clearHoverCloseTimer;
+		t27 = [];
+		$[44] = t26;
+		$[45] = t27;
 	} else {
-		t24 = $[38];
-		t25 = $[39];
+		t26 = $[44];
+		t27 = $[45];
 	}
-	useEffect(t24, t25);
-	let t26;
-	if ($[40] !== dropdownElement || $[41] !== menubar) {
-		t26 = (options) => {
+	useEffect(t26, t27);
+	let t28;
+	if ($[46] !== dropdownElement || $[47] !== menubar) {
+		t28 = (options) => {
 			setIsOpen(false);
 			setIsOpening(false);
 			mouseDownPositionRef.current = null;
@@ -751,51 +818,51 @@ function RootDropdown(t0) {
 			}
 			if (menubar && dropdownElement && !options?.keepMenubarEngaged) menubar.notifyClosed(dropdownElement);
 		};
-		$[40] = dropdownElement;
-		$[41] = menubar;
-		$[42] = t26;
-	} else t26 = $[42];
-	const closeDropdown = t26;
-	let t27;
-	if ($[43] !== openOnHover) {
-		t27 = () => {
+		$[46] = dropdownElement;
+		$[47] = menubar;
+		$[48] = t28;
+	} else t28 = $[48];
+	const closeDropdown = t28;
+	let t29;
+	if ($[49] !== openOnHover) {
+		t29 = () => {
 			clearHoverCloseTimer();
 			if (!openOnHover || isOpenRef.current) return;
 			setIsOpen(true);
 			setIsOpening(false);
 		};
-		$[43] = openOnHover;
-		$[44] = t27;
-	} else t27 = $[44];
-	const handleDropdownMouseEnter = t27;
-	let t28;
-	if ($[45] !== closeDropdown || $[46] !== openOnHover) {
-		t28 = () => {
+		$[49] = openOnHover;
+		$[50] = t29;
+	} else t29 = $[50];
+	const handleDropdownMouseEnter = t29;
+	let t30;
+	if ($[51] !== closeDropdown || $[52] !== openOnHover) {
+		t30 = () => {
 			if (!openOnHover || !isOpenRef.current || hoverCloseTimerRef.current != null) return;
 			hoverCloseTimerRef.current = setTimeout(() => {
 				hoverCloseTimerRef.current = null;
 				closeDropdown();
 			}, HOVER_CLOSE_DELAY);
 		};
-		$[45] = closeDropdown;
-		$[46] = openOnHover;
-		$[47] = t28;
-	} else t28 = $[47];
-	const handleDropdownMouseLeave = t28;
-	let t29;
-	if ($[48] !== dropdownElement?.firstElementChild) {
-		t29 = () => {
+		$[51] = closeDropdown;
+		$[52] = openOnHover;
+		$[53] = t30;
+	} else t30 = $[53];
+	const handleDropdownMouseLeave = t30;
+	let t31;
+	if ($[54] !== dropdownElement?.firstElementChild) {
+		t31 = () => {
 			const firstChild = dropdownElement?.firstElementChild;
 			if (!firstChild) return;
 			(firstChild.matches(FOCUSABLE_SELECTOR) ? firstChild : firstChild.querySelector(FOCUSABLE_SELECTOR))?.focus();
 		};
-		$[48] = dropdownElement?.firstElementChild;
-		$[49] = t29;
-	} else t29 = $[49];
-	const focusTrigger = t29;
-	let t30;
-	if ($[50] !== closeDropdown || $[51] !== dropdownElement || $[52] !== focusTrigger || $[53] !== menubar) {
-		t30 = () => {
+		$[54] = dropdownElement?.firstElementChild;
+		$[55] = t31;
+	} else t31 = $[55];
+	const focusTrigger = t31;
+	let t32;
+	if ($[56] !== closeDropdown || $[57] !== dropdownElement || $[58] !== focusTrigger || $[59] !== menubar) {
+		t32 = () => {
 			if (!menubar || !dropdownElement) return;
 			return menubar.registerMember({
 				close: () => closeDropdown({ keepMenubarEngaged: true }),
@@ -805,37 +872,37 @@ function RootDropdown(t0) {
 				open: () => setIsOpen(true)
 			});
 		};
-		$[50] = closeDropdown;
-		$[51] = dropdownElement;
-		$[52] = focusTrigger;
-		$[53] = menubar;
-		$[54] = t30;
-	} else t30 = $[54];
-	useEffect(t30);
-	let t31;
-	let t32;
-	if ($[55] !== dropdownElement || $[56] !== isOpen || $[57] !== menubar) {
-		t31 = () => {
+		$[56] = closeDropdown;
+		$[57] = dropdownElement;
+		$[58] = focusTrigger;
+		$[59] = menubar;
+		$[60] = t32;
+	} else t32 = $[60];
+	useEffect(t32);
+	let t33;
+	let t34;
+	if ($[61] !== dropdownElement || $[62] !== isOpen || $[63] !== menubar) {
+		t33 = () => {
 			if (isOpen && menubar && dropdownElement) menubar.notifyOpened(dropdownElement);
 		};
-		t32 = [
+		t34 = [
 			dropdownElement,
 			isOpen,
 			menubar
 		];
-		$[55] = dropdownElement;
-		$[56] = isOpen;
-		$[57] = menubar;
-		$[58] = t31;
-		$[59] = t32;
+		$[61] = dropdownElement;
+		$[62] = isOpen;
+		$[63] = menubar;
+		$[64] = t33;
+		$[65] = t34;
 	} else {
-		t31 = $[58];
-		t32 = $[59];
+		t33 = $[64];
+		t34 = $[65];
 	}
-	useEffect(t31, t32);
-	let t33;
-	if ($[60] !== closeDropdown || $[61] !== dropdownElement || $[62] !== handleActiveItem) {
-		t33 = (event_1) => {
+	useEffect(t33, t34);
+	let t35;
+	if ($[66] !== closeDropdown || $[67] !== dropdownElement || $[68] !== handleActiveItem || $[69] !== popupRole) {
+		t35 = (event_1) => {
 			const element = hasItemsRef.current ? getActiveItemElement(dropdownElement) : null;
 			const submenuOfActive = element ? getSubmenuOfItem(element) : null;
 			if (element && submenuOfActive) {
@@ -868,6 +935,11 @@ function RootDropdown(t0) {
 			}
 			const nextValue = element?.dataset.uktValue ?? itemLabel;
 			if (valueRef.current && valueRef.current === nextValue) return;
+			if (element && keepOpenOnSubmitRef.current && popupRole === "listbox" && !consumerOwnsARIASelectedRef.current) {
+				const bodyElement = element.closest(".uktdropdown-body");
+				for (const selected of Array.from(bodyElement?.querySelectorAll("[aria-selected=\"true\"]") ?? [])) selected.removeAttribute("aria-selected");
+				element.setAttribute("aria-selected", "true");
+			}
 			if (element) {
 				const eventTarget = event_1.target;
 				if (element.matches(CLICKABLE_SELECTOR)) {
@@ -890,15 +962,16 @@ function RootDropdown(t0) {
 			onSubmitItemRef.current?.(payload_1);
 			dispatchToSubmenus("onSubmitItem", payload_1);
 		};
-		$[60] = closeDropdown;
-		$[61] = dropdownElement;
-		$[62] = handleActiveItem;
-		$[63] = t33;
-	} else t33 = $[63];
-	const handleSubmitItem = t33;
-	let t34;
-	if ($[64] !== trackSafeArea) {
-		t34 = (event_2) => {
+		$[66] = closeDropdown;
+		$[67] = dropdownElement;
+		$[68] = handleActiveItem;
+		$[69] = popupRole;
+		$[70] = t35;
+	} else t35 = $[70];
+	const handleSubmitItem = t35;
+	let t36;
+	if ($[71] !== trackSafeArea) {
+		t36 = (event_2) => {
 			const { clientX, clientY } = event_2;
 			currentInputMethodRef.current = "mouse";
 			trackSafeArea(event_2);
@@ -907,13 +980,13 @@ function RootDropdown(t0) {
 			if (Math.abs(initialPosition.clientX - clientX) < 12 && Math.abs(initialPosition.clientY - clientY) < 12) return;
 			setIsOpening(false);
 		};
-		$[64] = trackSafeArea;
-		$[65] = t34;
-	} else t34 = $[65];
-	const handleMouseMove = t34;
-	let t35;
-	if ($[66] !== dropdownElement || $[67] !== handleActiveItem || $[68] !== syncSubmenuDisclosure) {
-		t35 = (event_3) => {
+		$[71] = trackSafeArea;
+		$[72] = t36;
+	} else t36 = $[72];
+	const handleMouseMove = t36;
+	let t37;
+	if ($[73] !== dropdownElement || $[74] !== handleActiveItem || $[75] !== syncSubmenuDisclosure) {
+		t37 = (event_3) => {
 			if (!hasItemsRef.current) return;
 			if (currentInputMethodRef.current !== "mouse") return;
 			if (!dropdownElement) return;
@@ -932,15 +1005,15 @@ function RootDropdown(t0) {
 			});
 			syncSubmenuDisclosure();
 		};
-		$[66] = dropdownElement;
-		$[67] = handleActiveItem;
-		$[68] = syncSubmenuDisclosure;
-		$[69] = t35;
-	} else t35 = $[69];
-	const handleMouseOver = t35;
-	let t36;
-	if ($[70] !== dropdownElement || $[71] !== syncSubmenuDisclosure) {
-		t36 = (event_4) => {
+		$[73] = dropdownElement;
+		$[74] = handleActiveItem;
+		$[75] = syncSubmenuDisclosure;
+		$[76] = t37;
+	} else t37 = $[76];
+	const handleMouseOver = t37;
+	let t38;
+	if ($[77] !== dropdownElement || $[78] !== syncSubmenuDisclosure) {
+		t38 = (event_4) => {
 			if (!hasItemsRef.current) return;
 			const relatedTarget = event_4.relatedTarget;
 			if (!dropdownElement?.contains(relatedTarget)) {
@@ -956,14 +1029,14 @@ function RootDropdown(t0) {
 			delete activeItem.dataset.uktActive;
 			syncSubmenuDisclosure();
 		};
-		$[70] = dropdownElement;
-		$[71] = syncSubmenuDisclosure;
-		$[72] = t36;
-	} else t36 = $[72];
-	const handleMouseOut = t36;
-	let t37;
-	if ($[73] !== onMouseDown) {
-		t37 = (event_5) => {
+		$[77] = dropdownElement;
+		$[78] = syncSubmenuDisclosure;
+		$[79] = t38;
+	} else t38 = $[79];
+	const handleMouseOut = t38;
+	let t39;
+	if ($[80] !== onMouseDown) {
+		t39 = (event_5) => {
 			if (onMouseDown) onMouseDown(event_5);
 			if (isOpenRef.current) return;
 			setIsOpen(true);
@@ -977,13 +1050,13 @@ function RootDropdown(t0) {
 				isOpeningTimerRef.current = null;
 			}, 1e3);
 		};
-		$[73] = onMouseDown;
-		$[74] = t37;
-	} else t37 = $[74];
-	const handleMouseDown = t37;
-	let t38;
-	if ($[75] !== closeDropdown || $[76] !== dropdownElement || $[77] !== handleActiveItem || $[78] !== handleSubmitItem || $[79] !== onMouseUp) {
-		t38 = (event_6) => {
+		$[80] = onMouseDown;
+		$[81] = t39;
+	} else t39 = $[81];
+	const handleMouseDown = t39;
+	let t40;
+	if ($[82] !== closeDropdown || $[83] !== dropdownElement || $[84] !== handleActiveItem || $[85] !== handleSubmitItem || $[86] !== onMouseUp) {
+		t40 = (event_6) => {
 			if (onMouseUp) onMouseUp(event_6);
 			if (isOpeningRef.current || !isOpenRef.current || closingTimerRef.current != null) return;
 			const eventTarget_1 = event_6.target;
@@ -1007,17 +1080,17 @@ function RootDropdown(t0) {
 			}
 			handleSubmitItem(event_6);
 		};
-		$[75] = closeDropdown;
-		$[76] = dropdownElement;
-		$[77] = handleActiveItem;
-		$[78] = handleSubmitItem;
-		$[79] = onMouseUp;
-		$[80] = t38;
-	} else t38 = $[80];
-	const handleMouseUp = t38;
-	let t39;
-	if ($[81] !== closeDropdown || $[82] !== dropdownElement || $[83] !== focusTrigger || $[84] !== handleActiveItem || $[85] !== handleSubmitItem || $[86] !== menubar || $[87] !== syncSubmenuDisclosure) {
-		t39 = (event_7) => {
+		$[82] = closeDropdown;
+		$[83] = dropdownElement;
+		$[84] = handleActiveItem;
+		$[85] = handleSubmitItem;
+		$[86] = onMouseUp;
+		$[87] = t40;
+	} else t40 = $[87];
+	const handleMouseUp = t40;
+	let t41;
+	if ($[88] !== closeDropdown || $[89] !== dropdownElement || $[90] !== focusTrigger || $[91] !== handleActiveItem || $[92] !== handleSubmitItem || $[93] !== menubar || $[94] !== syncSubmenuDisclosure) {
+		t41 = (event_7) => {
 			const { altKey, ctrlKey, key: key_0, metaKey } = event_7;
 			const eventTarget_2 = event_7.target;
 			if (!dropdownElement) return;
@@ -1111,12 +1184,12 @@ function RootDropdown(t0) {
 				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) {
+						const submenu_3 = activeElement_0 ? getSubmenuOfItem(activeElement_0) : null;
+						if (activeElement_0 && submenu_3) {
 							onEventHandled();
 							clearDisclosureTimer();
 							expandItem(activeElement_0, handleToggleSubmenu);
-							const firstItem_0 = getItemElements(dropdownElement, submenu_2)?.[0];
+							const firstItem_0 = getItemElements(dropdownElement, submenu_3)?.[0];
 							if (firstItem_0) setActiveItem({
 								dropdownElement,
 								element: firstItem_0,
@@ -1150,29 +1223,29 @@ function RootDropdown(t0) {
 				}
 			}
 		};
-		$[81] = closeDropdown;
-		$[82] = dropdownElement;
-		$[83] = focusTrigger;
-		$[84] = handleActiveItem;
-		$[85] = handleSubmitItem;
-		$[86] = menubar;
-		$[87] = syncSubmenuDisclosure;
-		$[88] = t39;
-	} else t39 = $[88];
-	const handleKeyDown = t39;
-	let t40;
-	if ($[89] !== handleKeyDown) {
-		t40 = {
+		$[88] = closeDropdown;
+		$[89] = dropdownElement;
+		$[90] = focusTrigger;
+		$[91] = handleActiveItem;
+		$[92] = handleSubmitItem;
+		$[93] = menubar;
+		$[94] = syncSubmenuDisclosure;
+		$[95] = t41;
+	} else t41 = $[95];
+	const handleKeyDown = t41;
+	let t42;
+	if ($[96] !== handleKeyDown) {
+		t42 = {
 			ignoreUsedKeyboardEvents: false,
 			onKeyDown: handleKeyDown
 		};
-		$[89] = handleKeyDown;
-		$[90] = t40;
-	} else t40 = $[90];
-	useKeyboardEvents(t40);
-	let t41;
-	if ($[91] !== closeDropdown || $[92] !== handleActiveItem || $[93] !== isOpenOnMount) {
-		t41 = (ref) => {
+		$[96] = handleKeyDown;
+		$[97] = t42;
+	} else t42 = $[97];
+	useKeyboardEvents(t42);
+	let t43;
+	if ($[98] !== closeDropdown || $[99] !== handleActiveItem || $[100] !== isOpenOnMount) {
+		t43 = (ref) => {
 			setDropdownElement(ref);
 			if (!ref) return;
 			const { ownerDocument } = ref;
@@ -1182,13 +1255,13 @@ function RootDropdown(t0) {
 				else inputElement = ref.firstElementChild.querySelector(TEXT_INPUT_SELECTOR);
 				inputElementRef.current = inputElement;
 			}
-			const handleGlobalMouseDown = (t42) => {
-				const { target: target_1 } = t42;
+			const handleGlobalMouseDown = (t44) => {
+				const { target: target_1 } = t44;
 				const eventTarget_3 = target_1;
 				if (!ref.contains(eventTarget_3)) closeDropdown();
 			};
-			const handleGlobalMouseUp = (t43) => {
-				const { target: target_2 } = t43;
+			const handleGlobalMouseUp = (t45) => {
+				const { target: target_2 } = t45;
 				if (!isOpenRef.current || closingTimerRef.current != null) return;
 				if (isOpeningRef.current) {
 					setIsOpening(false);
@@ -1201,8 +1274,8 @@ function RootDropdown(t0) {
 				const eventTarget_4 = target_2;
 				if (!ref.contains(eventTarget_4)) closeDropdown();
 			};
-			const handleGlobalFocusIn = (t44) => {
-				const { target: target_3 } = t44;
+			const handleGlobalFocusIn = (t46) => {
+				const { target: target_3 } = t46;
 				if (!isOpenRef.current) return;
 				const eventTarget_5 = target_3;
 				if (ref.contains(eventTarget_5) || eventTarget_5.contains(ref)) return;
@@ -1244,52 +1317,78 @@ function RootDropdown(t0) {
 				if (inputElement) inputElement.removeEventListener("input", handleInput);
 			};
 		};
-		$[91] = closeDropdown;
-		$[92] = handleActiveItem;
-		$[93] = isOpenOnMount;
-		$[94] = t41;
-	} else t41 = $[94];
-	const handleRef = t41;
-	const handleBodyRef = _temp;
+		$[98] = closeDropdown;
+		$[99] = handleActiveItem;
+		$[100] = isOpenOnMount;
+		$[101] = t43;
+	} else t43 = $[101];
+	const handleRef = t43;
+	let t44;
+	if ($[102] !== dropdownElement || $[103] !== popupRole || $[104] !== valueIdentity) {
+		t44 = (ref_0) => {
+			if (!ref_0) return;
+			if (annotatedBodiesRef.current.has(ref_0)) return;
+			annotatedBodiesRef.current.add(ref_0);
+			consumerOwnsARIASelectedRef.current = ref_0.querySelector("[aria-selected]") != null;
+			annotateParentItems(ref_0);
+			if (popupRole !== "dialog") annotateItemRoles(ref_0, popupRole);
+			ref_0.showPopover();
+			if (valueIdentity != null && dropdownElement) {
+				const selectedItem = getItemElements(dropdownElement)?.find((item_2) => item_2.dataset.uktValue === valueIdentity);
+				if (selectedItem) {
+					if (popupRole === "listbox" && !consumerOwnsARIASelectedRef.current) selectedItem.setAttribute("aria-selected", "true");
+					setActiveItem({
+						dropdownElement,
+						element: selectedItem
+					});
+				}
+			}
+		};
+		$[102] = dropdownElement;
+		$[103] = popupRole;
+		$[104] = valueIdentity;
+		$[105] = t44;
+	} else t44 = $[105];
+	const handleBodyRef = t44;
 	if (!isValidElement(trigger)) if (isSearchable) {
-		const t42 = value ?? "";
-		let t43;
-		if ($[95] === Symbol.for("react.memo_cache_sentinel")) {
-			t43 = () => setIsOpen(true);
-			$[95] = t43;
-		} else t43 = $[95];
-		let t44;
-		if ($[96] !== bodyId || $[97] !== disabled || $[98] !== isOpen || $[99] !== name || $[100] !== placeholder || $[101] !== popupRole || $[102] !== t42 || $[103] !== tabIndex) {
-			t44 = /* @__PURE__ */ jsx("input", {
+		const t45 = valueLabel ?? "";
+		let t46;
+		if ($[106] === Symbol.for("react.memo_cache_sentinel")) {
+			t46 = () => setIsOpen(true);
+			$[106] = t46;
+		} else t46 = $[106];
+		let t47;
+		if ($[107] !== bodyId || $[108] !== disabled || $[109] !== isOpen || $[110] !== name || $[111] !== placeholder || $[112] !== popupRole || $[113] !== t45 || $[114] !== tabIndex) {
+			t47 = /* @__PURE__ */ jsx("input", {
 				"aria-controls": bodyId,
 				"aria-expanded": isOpen,
 				"aria-haspopup": popupRole,
 				autoComplete: "off",
 				className: "uktdropdown-trigger",
-				defaultValue: t42,
+				defaultValue: t45,
 				disabled,
 				name,
-				onFocus: t43,
+				onFocus: t46,
 				placeholder,
 				ref: inputElementRef,
 				tabIndex,
 				type: "text"
 			});
-			$[96] = bodyId;
-			$[97] = disabled;
-			$[98] = isOpen;
-			$[99] = name;
-			$[100] = placeholder;
-			$[101] = popupRole;
-			$[102] = t42;
-			$[103] = tabIndex;
-			$[104] = t44;
-		} else t44 = $[104];
-		trigger = t44;
+			$[107] = bodyId;
+			$[108] = disabled;
+			$[109] = isOpen;
+			$[110] = name;
+			$[111] = placeholder;
+			$[112] = popupRole;
+			$[113] = t45;
+			$[114] = tabIndex;
+			$[115] = t47;
+		} else t47 = $[115];
+		trigger = t47;
 	} else {
-		let t42;
-		if ($[105] !== bodyId || $[106] !== isOpen || $[107] !== popupRole || $[108] !== trigger) {
-			t42 = /* @__PURE__ */ jsx("button", {
+		let t45;
+		if ($[116] !== bodyId || $[117] !== isOpen || $[118] !== popupRole || $[119] !== trigger) {
+			t45 = /* @__PURE__ */ jsx("button", {
 				"aria-controls": bodyId,
 				"aria-expanded": isOpen,
 				"aria-haspopup": popupRole,
@@ -1298,82 +1397,82 @@ function RootDropdown(t0) {
 				type: "button",
 				children: trigger
 			});
-			$[105] = bodyId;
-			$[106] = isOpen;
-			$[107] = popupRole;
-			$[108] = trigger;
-			$[109] = t42;
-		} else t42 = $[109];
-		trigger = t42;
+			$[116] = bodyId;
+			$[117] = isOpen;
+			$[118] = popupRole;
+			$[119] = trigger;
+			$[120] = t45;
+		} else t45 = $[120];
+		trigger = t45;
 	}
 	else {
 		const triggerProps = trigger.props;
-		const t42 = trigger;
-		const t43 = triggerProps["aria-controls"] ?? bodyId;
-		const t44 = triggerProps["aria-expanded"] ?? isOpen;
-		const t45 = triggerProps["aria-haspopup"] ?? popupRole;
-		let t46;
-		if ($[110] !== t42 || $[111] !== t43 || $[112] !== t44 || $[113] !== t45) {
-			t46 = cloneElement(t42, {
-				"aria-controls": t43,
-				"aria-expanded": t44,
-				"aria-haspopup": t45
+		const t45 = trigger;
+		const t46 = triggerProps["aria-controls"] ?? bodyId;
+		const t47 = triggerProps["aria-expanded"] ?? isOpen;
+		const t48 = triggerProps["aria-haspopup"] ?? popupRole;
+		let t49;
+		if ($[121] !== t45 || $[122] !== t46 || $[123] !== t47 || $[124] !== t48) {
+			t49 = cloneElement(t45, {
+				"aria-controls": t46,
+				"aria-expanded": t47,
+				"aria-haspopup": t48
 			});
-			$[110] = t42;
-			$[111] = t43;
-			$[112] = t44;
-			$[113] = t45;
-			$[114] = t46;
-		} else t46 = $[114];
-		trigger = t46;
+			$[121] = t45;
+			$[122] = t46;
+			$[123] = t47;
+			$[124] = t48;
+			$[125] = t49;
+		} else t49 = $[125];
+		trigger = t49;
 	}
 	if (label != null) {
-		let t42;
-		if ($[115] !== label) {
-			t42 = /* @__PURE__ */ jsx("div", {
+		let t45;
+		if ($[126] !== label) {
+			t45 = /* @__PURE__ */ jsx("div", {
 				className: "uktdropdown-label-text",
 				children: label
 			});
-			$[115] = label;
-			$[116] = t42;
-		} else t42 = $[116];
-		let t43;
-		if ($[117] !== t42 || $[118] !== trigger) {
-			t43 = /* @__PURE__ */ jsxs("label", {
+			$[126] = label;
+			$[127] = t45;
+		} else t45 = $[127];
+		let t46;
+		if ($[128] !== t45 || $[129] !== trigger) {
+			t46 = /* @__PURE__ */ jsxs("label", {
 				className: "uktdropdown-label",
-				children: [t42, trigger]
+				children: [t45, trigger]
 			});
-			$[117] = t42;
-			$[118] = trigger;
-			$[119] = t43;
-		} else t43 = $[119];
-		trigger = t43;
+			$[128] = t45;
+			$[129] = trigger;
+			$[130] = t46;
+		} else t46 = $[130];
+		trigger = t46;
 	}
-	let t42;
-	if ($[120] === Symbol.for("react.memo_cache_sentinel")) {
-		t42 = /* @__PURE__ */ jsx("style", {
+	let t45;
+	if ($[131] === Symbol.for("react.memo_cache_sentinel")) {
+		t45 = /* @__PURE__ */ jsx("style", {
 			href: "@acusti/dropdown/Dropdown",
 			precedence: "medium",
 			children: Dropdown_default
 		});
-		$[120] = t42;
-	} else t42 = $[120];
-	let t43;
-	if ($[121] !== className || $[122] !== disabled || $[123] !== isOpen || $[124] !== isSearchable) {
-		t43 = clsx("uktdropdown", className, {
+		$[131] = t45;
+	} else t45 = $[131];
+	let t46;
+	if ($[132] !== className || $[133] !== disabled || $[134] !== isOpen || $[135] !== isSearchable) {
+		t46 = clsx("uktdropdown", className, {
 			disabled,
 			"is-open": isOpen,
 			"is-searchable": isSearchable
 		});
-		$[121] = className;
-		$[122] = disabled;
-		$[123] = isOpen;
-		$[124] = isSearchable;
-		$[125] = t43;
-	} else t43 = $[125];
-	let t44;
-	if ($[126] !== bodyId || $[127] !== children || $[128] !== childrenCount || $[129] !== hasItems || $[130] !== isOpen || $[131] !== popupRole) {
-		t44 = isOpen ? /* @__PURE__ */ jsx("div", {
+		$[132] = className;
+		$[133] = disabled;
+		$[134] = isOpen;
+		$[135] = isSearchable;
+		$[136] = t46;
+	} else t46 = $[136];
+	let t47;
+	if ($[137] !== body || $[138] !== bodyId || $[139] !== handleBodyRef || $[140] !== hasItems || $[141] !== isOpen || $[142] !== popupRole) {
+		t47 = isOpen ? /* @__PURE__ */ jsx("div", {
 			className: clsx("uktdropdown-body", { "has-items": hasItems }),
 			id: bodyId,
 			popover: "manual",
@@ -1383,22 +1482,22 @@ function RootDropdown(t0) {
 				className: "uktdropdown-content",
 				children: /* @__PURE__ */ jsx(DropdownContext.Provider, {
 					value: hasItems ? dropdownContextValue : null,
-					children: childrenCount > 1 ? children[1] : children
+					children: body
 				})
 			})
 		}) : null;
-		$[126] = bodyId;
-		$[127] = children;
-		$[128] = childrenCount;
-		$[129] = hasItems;
-		$[130] = isOpen;
-		$[131] = popupRole;
-		$[132] = t44;
-	} else t44 = $[132];
-	let t45;
-	if ($[133] !== handleDropdownMouseEnter || $[134] !== handleDropdownMouseLeave || $[135] !== handleMouseDown || $[136] !== handleMouseMove || $[137] !== handleMouseOut || $[138] !== handleMouseOver || $[139] !== handleMouseUp || $[140] !== handleRef || $[141] !== onClick || $[142] !== styleFromProps || $[143] !== t43 || $[144] !== t44 || $[145] !== trigger) {
-		t45 = /* @__PURE__ */ jsxs(Fragment, { children: [t42, /* @__PURE__ */ jsxs("div", {
-			className: t43,
+		$[137] = body;
+		$[138] = bodyId;
+		$[139] = handleBodyRef;
+		$[140] = hasItems;
+		$[141] = isOpen;
+		$[142] = popupRole;
+		$[143] = t47;
+	} else t47 = $[143];
+	let t48;
+	if ($[144] !== handleDropdownMouseEnter || $[145] !== handleDropdownMouseLeave || $[146] !== handleMouseDown || $[147] !== handleMouseMove || $[148] !== handleMouseOut || $[149] !== handleMouseOver || $[150] !== handleMouseUp || $[151] !== handleRef || $[152] !== onClick || $[153] !== styleFromProps || $[154] !== t46 || $[155] !== t47 || $[156] !== trigger) {
+		t48 = /* @__PURE__ */ jsxs(Fragment, { children: [t45, /* @__PURE__ */ jsxs("div", {
+			className: t46,
 			onClick,
 			onMouseDown: handleMouseDown,
 			onMouseEnter: handleDropdownMouseEnter,
@@ -1409,29 +1508,24 @@ function RootDropdown(t0) {
 			onMouseUp: handleMouseUp,
 			ref: handleRef,
 			style: styleFromProps,
-			children: [trigger, t44]
+			children: [trigger, t47]
 		})] });
-		$[133] = handleDropdownMouseEnter;
-		$[134] = handleDropdownMouseLeave;
-		$[135] = handleMouseDown;
-		$[136] = handleMouseMove;
-		$[137] = handleMouseOut;
-		$[138] = handleMouseOver;
-		$[139] = handleMouseUp;
-		$[140] = handleRef;
-		$[141] = onClick;
-		$[142] = styleFromProps;
-		$[143] = t43;
-		$[144] = t44;
-		$[145] = trigger;
-		$[146] = t45;
-	} else t45 = $[146];
-	return t45;
-}
-function _temp(ref_0) {
-	if (!ref_0) return;
-	annotateParentItems(ref_0);
-	ref_0.showPopover();
+		$[144] = handleDropdownMouseEnter;
+		$[145] = handleDropdownMouseLeave;
+		$[146] = handleMouseDown;
+		$[147] = handleMouseMove;
+		$[148] = handleMouseOut;
+		$[149] = handleMouseOver;
+		$[150] = handleMouseUp;
+		$[151] = handleRef;
+		$[152] = onClick;
+		$[153] = styleFromProps;
+		$[154] = t46;
+		$[155] = t47;
+		$[156] = trigger;
+		$[157] = t48;
+	} else t48 = $[157];
+	return t48;
 }
 var INERT_SUBMENU_PROPS = [
 	"allowCreate",
@@ -1505,8 +1599,12 @@ function SubmenuDropdown(props) {
 	}
 	let t3;
 	if ($[9] !== body) {
-		t3 = isValidElement(body) ? cloneElement(body, { "data-ukt-submenu": "" }) : /* @__PURE__ */ jsx("div", {
+		t3 = isValidElement(body) ? cloneElement(body, {
 			"data-ukt-submenu": "",
+			popover: "manual"
+		}) : /* @__PURE__ */ jsx("div", {
+			"data-ukt-submenu": "",
+			popover: "manual",
 			children: body
 		});
 		$[9] = body;