@base-ui/react 1.3.0 → 1.4.1

package/esm/select/root/SelectRoot.js

@@ -5,32 +5,34 @@ import { visuallyHidden, visuallyHiddenInput } from '@base-ui/utils/visuallyHidd
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { useOnFirstRender } from '@base-ui/utils/useOnFirstRender';
+import { usePreviousValue } from '@base-ui/utils/usePreviousValue';
 import { useControlled } from '@base-ui/utils/useControlled';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useStore, Store } from '@base-ui/utils/store';
+import { EMPTY_ARRAY, EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { useClick, useDismiss, useFloatingRootContext, useInteractions, useListNavigation, useTypeahead } from "../../floating-ui-react/index.js";
 import { SelectRootContext, SelectFloatingContext } from "./SelectRootContext.js";
-import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
-import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
-import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { useRegisterFieldControl } from "../../internals/field-register-control/useRegisterFieldControl.js";
+import { useLabelableId } from "../../internals/labelable-provider/useLabelableId.js";
+import { useTransitionStatus } from "../../internals/useTransitionStatus.js";
 import { selectors } from "../store.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
-import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
-import { useFormContext } from "../../form/FormContext.js";
-import { useField } from "../../field/useField.js";
-import { stringifyAsValue } from "../../utils/resolveValueLabel.js";
-import { EMPTY_ARRAY, EMPTY_OBJECT } from "../../utils/constants.js";
-import { defaultItemEquality, findItemIndex } from "../../utils/itemEquality.js";
-import { useValueChanged } from "../../utils/useValueChanged.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
+import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
+import { useFormContext } from "../../internals/form-context/FormContext.js";
+import { stringifyAsLabel, stringifyAsValue } from "../../internals/resolveValueLabel.js";
+import { defaultItemEquality, findItemIndex } from "../../internals/itemEquality.js";
+import { useValueChanged } from "../../internals/useValueChanged.js";
 import { useOpenInteractionType } from "../../utils/useOpenInteractionType.js";
+import { getMaxScrollOffset, normalizeScrollOffset } from "../../utils/scrollEdges.js";
 import { mergeProps } from "../../merge-props/index.js";
 
 /**
  * Groups all parts of the select.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
@@ -45,6 +47,7 @@ export function SelectRoot(props) {
     defaultOpen = false,
     onOpenChange,
     name: nameProp,
+    form,
     autoComplete,
     disabled: disabledProp = false,
     readOnly = false,
@@ -147,6 +150,8 @@ export function SelectRoot(props) {
   const selectedIndex = useStore(store, selectors.selectedIndex);
   const triggerElement = useStore(store, selectors.triggerElement);
   const positionerElement = useStore(store, selectors.positionerElement);
+  const previousOpenMethod = usePreviousValue(openMethod);
+  const renderedOpenMethod = openMethod ?? previousOpenMethod;
   const serializedValue = React.useMemo(() => {
     if (multiple && Array.isArray(value) && value.length === 0) {
       return '';
@@ -160,13 +165,11 @@ export function SelectRoot(props) {
     return stringifyAsValue(value, itemToStringValue);
   }, [multiple, value, itemToStringValue]);
   const controlRef = useValueAsRef(store.state.triggerElement);
-  useField({
+  const getFieldValue = useStableCallback(() => fieldStringValue);
+  useRegisterFieldControl(controlRef, {
     id: generatedId,
-    commit: validation.commit,
     value,
-    controlRef,
-    name,
-    getValue: () => fieldStringValue
+    getValue: getFieldValue
   });
   const initialValueRef = React.useRef(value);
   useIsoLayoutEffect(() => {
@@ -236,7 +239,10 @@ export function SelectRoot(props) {
   });
   const handleUnmount = useStableCallback(() => {
     setMounted(false);
-    store.set('activeIndex', null);
+    store.update({
+      activeIndex: null,
+      openMethod: null
+    });
     onOpenChangeComplete?.(false);
   });
   useOpenChangeComplete({
@@ -264,10 +270,10 @@ export 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 = getMaxScrollOffset(scroller.scrollHeight, scroller.clientHeight);
+    const scrollTop = normalizeScrollOffset(scroller.scrollTop, maxScrollTop);
+    const shouldShowUp = scrollTop > 0;
+    const shouldShowDown = scrollTop < maxScrollTop;
     if (store.state.scrollUpArrowVisible !== shouldShowUp) {
       store.set('scrollUpArrowVisible', shouldShowUp);
     }
@@ -303,9 +309,7 @@ export 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 = useTypeahead(floatingContext, {
     enabled: !readOnly && !disabled && (open || !multiple),
@@ -354,9 +358,9 @@ export function SelectRoot(props) {
       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, getFloatingProps, mergedTriggerProps, items, itemToStringLabel, itemToStringValue, isItemEqualToValue, renderedOpenMethod]);
   const contextValue = React.useMemo(() => ({
     store,
     name,
@@ -364,8 +368,6 @@ export function SelectRoot(props) {
     disabled,
     readOnly,
     multiple,
-    itemToStringLabel,
-    itemToStringValue,
     highlightItemOnHover,
     setValue,
     setOpen,
@@ -387,7 +389,7 @@ export function SelectRoot(props) {
     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, getItemProps, floatingContext.context.events, validation, onOpenChangeComplete, handleScrollArrowVisibility]);
   const ref = useMergedRefs(inputRef, validation.inputRef);
   const hasMultipleSelection = multiple && Array.isArray(value) && value.length > 0;
   const hiddenInputName = multiple ? undefined : name;
@@ -399,11 +401,12 @@ export function SelectRoot(props) {
       const currentSerializedValue = stringifyAsValue(v, itemToStringValue);
       return /*#__PURE__*/_jsx("input", {
         type: "hidden",
+        form: form,
         name: name,
         value: currentSerializedValue
       }, currentSerializedValue);
     });
