@base-ui/react 1.6.0 → 1.8.0

package/docs/react/components/toolbar.md

@@ -34,7 +34,7 @@ export default function ExampleToolbar() {
           render={<Toggle />}
           aria-label="Align left"
           value="align-left"
-          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent px-3 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:!bg-neutral-100 data-popup-open:!text-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:!bg-neutral-800 dark:data-popup-open:!text-white focus-visible:bg-transparent focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent px-3 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
           Align Left
         </Toolbar.Button>
@@ -42,7 +42,7 @@ export default function ExampleToolbar() {
           render={<Toggle />}
           aria-label="Align right"
           value="align-right"
-          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent px-3 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:!bg-neutral-100 data-popup-open:!text-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:!bg-neutral-800 dark:data-popup-open:!text-white focus-visible:bg-transparent focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent px-3 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
           Align Right
         </Toolbar.Button>
@@ -50,13 +50,13 @@ export default function ExampleToolbar() {
       <Toolbar.Separator className="m-1 h-4 w-px bg-neutral-950 dark:bg-white" />
       <Toolbar.Group className="flex gap-px" aria-label="Numerical format">
         <Toolbar.Button
-          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:!bg-neutral-100 data-popup-open:!text-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:!bg-neutral-800 dark:data-popup-open:!text-white focus-visible:bg-transparent focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           aria-label="Format as currency"
         >
           $
         </Toolbar.Button>
         <Toolbar.Button
-          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:!bg-neutral-100 data-popup-open:!text-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:!bg-neutral-800 dark:data-popup-open:!text-white focus-visible:bg-transparent focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           aria-label="Format as percent"
         >
           %
@@ -66,7 +66,7 @@ export default function ExampleToolbar() {
       <Select.Root defaultValue="Helvetica">
         <Toolbar.Button
           render={<Select.Trigger />}
-          className="flex h-8 min-w-32 cursor-default items-center justify-between gap-2 border-0 bg-transparent px-2 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:!bg-neutral-100 data-popup-open:!text-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:!bg-neutral-800 dark:data-popup-open:!text-white focus-visible:bg-transparent focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+          className="flex h-8 min-w-32 cursor-default items-center justify-between gap-2 border-0 bg-transparent px-2 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-100 data-pressed:text-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-neutral-800 dark:data-pressed:text-white focus-visible:bg-transparent focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
           <Select.Value />
           <Select.Icon>
@@ -194,7 +194,7 @@ This example shows how to implement the component using CSS Modules.
   }
 
   @media (hover: hover) {
-    &:hover:not([data-disabled], [data-popup-open]) {
+    &:hover:not([data-disabled], [data-pressed]) {
       background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
@@ -226,7 +226,7 @@ This example shows how to implement the component using CSS Modules.
   }
 
   @media (hover: hover) {
-    &[data-pressed]:hover:not([data-disabled], [data-popup-open]) {
+    &[data-pressed]:hover:not([data-disabled], [role='combobox']) {
       background-color: oklch(14.5% 0 0deg);
       color: white;
 
@@ -237,20 +237,20 @@ This example shows how to implement the component using CSS Modules.
     }
   }
 
-  &[data-popup-open] {
-    background-color: oklch(97% 0 0deg);
-    color: oklch(14.5% 0 0deg);
-
-    @media (prefers-color-scheme: dark) {
-      background-color: oklch(26.9% 0 0deg);
-      color: white;
-    }
-  }
-
   &[role='combobox'] {
     min-width: 8rem;
     justify-content: space-between;
     padding: 0 0.5rem;
+
+    &[data-pressed] {
+      background-color: oklch(97% 0 0deg);
+      color: oklch(14.5% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+        color: white;
+      }
+    }
   }
 
   &:focus-visible {
@@ -439,7 +439,11 @@ export default function ExampleToolbar() {
           </Select.Icon>
         </Toolbar.Button>
         <Select.Portal>
-          <Select.Positioner className={styles.Positioner} sideOffset={4}>
+          <Select.Positioner
+            className={styles.Positioner}
+            sideOffset={4}
+            alignItemWithTrigger={false}
+          >
             <Select.Popup className={styles.Popup}>
               <Select.Item className={styles.Item} value="Helvetica">
                 <Select.ItemIndicator className={styles.ItemIndicator}>
@@ -793,11 +797,11 @@ Renders an `<a>` element.
 
 **Link Props:**
 
-| Prop      | Type                                                                                       | Default | Description                                                                                                                                                                                   |
-| :-------- | :----------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| className | `string \| ((state: Toolbar.Link.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: Toolbar.Link.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: Toolbar.Link.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                                                                                                                                                                                   |
+| :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| className | `string \| ((state: Toolbar.Link.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: Toolbar.Link.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: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, state: Toolbar.Link.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. |
 
 **Link Data Attributes:**
 

package/docs/react/components/tooltip.md

@@ -449,6 +449,9 @@ For simple, one-off interactions, place the `<Tooltip.Trigger>` inside `<Tooltip
 However, if defining the tooltip's content next to its trigger is not practical, you can use a detached trigger.
 This involves placing the `<Tooltip.Trigger>` outside of `<Tooltip.Root>` and linking them with a `handle` created by the `Tooltip.createHandle()` function.
 
+The imperative methods on the handle, such as `open()` and `close()`, require a `<Tooltip.Root>` using the same handle to be mounted.
+Calls made while no root is attached to the handle — before one mounts, or after it unmounts — are ignored. Each time a root mounts, it starts from fresh state: a call made while no root was attached is not replayed, and no open state carries over from a previous mount.
+
 ```jsx title="Detached triggers"
 const demoTooltip = Tooltip.createHandle();
 
@@ -1514,7 +1517,7 @@ This is useful when different triggers display different content within the same
 
 To enable content animations, wrap the content in the `<Tooltip.Viewport>` part.
 This part provides features to create direction-aware animations.
-It renders a `div` with a `data-activation-direction` attribute (`left`, `right`, `up`, or `down`) that indicates the new trigger's position relative to the previous one.
+It renders a `div` with a `data-activation-direction` attribute that indicates the new trigger's position relative to the previous one. The value is a space-separated set of up to two tokens (one per axis) — `left` or `right` for the horizontal axis and `up` or `down` for the vertical axis (for example, `right down`). Match a single token with the `~=` attribute selector, such as `[data-activation-direction~='right']`.
 
 Inside the `<Tooltip.Viewport>`, the content is further wrapped in `div`s with data attributes to help with styling:
 
@@ -2160,7 +2163,7 @@ once a tooltip becomes visible, the adjacent tooltips will be shown instantly.
 
 | Prop       | Type              | Default | Description                                                                                                               |
 | :--------- | :---------------- | :------ | :------------------------------------------------------------------------------------------------------------------------ |
-| delay      | `number`          | -       | How long to wait before opening a tooltip. Specified in milliseconds.                                                     |
+| delay      | `number`          | -       | How long to wait before opening the tooltip on hover. Specified in milliseconds.                                          |
 | closeDelay | `number`          | -       | How long to wait before closing a tooltip. Specified in milliseconds.                                                     |
 | timeout    | `number`          | `400`   | Another tooltip will open instantly if the previous tooltip&#xA;is closed within this timeout. Specified in milliseconds. |
 | children   | `React.ReactNode` | -       | -                                                                                                                         |
@@ -2188,7 +2191,7 @@ Renders a `<button>` element.
 | handle       | `Tooltip.Handle<Payload>`                                                                     | -       | A handle to associate the trigger with a tooltip.                                                                                                                                                                                                                                                |
 | payload      | `Payload`                                                                                     | -       | A payload to pass to the tooltip when it is opened.                                                                                                                                                                                                                                              |
 | disabled     | `boolean`                                                                                     | `false` | If `true`, the tooltip will not open when interacting with this trigger.&#xA;Note that this doesn't apply the `disabled` attribute to the trigger element.&#xA;If you want to disable the trigger element itself, you can pass the `disabled` prop to the trigger element via the `render` prop. |
-| delay        | `number`                                                                                      | `600`   | How long to wait before opening the tooltip. Specified in milliseconds.                                                                                                                                                                                                                          |
+| delay        | `number`                                                                                      | `600`   | How long to wait before opening the tooltip on hover. Specified in milliseconds.                                                                                                                                                                                                                 |
 | closeDelay   | `number`                                                                                      | `0`     | How long to wait before closing the tooltip. Specified in milliseconds.                                                                                                                                                                                                                          |
 | className    | `string \| ((state: Tooltip.Trigger.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: Tooltip.Trigger.State) => React.CSSProperties \| undefined)` | -       | Style applied to the element, or a function that&#xA;returns a style object based on the component's state.                                                                                                                                                                                      |
@@ -2309,13 +2312,15 @@ Renders a `<div>` element.
 
 **Positioner CSS Variables:**
 
-| Variable             | Type     | Description                                                                            |
-| :------------------- | :------- | :------------------------------------------------------------------------------------- |
-| `--anchor-height`    | `number` | The anchor's height.                                                                   |
-| `--anchor-width`     | `number` | The anchor's width.                                                                    |
-| `--available-height` | `number` | The available height between the trigger and the edge of the viewport.                 |
-| `--available-width`  | `number` | The available width between the trigger and the edge of the viewport.                  |
-| `--transform-origin` | `string` | The coordinates that this element is anchored to. Used for animations and transitions. |
+| Variable              | Type     | Description                                                                                                                       |
+| :-------------------- | :------- | :-------------------------------------------------------------------------------------------------------------------------------- |
+| `--anchor-height`     | `number` | The anchor's height.                                                                                                              |
+| `--anchor-width`      | `number` | The anchor's width.                                                                                                               |
+| `--available-height`  | `number` | The available height between the trigger and the edge of the viewport.                                                            |
+| `--available-width`   | `number` | The available width between the trigger and the edge of the viewport.                                                             |
+| `--positioner-height` | `number` | The height of the tooltip's positioner.&#xA;It is important to set `height` to this value when using CSS to animate size changes. |
+| `--positioner-width`  | `number` | The width of the tooltip's positioner.&#xA;It is important to set `width` to this value when using CSS to animate size changes.   |
+| `--transform-origin`  | `string` | The coordinates that this element is anchored to. Used for animations and transitions.                                            |
 
 ### Positioner.Props
 
@@ -2360,7 +2365,7 @@ Renders a `<div>` element.
 | data-align          | `'start' \| 'center' \| 'end'`                                             | Indicates how the popup is aligned relative to specified side.        |
 | data-instant        | `'delay' \| 'dismiss' \| 'focus'`                                          | Present if animations should be instant.                              |
 | data-side           | `'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 tooltip is animating in.                             |
+| data-starting-style | -                                                                          | Present when the tooltip begins animating in.                         |
 | data-ending-style   | -                                                                          | Present when the tooltip is animating out.                            |
 
 ### Popup.Props
@@ -2491,13 +2496,18 @@ type ReturnValue = Tooltip.Handle<Payload>;
 
 ### Handle
 
-A handle to control a tooltip imperatively and to associate detached triggers with it.
+Controls a Tooltip imperatively and associates detached `Tooltip.Trigger` components with a
+`Tooltip.Root`. Create one with `Tooltip.createHandle()` and pass it to the `handle` prop of the
+root and of any triggers rendered outside of it.
+
+The imperative methods take effect only while a root using this handle is mounted; calls made
+before a root attaches (or after it unmounts) are ignored.
 
 **Properties:**
 
-| Property | Type      | Modifiers | Description                                      |
-| :------- | :-------- | :-------- | :----------------------------------------------- |
-| isOpen   | `boolean` | readonly  | Indicates whether the tooltip is currently open. |
+| Property | Type      | Modifiers | Description                                                                                     |
+| :------- | :-------- | :-------- | :---------------------------------------------------------------------------------------------- |
+| isOpen   | `boolean` | readonly  | Whether the tooltip is currently open. Returns `false` while no root is attached to the handle. |
 
 **Methods:**
 
@@ -2505,8 +2515,7 @@ A handle to control a tooltip imperatively and to associate detached triggers wi
 function open(triggerId: string): void;
 ```
 
-Opens the tooltip and associates it with the trigger with the given ID.
-The trigger must be a Tooltip.Trigger component with this handle passed as a prop.
+Opens the tooltip and associates it with the trigger with the given id.
 
 This method should only be called in an event handler or an effect (not during rendering).
 
@@ -2516,6 +2525,8 @@ function close(): void;
 
 Closes the tooltip.
 
+This method should only be called in an event handler or an effect (not during rendering).
+
 ## External Types
 
 ### PayloadChildRenderFunction
@@ -2591,6 +2602,8 @@ Maps `Canonical`: `Alias` — Use Canonical when its namespace is already import
 - `Tooltip.Viewport.Props`: `TooltipViewportProps`
 - `Tooltip.Viewport.State`: `TooltipViewportState`
 
+The `Viewport` is optional — reach for it only when a single popup is opened by multiple triggers, its content differs per trigger, and the switch between them is animated. When used, set `width: var(--positioner-width)` and `height: var(--positioner-height)` on the `Positioner` so its box is frozen to the measured size during the transition; otherwise content-driven resizing can make the popup thrash or flip to another side.
+
 ## createHandle
 
 [//]: # '@exclude-table-of-contents'

package/docs/react/handbook/animation.md

@@ -148,7 +148,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) {
@@ -327,7 +327,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) {
@@ -491,7 +491,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) {

package/docs/react/handbook/forms.md

@@ -984,7 +984,7 @@ export function Trigger({ className, ...props }: Select.Trigger.Props) {
   return (
     <Select.Trigger
       className={clsx(
-        'flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white pl-2 pr-1 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800',
+        'flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white pl-2 pr-1 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 data-pressed:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-pressed:bg-neutral-800',
         className,
       )}
       {...props}
@@ -2680,7 +2680,7 @@ export function Trigger({ className, ...props }: Select.Trigger.Props) {
   return (
     <Select.Trigger
       className={clsx(
-        'flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white pl-2 pr-1 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800',
+        'flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white pl-2 pr-1 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 data-pressed:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-pressed:bg-neutral-800',
         className,
       )}
       {...props}
@@ -4206,7 +4206,7 @@ export function Trigger({ className, ...props }: Select.Trigger.Props) {
   return (
     <Select.Trigger
       className={clsx(
-        'flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white pl-2 pr-1 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800',
+        'flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white pl-2 pr-1 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 data-pressed:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-pressed:bg-neutral-800',
         className,
       )}
       {...props}

package/docs/react/handbook/styling.md

@@ -77,7 +77,7 @@ import { Menu } from '@base-ui/react/menu';
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center rounded-md border border-neutral-950 bg-white px-3 text-sm text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800 dark:focus-visible:outline-white">
+      <Menu.Trigger className="flex h-8 items-center justify-center rounded-md border border-neutral-950 bg-white px-3 text-sm text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 data-pressed:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-pressed:bg-neutral-800 dark:focus-visible:outline-white">
         Song
       </Menu.Trigger>
       <Menu.Portal>

package/docs/react/overview/about.md

@@ -36,14 +36,13 @@ Component APIs are fully open, so you have direct access to each node, you can e
 
 ## Team
 
-- **Colm Tuite** (Radix) [@colmtuite](https://x.com/colmtuite)
-- **James Nelson** (Floating UI) [@atomiksdev](https://x.com/atomiksdev)
-- **Michał Dudak** (Material UI) [@michaldudak](https://x.com/michaldudak)
-- **Marija Najdova** (Material UI + Fluent UI) [@marijanajdova](https://x.com/marijanajdova)
-- **Albert Yu** (Material UI) [@mj12albert](https://github.com/mj12albert)
-- **Lukas Tyla** (Material UI) [@LukasTy](https://github.com/LukasTy)
-- **Aarón García** [@aarongarciah](https://github.com/aarongarciah)
+- **Colm Tuite** [@colmtuite](https://x.com/colmtuite)
+- **Marija Najdova** [@marijanajdova](https://x.com/marijanajdova)
+- **Flavien Delangle** [@flaviendelangle](https://github.com/flaviendelangle)
+- **James Nelson** [@atomiksdev](https://x.com/atomiksdev)
 - **Jenna Smith** [@jjenzz](https://x.com/jjenzz)
+- **Michał Dudak** [@michaldudak](https://x.com/michaldudak)
+- **Aarón García** [@aarongarciah](https://github.com/aarongarciah)
 
 ## Browser support
 
@@ -56,6 +55,10 @@ For the full list of supported browsers, refer to our [.browserslistrc](https://
 
 Base UI supports React 17 and newer versions.
 
+## Bundler support
+
+Base UI works with maintained versions of all popular bundlers, including Vite, webpack, Turbopack and Parcel.
+
 ## Community
 
 Visit the [Community](/react/overview/community.md) page to learn more about ecosystem projects, support channels, and how to stay up to date and contribute.

package/docs/react/overview/community.md

@@ -12,9 +12,9 @@ description: Learn how to use Base UI with styles, where to get help, how to st
 
 Learn how to use Base UI with styles, where to get help, how to stay up to date, and how to contribute.
 
-## shadcn/ui integration
+## shadcn/ui
 
-Base UI now has a first-class [shadcn/ui](https://ui.shadcn.com/create?base=base) integration. So if you want wrapper components styled with Tailwind—rather than handling the styling and API surface yourself—you can [create](https://ui.shadcn.com/create?base=base) a component library via the shadcn/ui create tool with Base UI as its foundation. Alternatively, choose Base UI when installing components using the shadcn/ui CLI.
+[shadcn/ui](https://ui.shadcn.com/) uses Base UI as its unstyled foundation. If you want Tailwind-styled wrapper components and higher-level APIs without building that layer yourself, you can create a component library with the shadcn/ui [create](https://ui.shadcn.com/create) tool.
 
 ## Styled libraries
 
@@ -23,18 +23,16 @@ Here's a non-exhaustive list of open-source styled libraries built with Base UI
 - [Kumo](https://kumo-ui.com): Cloudflare's component library for building modern web applications.
 - [coss ui](https://coss.com/ui): a modern UI component library. Built by the people behind [cal.com](https://cal.com).
 - [Fragments](https://www.usefragments.com): a design system platform that includes a component library built on Base UI.
-- [9ui](https://www.9ui.dev): copy-paste components that adapt to your design.
-- [Prototyper UI](https://prototyper-ui.com): components that agents can read, compose, and render.
 - [Lumi UI](https://www.lumiui.dev): composable React components.
 - [Olyx UI](https://www.olyxui.com): composable components styled with native CSS and HCT color system.
 - [ReUI](https://reui.io): a large collection of components and templates built on shadcn/ui.
-- [Fig UI](https://figui.dev): a Figma UI3 style component library for use in Figma plugins.
-- [Selia](https://selia.earth): a collection of components designed for visual cohesion.
+- [FigUI](https://figui.dev): a Figma UI3 style component library for building Figma plugins.
 
 ## Unofficial ports
 
 - [base-ui-solid](https://github.com/msviderok/base-ui-solid): unofficial port of Base UI to SolidJS.
 - [base-ui-vue](https://github.com/vuepont/base-ui-vue): unofficial port of Base UI to Vue.
+- [radix-ng](https://github.com/radix-ng/primitives): unofficial Angular adaptation of Base UI architecture and behavior (originally a Radix UI port).
 
 ## Get help and contribute
 
@@ -51,7 +49,7 @@ For community support, questions, tips, and showcases, join our [Discord](https:
 
 ### X
 
-The best way to stay up to date on new releases and announcements is to follow [@base_ui](https://x.com/base_ui) on X.
+The best way to stay up to date on new releases and announcements is to follow [@base\_ui](https://x.com/base_ui) on X.
 
 ### Bluesky
 

package/docs/react/overview/quick-start.md

@@ -93,7 +93,7 @@ This example shows how to implement the component using Tailwind CSS.
 import { Popover } from '@base-ui/react/popover';
 
 const triggerClassName =
-  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap 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 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap 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 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
 
 export default function ExamplePopover() {
   return (
@@ -277,7 +277,7 @@ This example shows how to implement the component using CSS Modules.
     }
   }
 
-  &[data-popup-open]:not([data-disabled], :disabled) {
+  &[data-pressed]:not([data-disabled], :disabled) {
     background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
@@ -335,7 +335,7 @@ export default function ExamplePopover() {
 
 ## Pre-styled components
 
-[shadcn/ui](https://ui.shadcn.com/create?base=base) is a great place to start if you need pre-styled components with higher-level abstractions while using Base UI under the hood.
+[shadcn/ui](https://ui.shadcn.com/) is a great place to start if you need pre-styled components with higher-level abstractions. It uses Base UI as its unstyled foundation.
 
 Take a look at the [Community](/react/overview/community.md) page to see more styled libraries powered by Base UI.