@jobber/components 8.23.0 → 8.23.1

package/dist/SelectGroupLabel-cjs.js

@@ -3,15 +3,14 @@
 var React = require('react');
 var useButton = require('./useButton-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
-var InternalBackdrop = require('./InternalBackdrop-cjs.js');
+var useScrollLock = require('./useScrollLock-cjs.js');
+var isElementDisabled = require('./isElementDisabled-cjs.js');
 var useLabelableId = require('./useLabelableId-cjs.js');
 var resolveAriaLabelledBy = require('./resolveAriaLabelledBy-cjs.js');
+var scrollEdges = require('./scrollEdges-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 var useCompositeListItem = require('./useCompositeListItem-cjs.js');
-var ReactDOM = require('react-dom');
-var index_esm = require('./index.esm-cjs.js');
-var CSPContext = require('./CSPContext-cjs.js');
-var ToolbarRootContext = require('./ToolbarRootContext-cjs.js');
+var floatingUi_utils = require('./floating-ui.utils-cjs.js');
 var clamp = require('./clamp-cjs.js');
 var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
 var floatingUi_reactDom = require('./floating-ui.react-dom-cjs.js');
@@ -34,7 +33,25 @@ function _interopNamespaceDefault(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
+
+/**
+ * Returns a previous value of its argument.
+ * @param value Current value.
+ * @returns Previous value, or null if there is no previous value.
+ */
+function usePreviousValue(value) {
+  const [state, setState] = React__namespace.useState({
+    current: value,
+    previous: null
+  });
+  if (value !== state.current) {
+    setState({
+      current: value,
+      previous: state.current
+    });
+  }
+  return state.previous;
+}
 
 const SelectRootContext = /*#__PURE__*/React__namespace.createContext(null);
 if (process.env.NODE_ENV !== "production") SelectRootContext.displayName = "SelectRootContext";
@@ -56,16 +73,16 @@ function useSelectFloatingContext() {
 }
 
 const selectors = {
-  id: InternalBackdrop.createSelector(state => state.id),
-  labelId: InternalBackdrop.createSelector(state => state.labelId),
-  modal: InternalBackdrop.createSelector(state => state.modal),
-  multiple: InternalBackdrop.createSelector(state => state.multiple),
-  items: InternalBackdrop.createSelector(state => state.items),
-  itemToStringLabel: InternalBackdrop.createSelector(state => state.itemToStringLabel),
-  itemToStringValue: InternalBackdrop.createSelector(state => state.itemToStringValue),
-  isItemEqualToValue: InternalBackdrop.createSelector(state => state.isItemEqualToValue),
-  value: InternalBackdrop.createSelector(state => state.value),
-  hasSelectedValue: InternalBackdrop.createSelector(state => {
+  id: useScrollLock.createSelector(state => state.id),
+  labelId: useScrollLock.createSelector(state => state.labelId),
+  modal: useScrollLock.createSelector(state => state.modal),
+  multiple: useScrollLock.createSelector(state => state.multiple),
+  items: useScrollLock.createSelector(state => state.items),
+  itemToStringLabel: useScrollLock.createSelector(state => state.itemToStringLabel),
+  itemToStringValue: useScrollLock.createSelector(state => state.itemToStringValue),
+  isItemEqualToValue: useScrollLock.createSelector(state => state.isItemEqualToValue),
+  value: useScrollLock.createSelector(state => state.value),
+  hasSelectedValue: useScrollLock.createSelector(state => {
     const {
       value,
       multiple,
@@ -79,42 +96,41 @@ const selectors = {
     }
     return resolveAriaLabelledBy.stringifyAsValue(value, itemToStringValue) !== '';
   }),
-  hasNullItemLabel: InternalBackdrop.createSelector((state, enabled) => {
+  hasNullItemLabel: useScrollLock.createSelector((state, enabled) => {
     return enabled ? resolveAriaLabelledBy.hasNullItemLabel(state.items) : false;
   }),
-  open: InternalBackdrop.createSelector(state => state.open),
-  mounted: InternalBackdrop.createSelector(state => state.mounted),
-  forceMount: InternalBackdrop.createSelector(state => state.forceMount),
-  transitionStatus: InternalBackdrop.createSelector(state => state.transitionStatus),
-  openMethod: InternalBackdrop.createSelector(state => state.openMethod),
-  activeIndex: InternalBackdrop.createSelector(state => state.activeIndex),
-  selectedIndex: InternalBackdrop.createSelector(state => state.selectedIndex),
-  isActive: InternalBackdrop.createSelector((state, index) => state.activeIndex === index),
-  isSelected: InternalBackdrop.createSelector((state, index, itemValue) => {
+  open: useScrollLock.createSelector(state => state.open),
+  mounted: useScrollLock.createSelector(state => state.mounted),
+  forceMount: useScrollLock.createSelector(state => state.forceMount),
+  transitionStatus: useScrollLock.createSelector(state => state.transitionStatus),
+  openMethod: useScrollLock.createSelector(state => state.openMethod),
+  activeIndex: useScrollLock.createSelector(state => state.activeIndex),
+  selectedIndex: useScrollLock.createSelector(state => state.selectedIndex),
+  isActive: useScrollLock.createSelector((state, index) => state.activeIndex === index),
+  isSelected: useScrollLock.createSelector((state, itemValue) => {
     const comparer = state.isItemEqualToValue;
     const storeValue = state.value;
     if (state.multiple) {
       return Array.isArray(storeValue) && storeValue.some(selectedItem => resolveAriaLabelledBy.compareItemEquality(itemValue, selectedItem, comparer));
     }
 
-    // `selectedIndex` is only updated after the items mount for the first time,
-    // the value check avoids a re-render for the initially selected item.
-    if (state.selectedIndex === index && state.selectedIndex !== null) {
-      return true;
-    }
+    // The value is the source of truth: a stale `selectedIndex` (e.g. the controlled
+    // value changes while the popup is open, where the index sync is deferred) must not
+    // keep a previously selected item marked as selected.
     return resolveAriaLabelledBy.compareItemEquality(itemValue, storeValue, comparer);
   }),
-  isSelectedByFocus: InternalBackdrop.createSelector((state, index) => {
+  isSelectedByFocus: useScrollLock.createSelector((state, index) => {
     return state.selectedIndex === index;
   }),
-  popupProps: InternalBackdrop.createSelector(state => state.popupProps),
-  triggerProps: InternalBackdrop.createSelector(state => state.triggerProps),
-  triggerElement: InternalBackdrop.createSelector(state => state.triggerElement),
-  positionerElement: InternalBackdrop.createSelector(state => state.positionerElement),
-  listElement: InternalBackdrop.createSelector(state => state.listElement),
-  scrollUpArrowVisible: InternalBackdrop.createSelector(state => state.scrollUpArrowVisible),
-  scrollDownArrowVisible: InternalBackdrop.createSelector(state => state.scrollDownArrowVisible),
-  hasScrollArrows: InternalBackdrop.createSelector(state => state.hasScrollArrows)
+  popupProps: useScrollLock.createSelector(state => state.popupProps),
+  triggerProps: useScrollLock.createSelector(state => state.triggerProps),
+  triggerElement: useScrollLock.createSelector(state => state.triggerElement),
+  positionerElement: useScrollLock.createSelector(state => state.positionerElement),
+  listElement: useScrollLock.createSelector(state => state.listElement),
+  popupSide: useScrollLock.createSelector(state => state.popupSide),
+  scrollUpArrowVisible: useScrollLock.createSelector(state => state.scrollUpArrowVisible),
+  scrollDownArrowVisible: useScrollLock.createSelector(state => state.scrollDownArrowVisible),
+  hasScrollArrows: useScrollLock.createSelector(state => state.hasScrollArrows)
 };
 
 function SelectRoot(props) {
@@ -127,6 +143,7 @@ function SelectRoot(props) {
     defaultOpen = false,
     onOpenChange,
     name: nameProp,
+    form,
     autoComplete,
     disabled: disabledProp = false,
     readOnly = false,
@@ -150,7 +167,6 @@ function SelectRoot(props) {
     setDirty,
     setTouched,
     setFocused,
-    shouldValidateOnChange,
     validityData,
     setFilled,
     name: fieldName,
@@ -183,11 +199,12 @@ function SelectRoot(props) {
   const valueRef = React__namespace.useRef(null);
   const valuesRef = React__namespace.useRef([]);
   const typingRef = React__namespace.useRef(false);
-  const keyboardActiveRef = React__namespace.useRef(false);
+  const firstItemTextRef = React__namespace.useRef(null);
   const selectedItemTextRef = React__namespace.useRef(null);
   const selectionRef = React__namespace.useRef({
     allowSelectedMouseUp: false,
-    allowUnselectedMouseUp: false
+    allowUnselectedMouseUp: false,
+    dragY: 0
   });
   const alignItemWithTriggerActiveRef = React__namespace.useRef(false);
   const {
@@ -198,8 +215,8 @@ function SelectRoot(props) {
   const {
     openMethod,
     triggerProps: interactionTypeProps
-  } = InternalBackdrop.useOpenInteractionType(open);
-  const store = useRenderElement.useRefWithInit(() => new InternalBackdrop.Store({
+  } = useScrollLock.useOpenInteractionType(open);
+  const store = useRenderElement.useRefWithInit(() => new useScrollLock.Store({
     id: generatedId,
     labelId: undefined,
     modal,
@@ -221,16 +238,22 @@ function SelectRoot(props) {
     triggerElement: null,
     positionerElement: null,
     listElement: null,
+    popupSide: null,
     scrollUpArrowVisible: false,
     scrollDownArrowVisible: false,
     hasScrollArrows: false
   })).current;
-  const activeIndex = InternalBackdrop.useStore(store, selectors.activeIndex);
-  const selectedIndex = InternalBackdrop.useStore(store, selectors.selectedIndex);
-  const triggerElement = InternalBackdrop.useStore(store, selectors.triggerElement);
-  const positionerElement = InternalBackdrop.useStore(store, selectors.positionerElement);
+  const activeIndex = useScrollLock.useStore(store, selectors.activeIndex);
+  const selectedIndex = useScrollLock.useStore(store, selectors.selectedIndex);
+  const triggerElement = useScrollLock.useStore(store, selectors.triggerElement);
+  const positionerElement = useScrollLock.useStore(store, selectors.positionerElement);
+  const previousOpenMethod = usePreviousValue(openMethod);
+  const renderedOpenMethod = openMethod ?? previousOpenMethod ?? null;
   const serializedValue = React__namespace.useMemo(() => {
-    if (multiple && Array.isArray(value) && value.length === 0) {
+    // In multiple mode the shared input is nameless; per-value entries are submitted via
+    // `hiddenInputs`. Its value is therefore irrelevant, and passing the whole array to
+    // `stringifyAsValue` would invoke a user `itemToStringValue` with an array it doesn't expect.
+    if (multiple) {
       return '';
     }
     return resolveAriaLabelledBy.stringifyAsValue(value, itemToStringValue);
@@ -242,15 +265,12 @@ function SelectRoot(props) {
     return resolveAriaLabelledBy.stringifyAsValue(value, itemToStringValue);
   }, [multiple, value, itemToStringValue]);
   const controlRef = useButton.useValueAsRef(store.state.triggerElement);
-  useLabelableId.useField({
-    id: generatedId,
-    commit: validation.commit,
-    value,
-    controlRef,
-    name,
-    getValue: () => fieldStringValue
-  });
+  const getStringifiedValueForForm = useButton.useStableCallback(() => fieldStringValue);
+  useLabelableId.useRegisterFieldControl(controlRef, generatedId, value, getStringifiedValueForForm, !disabled, nameProp);
   const initialValueRef = React__namespace.useRef(value);
+  // Mirror the `hasSelectedValue` store selector so the Field's filled state agrees with the
+  // trigger/value placeholder semantics (a value serializing to `''` counts as empty).
+  const hasSelectedValue = multiple ? Array.isArray(value) && value.length > 0 : value != null && resolveAriaLabelledBy.stringifyAsValue(value, itemToStringValue) !== '';
   useButton.useIsoLayoutEffect(() => {
     // Ensure the values and labels are registered for programmatic value changes.
     if (value !== initialValueRef.current) {
@@ -258,35 +278,43 @@ function SelectRoot(props) {
     }
   }, [store, value]);
   useButton.useIsoLayoutEffect(() => {
-    setFilled(multiple ? Array.isArray(value) && value.length > 0 : value != null);
-  }, [multiple, value, setFilled]);
+    setFilled(hasSelectedValue);
+  }, [hasSelectedValue, setFilled]);
   useButton.useIsoLayoutEffect(function syncSelectedIndex() {
-    if (open) {
-      return;
-    }
     const registry = valuesRef.current;
+    let nextIndex;
     if (multiple) {
       const currentValue = Array.isArray(value) ? value : [];
       if (currentValue.length === 0) {
-        store.set('selectedIndex', null);
-        return;
+        nextIndex = null;
+      } else {
+        const lastValue = currentValue[currentValue.length - 1];
+        const lastIndex = resolveAriaLabelledBy.findItemIndex(registry, lastValue, isItemEqualToValue);
+        nextIndex = lastIndex === -1 ? null : lastIndex;
       }
-      const lastValue = currentValue[currentValue.length - 1];
-      const lastIndex = resolveAriaLabelledBy.findItemIndex(registry, lastValue, isItemEqualToValue);
-      store.set('selectedIndex', lastIndex === -1 ? null : lastIndex);
+    } else {
+      const index = resolveAriaLabelledBy.findItemIndex(registry, value, isItemEqualToValue);
+      nextIndex = index === -1 ? null : index;
+    }
+    if (nextIndex === null) {
+      selectedItemTextRef.current = null;
+    }
+    if (open) {
       return;
     }
-    const index = resolveAriaLabelledBy.findItemIndex(registry, value, isItemEqualToValue);
-    store.set('selectedIndex', index === -1 ? null : index);
-  }, [multiple, open, value, valuesRef, isItemEqualToValue, store]);
+    store.set('selectedIndex', nextIndex);
+  }, [hasSelectedValue, multiple, open, value, valuesRef, isItemEqualToValue, store, selectedItemTextRef]);
+  function isSelectedValueDirty(currentValue) {
+    const initialValue = validityData.initialValue;
+    if (Array.isArray(currentValue) && Array.isArray(initialValue)) {
+      return !resolveAriaLabelledBy.areArraysEqual(currentValue, initialValue, (itemValue, initialItemValue) => resolveAriaLabelledBy.compareItemEquality(itemValue, initialItemValue, isItemEqualToValue));
+    }
+    return currentValue !== initialValue;
+  }
   useButton.useValueChanged(value, () => {
     clearErrors(name);
-    setDirty(value !== validityData.initialValue);
-    if (shouldValidateOnChange()) {
-      validation.commit(value);
-    } else {
-      validation.commit(value, true);
-    }
+    setDirty(isSelectedValueDirty(value));
+    validation.change(value);
   });
   const setOpen = useButton.useStableCallback((nextOpen, eventDetails) => {
     onOpenChange?.(nextOpen, eventDetails);
@@ -301,24 +329,13 @@ function SelectRoot(props) {
         validation.commit(value);
       }
     }
-
-    // The active index will sync to the last selected index on the next open.
-    // Workaround `enableFocusInside` in Floating UI setting `tabindex=0` of a non-highlighted
-    // option upon close when tabbing out due to `keepMounted=true`:
-    // https://github.com/floating-ui/floating-ui/pull/3004/files#diff-962a7439cdeb09ea98d4b622a45d517bce07ad8c3f866e089bda05f4b0bbd875R194-R199
-    // This otherwise causes options to retain `tabindex=0` incorrectly when the popup is closed
-    // when tabbing outside.
-    if (!nextOpen && store.state.activeIndex !== null) {
-      const activeOption = listRef.current[store.state.activeIndex];
-      // Wait for Floating UI's focus effect to have fired
-      queueMicrotask(() => {
-        activeOption?.setAttribute('tabindex', '-1');
-      });
-    }
   });
   const handleUnmount = useButton.useStableCallback(() => {
     setMounted(false);
-    store.set('activeIndex', null);
+    store.update({
+      activeIndex: null,
+      openMethod: null
+    });
     onOpenChangeComplete?.(false);
   });
   useButton.useOpenChangeComplete({
@@ -346,10 +363,10 @@ function SelectRoot(props) {
     if (!scroller) {
       return;
     }
-    const viewportTop = scroller.scrollTop;
-    const viewportBottom = scroller.scrollTop + scroller.clientHeight;
-    const shouldShowUp = viewportTop > 1;
-    const shouldShowDown = viewportBottom < scroller.scrollHeight - 1;
+    const maxScrollTop = scrollEdges.getMaxScrollOffset(scroller.scrollHeight, scroller.clientHeight);
+    const scrollTop = scrollEdges.normalizeScrollOffset(scroller.scrollTop, maxScrollTop);
+    const shouldShowUp = scrollTop > 0;
+    const shouldShowDown = scrollTop < maxScrollTop;
     if (store.state.scrollUpArrowVisible !== shouldShowUp) {
       store.set('scrollUpArrowVisible', shouldShowUp);
     }
@@ -365,13 +382,11 @@ function SelectRoot(props) {
       floating: positionerElement
     }
   });
-  const click = InternalBackdrop.useClick(floatingContext, {
+  const click = useScrollLock.useClick(floatingContext, {
     enabled: !readOnly && !disabled,
     event: 'mousedown'
   });
-  const dismiss = InternalBackdrop.useDismiss(floatingContext, {
-    bubbles: false
-  });
+  const dismiss = useScrollLock.useDismiss(floatingContext);
   const listNavigation = useCompositeListItem.useListNavigation(floatingContext, {
     enabled: !readOnly && !disabled,
     listRef,
@@ -385,15 +400,19 @@ function SelectRoot(props) {
       }
       store.set('activeIndex', nextActiveIndex);
     },
-    // Implement our own listeners since `onPointerLeave` on each option fires while scrolling with
-    // the `alignItemWithTrigger=true`, causing a performance issue on Chrome.
-    focusItemOnHover: false
+    focusItemOnHover: highlightItemOnHover
   });
   const typeahead = useCompositeListItem.useTypeahead(floatingContext, {
     enabled: !readOnly && !disabled && (open || !multiple),
     listRef: labelsRef,
     activeIndex,
     selectedIndex,
+    // Skip disabled items while matching so typeahead advances to the next selectable item
+    // (a click can never select a disabled item and native `<select>` skips them too). Resolve
+    // the disabled state from the element via the attribute-only `isElementDisabled` so the
+    // hidden, force-mounted items used for closed-trigger typeahead aren't dropped by the
+    // `elementsRef`/visibility filter that `disabledIndices` deliberately sidesteps.
+    disabledIndices: index => isElementDisabled.isElementDisabled(listRef.current[index]),
     onMatch(index) {
       if (open) {
         store.set('activeIndex', index);
@@ -401,23 +420,22 @@ function SelectRoot(props) {
         setValue(valuesRef.current[index], useButton.createChangeEventDetails('none'));
       }
     },
-    onTypingChange(typing) {
+    onTyping(typing) {
       typingRef.current = typing;
     }
   });
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getItemProps
-  } = InternalBackdrop.useInteractions([click, dismiss, listNavigation, typeahead]);
   const mergedTriggerProps = React__namespace.useMemo(() => {
-    return useRenderElement.mergeProps(getReferenceProps(), interactionTypeProps, generatedId ? {
-      id: generatedId
-    } : useRenderElement.EMPTY_OBJECT);
-  }, [getReferenceProps, interactionTypeProps, generatedId]);
-  InternalBackdrop.useOnFirstRender(() => {
+    const triggerInteractionProps = useRenderElement.mergeProps(typeahead.reference, listNavigation.reference, dismiss.reference, click.reference, interactionTypeProps);
+    if (generatedId) {
+      triggerInteractionProps.id = generatedId;
+    }
+    return triggerInteractionProps;
+  }, [click.reference, typeahead.reference, listNavigation.reference, dismiss.reference, interactionTypeProps, generatedId]);
+  const popupProps = React__namespace.useMemo(() => useRenderElement.mergeProps(useScrollLock.FOCUSABLE_POPUP_PROPS, typeahead.floating, listNavigation.floating, dismiss.floating), [typeahead.floating, listNavigation.floating, dismiss.floating]);
+  const itemProps = listNavigation.item ?? useRenderElement.EMPTY_OBJECT;
+  useScrollLock.useOnFirstRender(() => {
     store.update({
-      popupProps: getFloatingProps(),
+      popupProps,
       triggerProps: mergedTriggerProps
     });
   });
@@ -430,15 +448,15 @@ function SelectRoot(props) {
       open,
       mounted,
       transitionStatus,
-      popupProps: getFloatingProps(),
+      popupProps,
       triggerProps: mergedTriggerProps,
       items,
       itemToStringLabel,
       itemToStringValue,
       isItemEqualToValue,
-      openMethod
+      openMethod: renderedOpenMethod
     });
-  }, [store, generatedId, modal, multiple, value, open, mounted, transitionStatus, getFloatingProps, mergedTriggerProps, items, itemToStringLabel, itemToStringValue, isItemEqualToValue, openMethod]);
+  }, [store, generatedId, modal, multiple, value, open, mounted, transitionStatus, popupProps, mergedTriggerProps, items, itemToStringLabel, itemToStringValue, isItemEqualToValue, renderedOpenMethod]);
   const contextValue = React__namespace.useMemo(() => ({
     store,
     name,
@@ -446,8 +464,6 @@ function SelectRoot(props) {
     disabled,
     readOnly,
     multiple,
-    itemToStringLabel,
-    itemToStringValue,
     highlightItemOnHover,
     setValue,
     setOpen,
@@ -456,20 +472,19 @@ function SelectRoot(props) {
     scrollHandlerRef,
     handleScrollArrowVisibility,
     scrollArrowsMountedCountRef,
-    getItemProps,
-    events: floatingContext.context.events,
+    itemProps,
     valueRef,
     valuesRef,
     labelsRef,
     typingRef,
     selectionRef,
+    firstItemTextRef,
     selectedItemTextRef,
     validation,
     onOpenChangeComplete,
-    keyboardActiveRef,
     alignItemWithTriggerActiveRef,
     initialValueRef
-  }), [store, name, required, disabled, readOnly, multiple, itemToStringLabel, itemToStringValue, highlightItemOnHover, setValue, setOpen, getItemProps, floatingContext.context.events, validation, onOpenChangeComplete, handleScrollArrowVisibility]);
+  }), [store, name, required, disabled, readOnly, multiple, highlightItemOnHover, setValue, setOpen, itemProps, validation, onOpenChangeComplete, handleScrollArrowVisibility]);
   const ref = useRenderElement.useMergedRefs(inputRef, validation.inputRef);
   const hasMultipleSelection = multiple && Array.isArray(value) && value.length > 0;
   const hiddenInputName = multiple ? undefined : name;
@@ -481,32 +496,33 @@ function SelectRoot(props) {
       const currentSerializedValue = resolveAriaLabelledBy.stringifyAsValue(v, itemToStringValue);
       return /*#__PURE__*/jsxRuntime.jsx("input", {
         type: "hidden",
+        form: form,
         name: name,
-        value: currentSerializedValue
+        value: currentSerializedValue,
+        disabled: disabled
       }, currentSerializedValue);
     });
-  }, [multiple, value, name, itemToStringValue]);
+  }, [multiple, value, form, name, itemToStringValue, disabled]);
   return /*#__PURE__*/jsxRuntime.jsx(SelectRootContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/jsxRuntime.jsxs(SelectFloatingContext.Provider, {
       value: floatingContext,
       children: [children, /*#__PURE__*/jsxRuntime.jsx("input", {
-        ...validation.getInputValidationProps({
+        ...validation.getValidationProps(disabled, {
           onFocus() {
             // Move focus to the trigger element when the hidden input is focused.
             store.state.triggerElement?.focus({
               // Supported in Chrome from 144 (January 2026)
-              // @ts-expect-error - focusVisible is not yet in the lib.dom.d.ts
               focusVisible: true
             });
           },
           // Handle browser autofill.
           onChange(event) {
             // Workaround for https://github.com/facebook/react/issues/9023
-            if (event.nativeEvent.defaultPrevented) {
+            if (event.nativeEvent.defaultPrevented || disabled || readOnly) {
               return;
             }
-            const nextValue = event.target.value;
+            const nextValue = event.currentTarget.value;
             const details = useButton.createChangeEventDetails(useButton.none, event.nativeEvent);
             function handleChange() {
               if (multiple) {
@@ -514,20 +530,21 @@ function SelectRoot(props) {
                 return;
               }
 
-              // Handle single selection: match against registered values using serialization
-              const matchingValue = valuesRef.current.find(v => {
-                const candidate = resolveAriaLabelledBy.stringifyAsValue(v, itemToStringValue);
-                if (candidate.toLowerCase() === nextValue.toLowerCase()) {
-                  return true;
-                }
-                return false;
-              });
+              // Preserve the original serialized matching, then fall back to rendered text,
+              // which browsers can autofill for primitive values like `value="US">United States`.
+              const nextValueLower = nextValue.toLowerCase();
+              let matchingIndex = valuesRef.current.findIndex(candidate => resolveAriaLabelledBy.stringifyAsValue(candidate, itemToStringValue).toLowerCase() === nextValueLower || resolveAriaLabelledBy.stringifyAsLabel(candidate, itemToStringLabel).toLowerCase() === nextValueLower);
+              if (matchingIndex === -1) {
+                matchingIndex = valuesRef.current.findIndex((_, index) => {
+                  const renderedLabel = labelsRef.current[index];
+                  return renderedLabel != null && renderedLabel.toLowerCase() === nextValueLower;
+                });
+              }
+              const matchingValue = matchingIndex === -1 ? undefined : valuesRef.current[matchingIndex];
               if (matchingValue != null) {
-                setDirty(matchingValue !== validityData.initialValue);
+                // `setValue` may be canceled by `onValueChange`; rely on `useValueChanged` to
+                // mark the field dirty and run validation only when the value actually changes.
                 setValue(matchingValue, details);
-                if (shouldValidateOnChange()) {
-                  validation.commit(matchingValue);
-                }
               }
             }
             store.set('forceMount', true);
@@ -535,6 +552,7 @@ function SelectRoot(props) {
           }
         }),
         id: generatedId && hiddenInputName == null ? `${generatedId}-hidden-input` : undefined,
+        form: form,
         name: hiddenInputName,
         autoComplete: autoComplete,
         value: serializedValue,
@@ -544,7 +562,8 @@ function SelectRoot(props) {
         ref: ref,
         style: name ? useButton.visuallyHiddenInput : useButton.visuallyHidden,
         tabIndex: -1,
-        "aria-hidden": true
+        "aria-hidden": true,
+        suppressHydrationWarning: true
       }), hiddenInputs]
     })
   });
@@ -552,10 +571,12 @@ function SelectRoot(props) {
 
 const BOUNDARY_OFFSET = 2;
 const SELECTED_DELAY = 400;
-const UNSELECTED_DELAY = 200;
 const stateAttributesMapping$2 = {
-  ...InternalBackdrop.pressableTriggerOpenStateMapping,
+  ...useScrollLock.pressableTriggerOpenStateMapping,
   ...useLabelableId.fieldValidityMapping,
+  popupSide: side => side ? {
+    'data-popup-side': side
+  } : null,
   value: () => null
 };
 
@@ -572,6 +593,7 @@ const SelectTrigger = /*#__PURE__*/React__namespace.forwardRef(function SelectTr
     id: idProp,
     disabled: disabledProp = false,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -592,20 +614,20 @@ const SelectTrigger = /*#__PURE__*/React__namespace.forwardRef(function SelectTr
     readOnly,
     required,
     alignItemWithTriggerActiveRef,
-    disabled: selectDisabled,
-    keyboardActiveRef
+    disabled: selectDisabled
   } = useSelectRootContext();
   const disabled = fieldDisabled || selectDisabled || disabledProp;
-  const open = InternalBackdrop.useStore(store, selectors.open);
-  const value = InternalBackdrop.useStore(store, selectors.value);
-  const triggerProps = InternalBackdrop.useStore(store, selectors.triggerProps);
-  const positionerElement = InternalBackdrop.useStore(store, selectors.positionerElement);
-  const listElement = InternalBackdrop.useStore(store, selectors.listElement);
-  const rootId = InternalBackdrop.useStore(store, selectors.id);
-  const selectLabelId = InternalBackdrop.useStore(store, selectors.labelId);
-  const hasSelectedValue = InternalBackdrop.useStore(store, selectors.hasSelectedValue);
-  const shouldCheckNullItemLabel = !hasSelectedValue && open;
-  const hasNullItemLabel = InternalBackdrop.useStore(store, selectors.hasNullItemLabel, shouldCheckNullItemLabel);
+  const open = useScrollLock.useStore(store, selectors.open);
+  const mounted = useScrollLock.useStore(store, selectors.mounted);
+  const value = useScrollLock.useStore(store, selectors.value);
+  const triggerProps = useScrollLock.useStore(store, selectors.triggerProps);
+  const positionerElement = useScrollLock.useStore(store, selectors.positionerElement);
+  const listElement = useScrollLock.useStore(store, selectors.listElement);
+  const popupSideValue = useScrollLock.useStore(store, selectors.popupSide);
+  const rootId = useScrollLock.useStore(store, selectors.id);
+  const selectLabelId = useScrollLock.useStore(store, selectors.labelId);
+  const hasSelectedValue = useScrollLock.useStore(store, selectors.hasSelectedValue);
+  const popupSide = mounted && positionerElement ? popupSideValue : null;
   const id = idProp ?? rootId;
   const ariaLabelledBy = resolveAriaLabelledBy.resolveAriaLabelledBy(fieldLabelId, selectLabelId);
   useLabelableId.useLabelableId({
@@ -623,61 +645,41 @@ const SelectTrigger = /*#__PURE__*/React__namespace.forwardRef(function SelectTr
   const setTriggerElement = useButton.useStableCallback(element => {
     store.set('triggerElement', element);
   });
-  const mergedRef = useRenderElement.useMergedRefs(forwardedRef, triggerRef, buttonRef, setTriggerElement);
   const timeoutFocus = useButton.useTimeout();
   const timeoutMouseDown = useButton.useTimeout();
   const selectedDelayTimeout = useButton.useTimeout();
-  const unselectedDelayTimeout = useButton.useTimeout();
   React__namespace.useEffect(() => {
     if (open) {
-      const hasSelectedItemInList = hasSelectedValue || hasNullItemLabel;
-      const shouldDelayUnselectedMouseUpLonger = !hasSelectedItemInList;
-
-      // When there is no selected item in the list (placeholder-only selects), a mousedown
-      // on the trigger followed by a quick mouseup over the first option can accidentally select
-      // within 200ms. Delay unselected mouseup to match the safer 400ms window.
-      if (shouldDelayUnselectedMouseUpLonger) {
-        selectedDelayTimeout.start(SELECTED_DELAY, () => {
-          selectionRef.current.allowUnselectedMouseUp = true;
-          selectionRef.current.allowSelectedMouseUp = true;
-        });
-      } else {
-        // mousedown -> move to unselected item -> mouseup should not select within 200ms.
-        unselectedDelayTimeout.start(UNSELECTED_DELAY, () => {
-          selectionRef.current.allowUnselectedMouseUp = true;
-
-          // mousedown -> mouseup on selected item should not select within 400ms.
-          selectedDelayTimeout.start(UNSELECTED_DELAY, () => {
-            selectionRef.current.allowSelectedMouseUp = true;
-          });
-        });
-      }
+      // A mousedown on the trigger can open the popup under the cursor. Keep mouseup selection
+      // disabled briefly so releasing over either the selected item or a neighboring item doesn't
+      // commit an accidental selection. SelectItem can still opt into unselected mouseup sooner
+      // after a real drag over the item.
+      selectedDelayTimeout.start(SELECTED_DELAY, () => {
+        selectionRef.current.allowUnselectedMouseUp = true;
+        selectionRef.current.allowSelectedMouseUp = true;
+      });
       return () => {
         selectedDelayTimeout.clear();
-        unselectedDelayTimeout.clear();
       };
     }
     selectionRef.current = {
       allowSelectedMouseUp: false,
-      allowUnselectedMouseUp: false
+      allowUnselectedMouseUp: false,
+      dragY: 0
     };
     timeoutMouseDown.clear();
     return undefined;
-  }, [open, hasSelectedValue, hasNullItemLabel, selectionRef, timeoutMouseDown, selectedDelayTimeout, unselectedDelayTimeout]);
-  const ariaControlsId = React__namespace.useMemo(() => {
-    return listElement?.id ?? useButton.getFloatingFocusElement(positionerElement)?.id;
-  }, [listElement, positionerElement]);
-  const props = useRenderElement.mergeProps(triggerProps, {
+  }, [open, selectionRef, timeoutMouseDown, selectedDelayTimeout]);
+  const mergedProps = useRenderElement.mergeProps(triggerProps, {
     id,
     role: 'combobox',
     'aria-expanded': open ? 'true' : 'false',
     'aria-haspopup': 'listbox',
-    'aria-controls': open ? ariaControlsId : undefined,
+    'aria-controls': open ? listElement?.id ?? useScrollLock.getFloatingFocusElement(positionerElement)?.id : undefined,
     'aria-labelledby': ariaLabelledBy,
     'aria-readonly': readOnly || undefined,
     'aria-required': required || undefined,
     tabIndex: disabled ? -1 : 0,
-    ref: mergedRef,
     onFocus(event) {
       setFocused(true);
 
@@ -689,8 +691,6 @@ const SelectTrigger = /*#__PURE__*/React__namespace.forwardRef(function SelectTr
       // Saves a re-render on initial click: `forceMount === true` mounts
       // the items before `open === true`. We could sync those cycles better
       // without a timeout, but this is enough for now.
-      //
-      // XXX: might be causing `act()` warnings.
       timeoutFocus.start(0, () => {
         store.set('forceMount', true);
       });
@@ -706,12 +706,6 @@ const SelectTrigger = /*#__PURE__*/React__namespace.forwardRef(function SelectTr
         validation.commit(value);
       }
     },
-    onPointerMove() {
-      keyboardActiveRef.current = false;
-    },
-    onKeyDown() {
-      keyboardActiveRef.current = true;
-    },
     onMouseDown(event) {
       if (open) {
         return;
@@ -723,8 +717,9 @@ const SelectTrigger = /*#__PURE__*/React__namespace.forwardRef(function SelectTr
         }
         const mouseUpTarget = mouseEvent.target;
 
-        // Early return if clicked on trigger element or its children
-        if (useButton.contains(triggerRef.current, mouseUpTarget) || useButton.contains(positionerRef.current, mouseUpTarget) || mouseUpTarget === triggerRef.current) {
+        // Don't treat the release as an outside press when it lands on the trigger or inside
+        // the popup positioner (or their children).
+        if (useButton.contains(triggerRef.current, mouseUpTarget) || useButton.contains(positionerRef.current, mouseUpTarget)) {
           return;
         }
         const bounds = useCompositeListItem.getPseudoElementBounds(triggerRef.current);
@@ -741,7 +736,8 @@ const SelectTrigger = /*#__PURE__*/React__namespace.forwardRef(function SelectTr
         });
       });
     }
-  }, validation.getValidationProps, elementProps, getButtonProps);
+  }, elementProps, getButtonProps);
+  const props = validation.getValidationProps(disabled, mergedProps);
 
   // ensure nested useButton does not overwrite the combobox role:
   // <Toolbar.Button render={<Select.Trigger />} />
@@ -752,10 +748,11 @@ const SelectTrigger = /*#__PURE__*/React__namespace.forwardRef(function SelectTr
     disabled,
     value,
     readOnly,
+    popupSide,
     placeholder: !hasSelectedValue
   };
   return useRenderElement.useRenderElement('button', componentProps, {
-    ref: [forwardedRef, triggerRef],
+    ref: [forwardedRef, triggerRef, buttonRef, setTriggerElement],
     state,
     stateAttributesMapping: stateAttributesMapping$2,
     props
@@ -779,18 +776,19 @@ const SelectValue = /*#__PURE__*/React__namespace.forwardRef(function SelectValu
     render,
     children: childrenProp,
     placeholder,
+    style,
     ...elementProps
   } = componentProps;
   const {
     store,
     valueRef
   } = useSelectRootContext();
-  const value = InternalBackdrop.useStore(store, selectors.value);
-  const items = InternalBackdrop.useStore(store, selectors.items);
-  const itemToStringLabel = InternalBackdrop.useStore(store, selectors.itemToStringLabel);
-  const hasSelectedValue = InternalBackdrop.useStore(store, selectors.hasSelectedValue);
+  const value = useScrollLock.useStore(store, selectors.value);
+  const items = useScrollLock.useStore(store, selectors.items);
+  const itemToStringLabel = useScrollLock.useStore(store, selectors.itemToStringLabel);
+  const hasSelectedValue = useScrollLock.useStore(store, selectors.hasSelectedValue);
   const shouldCheckNullItemLabel = !hasSelectedValue && placeholder != null && childrenProp == null;
-  const hasNullLabel = InternalBackdrop.useStore(store, selectors.hasNullItemLabel, shouldCheckNullItemLabel);
+  const hasNullLabel = useScrollLock.useStore(store, selectors.hasNullItemLabel, shouldCheckNullItemLabel);
   const state = {
     value,
     placeholder: !hasSelectedValue
@@ -826,15 +824,15 @@ const SelectPortal = /*#__PURE__*/React__namespace.forwardRef(function SelectPor
   const {
     store
   } = useSelectRootContext();
-  const mounted = InternalBackdrop.useStore(store, selectors.mounted);
-  const forceMount = InternalBackdrop.useStore(store, selectors.forceMount);
+  const mounted = useScrollLock.useStore(store, selectors.mounted);
+  const forceMount = useScrollLock.useStore(store, selectors.forceMount);
   const shouldRender = mounted || forceMount;
   if (!shouldRender) {
     return null;
   }
   return /*#__PURE__*/jsxRuntime.jsx(SelectPortalContext.Provider, {
     value: true,
-    children: /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.FloatingPortal, {
+    children: /*#__PURE__*/jsxRuntime.jsx(useScrollLock.FloatingPortal, {
       ref: forwardedRef,
       ...portalProps
     })
@@ -890,7 +888,8 @@ const SelectPositioner = /*#__PURE__*/React__namespace.forwardRef(function Selec
     sticky = false,
     disableAnchorTracking,
     alignItemWithTrigger = true,
-    collisionAvoidance = InternalBackdrop.DROPDOWN_COLLISION_AVOIDANCE,
+    collisionAvoidance = useScrollLock.DROPDOWN_COLLISION_AVOIDANCE,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -905,15 +904,15 @@ const SelectPositioner = /*#__PURE__*/React__namespace.forwardRef(function Selec
     setValue
   } = useSelectRootContext();
   const floatingRootContext = useSelectFloatingContext();
-  const open = InternalBackdrop.useStore(store, selectors.open);
-  const mounted = InternalBackdrop.useStore(store, selectors.mounted);
-  const modal = InternalBackdrop.useStore(store, selectors.modal);
-  const value = InternalBackdrop.useStore(store, selectors.value);
-  const openMethod = InternalBackdrop.useStore(store, selectors.openMethod);
-  const positionerElement = InternalBackdrop.useStore(store, selectors.positionerElement);
-  const triggerElement = InternalBackdrop.useStore(store, selectors.triggerElement);
-  const isItemEqualToValue = InternalBackdrop.useStore(store, selectors.isItemEqualToValue);
-  const transitionStatus = InternalBackdrop.useStore(store, selectors.transitionStatus);
+  const open = useScrollLock.useStore(store, selectors.open);
+  const mounted = useScrollLock.useStore(store, selectors.mounted);
+  const modal = useScrollLock.useStore(store, selectors.modal);
+  const value = useScrollLock.useStore(store, selectors.value);
+  const openMethod = useScrollLock.useStore(store, selectors.openMethod);
+  const positionerElement = useScrollLock.useStore(store, selectors.positionerElement);
+  const triggerElement = useScrollLock.useStore(store, selectors.triggerElement);
+  const isItemEqualToValue = useScrollLock.useStore(store, selectors.isItemEqualToValue);
+  const transitionStatus = useScrollLock.useStore(store, selectors.transitionStatus);
   const scrollUpArrowRef = React__namespace.useRef(null);
   const scrollDownArrowRef = React__namespace.useRef(null);
   const [controlledAlignItemWithTrigger, setControlledAlignItemWithTrigger] = React__namespace.useState(alignItemWithTrigger);
@@ -932,7 +931,7 @@ const SelectPositioner = /*#__PURE__*/React__namespace.forwardRef(function Selec
     }
   }, [store, mounted]);
   React__namespace.useImperativeHandle(alignItemWithTriggerActiveRef, () => alignItemWithTriggerActive);
-  InternalBackdrop.useScrollLock((alignItemWithTriggerActive || modal) && open && openMethod !== 'touch', triggerElement);
+  useCompositeListItem.useAnchoredPopupScrollLock((alignItemWithTriggerActive || modal) && open, openMethod === 'touch', positionerElement, triggerElement);
   const positioning = useCompositeListItem.useAnchorPositioning({
     anchor,
     floatingRootContext,
@@ -952,34 +951,25 @@ const SelectPositioner = /*#__PURE__*/React__namespace.forwardRef(function Selec
   });
   const renderedSide = alignItemWithTriggerActive ? 'none' : positioning.side;
   const positionerStyles = alignItemWithTriggerActive ? FIXED : positioning.positionerStyles;
-  const defaultProps = React__namespace.useMemo(() => {
-    const hiddenStyles = {};
-    if (!open) {
-      hiddenStyles.pointerEvents = 'none';
-    }
-    return {
-      role: 'presentation',
-      hidden: !mounted,
-      style: {
-        ...positionerStyles,
-        ...hiddenStyles
-      }
-    };
-  }, [open, mounted, positionerStyles]);
   const state = {
     open,
     side: renderedSide,
     align: positioning.align,
     anchorHidden: positioning.anchorHidden
   };
+  useButton.useIsoLayoutEffect(() => {
+    store.set('popupSide', positioning.side);
+  }, [store, positioning.side]);
   const setPositionerElement = useButton.useStableCallback(element => {
     store.set('positionerElement', element);
   });
-  const element = useRenderElement.useRenderElement('div', componentProps, {
-    ref: [forwardedRef, setPositionerElement],
-    state,
-    stateAttributesMapping: InternalBackdrop.popupStateMapping,
-    props: [defaultProps, useCompositeListItem.getDisabledMountTransitionStyles(transitionStatus), elementProps]
+  const element = useCompositeListItem.usePositioner(componentProps, state, {
+    styles: positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, setPositionerElement],
+    hidden: !mounted,
+    inert: !open
   });
   const prevMapSizeRef = React__namespace.useRef(0);
   const onMapChange = useButton.useStableCallback(map => {
@@ -1045,8 +1035,8 @@ const SelectPositioner = /*#__PURE__*/React__namespace.forwardRef(function Selec
     onMapChange: onMapChange,
     children: /*#__PURE__*/jsxRuntime.jsxs(SelectPositionerContext.Provider, {
       value: contextValue,
-      children: [mounted && modal && /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.InternalBackdrop, {
-        inert: InternalBackdrop.inertValue(!open),
+      children: [mounted && modal && /*#__PURE__*/jsxRuntime.jsx(useScrollLock.InternalBackdrop, {
+        inert: useScrollLock.inertValue(!open),
         cutout: triggerElement
       }), element]
     })
@@ -1054,20 +1044,8 @@ const SelectPositioner = /*#__PURE__*/React__namespace.forwardRef(function Selec
 });
 if (process.env.NODE_ENV !== "production") SelectPositioner.displayName = "SelectPositioner";
 
-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 SCROLL_EPS_PX = 1;
 const stateAttributesMapping = {
-  ...InternalBackdrop.popupStateMapping,
+  ...useScrollLock.popupStateMapping,
   ...useButton.transitionStatusMapping
 };
 
@@ -1081,6 +1059,7 @@ const SelectPopup = /*#__PURE__*/React__namespace.forwardRef(function SelectPopu
   const {
     render,
     className,
+    style,
     finalFocus,
     ...elementProps
   } = componentProps;
@@ -1090,39 +1069,38 @@ const SelectPopup = /*#__PURE__*/React__namespace.forwardRef(function SelectPopu
     onOpenChangeComplete,
     setOpen,
     valueRef,
+    firstItemTextRef,
     selectedItemTextRef,
-    keyboardActiveRef,
     multiple,
     handleScrollArrowVisibility,
     scrollHandlerRef,
+    listRef,
     highlightItemOnHover
   } = useSelectRootContext();
   const {
     side,
     align,
     alignItemWithTriggerActive,
-    setControlledAlignItemWithTrigger,
-    scrollDownArrowRef,
-    scrollUpArrowRef
+    isPositioned,
+    setControlledAlignItemWithTrigger
   } = useSelectPositionerContext();
-  const insideToolbar = ToolbarRootContext.useToolbarRootContext(true) != null;
+  const insideToolbar = isElementDisabled.useToolbarRootContext(true) != null;
   const floatingRootContext = useSelectFloatingContext();
+  const direction = useScrollLock.useDirection();
   const {
     nonce,
     disableStyleElements
-  } = CSPContext.useCSPContext();
-  const highlightTimeout = useButton.useTimeout();
-  const id = InternalBackdrop.useStore(store, selectors.id);
-  const open = InternalBackdrop.useStore(store, selectors.open);
-  const mounted = InternalBackdrop.useStore(store, selectors.mounted);
-  const popupProps = InternalBackdrop.useStore(store, selectors.popupProps);
-  const transitionStatus = InternalBackdrop.useStore(store, selectors.transitionStatus);
-  const triggerElement = InternalBackdrop.useStore(store, selectors.triggerElement);
-  const positionerElement = InternalBackdrop.useStore(store, selectors.positionerElement);
-  const listElement = InternalBackdrop.useStore(store, selectors.listElement);
-  const initialHeightRef = React__namespace.useRef(0);
+  } = scrollEdges.useCSPContext();
+  const id = useScrollLock.useStore(store, selectors.id);
+  const open = useScrollLock.useStore(store, selectors.open);
+  const openMethod = useScrollLock.useStore(store, selectors.openMethod);
+  const mounted = useScrollLock.useStore(store, selectors.mounted);
+  const popupProps = useScrollLock.useStore(store, selectors.popupProps);
+  const transitionStatus = useScrollLock.useStore(store, selectors.transitionStatus);
+  const triggerElement = useScrollLock.useStore(store, selectors.triggerElement);
+  const positionerElement = useScrollLock.useStore(store, selectors.positionerElement);
+  const listElement = useScrollLock.useStore(store, selectors.listElement);
   const reachedMaxHeightRef = React__namespace.useRef(false);
-  const maxHeightRef = React__namespace.useRef(0);
   const initialPlacedRef = React__namespace.useRef(false);
   const originalPositionerStylesRef = React__namespace.useRef({});
   const scrollArrowFrame = useButton.useAnimationFrame();
@@ -1136,12 +1114,18 @@ const SelectPopup = /*#__PURE__*/React__namespace.forwardRef(function SelectPopu
     }
     const isTopPositioned = positionerElement.style.top === '0px';
     const isBottomPositioned = positionerElement.style.bottom === '0px';
-    const currentHeight = positionerElement.getBoundingClientRect().height;
+    if (!isTopPositioned && !isBottomPositioned) {
+      handleScrollArrowVisibility();
+      return;
+    }
+    const scale = getScale(positionerElement);
+    const currentHeight = normalizeSize(positionerElement.getBoundingClientRect().height, 'y', scale);
     const doc = useButton.ownerDocument(positionerElement);
-    const positionerStyles = getComputedStyle(positionerElement);
+    const win = floatingUi_utils_dom.getWindow(positionerElement);
+    const positionerStyles = win.getComputedStyle(positionerElement);
     const marginTop = parseFloat(positionerStyles.marginTop);
     const marginBottom = parseFloat(positionerStyles.marginBottom);
-    const maxPopupHeight = getMaxPopupHeight(getComputedStyle(popupRef.current));
+    const maxPopupHeight = getMaxPopupHeight(win.getComputedStyle(popupRef.current));
     const maxAvailableHeight = Math.min(doc.documentElement.clientHeight - marginTop - marginBottom, maxPopupHeight);
     const scrollTop = scroller.scrollTop;
     const maxScrollTop = getMaxScrollTop(scroller);
@@ -1159,42 +1143,29 @@ const SelectPopup = /*#__PURE__*/React__namespace.forwardRef(function SelectPopu
         setHeight(currentHeight + heightDelta);
       }
       scroller.scrollTop = targetScrollTop;
-      if (maxAvailableHeight - (currentHeight + heightDelta) <= SCROLL_EPS_PX) {
+      if (maxAvailableHeight - (currentHeight + heightDelta) <= scrollEdges.SCROLL_EDGE_TOLERANCE_PX) {
         reachedMaxHeightRef.current = true;
       }
       handleScrollArrowVisibility();
     };
-    if (isTopPositioned) {
-      const diff = maxScrollTop - scrollTop;
-      const idealHeight = currentHeight + diff;
-      const nextHeight = Math.min(idealHeight, maxAvailableHeight);
-      nextPositionerHeight = nextHeight;
-      if (diff <= SCROLL_EPS_PX) {
-        handleSmallDiff(diff, maxScrollTop);
-        return;
-      }
-      if (maxAvailableHeight - nextHeight > SCROLL_EPS_PX) {
+    const diff = isTopPositioned ? maxScrollTop - scrollTop : scrollTop;
+    const nextHeight = Math.min(currentHeight + diff, maxAvailableHeight);
+    nextPositionerHeight = nextHeight;
+    if (diff <= scrollEdges.SCROLL_EDGE_TOLERANCE_PX) {
+      handleSmallDiff(diff, isTopPositioned ? maxScrollTop : 0);
+      return;
+    }
+    if (maxAvailableHeight - nextHeight > scrollEdges.SCROLL_EDGE_TOLERANCE_PX) {
+      if (isTopPositioned) {
         scrollToMax = true;
       } else {
-        setReachedMax = true;
-      }
-    } else if (isBottomPositioned) {
-      const diff = scrollTop;
-      const idealHeight = currentHeight + diff;
-      const nextHeight = Math.min(idealHeight, maxAvailableHeight);
-      const overshoot = idealHeight - maxAvailableHeight;
-      nextPositionerHeight = nextHeight;
-      if (diff <= SCROLL_EPS_PX) {
-        handleSmallDiff(diff, 0);
-        return;
-      }
-      if (maxAvailableHeight - nextHeight > SCROLL_EPS_PX) {
         nextScrollTop = 0;
-      } else {
-        setReachedMax = true;
-        if (scrollTop < maxScrollTop) {
-          nextScrollTop = scrollTop - (diff - overshoot);
-        }
+      }
+    } else {
+      setReachedMax = true;
+      if (isBottomPositioned && scrollTop < maxScrollTop) {
+        const overshoot = currentHeight + diff - maxAvailableHeight;
+        nextScrollTop = scrollTop - (diff - overshoot);
       }
     }
     nextPositionerHeight = Math.ceil(nextPositionerHeight);
@@ -1207,11 +1178,11 @@ const SelectPopup = /*#__PURE__*/React__namespace.forwardRef(function SelectPopu
       const target = scrollToMax ? nextMaxScrollTop : clamp.clamp(nextScrollTop, 0, nextMaxScrollTop);
 
       // Avoid adjustments that re-trigger scroll events forever.
-      if (Math.abs(scroller.scrollTop - target) > SCROLL_EPS_PX) {
+      if (Math.abs(scroller.scrollTop - target) > scrollEdges.SCROLL_EDGE_TOLERANCE_PX) {
         scroller.scrollTop = target;
       }
     }
-    if (setReachedMax || nextPositionerHeight >= maxAvailableHeight - SCROLL_EPS_PX) {
+    if (setReachedMax || nextPositionerHeight >= maxAvailableHeight - scrollEdges.SCROLL_EDGE_TOLERANCE_PX) {
       reachedMaxHeightRef.current = true;
     }
     handleScrollArrowVisibility();
@@ -1254,13 +1225,15 @@ const SelectPopup = /*#__PURE__*/React__namespace.forwardRef(function SelectPopu
     }
     initialPlacedRef.current = false;
     reachedMaxHeightRef.current = false;
-    initialHeightRef.current = 0;
-    maxHeightRef.current = 0;
     clearStyles(positionerElement, originalPositionerStylesRef.current);
   }, [open, alignItemWithTriggerActive, positionerElement, popupRef]);
   useButton.useIsoLayoutEffect(() => {
     const popupElement = popupRef.current;
-    if (!open || !triggerElement || !positionerElement || !popupElement || store.state.transitionStatus === 'ending') {
+
+    // Wait for Floating UI's first positioning pass before reading DOM geometry.
+    // We replace the final coordinates for aligned selects, but still need middleware
+    // like `size()` to set CSS variables such as `--anchor-width`.
+    if (!open || !triggerElement || !positionerElement || !popupElement || alignItemWithTriggerActive && !isPositioned || store.state.transitionStatus === 'ending') {
       return;
     }
     if (!alignItemWithTriggerActive) {
@@ -1270,114 +1243,113 @@ const SelectPopup = /*#__PURE__*/React__namespace.forwardRef(function SelectPopu
       return;
     }
 
-    // Wait for `selectedItemTextRef.current` to be set.
-    queueMicrotask(() => {
-      // Ensure we remove any transforms that can affect the location of the popup
-      // and therefore the calculations.
-      const restoreTransformStyles = unsetTransformStyles(popupElement);
-      popupElement.style.removeProperty('--transform-origin');
-      try {
-        const positionerStyles = getComputedStyle(positionerElement);
-        const popupStyles = getComputedStyle(popupElement);
-        const doc = useButton.ownerDocument(triggerElement);
-        const win = floatingUi_utils_dom.getWindow(positionerElement);
-        const scale = getScale(triggerElement);
-        const triggerRect = normalizeRect(triggerElement.getBoundingClientRect(), scale);
-        const positionerRect = normalizeRect(positionerElement.getBoundingClientRect(), scale);
-        const triggerX = triggerRect.left;
-        const triggerHeight = triggerRect.height;
-        const scroller = listElement || popupElement;
-        const scrollHeight = scroller.scrollHeight;
-        const borderBottom = parseFloat(popupStyles.borderBottomWidth);
-        const marginTop = parseFloat(positionerStyles.marginTop) || 10;
-        const marginBottom = parseFloat(positionerStyles.marginBottom) || 10;
-        const minHeight = parseFloat(positionerStyles.minHeight) || 100;
-        const maxPopupHeight = getMaxPopupHeight(popupStyles);
-        const paddingLeft = 5;
-        const paddingRight = 5;
-        const triggerCollisionThreshold = 20;
-        const viewportHeight = doc.documentElement.clientHeight - marginTop - marginBottom;
-        const viewportWidth = doc.documentElement.clientWidth;
-        const availableSpaceBeneathTrigger = viewportHeight - triggerRect.bottom + triggerHeight;
-        const textElement = selectedItemTextRef.current;
-        const valueElement = valueRef.current;
-        let textRect;
-        let offsetX = 0;
-        let offsetY = 0;
-        if (textElement && valueElement) {
-          const valueRect = normalizeRect(valueElement.getBoundingClientRect(), scale);
-          textRect = normalizeRect(textElement.getBoundingClientRect(), scale);
-          const valueLeftFromTriggerLeft = valueRect.left - triggerX;
-          const textLeftFromPositionerLeft = textRect.left - positionerRect.left;
-          const valueCenterFromPositionerTop = valueRect.top - triggerRect.top + valueRect.height / 2;
-          const textCenterFromTriggerTop = textRect.top - positionerRect.top + textRect.height / 2;
-          offsetX = valueLeftFromTriggerLeft - textLeftFromPositionerLeft;
-          offsetY = textCenterFromTriggerTop - valueCenterFromPositionerTop;
-        }
-        const idealHeight = availableSpaceBeneathTrigger + offsetY + marginBottom + borderBottom;
-        let height = Math.min(viewportHeight, idealHeight);
-        const maxHeight = viewportHeight - marginTop - marginBottom;
-        const scrollTop = idealHeight - height;
-        const left = Math.max(paddingLeft, triggerX + offsetX);
-        const maxRight = viewportWidth - paddingRight;
-        const rightOverflow = Math.max(0, left + positionerRect.width - maxRight);
-        positionerElement.style.left = `${left - rightOverflow}px`;
-        positionerElement.style.height = `${height}px`;
-        positionerElement.style.maxHeight = 'auto';
-        positionerElement.style.marginTop = `${marginTop}px`;
-        positionerElement.style.marginBottom = `${marginBottom}px`;
-        popupElement.style.height = '100%';
-        const maxScrollTop = getMaxScrollTop(scroller);
-        const isTopPositioned = scrollTop >= maxScrollTop - SCROLL_EPS_PX;
-        if (isTopPositioned) {
-          height = Math.min(viewportHeight, positionerRect.height) - (scrollTop - maxScrollTop);
-        }
-
-        // When the trigger is too close to the top or bottom of the viewport, or the minHeight is
-        // reached, we fallback to aligning the popup to the trigger as the UX is poor otherwise.
-        const fallbackToAlignPopupToTrigger = triggerRect.top < triggerCollisionThreshold || triggerRect.bottom > viewportHeight - triggerCollisionThreshold || Math.ceil(height) + SCROLL_EPS_PX < Math.min(scrollHeight, minHeight);
+    // Ensure we remove any transforms that can affect the location of the popup
+    // and therefore the calculations.
+    const restoreTransformStyles = unsetTransformStyles(popupElement);
+    popupElement.style.removeProperty('--transform-origin');
+    try {
+      let textElement = selectedItemTextRef.current;
+      if (!textElement?.isConnected) {
+        const hasSelectedValue = selectors.hasSelectedValue(store.state);
+        textElement = !hasSelectedValue && firstItemTextRef.current?.isConnected ? firstItemTextRef.current : null;
+      }
+      const valueElement = valueRef.current;
+      const win = floatingUi_utils_dom.getWindow(positionerElement);
+      const positionerStyles = win.getComputedStyle(positionerElement);
+      const popupStyles = win.getComputedStyle(popupElement);
+      const doc = useButton.ownerDocument(triggerElement);
+      const scale = getScale(triggerElement);
+      const triggerRect = normalizeRect(triggerElement.getBoundingClientRect(), scale);
+      const positionerRect = normalizeRect(positionerElement.getBoundingClientRect(), scale);
+      const triggerHeight = triggerRect.height;
+      const scroller = listElement || popupElement;
+      const scrollHeight = scroller.scrollHeight;
+      const borderBottom = parseFloat(popupStyles.borderBottomWidth);
+      // The `|| N` fallbacks cover an unset/`auto` value (parses to `NaN`). Note a literal `0`
+      // also resolves to the fallback, so an explicit `margin: 0` or `min-height: 0` still takes
+      // the default below.
+      const marginTop = parseFloat(positionerStyles.marginTop) || 10;
+      const marginBottom = parseFloat(positionerStyles.marginBottom) || 10;
+      const minHeight = parseFloat(positionerStyles.minHeight) || 100;
+      const maxPopupHeight = getMaxPopupHeight(popupStyles);
+      const paddingLeft = 5;
+      const paddingRight = 5;
+      const triggerCollisionThreshold = 20;
+      const viewportHeight = doc.documentElement.clientHeight - marginTop - marginBottom;
+      const viewportWidth = doc.documentElement.clientWidth;
+      const availableSpaceBeneathTrigger = viewportHeight - triggerRect.bottom + triggerHeight;
+      let textRect;
+      let alignedLeft = direction === 'rtl' ? triggerRect.right - positionerRect.width : triggerRect.left;
+      let offsetY = 0;
+      if (textElement && valueElement) {
+        const valueRect = normalizeRect(valueElement.getBoundingClientRect(), scale);
+        textRect = normalizeRect(textElement.getBoundingClientRect(), scale);
+        alignedLeft = positionerRect.left + (direction === 'rtl' ? valueRect.right - textRect.right : valueRect.left - textRect.left);
+        const valueCenterFromTriggerTop = valueRect.top - triggerRect.top + valueRect.height / 2;
+        const textCenterFromPositionerTop = textRect.top - positionerRect.top + textRect.height / 2;
+        offsetY = textCenterFromPositionerTop - valueCenterFromTriggerTop;
+      }
+      const idealHeight = availableSpaceBeneathTrigger + offsetY + marginBottom + borderBottom;
+      let height = Math.min(viewportHeight, idealHeight);
+      const maxHeight = viewportHeight - marginTop - marginBottom;
+      const scrollTop = idealHeight - height;
+      const maxRight = viewportWidth - paddingRight;
+      positionerElement.style.left = `${clamp.clamp(alignedLeft, paddingLeft, maxRight - positionerRect.width)}px`;
+      positionerElement.style.height = `${height}px`;
+      // `none` (not the invalid `auto`) so the explicit height governs in align mode and isn't
+      // clamped by a `max-height` from user CSS.
+      positionerElement.style.maxHeight = 'none';
+      positionerElement.style.marginTop = `${marginTop}px`;
+      positionerElement.style.marginBottom = `${marginBottom}px`;
+      popupElement.style.height = '100%';
+      const maxScrollTop = getMaxScrollTop(scroller);
+      const isTopPositioned = scrollTop >= maxScrollTop - scrollEdges.SCROLL_EDGE_TOLERANCE_PX;
+      if (isTopPositioned) {
+        height = Math.min(viewportHeight, positionerRect.height) - (scrollTop - maxScrollTop);
+      }
 
-        // Safari doesn't position the popup correctly when pinch-zoomed.
-        const isPinchZoomed = (win.visualViewport?.scale ?? 1) !== 1 && useButton.isWebKit;
-        if (fallbackToAlignPopupToTrigger || isPinchZoomed) {
-          initialPlacedRef.current = true;
-          clearStyles(positionerElement, originalPositionerStylesRef.current);
-          ReactDOM__namespace.flushSync(() => setControlledAlignItemWithTrigger(false));
-          return;
-        }
-        if (isTopPositioned) {
-          const topOffset = Math.max(0, viewportHeight - idealHeight);
-          positionerElement.style.top = positionerRect.height >= maxHeight ? '0' : `${topOffset}px`;
-          positionerElement.style.height = `${height}px`;
-          scroller.scrollTop = getMaxScrollTop(scroller);
-          initialHeightRef.current = Math.max(minHeight, height);
-        } else {
-          positionerElement.style.bottom = '0';
-          initialHeightRef.current = Math.max(minHeight, height);
-          scroller.scrollTop = scrollTop;
-        }
-        if (textRect) {
-          const popupTop = positionerRect.top;
-          const popupHeight = positionerRect.height;
-          const textCenterY = textRect.top + textRect.height / 2;
-          const transformOriginY = popupHeight > 0 ? (textCenterY - popupTop) / popupHeight * 100 : 50;
-          const clampedY = clamp.clamp(transformOriginY, 0, 100);
-          popupElement.style.setProperty('--transform-origin', `50% ${clampedY}%`);
-        }
-        if (initialHeightRef.current === viewportHeight || height >= maxPopupHeight) {
-          reachedMaxHeightRef.current = true;
-        }
-        handleScrollArrowVisibility();
+      // When the trigger is too close to the top or bottom of the viewport, or the minHeight is
+      // reached, we fallback to aligning the popup to the trigger as the UX is poor otherwise.
+      const fallbackToAlignPopupToTrigger = triggerRect.top < triggerCollisionThreshold || triggerRect.bottom > viewportHeight - triggerCollisionThreshold || Math.ceil(height) + scrollEdges.SCROLL_EDGE_TOLERANCE_PX < Math.min(scrollHeight, minHeight);
 
-        // Avoid the `onScroll` event logic from triggering before the popup is placed.
-        setTimeout(() => {
-          initialPlacedRef.current = true;
-        });
-      } finally {
-        restoreTransformStyles();
+      // Safari doesn't position the popup correctly when pinch-zoomed.
+      const isPinchZoomed = (win.visualViewport?.scale ?? 1) !== 1 && useScrollLock.webkit;
+      if (fallbackToAlignPopupToTrigger || isPinchZoomed) {
+        initialPlacedRef.current = true;
+        clearStyles(positionerElement, originalPositionerStylesRef.current);
+        setControlledAlignItemWithTrigger(false);
+        return;
       }
-    });
-  }, [store, open, positionerElement, triggerElement, valueRef, selectedItemTextRef, popupRef, handleScrollArrowVisibility, alignItemWithTriggerActive, setControlledAlignItemWithTrigger, scrollArrowFrame, scrollDownArrowRef, scrollUpArrowRef, listElement]);
+      const initialHeight = Math.max(minHeight, height);
+      if (isTopPositioned) {
+        const topOffset = Math.max(0, viewportHeight - idealHeight);
+        positionerElement.style.top = positionerRect.height >= maxHeight ? '0' : `${topOffset}px`;
+        positionerElement.style.height = `${height}px`;
+        scroller.scrollTop = getMaxScrollTop(scroller);
+      } else {
+        positionerElement.style.bottom = '0';
+        scroller.scrollTop = scrollTop;
+      }
+      if (textRect) {
+        const popupTop = positionerRect.top;
+        const popupHeight = positionerRect.height;
+        const textCenterY = textRect.top + textRect.height / 2;
+        const transformOriginY = popupHeight > 0 ? (textCenterY - popupTop) / popupHeight * 100 : 50;
+        const clampedY = clamp.clamp(transformOriginY, 0, 100);
+        popupElement.style.setProperty('--transform-origin', `50% ${clampedY}%`);
+      }
+      if (initialHeight === viewportHeight || height >= maxPopupHeight) {
+        reachedMaxHeightRef.current = true;
+      }
+      handleScrollArrowVisibility();
+      if (highlightItemOnHover && store.state.selectedIndex === null && store.state.activeIndex === null && listRef.current[0] != null) {
+        store.set('activeIndex', 0);
+      }
+      initialPlacedRef.current = true;
+    } finally {
+      restoreTransformStyles();
+    }
+  }, [store, open, positionerElement, triggerElement, valueRef, firstItemTextRef, selectedItemTextRef, popupRef, handleScrollArrowVisibility, alignItemWithTriggerActive, setControlledAlignItemWithTrigger, scrollArrowFrame, listElement, listRef, highlightItemOnHover, direction, isPositioned]);
   React__namespace.useEffect(() => {
     if (!alignItemWithTriggerActive || !positionerElement || !open) {
       return undefined;
@@ -1386,10 +1358,7 @@ const SelectPopup = /*#__PURE__*/React__namespace.forwardRef(function SelectPopu
     function handleResize(event) {
       setOpen(false, useButton.createChangeEventDetails(useButton.windowResize, event));
     }
-    win.addEventListener('resize', handleResize);
-    return () => {
-      win.removeEventListener('resize', handleResize);
-    };
+    return useButton.addEventListener(win, 'resize', handleResize);
   }, [setOpen, alignItemWithTriggerActive, positionerElement, open]);
   const defaultProps = {
     ...(listElement ? {
@@ -1401,26 +1370,10 @@ const SelectPopup = /*#__PURE__*/React__namespace.forwardRef(function SelectPopu
       id: `${id}-list`
     }),
     onKeyDown(event) {
-      keyboardActiveRef.current = true;
-      if (insideToolbar && CSPContext.COMPOSITE_KEYS.has(event.key)) {
+      if (insideToolbar && scrollEdges.COMPOSITE_KEYS.has(event.key)) {
         event.stopPropagation();
       }
     },
-    onMouseMove() {
-      keyboardActiveRef.current = false;
-    },
-    onPointerLeave(event) {
-      if (!highlightItemOnHover || isMouseWithinBounds(event) || event.pointerType === 'touch') {
-        return;
-      }
-      const popup = event.currentTarget;
-      highlightTimeout.start(0, () => {
-        store.set('activeIndex', null);
-        popup.focus({
-          preventScroll: true
-        });
-      });
-    },
     onScroll(event) {
       if (listElement) {
         return;
@@ -1438,14 +1391,15 @@ const SelectPopup = /*#__PURE__*/React__namespace.forwardRef(function SelectPopu
     state,
     stateAttributesMapping,
     props: [popupProps, defaultProps, useCompositeListItem.getDisabledMountTransitionStyles(transitionStatus), {
-      className: !listElement && alignItemWithTriggerActive ? CSPContext.styleDisableScrollbar.className : undefined
+      className: !listElement && alignItemWithTriggerActive ? scrollEdges.styleDisableScrollbar.className : undefined
     }, elementProps]
   });
   return /*#__PURE__*/jsxRuntime.jsxs(React__namespace.Fragment, {
-    children: [!disableStyleElements && CSPContext.styleDisableScrollbar.getElement(nonce), /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.FloatingFocusManager, {
+    children: [!disableStyleElements && scrollEdges.styleDisableScrollbar.getElement(nonce), /*#__PURE__*/jsxRuntime.jsx(useScrollLock.FloatingFocusManager, {
       context: floatingRootContext,
       modal: false,
       disabled: !mounted,
+      openInteractionType: openMethod,
       returnFocus: finalFocus,
       restoreFocus: true,
       children: element
@@ -1458,18 +1412,21 @@ function getMaxPopupHeight(popupStyles) {
   return maxHeightStyle.endsWith('px') ? parseFloat(maxHeightStyle) || Infinity : Infinity;
 }
 function getMaxScrollTop(scroller) {
-  return Math.max(0, scroller.scrollHeight - scroller.clientHeight);
+  return scrollEdges.getMaxScrollOffset(scroller.scrollHeight, scroller.clientHeight);
 }
 function getScale(element) {
   // The platform API is async-capable, but the DOM platform returns a plain scale object.
   return floatingUi_reactDom.platform.getScale(element);
 }
+function normalizeSize(size, axis, scale) {
+  return size / scale[axis];
+}
 function normalizeRect(rect, scale) {
-  return index_esm.rectToClientRect({
-    x: rect.x / scale.x,
-    y: rect.y / scale.y,
-    width: rect.width / scale.x,
-    height: rect.height / scale.y
+  return floatingUi_utils.rectToClientRect({
+    x: normalizeSize(rect.x, 'x', scale),
+    y: normalizeSize(rect.y, 'y', scale),
+    width: normalizeSize(rect.width, 'x', scale),
+    height: normalizeSize(rect.height, 'y', scale)
   });
 }
 const TRANSFORM_STYLE_RESETS = [['transform', 'none'], ['scale', '1'], ['translate', '0 0']];
@@ -1502,8 +1459,9 @@ function unsetTransformStyles(popupElement) {
  */
 const SelectList = /*#__PURE__*/React__namespace.forwardRef(function SelectList(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -1513,10 +1471,10 @@ const SelectList = /*#__PURE__*/React__namespace.forwardRef(function SelectList(
   const {
     alignItemWithTriggerActive
   } = useSelectPositionerContext();
-  const hasScrollArrows = InternalBackdrop.useStore(store, selectors.hasScrollArrows);
-  const openMethod = InternalBackdrop.useStore(store, selectors.openMethod);
-  const multiple = InternalBackdrop.useStore(store, selectors.multiple);
-  const id = InternalBackdrop.useStore(store, selectors.id);
+  const hasScrollArrows = useScrollLock.useStore(store, selectors.hasScrollArrows);
+  const openMethod = useScrollLock.useStore(store, selectors.openMethod);
+  const multiple = useScrollLock.useStore(store, selectors.multiple);
+  const id = useScrollLock.useStore(store, selectors.id);
   const defaultProps = {
     id: `${id}-list`,
     role: 'listbox',
@@ -1527,7 +1485,7 @@ const SelectList = /*#__PURE__*/React__namespace.forwardRef(function SelectList(
     ...(alignItemWithTriggerActive && {
       style: LIST_FUNCTIONAL_STYLES
     }),
-    className: hasScrollArrows && openMethod !== 'touch' ? CSPContext.styleDisableScrollbar.className : undefined
+    className: hasScrollArrows && openMethod !== 'touch' ? scrollEdges.styleDisableScrollbar.className : undefined
   };
   const setListElement = useButton.useStableCallback(element => {
     store.set('listElement', element);
@@ -1553,6 +1511,7 @@ const SelectItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namesp
   const {
     render,
     className,
+    style,
     value: itemValue = null,
     label,
     disabled = false,
@@ -1567,25 +1526,25 @@ const SelectItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namesp
   });
   const {
     store,
-    getItemProps,
+    itemProps,
     setOpen,
     setValue,
     selectionRef,
     typingRef,
     valuesRef,
-    keyboardActiveRef,
     multiple,
-    highlightItemOnHover
+    selectedItemTextRef,
+    disabled: selectDisabled,
+    readOnly
   } = useSelectRootContext();
-  const highlightTimeout = useButton.useTimeout();
-  const highlighted = InternalBackdrop.useStore(store, selectors.isActive, listItem.index);
-  const selected = InternalBackdrop.useStore(store, selectors.isSelected, listItem.index, itemValue);
-  const selectedByFocus = InternalBackdrop.useStore(store, selectors.isSelectedByFocus, listItem.index);
-  const isItemEqualToValue = InternalBackdrop.useStore(store, selectors.isItemEqualToValue);
+  const highlighted = useScrollLock.useStore(store, selectors.isActive, listItem.index);
+  const open = useScrollLock.useStore(store, selectors.open);
+  const selected = useScrollLock.useStore(store, selectors.isSelected, itemValue);
+  const selectedByFocus = useScrollLock.useStore(store, selectors.isSelectedByFocus, listItem.index);
+  const isItemEqualToValue = useScrollLock.useStore(store, selectors.isItemEqualToValue);
   const index = listItem.index;
   const hasRegistered = index !== -1;
   const itemRef = React__namespace.useRef(null);
-  const indexRef = useButton.useValueAsRef(index);
   useButton.useIsoLayoutEffect(() => {
     if (!hasRegistered) {
       return undefined;
@@ -1598,34 +1557,27 @@ const SelectItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namesp
   }, [hasRegistered, index, itemValue, valuesRef]);
   useButton.useIsoLayoutEffect(() => {
     if (!hasRegistered) {
-      return undefined;
+      return;
     }
     const selectedValue = store.state.value;
     let selectedCandidate = selectedValue;
-    if (multiple && Array.isArray(selectedValue) && selectedValue.length > 0) {
-      selectedCandidate = selectedValue[selectedValue.length - 1];
+    if (multiple && Array.isArray(selectedValue)) {
+      // Compare against the last selected item, or `undefined` when nothing is selected — never
+      // the raw array, which a custom `isItemEqualToValue` isn't expected to receive.
+      selectedCandidate = selectedValue.length > 0 ? selectedValue[selectedValue.length - 1] : undefined;
     }
     if (selectedCandidate !== undefined && resolveAriaLabelledBy.compareItemEquality(itemValue, selectedCandidate, isItemEqualToValue)) {
       store.set('selectedIndex', index);
+      // Make sure SelectPopup can measure the selected item on first open.
+      // SelectItemText can still update this ref later when focus moves.
+      if (textRef.current) {
+        selectedItemTextRef.current = textRef.current;
+      }
     }
-    return undefined;
-  }, [hasRegistered, index, multiple, isItemEqualToValue, store, itemValue]);
-  const state = {
-    disabled,
-    selected,
-    highlighted
-  };
-  const rootProps = getItemProps({
-    active: highlighted,
-    selected
-  });
-  // With our custom `focusItemOnHover` implementation, this interferes with the logic and can
-  // cause the index state to be stuck when leaving the select popup.
-  rootProps.onFocus = undefined;
-  rootProps.id = undefined;
+  }, [hasRegistered, index, multiple, isItemEqualToValue, store, itemValue, selectedItemTextRef]);
   const lastKeyRef = React__namespace.useRef(null);
   const pointerTypeRef = React__namespace.useRef('mouse');
-  const didPointerDownRef = React__namespace.useRef(false);
+  const allowMouseSelectionRef = React__namespace.useRef(false);
   const {
     getButtonProps,
     buttonRef
@@ -1635,7 +1587,17 @@ const SelectItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namesp
     native: nativeButton,
     composite: true
   });
+  const state = {
+    disabled,
+    selected,
+    highlighted
+  };
   function commitSelection(event) {
+    // A forced-open select (`open`/`defaultOpen`) can still receive item activations even
+    // when the root is disabled or read-only, so guard the commit here too.
+    if (selectDisabled || readOnly) {
+      return;
+    }
     const selectedValue = store.state.value;
     if (multiple) {
       const currentValue = Array.isArray(selectedValue) ? selectedValue : [];
@@ -1646,39 +1608,13 @@ const SelectItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namesp
       setOpen(false, useButton.createChangeEventDetails(useButton.itemPress, event));
     }
   }
+  function resetDragMovement() {
+    selectionRef.current.dragY = 0;
+  }
   const defaultProps = {
     role: 'option',
     'aria-selected': selected,
-    tabIndex: highlighted ? 0 : -1,
-    onFocus() {
-      store.set('activeIndex', index);
-    },
-    onMouseEnter() {
-      if (!keyboardActiveRef.current && store.state.selectedIndex === null && highlightItemOnHover) {
-        store.set('activeIndex', index);
-      }
-    },
-    onMouseMove() {
-      if (highlightItemOnHover) {
-        store.set('activeIndex', index);
-      }
-    },
-    onMouseLeave(event) {
-      if (!highlightItemOnHover || keyboardActiveRef.current || isMouseWithinBounds(event)) {
-        return;
-      }
-      highlightTimeout.start(0, () => {
-        if (store.state.activeIndex === index) {
-          store.set('activeIndex', null);
-        }
-      });
-    },
-    onTouchStart() {
-      selectionRef.current = {
-        allowSelectedMouseUp: false,
-        allowUnselectedMouseUp: false
-      };
-    },
+    tabIndex: open && highlighted ? 0 : -1,
     onKeyDown(event) {
       lastKeyRef.current = event.key;
       store.set('activeIndex', index);
@@ -1687,13 +1623,24 @@ const SelectItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namesp
       }
     },
     onClick(event) {
-      didPointerDownRef.current = false;
+      const isMouseClick = event.type === 'click' && pointerTypeRef.current !== 'touch';
+      const clickPointerType = event.nativeEvent.pointerType;
+      const isVirtualMouseClick = isMouseClick && useButton.isVirtualClick(event.nativeEvent) && (
+      // Generic no-pointer `detail === 0` clicks stay tied to highlight state. Virtual
+      // clicks that carry browser pointer data, including an empty string from assistive
+      // technology, can activate unhighlighted items.
+      clickPointerType !== undefined || highlighted);
+      // With alignItemWithTrigger, opening can place an item under the cursor. Real mouse
+      // clicks must start on the item, while virtual clicks represent explicit keyboard or
+      // assistive technology activation.
+      const isInvalidMouseClick = isMouseClick && !isVirtualMouseClick && !allowMouseSelectionRef.current;
+      allowMouseSelectionRef.current = false;
 
       // Prevent double commit on {Enter}
       if (event.type === 'keydown' && lastKeyRef.current === null) {
         return;
       }
-      if (disabled || event.type === 'keydown' && lastKeyRef.current === ' ' && typingRef.current || pointerTypeRef.current !== 'touch' && !highlighted) {
+      if (disabled || event.type === 'keydown' && lastKeyRef.current === ' ' && typingRef.current || isInvalidMouseClick) {
         return;
       }
       lastKeyRef.current = null;
@@ -1702,40 +1649,52 @@ const SelectItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namesp
     onPointerEnter(event) {
       pointerTypeRef.current = event.pointerType;
     },
+    onPointerMove(event) {
+      if (event.pointerType === 'mouse' && event.buttons === 1) {
+        const selection = selectionRef.current;
+        selection.dragY += event.movementY;
+        if (selection.dragY ** 2 >= 64) {
+          selection.allowUnselectedMouseUp = true;
+        }
+      }
+    },
     onPointerDown(event) {
       pointerTypeRef.current = event.pointerType;
-      didPointerDownRef.current = true;
+      allowMouseSelectionRef.current = true;
+      resetDragMovement();
     },
     onMouseUp() {
-      if (disabled) {
+      resetDragMovement();
+      if (disabled || pointerTypeRef.current === 'touch') {
         return;
       }
 
-      // Regular click (pointerdown on this element) if didPointerDownRef is set, otherwise drag-to-select
-      if (didPointerDownRef.current) {
-        didPointerDownRef.current = false;
+      // Regular clicks are committed by the click event.
+      if (allowMouseSelectionRef.current) {
         return;
       }
       const disallowSelectedMouseUp = !selectionRef.current.allowSelectedMouseUp && selected;
       const disallowUnselectedMouseUp = !selectionRef.current.allowUnselectedMouseUp && !selected;
-      if (disallowSelectedMouseUp || disallowUnselectedMouseUp || pointerTypeRef.current !== 'touch' && !highlighted) {
+      if (disallowSelectedMouseUp || disallowUnselectedMouseUp) {
         return;
       }
+      allowMouseSelectionRef.current = true;
       itemRef.current?.click();
+      allowMouseSelectionRef.current = false;
     }
   };
   const element = useRenderElement.useRenderElement('div', componentProps, {
     ref: [buttonRef, forwardedRef, listItem.ref, itemRef],
     state,
-    props: [rootProps, defaultProps, elementProps, getButtonProps]
+    props: [itemProps, defaultProps, elementProps, getButtonProps]
   });
   const contextValue = React__namespace.useMemo(() => ({
     selected,
-    indexRef,
+    index,
     textRef,
     selectedByFocus,
     hasRegistered
-  }), [selected, indexRef, textRef, selectedByFocus, hasRegistered]);
+  }), [selected, index, textRef, selectedByFocus, hasRegistered]);
   return /*#__PURE__*/jsxRuntime.jsx(SelectItemContext.Provider, {
     value: contextValue,
     children: element
@@ -1760,13 +1719,13 @@ const SelectItemIndicator = /*#__PURE__*/React__namespace.forwardRef(function Se
   });
 });
 
-/** The core implementation of the indicator is split here to avoid paying the hooks
- * costs unless the element needs to be mounted. */
+// Split the core implementation to avoid paying the hook costs unless the element needs to mount.
 if (process.env.NODE_ENV !== "production") SelectItemIndicator.displayName = "SelectItemIndicator";
 const Inner = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef((componentProps, forwardedRef) => {
   const {
     render,
     className,
+    style,
     keepMounted,
     ...elementProps
   } = componentProps;
@@ -1812,28 +1771,32 @@ if (process.env.NODE_ENV !== "production") Inner.displayName = "Inner";
  */
 const SelectItemText = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function SelectItemText(componentProps, forwardedRef) {
   const {
-    indexRef,
+    index,
     textRef,
     selectedByFocus,
     hasRegistered
   } = useSelectItemContext();
   const {
+    firstItemTextRef,
     selectedItemTextRef
   } = useSelectRootContext();
   const {
-    className,
     render,
+    className,
+    style,
     ...elementProps
   } = componentProps;
   const localRef = React__namespace.useCallback(node => {
-    if (!node || !hasRegistered) {
+    if (!node) {
       return;
     }
-    const hasNoSelectedItemText = selectedItemTextRef.current === null || !selectedItemTextRef.current.isConnected;
-    if (selectedByFocus || hasNoSelectedItemText && indexRef.current === 0) {
+    if (hasRegistered && index === 0) {
+      firstItemTextRef.current = node;
+    }
+    if (hasRegistered && selectedByFocus) {
       selectedItemTextRef.current = node;
     }
-  }, [selectedItemTextRef, indexRef, selectedByFocus, hasRegistered]);
+  }, [firstItemTextRef, selectedItemTextRef, index, selectedByFocus, hasRegistered]);
   const element = useRenderElement.useRenderElement('div', componentProps, {
     ref: [localRef, forwardedRef, textRef],
     props: elementProps
@@ -1854,8 +1817,9 @@ function useSelectGroupContext() {
 
 const SelectGroup = /*#__PURE__*/React__namespace.forwardRef(function SelectGroup(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React__namespace.useState();
@@ -1885,8 +1849,9 @@ if (process.env.NODE_ENV !== "production") SelectGroup.displayName = "SelectGrou
  */
 const SelectGroupLabel = /*#__PURE__*/React__namespace.forwardRef(function SelectGroupLabel(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;
@@ -1920,5 +1885,6 @@ exports.SelectRoot = SelectRoot;
 exports.SelectTrigger = SelectTrigger;
 exports.SelectValue = SelectValue;
 exports.selectors = selectors;
+exports.usePreviousValue = usePreviousValue;
 exports.useSelectPositionerContext = useSelectPositionerContext;
 exports.useSelectRootContext = useSelectRootContext;