@base-ui/react 1.6.0 → 1.7.0

package/docs/react/components/select.md

@@ -38,7 +38,7 @@ export default function ExampleSelect() {
         <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Apple
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-2 pr-1 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-2 pr-1 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-pressed:bg-neutral-100 dark:data-pressed:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           <Select.Value
             className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400"
             placeholder="Select apple"
@@ -212,7 +212,7 @@ This example shows how to implement the component using CSS Modules.
     }
   }
 
-  &[data-popup-open] {
+  &[data-pressed] {
     background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
@@ -710,7 +710,7 @@ export default function MultiSelectExample() {
         <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Languages
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-2 pr-1 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-2 pr-1 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-pressed:bg-neutral-100 dark:data-pressed:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           <Select.Value className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400">
             {renderValue}
           </Select.Value>
@@ -849,7 +849,7 @@ This example shows how to implement the component using CSS Modules.
     }
   }
 
-  &[data-popup-open] {
+  &[data-pressed] {
     background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
@@ -1091,7 +1091,7 @@ export default function ObjectValueSelect() {
         <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Shipping method
         </Select.Label>
-        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-center justify-between gap-3 pl-2 pr-1 py-1.5 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-center justify-between gap-3 pl-2 pr-1 py-1.5 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-pressed:bg-neutral-100 dark:data-pressed:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           <Select.Value>
             {(method: ShippingMethod) => (
               <span className="flex flex-col items-start gap-0.5">
@@ -1297,7 +1297,7 @@ This example shows how to implement the component using CSS Modules.
     }
   }
 
-  &[data-popup-open] {
+  &[data-pressed] {
     background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
@@ -1718,7 +1718,7 @@ export default function ExampleSelectGrouped() {
         Produce
       </Field.Label>
       <Select.Root items={groupedProduce}>
-        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-2 pr-1 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-2 pr-1 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-pressed:bg-neutral-100 dark:data-pressed:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           <Select.Value
             className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400"
             placeholder="Select produce"
@@ -1933,7 +1933,7 @@ This example shows how to implement the component using CSS Modules.
     }
   }
 
-  &[data-popup-open] {
+  &[data-pressed] {
     background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
@@ -2299,32 +2299,32 @@ Doesn't render its own HTML element.
 
 **Root Props:**
 
-| Prop                 | Type                                                                                        | Default | Description                                                                                                                                                                                                                                                                                        |
-| :------------------- | :------------------------------------------------------------------------------------------ | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| name                 | `string`                                                                                    | -       | Identifies the field when a form is submitted.                                                                                                                                                                                                                                                     |
-| defaultValue         | `Value[] \| Value \| null`                                                                  | -       | The uncontrolled value of the select when it's initially rendered. To render a controlled select, use the `value` prop instead.                                                                                                                                                                    |
-| value                | `Value[] \| Value \| null`                                                                  | -       | The value of the select. Use when controlled.                                                                                                                                                                                                                                                      |
-| onValueChange        | `((value: Value[] \| Value \| null, eventDetails: Select.Root.ChangeEventDetails) => void)` | -       | Event handler called when the value of the select changes.                                                                                                                                                                                                                                         |
-| defaultOpen          | `boolean`                                                                                   | `false` | Whether the select popup is initially open. To render a controlled select popup, use the `open` prop instead.                                                                                                                                                                                      |
-| open                 | `boolean`                                                                                   | -       | Whether the select popup is currently open.                                                                                                                                                                                                                                                        |
-| onOpenChange         | `((open: boolean, eventDetails: Select.Root.ChangeEventDetails) => void)`                   | -       | Event handler called when the select popup is opened or closed.                                                                                                                                                                                                                                    |
-| highlightItemOnHover | `boolean`                                                                                   | `true`  | Whether moving the pointer over items should highlight them.&#xA;Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.                                                                                                                        |
-| actionsRef           | `React.RefObject<Select.Root.Actions \| null>`                                              | -       | A ref to imperative actions. `unmount`: Manually unmounts the select.&#xA;Call this after any externally controlled closing animation finishes.                                                                                                                                                    |
-| autoComplete         | `string`                                                                                    | -       | Provides a hint to the browser for autofill.                                                                                                                                                                                                                                                       |
-| form                 | `string`                                                                                    | -       | Identifies the form that owns the hidden input.&#xA;Useful when the select is rendered outside the form.                                                                                                                                                                                           |
-| isItemEqualToValue   | `((itemValue: Value, value: Value) => boolean)`                                             | -       | Custom comparison logic used to determine if a select item value matches the current selected value. Useful when item values are objects without matching referentially.&#xA;Defaults to `Object.is` comparison.                                                                                   |
-| itemToStringLabel    | `((itemValue: Value) => string)`                                                            | -       | When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for display in the trigger.&#xA;If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop. |
-| itemToStringValue    | `((itemValue: Value) => string)`                                                            | -       | When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for form submission.&#xA;If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop.        |
-| items                | `Record<string, React.ReactNode> \| ({ label: React.ReactNode; value: any })[] \| Group[]`  | -       | Data structure of the items rendered in the select popup.&#xA;When specified, `<Select.Value>` renders the label of the selected item instead of the raw value.                                                                                                                                    |
-| modal                | `boolean`                                                                                   | `true`  | Determines if the select enters a modal state when open. `true`: user interaction is limited to the select: document page scroll is locked and pointer interactions on outside elements are disabled.`false`: user interaction with the rest of the document is allowed.                           |
-| multiple             | `boolean`                                                                                   | `false` | Whether multiple items can be selected.                                                                                                                                                                                                                                                            |
-| onOpenChangeComplete | `((open: boolean) => void)`                                                                 | -       | Event handler called after any animations complete when the select popup is opened or closed.                                                                                                                                                                                                      |
-| disabled             | `boolean`                                                                                   | `false` | Whether the component should ignore user interaction.                                                                                                                                                                                                                                              |
-| readOnly             | `boolean`                                                                                   | `false` | Whether the user should be unable to choose a different option from the select popup.                                                                                                                                                                                                              |
-| required             | `boolean`                                                                                   | `false` | Whether the user must choose a value before submitting a form.                                                                                                                                                                                                                                     |
-| inputRef             | `React.Ref<HTMLInputElement>`                                                               | -       | A ref to access the hidden input element.                                                                                                                                                                                                                                                          |
-| id                   | `string`                                                                                    | -       | The id of the Select.                                                                                                                                                                                                                                                                              |
-| children             | `React.ReactNode`                                                                           | -       | -                                                                                                                                                                                                                                                                                                  |
+| Prop                 | Type                                                                                        | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :------------------- | :------------------------------------------------------------------------------------------ | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| name                 | `string`                                                                                    | -       | Identifies the field when a form is submitted.                                                                                                                                                                                                                                                                                                                                                                                                    |
+| defaultValue         | `Value[] \| Value \| null`                                                                  | -       | The uncontrolled value of the select when it's initially rendered. To render a controlled select, use the `value` prop instead.                                                                                                                                                                                                                                                                                                                   |
+| value                | `Value[] \| Value \| null`                                                                  | -       | The value of the select. Use when controlled.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onValueChange        | `((value: Value[] \| Value \| null, eventDetails: Select.Root.ChangeEventDetails) => void)` | -       | Event handler called when the value of the select changes.                                                                                                                                                                                                                                                                                                                                                                                        |
+| defaultOpen          | `boolean`                                                                                   | `false` | Whether the select popup is initially open. To render a controlled select popup, use the `open` prop instead.                                                                                                                                                                                                                                                                                                                                     |
+| open                 | `boolean`                                                                                   | -       | Whether the select popup is currently open.                                                                                                                                                                                                                                                                                                                                                                                                       |
+| onOpenChange         | `((open: boolean, eventDetails: Select.Root.ChangeEventDetails) => void)`                   | -       | Event handler called when the select popup is opened or closed.                                                                                                                                                                                                                                                                                                                                                                                   |
+| highlightItemOnHover | `boolean`                                                                                   | `true`  | Whether moving the pointer over items should highlight them.&#xA;Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.                                                                                                                                                                                                                                                                       |
+| actionsRef           | `React.RefObject<Select.Root.Actions \| null>`                                              | -       | A ref to imperative actions. `unmount`: Manually unmounts the select.&#xA;Call this after any externally controlled closing animation finishes.                                                                                                                                                                                                                                                                                                   |
+| autoComplete         | `string`                                                                                    | -       | Provides a hint to the browser for autofill.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| form                 | `string`                                                                                    | -       | Identifies the form that owns the hidden input.&#xA;Useful when the select is rendered outside the form.                                                                                                                                                                                                                                                                                                                                          |
+| isItemEqualToValue   | `((itemValue: Value, value: Value) => boolean)`                                             | -       | Custom comparison logic used to determine if a select item value matches the current selected value. Useful when item values are objects without matching referentially.&#xA;Defaults to `Object.is` comparison.                                                                                                                                                                                                                                  |
+| itemToStringLabel    | `((itemValue: Value) => string)`                                                            | -       | When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for display in the trigger.&#xA;If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.                                                                                                                                                |
+| itemToStringValue    | `((itemValue: Value) => string)`                                                            | -       | When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for form submission.&#xA;If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop.                                                                                                                                                       |
+| items                | `Record<string, React.ReactNode> \| ({ label: React.ReactNode; value: any })[] \| Group[]`  | -       | Data structure of the items rendered in the select popup.&#xA;When specified, `<Select.Value>` renders the label of the selected item instead of the raw value.                                                                                                                                                                                                                                                                                   |
+| modal                | `boolean`                                                                                   | `true`  | Determines if the select enters a modal state when open. `true`: user interaction is limited to the select: document page scroll is locked and pointer interactions on outside elements are disabled.`false`: user interaction with the rest of the document is allowed. On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior. |
+| multiple             | `boolean`                                                                                   | `false` | Whether multiple items can be selected.                                                                                                                                                                                                                                                                                                                                                                                                           |
+| onOpenChangeComplete | `((open: boolean) => void)`                                                                 | -       | Event handler called after any animations complete when the select popup is opened or closed.                                                                                                                                                                                                                                                                                                                                                     |
+| disabled             | `boolean`                                                                                   | `false` | Whether the component should ignore user interaction.                                                                                                                                                                                                                                                                                                                                                                                             |
+| readOnly             | `boolean`                                                                                   | `false` | Whether the user should be unable to choose a different option from the select popup.                                                                                                                                                                                                                                                                                                                                                             |
+| required             | `boolean`                                                                                   | `false` | Whether the user must choose a value before submitting a form.                                                                                                                                                                                                                                                                                                                                                                                    |
+| inputRef             | `React.Ref<HTMLInputElement>`                                                               | -       | A ref to access the hidden input element.                                                                                                                                                                                                                                                                                                                                                                                                         |
+| id                   | `string`                                                                                    | -       | The id of the Select.                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| children             | `React.ReactNode`                                                                           | -       | -                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 
 **`items` Prop Example:**
 
@@ -2604,12 +2604,12 @@ Renders a `<div>` element.
 
 **Backdrop Data Attributes:**
 
-| Attribute           | Type | Description                               |
-| :------------------ | :--- | :---------------------------------------- |
-| data-open           | -    | Present when the select is open.          |
-| data-closed         | -    | Present when the select is closed.        |
-| data-starting-style | -    | Present when the select is animating in.  |
-| data-ending-style   | -    | Present when the select is animating out. |
+| Attribute           | Type | Description                                  |
+| :------------------ | :--- | :------------------------------------------- |
+| data-open           | -    | Present when the select is open.             |
+| data-closed         | -    | Present when the select is closed.           |
+| data-starting-style | -    | Present when the select begins animating in. |
+| data-ending-style   | -    | Present when the select is animating out.    |
 
 ### Backdrop.Props
 
@@ -2746,7 +2746,7 @@ Renders a `<div>` element.
 | data-closed         | -                                                                                    | Present when the select is closed.                                    |
 | data-align          | `'start' \| 'center' \| 'end'`                                                       | Indicates how the popup is aligned relative to specified side.        |
 | data-side           | `'none' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'inline-end' \| 'inline-start'` | Indicates which side the popup is positioned relative to the trigger. |
-| data-starting-style | -                                                                                    | Present when the select is animating in.                              |
+| data-starting-style | -                                                                                    | Present when the select begins animating in.                          |
 | data-ending-style   | -                                                                                    | Present when the select is animating out.                             |
 
 ### Popup.Props
@@ -2901,17 +2901,17 @@ type SelectGroupLabelState = {};
 
 ### Separator
 
-A separator element accessible to screen readers.
+A visual separator between items or groups.
 Renders a `<div>` element.
 
 **Separator Props:**
 
-| Prop        | Type                                                                                   | Default        | Description                                                                                                                                                                                   |
-| :---------- | :------------------------------------------------------------------------------------- | :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| orientation | `Orientation`                                                                          | `'horizontal'` | The orientation of the separator.                                                                                                                                                             |
-| className   | `string \| ((state: SeparatorState) => string \| undefined)`                           | -              | CSS class applied to the element, or a function that&#xA;returns a class based on the component's state.                                                                                      |
-| style       | `React.CSSProperties \| ((state: SeparatorState) => React.CSSProperties \| undefined)` | -              | Style applied to the element, or a function that&#xA;returns a style object based on the component's state.                                                                                   |
-| render      | `ReactElement \| ((props: HTMLProps, state: SeparatorState) => ReactElement)`          | -              | Allows you to replace the component's HTML element&#xA;with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
+| Prop        | Type                                                                                           | Default        | Description                                                                                                                                                                                   |
+| :---------- | :--------------------------------------------------------------------------------------------- | :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| orientation | `Orientation`                                                                                  | `'horizontal'` | The orientation of the separator.                                                                                                                                                             |
+| className   | `string \| ((state: Select.Separator.State) => string \| undefined)`                           | -              | CSS class applied to the element, or a function that&#xA;returns a class based on the component's state.                                                                                      |
+| style       | `React.CSSProperties \| ((state: Select.Separator.State) => React.CSSProperties \| undefined)` | -              | Style applied to the element, or a function that&#xA;returns a style object based on the component's state.                                                                                   |
+| render      | `ReactElement \| ((props: HTMLProps, state: Select.Separator.State) => ReactElement)`          | -              | Allows you to replace the component's HTML element&#xA;with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
 
 ### Separator.Props
 
@@ -3002,10 +3002,10 @@ Renders a `<span>` element.
 
 **ItemIndicator Data Attributes:**
 
-| Attribute           | Type | Description                                  |
-| :------------------ | :--- | :------------------------------------------- |
-| data-starting-style | -    | Present when the indicator is animating in.  |
-| data-ending-style   | -    | Present when the indicator is animating out. |
+| Attribute           | Type | Description                                     |
+| :------------------ | :--- | :---------------------------------------------- |
+| data-starting-style | -    | Present when the indicator begins animating in. |
+| data-ending-style   | -    | Present when the indicator is animating out.    |
 
 ### ItemIndicator.Props
 
@@ -3043,7 +3043,7 @@ Renders a `<div>` element.
 | data-direction      | `'up'`                                                                               | Indicates the direction of the scroll arrow.                          |
 | data-side           | `'none' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'inline-end' \| 'inline-start'` | Indicates which side the popup is positioned relative to the trigger. |
 | data-visible        | -                                                                                    | Present when the scroll arrow is visible.                             |
-| data-starting-style | -                                                                                    | Present when the scroll arrow is animating in.                        |
+| data-starting-style | -                                                                                    | Present when the scroll arrow begins animating in.                    |
 | data-ending-style   | -                                                                                    | Present when the scroll arrow is animating out.                       |
 
 ### ScrollUpArrow\.Props
@@ -3077,7 +3077,7 @@ Renders a `<div>` element.
 | data-direction      | `'down'`                                                                             | Indicates the direction of the scroll arrow.                          |
 | data-side           | `'none' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'inline-end' \| 'inline-start'` | Indicates which side the popup is positioned relative to the trigger. |
 | data-visible        | -                                                                                    | Present when the scroll arrow is visible.                             |
-| data-starting-style | -                                                                                    | Present when the scroll arrow is animating in.                        |
+| data-starting-style | -                                                                                    | Present when the scroll arrow begins animating in.                    |
 | data-ending-style   | -                                                                                    | Present when the scroll arrow is animating out.                       |
 
 ### ScrollDownArrow\.Props
@@ -3148,7 +3148,7 @@ type Orientation = 'horizontal' | 'vertical';
 - `Select.Group`: `Select.Group`, `Select.Group.State`, `Select.Group.Props`
 - `Select.GroupLabel`: `Select.GroupLabel`, `Select.GroupLabel.State`, `Select.GroupLabel.Props`
 - `Select.Separator`: `Select.Separator`, `Select.Separator.Props`, `Select.Separator.State`
-- `Default`: `SelectRootProps`, `SelectRootState`, `SelectRootActions`, `SelectRootChangeEventReason`, `SelectRootChangeEventDetails`, `SelectLabelState`, `SelectLabelProps`, `SelectTriggerState`, `SelectTriggerProps`, `SelectValueState`, `SelectValueProps`, `SelectIconState`, `SelectIconProps`, `SelectPortalState`, `SelectPortalProps`, `SelectBackdropState`, `SelectBackdropProps`, `SelectPositionerState`, `SelectPositionerProps`, `SelectPopupProps`, `SelectPopupState`, `SelectListProps`, `SelectListState`, `SelectItemState`, `SelectItemProps`, `SelectItemIndicatorState`, `SelectItemIndicatorProps`, `SelectItemTextState`, `SelectItemTextProps`, `SelectArrowState`, `SelectArrowProps`, `SelectScrollDownArrowState`, `SelectScrollDownArrowProps`, `SelectScrollUpArrowState`, `SelectScrollUpArrowProps`, `SelectGroupState`, `SelectGroupProps`, `SelectGroupLabelState`, `SelectGroupLabelProps`
+- `Default`: `SelectRootProps`, `SelectRootState`, `SelectRootActions`, `SelectRootChangeEventReason`, `SelectRootChangeEventDetails`, `SelectLabelState`, `SelectLabelProps`, `SelectTriggerState`, `SelectTriggerProps`, `SelectValueState`, `SelectValueProps`, `SelectIconState`, `SelectIconProps`, `SelectPortalState`, `SelectPortalProps`, `SelectBackdropState`, `SelectBackdropProps`, `SelectPositionerState`, `SelectPositionerProps`, `SelectPopupProps`, `SelectPopupState`, `SelectListProps`, `SelectListState`, `SelectItemState`, `SelectItemProps`, `SelectItemIndicatorState`, `SelectItemIndicatorProps`, `SelectItemTextState`, `SelectItemTextProps`, `SelectArrowState`, `SelectArrowProps`, `SelectScrollDownArrowState`, `SelectScrollDownArrowProps`, `SelectScrollUpArrowState`, `SelectScrollUpArrowProps`, `SelectGroupState`, `SelectGroupProps`, `SelectGroupLabelState`, `SelectGroupLabelProps`, `SelectSeparatorProps`, `SelectSeparatorState`
 
 ## Canonical Types
 
@@ -3193,3 +3193,5 @@ Maps `Canonical`: `Alias` — Use Canonical when its namespace is already import
 - `Select.Group.Props`: `SelectGroupProps`
 - `Select.GroupLabel.State`: `SelectGroupLabelState`
 - `Select.GroupLabel.Props`: `SelectGroupLabelProps`
+- `Select.Separator.Props`: `SelectSeparatorProps`
+- `Select.Separator.State`: `SelectSeparatorState`

package/docs/react/components/slider.md

@@ -605,28 +605,28 @@ Renders a `<div>` element.
 
 **Root Props:**
 
-| Prop                   | Type                                                                                      | Default        | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| :--------------------- | :---------------------------------------------------------------------------------------- | :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| name                   | `string`                                                                                  | -              | Identifies the field when a form is submitted.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| defaultValue           | `number \| number[]`                                                                      | -              | The uncontrolled value of the slider when it's initially rendered. To render a controlled slider, use the `value` prop instead.                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| value                  | `number \| number[]`                                                                      | -              | The value of the slider.&#xA;For ranged sliders, provide an array with two values.                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| onValueChange          | `((value: number \| number[], eventDetails: Slider.Root.ChangeEventDetails) => void)`     | -              | Callback function that is fired when the slider's value changed.&#xA;You can pull out the new value by accessing `event.target.value` (any). The `eventDetails.reason` indicates what triggered the change: `'input-change'` when the hidden range input emits a change event (for example, via form integration)`'track-press'` when the control track is pressed`'drag'` while dragging a thumb`'keyboard'` for keyboard input`'none'` when the change is triggered without a specific interaction                                                            |
-| onValueCommitted       | `((value: number \| number[], eventDetails: Slider.Root.CommitEventDetails) => void)`     | -              | Callback function that is fired when a value change is committed.&#xA;Does not fire if the value did not change, or if the change was canceled.&#xA;**Warning**: This is a generic event, not a change event. The `eventDetails.reason` indicates what triggered the commit: `'drag'` while dragging a thumb`'track-press'` when the control track is pressed`'keyboard'` for keyboard input`'input-change'` when the hidden range input emits a change event (for example, via form integration)`'none'` when the commit occurs without a specific interaction |
-| form                   | `string`                                                                                  | -              | Identifies the form that owns the slider inputs.&#xA;Useful when the slider is rendered outside the form.                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| locale                 | `Intl.LocalesArgument`                                                                    | -              | The locale used by `Intl.NumberFormat` when formatting the value.&#xA;Defaults to the user's runtime locale.                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| thumbAlignment         | `'center' \| 'edge' \| 'edge-client-only'`                                                | `'center'`     | How the thumb(s) are aligned relative to `Slider.Control` when the value is at `min` or `max`: `center`: The center of the thumb is aligned with the control edge`edge`: The thumb is inset within the control such that its edge is aligned with the control edge`edge-client-only`: Same as `edge` but renders after React hydration on the client, reducing bundle size in return                                                                                                                                                                            |
-| thumbCollisionBehavior | `'push' \| 'swap' \| 'none'`                                                              | `'push'`       | Controls how thumbs behave when they collide during pointer interactions. `'push'` (default): Thumbs push each other without restoring their previous positions when dragged back.`'swap'`: Thumbs swap places when dragged past each other.`'none'`: Thumbs cannot move past each other; excess movement is ignored.                                                                                                                                                                                                                                           |
-| step                   | `number`                                                                                  | `1`            | The granularity with which the slider can step through values. (A "discrete" slider.)&#xA;The `min` prop serves as the origin for the valid values.&#xA;We recommend (max - min) to be evenly divisible by the step.                                                                                                                                                                                                                                                                                                                                            |
-| largeStep              | `number`                                                                                  | `10`           | The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| minStepsBetweenValues  | `number`                                                                                  | `0`            | The minimum steps between values in a range slider.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| min                    | `number`                                                                                  | `0`            | The minimum allowed value of the slider.&#xA;Should not be equal to max.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| max                    | `number`                                                                                  | `100`          | The maximum allowed value of the slider.&#xA;Should not be equal to min.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| format                 | `Intl.NumberFormatOptions`                                                                | -              | Options to format the input value.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| disabled               | `boolean`                                                                                 | `false`        | Whether the slider should ignore user interaction.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| orientation            | `Orientation`                                                                             | `'horizontal'` | The component orientation.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| className              | `string \| ((state: Slider.Root.State) => string \| undefined)`                           | -              | CSS class applied to the element, or a function that&#xA;returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| style                  | `React.CSSProperties \| ((state: Slider.Root.State) => React.CSSProperties \| undefined)` | -              | Style applied to the element, or a function that&#xA;returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| render                 | `ReactElement \| ((props: HTMLProps, state: Slider.Root.State) => ReactElement)`          | -              | Allows you to replace the component's HTML element&#xA;with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.                                                                                                                                                                                                                                                                                                                                                                   |
+| Prop                   | Type                                                                                      | Default        | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| :--------------------- | :---------------------------------------------------------------------------------------- | :------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| name                   | `string`                                                                                  | -              | Identifies the field when a form is submitted.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| defaultValue           | `number \| number[]`                                                                      | -              | The uncontrolled value of the slider when it's initially rendered. To render a controlled slider, use the `value` prop instead.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| value                  | `number \| number[]`                                                                      | -              | The value of the slider.&#xA;For range sliders, provide an array with one value per thumb.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onValueChange          | `((value: number \| number[], eventDetails: Slider.Root.ChangeEventDetails) => void)`     | -              | Callback function that is fired when the slider's value changed.&#xA;Receives the new value as the first argument; the originating event is&#xA;available as `eventDetails.event`. The value is also reflected on&#xA;`eventDetails.event.target.value` for form integration. The `eventDetails.reason` indicates what triggered the change: `'input-change'` when the hidden range input emits a change event (for example, via form integration)`'track-press'` when the control track is pressed`'drag'` while dragging a thumb`'keyboard'` for keyboard input`'none'` when the change is triggered without a specific interaction |
+| onValueCommitted       | `((value: number \| number[], eventDetails: Slider.Root.CommitEventDetails) => void)`     | -              | Callback function that is fired when a value change is committed.&#xA;Does not fire if the value did not change, or if the change was canceled.&#xA;**Warning**: This is a generic event, not a change event. The `eventDetails.reason` indicates what triggered the commit: `'drag'` while dragging a thumb`'track-press'` when the control track is pressed`'keyboard'` for keyboard input`'input-change'` when the hidden range input emits a change event (for example, via form integration)`'none'` when the commit occurs without a specific interaction                                                                       |
+| form                   | `string`                                                                                  | -              | Identifies the form that owns the slider inputs.&#xA;Useful when the slider is rendered outside the form.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| locale                 | `Intl.LocalesArgument`                                                                    | -              | The locale used by `Intl.NumberFormat` when formatting the value.&#xA;Defaults to the user's runtime locale.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| thumbAlignment         | `'center' \| 'edge' \| 'edge-client-only'`                                                | `'center'`     | How the thumb(s) are aligned relative to `Slider.Control` when the value is at `min` or `max`: `center`: The center of the thumb is aligned with the control edge`edge`: The thumb is inset within the control such that its edge is aligned with the control edge`edge-client-only`: Same as `edge` but renders after React hydration on the client, reducing bundle size in return                                                                                                                                                                                                                                                  |
+| thumbCollisionBehavior | `'push' \| 'swap' \| 'none'`                                                              | `'push'`       | Controls how thumbs behave when they collide during pointer interactions. `'push'` (default): Thumbs push each other without restoring their previous positions when dragged back.`'swap'`: Thumbs swap places when dragged past each other.`'none'`: Thumbs cannot move past each other; excess movement is ignored.                                                                                                                                                                                                                                                                                                                 |
+| step                   | `number`                                                                                  | `1`            | The granularity with which the slider can step through values. (A "discrete" slider.)&#xA;The `min` prop serves as the origin for the valid values.&#xA;We recommend (max - min) to be evenly divisible by the step.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| largeStep              | `number`                                                                                  | `10`           | The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| minStepsBetweenValues  | `number`                                                                                  | `0`            | The minimum steps between values in a range slider.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| min                    | `number`                                                                                  | `0`            | The minimum allowed value of the slider.&#xA;Should not be equal to max.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| max                    | `number`                                                                                  | `100`          | The maximum allowed value of the slider.&#xA;Should not be equal to min.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| format                 | `Intl.NumberFormatOptions`                                                                | -              | Options to format the value.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| disabled               | `boolean`                                                                                 | `false`        | Whether the slider should ignore user interaction.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| orientation            | `Orientation`                                                                             | `'horizontal'` | The component orientation.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| className              | `string \| ((state: Slider.Root.State) => string \| undefined)`                           | -              | CSS class applied to the element, or a function that&#xA;returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| style                  | `React.CSSProperties \| ((state: Slider.Root.State) => React.CSSProperties \| undefined)` | -              | Style applied to the element, or a function that&#xA;returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| render                 | `ReactElement \| ((props: HTMLProps, state: Slider.Root.State) => ReactElement)`          | -              | Allows you to replace the component's HTML element&#xA;with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
 **Root Data Attributes:**