@bigbinary/neeto-atoms 1.0.9 → 1.0.10

package/dist/primitives/Combobox.js

@@ -1,16 +1,16 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
-import { createElement } from 'react';
+import React__default, { createElement } from 'react';
 import { c as cn } from '../utils-DdHUxIdC.js';
 import { B as Button } from '../button-COIbN8dg.js';
 import { I as InputGroup, c as InputGroupInput, a as InputGroupAddon, d as InputGroupButton } from '../input-group-ytECR3Hw.js';
-import { X } from '../x-_o2T3n6D.js';
 import { C as Check } from '../check-Cpkv29p1.js';
+import { X } from '../x-_o2T3n6D.js';
 import { C as ChevronDown } from '../chevron-down-BNi0ntys.js';
-import { c as createSelectorCreator, l as lruMemoize, w as withSelectorExports } from '../with-selector--fY1NrB9.js';
-import * as ReactDOM from 'react-dom';
-import { i as isHTMLElement, d as isShadowRoot, g as getComputedStyle$1, e as floor, j as getWindow, k as isOverflowElement, m as getNodeName, n as isNode, p as isWebKit$1, q as isElement, r as isLastTraversableNode, t as getParentNode, u as useFloating$1, v as evaluate, w as getPaddingObject, x as getAlignmentAxis, y as getAlignment, z as getAxisLength, A as clamp, h as hide$1, o as offset, f as flip, s as shift, l as limitShift, a as size, B as getSide, C as getSideAxis, c as autoUpdate } from '../floating-ui.react-dom-CcGbtPEK.js';
+import { i as isHTMLElement, d as isShadowRoot, g as getComputedStyle, e as floor, j as getNodeName, k as getWindow, m as isOverflowElement, n as isNode, p as isWebKit$1, q as isElement, r as isLastTraversableNode, t as getParentNode, u as useFloating$1, v as evaluate, w as getPaddingObject, x as getAlignmentAxis, y as getAlignment, z as getAxisLength, A as clamp, h as hide$1, o as offset, f as flip, s as shift, l as limitShift, a as size, B as getSide, C as getSideAxis, c as autoUpdate } from '../floating-ui.react-dom-D8_f_WWh.js';
 import { s as shimExports } from '../index-DZXbzIgC.js';
+import { w as withSelectorExports } from '../with-selector-Dv0G_V_o.js';
+import * as ReactDOM from 'react-dom';
 import '../index-D7Zy7P05.js';
 import '../index-CfriMyrd.js';
 import '../index-BtkPdosV.js';
@@ -492,7 +492,7 @@ const EMPTY_PROPS = {};
  * Props can either be provided as objects or as functions that take the previous props as an argument.
  * The function will receive the merged props up to that point (going from left to right):
  * so in the case of `(obj1, obj2, fn, obj3)`, `fn` will receive the merged props of `obj1` and `obj2`.
- * The function is responsible for chaining event handlers if needed (i.e. we don't run the merge logic).
+ * The function is responsible for chaining event handlers if needed (that is, we don't run the merge logic).
  *
  * Event handlers returned by the functions are not automatically prevented when `preventBaseUIHandler` is called.
  * They must check `event.baseUIHandlerPrevented` themselves and bail out if it's true.
@@ -508,18 +508,20 @@ const EMPTY_PROPS = {};
  */
 
 function mergeProps$1(a, b, c, d, e) {
-  // We need to mutably own `merged`
-  let merged = {
-    ...resolvePropsGetter(a, EMPTY_PROPS)
-  };
+  if (!c && !d && true && !a) {
+    return createInitialMergedProps(b);
+  }
+
+  // We need to mutably own `merged`.
+  let merged = createInitialMergedProps(a);
   if (b) {
-    merged = mergeOne(merged, b);
+    merged = mergeInto(merged, b);
   }
   if (c) {
-    merged = mergeOne(merged, c);
+    merged = mergeInto(merged, c);
   }
   if (d) {
-    merged = mergeOne(merged, d);
+    merged = mergeInto(merged, d);
   }
   return merged;
 }
@@ -543,24 +545,46 @@ function mergePropsN(props) {
     return EMPTY_PROPS;
   }
   if (props.length === 1) {
-    return resolvePropsGetter(props[0], EMPTY_PROPS);
+    return createInitialMergedProps(props[0]);
   }
 
-  // We need to mutably own `merged`
-  let merged = {
-    ...resolvePropsGetter(props[0], EMPTY_PROPS)
-  };
+  // We need to mutably own `merged`.
+  let merged = createInitialMergedProps(props[0]);
   for (let i = 1; i < props.length; i += 1) {
-    merged = mergeOne(merged, props[i]);
+    merged = mergeInto(merged, props[i]);
   }
   return merged;
 }
-function mergeOne(merged, inputProps) {
+function createInitialMergedProps(inputProps) {
   if (isPropsGetter(inputProps)) {
-    return inputProps(merged);
+    // Getter-returned handlers intentionally keep their existing semantics.
+    return {
+      ...resolvePropsGetter(inputProps, EMPTY_PROPS)
+    };
+  }
+  return copyInitialProps(inputProps);
+}
+function mergeInto(merged, inputProps) {
+  if (isPropsGetter(inputProps)) {
+    return resolvePropsGetter(inputProps, merged);
   }
   return mutablyMergeInto(merged, inputProps);
 }
+function copyInitialProps(inputProps) {
+  const copiedProps = {
+    ...inputProps
+  };
+
+  // `copiedProps` is our fresh own-object copy, so iterating with `for...in` is safe here.
+  // eslint-disable-next-line guard-for-in
+  for (const propName in copiedProps) {
+    const propValue = copiedProps[propName];
+    if (isEventHandler(propName, propValue)) {
+      copiedProps[propName] = wrapEventHandler(propValue);
+    }
+  }
+  return copiedProps;
+}
 
 /**
  * Merges two sets of props. In case of conflicts, the external props take precedence.
@@ -617,7 +641,7 @@ function mergeEventHandlers(ourHandler, theirHandler) {
     return ourHandler;
   }
   if (!ourHandler) {
-    return theirHandler;
+    return wrapEventHandler(theirHandler);
   }
   return event => {
     if (isSyntheticEvent(event)) {
@@ -634,6 +658,17 @@ function mergeEventHandlers(ourHandler, theirHandler) {
     return result;
   };
 }
+function wrapEventHandler(handler) {
+  if (!handler) {
+    return handler;
+  }
+  return event => {
+    if (isSyntheticEvent(event)) {
+      makeEventPreventable(event);
+    }
+    return handler(event);
+  };
+}
 function makeEventPreventable(event) {
   event.preventBaseUIHandler = () => {
     event.baseUIHandlerPrevented = true;
@@ -722,7 +757,12 @@ function useRenderElementProps(componentProps, params = {}) {
   const className = enabled ? resolveClassName(classNameProp, state) : undefined;
   const style = enabled ? resolveStyle(styleProp, state) : undefined;
   const stateProps = enabled ? getStateAttributesProps(state, stateAttributesMapping) : EMPTY_OBJECT;
-  const outProps = enabled ? mergeObjects(stateProps, Array.isArray(props) ? mergePropsN(props) : props) ?? EMPTY_OBJECT : EMPTY_OBJECT;
+  const resolvedProps = enabled && props ? resolveRenderFunctionProps(props) : undefined;
+
+  // Ensure outProps is always a new mutable object when enabled, never EMPTY_OBJECT.
+  // This prevents potential TypeError when setting ref, className, or style properties,
+  // since EMPTY_OBJECT is frozen and mutations would fail in strict mode.
+  const outProps = enabled ? mergeObjects(stateProps, resolvedProps) ?? {} : EMPTY_OBJECT;
 
   // SAFETY: The `useMergedRefs` functions use a single hook to store the same value,
   // switching between them at runtime is safe. If this assertion fails, React will
@@ -750,6 +790,12 @@ function useRenderElementProps(componentProps, params = {}) {
   }
   return outProps;
 }
+function resolveRenderFunctionProps(props) {
+  if (Array.isArray(props)) {
+    return mergePropsN(props);
+  }
+  return mergeProps$1(undefined, props);
+}
 
 // The symbol React uses internally for lazy components
 // https://github.com/facebook/react/blob/a0566250b210499b4c5677f5ac2eedbd71d51a1b/packages/shared/ReactSymbols.js#L31
@@ -1090,70 +1136,67 @@ function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false
    */
   signal = null) => {
     frame.cancel();
-    function done() {
-      // Synchronously flush the unmounting of the component so that the browser doesn't
-      // paint: https://github.com/mui/base-ui/issues/979
-      ReactDOM.flushSync(fnToExecute);
-    }
     const element = resolveRef(elementOrRef);
     if (element == null) {
       return;
     }
     const resolvedElement = element;
+    const done = () => {
+      // Synchronously flush the unmounting of the component so that the browser doesn't
+      // paint: https://github.com/mui/base-ui/issues/979
+      ReactDOM.flushSync(fnToExecute);
+    };
     if (typeof resolvedElement.getAnimations !== 'function' || globalThis.BASE_UI_ANIMATIONS_DISABLED) {
       fnToExecute();
-    } else {
-      function execWaitForStartingStyleRemoved() {
-        const startingStyleAttribute = TransitionStatusDataAttributes.startingStyle;
-
-        // If `[data-starting-style]` isn't present, fall back to waiting one more frame
-        // to give "open" animations a chance to be registered.
-        if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
-          frame.request(exec);
-          return;
-        }
-
-        // Wait for `[data-starting-style]` to have been removed.
-        const attributeObserver = new MutationObserver(() => {
-          if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
-            attributeObserver.disconnect();
-            exec();
-          }
-        });
-        attributeObserver.observe(resolvedElement, {
-          attributes: true,
-          attributeFilter: [startingStyleAttribute]
-        });
-        signal?.addEventListener('abort', () => attributeObserver.disconnect(), {
-          once: true
-        });
-      }
-      function exec() {
-        Promise.all(resolvedElement.getAnimations().map(anim => anim.finished)).then(() => {
-          if (signal?.aborted) {
-            return;
-          }
+      return;
+    }
+    function exec() {
+      Promise.all(resolvedElement.getAnimations().map(animation => animation.finished)).then(() => {
+        if (!signal?.aborted) {
           done();
-        }).catch(() => {
-          const currentAnimations = resolvedElement.getAnimations();
-          if (treatAbortedAsFinished) {
-            if (signal?.aborted) {
-              return;
-            }
+        }
+      }).catch(() => {
+        if (treatAbortedAsFinished) {
+          if (!signal?.aborted) {
             done();
-          } else if (currentAnimations.length > 0 && currentAnimations.some(anim => anim.pending || anim.playState !== 'finished')) {
-            // Sometimes animations can be aborted because a property they depend on changes while the animation plays.
-            // In such cases, we need to re-check if any new animations have started.
-            exec();
           }
-        });
-      }
-      if (waitForStartingStyleRemoved) {
-        execWaitForStartingStyleRemoved();
+          return;
+        }
+        const currentAnimations = resolvedElement.getAnimations();
+        if (!signal?.aborted && currentAnimations.length > 0 && currentAnimations.some(animation => animation.pending || animation.playState !== 'finished')) {
+          // Sometimes animations can be aborted because a property they depend on changes while the animation plays.
+          // In such cases, we need to re-check if any new animations have started.
+          exec();
+        }
+      });
+    }
+    if (waitForStartingStyleRemoved) {
+      const startingStyleAttribute = TransitionStatusDataAttributes.startingStyle;
+
+      // If `[data-starting-style]` isn't present, fall back to waiting one more frame
+      // to give "open" animations a chance to be registered.
+      if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
+        frame.request(exec);
         return;
       }
-      frame.request(exec);
+
+      // Wait for `[data-starting-style]` to have been removed.
+      const attributeObserver = new MutationObserver(() => {
+        if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
+          attributeObserver.disconnect();
+          exec();
+        }
+      });
+      attributeObserver.observe(resolvedElement, {
+        attributes: true,
+        attributeFilter: [startingStyleAttribute]
+      });
+      signal?.addEventListener('abort', () => attributeObserver.disconnect(), {
+        once: true
+      });
+      return;
     }
+    frame.request(exec);
   });
 }
 