-  }, [multiple, value, name, itemToStringValue]);
+  }, [multiple, value, form, name, itemToStringValue]);
   return /*#__PURE__*/_jsx(SelectRootContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/_jsxs(SelectFloatingContext.Provider, {
@@ -414,7 +417,6 @@ export function SelectRoot(props) {
             // 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
             });
           },
@@ -424,7 +426,7 @@ export function SelectRoot(props) {
             if (event.nativeEvent.defaultPrevented) {
               return;
             }
-            const nextValue = event.target.value;
+            const nextValue = event.currentTarget.value;
             const details = createChangeEventDetails(REASONS.none, event.nativeEvent);
             function handleChange() {
               if (multiple) {
@@ -434,8 +436,15 @@ export function SelectRoot(props) {
 
               // Handle single selection: match against registered values using serialization
               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;
@@ -453,6 +462,7 @@ export function SelectRoot(props) {
           }
         }),
         id: generatedId && hiddenInputName == null ? `${generatedId}-hidden-input` : undefined,
+        form: form,
         name: hiddenInputName,
         autoComplete: autoComplete,
         value: serializedValue,
@@ -462,7 +472,8 @@ export function SelectRoot(props) {
         ref: ref,
         style: name ? visuallyHiddenInput : visuallyHidden,
         tabIndex: -1,
-        "aria-hidden": true
+        "aria-hidden": true,
+        suppressHydrationWarning: true
       }), hiddenInputs]
     })
   });

package/esm/select/root/SelectRootContext.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type FloatingEvents } from "../../floating-ui-react/index.js";
 import type { SelectStore } from "../store.js";
 import type { UseFieldValidationReturnValue } from "../../field/root/useFieldValidation.js";
