@base-ui/react 1.2.0 → 1.4.0

package/esm/select/root/SelectRoot.js

@@ -5,6 +5,7 @@ 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';
@@ -13,6 +14,7 @@ import { useStore, Store } from '@base-ui/utils/store';
 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 { useRegisterFieldControl } from "../../field/root/useRegisterFieldControl.js";
 import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
 import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
 import { selectors } from "../store.js";
@@ -20,17 +22,17 @@ import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.j
 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 { stringifyAsLabel, 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 { 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,
@@ -115,11 +118,11 @@ export function SelectRoot(props) {
   } = useTransitionStatus(open);
   const {
     openMethod,
-    triggerProps: interactionTypeProps,
-    reset: resetOpenInteractionType
+    triggerProps: interactionTypeProps
   } = useOpenInteractionType(open);
   const store = useRefWithInit(() => new Store({
     id: generatedId,
+    labelId: undefined,
     modal,
     multiple,
     itemToStringLabel,
@@ -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,8 +239,10 @@ export function SelectRoot(props) {
   });
   const handleUnmount = useStableCallback(() => {
     setMounted(false);
-    store.set('activeIndex', null);
-    resetOpenInteractionType();
+    store.update({
+      activeIndex: null,
+      openMethod: null
+    });
     onOpenChangeComplete?.(false);
   });
   useOpenChangeComplete({
@@ -265,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);
     }
@@ -304,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),
@@ -321,8 +324,6 @@ export function SelectRoot(props) {
       }
     },
     onTypingChange(typing) {
-      // FIXME: Floating UI doesn't support allowing space to select an item while the popup is
-      // closed and the trigger isn't a native <button>.
       typingRef.current = typing;
     }
   });
@@ -357,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,
@@ -393,6 +394,7 @@ export function SelectRoot(props) {
   }), [store, name, required, disabled, readOnly, multiple, itemToStringLabel, itemToStringValue, 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;
   const hiddenInputs = React.useMemo(() => {
     if (!multiple || !Array.isArray(value) || !name) {
       return null;
@@ -401,11 +403,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, {
@@ -416,7 +419,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
             });
           },
@@ -426,7 +428,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) {
@@ -436,8 +438,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;
@@ -454,7 +463,9 @@ export function SelectRoot(props) {
             queueMicrotask(handleChange);
           }
         }),
-        name: multiple ? undefined : name,
+        id: generatedId && hiddenInputName == null ? `${generatedId}-hidden-input` : undefined,
+        form: form,
+        name: hiddenInputName,
         autoComplete: autoComplete,
         value: serializedValue,
         disabled: disabled,
@@ -463,7 +474,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/scroll-arrow/SelectScrollArrow.d.ts

