@base-ui/react 1.2.0 → 1.4.0

package/esm/scroll-area/corner/ScrollAreaCorner.js

@@ -14,6 +14,7 @@ export const ScrollAreaCorner = /*#__PURE__*/React.forwardRef(function ScrollAre
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/scroll-area/root/ScrollAreaRoot.d.ts

@@ -31,35 +31,51 @@ export type Coords = typeof DEFAULT_COORDS;
  */
 export declare const ScrollAreaRoot: React.ForwardRefExoticComponent<Omit<ScrollAreaRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ScrollAreaRootState {
-  /** Whether the scroll area is being scrolled. */
+  /**
+   * Whether the scroll area is being scrolled.
+   */
   scrolling: boolean;
-  /** Whether horizontal overflow is present. */
+  /**
+   * Whether horizontal overflow is present.
+   */
   hasOverflowX: boolean;
-  /** Whether vertical overflow is present. */
+  /**
+   * Whether vertical overflow is present.
+   */
   hasOverflowY: boolean;
-  /** Whether there is overflow on the inline start side for the horizontal axis. */
+  /**
+   * Whether there is overflow on the inline start side for the horizontal axis.
+   */
   overflowXStart: boolean;
-  /** Whether there is overflow on the inline end side for the horizontal axis. */
+  /**
+   * Whether there is overflow on the inline end side for the horizontal axis.
+   */
   overflowXEnd: boolean;
-  /** Whether there is overflow on the block start side. */
+  /**
+   * Whether there is overflow on the block start side.
+   */
   overflowYStart: boolean;
-  /** Whether there is overflow on the block end side. */
+  /**
+   * Whether there is overflow on the block end side.
+   */
   overflowYEnd: boolean;
-  /** Whether the scrollbar corner is hidden. */
+  /**
+   * Whether the scrollbar corner is hidden.
+   */
   cornerHidden: boolean;
 }
-export interface ScrollAreaRootProps extends BaseUIComponentProps<'div', ScrollAreaRoot.State> {
+export interface ScrollAreaRootProps extends BaseUIComponentProps<'div', ScrollAreaRootState> {
   /**
    * The threshold in pixels that must be passed before the overflow edge attributes are applied.
    * Accepts a single number for all edges or an object to configure them individually.
    * @default 0
    */
-  overflowEdgeThreshold?: (number | Partial<{
+  overflowEdgeThreshold?: number | Partial<{
     xStart: number;
     xEnd: number;
     yStart: number;
     yEnd: number;
-  }>) | undefined;
+  }> | undefined;
 }
 export declare namespace ScrollAreaRoot {
   type State = ScrollAreaRootState;

package/esm/scroll-area/root/ScrollAreaRoot.js

@@ -30,9 +30,9 @@ const DEFAULT_OVERFLOW_EDGES = {
   yEnd: false
 };
 const DEFAULT_HIDDEN_STATE = {
-  x: false,
-  y: false,
-  corner: false
+  x: true,
+  y: true,
+  corner: true
 };
 /**
  * Groups all parts of the scroll area.
@@ -45,6 +45,7 @@ export const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaR
     render,
     className,
     overflowEdgeThreshold: overflowEdgeThresholdProp,
+    style,
     ...elementProps
   } = componentProps;
   const overflowEdgeThreshold = normalizeOverflowEdgeThreshold(overflowEdgeThresholdProp);
@@ -59,6 +60,7 @@ export const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaR
   const [scrollingX, setScrollingX] = React.useState(false);
   const [scrollingY, setScrollingY] = React.useState(false);
   const [touchModality, setTouchModality] = React.useState(false);
+  const [hasMeasuredScrollbar, setHasMeasuredScrollbar] = React.useState(false);
   const [cornerSize, setCornerSize] = React.useState(DEFAULT_SIZE);
   const [thumbSize, setThumbSize] = React.useState(DEFAULT_SIZE);
   const [overflowEdges, setOverflowEdges] = React.useState(DEFAULT_OVERFLOW_EDGES);
@@ -210,6 +212,8 @@ export const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaR
     setCornerSize,
     thumbSize,
     setThumbSize,
+    hasMeasuredScrollbar,
+    setHasMeasuredScrollbar,
     touchModality,
     cornerRef,
     scrollingX,
@@ -231,7 +235,7 @@ export const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaR
     setOverflowEdges,
     viewportState: state,
     overflowEdgeThreshold
-  }), [handlePointerDown, handlePointerMove, handlePointerUp, handleScroll, cornerSize, thumbSize, touchModality, scrollingX, setScrollingX, scrollingY, setScrollingY, hovering, setHovering, rootId, hiddenState, overflowEdges, state, overflowEdgeThreshold]);
+  }), [handlePointerDown, handlePointerMove, handlePointerUp, handleScroll, cornerSize, thumbSize, hasMeasuredScrollbar, touchModality, scrollingX, setScrollingX, scrollingY, setScrollingY, hovering, setHovering, rootId, hiddenState, overflowEdges, state, overflowEdgeThreshold]);
   return /*#__PURE__*/_jsxs(ScrollAreaRootContext.Provider, {
     value: contextValue,
     children: [!disableStyleElements && styleDisableScrollbar.getElement(nonce), element]

package/esm/scroll-area/root/ScrollAreaRootContext.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import type { Coords, HiddenState, OverflowEdges, ScrollAreaRoot, Size } from "./ScrollAreaRoot.js";
+import type { Coords, HiddenState, OverflowEdges, Size, ScrollAreaRootState } from "./ScrollAreaRoot.js";
 export interface ScrollAreaRootContext {
   cornerSize: Size;
   setCornerSize: React.Dispatch<React.SetStateAction<Size>>;
   thumbSize: Size;
   setThumbSize: React.Dispatch<React.SetStateAction<Size>>;
+  hasMeasuredScrollbar: boolean;
+  setHasMeasuredScrollbar: React.Dispatch<React.SetStateAction<boolean>>;
   touchModality: boolean;
   hovering: boolean;
   setHovering: React.Dispatch<React.SetStateAction<boolean>>;
@@ -28,7 +30,7 @@ export interface ScrollAreaRootContext {
   setHiddenState: React.Dispatch<React.SetStateAction<HiddenState>>;
   overflowEdges: OverflowEdges;
   setOverflowEdges: React.Dispatch<React.SetStateAction<OverflowEdges>>;
-  viewportState: ScrollAreaRoot.State;
+  viewportState: ScrollAreaRootState;
   overflowEdgeThreshold: {
     xStart: number;
     xEnd: number;

package/esm/scroll-area/root/stateAttributes.d.ts

@@ -1,3 +1,3 @@
 import type { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
-import type { ScrollAreaRoot } from "./ScrollAreaRoot.js";
-export declare const scrollAreaStateAttributesMapping: StateAttributesMapping<ScrollAreaRoot.State>;
+import type { ScrollAreaRootState } from "./ScrollAreaRoot.js";
+export declare const scrollAreaStateAttributesMapping: StateAttributesMapping<ScrollAreaRootState>;

package/esm/scroll-area/scrollbar/ScrollAreaScrollbar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { ScrollAreaRoot } from "../root/ScrollAreaRoot.js";
+import type { ScrollAreaRootState } from "../root/ScrollAreaRoot.js";
 /**
  * A vertical or horizontal scrollbar for the scroll area.
  * Renders a `<div>` element.
@@ -8,22 +8,28 @@ import type { ScrollAreaRoot } from "../root/ScrollAreaRoot.js";
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
  */
 export declare const ScrollAreaScrollbar: React.ForwardRefExoticComponent<Omit<ScrollAreaScrollbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface ScrollAreaScrollbarState extends ScrollAreaRoot.State {
-  /** Whether the scroll area is being hovered. */
+export interface ScrollAreaScrollbarState extends ScrollAreaRootState {
+  /**
+   * Whether the scroll area is being hovered.
+   */
   hovering: boolean;
-  /** Whether the scroll area is being scrolled. */
+  /**
+   * Whether the scroll area is being scrolled.
+   */
   scrolling: boolean;
-  /** The orientation of the scrollbar. */
+  /**
+   * The orientation of the scrollbar.
+   */
   orientation: 'vertical' | 'horizontal';
 }
-export interface ScrollAreaScrollbarProps extends BaseUIComponentProps<'div', ScrollAreaScrollbar.State> {
+export interface ScrollAreaScrollbarProps extends BaseUIComponentProps<'div', ScrollAreaScrollbarState> {
   /**
    * Whether the scrollbar controls vertical or horizontal scroll.
    * @default 'vertical'
    */
-  orientation?: ('vertical' | 'horizontal') | undefined;
+  orientation?: 'vertical' | 'horizontal' | undefined;
   /**
-   * Whether to keep the HTML element in the DOM when the viewport isn’t scrollable.
+   * Whether to keep the HTML element in the DOM when the viewport isn't scrollable.
    * @default false
    */
   keepMounted?: boolean | undefined;

package/esm/scroll-area/scrollbar/ScrollAreaScrollbar.js

@@ -1,6 +1,8 @@
 'use client';
 
 import * as React from 'react';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { contains, getTarget } from "../../floating-ui-react/utils.js";
 import { useScrollAreaRootContext } from "../root/ScrollAreaRootContext.js";
 import { ScrollAreaScrollbarContext } from "./ScrollAreaScrollbarContext.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
@@ -22,6 +24,7 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
     className,
     orientation = 'vertical',
     keepMounted = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -38,7 +41,8 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
     handlePointerDown,
     handlePointerUp,
     rootId,
-    thumbSize
+    thumbSize,
+    hasMeasuredScrollbar
   } = useScrollAreaRootContext();
   const state = {
     hovering,
@@ -56,6 +60,7 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
     cornerHidden: hiddenState.corner
   };
   const direction = useDirection();
+  const hideTrackUntilMeasured = !hasMeasuredScrollbar && !keepMounted;
   React.useEffect(() => {
     const viewportEl = viewportRef.current;
     const scrollbarEl = orientation === 'vertical' ? scrollbarYRef.current : scrollbarXRef.current;
@@ -87,12 +92,9 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
         viewportEl.scrollLeft += event.deltaX;
       }
     }
-    scrollbarEl.addEventListener('wheel', handleWheel, {
+    return addEventListener(scrollbarEl, 'wheel', handleWheel, {
       passive: false
     });
-    return () => {
-      scrollbarEl.removeEventListener('wheel', handleWheel);
-    };
   }, [orientation, scrollbarXRef, scrollbarYRef, viewportRef]);
   const props = {
     ...(rootId && {
@@ -102,9 +104,12 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
       if (event.button !== 0) {
         return;
       }
+      const target = getTarget(event.nativeEvent);
+      const thumb = orientation === 'vertical' ? thumbYRef.current : thumbXRef.current;
 
-      // Ignore clicks on thumb
-      if (event.currentTarget !== event.target) {
+      // Ignore clicks on thumb, including cases where React retargets the
+      // synthetic event to the track host across a shadow boundary.
+      if (thumb && contains(thumb, target)) {
         return;
       }
       if (!viewportRef.current) {
@@ -157,6 +162,7 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
       touchAction: 'none',
       WebkitUserSelect: 'none',
       userSelect: 'none',
+      visibility: hideTrackUntilMeasured ? 'hidden' : undefined,
       ...(orientation === 'vertical' && {
         top: 0,
         bottom: `var(${ScrollAreaRootCssVars.scrollAreaCornerHeight})`,

package/esm/scroll-area/thumb/ScrollAreaThumb.d.ts

@@ -8,9 +8,12 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const ScrollAreaThumb: React.ForwardRefExoticComponent<Omit<ScrollAreaThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ScrollAreaThumbState {
-  orientation?: ('horizontal' | 'vertical') | undefined;
+  /**
+   * The component orientation.
+   */
+  orientation?: 'horizontal' | 'vertical' | undefined;
 }
-export interface ScrollAreaThumbProps extends BaseUIComponentProps<'div', ScrollAreaThumb.State> {}
+export interface ScrollAreaThumbProps extends BaseUIComponentProps<'div', ScrollAreaThumbState> {}
 export declare namespace ScrollAreaThumb {
   type State = ScrollAreaThumbState;
   type Props = ScrollAreaThumbProps;

package/esm/scroll-area/thumb/ScrollAreaThumb.js

@@ -16,6 +16,7 @@ export const ScrollAreaThumb = /*#__PURE__*/React.forwardRef(function ScrollArea
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -25,7 +26,8 @@ export const ScrollAreaThumb = /*#__PURE__*/React.forwardRef(function ScrollArea
     handlePointerMove,
     handlePointerUp,
     setScrollingX,
-    setScrollingY
+    setScrollingY,
+    hasMeasuredScrollbar
   } = useScrollAreaRootContext();
   const {
     orientation
@@ -49,6 +51,7 @@ export const ScrollAreaThumb = /*#__PURE__*/React.forwardRef(function ScrollArea
         handlePointerUp(event);
       },
       style: {
+        visibility: hasMeasuredScrollbar ? undefined : 'hidden',
         ...(orientation === 'vertical' && {
           height: `var(${ScrollAreaScrollbarCssVars.scrollAreaThumbHeight})`
         }),

package/esm/scroll-area/viewport/ScrollAreaViewport.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { ScrollAreaRoot } from "../root/ScrollAreaRoot.js";
+import type { ScrollAreaRootState } from "../root/ScrollAreaRoot.js";
 /**
  * The actual scrollable container of the scroll area.
  * Renders a `<div>` element.
@@ -8,8 +8,8 @@ import type { ScrollAreaRoot } from "../root/ScrollAreaRoot.js";
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
  */
 export declare const ScrollAreaViewport: React.ForwardRefExoticComponent<Omit<ScrollAreaViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface ScrollAreaViewportProps extends BaseUIComponentProps<'div', ScrollAreaViewport.State> {}
-export interface ScrollAreaViewportState extends ScrollAreaRoot.State {}
+export interface ScrollAreaViewportProps extends BaseUIComponentProps<'div', ScrollAreaViewportState> {}
+export interface ScrollAreaViewportState extends ScrollAreaRootState {}
 export declare namespace ScrollAreaViewport {
   type Props = ScrollAreaViewportProps;
   type State = ScrollAreaViewportState;

package/esm/scroll-area/viewport/ScrollAreaViewport.js

@@ -13,16 +13,14 @@ import { getOffset } from "../utils/getOffset.js";
 import { MIN_THUMB_SIZE } from "../constants.js";
 import { clamp } from "../../utils/clamp.js";
 import { styleDisableScrollbar } from "../../utils/styles.js";
-import { onVisible } from "../utils/onVisible.js";
 import { scrollAreaStateAttributesMapping } from "../root/stateAttributes.js";
 import { ScrollAreaViewportCssVars } from "./ScrollAreaViewportCssVars.js";
-import { normalizeScrollOffset } from "../utils/scrollEdges.js";
+import { normalizeScrollOffset } from "../../utils/scrollEdges.js";
 
 // Module-level flag to ensure we only register the CSS properties once,
 // regardless of how many Scroll Area components are mounted.
 import { jsx as _jsx } from "react/jsx-runtime";
 let scrollAreaOverflowVarsRegistered = false;
-
 /**
  * Removes inheritance of the scroll area overflow CSS variables, which
  * improves rendering performance in complex scroll areas with deep subtrees.
@@ -65,6 +63,7 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -80,6 +79,7 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
     rootId,
     setHiddenState,
     hiddenState,
+    setHasMeasuredScrollbar,
     handleScroll,
     setHovering,
     setOverflowEdges,
@@ -90,6 +90,7 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
   } = useScrollAreaRootContext();
   const direction = useDirection();
   const programmaticScrollRef = React.useRef(true);
+  const lastMeasuredViewportMetricsRef = React.useRef([NaN, NaN, NaN, NaN]);
   const scrollEndTimeout = useTimeout();
   const waitForAnimationsTimeout = useTimeout();
   const computeThumbPosition = useStableCallback(() => {
@@ -108,11 +109,21 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
     const viewportWidth = viewportEl.clientWidth;
     const scrollTop = viewportEl.scrollTop;
     const scrollLeft = viewportEl.scrollLeft;
+    const lastMeasuredViewportMetrics = lastMeasuredViewportMetricsRef.current;
+    const isFirstMeasurement = Number.isNaN(lastMeasuredViewportMetrics[0]);
+    lastMeasuredViewportMetrics[0] = viewportHeight;
+    lastMeasuredViewportMetrics[1] = scrollableContentHeight;
+    lastMeasuredViewportMetrics[2] = viewportWidth;
+    lastMeasuredViewportMetrics[3] = scrollableContentWidth;
+    if (isFirstMeasurement) {
+      setHasMeasuredScrollbar(true);
+    }
     if (scrollableContentHeight === 0 || scrollableContentWidth === 0) {
       return;
     }
-    const scrollbarYHidden = viewportHeight >= scrollableContentHeight;
-    const scrollbarXHidden = viewportWidth >= scrollableContentWidth;
+    const nextHiddenState = getHiddenState(viewportEl);
+    const scrollbarYHidden = nextHiddenState.y;
+    const scrollbarXHidden = nextHiddenState.x;
     const ratioX = viewportWidth / scrollableContentWidth;
     const ratioY = viewportHeight / scrollableContentHeight;
     const maxScrollLeft = Math.max(0, scrollableContentWidth - viewportWidth);
@@ -206,17 +217,7 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
         });
       }
     }
-    setHiddenState(prevState => {
-      const cornerHidden = scrollbarYHidden || scrollbarXHidden;
-      if (prevState.y === scrollbarYHidden && prevState.x === scrollbarXHidden && prevState.corner === cornerHidden) {
-        return prevState;
-      }
-      return {
-        y: scrollbarYHidden,
-        x: scrollbarXHidden,
-        corner: cornerHidden
-      };
-    });
+    setHiddenState(prevState => mergeHiddenState(prevState, nextHiddenState));
     const nextOverflowEdges = {
       xStart: !scrollbarXHidden && scrollLeftFromStart > overflowEdgeThreshold.xStart,
       xEnd: !scrollbarXHidden && scrollLeftFromEnd > overflowEdgeThreshold.xEnd,
@@ -232,20 +233,12 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
   });
   useIsoLayoutEffect(() => {
     if (!viewportRef.current) {
-      return undefined;
+      return;
     }
     removeCSSVariableInheritance();
-    let hasInitialized = false;
-    return onVisible(viewportRef.current, () => {
-      if (!hasInitialized) {
-        hasInitialized = true;
-        return;
-      }
-      computeThumbPosition();
-    });
-  }, [computeThumbPosition, viewportRef]);
+  }, [viewportRef]);
   useIsoLayoutEffect(() => {
-    // Wait for scrollbar-related refs to be set
+    // Wait for scrollbar and thumb refs after hidden-state toggles, and refresh math on direction flips.
     queueMicrotask(computeThumbPosition);
   }, [computeThumbPosition, hiddenState, direction]);
   useIsoLayoutEffect(() => {
@@ -262,11 +255,15 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
     }
     let hasInitialized = false;
     const ro = new ResizeObserver(() => {
-      // ResizeObserver fires once upon observing, so we skip the initial call
-      // to avoid double-calculating the thumb position on mount.
+      // Avoid duplicate mount-time recompute when observer data matches what the mount
+      // scheduling pass already measured. If dimensions changed before the first observer
+      // delivery, keep the recompute so overflow transitions stay in sync.
       if (!hasInitialized) {
         hasInitialized = true;
-        return;
+        const lastMeasuredViewportMetrics = lastMeasuredViewportMetricsRef.current;
+        if (lastMeasuredViewportMetrics[0] === viewport.clientHeight && lastMeasuredViewportMetrics[1] === viewport.scrollHeight && lastMeasuredViewportMetrics[2] === viewport.clientWidth && lastMeasuredViewportMetrics[3] === viewport.scrollWidth) {
+          return;
+        }
       }
       computeThumbPosition();
     });
@@ -302,9 +299,8 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
       'data-id': `${rootId}-viewport`
     }),
     // https://accessibilityinsights.io/info-examples/web/scrollable-region-focusable/
-    ...((!hiddenState.x || !hiddenState.y) && {
-      tabIndex: 0
-    }),
+    // Keep non-scrollable viewports out of tab order.
+    tabIndex: hiddenState.x && hiddenState.y ? -1 : 0,
     className: styleDisableScrollbar.className,
     style: {
       overflow: 'scroll'
@@ -361,4 +357,19 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
     children: element
   });
 });
-if (process.env.NODE_ENV !== "production") ScrollAreaViewport.displayName = "ScrollAreaViewport";
+if (process.env.NODE_ENV !== "production") ScrollAreaViewport.displayName = "ScrollAreaViewport";
+function getHiddenState(viewport) {
+  const y = viewport.clientHeight >= viewport.scrollHeight;
+  const x = viewport.clientWidth >= viewport.scrollWidth;
+  return {
+    y,
+    x,
+    corner: y || x
+  };
+}
+function mergeHiddenState(prevState, nextState) {
+  if (prevState.y === nextState.y && prevState.x === nextState.x && prevState.corner === nextState.corner) {
+    return prevState;
+  }
+  return nextState;
+}

package/esm/select/arrow/SelectArrow.d.ts

@@ -13,11 +13,20 @@ export interface SelectArrowState {
    * Whether the select popup is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side | 'none';
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the arrow cannot be centered on the anchor.
+   */
   uncentered: boolean;
 }
-export interface SelectArrowProps extends BaseUIComponentProps<'div', SelectArrow.State> {}
+export interface SelectArrowProps extends BaseUIComponentProps<'div', SelectArrowState> {}
 export declare namespace SelectArrow {
   type State = SelectArrowState;
   type Props = SelectArrowProps;

package/esm/select/arrow/SelectArrow.js

@@ -23,6 +23,7 @@ export const SelectArrow = /*#__PURE__*/React.forwardRef(function SelectArrow(co
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/select/backdrop/SelectBackdrop.d.ts

@@ -9,10 +9,16 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  */
 export declare const SelectBackdrop: React.ForwardRefExoticComponent<Omit<SelectBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectBackdropState {
+  /**
+   * Whether the component is open.
+   */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface SelectBackdropProps extends BaseUIComponentProps<'div', SelectBackdrop.State> {}
+export interface SelectBackdropProps extends BaseUIComponentProps<'div', SelectBackdropState> {}
 export declare namespace SelectBackdrop {
   type State = SelectBackdropState;
   type Props = SelectBackdropProps;

package/esm/select/backdrop/SelectBackdrop.js

@@ -22,6 +22,7 @@ export const SelectBackdrop = /*#__PURE__*/React.forwardRef(function SelectBackd
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/select/group/SelectGroup.d.ts

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const SelectGroup: React.ForwardRefExoticComponent<Omit<SelectGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectGroupState {}
-export interface SelectGroupProps extends BaseUIComponentProps<'div', SelectGroup.State> {}
+export interface SelectGroupProps extends BaseUIComponentProps<'div', SelectGroupState> {}
 export declare namespace SelectGroup {
   type State = SelectGroupState;
   type Props = SelectGroupProps;

package/esm/select/group/SelectGroup.js

@@ -15,6 +15,7 @@ export const SelectGroup = /*#__PURE__*/React.forwardRef(function SelectGroup(co
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState();

package/esm/select/group-label/SelectGroupLabel.d.ts

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const SelectGroupLabel: React.ForwardRefExoticComponent<Omit<SelectGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectGroupLabelState {}
-export interface SelectGroupLabelProps extends BaseUIComponentProps<'div', SelectGroupLabel.State> {}
+export interface SelectGroupLabelProps extends BaseUIComponentProps<'div', SelectGroupLabelState> {}
 export declare namespace SelectGroupLabel {
   type State = SelectGroupLabelState;
   type Props = SelectGroupLabelProps;

package/esm/select/group-label/SelectGroupLabel.js

@@ -17,6 +17,7 @@ export const SelectGroupLabel = /*#__PURE__*/React.forwardRef(function SelectGro
     className,
     render,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/select/icon/SelectIcon.d.ts

@@ -13,7 +13,7 @@ export interface SelectIconState {
    */
   open: boolean;
 }
-export interface SelectIconProps extends BaseUIComponentProps<'span', SelectIcon.State> {}
+export interface SelectIconProps extends BaseUIComponentProps<'span', SelectIconState> {}
 export declare namespace SelectIcon {
   type State = SelectIconState;
   type Props = SelectIconProps;

package/esm/select/icon/SelectIcon.js

@@ -17,6 +17,7 @@ export const SelectIcon = /*#__PURE__*/React.forwardRef(function SelectIcon(comp
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/select/index.d.ts

@@ -1,5 +1,6 @@
 export * as Select from "./index.parts.js";
 export type * from "./root/SelectRoot.js";
+export type * from "./label/SelectLabel.js";
 export type * from "./trigger/SelectTrigger.js";
 export type * from "./value/SelectValue.js";
 export type * from "./icon/SelectIcon.js";

package/esm/select/index.parts.d.ts

@@ -1,4 +1,5 @@
 export { SelectRoot as Root } from "./root/SelectRoot.js";
+export { SelectLabel as Label } from "./label/SelectLabel.js";
 export { SelectTrigger as Trigger } from "./trigger/SelectTrigger.js";
 export { SelectValue as Value } from "./value/SelectValue.js";
 export { SelectIcon as Icon } from "./icon/SelectIcon.js";

package/esm/select/index.parts.js

@@ -1,4 +1,5 @@
 export { SelectRoot as Root } from "./root/SelectRoot.js";
+export { SelectLabel as Label } from "./label/SelectLabel.js";
 export { SelectTrigger as Trigger } from "./trigger/SelectTrigger.js";
 export { SelectValue as Value } from "./value/SelectValue.js";
 export { SelectIcon as Icon } from "./icon/SelectIcon.js";

package/esm/select/item/SelectItem.d.ts

@@ -21,7 +21,7 @@ export interface SelectItemState {
    */
   highlighted: boolean;
 }
-export interface SelectItemProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'div', SelectItem.State>, 'id'> {
+export interface SelectItemProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'div', SelectItemState>, 'id'> {
   children?: React.ReactNode;
   /**
    * A unique value that identifies this select item.