-import type { HTMLProps } from "../../utils/types.js";
+import type { HTMLProps } from "../../internals/types.js";
 import type { SelectRoot } from "./SelectRoot.js";
 export interface SelectRootContext {
   store: SelectStore;

package/esm/select/scroll-arrow/SelectScrollArrow.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import { Side } from "../../utils/useAnchorPositioning.js";
-import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
+import { type TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * @internal
  */

package/esm/select/scroll-arrow/SelectScrollArrow.js

@@ -6,9 +6,10 @@ import { useStore } from '@base-ui/utils/store';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useSelectRootContext } from "../root/SelectRootContext.js";
 import { useSelectPositionerContext } from "../positioner/SelectPositionerContext.js";
-import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
-import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useTransitionStatus } from "../../internals/useTransitionStatus.js";
+import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { getMaxScrollOffset, normalizeScrollOffset, SCROLL_EDGE_TOLERANCE_PX } from "../../utils/scrollEdges.js";
 import { selectors } from "../store.js";
 
 /**
@@ -18,10 +19,12 @@ export const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectSc
   const {
     render,
     className,
+    style,
     direction,
     keepMounted = false,
     ...elementProps
   } = componentProps;
+  const isUp = direction === 'up';
   const {
     store,
     popupRef,
@@ -34,14 +37,14 @@ export const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectSc
     scrollDownArrowRef,
     scrollUpArrowRef
   } = useSelectPositionerContext();
-  const visibleSelector = direction === 'up' ? selectors.scrollUpArrowVisible : selectors.scrollDownArrowVisible;
+  const visibleSelector = isUp ? selectors.scrollUpArrowVisible : selectors.scrollDownArrowVisible;
   const stateVisible = useStore(store, visibleSelector);
   const openMethod = useStore(store, selectors.openMethod);
 
   // Scroll arrows are disabled for touch modality as they are a hover-only element.
   const visible = stateVisible && openMethod !== 'touch';
   const timeout = useTimeout();
-  const scrollArrowRef = direction === 'up' ? scrollUpArrowRef : scrollDownArrowRef;
+  const scrollArrowRef = isUp ? scrollUpArrowRef : scrollDownArrowRef;
   const {
     transitionStatus,
     setMounted
@@ -75,7 +78,7 @@ export const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectSc
   };
   const defaultProps = {
     'aria-hidden': true,
-    children: direction === 'up' ? '▲' : '▼',
+    children: isUp ? '▲' : '▼',
     style: {
       position: 'absolute'
     },
@@ -91,72 +94,25 @@ export const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectSc
         }
         store.set('activeIndex', null);
         handleScrollArrowVisibility();
-        const isScrolledToTop = scroller.scrollTop === 0;
-        const isScrolledToBottom = Math.round(scroller.scrollTop + scroller.clientHeight) >= scroller.scrollHeight;
-        const list = listRef.current;
+        const maxScrollTop = getMaxScrollOffset(scroller.scrollHeight, scroller.clientHeight);
+        const scrollTop = normalizeScrollOffset(scroller.scrollTop, maxScrollTop);
+        const isScrolledToEdge = scrollTop === (isUp ? 0 : maxScrollTop);
+        const items = listRef.current;
+        if (scrollTop !== scroller.scrollTop) {
+          scroller.scrollTop = scrollTop;
+        }
 
         // Fallback when there are no items registered yet.
-        if (list.length === 0) {
-          if (direction === 'up') {
-            store.set('scrollUpArrowVisible', !isScrolledToTop);
-          } else {
-            store.set('scrollDownArrowVisible', !isScrolledToBottom);
-          }
+        if (items.length === 0) {
+          store.set(isUp ? 'scrollUpArrowVisible' : 'scrollDownArrowVisible', !isScrolledToEdge);
         }
-        if (direction === 'up' && isScrolledToTop || direction === 'down' && isScrolledToBottom) {
+        if (isScrolledToEdge) {
           timeout.clear();
           return;
         }
-        if ((store.state.listElement || popupRef.current) && listRef.current && listRef.current.length > 0) {
-          const items = listRef.current;
+        if (items.length > 0) {
           const scrollArrowHeight = scrollArrowRef.current?.offsetHeight || 0;
-          if (direction === 'up') {
-            let firstVisibleIndex = 0;
-            const scrollTop = scroller.scrollTop + scrollArrowHeight;
-            for (let i = 0; i < items.length; i += 1) {
-              const item = items[i];
-              if (item) {
-                const itemTop = item.offsetTop;
-                if (itemTop >= scrollTop) {
-                  firstVisibleIndex = i;
-                  break;
-                }
-              }
-            }
-            const targetIndex = Math.max(0, firstVisibleIndex - 1);
-            if (targetIndex < firstVisibleIndex) {
-              const targetItem = items[targetIndex];
-              if (targetItem) {
-                scroller.scrollTop = Math.max(0, targetItem.offsetTop - scrollArrowHeight);
-              }
-            } else {
-              // Already at the first item; ensure we reach the absolute top to account for group labels.
-              scroller.scrollTop = 0;
-            }
-          } else {
-            let lastVisibleIndex = items.length - 1;
-            const scrollBottom = scroller.scrollTop + scroller.clientHeight - scrollArrowHeight;
-            for (let i = 0; i < items.length; i += 1) {
-              const item = items[i];
-              if (item) {
-                const itemBottom = item.offsetTop + item.offsetHeight;
-                if (itemBottom > scrollBottom) {
-                  lastVisibleIndex = Math.max(0, i - 1);
-                  break;
-                }
-              }
-            }
-            const targetIndex = Math.min(items.length - 1, lastVisibleIndex + 1);
-            if (targetIndex > lastVisibleIndex) {
-              const targetItem = items[targetIndex];
-              if (targetItem) {
-                scroller.scrollTop = targetItem.offsetTop + targetItem.offsetHeight - scroller.clientHeight + scrollArrowHeight;
-              }
-            } else {
-              // Already at the last item; ensure we reach the true bottom.
-              scroller.scrollTop = scroller.scrollHeight - scroller.clientHeight;
-            }
-          }
+          scroller.scrollTop = getTargetScrollTop(items, isUp, scrollTop, scroller.clientHeight, scrollArrowHeight, maxScrollTop);
         }
         timeout.start(40, scrollNextItem);
       }
@@ -177,4 +133,32 @@ export const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectSc
   }
   return element;
 });
-if (process.env.NODE_ENV !== "production") SelectScrollArrow.displayName = "SelectScrollArrow";
+if (process.env.NODE_ENV !== "production") SelectScrollArrow.displayName = "SelectScrollArrow";
+function getTargetScrollTop(items, isUp, scrollTop, clientHeight, scrollArrowHeight, maxScrollTop) {
+  if (isUp) {
+    let firstVisibleIndex = 0;
+    const visibleTop = scrollTop + scrollArrowHeight - SCROLL_EDGE_TOLERANCE_PX;
+    for (let i = 0; i < items.length; i += 1) {
+      const item = items[i];
+      if (item && item.offsetTop >= visibleTop) {
+        firstVisibleIndex = i;
+        break;
+      }
+    }
+    const targetIndex = Math.max(0, firstVisibleIndex - 1);
+    const targetItem = items[targetIndex];
+    return targetIndex < firstVisibleIndex && targetItem ? normalizeScrollOffset(targetItem.offsetTop - scrollArrowHeight, maxScrollTop) : 0;
+  }
+  let lastVisibleIndex = items.length - 1;
+  const visibleBottom = scrollTop + clientHeight - scrollArrowHeight + SCROLL_EDGE_TOLERANCE_PX;
+  for (let i = 0; i < items.length; i += 1) {
+    const item = items[i];
+    if (item && item.offsetTop + item.offsetHeight > visibleBottom) {
+      lastVisibleIndex = Math.max(0, i - 1);
+      break;
+    }
+  }
+  const targetIndex = Math.min(items.length - 1, lastVisibleIndex + 1);
+  const targetItem = items[targetIndex];
+  return targetIndex > lastVisibleIndex && targetItem ? normalizeScrollOffset(targetItem.offsetTop + targetItem.offsetHeight - clientHeight + scrollArrowHeight, maxScrollTop) : maxScrollTop;
+}

package/esm/select/scroll-down-arrow/SelectScrollDownArrow.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * An element that scrolls the select popup down when hovered. Does not render when using touch input.
  * Renders a `<div>` element.

package/esm/select/scroll-up-arrow/SelectScrollUpArrow.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * An element that scrolls the select popup up when hovered. Does not render when using touch input.
  * Renders a `<div>` element.

package/esm/select/store.d.ts

@@ -1,8 +1,8 @@
 import { Store } from '@base-ui/utils/store';
 import { type InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
-import type { TransitionStatus } from "../utils/useTransitionStatus.js";
-import type { HTMLProps } from "../utils/types.js";
-import { type Group } from "../utils/resolveValueLabel.js";
+import type { TransitionStatus } from "../internals/useTransitionStatus.js";
+import type { HTMLProps } from "../internals/types.js";
+import { type Group } from "../internals/resolveValueLabel.js";
 export type State = {
   id: string | undefined;
   labelId: string | undefined;

package/esm/select/store.js

@@ -1,6 +1,6 @@
 import { createSelector } from '@base-ui/utils/store';
-import { compareItemEquality } from "../utils/itemEquality.js";
-import { hasNullItemLabel, stringifyAsValue } from "../utils/resolveValueLabel.js";
+import { compareItemEquality } from "../internals/itemEquality.js";
+import { hasNullItemLabel, stringifyAsValue } from "../internals/resolveValueLabel.js";
 export const selectors = {
   id: createSelector(state => state.id),
   labelId: createSelector(state => state.labelId),

package/esm/select/trigger/SelectTrigger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+import { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 import type { FieldRootState } from "../../field/root/FieldRoot.js";
 /**
  * A button that opens the select popup.

package/esm/select/trigger/SelectTrigger.js

@@ -8,19 +8,19 @@ import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useStore } from '@base-ui/utils/store';
 import { useSelectRootContext } from "../root/SelectRootContext.js";
-import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
-import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.js";
 import { pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.js";
-import { fieldValidityMapping } from "../../field/utils/constants.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { fieldValidityMapping } from "../../internals/field-constants/constants.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { selectors } from "../store.js";
 import { getPseudoElementBounds } from "../../utils/getPseudoElementBounds.js";
 import { contains, getFloatingFocusElement } from "../../floating-ui-react/utils.js";
 import { mergeProps } from "../../merge-props/index.js";
-import { useButton } from "../../use-button/index.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
-import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
+import { useButton } from "../../internals/use-button/index.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
+import { useLabelableId } from "../../internals/labelable-provider/useLabelableId.js";
 import { resolveAriaLabelledBy } from "../../utils/resolveAriaLabelledBy.js";
 const BOUNDARY_OFFSET = 2;
 const SELECTED_DELAY = 400;
@@ -44,6 +44,7 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
     id: idProp,
     disabled: disabledProp = false,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/select/trigger/SelectTriggerDataAttributes.d.ts

@@ -20,11 +20,11 @@ export declare enum SelectTriggerDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the select is in valid state (when wrapped in Field.Root).
+   * Present when the select is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the select is in invalid state (when wrapped in Field.Root).
+   * Present when the select is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/esm/select/trigger/SelectTriggerDataAttributes.js

@@ -21,11 +21,11 @@ export let SelectTriggerDataAttributes = function (SelectTriggerDataAttributes)
    */
   SelectTriggerDataAttributes["required"] = "data-required";
   /**
-   * Present when the select is in valid state (when wrapped in Field.Root).
+   * Present when the select is in a valid state (when wrapped in Field.Root).
    */
   SelectTriggerDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the select is in invalid state (when wrapped in Field.Root).