@@ -7,12 +7,24 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  */
 export declare const SelectScrollArrow: React.ForwardRefExoticComponent<Omit<SelectScrollArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectScrollArrowState {
+  /**
+   * The direction of the element.
+   */
   direction: 'up' | 'down';
+  /**
+   * Whether the element is visible.
+   */
   visible: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side | 'none';
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface SelectScrollArrowProps extends BaseUIComponentProps<'div', SelectScrollArrow.State> {
+export interface SelectScrollArrowProps extends BaseUIComponentProps<'div', SelectScrollArrowState> {
   direction: 'up' | 'down';
   /**
    * Whether to keep the HTML element in the DOM while the select popup is not scrollable.

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

@@ -9,6 +9,7 @@ import { useSelectPositionerContext } from "../positioner/SelectPositionerContex
 import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
 import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
 import { useRenderElement } from "../../utils/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

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const SelectScrollDownArrow: React.ForwardRefExoticComponent<Omit<SelectScrollDownArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectScrollDownArrowState {}
-export interface SelectScrollDownArrowProps extends BaseUIComponentProps<'div', SelectScrollDownArrow.State> {
+export interface SelectScrollDownArrowProps extends BaseUIComponentProps<'div', SelectScrollDownArrowState> {
   /**
    * Whether to keep the HTML element in the DOM while the select popup is not scrollable.
    * @default false

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

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const SelectScrollUpArrow: React.ForwardRefExoticComponent<Omit<SelectScrollUpArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectScrollUpArrowState {}
-export interface SelectScrollUpArrowProps extends BaseUIComponentProps<'div', SelectScrollUpArrow.State> {
+export interface SelectScrollUpArrowProps extends BaseUIComponentProps<'div', SelectScrollUpArrowState> {
   /**
    * Whether to keep the HTML element in the DOM while the select popup is not scrollable.
    * @default false

package/esm/select/store.d.ts

@@ -2,14 +2,16 @@ 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";
 export type State = {
   id: string | undefined;
+  labelId: string | undefined;
   modal: boolean;
   multiple: boolean;
   items: Record<string, React.ReactNode> | ReadonlyArray<{
     label: React.ReactNode;
     value: any;
-  }> | undefined;
+  }> | ReadonlyArray<Group<any>> | undefined;
   itemToStringLabel: ((item: any) => string) | undefined;
   itemToStringValue: ((item: any) => string) | undefined;
   isItemEqualToValue: (itemValue: any, selectedValue: any) => boolean;
@@ -33,9 +35,10 @@ export type State = {
 export type SelectStore = Store<State>;
 export declare const selectors: {
   id: (state: State) => string | undefined;
+  labelId: (state: State) => string | undefined;
   modal: (state: State) => boolean;
   multiple: (state: State) => boolean;
-  items: (state: State) => Record<string, import("react").ReactNode> | readonly {
+  items: (state: State) => readonly Group<any>[] | Record<string, import("react").ReactNode> | readonly {
     label: React.ReactNode;
     value: any;
   }[] | undefined;

package/esm/select/store.js

@@ -3,6 +3,7 @@ import { compareItemEquality } from "../utils/itemEquality.js";
 import { hasNullItemLabel, stringifyAsValue } from "../utils/resolveValueLabel.js";
 export const selectors = {
   id: createSelector(state => state.id),
+  labelId: createSelector(state => state.labelId),
   modal: createSelector(state => state.modal),
   multiple: createSelector(state => state.multiple),
   items: createSelector(state => state.items),

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
-import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { FieldRootState } from "../../field/root/FieldRoot.js";
 /**
  * A button that opens the select popup.
  * Renders a `<button>` element.
@@ -8,7 +8,7 @@ import type { FieldRoot } from "../../field/root/FieldRoot.js";
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
 export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export interface SelectTriggerState extends FieldRoot.State {
+export interface SelectTriggerState extends FieldRootState {
   /**
    * Whether the select popup is currently open.
    */
@@ -26,9 +26,11 @@ export interface SelectTriggerState extends FieldRoot.State {
    */
   placeholder: boolean;
 }
-export interface SelectTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', SelectTrigger.State> {
+export interface SelectTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', SelectTriggerState> {
   children?: React.ReactNode;
-  /** Whether the component should ignore user interaction. */
+  /**
+   * Whether the component should ignore user interaction.
+   */
   disabled?: boolean | undefined;
 }
 export declare namespace SelectTrigger {

package/esm/select/trigger/SelectTrigger.js

@@ -21,6 +21,7 @@ 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 { resolveAriaLabelledBy } from "../../utils/resolveAriaLabelledBy.js";
 const BOUNDARY_OFFSET = 2;
 const SELECTED_DELAY = 400;
 const UNSELECTED_DELAY = 200;
@@ -43,6 +44,7 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
     id: idProp,
     disabled: disabledProp = false,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -53,7 +55,7 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
     disabled: fieldDisabled
   } = useFieldRootContext();
   const {
-    labelId
+    labelId: fieldLabelId
   } = useLabelableContext();
   const {
     store,
@@ -73,10 +75,12 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
   const positionerElement = useStore(store, selectors.positionerElement);
   const listElement = useStore(store, selectors.listElement);
   const rootId = useStore(store, selectors.id);
+  const selectLabelId = useStore(store, selectors.labelId);
   const hasSelectedValue = useStore(store, selectors.hasSelectedValue);
   const shouldCheckNullItemLabel = !hasSelectedValue && open;
   const hasNullItemLabel = useStore(store, selectors.hasNullItemLabel, shouldCheckNullItemLabel);
   const id = idProp ?? rootId;
+  const ariaLabelledBy = resolveAriaLabelledBy(fieldLabelId, selectLabelId);
   useLabelableId({
     id
   });
@@ -142,7 +146,7 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
     'aria-expanded': open ? 'true' : 'false',
     'aria-haspopup': 'listbox',
     'aria-controls': open ? ariaControlsId : undefined,
-    'aria-labelledby': labelId,
+    'aria-labelledby': ariaLabelledBy,
     'aria-readonly': readOnly || undefined,
     'aria-required': required || undefined,
     tabIndex: disabled ? -1 : 0,

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

@@ -17,7 +17,7 @@ export interface SelectValueState {
    */
   placeholder: boolean;
 }
-export interface SelectValueProps extends Omit<BaseUIComponentProps<'span', SelectValue.State>, 'children'> {
+export interface SelectValueProps extends Omit<BaseUIComponentProps<'span', SelectValueState>, 'children'> {
   /**
    * Accepts a function that returns a `ReactNode` to format the selected value.
    * @example

package/esm/select/value/SelectValue.js

@@ -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

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps, Orientation } from "../utils/types.js";
  * Documentation: [Base UI Separator](https://base-ui.com/react/components/separator)
  */
 export declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface SeparatorProps extends BaseUIComponentProps<'div', Separator.State> {
+export interface SeparatorProps extends BaseUIComponentProps<'div', SeparatorState> {
   /**
    * The orientation of the separator.
    * @default 'horizontal'

package/esm/separator/Separator.js

@@ -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,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { SliderRoot } from "../root/SliderRoot.js";
+import type { SliderRootState } from "../root/SliderRoot.js";
 /**
  * The clickable, interactive part of the slider.
  * Renders a `<div>` element.
@@ -8,8 +8,9 @@ import type { SliderRoot } from "../root/SliderRoot.js";
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
 export declare const SliderControl: React.ForwardRefExoticComponent<Omit<SliderControlProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface SliderControlProps extends BaseUIComponentProps<'div', SliderRoot.State> {}
+export interface SliderControlState extends SliderRootState {}
+export interface SliderControlProps extends BaseUIComponentProps<'div', SliderControlState> {}
 export declare namespace SliderControl {
-  type State = SliderRoot.State;
+  type State = SliderControlState;
   type Props = SliderControlProps;
 }