@@ -1212,12 +1255,12 @@ function useTransitionStatus(open, enableIdleState = false, deferEndingState = f
     return () => {
       AnimationFrame.cancel(frame);
     };
-  }, [enableIdleState, open, mounted, setTransitionStatus, transitionStatus]);
-  return React.useMemo(() => ({
+  }, [enableIdleState, open, mounted, transitionStatus]);
+  return {
     mounted,
     setMounted,
     transitionStatus
-  }), [mounted, transitionStatus]);
+  };
 }
 
 let IndexGuessBehavior = /*#__PURE__*/function (IndexGuessBehavior) {
@@ -1576,12 +1619,12 @@ function contains(parent, child) {
   }
   const rootNode = child.getRootNode?.();
 
-  // First, attempt with faster native method
+  // First, attempt with the faster native method.
   if (parent.contains(child)) {
     return true;
   }
 
-  // then fallback to custom implementation with Shadow DOM support
+  // Then fall back to traversing out of shadow roots when needed.
   if (rootNode && isShadowRoot(rootNode)) {
     let next = child;
     while (next) {
@@ -1591,8 +1634,6 @@ function contains(parent, child) {
       next = next.parentNode || next.host;
     }
   }
-
-  // Give up, the result is false
   return false;
 }
 function getTarget(event) {
@@ -1600,10 +1641,11 @@ function getTarget(event) {
     return event.composedPath()[0];
   }
 
-  // TS thinks `event` is of type never as it assumes all browsers support
-  // `composedPath()`, but browsers without shadow DOM don't.
+  // TS assumes `composedPath()` always exists, but older browsers without
+  // shadow DOM support still fall back to `target`.
   return event.target;
 }
+
 function isEventTargetWithin(event, node) {
   if (node == null) {
     return false;
@@ -1622,6 +1664,9 @@ function isRootElement(element) {
 function isTypeableElement(element) {
   return isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR);
 }
+function isInteractiveElement(element) {
+  return element?.closest(`button,a[href],[role="button"],select,[tabindex]:not([tabindex="-1"]),${TYPEABLE_SELECTOR}`) != null;
+}
 function isTypeableCombobox(element) {
   if (!element) {
     return false;
@@ -1642,8 +1687,8 @@ function getFloatingFocusElement(floatingElement) {
 /* eslint-disable @typescript-eslint/no-loop-func */
 
 function getNodeChildren(nodes, id, onlyOpenChildren = true) {
-  const directChildren = nodes.filter(node => node.parentId === id && (!onlyOpenChildren || node.context?.open));
-  return directChildren.flatMap(child => [child, ...getNodeChildren(nodes, child.id, onlyOpenChildren)]);
+  const directChildren = nodes.filter(node => node.parentId === id);
+  return directChildren.flatMap(child => [...(!onlyOpenChildren || child.context?.open ? [child] : []), ...getNodeChildren(nodes, child.id, onlyOpenChildren)]);
 }
 function getNodeAncestors(nodes, id) {
   let allAncestors = [];
@@ -1698,22 +1743,22 @@ function isClickLikeEvent(event) {
 function isDifferentGridRow(index, cols, prevRow) {
   return Math.floor(index / cols) !== prevRow;
 }
-function isIndexOutOfListBounds(listRef, index) {
-  return index < 0 || index >= listRef.current.length;
+function isIndexOutOfListBounds(list, index) {
+  return index < 0 || index >= list.length;
 }
 function getMinListIndex(listRef, disabledIndices) {
-  return findNonDisabledListIndex(listRef, {
+  return findNonDisabledListIndex(listRef.current, {
     disabledIndices
   });
 }
 function getMaxListIndex(listRef, disabledIndices) {
-  return findNonDisabledListIndex(listRef, {
+  return findNonDisabledListIndex(listRef.current, {
     decrement: true,
     startingIndex: listRef.current.length,
     disabledIndices
   });
 }
-function findNonDisabledListIndex(listRef, {
+function findNonDisabledListIndex(list, {
   startingIndex = -1,
   decrement = false,
   disabledIndices,
@@ -1722,13 +1767,14 @@ function findNonDisabledListIndex(listRef, {
   let index = startingIndex;
   do {
     index += decrement ? -amount : amount;
-  } while (index >= 0 && index <= listRef.current.length - 1 && isListIndexDisabled(listRef, index, disabledIndices));
+  } while (index >= 0 && index <= list.length - 1 && isListIndexDisabled(list, index, disabledIndices));
   return index;
 }
-function getGridNavigatedIndex(listRef, {
+function getGridNavigatedIndex(list, {
   event,
   orientation,
   loopFocus,
+  onLoop,
   rtl,
   cols,
   disabledIndices,
@@ -1756,7 +1802,7 @@ function getGridNavigatedIndex(listRef, {
     {
       let currentRowEl = null;
       let currentRowIndex = -1;
-      listRef.current.forEach((el, idx) => {
+      list.forEach((el, idx) => {
         if (el == null) {
           return;
         }
@@ -1787,7 +1833,7 @@ function getGridNavigatedIndex(listRef, {
         }
       }
     }
-    const hasVirtualizedGaps = hasDomRows && visibleItemCount < listRef.current.length;
+    const hasVirtualizedGaps = hasDomRows && visibleItemCount < list.length;
     const verticalCols = inferredDomCols || cols;
     const navigateVertically = direction => {
       if (!hasDomRows || prevIndex === -1) {
@@ -1805,11 +1851,17 @@ function getGridNavigatedIndex(listRef, {
             return undefined;
           }
           nextRow = nextRow < 0 ? rows.length - 1 : 0;
+          if (onLoop) {
+            const clampedCol = Math.min(colInRow, rows[nextRow].length - 1);
+            const targetItemIndex = rows[nextRow][clampedCol] ?? rows[nextRow][0];
+            const returnedItemIndex = onLoop(event, prevIndex, targetItemIndex);
+            nextRow = rowIndexMap[returnedItemIndex] ?? nextRow;
+          }
         }
         const targetRow = rows[nextRow];
         for (let col = Math.min(colInRow, targetRow.length - 1); col >= 0; col -= 1) {
           const candidate = targetRow[col];
-          if (!isListIndexDisabled(listRef, candidate, disabledIndices)) {
+          if (!isListIndexDisabled(list, candidate, disabledIndices)) {
             return candidate;
           }
         }
@@ -1833,7 +1885,7 @@ function getGridNavigatedIndex(listRef, {
         }
         const rowEnd = Math.min(rowStart + verticalCols - 1, maxIndex);
         for (let candidate = Math.min(rowStart + colInRow, rowEnd); candidate >= rowStart; candidate -= 1) {
-          if (!isListIndexDisabled(listRef, candidate, disabledIndices)) {
+          if (!isListIndexDisabled(list, candidate, disabledIndices)) {
             return candidate;
           }
         }
@@ -1849,7 +1901,7 @@ function getGridNavigatedIndex(listRef, {
     } else if (prevIndex === -1) {
       nextIndex = verticalDirection === 'up' ? maxIndex : minIndex;
     } else {
-      nextIndex = findNonDisabledListIndex(listRef, {
+      nextIndex = findNonDisabledListIndex(list, {
         startingIndex: prevIndex,
         amount: verticalCols,
         decrement: verticalDirection === 'up',
@@ -1865,17 +1917,23 @@ function getGridNavigatedIndex(listRef, {
           } else {
             nextIndex = maxCol > col ? offset : offset - verticalCols;
           }
+          if (onLoop) {
+            nextIndex = onLoop(event, prevIndex, nextIndex);
+          }
         }
         if (verticalDirection === 'down' && prevIndex + verticalCols > maxIndex) {
-          nextIndex = findNonDisabledListIndex(listRef, {
+          nextIndex = findNonDisabledListIndex(list, {
             startingIndex: prevIndex % verticalCols - verticalCols,
             amount: verticalCols,
             disabledIndices
           });
+          if (onLoop) {
+            nextIndex = onLoop(event, prevIndex, nextIndex);
+          }
         }
       }
     }
-    if (isIndexOutOfListBounds(listRef, nextIndex)) {
+    if (isIndexOutOfListBounds(list, nextIndex)) {
       nextIndex = prevIndex;
     }
   }
@@ -1888,21 +1946,27 @@ function getGridNavigatedIndex(listRef, {
         stopEvent(event);
       }
       if (prevIndex % cols !== cols - 1) {
-        nextIndex = findNonDisabledListIndex(listRef, {
+        nextIndex = findNonDisabledListIndex(list, {
           startingIndex: prevIndex,
           disabledIndices
         });
         if (loopFocus && isDifferentGridRow(nextIndex, cols, prevRow)) {
-          nextIndex = findNonDisabledListIndex(listRef, {
+          nextIndex = findNonDisabledListIndex(list, {
             startingIndex: prevIndex - prevIndex % cols - 1,
             disabledIndices
           });
+          if (onLoop) {
+            nextIndex = onLoop(event, prevIndex, nextIndex);
+          }
         }
       } else if (loopFocus) {
-        nextIndex = findNonDisabledListIndex(listRef, {
+        nextIndex = findNonDisabledListIndex(list, {
           startingIndex: prevIndex - prevIndex % cols - 1,
           disabledIndices
         });
+        if (onLoop) {
+          nextIndex = onLoop(event, prevIndex, nextIndex);
+        }
       }
       if (isDifferentGridRow(nextIndex, cols, prevRow)) {
         nextIndex = prevIndex;
@@ -1913,36 +1977,45 @@ function getGridNavigatedIndex(listRef, {
         stopEvent(event);
       }
       if (prevIndex % cols !== 0) {
-        nextIndex = findNonDisabledListIndex(listRef, {
+        nextIndex = findNonDisabledListIndex(list, {
           startingIndex: prevIndex,
           decrement: true,
           disabledIndices
         });
         if (loopFocus && isDifferentGridRow(nextIndex, cols, prevRow)) {
-          nextIndex = findNonDisabledListIndex(listRef, {
+          nextIndex = findNonDisabledListIndex(list, {
             startingIndex: prevIndex + (cols - prevIndex % cols),
             decrement: true,
             disabledIndices
           });
+          if (onLoop) {
+            nextIndex = onLoop(event, prevIndex, nextIndex);
+          }
         }
       } else if (loopFocus) {
-        nextIndex = findNonDisabledListIndex(listRef, {
+        nextIndex = findNonDisabledListIndex(list, {
           startingIndex: prevIndex + (cols - prevIndex % cols),
           decrement: true,
           disabledIndices
         });
+        if (onLoop) {
+          nextIndex = onLoop(event, prevIndex, nextIndex);
+        }
       }
       if (isDifferentGridRow(nextIndex, cols, prevRow)) {
         nextIndex = prevIndex;
       }
     }
     const lastRow = floor(maxIndex / cols) === prevRow;
-    if (isIndexOutOfListBounds(listRef, nextIndex)) {
+    if (isIndexOutOfListBounds(list, nextIndex)) {
       if (loopFocus && lastRow) {
-        nextIndex = event.key === (rtl ? ARROW_RIGHT : ARROW_LEFT) ? maxIndex : findNonDisabledListIndex(listRef, {
+        nextIndex = event.key === (rtl ? ARROW_RIGHT : ARROW_LEFT) ? maxIndex : findNonDisabledListIndex(list, {
           startingIndex: prevIndex - prevIndex % cols - 1,
           disabledIndices
         });
+        if (onLoop) {
+          nextIndex = onLoop(event, prevIndex, nextIndex);
+        }
       } else {
         nextIndex = prevIndex;
       }
@@ -2013,12 +2086,12 @@ function getGridCellIndexOfCorner(index, sizes, cellMap, cols, corner) {
 function getGridCellIndices(indices, cellMap) {
   return cellMap.flatMap((index, cellIndex) => indices.includes(index) ? [cellIndex] : []);
 }
-function isListIndexDisabled(listRef, index, disabledIndices) {
+function isListIndexDisabled(list, index, disabledIndices) {
   const isExplicitlyDisabled = typeof disabledIndices === 'function' ? disabledIndices(index) : disabledIndices?.includes(index) ?? false;
   if (isExplicitlyDisabled) {
     return true;
   }
-  const element = listRef.current[index];
+  const element = list[index];
   if (!element) {
     return false;
   }
@@ -2028,599 +2101,137 @@ function isListIndexDisabled(listRef, index, disabledIndices) {
   return !disabledIndices && (element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true');
 }
 function isElementVisible(element) {
-  return getComputedStyle$1(element).display !== 'none';
-}
-
-/*!
-* tabbable 6.4.0
-* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
-*/
-// NOTE: separate `:not()` selectors has broader browser support than the newer
-//  `:not([inert], [inert] *)` (Feb 2023)
-var candidateSelectors = ['input:not([inert]):not([inert] *)', 'select:not([inert]):not([inert] *)', 'textarea:not([inert]):not([inert] *)', 'a[href]:not([inert]):not([inert] *)', 'button:not([inert]):not([inert] *)', '[tabindex]:not(slot):not([inert]):not([inert] *)', 'audio[controls]:not([inert]):not([inert] *)', 'video[controls]:not([inert]):not([inert] *)', '[contenteditable]:not([contenteditable="false"]):not([inert]):not([inert] *)', 'details>summary:first-of-type:not([inert]):not([inert] *)', 'details:not([inert]):not([inert] *)'];
-var candidateSelector = /* #__PURE__ */candidateSelectors.join(',');
-var NoElement = typeof Element === 'undefined';
-var matches = NoElement ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
-var getRootNode = !NoElement && Element.prototype.getRootNode ? function (element) {
-  var _element$getRootNode;
-  return element === null || element === void 0 ? void 0 : (_element$getRootNode = element.getRootNode) === null || _element$getRootNode === void 0 ? void 0 : _element$getRootNode.call(element);
-} : function (element) {
-  return element === null || element === void 0 ? void 0 : element.ownerDocument;
-};
-
-/**
- * Determines if a node is inert or in an inert ancestor.
- * @param {Node} [node]
- * @param {boolean} [lookUp] If true and `node` is not inert, looks up at ancestors to
- *  see if any of them are inert. If false, only `node` itself is considered.
- * @returns {boolean} True if inert itself or by way of being in an inert ancestor.
- *  False if `node` is falsy.
- */
-var _isInert = function isInert(node, lookUp) {
-  var _node$getAttribute;
-  if (lookUp === void 0) {
-    lookUp = true;
-  }
-  // CAREFUL: JSDom does not support inert at all, so we can't use the `HTMLElement.inert`
-  //  JS API property; we have to check the attribute, which can either be empty or 'true';
-  //  if it's `null` (not specified) or 'false', it's an active element
-  var inertAtt = node === null || node === void 0 ? void 0 : (_node$getAttribute = node.getAttribute) === null || _node$getAttribute === void 0 ? void 0 : _node$getAttribute.call(node, 'inert');
-  var inert = inertAtt === '' || inertAtt === 'true';
-
-  // NOTE: this could also be handled with `node.matches('[inert], :is([inert] *)')`
-  //  if it weren't for `matches()` not being a function on shadow roots; the following
-  //  code works for any kind of node
-  var result = inert || lookUp && node && (
-  // closest does not exist on shadow roots, so we fall back to a manual
-  // lookup upward, in case it is not defined.
-  typeof node.closest === 'function' ? node.closest('[inert]') : _isInert(node.parentNode));
-  return result;
-};
-
-/**
- * Determines if a node's content is editable.
- * @param {Element} [node]
- * @returns True if it's content-editable; false if it's not or `node` is falsy.
- */
-var isContentEditable = function isContentEditable(node) {
-  var _node$getAttribute2;
-  // CAREFUL: JSDom does not support the `HTMLElement.isContentEditable` API so we have
-  //  to use the attribute directly to check for this, which can either be empty or 'true';
-  //  if it's `null` (not specified) or 'false', it's a non-editable element
-  var attValue = node === null || node === void 0 ? void 0 : (_node$getAttribute2 = node.getAttribute) === null || _node$getAttribute2 === void 0 ? void 0 : _node$getAttribute2.call(node, 'contenteditable');
-  return attValue === '' || attValue === 'true';
-};
-
-/**
- * @param {Element} el container to check in
- * @param {boolean} includeContainer add container to check
- * @param {(node: Element) => boolean} filter filter candidates
- * @returns {Element[]}
- */
-var getCandidates = function getCandidates(el, includeContainer, filter) {
-  // even if `includeContainer=false`, we still have to check it for inertness because
-  //  if it's inert (either by itself or via its parent), then all its children are inert
-  if (_isInert(el)) {
-    return [];
-  }
-  var candidates = Array.prototype.slice.apply(el.querySelectorAll(candidateSelector));
-  if (includeContainer && matches.call(el, candidateSelector)) {
-    candidates.unshift(el);
-  }
-  candidates = candidates.filter(filter);
-  return candidates;
-};
-
-/**
- * @callback GetShadowRoot
- * @param {Element} element to check for shadow root
- * @returns {ShadowRoot|boolean} ShadowRoot if available or boolean indicating if a shadowRoot is attached but not available.
- */
-
-/**
- * @callback ShadowRootFilter
- * @param {Element} shadowHostNode the element which contains shadow content
- * @returns {boolean} true if a shadow root could potentially contain valid candidates.
- */
-
-/**
- * @typedef {Object} CandidateScope
- * @property {Element} scopeParent contains inner candidates
- * @property {Element[]} candidates list of candidates found in the scope parent
- */
-
-/**
- * @typedef {Object} IterativeOptions
- * @property {GetShadowRoot|boolean} getShadowRoot true if shadow support is enabled; falsy if not;
- *  if a function, implies shadow support is enabled and either returns the shadow root of an element
- *  or a boolean stating if it has an undisclosed shadow root
- * @property {(node: Element) => boolean} filter filter candidates
- * @property {boolean} flatten if true then result will flatten any CandidateScope into the returned list
- * @property {ShadowRootFilter} shadowRootFilter filter shadow roots;
- */
-
-/**
- * @param {Element[]} elements list of element containers to match candidates from
- * @param {boolean} includeContainer add container list to check
- * @param {IterativeOptions} options
- * @returns {Array.<Element|CandidateScope>}
- */
-var _getCandidatesIteratively = function getCandidatesIteratively(elements, includeContainer, options) {
-  var candidates = [];
-  var elementsToCheck = Array.from(elements);
-  while (elementsToCheck.length) {
-    var element = elementsToCheck.shift();
-    if (_isInert(element, false)) {
-      // no need to look up since we're drilling down
-      // anything inside this container will also be inert
-      continue;
-    }
-    if (element.tagName === 'SLOT') {
-      // add shadow dom slot scope (slot itself cannot be focusable)
-      var assigned = element.assignedElements();
-      var content = assigned.length ? assigned : element.children;
-      var nestedCandidates = _getCandidatesIteratively(content, true, options);
-      if (options.flatten) {
-        candidates.push.apply(candidates, nestedCandidates);
-      } else {
-        candidates.push({
-          scopeParent: element,
-          candidates: nestedCandidates
-        });
-      }
-    } else {
-      // check candidate element
-      var validCandidate = matches.call(element, candidateSelector);
-      if (validCandidate && options.filter(element) && (includeContainer || !elements.includes(element))) {
-        candidates.push(element);
-      }
-
-      // iterate over shadow content if possible
-      var shadowRoot = element.shadowRoot ||
-      // check for an undisclosed shadow
-      typeof options.getShadowRoot === 'function' && options.getShadowRoot(element);
-
-      // no inert look up because we're already drilling down and checking for inertness
-      //  on the way down, so all containers to this root node should have already been
-      //  vetted as non-inert
-      var validShadowRoot = !_isInert(shadowRoot, false) && (!options.shadowRootFilter || options.shadowRootFilter(element));
-      if (shadowRoot && validShadowRoot) {
-        // add shadow dom scope IIF a shadow root node was given; otherwise, an undisclosed
-        //  shadow exists, so look at light dom children as fallback BUT create a scope for any
-        //  child candidates found because they're likely slotted elements (elements that are
-        //  children of the web component element (which has the shadow), in the light dom, but
-        //  slotted somewhere _inside_ the undisclosed shadow) -- the scope is created below,
-        //  _after_ we return from this recursive call
-        var _nestedCandidates = _getCandidatesIteratively(shadowRoot === true ? element.children : shadowRoot.children, true, options);
-        if (options.flatten) {
-          candidates.push.apply(candidates, _nestedCandidates);
-        } else {
-          candidates.push({
-            scopeParent: element,
-            candidates: _nestedCandidates
-          });
-        }
-      } else {
-        // there's not shadow so just dig into the element's (light dom) children
-        //  __without__ giving the element special scope treatment
-        elementsToCheck.unshift.apply(elementsToCheck, element.children);
-      }
-    }
+  if (typeof element.checkVisibility === 'function') {
+    return element.checkVisibility();
   }
-  return candidates;
-};
+  return getComputedStyle(element).display !== 'none';
+}
 
-/**
- * @private
- * Determines if the node has an explicitly specified `tabindex` attribute.
- * @param {HTMLElement} node
- * @returns {boolean} True if so; false if not.
- */
-var hasTabIndex = function hasTabIndex(node) {
-  return !isNaN(parseInt(node.getAttribute('tabindex'), 10));
-};
+function ownerDocument(node) {
+  return node?.ownerDocument || document;
+}
 
-/**
- * Determine the tab index of a given node.
- * @param {HTMLElement} node
- * @returns {number} Tab order (negative, 0, or positive number).
- * @throws {Error} If `node` is falsy.
- */
-var getTabIndex = function getTabIndex(node) {
-  if (!node) {
-    throw new Error('No node provided');
-  }
-  if (node.tabIndex < 0) {
-    // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
-    // `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
-    // yet they are still part of the regular tab order; in FF, they get a default
-    // `tabIndex` of 0; since Chrome still puts those elements in the regular tab
-    // order, consider their tab index to be 0.
-    // Also browsers do not return `tabIndex` correctly for contentEditable nodes;
-    // so if they don't have a tabindex attribute specifically set, assume it's 0.
-    if ((/^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && !hasTabIndex(node)) {
-      return 0;
-    }
+const CANDIDATE_SELECTOR = 'a[href],button,input,select,textarea,summary,details,iframe,object,embed,[tabindex],[contenteditable]:not([contenteditable="false"]),audio[controls],video[controls]';
+function getParentElement(element) {
+  const assignedSlot = element.assignedSlot;
+  if (assignedSlot) {
+    return assignedSlot;
   }
-  return node.tabIndex;
-};
-
-/**
- * Determine the tab index of a given node __for sort order purposes__.
- * @param {HTMLElement} node
- * @param {boolean} [isScope] True for a custom element with shadow root or slot that, by default,
- *  has tabIndex -1, but needs to be sorted by document order in order for its content to be
- *  inserted into the correct sort position.
- * @returns {number} Tab order (negative, 0, or positive number).
- */
-var getSortOrderTabIndex = function getSortOrderTabIndex(node, isScope) {
-  var tabIndex = getTabIndex(node);
-  if (tabIndex < 0 && isScope && !hasTabIndex(node)) {
-    return 0;
+  if (element.parentElement) {
+    return element.parentElement;
   }
-  return tabIndex;
-};
-var sortOrderedTabbables = function sortOrderedTabbables(a, b) {
-  return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex;
-};
-var isInput = function isInput(node) {
-  return node.tagName === 'INPUT';
-};
-var isHiddenInput = function isHiddenInput(node) {
-  return isInput(node) && node.type === 'hidden';
-};
-var isDetailsWithSummary = function isDetailsWithSummary(node) {
-  var r = node.tagName === 'DETAILS' && Array.prototype.slice.apply(node.children).some(function (child) {
-    return child.tagName === 'SUMMARY';
-  });
-  return r;
-};
-var getCheckedRadio = function getCheckedRadio(nodes, form) {
-  for (var i = 0; i < nodes.length; i++) {
-    if (nodes[i].checked && nodes[i].form === form) {
-      return nodes[i];
+  const rootNode = element.getRootNode();
+  return isShadowRoot(rootNode) ? rootNode.host : null;
+}
+function getDetailsSummary(details) {
+  for (const child of Array.from(details.children)) {
+    if (getNodeName(child) === 'summary') {
+      return child;
     }
   }
-};
-var isTabbableRadio = function isTabbableRadio(node) {
-  if (!node.name) {
-    return true;
+  return null;
+}
+function isWithinOpenDetailsSummary(element, details) {
+  const summary = getDetailsSummary(details);
+  return !!summary && (element === summary || contains(summary, element));
+}
+function isFocusableCandidate(element) {
+  const nodeName = element ? getNodeName(element) : '';
+  return element != null && element.matches(CANDIDATE_SELECTOR) && (nodeName !== 'summary' || element.parentElement != null && getNodeName(element.parentElement) === 'details' && getDetailsSummary(element.parentElement) === element) && (nodeName !== 'details' || getDetailsSummary(element) == null) && (nodeName !== 'input' || element.type !== 'hidden');
+}
+function isFocusableElement(element) {
+  if (!isFocusableCandidate(element) || !element.isConnected || element.matches(':disabled')) {
+    return false;
   }
-  var radioScope = node.form || getRootNode(node);
-  var queryRadios = function queryRadios(name) {
-    return radioScope.querySelectorAll('input[type="radio"][name="' + name + '"]');
-  };
-  var radioSet;
-  if (typeof window !== 'undefined' && typeof window.CSS !== 'undefined' && typeof window.CSS.escape === 'function') {
-    radioSet = queryRadios(window.CSS.escape(node.name));
-  } else {
-    try {
-      radioSet = queryRadios(node.name);
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error('Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s', err.message);
+  for (let current = element; current; current = getParentElement(current)) {
+    const isSlot = getNodeName(current) === 'slot';
+    if (current.hasAttribute('inert')) {
       return false;
     }
-  }
-  var checked = getCheckedRadio(radioSet, node.form);
-  return !checked || checked === node;
-};
-var isRadio = function isRadio(node) {
-  return isInput(node) && node.type === 'radio';
-};
-var isNonTabbableRadio = function isNonTabbableRadio(node) {
-  return isRadio(node) && !isTabbableRadio(node);
-};
-
-// determines if a node is ultimately attached to the window's document
-var isNodeAttached = function isNodeAttached(node) {
-  var _nodeRoot;
-  // The root node is the shadow root if the node is in a shadow DOM; some document otherwise
-  //  (but NOT _the_ document; see second 'If' comment below for more).
-  // If rootNode is shadow root, it'll have a host, which is the element to which the shadow
-  //  is attached, and the one we need to check if it's in the document or not (because the
-  //  shadow, and all nodes it contains, is never considered in the document since shadows
-  //  behave like self-contained DOMs; but if the shadow's HOST, which is part of the document,
-  //  is hidden, or is not in the document itself but is detached, it will affect the shadow's
-  //  visibility, including all the nodes it contains). The host could be any normal node,
-  //  or a custom element (i.e. web component). Either way, that's the one that is considered
-  //  part of the document, not the shadow root, nor any of its children (i.e. the node being
-  //  tested).
-  // To further complicate things, we have to look all the way up until we find a shadow HOST
-  //  that is attached (or find none) because the node might be in nested shadows...
-  // If rootNode is not a shadow root, it won't have a host, and so rootNode should be the
-  //  document (per the docs) and while it's a Document-type object, that document does not
-  //  appear to be the same as the node's `ownerDocument` for some reason, so it's safer
-  //  to ignore the rootNode at this point, and use `node.ownerDocument`. Otherwise,
-  //  using `rootNode.contains(node)` will _always_ be true we'll get false-positives when
-  //  node is actually detached.
-  // NOTE: If `nodeRootHost` or `node` happens to be the `document` itself (which is possible
-  //  if a tabbable/focusable node was quickly added to the DOM, focused, and then removed
-  //  from the DOM as in https://github.com/focus-trap/focus-trap-react/issues/905), then
-  //  `ownerDocument` will be `null`, hence the optional chaining on it.
-  var nodeRoot = node && getRootNode(node);
-  var nodeRootHost = (_nodeRoot = nodeRoot) === null || _nodeRoot === void 0 ? void 0 : _nodeRoot.host;
-
-  // in some cases, a detached node will return itself as the root instead of a document or
-  //  shadow root object, in which case, we shouldn't try to look further up the host chain
-  var attached = false;
-  if (nodeRoot && nodeRoot !== node) {
-    var _nodeRootHost, _nodeRootHost$ownerDo, _node$ownerDocument;
-    attached = !!((_nodeRootHost = nodeRootHost) !== null && _nodeRootHost !== void 0 && (_nodeRootHost$ownerDo = _nodeRootHost.ownerDocument) !== null && _nodeRootHost$ownerDo !== void 0 && _nodeRootHost$ownerDo.contains(nodeRootHost) || node !== null && node !== void 0 && (_node$ownerDocument = node.ownerDocument) !== null && _node$ownerDocument !== void 0 && _node$ownerDocument.contains(node));
-    while (!attached && nodeRootHost) {
-      var _nodeRoot2, _nodeRootHost2, _nodeRootHost2$ownerD;
-      // since it's not attached and we have a root host, the node MUST be in a nested shadow DOM,
-      //  which means we need to get the host's host and check if that parent host is contained
-      //  in (i.e. attached to) the document
-      nodeRoot = getRootNode(nodeRootHost);
-      nodeRootHost = (_nodeRoot2 = nodeRoot) === null || _nodeRoot2 === void 0 ? void 0 : _nodeRoot2.host;
-      attached = !!((_nodeRootHost2 = nodeRootHost) !== null && _nodeRootHost2 !== void 0 && (_nodeRootHost2$ownerD = _nodeRootHost2.ownerDocument) !== null && _nodeRootHost2$ownerD !== void 0 && _nodeRootHost2$ownerD.contains(nodeRootHost));
-    }
-  }
-  return attached;
-};
-var isZeroArea = function isZeroArea(node) {
-  var _node$getBoundingClie = node.getBoundingClientRect(),
-    width = _node$getBoundingClie.width,
-    height = _node$getBoundingClie.height;
-  return width === 0 && height === 0;
-};
-var isHidden = function isHidden(node, _ref) {
-  var displayCheck = _ref.displayCheck,
-    getShadowRoot = _ref.getShadowRoot;
-  if (displayCheck === 'full-native') {
-    if ('checkVisibility' in node) {
-      // Chrome >= 105, Edge >= 105, Firefox >= 106, Safari >= 17.4
-      // @see https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#browser_compatibility
-      var visible = node.checkVisibility({
-        // Checking opacity might be desirable for some use cases, but natively,
-        // opacity zero elements _are_ focusable and tabbable.
-        checkOpacity: false,
-        opacityProperty: false,
-        contentVisibilityAuto: true,
-        visibilityProperty: true,
-        // This is an alias for `visibilityProperty`. Contemporary browsers
-        // support both. However, this alias has wider browser support (Chrome
-        // >= 105 and Firefox >= 106, vs. Chrome >= 121 and Firefox >= 122), so
-        // we include it anyway.
-        checkVisibilityCSS: true
-      });
-      return !visible;
+    if (current !== element && getNodeName(current) === 'details' && !current.open && !isWithinOpenDetailsSummary(element, current) || current.hasAttribute('hidden') || !isSlot && !isElementVisible(current)) {
+      return false;
     }
-    // Fall through to manual visibility checks
-  }
-
-  // NOTE: visibility will be `undefined` if node is detached from the document
-  //  (see notes about this further down), which means we will consider it visible
-  //  (this is legacy behavior from a very long way back)
-  // NOTE: we check this regardless of `displayCheck="none"` because this is a
-  //  _visibility_ check, not a _display_ check
-  if (getComputedStyle(node).visibility === 'hidden') {
-    return true;
-  }
-  var isDirectSummary = matches.call(node, 'details>summary:first-of-type');
-  var nodeUnderDetails = isDirectSummary ? node.parentElement : node;
-  if (matches.call(nodeUnderDetails, 'details:not([open]) *')) {
-    return true;
   }
-  if (!displayCheck || displayCheck === 'full' ||
-  // full-native can run this branch when it falls through in case
-  // Element#checkVisibility is unsupported
-  displayCheck === 'full-native' || displayCheck === 'legacy-full') {
-    if (typeof getShadowRoot === 'function') {
-      // figure out if we should consider the node to be in an undisclosed shadow and use the
-      //  'non-zero-area' fallback
-      var originalNode = node;
-      while (node) {
-        var parentElement = node.parentElement;
-        var rootNode = getRootNode(node);
-        if (parentElement && !parentElement.shadowRoot && getShadowRoot(parentElement) === true // check if there's an undisclosed shadow
-        ) {
-          // node has an undisclosed shadow which means we can only treat it as a black box, so we
-          //  fall back to a non-zero-area test
-          return isZeroArea(node);
-        } else if (node.assignedSlot) {
-          // iterate up slot
-          node = node.assignedSlot;
-        } else if (!parentElement && rootNode !== node.ownerDocument) {
-          // cross shadow boundary
-          node = rootNode.host;
-        } else {
-          // iterate up normal dom
-          node = parentElement;
-        }
-      }
-      node = originalNode;
-    }
-    // else, `getShadowRoot` might be true, but all that does is enable shadow DOM support
-    //  (i.e. it does not also presume that all nodes might have undisclosed shadows); or
-    //  it might be a falsy value, which means shadow DOM support is disabled
-
-    // Since we didn't find it sitting in an undisclosed shadow (or shadows are disabled)
-    //  now we can just test to see if it would normally be visible or not, provided it's
-    //  attached to the main document.
-    // NOTE: We must consider case where node is inside a shadow DOM and given directly to
-    //  `isTabbable()` or `isFocusable()` -- regardless of `getShadowRoot` option setting.
-
-    if (isNodeAttached(node)) {
-      // this works wherever the node is: if there's at least one client rect, it's
-      //  somehow displayed; it also covers the CSS 'display: contents' case where the
-      //  node itself is hidden in place of its contents; and there's no need to search
-      //  up the hierarchy either
-      return !node.getClientRects().length;
-    }
-
-    // Else, the node isn't attached to the document, which means the `getClientRects()`
-    //  API will __always__ return zero rects (this can happen, for example, if React
-    //  is used to render nodes onto a detached tree, as confirmed in this thread:
-    //  https://github.com/facebook/react/issues/9117#issuecomment-284228870)
-    //
-    // It also means that even window.getComputedStyle(node).display will return `undefined`
-    //  because styles are only computed for nodes that are in the document.
-    //
-    // NOTE: THIS HAS BEEN THE CASE FOR YEARS. It is not new, nor is it caused by tabbable
-    //  somehow. Though it was never stated officially, anyone who has ever used tabbable
-    //  APIs on nodes in detached containers has actually implicitly used tabbable in what
-    //  was later (as of v5.2.0 on Apr 9, 2021) called `displayCheck="none"` mode -- essentially
-    //  considering __everything__ to be visible because of the innability to determine styles.
-    //
-    // v6.0.0: As of this major release, the default 'full' option __no longer treats detached
-    //  nodes as visible with the 'none' fallback.__
-    if (displayCheck !== 'legacy-full') {
-      return true; // hidden
-    }
-    // else, fallback to 'none' mode and consider the node visible
-  } else if (displayCheck === 'non-zero-area') {
-    // NOTE: Even though this tests that the node's client rect is non-zero to determine
-    //  whether it's displayed, and that a detached node will __always__ have a zero-area
-    //  client rect, we don't special-case for whether the node is attached or not. In
-    //  this mode, we do want to consider nodes that have a zero area to be hidden at all
-    //  times, and that includes attached or not.
-    return isZeroArea(node);
-  }
-
-  // visible, as far as we can tell, or per current `displayCheck=none` mode, we assume
-  //  it's visible
-  return false;
-};
-
-// form fields (nested) inside a disabled fieldset are not focusable/tabbable
-//  unless they are in the _first_ <legend> element of the top-most disabled
-//  fieldset
-var isDisabledFromFieldset = function isDisabledFromFieldset(node) {
-  if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(node.tagName)) {
-    var parentNode = node.parentElement;
-    // check if `node` is contained in a disabled <fieldset>
-    while (parentNode) {
-      if (parentNode.tagName === 'FIELDSET' && parentNode.disabled) {
-        // look for the first <legend> among the children of the disabled <fieldset>
-        for (var i = 0; i < parentNode.children.length; i++) {
-          var child = parentNode.children.item(i);
-          // when the first <legend> (in document order) is found
-          if (child.tagName === 'LEGEND') {
-            // if its parent <fieldset> is not nested in another disabled <fieldset>,
-            // return whether `node` is a descendant of its first <legend>
-            return matches.call(parentNode, 'fieldset[disabled] *') ? true : !child.contains(node);
-          }
-        }
-        // the disabled <fieldset> containing `node` has no <legend>
-        return true;
-      }
-      parentNode = parentNode.parentElement;
+  return true;
+}
+function getTabIndex(element) {
+  const tabIndex = element.tabIndex;
+  if (tabIndex < 0) {
+    const nodeName = getNodeName(element);
+    if (nodeName === 'details' || nodeName === 'audio' || nodeName === 'video' || isHTMLElement(element) && element.isContentEditable) {
+      return 0;
     }
   }
-
-  // else, node's tabbable/focusable state should not be affected by a fieldset's
-  //  enabled/disabled state
-  return false;
-};
-var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(options, node) {
-  if (node.disabled || isHiddenInput(node) || isHidden(node, options) ||
-  // For a details element with a summary, the summary element gets the focus
-  isDetailsWithSummary(node) || isDisabledFromFieldset(node)) {
-    return false;
-  }
-  return true;
-};
-var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(options, node) {
-  if (isNonTabbableRadio(node) || getTabIndex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {
-    return false;
+  return tabIndex;
+}
+function getNamedRadioInput(element) {
+  if (getNodeName(element) !== 'input') {
+    return null;
   }
-  return true;
-};
-var isShadowRootTabbable = function isShadowRootTabbable(shadowHostNode) {
-  var tabIndex = parseInt(shadowHostNode.getAttribute('tabindex'), 10);
-  if (isNaN(tabIndex) || tabIndex >= 0) {
+  const input = element;
+  return input.type === 'radio' && input.name !== '' ? input : null;
+}
+function isTabbableRadio(element, candidates) {
+  const input = getNamedRadioInput(element);
+  if (!input) {
     return true;
   }
-  // If a custom element has an explicit negative tabindex,
-  // browsers will not allow tab targeting said element's children.
-  return false;
-};
-
-/**
- * @param {Array.<Element|CandidateScope>} candidates
- * @returns Element[]
- */
-var _sortByOrder = function sortByOrder(candidates) {
-  var regularTabbables = [];
-  var orderedTabbables = [];
-  candidates.forEach(function (item, i) {
-    var isScope = !!item.scopeParent;
-    var element = isScope ? item.scopeParent : item;
-    var candidateTabindex = getSortOrderTabIndex(element, isScope);
-    var elements = isScope ? _sortByOrder(item.candidates) : element;
-    if (candidateTabindex === 0) {
-      isScope ? regularTabbables.push.apply(regularTabbables, elements) : regularTabbables.push(element);
-    } else {
-      orderedTabbables.push({
-        documentOrder: i,
-        tabIndex: candidateTabindex,
-        item: item,
-        isScope: isScope,
-        content: elements
-      });
-    }
+  const checkedRadio = candidates.find(candidate => {
+    const radio = getNamedRadioInput(candidate);
+    return radio?.name === input.name && radio.form === input.form && radio.checked;
   });
-  return orderedTabbables.sort(sortOrderedTabbables).reduce(function (acc, sortable) {
-    sortable.isScope ? acc.push.apply(acc, sortable.content) : acc.push(sortable.content);
-    return acc;
-  }, []).concat(regularTabbables);
-};
-var tabbable = function tabbable(container, options) {
-  options = options || {};
-  var candidates;
-  if (options.getShadowRoot) {
-    candidates = _getCandidatesIteratively([container], options.includeContainer, {
-      filter: isNodeMatchingSelectorTabbable.bind(null, options),
-      flatten: false,
-      getShadowRoot: options.getShadowRoot,
-      shadowRootFilter: isShadowRootTabbable
+  if (checkedRadio) {
+    return checkedRadio === input;
+  }
+  return candidates.find(candidate => {
+    const radio = getNamedRadioInput(candidate);
+    return radio?.name === input.name && radio.form === input.form;
+  }) === input;
+}
+function getComposedChildren(container) {
+  if (isHTMLElement(container) && getNodeName(container) === 'slot') {
+    const assignedElements = container.assignedElements({
+      flatten: true
     });
-  } else {
-    candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
-  }
-  return _sortByOrder(candidates);
-};
-var focusable = function focusable(container, options) {
-  options = options || {};
-  var candidates;
-  if (options.getShadowRoot) {
-    candidates = _getCandidatesIteratively([container], options.includeContainer, {
-      filter: isNodeMatchingSelectorFocusable.bind(null, options),
-      flatten: true,
-      getShadowRoot: options.getShadowRoot
-    });
-  } else {
-    candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorFocusable.bind(null, options));
-  }
-  return candidates;
-};
-var isTabbable = function isTabbable(node, options) {
-  options = options || {};
-  if (!node) {
-    throw new Error('No node provided');
+    if (assignedElements.length > 0) {
+      return assignedElements;
+    }
   }
-  if (matches.call(node, candidateSelector) === false) {
-    return false;
+  if (isHTMLElement(container) && container.shadowRoot) {
+    return Array.from(container.shadowRoot.children);
   }
-  return isNodeMatchingSelectorTabbable(options, node);
-};
-
-function ownerDocument(node) {
-  return node?.ownerDocument || document;
+  return Array.from(container.children);
+}
+function appendCandidates(container, list) {
+  getComposedChildren(container).forEach(child => {
+    if (isFocusableCandidate(child)) {
+      list.push(child);
+    }
+    appendCandidates(child, list);
+  });
+}
+function appendMatchingElements(container, selector, list) {
+  getComposedChildren(container).forEach(child => {
+    if (isHTMLElement(child) && child.matches(selector)) {
+      list.push(child);
+    }
+    appendMatchingElements(child, selector, list);
+  });
+}
+function isTabbable(element) {
+  return isFocusableElement(element) && getTabIndex(element) >= 0;
+}
+function focusable(container) {
+  const candidates = [];
+  appendCandidates(container, candidates);
+  return candidates.filter(isFocusableElement);
+}
+function tabbable(container) {
+  const candidates = focusable(container);
+  return candidates.filter(element => getTabIndex(element) >= 0 && isTabbableRadio(element, candidates));
 }
-
-const getTabbableOptions = () => ({
-  getShadowRoot: true,
-  displayCheck:
-  // JSDOM does not support the `tabbable` library. To solve this we can
-  // check if `ResizeObserver` is a real function (not polyfilled), which
-  // determines if the current environment is JSDOM-like.
-  typeof ResizeObserver === 'function' && ResizeObserver.toString().includes('[native code]') ? 'full' : 'none'
-});
 function getTabbableIn(container, dir) {
-  const list = tabbable(container, getTabbableOptions());
+  const list = tabbable(container);
   const len = list.length;
   if (len === 0) {
     return undefined;
@@ -2643,14 +2254,15 @@ function isOutsideEvent(event, container) {
   return !relatedTarget || !contains(containerElement, relatedTarget);
 }
 function disableFocusInside(container) {
-  const tabbableElements = tabbable(container, getTabbableOptions());
+  const tabbableElements = tabbable(container);
   tabbableElements.forEach(element => {
     element.dataset.tabindex = element.getAttribute('tabindex') || '';
     element.setAttribute('tabindex', '-1');
   });
 }
 function enableFocusInside(container) {
-  const elements = container.querySelectorAll('[data-tabindex]');
+  const elements = [];
+  appendMatchingElements(container, '[data-tabindex]', elements);
   elements.forEach(element => {
     const tabindex = element.dataset.tabindex;
     delete element.dataset.tabindex;
@@ -2662,6 +2274,17 @@ function enableFocusInside(container) {
   });
 }
 
+/**
+ * Adds an event listener and returns a cleanup function to remove it.
+ */
+
+function addEventListener(target, type, listener, options) {
+  target.addEventListener(type, listener, options);
+  return () => {
+    target.removeEventListener(type, listener, options);
+  };
+}
+
 /**
  * Calls the provided function when the CSS open/close animation or transition completes.
  */
@@ -2686,6 +2309,14 @@ function useOpenChangeComplete(parameters) {
   }, [enabled, open, onComplete, runOnceAnimationsFinish]);
 }
 
+function useOnFirstRender(fn) {
+  const ref = React.useRef(true);
+  if (ref.current) {
+    ref.current = false;
+    fn();
+  }
+}
+
 const EMPTY = 0;
 class Timeout {
   static create() {
@@ -2884,16 +2515,15 @@ function preventScrollInsetScrollbars(referenceElement) {
     resizeFrame.request(lockScroll);
   }
   lockScroll();
-  win.addEventListener('resize', handleResize);
+  const unsubscribeResize = addEventListener(win, 'resize', handleResize);
   return () => {
     resizeFrame.cancel();
     cleanup();
-    // Sometimes this cleanup can be run after test teardown
-    // because it is called in a `setTimeout(fn, 0)`,
-    // in which case `removeEventListener` wouldn't be available,
-    // so we check for it to avoid test failures.
+    // Sometimes this cleanup can run after test teardown because it is called
+    // in a `setTimeout(fn, 0)`. Guard the returned cleanup to avoid calling
+    // `removeEventListener` when it is no longer available in tests.
     if (typeof win.removeEventListener === 'function') {
-      win.removeEventListener('resize', handleResize);
+      unsubscribeResize();
     }
   };
 }
@@ -2962,6 +2592,20 @@ function useScrollLock(enabled = true, referenceElement = null) {
   }, [enabled, referenceElement]);
 }
 
+/**
+ * Combines multiple cleanup functions into a single cleanup function.
+ */
+function mergeCleanups(...cleanups) {
+  return () => {
+    for (let i = 0; i < cleanups.length; i += 1) {
+      const cleanup = cleanups[i];
+      if (cleanup) {
+        cleanup();
+      }
+    }
+  };
+}
+
 /**
  * Untracks the provided value by turning it into a ref to remove its reactivity.
  *
@@ -3051,9 +2695,16 @@ function enqueueFocus(el, options = {}) {
   });
   if (sync) {
     exec();
-  } else {
-    rafId = requestAnimationFrame(exec);
+    return NOOP;
   }
+  const currentRafId = requestAnimationFrame(exec);
+  rafId = currentRafId;
+  return () => {
+    if (rafId === currentRafId) {
+      cancelAnimationFrame(currentRafId);
+      rafId = 0;
+    }
+  };
 }
 
 // Modified to add conditional `aria-hidden` support:
@@ -3300,6 +2951,7 @@ const FloatingPortal = /*#__PURE__*/React.forwardRef(function FloatingPortal(com
     className,
     render,
     renderGuards,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -3316,6 +2968,7 @@ const FloatingPortal = /*#__PURE__*/React.forwardRef(function FloatingPortal(com
   const beforeInsideRef = React.useRef(null);
   const afterInsideRef = React.useRef(null);
   const [focusManagerState, setFocusManagerState] = React.useState(null);
+  const focusInsideDisabledRef = React.useRef(false);
   const modal = focusManagerState?.modal;
   const open = focusManagerState?.open;
   const shouldRenderGuards = typeof renderGuards === 'boolean' ? renderGuards : !!focusManagerState && !focusManagerState.modal && focusManagerState.open && !!portalNode;
@@ -3331,26 +2984,28 @@ const FloatingPortal = /*#__PURE__*/React.forwardRef(function FloatingPortal(com
     // element outside or using the mouse.
     function onFocus(event) {
       if (portalNode && event.relatedTarget && isOutsideEvent(event)) {
-        const focusing = event.type === 'focusin';
-        const manageFocus = focusing ? enableFocusInside : disableFocusInside;
-        manageFocus(portalNode);
+        if (event.type === 'focusin') {
+          if (focusInsideDisabledRef.current) {
+            enableFocusInside(portalNode);
+            focusInsideDisabledRef.current = false;
+          }
+        } else {
+          disableFocusInside(portalNode);
+          focusInsideDisabledRef.current = true;
+        }
       }
     }
 
     // Listen to the event on the capture phase so they run before the focus
     // trap elements onFocus prop is called.
-    portalNode.addEventListener('focusin', onFocus, true);
-    portalNode.addEventListener('focusout', onFocus, true);
-    return () => {
-      portalNode.removeEventListener('focusin', onFocus, true);
-      portalNode.removeEventListener('focusout', onFocus, true);
-    };
+    return mergeCleanups(addEventListener(portalNode, 'focusin', onFocus, true), addEventListener(portalNode, 'focusout', onFocus, true));
   }, [portalNode, modal]);
   React.useEffect(() => {
-    if (!portalNode || open) {
+    if (!portalNode || open !== false) {
       return;
     }
     enableFocusInside(portalNode);
+    focusInsideDisabledRef.current = false;
   }, [open, portalNode]);
   const portalContextValue = React.useMemo(() => ({
     beforeOutsideRef,
@@ -3429,7 +3084,7 @@ const useFloatingTree = externalTree => {
 };
 
 function getEventType(event, lastInteractionType) {
-  const win = getWindow(event.target);
+  const win = getWindow(getTarget(event));
   if (event instanceof win.KeyboardEvent) {
     return 'keyboard';
   }
@@ -3474,11 +3129,10 @@ function getFirstTabbableElement(container) {
   if (!container) {
     return null;
   }
-  const tabbableOptions = getTabbableOptions();
-  if (isTabbable(container, tabbableOptions)) {
+  if (isTabbable(container)) {
     return container;
   }
-  return tabbable(container, tabbableOptions)[0] || container;
+  return tabbable(container)[0] || container;
 }
 function isFocusable(element) {
   if (!element || !element.isConnected) {
@@ -3490,14 +3144,16 @@ function isFocusable(element) {
   return isElementVisible(element);
 }
 function handleTabIndex(floatingFocusElement, orderRef) {
+  if (floatingFocusElement.hasAttribute('tabindex') && !floatingFocusElement.hasAttribute('data-tabindex')) {
+    return;
+  }
   if (!orderRef.current.includes('floating') && !floatingFocusElement.getAttribute('role')?.includes('dialog')) {
     return;
   }
-  const options = getTabbableOptions();
-  const focusableElements = focusable(floatingFocusElement, options);
+  const focusableElements = focusable(floatingFocusElement);
   const tabbableContent = focusableElements.filter(element => {
     const dataTabIndex = element.getAttribute('data-tabindex') || '';
-    return isTabbable(element, options) || element.hasAttribute('data-tabindex') && !dataTabIndex.startsWith('-');
+    return isTabbable(element) || element.hasAttribute('data-tabindex') && !dataTabIndex.startsWith('-');
   });
   const tabIndex = floatingFocusElement.getAttribute('tabindex');
   if (orderRef.current.includes('floating') || tabbableContent.length === 0) {
@@ -3556,7 +3212,7 @@ function FloatingFocusManager(props) {
   const preventReturnFocusRef = React.useRef(false);
   const isPointerDownRef = React.useRef(false);
   const pointerDownOutsideRef = React.useRef(false);
-  const tabbableIndexRef = React.useRef(-1);
+  const lastFocusedTabbableRef = React.useRef(null);
   const closeTypeRef = React.useRef('');
   const lastInteractionTypeRef = React.useRef('');
   const beforeGuardRef = React.useRef(null);
@@ -3569,13 +3225,9 @@ function FloatingFocusManager(props) {
   const isInsidePortal = portalContext != null;
   const floatingFocusElement = getFloatingFocusElement(floating);
   const getTabbableContent = useStableCallback((container = floatingFocusElement) => {
-    return container ? tabbable(container, getTabbableOptions()) : [];
+    return container ? tabbable(container) : [];
   });
   const getResolvedInsideElements = useStableCallback(() => getInsideElements?.().filter(element => element != null) ?? []);
-  const getTabbableElements = useStableCallback(container => {
-    const content = getTabbableContent(container);
-    return orderRef.current.map(() => content).filter(Boolean).flat();
-  });
 
   // Prevent Tab from escaping the modal when there are no tabbable elements.
   React.useEffect(() => {
@@ -3590,12 +3242,9 @@ function FloatingFocusManager(props) {
         }
       }
     }
-    const doc = ownerDocument(floatingFocusElement);
-    doc.addEventListener('keydown', onKeyDown);
-    return () => {
-      doc.removeEventListener('keydown', onKeyDown);
-    };
-  }, [disabled, domReference, floatingFocusElement, modal, orderRef, isUntrappedTypeableCombobox, getTabbableContent, getTabbableElements]);
+    const doc = ownerDocument(floatingFocusElement);
+    return addEventListener(doc, 'keydown', onKeyDown);
+  }, [disabled, domReference, floatingFocusElement, modal, orderRef, isUntrappedTypeableCombobox, getTabbableContent]);
 
   // Track pointer/keyboard interactions to disambiguate focus and outside presses.
   React.useEffect(() => {
@@ -3619,16 +3268,7 @@ function FloatingFocusManager(props) {
     function onKeyDown() {
       lastInteractionTypeRef.current = 'keyboard';
     }
-    doc.addEventListener('pointerdown', onPointerDown, true);
-    doc.addEventListener('pointerup', clearPointerDownOutside, true);
-    doc.addEventListener('pointercancel', clearPointerDownOutside, true);
-    doc.addEventListener('keydown', onKeyDown, true);
-    return () => {
-      doc.removeEventListener('pointerdown', onPointerDown, true);
-      doc.removeEventListener('pointerup', clearPointerDownOutside, true);
-      doc.removeEventListener('pointercancel', clearPointerDownOutside, true);
-      doc.removeEventListener('keydown', onKeyDown, true);
-    };
+    return mergeCleanups(addEventListener(doc, 'pointerdown', onPointerDown, true), addEventListener(doc, 'pointerup', clearPointerDownOutside, true), addEventListener(doc, 'pointercancel', clearPointerDownOutside, true), addEventListener(doc, 'keydown', onKeyDown, true));
   }, [disabled, floating, domReference, floatingFocusElement, open, portalContext, getResolvedInsideElements]);
 
   // Close on focus out and restore focus within the floating tree when needed.
@@ -3647,10 +3287,8 @@ function FloatingFocusManager(props) {
     }
     function handleFocusIn(event) {
       const target = getTarget(event);
-      const tabbableContent = getTabbableContent();
-      const tabbableIndex = tabbableContent.indexOf(target);
-      if (tabbableIndex !== -1) {
-        tabbableIndexRef.current = tabbableIndex;
+      if (isTabbable(target)) {
+        lastFocusedTabbableRef.current = target;
       }
     }
     function handleFocusOutside(event) {
@@ -3687,9 +3325,9 @@ function FloatingFocusManager(props) {
               return;
             }
           }
-          const prevTabbableIndex = tabbableIndexRef.current;
           const tabbableContent = getTabbableContent();
-          const nodeToFocus = tabbableContent[prevTabbableIndex] || tabbableContent[tabbableContent.length - 1] || floatingFocusElement;
+          const prevTabbable = lastFocusedTabbableRef.current;
+          const nodeToFocus = (prevTabbable && tabbableContent.includes(prevTabbable) ? prevTabbable : null) || tabbableContent[tabbableContent.length - 1] || floatingFocusElement;
           if (isHTMLElement(nodeToFocus)) {
             nodeToFocus.focus();
           }
@@ -3727,37 +3365,10 @@ function FloatingFocusManager(props) {
       });
     }
     const domReferenceElement = isHTMLElement(domReference) ? domReference : null;
-    const cleanups = [];
     if (!floating && !domReferenceElement) {
       return undefined;
     }
-    if (domReferenceElement) {
-      domReferenceElement.addEventListener('focusout', handleFocusOutside);
-      domReferenceElement.addEventListener('pointerdown', handlePointerDown);
-      cleanups.push(() => {
-        domReferenceElement.removeEventListener('focusout', handleFocusOutside);
-        domReferenceElement.removeEventListener('pointerdown', handlePointerDown);
-      });
-    }
-    if (floating) {
-      floating.addEventListener('focusin', handleFocusIn);
-      floating.addEventListener('focusout', handleFocusOutside);
-      if (portalContext) {
-        floating.addEventListener('focusout', markInsideReactTree, true);
-        cleanups.push(() => {
-          floating.removeEventListener('focusout', markInsideReactTree, true);
-        });
-      }
-      cleanups.push(() => {
-        floating.removeEventListener('focusin', handleFocusIn);
-        floating.removeEventListener('focusout', handleFocusOutside);
-      });
-    }
-    return () => {
-      cleanups.forEach(cleanup => {
-        cleanup();
-      });
-    };
+    return mergeCleanups(domReferenceElement && addEventListener(domReferenceElement, 'focusout', handleFocusOutside), domReferenceElement && addEventListener(domReferenceElement, 'pointerdown', handlePointerDown), floating && addEventListener(floating, 'focusin', handleFocusIn), floating && addEventListener(floating, 'focusout', handleFocusOutside), floating && portalContext && addEventListener(floating, 'focusout', markInsideReactTree, true));
   }, [disabled, domReference, floating, floatingFocusElement, modal, tree, portalContext, store, closeOnFocusOut, restoreFocus, getTabbableContent, isUntrappedTypeableCombobox, getNodeId, orderRef, dataRef, blurTimeout, pointerDownTimeout, restoreFocusFrame, nextFocusableElement, previousFocusableElement, getResolvedInsideElements]);
 
   // Hide everything outside the floating tree from assistive tech while open.
@@ -3794,7 +3405,6 @@ function FloatingFocusManager(props) {
 
     // Wait for any layout effect state setters to execute to set `tabIndex`.
     queueMicrotask(() => {
-      const focusableElements = getTabbableElements(floatingFocusElement);
       const initialFocusValueOrFn = initialFocusRef.current;
       const resolvedInitialFocus = typeof initialFocusValueOrFn === 'function' ? initialFocusValueOrFn(openInteractionTypeRef.current || '') : initialFocusValueOrFn;
 
@@ -3802,22 +3412,29 @@ function FloatingFocusManager(props) {
       if (resolvedInitialFocus === undefined || resolvedInitialFocus === false) {
         return;
       }
+      const focusAlreadyInsideFloatingEl = contains(floatingFocusElement, previouslyFocusedElement);
+      if (focusAlreadyInsideFloatingEl) {
+        return;
+      }
+      let focusableElements = null;
+      const getDefaultFocusElement = () => {
+        if (focusableElements == null) {
+          focusableElements = getTabbableContent(floatingFocusElement);
+        }
+        return focusableElements[0] || floatingFocusElement;
+      };
       let elToFocus;
       if (resolvedInitialFocus === true || resolvedInitialFocus === null) {
-        elToFocus = focusableElements[0] || floatingFocusElement;
+        elToFocus = getDefaultFocusElement();
       } else {
         elToFocus = resolveRef(resolvedInitialFocus);
       }
-      elToFocus = elToFocus || focusableElements[0] || floatingFocusElement;
-      const focusAlreadyInsideFloatingEl = contains(floatingFocusElement, previouslyFocusedElement);
-      if (focusAlreadyInsideFloatingEl) {
-        return;
-      }
+      elToFocus = elToFocus || getDefaultFocusElement();
       enqueueFocus(elToFocus, {
         preventScroll: elToFocus === floatingFocusElement
       });
     });
-  }, [disabled, open, floatingFocusElement, ignoreInitialFocus, getTabbableElements, initialFocusRef, openInteractionTypeRef]);
+  }, [disabled, open, floatingFocusElement, ignoreInitialFocus, getTabbableContent, initialFocusRef, openInteractionTypeRef]);
 
   // Track return focus targets and restore focus on unmount/close.
   useIsoLayoutEffect(() => {
@@ -3846,7 +3463,7 @@ function FloatingFocusManager(props) {
         preventReturnFocusRef.current = false;
       } else {
         let isPreventScrollSupported = false;
-        document.createElement('div').focus({
+        ownerDocument(floatingFocusElement).createElement('div').focus({
           get preventScroll() {
             isPreventScrollSupported = true;
             return false;
@@ -3883,14 +3500,15 @@ function FloatingFocusManager(props) {
       const activeEl = activeElement(doc);
       const insideElements = getResolvedInsideElements();
       const isFocusInsideFloatingTree = contains(floating, activeEl) || insideElements.some(element => element === activeEl || contains(element, activeEl)) || tree && getNodeChildren(tree.nodesRef.current, getNodeId(), false).some(node => contains(node.context?.elements.floating, activeEl));
+
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      const returnFocusValueOrFn = returnFocusRef.current;
       const returnElement = getReturnElement();
       queueMicrotask(() => {
         // This is `returnElement`, if it's tabbable, or its first tabbable child.
         const tabbableReturnElement = getFirstTabbableElement(returnElement);
-        const hasExplicitReturnFocus = typeof returnFocusRef.current !== 'boolean';
-        if (
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        returnFocusRef.current && !preventReturnFocusRef.current && isHTMLElement(tabbableReturnElement) && (
+        const hasExplicitReturnFocus = typeof returnFocusValueOrFn !== 'boolean';
+        if (returnFocusValueOrFn && !preventReturnFocusRef.current && isHTMLElement(tabbableReturnElement) && (
         // If the focus moved somewhere else after mount, avoid returning focus
         // since it likely entered a different element which should be
         // respected: https://github.com/floating-ui/floating-ui/issues/2607
@@ -3954,7 +3572,7 @@ function FloatingFocusManager(props) {
       ref: mergedBeforeGuardRef,
       onFocus: event => {
         if (modal) {
-          const els = getTabbableElements();
+          const els = getTabbableContent();
           enqueueFocus(els[els.length - 1]);
         } else if (portalContext?.portalNode) {
           preventReturnFocusRef.current = false;
@@ -3971,7 +3589,7 @@ function FloatingFocusManager(props) {
       ref: mergedAfterGuardRef,
       onFocus: event => {
         if (modal) {
-          enqueueFocus(getTabbableElements()[0]);
+          enqueueFocus(getTabbableContent()[0]);
         } else if (portalContext?.portalNode) {
           if (closeOnFocusOut) {
             preventReturnFocusRef.current = true;
@@ -4028,8 +3646,9 @@ function useClick(context, props = {}) {
 
       // Animations sometimes won't run on a typeable element if using a rAF.
       // Focus is always set on these elements. For touch, we may delay opening.
-      if (isTypeableElement(nativeEvent.target)) {
-        const details = createChangeEventDetails(reason, nativeEvent, nativeEvent.target);
+      const target = getTarget(nativeEvent);
+      if (isTypeableElement(target)) {
+        const details = createChangeEventDetails(reason, nativeEvent, target);
         if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
           touchOpenTimeout.start(touchOpenDelay, () => {
             store.setOpen(true, details);
@@ -4250,11 +3869,8 @@ function useDismiss(context, props = {}) {
       }
       const target = getTarget(event);
       const inertSelector = `[${createAttribute('inert')}]`;
-      let markers = Array.from(ownerDocument(store.select('floatingElement')).querySelectorAll(inertSelector));
       const targetRoot = isElement(target) ? target.getRootNode() : null;
-      if (isShadowRoot(targetRoot)) {
-        markers = markers.concat(Array.from(targetRoot.querySelectorAll(inertSelector)));
-      }
+      const markers = Array.from((isShadowRoot(targetRoot) ? targetRoot : ownerDocument(store.select('floatingElement'))).querySelectorAll(inertSelector));
       const triggers = store.context.triggerElements;
 
       // If another trigger is clicked, don't close the floating element.
@@ -4285,7 +3901,7 @@ function useDismiss(context, props = {}) {
       // Skip for touch events: scrollbars don't receive touch events on most platforms
       if (isHTMLElement(target) && !('touches' in event)) {
         const lastTraversableNode = isLastTraversableNode(target);
-        const style = getComputedStyle$1(target);
+        const style = getComputedStyle(target);
         const scrollRe = /auto|scroll/;
         const isScrollableX = lastTraversableNode || scrollRe.test(style.overflowX);
         const isScrollableY = lastTraversableNode || scrollRe.test(style.overflowY);
@@ -4362,14 +3978,19 @@ function useDismiss(context, props = {}) {
         });
       }
     }
-    function handleTouchStartCapture(event) {
-      currentPointerTypeRef.current = 'touch';
+    function addTargetEventListenerOnce(event, listener) {
       const target = getTarget(event);
-      function callback() {
-        handleTouchStart(event);
-        target?.removeEventListener(event.type, callback);
+      if (!target) {
+        return;
       }
-      target?.addEventListener(event.type, callback);
+      const unsubscribe = addEventListener(target, event.type, () => {
+        listener(event);
+        unsubscribe();
+      });
+    }
+    function handleTouchStartCapture(event) {
+      currentPointerTypeRef.current = 'touch';
+      addTargetEventListenerOnce(event, handleTouchStart);
     }
     function closeOnPressOutsideCapture(event) {
       cancelDismissOnEndTimeout.clear();
@@ -4379,16 +4000,13 @@ function useDismiss(context, props = {}) {
       if (event.type === 'mousedown' && touchStateRef.current && !touchStateRef.current.dismissOnMouseDown) {
         return;
       }
-      const target = getTarget(event);
-      function callback() {
-        if (event.type === 'pointerdown') {
-          handlePointerDown(event);
+      addTargetEventListenerOnce(event, targetEvent => {
+        if (targetEvent.type === 'pointerdown') {
+          handlePointerDown(targetEvent);
         } else {
-          closeOnPressOutside(event);
+          closeOnPressOutside(targetEvent);
         }
-        target?.removeEventListener(event.type, callback);
-      }
-      target?.addEventListener(event.type, callback);
+      });
     }
     function handlePressEndCapture(event) {
       if (!pressStartedInsideRef.current) {
@@ -4447,12 +4065,7 @@ function useDismiss(context, props = {}) {
       }
     }
     function handleTouchMoveCapture(event) {
-      const target = getTarget(event);
-      function callback() {
-        handleTouchMove(event);
-        target?.removeEventListener(event.type, callback);
-      }
-      target?.addEventListener(event.type, callback);
+      addTargetEventListenerOnce(event, handleTouchMove);
     }
     function handleTouchEnd(event) {
       if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement'))) {
@@ -4465,47 +4078,12 @@ function useDismiss(context, props = {}) {
       touchStateRef.current = null;
     }
     function handleTouchEndCapture(event) {
-      const target = getTarget(event);
-      function callback() {
-        handleTouchEnd(event);
-        target?.removeEventListener(event.type, callback);
-      }
-      target?.addEventListener(event.type, callback);
+      addTargetEventListenerOnce(event, handleTouchEnd);
     }
     const doc = ownerDocument(floatingElement);
-    if (escapeKey$1) {
-      doc.addEventListener('keydown', closeOnEscapeKeyDown);
-      doc.addEventListener('compositionstart', handleCompositionStart);
-      doc.addEventListener('compositionend', handleCompositionEnd);
-    }
-    if (outsidePressEnabled) {
-      doc.addEventListener('click', closeOnPressOutsideCapture, true);
-      doc.addEventListener('pointerdown', closeOnPressOutsideCapture, true);
-      doc.addEventListener('pointerup', handlePressEndCapture, true);
-      doc.addEventListener('pointercancel', handlePressEndCapture, true);
-      doc.addEventListener('mousedown', closeOnPressOutsideCapture, true);
-      doc.addEventListener('mouseup', handlePressEndCapture, true);
-      doc.addEventListener('touchstart', handleTouchStartCapture, true);
-      doc.addEventListener('touchmove', handleTouchMoveCapture, true);
-      doc.addEventListener('touchend', handleTouchEndCapture, true);
-    }
+    const unsubscribe = mergeCleanups(escapeKey$1 && mergeCleanups(addEventListener(doc, 'keydown', closeOnEscapeKeyDown), addEventListener(doc, 'compositionstart', handleCompositionStart), addEventListener(doc, 'compositionend', handleCompositionEnd)), outsidePressEnabled && mergeCleanups(addEventListener(doc, 'click', closeOnPressOutsideCapture, true), addEventListener(doc, 'pointerdown', closeOnPressOutsideCapture, true), addEventListener(doc, 'pointerup', handlePressEndCapture, true), addEventListener(doc, 'pointercancel', handlePressEndCapture, true), addEventListener(doc, 'mousedown', closeOnPressOutsideCapture, true), addEventListener(doc, 'mouseup', handlePressEndCapture, true), addEventListener(doc, 'touchstart', handleTouchStartCapture, true), addEventListener(doc, 'touchmove', handleTouchMoveCapture, true), addEventListener(doc, 'touchend', handleTouchEndCapture, true)));
     return () => {
-      if (escapeKey$1) {
-        doc.removeEventListener('keydown', closeOnEscapeKeyDown);
-        doc.removeEventListener('compositionstart', handleCompositionStart);
-        doc.removeEventListener('compositionend', handleCompositionEnd);
-      }
-      if (outsidePressEnabled) {
-        doc.removeEventListener('click', closeOnPressOutsideCapture, true);
-        doc.removeEventListener('pointerdown', closeOnPressOutsideCapture, true);
-        doc.removeEventListener('pointerup', handlePressEndCapture, true);
-        doc.removeEventListener('pointercancel', handlePressEndCapture, true);
-        doc.removeEventListener('mousedown', closeOnPressOutsideCapture, true);
-        doc.removeEventListener('mouseup', handlePressEndCapture, true);
-        doc.removeEventListener('touchstart', handleTouchStartCapture, true);
-        doc.removeEventListener('touchmove', handleTouchMoveCapture, true);
-        doc.removeEventListener('touchend', handleTouchEndCapture, true);
-      }
+      unsubscribe();
       compositionTimeout.clear();
       preventedPressSuppressionTimeout.clear();
       resetPressStartState();
@@ -4583,20 +4161,24 @@ function useDismiss(context, props = {}) {
   } : {}, [enabled, reference, floating]);
 }
 
-/* eslint-disable no-underscore-dangle */ // __cacheKey__
+/**
+ * The NoOptionalParams type is a utility type that checks if a function has optional or default parameters.
+ * If the function has optional or default parameters, it returns a string literal type with an error message.
+ * Otherwise, it returns the original function type.
+ *
+ * This is used to enforce that the combiner function passed to createSelector does not have optional or default parameters,
+ * as memoization relies on the Function.length property, which does not account for optional or default parameters.
+ */
 
-createSelectorCreator({
-  memoize: lruMemoize,
-  memoizeOptions: {
-    maxSize: 1,
-    equalityCheck: Object.is
-  }
-});
 /**
  * Creates a selector function that can be used to derive values from the store's state.
- * The selector can take up to three additional arguments that can be used in the selector logic.
+ *
+ * The combiner function can have up to three additional parameters, but it **cannot have optional or default parameters**.
+ *
  * This function accepts up to six functions and combines them into a single selector function.
- * The last parameter is the combiner function that combines the results of the previous selectors.
+ * The resulting selector will take the state from the combined selectors and any additional parameters required by the combiner.
+ *
+ * The return type of the resulting selector is determined by the return type of the combiner function.
  *
  * @example
  * const selector = createSelector(
@@ -4609,7 +4191,6 @@ createSelectorCreator({
  *   (state) => state.open,
  *   (disabled, open) => ({ disabled, open })
  * );
- *
  */
 /* eslint-disable id-denylist */
 const createSelector = (a, b, c, d, e, f, ...other) => {
@@ -4624,6 +4205,7 @@ const createSelector = (a, b, c, d, e, f, ...other) => {
   }
   return selector;
 };
+/* eslint-enable id-denylist */
 
 /* Some tests fail in R18 with the raw useSyncExternalStore. It may be possible to make it work
  * but for now we only enable it for R19+. */
@@ -4931,6 +4513,7 @@ class ReactStore extends Store {
 
 const selectors$1 = {
   open: createSelector(state => state.open),
+  transitionStatus: createSelector(state => state.transitionStatus),
   domReferenceElement: createSelector(state => state.domReferenceElement),
   referenceElement: createSelector(state => state.positionReference ?? state.referenceElement),
   floatingElement: createSelector(state => state.floatingElement),
@@ -4939,8 +4522,8 @@ const selectors$1 = {
 class FloatingRootStore extends ReactStore {
   constructor(options) {
     const {
+      syncOnly,
       nested,
-      noEmit,
       onOpenChange,
       triggerElements,
       ...initialState
@@ -4956,11 +4539,38 @@ class FloatingRootStore extends ReactStore {
       },
       events: createEventEmitter(),
       nested,
-      noEmit,
       triggerElements
     }, selectors$1);
+    this.syncOnly = syncOnly;
   }
 
+  /**
+   * Syncs the event used by hover logic to distinguish hover-open from click-like interaction.
+   */
+  syncOpenEvent = (newOpen, event) => {
+    if (!newOpen || !this.state.open ||
+    // Prevent a pending hover-open from overwriting a click-open event, while allowing
+    // click events to upgrade a hover-open.
+    event != null && isClickLikeEvent(event)) {
+      this.context.dataRef.current.openEvent = newOpen ? event : undefined;
+    }
+  };
+
+  /**
+   * Runs the root-owned side effects for an open state change.
+   */
+  dispatchOpenChange = (newOpen, eventDetails) => {
+    this.syncOpenEvent(newOpen, eventDetails.event);
+    const details = {
+      open: newOpen,
+      reason: eventDetails.reason,
+      nativeEvent: eventDetails.event,
+      nested: this.context.nested,
+      triggerElement: eventDetails.trigger
+    };
+    this.context.events.emit('openchange', details);
+  };
+
   /**
    * Emits the `openchange` event through the internal event emitter and calls the `onOpenChange` handler with the provided arguments.
    *
@@ -4968,22 +4578,11 @@ class FloatingRootStore extends ReactStore {
    * @param eventDetails Details about the event that triggered the open state change.
    */
   setOpen = (newOpen, eventDetails) => {
-    if (!newOpen || !this.state.open ||
-    // Prevent a pending hover-open from overwriting a click-open event, while allowing
-    // click events to upgrade a hover-open.
-    isClickLikeEvent(eventDetails.event)) {
-      this.context.dataRef.current.openEvent = newOpen ? eventDetails.event : undefined;
-    }
-    if (!this.context.noEmit) {
-      const details = {
-        open: newOpen,
-        reason: eventDetails.reason,
-        nativeEvent: eventDetails.event,
-        nested: this.context.nested,
-        triggerElement: eventDetails.trigger
-      };
-      this.context.events.emit('openchange', details);
+    if (this.syncOnly) {
+      this.context.onOpenChange?.(newOpen, eventDetails);
+      return;
     }
+    this.dispatchOpenChange(newOpen, eventDetails);
     this.context.onOpenChange?.(newOpen, eventDetails);
   };
 }
@@ -5086,13 +4685,14 @@ function useFloatingRootContext(options) {
   const nested = useFloatingParentNodeId() != null;
   const store = useRefWithInit(() => new FloatingRootStore({
     open,
+    transitionStatus: undefined,
     onOpenChange,
     referenceElement: elements.reference ?? null,
     floatingElement: elements.floating ?? null,
     triggerElements: new PopupTriggerMap(),
     floatingId,
-    nested,
-    noEmit: false
+    syncOnly: false,
+    nested
   })).current;
   useIsoLayoutEffect(() => {
     const valuesToSync = {
@@ -5112,7 +4712,6 @@ function useFloatingRootContext(options) {
   }, [open, floatingId, elements.reference, elements.floating, store]);
   store.context.onOpenChange = onOpenChange;
   store.context.nested = nested;
-  store.context.noEmit = false;
   return store;
 }
 
@@ -5160,10 +4759,11 @@ function useFloating(options = {}) {
     setPositionReferenceRaw(computedPositionReference);
     position.refs.setReference(computedPositionReference);
   }, [position.refs]);
-  const [localDomReference, setLocalDomReference] = React.useState(null);
+  const [localDomReference, setLocalDomReference] = React.useState(undefined);
   const [localFloatingElement, setLocalFloatingElement] = React.useState(null);
-  rootContext.useSyncedValue('referenceElement', localDomReference);
-  rootContext.useSyncedValue('domReferenceElement', isElement(localDomReference) ? localDomReference : null);
+  rootContext.useSyncedValue('referenceElement', localDomReference ?? null);
+  const localDomReferenceElement = isElement(localDomReference) ? localDomReference : null;
+  rootContext.useSyncedValue('domReferenceElement', localDomReference === undefined ? rootContextElements.domReference : localDomReferenceElement);
   rootContext.useSyncedValue('floatingElement', localFloatingElement);
   const setReference = React.useCallback(node => {
     if (isElement(node) || node === null) {
@@ -5313,6 +4913,17 @@ function mutablyMergeProps(outputProps, props, isItem, eventHandlers) {
   }
 }
 
+function isMouseWithinBounds(event) {
+  const targetRect = event.currentTarget.getBoundingClientRect();
+
+  // Safari randomly fires `mouseleave` incorrectly when the item is
+  // aligned to the trigger. This is a workaround to prevent the highlight
+  // from being removed while the cursor is still within the bounds of the item.
+  // https://github.com/mui/base-ui/issues/869
+  const isWithinBounds = targetRect.top + 1 <= event.clientY && event.clientY <= targetRect.bottom - 1 && targetRect.left + 1 <= event.clientX && event.clientX <= targetRect.right - 1;
+  return isWithinBounds;
+}
+
 const ESCAPE = 'Escape';
 function doSwitch(orientation, vertical, horizontal) {
   switch (orientation) {
@@ -5400,6 +5011,7 @@ function useListNavigation(context, props) {
   const previousOpenRef = React.useRef(open);
   const forceSyncFocusRef = React.useRef(false);
   const forceScrollIntoViewRef = React.useRef(false);
+  const cancelQueuedFocusRef = React.useRef(null);
   const disabledIndicesRef = useValueAsRef(disabledIndices);
   const latestOpenRef = useValueAsRef(open);
   const selectedIndexRef = useValueAsRef(selectedIndex);
@@ -5409,7 +5021,7 @@ function useListNavigation(context, props) {
       if (virtual) {
         tree?.events.emit('virtualfocus', item);
       } else {
-        enqueueFocus(item, {
+        cancelQueuedFocusRef.current = enqueueFocus(item, {
           sync: forceSyncFocusRef.current,
           preventScroll: true
         });
@@ -5513,7 +5125,7 @@ function useListNavigation(context, props) {
         };
         waitForListPopulated();
       }
-    } else if (!isIndexOutOfListBounds(listRef, activeIndex)) {
+    } else if (!isIndexOutOfListBounds(listRef.current, activeIndex)) {
       indexRef.current = activeIndex;
       focusItem();
       forceScrollIntoViewRef.current = false;
@@ -5548,17 +5160,17 @@ function useListNavigation(context, props) {
     }
   }, [open, focusItemOnOpen]);
   const hasActiveIndex = activeIndex != null;
-  const item = React.useMemo(() => {
-    function syncCurrentTarget(event) {
-      if (!latestOpenRef.current) {
-        return;
-      }
-      const index = listRef.current.indexOf(event.currentTarget);
-      if (index !== -1 && indexRef.current !== index) {
-        indexRef.current = index;
-        onNavigate(event);
-      }
+  const syncCurrentTarget = useStableCallback(event => {
+    if (!latestOpenRef.current) {
+      return;
+    }
+    const index = listRef.current.indexOf(event.currentTarget);
+    if (index !== -1 && (indexRef.current !== index || activeIndex !== index)) {
+      indexRef.current = index;
+      onNavigate(event);
     }
+  });
+  const item = React.useMemo(() => {
     const itemProps = {
       onFocus(event) {
         forceSyncFocusRef.current = true;
@@ -5583,15 +5195,17 @@ function useListNavigation(context, props) {
         }
         forceSyncFocusRef.current = true;
         const relatedTarget = event.relatedTarget;
+        if (isMouseWithinBounds(event)) {
+          return;
+        }
         if (!focusItemOnHover || listRef.current.includes(relatedTarget)) {
           return;
         }
         if (!resetOnPointerLeaveRef.current) {
           return;
         }
-        enqueueFocus(null, {
-          sync: true
-        });
+        cancelQueuedFocusRef.current?.();
+        cancelQueuedFocusRef.current = null;
         indexRef.current = -1;
         onNavigate(event);
         if (!virtual) {
@@ -5606,7 +5220,7 @@ function useListNavigation(context, props) {
       }
     };
     return itemProps;
-  }, [latestOpenRef, floatingFocusElementRef, focusItemOnHover, listRef, onNavigate, resetOnPointerLeaveRef, virtual]);
+  }, [syncCurrentTarget, latestOpenRef, floatingFocusElementRef, focusItemOnHover, listRef, onNavigate, resetOnPointerLeaveRef, virtual]);
   const getParentOrientation = React.useCallback(() => {
     return parentOrientation ?? tree?.nodesRef.current.find(node => node.id === parentId)?.context?.dataRef?.current.orientation;
   }, [parentId, tree, parentOrientation]);
@@ -5671,12 +5285,10 @@ function useListNavigation(context, props) {
       // To calculate movements on the grid, we use hypothetical cell indices
       // as if every item was 1x1, then convert back to real indices.
       const cellMap = createGridCellMap(sizes, cols);
-      const minGridIndex = cellMap.findIndex(index => index != null && !isListIndexDisabled(listRef, index, disabledIndices));
+      const minGridIndex = cellMap.findIndex(index => index != null && !isListIndexDisabled(listRef.current, index, disabledIndices));
       // last enabled index
-      const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !isListIndexDisabled(listRef, index, disabledIndices) ? cellIndex : foundIndex, -1);
-      const index = cellMap[getGridNavigatedIndex({
-        current: cellMap.map(itemIndex => itemIndex != null ? listRef.current[itemIndex] : null)
-      }, {
+      const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !isListIndexDisabled(listRef.current, index, disabledIndices) ? cellIndex : foundIndex, -1);
+      const index = cellMap[getGridNavigatedIndex(cellMap.map(itemIndex => itemIndex != null ? listRef.current[itemIndex] : null), {
         event,
         orientation,
         loopFocus,
@@ -5684,7 +5296,7 @@ function useListNavigation(context, props) {
         cols,
         // treat undefined (empty grid spaces) as disabled indices so we
         // don't end up in them
-        disabledIndices: getGridCellIndices([...((typeof disabledIndices !== 'function' ? disabledIndices : null) || listRef.current.map((_, listIndex) => isListIndexDisabled(listRef, listIndex, disabledIndices) ? listIndex : undefined)), undefined], cellMap),
+        disabledIndices: getGridCellIndices([...((typeof disabledIndices !== 'function' ? disabledIndices : null) || listRef.current.map((_, listIndex) => isListIndexDisabled(listRef.current, listIndex, disabledIndices) ? listIndex : undefined)), undefined], cellMap),
         minIndex: minGridIndex,
         maxIndex: maxGridIndex,
         prevIndex: getGridCellIndexOfCorner(indexRef.current > maxIndex ? minIndex : indexRef.current, sizes, cellMap, cols,
@@ -5723,13 +5335,13 @@ function useListNavigation(context, props) {
               indexRef.current = minIndex;
             }
           } else {
-            indexRef.current = findNonDisabledListIndex(listRef, {
+            indexRef.current = findNonDisabledListIndex(listRef.current, {
               startingIndex: currentIndex,
               disabledIndices
             });
           }
         } else {
-          indexRef.current = Math.min(maxIndex, findNonDisabledListIndex(listRef, {
+          indexRef.current = Math.min(maxIndex, findNonDisabledListIndex(listRef.current, {
             startingIndex: currentIndex,
             disabledIndices
           }));
@@ -5744,20 +5356,20 @@ function useListNavigation(context, props) {
             indexRef.current = maxIndex;
           }
         } else {
-          indexRef.current = findNonDisabledListIndex(listRef, {
+          indexRef.current = findNonDisabledListIndex(listRef.current, {
             startingIndex: currentIndex,
             decrement: true,
             disabledIndices
           });
         }
       } else {
-        indexRef.current = Math.max(minIndex, findNonDisabledListIndex(listRef, {
+        indexRef.current = Math.max(minIndex, findNonDisabledListIndex(listRef.current, {
           startingIndex: currentIndex,
           decrement: true,
           disabledIndices
         }));
       }
-      if (isIndexOutOfListBounds(listRef, indexRef.current)) {
+      if (isIndexOutOfListBounds(listRef.current, indexRef.current)) {
         indexRef.current = -1;
       }
       onNavigate(event);
@@ -6240,19 +5852,8 @@ const InternalBackdrop = /*#__PURE__*/React.forwardRef(function InternalBackdrop
   } = props;
   let clipPath;
   if (cutout) {
-    const rect = cutout?.getBoundingClientRect();
-    clipPath = `polygon(
-      0% 0%,
-      100% 0%,
-      100% 100%,
-      0% 100%,
-      0% 0%,
-      ${rect.left}px ${rect.top}px,
-      ${rect.left}px ${rect.bottom}px,
-      ${rect.right}px ${rect.bottom}px,
-      ${rect.right}px ${rect.top}px,
-      ${rect.left}px ${rect.top}px
-    )`;
+    const rect = cutout.getBoundingClientRect();
+    clipPath = `polygon(0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,${rect.left}px ${rect.top}px,${rect.left}px ${rect.bottom}px,${rect.right}px ${rect.bottom}px,${rect.right}px ${rect.top}px,${rect.left}px ${rect.top}px)`;
   }
   return /*#__PURE__*/jsx("div", {
     ref: ref,
@@ -6272,14 +5873,6 @@ const InternalBackdrop = /*#__PURE__*/React.forwardRef(function InternalBackdrop
   });
 });
 
-function useOnFirstRender(fn) {
-  const ref = React.useRef(true);
-  if (ref.current) {
-    ref.current = false;
-    fn();
-  }
-}
-
 const ComboboxRootContext = /*#__PURE__*/React.createContext(undefined);
 const ComboboxFloatingContext = /*#__PURE__*/React.createContext(undefined);
 const ComboboxDerivedItemsContext = /*#__PURE__*/React.createContext(undefined);
@@ -6463,7 +6056,6 @@ function resolveMultipleLabels(values, items, itemToStringLabel) {
 const selectors = {
   id: createSelector(state => state.id),
   labelId: createSelector(state => state.labelId),
-  query: createSelector(state => state.query),
   items: createSelector(state => state.items),
   selectedValue: createSelector(state => state.selectedValue),
   hasSelectionChips: createSelector(state => {
@@ -6515,25 +6107,13 @@ const selectors = {
   openMethod: createSelector(state => state.openMethod),
   inputInsidePopup: createSelector(state => state.inputInsidePopup),
   selectionMode: createSelector(state => state.selectionMode),
-  listRef: createSelector(state => state.listRef),
-  labelsRef: createSelector(state => state.labelsRef),
-  popupRef: createSelector(state => state.popupRef),
-  emptyRef: createSelector(state => state.emptyRef),
-  inputRef: createSelector(state => state.inputRef),
-  keyboardActiveRef: createSelector(state => state.keyboardActiveRef),
-  chipsContainerRef: createSelector(state => state.chipsContainerRef),
-  clearRef: createSelector(state => state.clearRef),
-  valuesRef: createSelector(state => state.valuesRef),
-  allValuesRef: createSelector(state => state.allValuesRef),
   name: createSelector(state => state.name),
+  form: createSelector(state => state.form),
   disabled: createSelector(state => state.disabled),
   readOnly: createSelector(state => state.readOnly),
   required: createSelector(state => state.required),
   grid: createSelector(state => state.grid),
-  isGrouped: createSelector(state => state.isGrouped),
   virtualized: createSelector(state => state.virtualized),
-  onOpenChangeComplete: createSelector(state => state.onOpenChangeComplete),
-  openOnInputClick: createSelector(state => state.openOnInputClick),
   itemToStringLabel: createSelector(state => state.itemToStringLabel),
   isItemEqualToValue: createSelector(state => state.isItemEqualToValue),
   modal: createSelector(state => state.modal),
@@ -6641,6 +6221,7 @@ const FieldRootContext = /*#__PURE__*/React.createContext({
   markedDirtyRef: {
     current: false
   },
+  registerFieldControl: NOOP,
   validation: {
     getValidationProps: (props = EMPTY_OBJECT) => props,
     getInputValidationProps: (props = EMPTY_OBJECT) => props,
@@ -6658,18 +6239,35 @@ function useFieldRootContext(optional = true) {
   return context;
 }
 
-/**
- * Combines the field's client-side, stateful validity data with the external invalid state to
- * determine the field's true validity.
- */
-function getCombinedFieldValidityData(validityData, invalid) {
-  return {
-    ...validityData,
-    state: {
-      ...validityData.state,
-      valid: !invalid && validityData.state.valid
+function useRegisterFieldControl(controlRef, params) {
+  const {
+    enabled = true,
+    getValue,
+    id,
+    value
+  } = params;
+  const {
+    registerFieldControl
+  } = useFieldRootContext();
+  const sourceRef = React.useRef(null);
+  if (!sourceRef.current) {
+    sourceRef.current = Symbol();
+  }
+  useIsoLayoutEffect(() => {
+    const source = sourceRef.current;
+    if (!source || !enabled) {
+      return undefined;
     }
-  };
+    registerFieldControl(source, {
+      controlRef,
+      getValue,
+      id,
+      value
+    });
+    return () => {
+      registerFieldControl(source, undefined);
+    };
+  }, [controlRef, enabled, getValue, id, registerFieldControl, value]);
 }
 
 const FormContext = /*#__PURE__*/React.createContext({
@@ -6689,74 +6287,6 @@ function useFormContext() {
   return React.useContext(FormContext);
 }
 
-function useField(params) {
-  const {
-    enabled = true,
-    value,
-    id,
-    name,
-    controlRef,
-    commit
-  } = params;
-  const {
-    formRef
-  } = useFormContext();
-  const {
-    invalid,
-    markedDirtyRef,
-    validityData,
-    setValidityData
-  } = useFieldRootContext();
-  const getValue = useStableCallback(params.getValue);
-  useIsoLayoutEffect(() => {
-    if (!enabled) {
-      return;
-    }
-    let initialValue = value;
-    if (initialValue === undefined) {
-      initialValue = getValue();
-    }
-    if (validityData.initialValue === null && initialValue !== null) {
-      setValidityData(prev => ({
-        ...prev,
-        initialValue
-      }));
-    }
-  }, [enabled, setValidityData, value, validityData.initialValue, getValue]);
-  useIsoLayoutEffect(() => {
-    if (!enabled || !id) {
-      return;
-    }
-    formRef.current.fields.set(id, {
-      getValue,
-      name,
-      controlRef,
-      validityData: getCombinedFieldValidityData(validityData, invalid),
-      validate(flushSync = true) {
-        let nextValue = value;
-        if (nextValue === undefined) {
-          nextValue = getValue();
-        }
-        markedDirtyRef.current = true;
-        if (!flushSync) {
-          commit(nextValue);
-        } else {
-          // Synchronously update the validity state so the submit event can be prevented.
-          ReactDOM.flushSync(() => commit(nextValue));
-        }
-      }
-    });
-  }, [commit, controlRef, enabled, formRef, getValue, id, invalid, markedDirtyRef, name, validityData, value]);
-  useIsoLayoutEffect(() => {
-    const fields = formRef.current.fields;
-    return () => {
-      if (id) {
-        fields.delete(id);
-      }
-    };
-  }, [formRef, id]);
-}
-
 /**
  * A context for providing [labelable elements](https://html.spec.whatwg.org/multipage/forms.html#category-label)\
  * with an accessible name (label) and description.
@@ -6946,9 +6476,12 @@ function AriaCombobox(props) {
     onSelectedValueChange,
     defaultInputValue: defaultInputValueProp,
     inputValue: inputValueProp,
+    open: openProp,
+    defaultOpen = false,
     selectionMode = 'none',
     onItemHighlighted: onItemHighlightedProp,
     name: nameProp,
+    form,
     disabled: disabledProp = false,
     readOnly = false,
     required = false,
@@ -7074,8 +6607,8 @@ function AriaCombobox(props) {
     state: 'inputValue'
   });
   const [open, setOpenUnwrapped] = useControlled({
-    controlled: props.open,
-    default: props.defaultOpen,
+    controlled: openProp,
+    default: defaultOpen,
     name: 'Combobox',
     state: 'open'
   });
@@ -7177,6 +6710,7 @@ function AriaCombobox(props) {
     allValuesRef,
     selectionEventRef,
     name,
+    form,
     disabled,
     readOnly,
     required,
@@ -7250,13 +6784,11 @@ function AriaCombobox(props) {
     openMethod,
     triggerProps
   } = useOpenInteractionType(open);
-  useField({
+  const getFieldValue = useStableCallback(() => fieldStringValue);
+  useRegisterFieldControl(inputInsidePopup ? triggerRef : inputRef, {
     id,
-    name,
-    commit: validation.commit,
     value: fieldRawValue,
-    controlRef: inputInsidePopup ? triggerRef : inputRef,
-    getValue: () => fieldStringValue
+    getValue: getFieldValue
   });
   const forceMount = useStableCallback(() => {
     if (items) {
@@ -7437,9 +6969,9 @@ function AriaCombobox(props) {
     if (!store.state.submitOnItemClick) {
       return;
     }
-    const form = store.state.inputElement?.form;
-    if (form && typeof form.requestSubmit === 'function') {
-      form.requestSubmit();
+    const formElement = validation.inputRef.current?.form ?? store.state.inputElement?.form;
+    if (formElement && typeof formElement.requestSubmit === 'function') {
+      formElement.requestSubmit();
     }
   });
   const handleUnmount = useStableCallback(() => {
@@ -7694,9 +7226,9 @@ function AriaCombobox(props) {
     enabled: !readOnly && !disabled && openOnInputClick,
     event: 'mousedown-only',
     toggle: false,
-    // Apply a small delay for touch to let iOS viewport centering settle.
+    // Apply a small delay for touch to let mobile viewport/keyboard positioning settle.
     // This avoids top-bottom flip flickers if the preferred position is "top" when first tapping.
-    touchOpenDelay: inputInsidePopup ? 0 : 50,
+    touchOpenDelay: inputInsidePopup ? 0 : 100,
     reason: inputPress
   });
   const dismiss = useDismiss(floatingRootContext, {
@@ -7789,6 +7321,7 @@ function AriaCombobox(props) {
       getItemProps,
       selectionMode,
       name,
+      form,
       disabled,
       readOnly,
       required,
@@ -7805,7 +7338,7 @@ function AriaCombobox(props) {
       hasInputValue,
       requestSubmit
     });
-  }, [store, id, selectedValue, open, mounted, transitionStatus, items, getFloatingProps, getReferenceProps, getItemProps, openMethod, triggerProps, selectionMode, name, disabled, readOnly, required, validation, grid, isGrouped, virtualized, onOpenChangeComplete, openOnInputClick, itemToStringLabel, modal, isItemEqualToValue, submitOnItemClick, hasInputValue, inlineProp, requestSubmit, autoHighlightMode]);
+  }, [store, id, selectedValue, open, mounted, transitionStatus, items, getFloatingProps, getReferenceProps, getItemProps, openMethod, triggerProps, selectionMode, name, disabled, readOnly, required, validation, grid, isGrouped, virtualized, onOpenChangeComplete, openOnInputClick, itemToStringLabel, modal, isItemEqualToValue, submitOnItemClick, hasInputValue, inlineProp, requestSubmit, autoHighlightMode, form]);
   const hiddenInputRef = useMergedRefs(inputRefProp, validation.inputRef);
   const itemsContextValue = React.useMemo(() => ({
     query,
@@ -7829,11 +7362,12 @@ function AriaCombobox(props) {
       const currentSerializedValue = stringifyAsValue(value, itemToStringValue);
       return /*#__PURE__*/jsx("input", {
         type: "hidden",
+        form: form,
         name: name,
         value: currentSerializedValue
       }, currentSerializedValue);
     });
-  }, [multiple, selectedValue, name, itemToStringValue]);
+  }, [multiple, selectedValue, form, name, itemToStringValue]);
   const children = /*#__PURE__*/jsxs(React.Fragment, {
     children: [props.children, /*#__PURE__*/jsx("input", {
       ...validation.getInputValidationProps({
@@ -7851,7 +7385,7 @@ function AriaCombobox(props) {
           if (event.nativeEvent.defaultPrevented) {
             return;
           }
-          const nextValue = event.target.value;
+          const nextValue = event.currentTarget.value;
           const details = createChangeEventDetails(none, event.nativeEvent);
           function handleChange() {
             // Browser autofill only writes a single scalar value.
@@ -7867,8 +7401,15 @@ function AriaCombobox(props) {
               return;
             }
             const matchingValue = valuesRef.current.find(v => {
-              const candidate = stringifyAsValue(v, itemToStringValue);
-              if (candidate.toLowerCase() === nextValue.toLowerCase()) {
+              // Try matching by value first (e.g., "US" for country code)
+              const candidateValue = stringifyAsValue(v, itemToStringValue);
+              if (candidateValue.toLowerCase() === nextValue.toLowerCase()) {
+                return true;
+              }
+              // Also try matching by label for browser autofill compatibility
+              // (browsers autofill with displayed text like "United States", not the underlying value)
+              const candidateLabel = stringifyAsLabel(v, itemToStringLabel);
+              if (candidateLabel.toLowerCase() === nextValue.toLowerCase()) {
                 return true;
               }
               return false;
@@ -7890,6 +7431,7 @@ function AriaCombobox(props) {
         }
       }),
       id: id && hiddenInputName == null ? `${id}-hidden-input` : undefined,
+      form: form,
       name: hiddenInputName,
       autoComplete: formAutoComplete,
       disabled: disabled,
@@ -7899,7 +7441,8 @@ function AriaCombobox(props) {
       ref: hiddenInputRef,
       style: hiddenInputName ? visuallyHiddenInput : visuallyHidden,
       tabIndex: -1,
-      "aria-hidden": true
+      "aria-hidden": true,
+      suppressHydrationWarning: true
     }), hiddenInputs]
   });
   return /*#__PURE__*/jsx(ComboboxRootContext.Provider, {
@@ -7930,8 +7473,9 @@ const triggerStateAttributesMapping = {
 
 function getPseudoElementBounds(element) {
   const elementRect = element.getBoundingClientRect();
-  const beforeStyles = window.getComputedStyle(element, '::before');
-  const afterStyles = window.getComputedStyle(element, '::after');
+  const win = getWindow(element);
+  const beforeStyles = win.getComputedStyle(element, '::before');
+  const afterStyles = win.getComputedStyle(element, '::after');
   const hasPseudoElements = beforeStyles.content !== 'none' || afterStyles.content !== 'none';
   if (!hasPseudoElements) {
     return elementRect;
@@ -7967,6 +7511,8 @@ const BOUNDARY_OFFSET = 2;
 /**
  * A button that opens the popup.
  * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxTrigger$2 = /*#__PURE__*/React.forwardRef(function ComboboxTrigger(componentProps, forwardedRef) {
   const {
@@ -7975,6 +7521,7 @@ const ComboboxTrigger$2 = /*#__PURE__*/React.forwardRef(function ComboboxTrigger
     nativeButton = true,
     disabled: disabledProp = false,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -8070,7 +7617,7 @@ const ComboboxTrigger$2 = /*#__PURE__*/React.forwardRef(function ComboboxTrigger
     disabled,
     popupSide,
     listEmpty,
-    placeholder: !hasSelectedValue
+    placeholder: selectionMode === 'none' ? false : !hasSelectedValue
   };
   const setTriggerElement = useStableCallback(element => {
     store.set('triggerElement', element);
@@ -8215,6 +7762,7 @@ const ComboboxInput$2 = /*#__PURE__*/React.forwardRef(function ComboboxInput(com
     className,
     disabled: disabledProp = false,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -8243,6 +7791,7 @@ const ComboboxInput$2 = /*#__PURE__*/React.forwardRef(function ComboboxInput(com
   const comboboxDisabled = useStore(store, selectors.disabled);
   const readOnly = useStore(store, selectors.readOnly);
   const name = useStore(store, selectors.name);
+  const form = useStore(store, selectors.form);
   const selectionMode = useStore(store, selectors.selectionMode);
   const autoHighlightMode = useStore(store, selectors.autoHighlight);
   const inputProps = useStore(store, selectors.inputProps);
@@ -8295,6 +7844,7 @@ const ComboboxInput$2 = /*#__PURE__*/React.forwardRef(function ComboboxInput(com
     const {
       highlightedChipIndex
     } = comboboxChipsContext;
+    const renderedChipsCount = comboboxChipsContext.chipsRef.current.length;
     if (highlightedChipIndex !== undefined) {
       if (event.key === 'ArrowLeft') {
         event.preventDefault();
@@ -8305,7 +7855,7 @@ const ComboboxInput$2 = /*#__PURE__*/React.forwardRef(function ComboboxInput(com
         }
       } else if (event.key === 'ArrowRight') {
         event.preventDefault();
-        if (highlightedChipIndex < selectedValue.length - 1) {
+        if (highlightedChipIndex < renderedChipsCount - 1) {
           nextIndex = highlightedChipIndex + 1;
         } else {
           nextIndex = undefined;
@@ -8328,8 +7878,7 @@ const ComboboxInput$2 = /*#__PURE__*/React.forwardRef(function ComboboxInput(com
     // Handle navigation when no chip is highlighted
     if (event.key === 'ArrowLeft' && (event.currentTarget.selectionStart ?? 0) === 0 && selectedValue.length > 0) {
       event.preventDefault();
-      const lastChipIndex = Math.max(selectedValue.length - 1, 0);
-      nextIndex = lastChipIndex;
+      nextIndex = renderedChipsCount > 0 ? renderedChipsCount - 1 : undefined;
     } else if (event.key === 'Backspace' && event.currentTarget.value === '' && selectedValue.length > 0) {
       store.state.setIndices({
         activeIndex: null,
@@ -8352,6 +7901,7 @@ const ComboboxInput$2 = /*#__PURE__*/React.forwardRef(function ComboboxInput(com
       disabled,
       readOnly,
       required: selectionMode === 'none' ? required : undefined,
+      form,
       ...(selectionMode === 'none' && name && {
         name
       }),
@@ -8519,7 +8069,9 @@ const ComboboxInput$2 = /*#__PURE__*/React.forwardRef(function ComboboxInput(com
 
         // Handle deletion when no chip is highlighted and the input is empty.
         if (comboboxChipsContext && event.key === 'Backspace' && input.value === '' && comboboxChipsContext.highlightedChipIndex === undefined && Array.isArray(selectedValue) && selectedValue.length > 0) {
-          const newValue = selectedValue.slice(0, -1);
+          const renderedChipsCount = comboboxChipsContext.chipsRef.current.length;
+          const removalIndex = renderedChipsCount > 0 ? renderedChipsCount - 1 : selectedValue.length - 1;
+          const newValue = selectedValue.filter((_, index) => index !== removalIndex);
           // If the removed item was also the active (highlighted) item, clear highlight
           store.state.setIndices({
             activeIndex: null,
@@ -8579,6 +8131,25 @@ const ComboboxInput$2 = /*#__PURE__*/React.forwardRef(function ComboboxInput(com
   });
 });
 
+function handleInputPress(event, store, disabled, readOnly, shouldIgnoreTarget) {
+  if (event.baseUIHandlerPrevented || readOnly) {
+    return;
+  }
+  const target = getTarget(event.nativeEvent);
+  const targetElement = isElement(target) ? target : null;
+  if (targetElement !== event.currentTarget && (isInteractiveElement(targetElement))) {
+    return;
+  }
+  event.preventDefault();
+  if (disabled) {
+    return;
+  }
+  store.state.inputRef.current?.focus();
+  if (store.state.openOnInputClick) {
+    store.state.setOpen(true, createChangeEventDetails(inputPress, event.nativeEvent));
+  }
+}
+
 const stateAttributesMapping$1 = {
   ...transitionStatusMapping,
   ...triggerOpenStateMapping
@@ -8587,6 +8158,8 @@ const stateAttributesMapping$1 = {
 /**
  * Clears the value when clicked.
  * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxClear$1 = /*#__PURE__*/React.forwardRef(function ComboboxClear(componentProps, forwardedRef) {
   const {
@@ -8595,6 +8168,7 @@ const ComboboxClear$1 = /*#__PURE__*/React.forwardRef(function ComboboxClear(com
     disabled: disabledProp = false,
     nativeButton = true,
     keepMounted = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -8724,6 +8298,7 @@ const ComboboxList$2 = /*#__PURE__*/React.forwardRef(function ComboboxList(compo
   const {
     render,
     className,
+    style,
     children,
     ...elementProps
   } = componentProps;
@@ -8731,16 +8306,12 @@ const ComboboxList$2 = /*#__PURE__*/React.forwardRef(function ComboboxList(compo
   const floatingRootContext = useComboboxFloatingContext();
   const hasPositionerContext = Boolean(useComboboxPositionerContext(true));
   const {
-    filteredItems
+    filteredItems,
+    hasItems
   } = useComboboxDerivedItemsContext();
-  const items = useStore(store, selectors.items);
-  const labelsRef = useStore(store, selectors.labelsRef);
-  const listRef = useStore(store, selectors.listRef);
   const selectionMode = useStore(store, selectors.selectionMode);
   const grid = useStore(store, selectors.grid);
   const popupProps = useStore(store, selectors.popupProps);
-  const disabled = useStore(store, selectors.disabled);
-  const readOnly = useStore(store, selectors.readOnly);
   const virtualized = useStore(store, selectors.virtualized);
   const multiple = selectionMode === 'multiple';
   const empty = filteredItems.length === 0;
@@ -8777,7 +8348,7 @@ const ComboboxList$2 = /*#__PURE__*/React.forwardRef(function ComboboxList(compo
       role: grid ? 'grid' : 'listbox',
       'aria-multiselectable': multiple ? 'true' : undefined,
       onKeyDown(event) {
-        if (disabled || readOnly) {
+        if (store.state.disabled || store.state.readOnly) {
           return;
         }
         if (event.key === 'Enter') {
@@ -8808,12 +8379,62 @@ const ComboboxList$2 = /*#__PURE__*/React.forwardRef(function ComboboxList(compo
     return element;
   }
   return /*#__PURE__*/jsx(CompositeList, {
-    elementsRef: listRef,
-    labelsRef: items ? undefined : labelsRef,
+    elementsRef: store.state.listRef,
+    labelsRef: hasItems ? undefined : store.state.labelsRef,
     children: element
   });
 });
 
+// Word Joiner is invisible and zero-width, so it forces a text mutation without shifting layout.
+const LIVE_REGION_MARKER = '\u2060';
+// Safari VoiceOver needed roughly 200ms to reliably notice the initial polite live-region change.
+const INITIAL_LIVE_REGION_TEXT_MUTATION_RESET_DELAY = 200;
+function findLastTextNode(root) {
+  const walker = root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let lastTextNode = null;
+  while (walker.nextNode()) {
+    const textNode = walker.currentNode;
+    if (textNode.nodeValue !== '') {
+      lastTextNode = textNode;
+    }
+  }
+  return lastTextNode;
+}
+function useInitialLiveRegionTextMutation() {
+  const timeout = useTimeout();
+  const rootRef = React.useRef(null);
+
+  // Only the initial mounted announcement needs the marker; later text updates announce naturally.
+  React.useEffect(() => {
+    if (isIOS) {
+      return undefined;
+    }
+    const root = rootRef.current;
+    if (root == null) {
+      return undefined;
+    }
+    const textNode = findLastTextNode(root);
+    if (textNode == null) {
+      return undefined;
+    }
+    const originalValue = textNode.nodeValue ?? '';
+    const markedValue = `${originalValue}${LIVE_REGION_MARKER}`;
+    textNode.nodeValue = markedValue;
+    timeout.start(INITIAL_LIVE_REGION_TEXT_MUTATION_RESET_DELAY, () => {
+      if (textNode.nodeValue === markedValue) {
+        textNode.nodeValue = originalValue;
+      }
+    });
+    return () => {
+      timeout.clear();
+      if (textNode.nodeValue === markedValue) {
+        textNode.nodeValue = originalValue;
+      }
+    };
+  }, [rootRef, timeout]);
+  return rootRef;
+}
+
 const ComboboxPortalContext = /*#__PURE__*/React.createContext(undefined);
 function useComboboxPortalContext() {
   const context = React.useContext(ComboboxPortalContext);
@@ -9032,6 +8653,7 @@ function useAnchorPositioning(params) {
   const anchorFnCallback = useStableCallback(anchorFn);
   const anchorDep = anchorFn ? anchorFnCallback : anchor;
   const anchorValueRef = useValueAsRef(anchor);
+  const mountedRef = useValueAsRef(mounted);
   const direction = useDirection();
   const isRtl = direction === 'rtl';
   const side = mountSide || {
@@ -9157,12 +8779,15 @@ function useAnchorPositioning(params) {
       availableHeight,
       rects
     }) {
+      if (!mountedRef.current) {
+        return;
+      }
       const floatingStyle = floating.style;
       floatingStyle.setProperty('--available-width', `${availableWidth}px`);
       floatingStyle.setProperty('--available-height', `${availableHeight}px`);
 
       // Snap anchor dimensions to device pixels to ensure the popup's visual width matches the anchor's one.
-      const dpr = window.devicePixelRatio || 1;
+      const dpr = getWindow(floating).devicePixelRatio || 1;
       const {
         x,
         y,
@@ -9177,7 +8802,7 @@ function useAnchorPositioning(params) {
   }), arrow(() => ({
     // `transform-origin` calculations rely on an element existing. If the arrow hasn't been set,
     // we'll create a fake element.
-    element: arrowRef.current || document.createElement('div'),
+    element: arrowRef.current || ownerDocument(arrowRef.current).createElement('div'),
     padding: arrowPadding,
     offsetParent: 'floating'
   }), [arrowPadding]), {
@@ -9221,7 +8846,8 @@ function useAnchorPositioning(params) {
       floatingRootContext.update({
         referenceElement: null,
         floatingElement: null,
-        domReferenceElement: null
+        domReferenceElement: null,
+        positionReference: null
       });
     }
   }, [mounted, floatingRootContext]);
@@ -9242,6 +8868,7 @@ function useAnchorPositioning(params) {
     floatingStyles: originalFloatingStyles
   } = useFloating({
     rootContext: floatingRootContext,
+    open: keepMounted ? mounted : undefined,
     placement,
     middleware,
     strategy: positionMethod,
@@ -9351,6 +8978,61 @@ function getDisabledMountTransitionStyles(transitionStatus) {
   return transitionStatus === 'starting' ? DISABLED_TRANSITIONS_STYLE : EMPTY_OBJECT;
 }
 
+/**
+ * Renders the shared outer Positioner element used by popup components.
+ * Applies the common role, hidden state, transition styles, state attributes, and optional inert styling.
+ */
+function usePositioner(componentProps, state, {
+  styles,
+  transitionStatus,
+  props,
+  refs,
+  hidden,
+  inert = false
+}) {
+  const style = {
+    ...styles
+  };
+  if (inert) {
+    style.pointerEvents = 'none';
+  }
+  return useRenderElement('div', componentProps, {
+    state,
+    ref: refs,
+    props: [{
+      role: 'presentation',
+      hidden,
+      style
+    }, getDisabledMountTransitionStyles(transitionStatus), props],
+    stateAttributesMapping: popupStateMapping
+  });
+}
+
+// Touch-opened popups normally avoid scroll locking so users can still swipe outside to dismiss.
+// This hook re-enables scroll lock only when the popup is effectively full-width.
+// Treat popups with up to 20px of total horizontal gutter as full-width so common ~10px side
+// padding still locks scroll, since that leaves too little outside space for a reliable swipe.
+const VIEWPORT_WIDTH_TOLERANCE_PX = 20;
+
+/**
+ * Manages scroll lock for anchored popups. For non-touch opens, scroll lock is applied when
+ * enabled. For touch opens, scroll lock is applied only when the positioner width is effectively
+ * viewport-sized.
+ */
+function useAnchoredPopupScrollLock(enabled, touchOpen, positionerElement, referenceElement) {
+  const [touchOpenShouldLockScroll, setTouchOpenShouldLockScroll] = React.useState(false);
+  useIsoLayoutEffect(() => {
+    if (!enabled || !touchOpen || positionerElement == null) {
+      setTouchOpenShouldLockScroll(false);
+      return;
+    }
+    const viewportWidth = ownerDocument(positionerElement).documentElement.clientWidth;
+    const popupWidth = positionerElement.offsetWidth;
+    setTouchOpenShouldLockScroll(viewportWidth > 0 && popupWidth > 0 && popupWidth >= viewportWidth - VIEWPORT_WIDTH_TOLERANCE_PX);
+  }, [enabled, touchOpen, positionerElement]);
+  useScrollLock(enabled && (!touchOpen || touchOpenShouldLockScroll), referenceElement);
+}
+
 const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function ComboboxPositioner(componentProps, forwardedRef) {
   const {
     render,
@@ -9367,6 +9049,7 @@ const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function ComboboxPositi
     sticky = false,
     disableAnchorTracking = false,
     collisionAvoidance = DROPDOWN_COLLISION_AVOIDANCE,
+    style: styleProp,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
@@ -9379,6 +9062,7 @@ const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function ComboboxPositi
   const open = useStore(store, selectors.open);
   const mounted = useStore(store, selectors.mounted);
   const openMethod = useStore(store, selectors.openMethod);
+  const positionerElement = useStore(store, selectors.positionerElement);
   const triggerElement = useStore(store, selectors.triggerElement);
   const inputElement = useStore(store, selectors.inputElement);
   const inputGroupElement = useStore(store, selectors.inputGroupElement);
@@ -9404,20 +9088,7 @@ const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function ComboboxPositi
     collisionAvoidance,
     lazyFlip: true
   });
-  useScrollLock(open && modal && openMethod !== 'touch', triggerElement);
-  const defaultProps = React.useMemo(() => {
-    const style = {
-      ...positioning.positionerStyles
-    };
-    if (!open) {
-      style.pointerEvents = 'none';
-    }
-    return {
-      role: 'presentation',
-      hidden: !mounted,
-      style
-    };
-  }, [open, mounted, positioning.positionerStyles]);
+  useAnchoredPopupScrollLock(open && modal, openMethod === 'touch', positionerElement, triggerElement);
   const state = {
     open,
     side: positioning.side,
@@ -9428,26 +9099,19 @@ const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function ComboboxPositi
   useIsoLayoutEffect(() => {
     store.set('popupSide', positioning.side);
   }, [store, positioning.side]);
-  const contextValue = React.useMemo(() => ({
-    side: positioning.side,
-    align: positioning.align,
-    arrowRef: positioning.arrowRef,
-    arrowUncentered: positioning.arrowUncentered,
-    arrowStyles: positioning.arrowStyles,
-    anchorHidden: positioning.anchorHidden,
-    isPositioned: positioning.isPositioned
-  }), [positioning.side, positioning.align, positioning.arrowRef, positioning.arrowUncentered, positioning.arrowStyles, positioning.anchorHidden, positioning.isPositioned]);
   const setPositionerElement = useStableCallback(element => {
     store.set('positionerElement', element);
   });
-  const element = useRenderElement('div', componentProps, {
-    state,
-    ref: [forwardedRef, setPositionerElement],
-    props: [defaultProps, getDisabledMountTransitionStyles(transitionStatus), elementProps],
-    stateAttributesMapping: popupStateMapping
+  const element = usePositioner(componentProps, state, {
+    styles: positioning.positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, setPositionerElement],
+    hidden: !mounted,
+    inert: !open
   });
   return /*#__PURE__*/jsxs(ComboboxPositionerContext.Provider, {
-    value: contextValue,
+    value: positioning,
     children: [mounted && modal && /*#__PURE__*/jsx(InternalBackdrop, {
       inert: inertValue(!open),
       cutout: inputGroupElement ?? inputElement ?? triggerElement
@@ -9463,11 +9127,14 @@ const stateAttributesMapping = {
 /**
  * A container for the list.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxPopup = /*#__PURE__*/React.forwardRef(function ComboboxPopup(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     initialFocus,
     finalFocus,
     ...elementProps
@@ -9560,6 +9227,7 @@ const ComboboxGroup$2 = /*#__PURE__*/React.forwardRef(function ComboboxGroup(com
   const {
     render,
     className,
+    style,
     items,
     ...elementProps
   } = componentProps;
@@ -9592,11 +9260,14 @@ const ComboboxGroup$2 = /*#__PURE__*/React.forwardRef(function ComboboxGroup(com
 /**
  * An accessible label that is automatically associated with its parent group.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxGroupLabel = /*#__PURE__*/React.forwardRef(function ComboboxGroupLabel(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;
@@ -9641,6 +9312,7 @@ const ComboboxItem$2 = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(fun
     index: indexProp,
     disabled = false,
     nativeButton = false,
+    style,
     ...elementProps
   } = componentProps;
   const didPointerDownRef = React.useRef(false);
@@ -9756,6 +9428,11 @@ const ComboboxItem$2 = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(fun
       didPointerDownRef.current = true;
       event.preventDefault();
     },
+    onMouseDown(event) {
+      // iOS Safari can emit a synthetic mousedown for touch taps without a preceding
+      // pointerdown. Prevent default here too so tapping an item does not blur the input.
+      event.preventDefault();
+    },
     onClick(event) {
       if (disabled || readOnly) {
         return;
@@ -9790,12 +9467,19 @@ const ComboboxItem$2 = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(fun
  * Renders its children only when the list is empty.
  * Requires the `items` prop on the root component.
  * Announces changes politely to screen readers.
+ * This component's root element must remain mounted in the DOM to announce
+ * changes consistently across screen readers. Avoid hiding or removing the
+ * component itself with `display: none`, `hidden`, `aria-hidden`, or conditional
+ * rendering. Prefer updating or conditionally rendering its children instead.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxEmpty$2 = /*#__PURE__*/React.forwardRef(function ComboboxEmpty(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     children: childrenProp,
     ...elementProps
   } = componentProps;
@@ -9803,9 +9487,10 @@ const ComboboxEmpty$2 = /*#__PURE__*/React.forwardRef(function ComboboxEmpty(com
     filteredItems
   } = useComboboxDerivedItemsContext();
   const store = useComboboxRootContext();
+  const emptyRef = useInitialLiveRegionTextMutation();
   const children = filteredItems.length === 0 ? childrenProp : null;
   return useRenderElement('div', componentProps, {
-    ref: [forwardedRef, store.state.emptyRef],
+    ref: [forwardedRef, store.state.emptyRef, emptyRef],
     props: [{
       children,
       role: 'status',
@@ -9826,6 +9511,7 @@ const Separator = /*#__PURE__*/React.forwardRef(function SeparatorComponent(comp
     className,
     render,
     orientation = 'horizontal',
+    style,
     ...elementProps
   } = componentProps;
   const state = {
@@ -9911,6 +9597,7 @@ const Inner = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef((componentPr
   const {
     render,
     className,
+    style,
     keepMounted,
     ...elementProps
   } = componentProps;
@@ -9951,6 +9638,7 @@ const ComboboxChips$2 = /*#__PURE__*/React.forwardRef(function ComboboxChips(com
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
@@ -9967,7 +9655,11 @@ const ComboboxChips$2 = /*#__PURE__*/React.forwardRef(function ComboboxChips(com
     // arrow keys inside a container unless it has a toolbar role.
     props: [hasSelectionChips ? {
       role: 'toolbar'
-    } : EMPTY_OBJECT, elementProps]
+    } : EMPTY_OBJECT, {
+      onMouseDown(event) {
+        handleInputPress(event, store, store.state.disabled, store.state.readOnly);
+      }
+    }, elementProps]
   });
   const contextValue = React.useMemo(() => ({
     highlightedChipIndex,
@@ -9996,6 +9688,7 @@ const ComboboxChip$2 = /*#__PURE__*/React.forwardRef(function ComboboxChip(compo
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
@@ -10021,7 +9714,7 @@ const ComboboxChip$2 = /*#__PURE__*/React.forwardRef(function ComboboxChip(compo
       }
     } else if (event.key === 'ArrowRight') {
       event.preventDefault();
-      if (index < selectedValue.length - 1) {
+      if (index < chipsRef.current.length - 1) {
         nextIndex = index + 1;
       } else {
         nextIndex = undefined;
@@ -10073,16 +9766,6 @@ const ComboboxChip$2 = /*#__PURE__*/React.forwardRef(function ComboboxChip(compo
         } else {
           chipsRef.current[nextIndex]?.focus();
         }
-      },
-      onMouseDown(event) {
-        if (readOnly) {
-          return;
-        }
-        event.preventDefault();
-        if (disabled) {
-          return;
-        }
-        store.state.inputRef.current?.focus();
       }
     }, elementProps]
   });
@@ -10098,6 +9781,8 @@ const ComboboxChip$2 = /*#__PURE__*/React.forwardRef(function ComboboxChip(compo
 /**
  * A button to remove a chip.
  * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxChipRemove = /*#__PURE__*/React.forwardRef(function ComboboxChipRemove(componentProps, forwardedRef) {
   const {
@@ -10105,6 +9790,7 @@ const ComboboxChipRemove = /*#__PURE__*/React.forwardRef(function ComboboxChipRe
     className,
     disabled: disabledProp = false,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
@@ -10156,6 +9842,9 @@ const ComboboxChipRemove = /*#__PURE__*/React.forwardRef(function ComboboxChipRe
     state,
     props: [{
       tabIndex: -1,
+      onMouseDown(event) {
+        event.preventDefault();
+      },
       onClick(event) {
         if (disabled || readOnly) {
           return;
@@ -10224,9 +9913,7 @@ function ComboboxChips$1({ className, ...props }) {
 function ComboboxChip$1({ className, children, showRemove = true, ...props }) {
     return (jsxs(ComboboxChip$2, { "data-slot": "combobox-chip", className: cn("flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pe-0", className), ...props, children: [children, showRemove && (jsx(ComboboxChipRemove, { render: jsx(Button, { variant: "ghost", size: "icon-xs" }), className: "-ms-1 opacity-50 hover:opacity-100", "data-slot": "combobox-chip-remove", children: jsx(X, { className: "pointer-events-none" }) }))] }));
 }
-function ComboboxChipsInput$1({ className, ...props }) {
-    return (jsx(ComboboxInput$2, { "data-slot": "combobox-chip-input", className: cn("min-w-16 flex-1 outline-none", className), ...props }));
-}
+const ComboboxChipsInput$1 = React.forwardRef(({ className, ...props }, ref) => (jsx(ComboboxInput$2, { ref: ref, "data-slot": "combobox-chip-input", className: cn("min-w-16 flex-1 outline-none", className), ...props })));
 function useComboboxAnchor() {
     return React.useRef(null);
 }
@@ -10243,7 +9930,7 @@ const ComboboxEmpty = (props) => jsx(ComboboxEmpty$1, { ...props });
 const ComboboxSeparator = (props) => jsx(ComboboxSeparator$1, { ...props });
 const ComboboxChips = (props) => jsx(ComboboxChips$1, { ...props });
 const ComboboxChip = (props) => jsx(ComboboxChip$1, { ...props });
-const ComboboxChipsInput = (props) => jsx(ComboboxChipsInput$1, { ...props });
+const ComboboxChipsInput = React__default.forwardRef((props, ref) => jsx(ComboboxChipsInput$1, { ref: ref, ...props }));
 const ComboboxTrigger = (props) => jsx(ComboboxTrigger$1, { ...props });
 const ComboboxValue = (props) => jsx(ComboboxValue$1, { ...props });