@base-ui/react 1.7.0 → 1.8.0

package/docs/react/components/dialog.md

@@ -325,45 +325,389 @@ It's also common to use `onOpenChange` if your app needs to do something when th
 
 In order to open a dialog using a menu, control the dialog state and open it imperatively using the `onClick` handler on the menu item.
 
-```tsx title="Connecting a dialog to a menu"
+## Demo
+
+### Tailwind
+
+This example shows how to implement the component using Tailwind CSS.
+
+```tsx
+/* index.tsx */
+'use client';
+import * as React from 'react';
+import { Dialog } from '@base-ui/react/dialog';
+import { Menu } from '@base-ui/react/menu';
+
+export default function ExampleDialog() {
+  const [dialogOpen, setDialogOpen] = React.useState(false);
+
+  return (
+    <React.Fragment>
+      <Menu.Root>
+        <Menu.Trigger className={buttonClass}>
+          Playlist <CaretDownIcon />
+        </Menu.Trigger>
+        <Menu.Portal>
+          <Menu.Positioner className="outline-hidden" sideOffset={8} align="start">
+            <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+              <Menu.Item className={itemClass}>Play</Menu.Item>
+              <Menu.Item className={itemClass}>Share</Menu.Item>
+              <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
+              {/* Open the dialog when the menu item is clicked */}
+              <Menu.Item className={itemClass} onClick={() => setDialogOpen(true)}>
+                Details…
+              </Menu.Item>
+            </Menu.Popup>
+          </Menu.Positioner>
+        </Menu.Portal>
+      </Menu.Root>
+
+      {/* Control the dialog state */}
+      <Dialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>
+        <Dialog.Portal>
+          <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
+          <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+            <div className="flex flex-col gap-1">
+              <Dialog.Title className="text-base font-bold">Playlist details</Dialog.Title>
+              <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+                This playlist contains 24 songs and was last updated today.
+              </Dialog.Description>
+            </div>
+            <div className="flex justify-end gap-3">
+              <Dialog.Close className={buttonClass}>Close</Dialog.Close>
+            </div>
+          </Dialog.Popup>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </React.Fragment>
+  );
+}
+
+const buttonClass =
+  'flex h-8 items-center justify-center gap-1.5 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-pressed:bg-neutral-100 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-pressed:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
+
+const itemClass =
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white";
+
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
+    </svg>
+  );
+}
+```
+
+### CSS Modules
+
+This example shows how to implement the component using CSS Modules.
+
+```css
+/* index.module.css */
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  margin: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
+  -webkit-user-select: none;
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-pressed] {
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
+}
+
+.Positioner {
+  outline: 0;
+}
+
+.MenuPopup {
+  box-sizing: border-box;
+  position: relative;
+  outline: 0;
+  padding-block: 0.25rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+  transform-origin: var(--transform-origin);
+  transition:
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+}
+
+.MenuItem {
+  outline: 0;
+  cursor: default;
+  -webkit-user-select: none;
+  user-select: none;
+  padding-block: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 2rem;
+  display: flex;
+  font-size: 0.875rem;
+  line-height: 1rem;
+
+  &[data-highlighted] {
+    z-index: 0;
+    position: relative;
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
+  }
+
+  &[data-highlighted]::before {
+    content: '';
+    z-index: -1;
+    position: absolute;
+    inset-block: 0;
+    inset-inline: 0.25rem;
+    background-color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
+  }
+}
+
+.Separator {
+  margin: 0.25rem;
+  height: 1px;
+  background-color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
+}
+
+.Backdrop {
+  position: fixed;
+  min-height: 100dvh;
+  inset: 0;
+  background-color: black;
+  opacity: 0.2;
+  transition: opacity 150ms;
+
+  /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
+  @supports (-webkit-touch-callout: none) {
+    position: absolute;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    opacity: 0.5;
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+  }
+}
+
+.DialogPopup {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 24rem;
+  max-width: calc(100vw - 3rem);
+  margin-top: -2rem;
+  padding: 1rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+  transition:
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.98);
+  }
+}
+
+.Intro {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.Title {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+}
+
+.Description {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
+}
+
+.Actions {
+  display: flex;
+  justify-content: end;
+  gap: 0.75rem;
+}
+```
+
+```tsx
+/* index.tsx */
+'use client';
 import * as React from 'react';
 import { Dialog } from '@base-ui/react/dialog';
 import { Menu } from '@base-ui/react/menu';
+import styles from './index.module.css';
 
-function ExampleMenu() {
+export default function ExampleDialog() {
   const [dialogOpen, setDialogOpen] = React.useState(false);
 
   return (
     <React.Fragment>
       <Menu.Root>
-        <Menu.Trigger>Open menu</Menu.Trigger>
+        <Menu.Trigger className={styles.Button}>
+          Playlist <CaretDownIcon />
+        </Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner>
-            <Menu.Popup>
-              {/* @highlight-start */}
+          <Menu.Positioner className={styles.Positioner} sideOffset={8} align="start">
+            <Menu.Popup className={styles.MenuPopup}>
+              <Menu.Item className={styles.MenuItem}>Play</Menu.Item>
+              <Menu.Item className={styles.MenuItem}>Share</Menu.Item>
+              <Menu.Separator className={styles.Separator} />
               {/* Open the dialog when the menu item is clicked */}
-              <Menu.Item onClick={() => setDialogOpen(true)}>Open dialog</Menu.Item>
-              {/* @highlight-end */}
+              <Menu.Item className={styles.MenuItem} onClick={() => setDialogOpen(true)}>
+                Details…
+              </Menu.Item>
             </Menu.Popup>
           </Menu.Positioner>
         </Menu.Portal>
       </Menu.Root>
 
-      {/* @highlight-start */}
       {/* Control the dialog state */}
       <Dialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>
-        {/* @highlight-end */}
         <Dialog.Portal>
-          <Dialog.Backdrop />
-          <Dialog.Popup>
-            {/* prettier-ignore */}
-            {/* Rest of the dialog */}
+          <Dialog.Backdrop className={styles.Backdrop} />
+          <Dialog.Popup className={styles.DialogPopup}>
+            <div className={styles.Intro}>
+              <Dialog.Title className={styles.Title}>Playlist details</Dialog.Title>
+              <Dialog.Description className={styles.Description}>
+                This playlist contains 24 songs and was last updated today.
+              </Dialog.Description>
+            </div>
+            <div className={styles.Actions}>
+              <Dialog.Close className={styles.Button}>Close</Dialog.Close>
+            </div>
           </Dialog.Popup>
         </Dialog.Portal>
       </Dialog.Root>
     </React.Fragment>
   );
 }
+
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
+    </svg>
+  );
+}
 ```
 
 ### Nested dialogs

package/docs/react/components/field.md

@@ -182,20 +182,20 @@ Renders a `<div>` element.
 
 **Root Props:**
 
-| Prop                   | Type                                                                                                               | Default      | Description                                                                                                                                                                                                                                                                                                                                                   |
-| :--------------------- | :----------------------------------------------------------------------------------------------------------------- | :----------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| name                   | `string`                                                                                                           | -            | Identifies the field when a form is submitted.&#xA;Takes precedence over the `name` prop on the `<Field.Control>` component.                                                                                                                                                                                                                                  |
-| actionsRef             | `React.RefObject<Field.Root.Actions \| null>`                                                                      | -            | A ref to imperative actions. `validate`: Validates the field when called.                                                                                                                                                                                                                                                                                     |
-| dirty                  | `boolean`                                                                                                          | -            | Whether the field's value has been changed from its initial value.&#xA;Useful when the field state is controlled by an external library.                                                                                                                                                                                                                      |
-| touched                | `boolean`                                                                                                          | -            | Whether the field has been touched.&#xA;Useful when the field state is controlled by an external library.                                                                                                                                                                                                                                                     |
-| disabled               | `boolean`                                                                                                          | `false`      | Whether the component should ignore user interaction.&#xA;Takes precedence over the `disabled` prop on the `<Field.Control>` component.                                                                                                                                                                                                                       |
-| invalid                | `boolean`                                                                                                          | -            | Whether the field is invalid.&#xA;Useful when the field state is controlled by an external library.                                                                                                                                                                                                                                                           |
-| validate               | `((value: unknown, formValues: Form.Values) => string \| string[] \| Promise<string \| string[] \| null> \| null)` | -            | A function for custom validation. Return a string or an array of strings with&#xA;the error message(s) if the value is invalid, or `null` if the value is valid.&#xA;Asynchronous functions are supported, but they do not prevent form submission&#xA;when using `validationMode="onSubmit"`.                                                                |
-| validationMode         | `Form.ValidationMode`                                                                                              | `'onSubmit'` | Determines when the field should be validated.&#xA;This takes precedence over the `validationMode` prop on `<Form>`. `onSubmit`: triggers validation when the form is submitted, and re-validates on change after submission.`onBlur`: triggers validation when the control loses focus.`onChange`: triggers validation on every change to the control value. |
-| validationDebounceTime | `number`                                                                                                           | `0`          | How long to wait between `validate` callbacks if&#xA;`validationMode="onChange"` is used. Specified in milliseconds.                                                                                                                                                                                                                                          |
-| className              | `string \| ((state: Field.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: Field.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: Field.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.&#xA;Takes precedence over the `name` prop on the `<Field.Control>` component.                                                                                                                                                                                                                                  |
+| actionsRef             | `React.RefObject<Field.Root.Actions \| null>`                                                                                      | -            | A ref to imperative actions. `validate`: Validates the field when called.                                                                                                                                                                                                                                                                                     |
+| dirty                  | `boolean`                                                                                                                          | -            | Whether the field's value has been changed from its initial value.&#xA;Useful when the field state is controlled by an external library.                                                                                                                                                                                                                      |
+| touched                | `boolean`                                                                                                                          | -            | Whether the field has been touched.&#xA;Useful when the field state is controlled by an external library.                                                                                                                                                                                                                                                     |
+| disabled               | `boolean`                                                                                                                          | `false`      | Whether the component should ignore user interaction.&#xA;Takes precedence over the `disabled` prop on the `<Field.Control>` component.                                                                                                                                                                                                                       |
+| invalid                | `boolean`                                                                                                                          | -            | Whether the field is invalid.&#xA;Useful when the field state is controlled by an external library.                                                                                                                                                                                                                                                           |
+| validate               | `((value: unknown, formValues: Form.Values) => string \| void \| string[] \| Promise<string \| void \| string[] \| null> \| null)` | -            | A function for custom validation. Return a string or an array of strings with&#xA;the error message(s) if the value is invalid. Returning nothing, `null`, an empty&#xA;string, or an empty array means the value is valid.&#xA;Asynchronous functions are supported, but they do not prevent form submission&#xA;when using `validationMode="onSubmit"`.     |
+| validationMode         | `Form.ValidationMode`                                                                                                              | `'onSubmit'` | Determines when the field should be validated.&#xA;This takes precedence over the `validationMode` prop on `<Form>`. `onSubmit`: triggers validation when the form is submitted, and re-validates on change after submission.`onBlur`: triggers validation when the control loses focus.`onChange`: triggers validation on every change to the control value. |
+| validationDebounceTime | `number`                                                                                                                           | `0`          | How long to wait between `validate` callbacks if&#xA;`validationMode="onChange"` is used. Specified in milliseconds.                                                                                                                                                                                                                                          |
+| className              | `string \| ((state: Field.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: Field.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: Field.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:**
 

package/docs/react/components/menu.md

@@ -4281,6 +4281,7 @@ Renders a `<button>` element.
 | :-------------- | :--- | :------------------------------------------- |
 | data-popup-open | -    | Present when the corresponding menu is open. |
 | data-pressed    | -    | Present when the trigger is pressed.         |
+| data-disabled   | -    | Present when the trigger is disabled.        |
 
 ### Trigger.Props
 
@@ -4370,9 +4371,9 @@ Renders a `<div>` element.
 | Prop                  | Type                                                                                                                 | Default                | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | :-------------------- | :------------------------------------------------------------------------------------------------------------------- | :--------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | disableAnchorTracking | `boolean`                                                                                                            | `false`                | Whether to disable the popup from tracking any layout shift of its positioning anchor.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| align                 | `Align`                                                                                                              | `'center'`             | How to align the popup relative to the specified side.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| align                 | `Align`                                                                                                              | `'center'`             | How to align the popup relative to the specified side. Submenus and menubars default to `'start'`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | alignOffset           | `number \| OffsetFunction`                                                                                           | `0`                    | Additional offset along the alignment axis in pixels.&#xA;Also accepts a function that returns the offset to read the dimensions of the anchor&#xA;and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.`data.positioner`: the dimensions of the positioner element with properties `width` and `height`.`data.side`: which side of the anchor element the positioner is aligned against.`data.align`: how the positioner is aligned relative to the specified side.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| side                  | `Side`                                                                                                               | `'bottom'`             | Which side of the anchor element to align the popup against.&#xA;May automatically change to avoid collisions.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| side                  | `Side`                                                                                                               | `'bottom'`             | Which side of the anchor element to align the popup against.&#xA;May automatically change to avoid collisions. Submenus and vertical menubars default to `'inline-end'`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | sideOffset            | `number \| OffsetFunction`                                                                                           | `0`                    | Distance between the anchor and the popup in pixels.&#xA;Also accepts a function that returns the distance to read the dimensions of the anchor&#xA;and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.`data.positioner`: the dimensions of the positioner element with properties `width` and `height`.`data.side`: which side of the anchor element the positioner is aligned against.`data.align`: how the positioner is aligned relative to the specified side.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | arrowPadding          | `number`                                                                                                             | `5`                    | Minimum distance to maintain between the arrow and the edges of the popup. Use it to prevent the arrow element from hanging out of the rounded corners of a popup.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | anchor                | `Element \| VirtualElement \| React.RefObject<Element \| null> \| (() => Element \| VirtualElement \| null) \| null` | -                      | An element to position the popup against.&#xA;By default, the popup will be positioned against the trigger.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
@@ -4419,13 +4420,13 @@ Renders a `<div>` element.
 
 **Positioner Data Attributes:**
 
-| Attribute          | Type                                                                       | Description                                                           |
-| :----------------- | :------------------------------------------------------------------------- | :-------------------------------------------------------------------- |
-| data-open          | -                                                                          | Present when the menu popup is open.                                  |
-| data-closed        | -                                                                          | Present when the menu popup is closed.                                |
-| data-anchor-hidden | -                                                                          | Present when the anchor is hidden.                                    |
-| data-align         | `'start' \| 'center' \| 'end'`                                             | Indicates how the popup is aligned relative to specified side.        |
-| data-side          | `'top' \| 'bottom' \| 'left' \| 'right' \| 'inline-end' \| 'inline-start'` | Indicates which side the popup is positioned relative to the trigger. |
+| Attribute          | Type                                                                       | Description                                                          |
+| :----------------- | :------------------------------------------------------------------------- | :------------------------------------------------------------------- |
+| data-open          | -                                                                          | Present when the menu popup is open.                                 |
+| data-closed        | -                                                                          | Present when the menu popup is closed.                               |
+| data-anchor-hidden | -                                                                          | Present when the anchor is hidden.                                   |
+| data-align         | `'start' \| 'center' \| 'end'`                                             | Indicates how the popup is aligned relative to the specified side.   |
+| data-side          | `'top' \| 'bottom' \| 'left' \| 'right' \| 'inline-end' \| 'inline-start'` | Indicates which side the popup is positioned relative to the anchor. |
 
 **Positioner CSS Variables:**
 
@@ -4433,8 +4434,8 @@ Renders a `<div>` element.
 | :-------------------- | :------- | :----------------------------------------------------------------------------------------------------------------------------- |
 | `--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.                                                          |
+| `--available-height`  | `number` | The available height between the anchor and the edge of the viewport.                                                          |
+| `--available-width`   | `number` | The available width between the anchor and the edge of the viewport.                                                           |
 | `--positioner-height` | `number` | The height of the menu'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 menu'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.                                         |
@@ -4479,15 +4480,15 @@ Renders a `<div>` element.
 
 **Popup Data Attributes:**
 
-| Attribute           | Type                                                                       | Description                                                           |
-| :------------------ | :------------------------------------------------------------------------- | :-------------------------------------------------------------------- |
-| data-open           | -                                                                          | Present when the menu is open.                                        |
-| data-closed         | -                                                                          | Present when the menu is closed.                                      |
-| data-align          | `'start' \| 'center' \| 'end'`                                             | Indicates how the popup is aligned relative to specified side.        |
-| data-instant        | `'click' \| 'dismiss' \| 'group' \| 'trigger-change'`                      | 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 menu begins animating in.                            |
-| data-ending-style   | -                                                                          | Present when the menu is animating out.                               |
+| Attribute           | Type                                                                       | Description                                                          |
+| :------------------ | :------------------------------------------------------------------------- | :------------------------------------------------------------------- |
+| data-open           | -                                                                          | Present when the menu is open.                                       |
+| data-closed         | -                                                                          | Present when the menu is closed.                                     |
+| data-align          | `'start' \| 'center' \| 'end'`                                             | Indicates how the popup is aligned relative to specified side.       |
+| data-instant        | `'click' \| 'dismiss' \| 'group' \| 'trigger-change'`                      | 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 anchor. |
+| data-starting-style | -                                                                          | Present when the menu begins animating in.                           |
+| data-ending-style   | -                                                                          | Present when the menu is animating out.                              |
 
 ### Popup.Props
 
@@ -4527,13 +4528,13 @@ Renders a `<div>` element.
 
 **Arrow Data Attributes:**
 
-| Attribute       | Type                                                                       | Description                                                           |
-| :-------------- | :------------------------------------------------------------------------- | :-------------------------------------------------------------------- |
-| data-open       | -                                                                          | Present when the menu popup is open.                                  |
-| data-closed     | -                                                                          | Present when the menu popup is closed.                                |
-| data-uncentered | -                                                                          | Present when the menu arrow is uncentered.                            |
-| data-align      | `'start' \| 'center' \| 'end'`                                             | Indicates how the popup is aligned relative to specified side.        |
-| data-side       | `'top' \| 'bottom' \| 'left' \| 'right' \| 'inline-end' \| 'inline-start'` | Indicates which side the popup is positioned relative to the trigger. |
+| Attribute       | Type                                                                       | Description                                                          |
+| :-------------- | :------------------------------------------------------------------------- | :------------------------------------------------------------------- |
+| data-open       | -                                                                          | Present when the menu popup is open.                                 |
+| data-closed     | -                                                                          | Present when the menu popup is closed.                               |
+| data-uncentered | -                                                                          | Present when the menu arrow is uncentered.                           |
+| data-align      | `'start' \| 'center' \| 'end'`                                             | Indicates how the popup is aligned relative to specified side.       |
+| data-side       | `'top' \| 'bottom' \| 'left' \| 'right' \| 'inline-end' \| 'inline-start'` | Indicates which side the popup is positioned relative to the anchor. |
 
 ### Arrow\.Props
 
@@ -4813,7 +4814,7 @@ Renders a `<div>` element.
 | onClick      | `((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void)`                    | -       | -                                                                                                                                                                                             |
 | nativeButton | `boolean`                                                                                         | `false` | Whether the component renders a native `<button>` element when replacing it&#xA;via the `render` prop.&#xA;Set to `true` if the rendered element is a native button.                          |
 | disabled     | `boolean`                                                                                         | `false` | Whether the component should ignore user interaction.                                                                                                                                         |
-| openOnHover  | `boolean`                                                                                         | -       | Whether the menu should also open when the trigger is hovered.                                                                                                                                |
+| openOnHover  | `boolean`                                                                                         | `true`  | Whether the menu should also open when the trigger is hovered.                                                                                                                                |
 | delay        | `number`                                                                                          | `100`   | How long to wait before the menu may be opened on hover. Specified in milliseconds. Requires the `openOnHover` prop.                                                                          |
 | closeDelay   | `number`                                                                                          | `0`     | How long to wait before closing the menu that was opened on hover.&#xA;Specified in milliseconds. Requires the `openOnHover` prop.                                                            |
 | className    | `string \| ((state: Menu.SubmenuTrigger.State) => string \| undefined)`                           | -       | CSS class applied to the element, or a function that&#xA;returns a class based on the component's state.                                                                                      |

package/docs/react/components/navigation-menu.md

@@ -2827,6 +2827,7 @@ Renders a `<button>` element.
 | Prop         | Type                                                                                                 | Default | Description                                                                                                                                                                                   |
 | :----------- | :--------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | nativeButton | `boolean`                                                                                            | `true`  | Whether the component renders a native `<button>` element when replacing it&#xA;via the `render` prop.&#xA;Set to `false` if the rendered element is not a button (for example, `<div>`).     |
+| disabled     | `boolean`                                                                                            | `false` | Whether the component should ignore user interaction.                                                                                                                                         |
 | className    | `string \| ((state: NavigationMenu.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: NavigationMenu.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.                                                                                   |
 | render       | `ReactElement \| ((props: HTMLProps, state: NavigationMenu.Trigger.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. |
@@ -2837,6 +2838,7 @@ Renders a `<button>` element.
 | :-------------- | :--- | :------------------------------------------------------ |
 | data-popup-open | -    | Present when the corresponding navigation menu is open. |
 | data-pressed    | -    | Present when the trigger is pressed.                    |
+| data-disabled   | -    | Present when the trigger is disabled.                   |
 
 ### Trigger.Props
 
@@ -2848,6 +2850,8 @@ Re-export of [Trigger](/react/components/navigation-menu.md) props.
 type NavigationMenuTriggerState = {
   /** If `true`, the popup is open and the item is active. */
   open: boolean;
+  /** Whether the component should ignore user interaction. */
+  disabled: boolean;
 };
 ```
 

package/docs/react/components/popover.md

@@ -2098,6 +2098,7 @@ Renders a `<button>` element.
 | :-------------- | :--- | :---------------------------------------------- |
 | data-popup-open | -    | Present when the corresponding popover is open. |
 | data-pressed    | -    | Present when the trigger is pressed.            |
+| data-disabled   | -    | Present when the trigger is disabled.           |
 
 ### Trigger.Props