+   * Present when the select is in an invalid state (when wrapped in Field.Root).
    */
   SelectTriggerDataAttributes["invalid"] = "data-invalid";
   /**

package/esm/select/value/SelectValue.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A text label of the currently selected item.
  * Renders a `<span>` element.

package/esm/select/value/SelectValue.js

@@ -2,9 +2,9 @@
 
 import * as React from 'react';
 import { useStore } from '@base-ui/utils/store';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useSelectRootContext } from "../root/SelectRootContext.js";
-import { resolveMultipleLabels, resolveSelectedLabel } from "../../utils/resolveValueLabel.js";
+import { resolveMultipleLabels, resolveSelectedLabel } from "../../internals/resolveValueLabel.js";
 import { selectors } from "../store.js";
 const stateAttributesMapping = {
   value: () => null
@@ -22,6 +22,7 @@ export const SelectValue = /*#__PURE__*/React.forwardRef(function SelectValue(co
     render,
     children: childrenProp,
     placeholder,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/separator/Separator.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, Orientation } from "../utils/types.js";
+import type { BaseUIComponentProps, Orientation } from "../internals/types.js";
 /**
  * A separator element accessible to screen readers.
  * Renders a `<div>` element.

package/esm/separator/Separator.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useRenderElement } from "../utils/useRenderElement.js";
+import { useRenderElement } from "../internals/useRenderElement.js";
 
 /**
  * A separator element accessible to screen readers.
@@ -14,6 +14,7 @@ export const Separator = /*#__PURE__*/React.forwardRef(function SeparatorCompone
     className,
     render,
     orientation = 'horizontal',
+    style,
     ...elementProps
   } = componentProps;
   const state = {

package/esm/separator/SeparatorDataAttributes.d.ts

@@ -0,0 +1,7 @@
+export declare enum SeparatorDataAttributes {
+  /**
+   * Indicates the orientation of the separator.
+   * @type {'horizontal' | 'vertical'}
+   */
+  orientation = "data-orientation",
+}

package/esm/separator/SeparatorDataAttributes.js

@@ -0,0 +1,8 @@
+export let SeparatorDataAttributes = /*#__PURE__*/function (SeparatorDataAttributes) {
+  /**
+   * Indicates the orientation of the separator.
+   * @type {'horizontal' | 'vertical'}
+   */
+  SeparatorDataAttributes["orientation"] = "data-orientation";
+  return SeparatorDataAttributes;
+}({});

package/esm/slider/control/SliderControl.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { SliderRootState } from "../root/SliderRoot.js";
 /**
  * The clickable, interactive part of the slider.