diff --git a/docs/data/components/accordion/accordion.mdx b/docs/data/components/accordion/accordion.mdx
index a95da3bdd7..b988cab337 100644
--- a/docs/data/components/accordion/accordion.mdx
+++ b/docs/data/components/accordion/accordion.mdx
@@ -211,8 +211,8 @@ Accordion uses [`Collapsible`](/components/react-collapsible) internally, and ca
 Three states are available as data attributes to animate the `Accordion.Panel`:
 
 - `[data-open]` - `open` state is `true`.
-- `[data-entering]` - the `hidden` attribute was just removed from the DOM and the panel element participates in page layout. The `data-entering` attribute will be removed 1 animation frame later.
-- `[data-exiting]` - the panel element is in the process of being hidden from the DOM, but is still mounted.
+- `[data-starting-style]` - the `hidden` attribute was just removed from the DOM and the panel element participates in page layout. The `data-starting-style` attribute will be removed 1 animation frame later.
+- `[data-ending-style]` - the panel element is in the process of being hidden from the DOM, but is still mounted.
 
 The component can be animate when opening or closing using either:
 
@@ -266,7 +266,7 @@ When using CSS transitions, styles for the `Panel` must be applied to three stat
 
 - The exiting styles, placed on the base element class
 - The open styles, placed on the base element class with `[data-state="open"]`
-- The entering styles, placed on the base element class with `[data-entering]`
+- The entering styles, placed on the base element class with `[data-starting-style]`
 
 ```css
 .AccordionPanel {
@@ -283,7 +283,7 @@ When using CSS transitions, styles for the `Panel` must be applied to three stat
 }
 
 /* The initial styles when opening/entering */
-.AccordionPanel[data-entering] {
+.AccordionPanel[data-starting-style] {
   height: 0;
 }
 ```
diff --git a/docs/data/components/alert-dialog/AlertDialogWithTransitions.js b/docs/data/components/alert-dialog/AlertDialogWithTransitions.js
index 6af74fa1c6..dfca742584 100644
--- a/docs/data/components/alert-dialog/AlertDialogWithTransitions.js
+++ b/docs/data/components/alert-dialog/AlertDialogWithTransitions.js
@@ -57,7 +57,7 @@ const Popup = styled(BaseAlertDialog.Popup)(
     transition-timing-function: ease-out;
   }
 
-  &[data-entering] {
+  &[data-starting-style] {
     opacity: 0;
     transform: translate(-50%, -35%) scale(0.8);
   }
@@ -81,7 +81,7 @@ const Backdrop = styled(BaseAlertDialog.Backdrop)`
     transition-timing-function: ease-out;
   }
 
-  &[data-entering] {
+  &[data-starting-style] {
     backdrop-filter: blur(0);
     opacity: 0;
   }
diff --git a/docs/data/components/alert-dialog/AlertDialogWithTransitions.tsx b/docs/data/components/alert-dialog/AlertDialogWithTransitions.tsx
index 6af74fa1c6..dfca742584 100644
--- a/docs/data/components/alert-dialog/AlertDialogWithTransitions.tsx
+++ b/docs/data/components/alert-dialog/AlertDialogWithTransitions.tsx
@@ -57,7 +57,7 @@ const Popup = styled(BaseAlertDialog.Popup)(
     transition-timing-function: ease-out;
   }
 
-  &[data-entering] {
+  &[data-starting-style] {
     opacity: 0;
     transform: translate(-50%, -35%) scale(0.8);
   }
@@ -81,7 +81,7 @@ const Backdrop = styled(BaseAlertDialog.Backdrop)`
     transition-timing-function: ease-out;
   }
 
-  &[data-entering] {
+  &[data-starting-style] {
     backdrop-filter: blur(0);
     opacity: 0;
   }
diff --git a/docs/data/components/alert-dialog/NestedAlertDialogs.js b/docs/data/components/alert-dialog/NestedAlertDialogs.js
index 0b1fdffcfa..1350d0194f 100644
--- a/docs/data/components/alert-dialog/NestedAlertDialogs.js
+++ b/docs/data/components/alert-dialog/NestedAlertDialogs.js
@@ -130,7 +130,7 @@ const Backdrop = styled(BaseAlertDialog.Backdrop)`
     transition-timing-function: ease-out;
   }
 
-  &[data-entering] {
+  &[data-starting-style] {
     backdrop-filter: blur(0);
     opacity: 0;
   }
diff --git a/docs/data/components/alert-dialog/NestedAlertDialogs.tsx b/docs/data/components/alert-dialog/NestedAlertDialogs.tsx
index 0b1fdffcfa..1350d0194f 100644
--- a/docs/data/components/alert-dialog/NestedAlertDialogs.tsx
+++ b/docs/data/components/alert-dialog/NestedAlertDialogs.tsx
@@ -130,7 +130,7 @@ const Backdrop = styled(BaseAlertDialog.Backdrop)`
     transition-timing-function: ease-out;
   }
 
-  &[data-entering] {
+  &[data-starting-style] {
     backdrop-filter: blur(0);
     opacity: 0;
   }
diff --git a/docs/data/components/alert-dialog/alert-dialog.mdx b/docs/data/components/alert-dialog/alert-dialog.mdx
index bdfb2f902a..c5350a4afd 100644
--- a/docs/data/components/alert-dialog/alert-dialog.mdx
+++ b/docs/data/components/alert-dialog/alert-dialog.mdx
@@ -123,29 +123,16 @@ Here is an example of how to apply a symmetric scale and fade transition with th
 .AlertDialogPopup {
   transition-property: opacity, transform;
   transition-duration: 0.2s;
-  /* Represents the final styles once exited */
-  opacity: 0;
-  transform: translate(-50%, -35%) scale(0.8);
 }
 
-/* Represents the final styles once entered */
-.AlertDialogPopup[data-open] {
-  opacity: 1;
-  transform: translate(-50%, -50%) scale(1);
-}
-
-/* Represents the initial styles when entering */
-.AlertDialogPopup[data-entering] {
+.AlertDialogPopup[data-starting-style],
+.AlertDialogPopup[data-ending-style] {
   opacity: 0;
   transform: translate(-50%, -35%) scale(0.8);
 }
 ```
 
-Styles need to be applied in three states:
-
-- The exiting styles, placed on the base element class
-- The open styles, placed on the base element class with `[data-open]`
-- The entering styles, placed on the base element class with `[data-entering]`
+`[data-starting-style]` and `[data-ending-style]` are attributes that are added to the popup when it is first inserted to the DOM and when it is about to be removed, respectively. In these states, you can specify the initial and final styles of the popup, which for symmetric transitions should be the same.
 
 <Demo demo="AlertDialogWithTransitions" />
 
@@ -153,12 +140,12 @@ In newer browsers, there is a feature called `@starting-style` which allows tran
 
 ```css
 /* Base UI API - Polyfill */
-.AlertDialogPopup[data-entering] {
+.AlertDialogPopup[data-starting-style] {
   opacity: 0;
   transform: translate(-50%, -35%) scale(0.8);
 }
 
-/* Official Browser API - no Firefox support as of May 2024 */
+/* Official Browser API */
 @starting-style {
   .AlertDialogPopup[data-open] {
     opacity: 0;
@@ -190,7 +177,7 @@ CSS animations can also be used, requiring only two separate declarations:
   animation: scale-in 0.2s forwards;
 }
 
-.AlertDialogPopup[data-exiting] {
+.AlertDialogPopup[data-ending-style] {
   animation: scale-out 0.2s forwards;
 }
 ```
@@ -227,8 +214,8 @@ function App() {
 Four states are available as data attributes to animate the dialog, which enables full control depending on whether the popup is being animated with CSS transitions or animations, JavaScript, or is using the `keepMounted` prop.
 
 - `[data-open]` - `open` state is `true`.
-- `[data-entering]` - the popup was just inserted to the DOM. The attribute is removed 1 animation frame later. Enables "starting styles" upon insertion for conditional rendering.
-- `[data-exiting]` - the popup is in the process of being removed from the DOM, but is still mounted.
+- `[data-starting-style]` - the popup was just inserted to the DOM. The attribute is removed 1 animation frame later.
+- `[data-ending-style]` - the popup's final styles once it closes.
 
 ## Composing a custom React component
 
diff --git a/docs/data/components/collapsible/collapsible.mdx b/docs/data/components/collapsible/collapsible.mdx
index 499bd7802d..2b61fe5c67 100644
--- a/docs/data/components/collapsible/collapsible.mdx
+++ b/docs/data/components/collapsible/collapsible.mdx
@@ -64,8 +64,8 @@ This relies on the HTML `hidden="until-found"` attribute which only has [partial
 Three states are available as data attributes to animate the Collapsible:
 
 - `[data-open]` - `open` state is `true`.
-- `[data-entering]` - the `hidden` attribute was just removed from the DOM and the panel element participates in page layout. The `data-entering` attribute will be removed 1 animation frame later.
-- `[data-exiting]` - the panel element is in the process of being hidden from the DOM, but is still mounted.
+- `[data-starting-style]` - the `hidden` attribute was just removed from the DOM and the panel element participates in page layout. The `data-starting-style` attribute will be removed 1 animation frame later.
+- `[data-ending-style]` - the panel element is in the process of being hidden from the DOM, but is still mounted.
 
 The component can be animate when opening or closing using either:
 
@@ -121,7 +121,7 @@ When using CSS transitions, styles for the `Panel` must be applied to three stat
 
 - The exiting styles, placed on the base element class
 - The open styles, placed on the base element class with `[data-state="open"]`
-- The entering styles, placed on the base element class with `[data-entering]`
+- The entering styles, placed on the base element class with `[data-starting-style]`
 
 ```css
 .CollapsiblePanel {
@@ -138,7 +138,7 @@ When using CSS transitions, styles for the `Panel` must be applied to three stat
 }
 
 /* The initial styles when opening/entering */
-.CollapsiblePanel[data-entering] {
+.CollapsiblePanel[data-starting-style] {
   height: 0;
 }
 ```
diff --git a/docs/data/components/collapsible/transitions.module.css b/docs/data/components/collapsible/transitions.module.css
index 6d3b22d79d..6a6934a2b0 100644
--- a/docs/data/components/collapsible/transitions.module.css
+++ b/docs/data/components/collapsible/transitions.module.css
@@ -8,6 +8,6 @@
   transition: height 200ms ease-in;
 }
 
-.panel[data-entering] {
+.panel[data-starting-style] {
   height: 0;
 }
diff --git a/docs/data/components/dialog/DialogWithTransitions.js b/docs/data/components/dialog/DialogWithTransitions.js
index 2af472d267..cfdaa94cb0 100644
--- a/docs/data/components/dialog/DialogWithTransitions.js
+++ b/docs/data/components/dialog/DialogWithTransitions.js
@@ -57,7 +57,7 @@ const Popup = styled(BaseDialog.Popup)(
     transition-timing-function: ease-out;
   }
 
-  &[data-entering] {
+  &[data-starting-style] {
     opacity: 0;
     transform: translate(-50%, -35%) scale(0.8);
   }
@@ -81,7 +81,7 @@ const Backdrop = styled(BaseDialog.Backdrop)`
     transition-timing-function: ease-out;
   }
 
-  &[data-entering] {
+  &[data-starting-style] {
     backdrop-filter: blur(0);
     opacity: 0;
   }
diff --git a/docs/data/components/dialog/DialogWithTransitions.tsx b/docs/data/components/dialog/DialogWithTransitions.tsx
index 2af472d267..cfdaa94cb0 100644
--- a/docs/data/components/dialog/DialogWithTransitions.tsx
+++ b/docs/data/components/dialog/DialogWithTransitions.tsx
@@ -57,7 +57,7 @@ const Popup = styled(BaseDialog.Popup)(
     transition-timing-function: ease-out;
   }
 
-  &[data-entering] {
+  &[data-starting-style] {
     opacity: 0;
     transform: translate(-50%, -35%) scale(0.8);
   }
@@ -81,7 +81,7 @@ const Backdrop = styled(BaseDialog.Backdrop)`
     transition-timing-function: ease-out;
   }
 
-  &[data-entering] {
+  &[data-starting-style] {
     backdrop-filter: blur(0);
     opacity: 0;
   }
diff --git a/docs/data/components/dialog/NestedDialogs.js b/docs/data/components/dialog/NestedDialogs.js
index 6a948998e8..230495ef05 100644
--- a/docs/data/components/dialog/NestedDialogs.js
+++ b/docs/data/components/dialog/NestedDialogs.js
@@ -146,7 +146,7 @@ const Backdrop = styled(BaseDialog.Backdrop)`
     transition-timing-function: ease-out;
   }
 
-  &[data-entering] {
+  &[data-starting-style] {
     backdrop-filter: blur(0);
     opacity: 0;
   }
diff --git a/docs/data/components/dialog/NestedDialogs.tsx b/docs/data/components/dialog/NestedDialogs.tsx
index 6a948998e8..230495ef05 100644
--- a/docs/data/components/dialog/NestedDialogs.tsx
+++ b/docs/data/components/dialog/NestedDialogs.tsx
@@ -146,7 +146,7 @@ const Backdrop = styled(BaseDialog.Backdrop)`
     transition-timing-function: ease-out;
   }
 
-  &[data-entering] {
+  &[data-starting-style] {
     backdrop-filter: blur(0);
     opacity: 0;
   }
diff --git a/docs/data/components/dialog/dialog.mdx b/docs/data/components/dialog/dialog.mdx
index 646348cc74..d73af1a95d 100644
--- a/docs/data/components/dialog/dialog.mdx
+++ b/docs/data/components/dialog/dialog.mdx
@@ -146,29 +146,16 @@ Here is an example of how to apply a symmetric scale and fade transition with th
 .DialogPopup {
   transition-property: opacity, transform;
   transition-duration: 0.2s;
-  /* Represents the final styles once exited */
-  opacity: 0;
-  transform: translate(-50%, -35%) scale(0.8);
 }
 
-/* Represents the final styles once entered */
-.DialogPopup[data-open] {
-  opacity: 1;
-  transform: translate(-50%, -50%) scale(1);
-}
-
-/* Represents the initial styles when entering */
-.DialogPopup[data-entering] {
+.DialogPopup[data-starting-style],
+.DialogPopup[data-ending-style] {
   opacity: 0;
   transform: translate(-50%, -35%) scale(0.8);
 }
 ```
 
-Styles need to be applied in three states:
-
-- The exiting styles, placed on the base element class
-- The open styles, placed on the base element class with `[data-open]`
-- The entering styles, placed on the base element class with `[data-entering]`
+`[data-starting-style]` and `[data-ending-style]` are attributes that are added to the popup when it is first inserted to the DOM and when it is about to be removed, respectively. In these states, you can specify the initial and final styles of the popup, which for symmetric transitions should be the same.
 
 <Demo demo="DialogWithTransitions" />
 
@@ -176,12 +163,12 @@ In newer browsers, there is a feature called `@starting-style` which allows tran
 
 ```css
 /* Base UI API - Polyfill */
-.DialogPopup[data-entering] {
+.DialogPopup[data-starting-style] {
   opacity: 0;
   transform: translate(-50%, -35%) scale(0.8);
 }
 
-/* Official Browser API - no Firefox support as of May 2024 */
+/* Official Browser API */
 @starting-style {
   .DialogPopup[data-open] {
     opacity: 0;
@@ -213,7 +200,7 @@ CSS animations can also be used, requiring only two separate declarations:
   animation: scale-in 0.2s forwards;
 }
 
-.DialogPopup[data-exiting] {
+.DialogPopup[data-ending-style] {
   animation: scale-out 0.2s forwards;
 }
 ```
@@ -250,8 +237,8 @@ function App() {
 Four states are available as data attributes to animate the dialog, which enables full control depending on whether the popup is being animated with CSS transitions or animations, JavaScript, or is using the `keepMounted` prop.
 
 - `[data-open]` - `open` state is `true`.
-- `[data-entering]` - the popup was just inserted to the DOM. The attribute is removed 1 animation frame later. Enables "starting styles" upon insertion for conditional rendering.
-- `[data-exiting]` - the popup is in the process of being removed from the DOM, but is still mounted.
+- `[data-starting-style]` - the popup was just inserted to the DOM. The attribute is removed 1 animation frame later.
+- `[data-ending-style]` - the popup's final styles once it closes.
 
 ## Composing a custom React component
 
diff --git a/docs/data/components/menu/MenuIntroduction/system/index.js b/docs/data/components/menu/MenuIntroduction/system/index.js
index c2fe4ee82a..51ef642c18 100644
--- a/docs/data/components/menu/MenuIntroduction/system/index.js
+++ b/docs/data/components/menu/MenuIntroduction/system/index.js
@@ -84,7 +84,7 @@ const MenuPopup = styled(Menu.Popup)(
     }
   }
       
-  &[data-exiting] {
+  &[data-ending-style] {
     opacity: 0;
     transform: scale(0.8);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
diff --git a/docs/data/components/menu/MenuIntroduction/system/index.tsx b/docs/data/components/menu/MenuIntroduction/system/index.tsx
index 43a6a58252..414a2260fe 100644
--- a/docs/data/components/menu/MenuIntroduction/system/index.tsx
+++ b/docs/data/components/menu/MenuIntroduction/system/index.tsx
@@ -84,7 +84,7 @@ const MenuPopup = styled(Menu.Popup)(
     }
   }
       
-  &[data-exiting] {
+  &[data-ending-style] {
     opacity: 0;
     transform: scale(0.8);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
diff --git a/docs/data/components/menu/NestedMenu.js b/docs/data/components/menu/NestedMenu.js
index 9e0265b7ea..966bee720a 100644
--- a/docs/data/components/menu/NestedMenu.js
+++ b/docs/data/components/menu/NestedMenu.js
@@ -145,7 +145,7 @@ const MenuPopup = styled(Menu.Popup)(
     }
   }
       
-  &[data-exiting] {
+  &[data-ending-style] {
     opacity: 0;
     transform: scale(0.8);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
diff --git a/docs/data/components/menu/NestedMenu.tsx b/docs/data/components/menu/NestedMenu.tsx
index 6798efd4b5..d23becb1dc 100644
--- a/docs/data/components/menu/NestedMenu.tsx
+++ b/docs/data/components/menu/NestedMenu.tsx
@@ -145,7 +145,7 @@ const MenuPopup = styled(Menu.Popup)(
     }
   }
       
-  &[data-exiting] {
+  &[data-ending-style] {
     opacity: 0;
     transform: scale(0.8);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
diff --git a/docs/data/components/menu/menu.mdx b/docs/data/components/menu/menu.mdx
index a489187043..8b44e975d6 100644
--- a/docs/data/components/menu/menu.mdx
+++ b/docs/data/components/menu/menu.mdx
@@ -302,40 +302,28 @@ Here is an example of how to apply a symmetric scale and fade transition with th
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform;
   transition-duration: 0.2s;
-  /* Represents the final styles once exited */
-  opacity: 0;
-  transform: scale(0.9);
-}
-
-/* Represents the final styles once entered */
-.MenuPopup[data-open] {
-  opacity: 1;
-  transform: scale(1);
 }
 
 /* Represents the initial styles when entering */
-.MenuPopup[data-entering] {
+.MenuPopup[data-starting-style],
+.MenuPopup[data-ending-style] {
   opacity: 0;
   transform: scale(0.9);
 }
 ```
 
-Styles need to be applied in three states:
-
-- The exiting styles, placed on the base element class
-- The open styles, placed on the base element class with `[data-open]`
-- The entering styles, placed on the base element class with `[data-entering]`
+`[data-starting-style]` and `[data-ending-style]` are attributes that are added to the popup when it is first inserted to the DOM and when it is about to be removed, respectively. In these states, you can specify the initial and final styles of the popup, which for symmetric transitions should be the same.
 
 In newer browsers, there is a feature called `@starting-style` which allows transitions to occur on open for conditionally-mounted components:
 
 ```css
 /* Base UI API - Polyfill */
-.MenuPopup[data-entering] {
+.MenuPopup[data-starting-style] {
   opacity: 0;
   transform: scale(0.9);
 }
 
-/* Official Browser API - no Firefox support as of May 2024 */
+/* Official Browser API */
 @starting-style {
   .MenuPopup[data-open] {
     opacity: 0;
@@ -367,7 +355,7 @@ CSS animations can also be used, requiring only two separate declarations:
   animation: scale-in 0.2s forwards;
 }
 
-.MenuPopup[data-exiting] {
+.MenuPopup[data-ending-style] {
   animation: scale-out 0.2s forwards;
 }
 ```
@@ -410,8 +398,8 @@ function App() {
 Four states are available as data attributes to animate the popup, which enables full control depending on whether the popup is being animated with CSS transitions or animations, JavaScript, or is using the `keepMounted` prop.
 
 - `[data-open]` - `open` state is `true`.
-- `[data-entering]` - the popup was just inserted to the DOM. The attribute is removed 1 animation frame later. Enables "starting styles" upon insertion for conditional rendering.
-- `[data-exiting]` - the popup is in the process of being removed from the DOM, but is still mounted.
+- `[data-starting-style]` - the popup was just inserted to the DOM. The attribute is removed 1 animation frame later.
+- `[data-ending-style]` - the popup's final styles once it closes.
 
 ## Overriding default components
 
diff --git a/docs/data/components/popover/UnstyledPopoverTransition.js b/docs/data/components/popover/UnstyledPopoverTransition.js
index 27a72c3edd..d23fc56ca7 100644
--- a/docs/data/components/popover/UnstyledPopoverTransition.js
+++ b/docs/data/components/popover/UnstyledPopoverTransition.js
@@ -45,7 +45,7 @@ export const PopoverPopup = styled(Popover.Popup)`
     transform: scale(1);
   }
 
-  &[data-entering] {
+  &[data-starting-style] {
     opacity: 0;
     transform: scale(0.9);
   }
diff --git a/docs/data/components/popover/UnstyledPopoverTransition.tsx b/docs/data/components/popover/UnstyledPopoverTransition.tsx
index 27a72c3edd..d23fc56ca7 100644
--- a/docs/data/components/popover/UnstyledPopoverTransition.tsx
+++ b/docs/data/components/popover/UnstyledPopoverTransition.tsx
@@ -45,7 +45,7 @@ export const PopoverPopup = styled(Popover.Popup)`
     transform: scale(1);
   }
 
-  &[data-entering] {
+  &[data-starting-style] {
     opacity: 0;
     transform: scale(0.9);
   }
diff --git a/docs/data/components/popover/popover.mdx b/docs/data/components/popover/popover.mdx
index 1927691bb4..673e52f4aa 100644
--- a/docs/data/components/popover/popover.mdx
+++ b/docs/data/components/popover/popover.mdx
@@ -291,29 +291,16 @@ Here is an example of how to apply a symmetric scale and fade transition with th
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform;
   transition-duration: 0.2s;
-  /* Represents the final styles once exited */
-  opacity: 0;
-  transform: scale(0.9);
 }
 
-/* Represents the final styles once entered */
-.PopoverPopup[data-open] {
-  opacity: 1;
-  transform: scale(1);
-}
-
-/* Represents the initial styles when entering */
-.PopoverPopup[data-entering] {
+.PopoverPopup[data-starting-style],
+.PopoverPopup[data-ending-style] {
   opacity: 0;
   transform: scale(0.9);
 }
 ```
 
-Styles need to be applied in three states:
-
-- The exiting styles, placed on the base element class
-- The open styles, placed on the base element class with `[data-open]`
-- The entering styles, placed on the base element class with `[data-entering]`
+`[data-starting-style]` and `[data-ending-style]` are attributes that are added to the popup when it is first inserted to the DOM and when it is about to be removed, respectively. In these states, you can specify the initial and final styles of the popup, which for symmetric transitions should be the same.
 
 <Demo demo="UnstyledPopoverTransition" defaultCodeOpen={false} />
 
@@ -321,12 +308,12 @@ In newer browsers, there is a feature called `@starting-style` which allows tran
 
 ```css
 /* Base UI API - Polyfill */
-.PopoverPopup[data-entering] {
+.PopoverPopup[data-starting-style] {
   opacity: 0;
   transform: scale(0.9);
 }
 
-/* Official Browser API - no Firefox support as of May 2024 */
+/* Official Browser API */
 @starting-style {
   .PopoverPopup[data-open] {
     opacity: 0;
@@ -358,7 +345,7 @@ CSS animations can also be used, requiring only two separate declarations:
   animation: scale-in 0.2s forwards;
 }
 
-.PopoverPopup[data-exiting] {
+.PopoverPopup[data-ending-style] {
   animation: scale-out 0.2s forwards;
 }
 ```
@@ -400,8 +387,8 @@ function App() {
 Four states are available as data attributes to animate the popup, which enables full control depending on whether the popup is being animated with CSS transitions or animations, JavaScript, or is using the `keepMounted` prop.
 
 - `[data-open]` - `open` state is `true`.
-- `[data-entering]` - the popup was just inserted to the DOM. The attribute is removed 1 animation frame later. Enables "starting styles" upon insertion for conditional rendering.
-- `[data-exiting]` - the popup is in the process of being removed from the DOM, but is still mounted.
+- `[data-starting-style]` - the popup was just inserted to the DOM. The attribute is removed 1 animation frame later.
+- `[data-ending-style]` - the popup's final styles once it closes.
 
 ### Instant animation
 
diff --git a/docs/data/components/preview-card/UnstyledPreviewCardTransition.js b/docs/data/components/preview-card/UnstyledPreviewCardTransition.js
index 5d59eb2751..b95b3737ee 100644
--- a/docs/data/components/preview-card/UnstyledPreviewCardTransition.js
+++ b/docs/data/components/preview-card/UnstyledPreviewCardTransition.js
@@ -62,7 +62,7 @@ export const PreviewCardPopup = styled(PreviewCard.Popup)`
     transform: scale(1);
   }
 
-  &[data-entering] {
+  &[data-starting-style] {
     opacity: 0;
     transform: scale(0.95);
   }
diff --git a/docs/data/components/preview-card/UnstyledPreviewCardTransition.tsx b/docs/data/components/preview-card/UnstyledPreviewCardTransition.tsx
index 5d59eb2751..b95b3737ee 100644
--- a/docs/data/components/preview-card/UnstyledPreviewCardTransition.tsx
+++ b/docs/data/components/preview-card/UnstyledPreviewCardTransition.tsx
@@ -62,7 +62,7 @@ export const PreviewCardPopup = styled(PreviewCard.Popup)`
     transform: scale(1);
   }
 
-  &[data-entering] {
+  &[data-starting-style] {
     opacity: 0;
     transform: scale(0.95);
   }
diff --git a/docs/data/components/preview-card/preview-card.mdx b/docs/data/components/preview-card/preview-card.mdx
index b50113b88c..5a3f650ca6 100644
--- a/docs/data/components/preview-card/preview-card.mdx
+++ b/docs/data/components/preview-card/preview-card.mdx
@@ -247,29 +247,17 @@ Here is an example of how to apply a symmetric scale and fade transition with th
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform;
   transition-duration: 0.2s;
-  /* Represents the final styles once exited */
-  opacity: 0;
-  transform: scale(0.9);
-}
-
-/* Represents the final styles once entered */
-.PreviewCardPopup[data-open] {
-  opacity: 1;
-  transform: scale(1);
 }
 
 /* Represents the initial styles when entering */
-.PreviewCardPopup[data-entering] {
+.PreviewCardPopup[data-starting-style],
+.PreviewCardPopup[data-ending-style] {
   opacity: 0;
   transform: scale(0.9);
 }
 ```
 
-Styles need to be applied in three states:
-
-- The exiting styles, placed on the base element class
-- The open styles, placed on the base element class with `[data-open]`
-- The entering styles, placed on the base element class with `[data-entering]`
+`[data-starting-style]` and `[data-ending-style]` are attributes that are added to the popup when it is first inserted to the DOM and when it is about to be removed, respectively. In these states, you can specify the initial and final styles of the popup, which for symmetric transitions should be the same.
 
 <Demo demo="UnstyledPreviewCardTransition" defaultCodeOpen={false} />
 
@@ -277,12 +265,12 @@ In newer browsers, there is a feature called `@starting-style` which allows tran
 
 ```css
 /* Base UI API - Polyfill */
-.PreviewCardPopup[data-entering] {
+.PreviewCardPopup[data-starting-style] {
   opacity: 0;
   transform: scale(0.9);
 }
 
-/* Official Browser API - no Firefox support as of May 2024 */
+/* Official Browser API */
 @starting-style {
   .PreviewCardPopup[data-open] {
     opacity: 0;
@@ -314,7 +302,7 @@ CSS animations can also be used, requiring only two separate declarations:
   animation: scale-in 0.2s forwards;
 }
 
-.PreviewCardPopup[data-exiting] {
+.PreviewCardPopup[data-ending-style] {
   animation: scale-out 0.2s forwards;
 }
 ```
@@ -357,8 +345,8 @@ Four states are available as data attributes to animate the popup, which enables
 
 - `[data-open]` - `open` state is `true`.
 - `[data-closed]` - `open` state is `false`. Can still be mounted to the DOM if closing.
-- `[data-entering]` - the popup was just inserted to the DOM. The attribute is removed 1 animation frame later. Enables "starting styles" upon insertion for conditional rendering.
-- `[data-exiting]` - the popup is in the process of being removed from the DOM, but is still mounted.
+- `[data-starting-style]` - the popup was just inserted to the DOM. The attribute is removed 1 animation frame later.
+- `[data-ending-style]` - the popup's final styles once it closes.
 
 ## Overriding default components
 
diff --git a/docs/data/components/select/select.mdx b/docs/data/components/select/select.mdx
index 78ff14e62d..b52a9ce9a0 100644
--- a/docs/data/components/select/select.mdx
+++ b/docs/data/components/select/select.mdx
@@ -218,40 +218,28 @@ Here is an example of how to apply a symmetric scale and fade transition with th
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform;
   transition-duration: 0.2s;
-  /* Represents the final styles once exited */
-  opacity: 0;
-  transform: scale(0.9);
-}
-
-/* Represents the final styles once entered */
-.SelectPopup[data-open] {
-  opacity: 1;
-  transform: scale(1);
 }
 
 /* Represents the initial styles when entering */
-.SelectPopup[data-entering] {
+.SelectPopup[data-starting-style],
+.SelectPopup[data-ending-style] {
   opacity: 0;
   transform: scale(0.9);
 }
 ```
 
-Styles need to be applied in three states:
-
-- The exiting styles, placed on the base element class
-- The open styles, placed on the base element class with `[data-state="open"]`
-- The entering styles, placed on the base element class with `[data-entering]`
+`[data-starting-style]` and `[data-ending-style]` are attributes that are added to the popup when it is first inserted to the DOM and when it is about to be removed, respectively. In these states, you can specify the initial and final styles of the popup, which for symmetric transitions should be the same.
 
 In newer browsers, there is a feature called `@starting-style` which allows transitions to occur on open for conditionally-mounted components:
 
 ```css
 /* Base UI API - Polyfill */
-.SelectPopup[data-entering] {
+.SelectPopup[data-starting-style] {
   opacity: 0;
   transform: scale(0.9);
 }
 
-/* Official Browser API - no Firefox support as of May 2024 */
+/* Official Browser API */
 @starting-style {
   .SelectPopup[data-open] {
     opacity: 0;
@@ -283,7 +271,7 @@ CSS animations can also be used, requiring only two separate declarations:
   animation: scale-in 0.2s forwards;
 }
 
-.SelectPopup[data-exiting] {
+.SelectPopup[data-ending-style] {
   animation: scale-out 0.2s forwards;
 }
 ```
@@ -326,8 +314,8 @@ function App() {
 Four states are available as data attributes to animate the popup, which enables full control depending on whether the popup is being animated with CSS transitions or animations, JavaScript, or is using the `keepMounted` prop.
 
 - `[data-open]` - `open` state is `true`.
-- `[data-entering]` - the popup was just inserted to the DOM. The attribute is removed 1 animation frame later. Enables "starting styles" upon insertion for conditional rendering.
-- `[data-exiting]` - the popup is in the process of being removed from the DOM, but is still mounted.
+- `[data-starting-style]` - the popup was just inserted to the DOM. The attribute is removed 1 animation frame later.
+- `[data-ending-style]` - the popup's final styles once it closes.
 
 ## Overriding default components
 
diff --git a/docs/data/components/tooltip/UnstyledTooltipTransition.js b/docs/data/components/tooltip/UnstyledTooltipTransition.js
index 962b232340..c577d9737e 100644
--- a/docs/data/components/tooltip/UnstyledTooltipTransition.js
+++ b/docs/data/components/tooltip/UnstyledTooltipTransition.js
@@ -41,7 +41,7 @@ export const TooltipPopup = styled(Tooltip.Popup)`
       transform: scale(1);
     }
 
-    &[data-entering] {
+    &[data-starting-style] {
       opacity: 0;
       transform: scale(0.9);
     }
diff --git a/docs/data/components/tooltip/UnstyledTooltipTransition.tsx b/docs/data/components/tooltip/UnstyledTooltipTransition.tsx
index 962b232340..c577d9737e 100644
--- a/docs/data/components/tooltip/UnstyledTooltipTransition.tsx
+++ b/docs/data/components/tooltip/UnstyledTooltipTransition.tsx
@@ -41,7 +41,7 @@ export const TooltipPopup = styled(Tooltip.Popup)`
       transform: scale(1);
     }
 
-    &[data-entering] {
+    &[data-starting-style] {
       opacity: 0;
       transform: scale(0.9);
     }
diff --git a/docs/data/components/tooltip/tooltip.mdx b/docs/data/components/tooltip/tooltip.mdx
index 6763ea3202..e4ca218058 100644
--- a/docs/data/components/tooltip/tooltip.mdx
+++ b/docs/data/components/tooltip/tooltip.mdx
@@ -225,29 +225,16 @@ Here is an example of how to apply a symmetric scale and fade transition with th
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform;
   transition-duration: 0.2s;
-  /* Represents the final styles once exited */
-  opacity: 0;
-  transform: scale(0.9);
 }
 
-/* Represents the final styles once entered */
-.TooltipPopup[data-open] {
-  opacity: 1;
-  transform: scale(1);
-}
-
-/* Represents the initial styles when entering */
-.TooltipPopup[data-entering] {
+.TooltipPopup[data-starting-style],
+.TooltipPopup[data-ending-style] {
   opacity: 0;
   transform: scale(0.9);
 }
 ```
 
-Styles need to be applied in three states:
-
-- The exiting styles, placed on the base element class
-- The open styles, placed on the base element class with `[data-open]`
-- The entering styles, placed on the base element class with `[data-entering]`
+`[data-starting-style]` and `[data-ending-style]` are attributes that are added to the popup when it is first inserted to the DOM and when it is about to be removed, respectively. In these states, you can specify the initial and final styles of the popup, which for symmetric transitions should be the same.
 
 <Demo demo="UnstyledTooltipTransition" defaultCodeOpen={false} />
 
@@ -255,12 +242,12 @@ In newer browsers, there is a feature called `@starting-style` which allows tran
 
 ```css
 /* Base UI API - Polyfill */
-.TooltipPopup[data-entering] {
+.TooltipPopup[data-starting-style] {
   opacity: 0;
   transform: scale(0.9);
 }
 
-/* Official Browser API - no Firefox support as of May 2024 */
+/* Official Browser API */
 @starting-style {
   .TooltipPopup[data-open] {
     opacity: 0;
@@ -292,7 +279,7 @@ CSS animations can also be used, requiring only two separate declarations:
   animation: scale-in 0.2s forwards;
 }
 
-.TooltipPopup[data-exiting] {
+.TooltipPopup[data-ending-style] {
   animation: scale-out 0.2s forwards;
 }
 ```
@@ -335,8 +322,8 @@ Four states are available as data attributes to animate the popup, which enables
 
 - `[data-open]` - `open` state is `true`.
 - `[data-closed]` - `open` state is `false`. Can still be mounted to the DOM if closing.
-- `[data-entering]` - the popup was just inserted to the DOM. The attribute is removed 1 animation frame later. Enables "starting styles" upon insertion for conditional rendering.
-- `[data-exiting]` - the popup is in the process of being removed from the DOM, but is still mounted.
+- `[data-starting-style]` - the popup was just inserted to the DOM. The attribute is removed 1 animation frame later.
+- `[data-ending-style]` - the popup's final styles once it closes.
 
 ### Instant animation
 
diff --git a/docs/reference/generated/dialog-backdrop.json b/docs/reference/generated/dialog-backdrop.json
index 7ac90105e9..c09b5b5e41 100644
--- a/docs/reference/generated/dialog-backdrop.json
+++ b/docs/reference/generated/dialog-backdrop.json
@@ -23,10 +23,10 @@
     "[data-closed]": {
       "description": "Present when the dialog is closed."
     },
-    "[data-entering]": {
+    "[data-starting-style]": {
       "description": "Present when the dialog is animating in."
     },
-    "[data-exiting]": {
+    "[data-ending-style]": {
       "description": "Present when the dialog is animating out."
     }
   }
diff --git a/docs/reference/generated/dialog-popup.json b/docs/reference/generated/dialog-popup.json
index 789b2b1c37..214a1b1277 100644
--- a/docs/reference/generated/dialog-popup.json
+++ b/docs/reference/generated/dialog-popup.json
@@ -35,10 +35,10 @@
     "[data-closed]": {
       "description": "Present when the dialog is closed."
     },
-    "[data-entering]": {
+    "[data-starting-style]": {
       "description": "Present when the dialog is animating in."
     },
-    "[data-exiting]": {
+    "[data-ending-style]": {
       "description": "Present when the dialog is animating out."
     },
     "[data-modal]": {
diff --git a/docs/reference/overrides/dialog-backdrop.json b/docs/reference/overrides/dialog-backdrop.json
index 4429436f1e..adc608486c 100644
--- a/docs/reference/overrides/dialog-backdrop.json
+++ b/docs/reference/overrides/dialog-backdrop.json
@@ -7,10 +7,10 @@
     "[data-closed]": {
       "description": "Present when the dialog is closed."
     },
-    "[data-entering]": {
+    "[data-starting-style]": {
       "description": "Present when the dialog is animating in."
     },
-    "[data-exiting]": {
+    "[data-ending-style]": {
       "description": "Present when the dialog is animating out."
     }
   }
diff --git a/docs/reference/overrides/dialog-popup.json b/docs/reference/overrides/dialog-popup.json
index 50da9dd765..2a6a916632 100644
--- a/docs/reference/overrides/dialog-popup.json
+++ b/docs/reference/overrides/dialog-popup.json
@@ -7,10 +7,10 @@
     "[data-closed]": {
       "description": "Present when the dialog is closed."
     },
-    "[data-entering]": {
+    "[data-starting-style]": {
       "description": "Present when the dialog is animating in."
     },
-    "[data-exiting]": {
+    "[data-ending-style]": {
       "description": "Present when the dialog is animating out."
     },
     "[data-modal]": {
diff --git a/docs/src/app/experiments/accordion.module.css b/docs/src/app/experiments/accordion.module.css
index 6dd3aa6959..ccbc7b4ca0 100644
--- a/docs/src/app/experiments/accordion.module.css
+++ b/docs/src/app/experiments/accordion.module.css
@@ -119,6 +119,6 @@
   transition: height var(--duration) ease-in;
 }
 
-.panel.csstransition[data-entering] {
+.panel.csstransition[data-starting-style] {
   height: 0;
 }
diff --git a/docs/src/app/experiments/collapsible-accordion.tsx b/docs/src/app/experiments/collapsible-accordion.tsx
index cac46088b4..ec252edbf9 100644
--- a/docs/src/app/experiments/collapsible-accordion.tsx
+++ b/docs/src/app/experiments/collapsible-accordion.tsx
@@ -155,7 +155,7 @@ export function Styles() {
       transition: height ${TRANSITION_DURATION};
     }
 
-    .MyCollapsible2-content[data-entering] {
+    .MyCollapsible2-content[data-starting-style] {
       height: 0;
     }
 
diff --git a/docs/src/app/experiments/collapsible.module.css b/docs/src/app/experiments/collapsible.module.css
index 38bb0a6c57..eb8c31e283 100644
--- a/docs/src/app/experiments/collapsible.module.css
+++ b/docs/src/app/experiments/collapsible.module.css
@@ -65,7 +65,7 @@
   transition: height var(--duration) ease-in;
 }
 
-.panel.transition[data-entering] {
+.panel.transition[data-starting-style] {
   height: 0;
 }
 
diff --git a/docs/src/app/experiments/collapsible.tsx b/docs/src/app/experiments/collapsible.tsx
index 8d8f44ab3f..5d68a3f6c5 100644
--- a/docs/src/app/experiments/collapsible.tsx
+++ b/docs/src/app/experiments/collapsible.tsx
@@ -179,7 +179,7 @@ export function Styles() {
       transition: height ${DURATION} ease-in;
     }
 
-    .MyCollapsible-content.csstransition[data-entering] {
+    .MyCollapsible-content.csstransition[data-starting-style] {
       height: 0;
     }
 
diff --git a/docs/src/app/experiments/dialog.module.css b/docs/src/app/experiments/dialog.module.css
index 2f6bd62891..d147e5b01c 100644
--- a/docs/src/app/experiments/dialog.module.css
+++ b/docs/src/app/experiments/dialog.module.css
@@ -121,7 +121,7 @@
       transition: transform var(--transition-duration) ease-out;
     }
 
-    &[data-exiting] {
+    &[data-ending-style] {
       animation: dialog-closing var(--transition-duration) ease-in forwards;
     }
   }
@@ -171,7 +171,7 @@
       animation: backdrop-opening 500ms ease-out forwards;
     }
 
-    &[data-exiting] {
+    &[data-ending-style] {
       animation: backdrop-closing 500ms ease-in forwards;
     }
   }
diff --git a/docs/src/app/experiments/tooltip.tsx b/docs/src/app/experiments/tooltip.tsx
index 58aa983fc4..4b7a721132 100644
--- a/docs/src/app/experiments/tooltip.tsx
+++ b/docs/src/app/experiments/tooltip.tsx
@@ -40,21 +40,17 @@ export const TooltipPopup = styled(Tooltip.Popup)`
   }
 
   &[data-type='css-animation'] {
-    &[data-open] {
-      animation: ${scaleIn} 0.2s forwards;
-    }
+    animation: ${scaleIn} 0.2s forwards;
 
-    &[data-exiting] {
+    &[data-ending-style] {
       animation: ${scaleOut} 0.2s forwards;
     }
   }
 
   &[data-type='css-animation-keep-mounted'] {
-    &[data-open] {
-      animation: ${scaleIn} 0.2s forwards;
-    }
+    animation: ${scaleIn} 0.2s forwards;
 
-    &[data-exiting] {
+    &[data-ending-style] {
       animation: ${scaleOut} 0.2s forwards;
     }
   }
@@ -62,15 +58,13 @@ export const TooltipPopup = styled(Tooltip.Popup)`
   &[data-type='css-transition'] {
     transition-property: opacity, transform;
     transition-duration: 0.2s;
-    opacity: 0;
-    transform: scale(0);
 
-    &[data-open] {
-      opacity: 1;
-      transform: scale(1);
+    &[data-ending-style] {
+      opacity: 0;
+      transform: scale(0);
     }
 
-    &[data-entering] {
+    &[data-starting-style] {
       opacity: 0;
       transform: scale(0.8);
     }
@@ -80,31 +74,24 @@ export const TooltipPopup = styled(Tooltip.Popup)`
     transition-property: opacity, transform;
     transition-duration: 0.2s;
 
-    &[data-open] {
-      opacity: 1;
-      transform: scale(1);
-    }
-
-    &[data-entering] {
+    &[data-ending-style] {
       opacity: 0;
-      transform: scale(0.8);
+      transform: scale(0);
     }
 
-    &[data-exiting] {
+    &[data-starting-style] {
       opacity: 0;
-      transform: scale(0);
+      transform: scale(0.8);
     }
   }
 
   &[data-type='css-transition-starting-style'] {
     transition-property: opacity, transform, visibility;
     transition-duration: 0.2s;
-    opacity: 0;
-    transform: scale(0);
 
-    &[data-open] {
-      opacity: 1;
-      transform: scale(1);
+    &[data-ending-style] {
+      opacity: 0;
+      transform: scale(0);
     }
 
     @starting-style {
diff --git a/docs/src/app/new/(content)/components/accordion/demos/hero/css-modules/index.module.css b/docs/src/app/new/(content)/components/accordion/demos/hero/css-modules/index.module.css
index 10aef9b783..3dd1a052bb 100644
--- a/docs/src/app/new/(content)/components/accordion/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/new/(content)/components/accordion/demos/hero/css-modules/index.module.css
@@ -60,8 +60,8 @@
   letter-spacing: 0.001em;
   transition: height 150ms ease-out;
 
-  &[data-entering],
-  &[data-exiting] {
+  &[data-starting-style],
+  &[data-ending-style] {
     height: 0;
   }
 }
diff --git a/docs/src/app/new/(content)/components/accordion/demos/hero/tailwind/index.tsx b/docs/src/app/new/(content)/components/accordion/demos/hero/tailwind/index.tsx
index f9d03b6dd1..aa29ccd74c 100644
--- a/docs/src/app/new/(content)/components/accordion/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/new/(content)/components/accordion/demos/hero/tailwind/index.tsx
@@ -11,7 +11,7 @@ export default function ExampleAccordion() {
             <PlusIcon className="mr-2 size-3 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm text-gray-600 transition-[height] ease-out [[data-entering],[data-exiting]]:h-0">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm text-gray-600 transition-[height] ease-out [[data-starting-style],[data-ending-style]]:h-0">
           <div className="pb-3">
             Base UI is a library of high-quality, accessible, unstyled React
             components for design systems and web apps.
@@ -26,7 +26,7 @@ export default function ExampleAccordion() {
             <PlusIcon className="mr-2 size-3 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm text-gray-600 transition-[height] ease-out [[data-entering],[data-exiting]]:h-0">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm text-gray-600 transition-[height] ease-out [[data-starting-style],[data-ending-style]]:h-0">
           <div className="pb-3">
             Head to the “Quick start” guide in the docs. If you’ve used unstyled
             libraries before, you’ll feel right at home.
@@ -41,7 +41,7 @@ export default function ExampleAccordion() {
             <PlusIcon className="mr-2 size-3 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm text-gray-600 transition-[height] ease-out [[data-entering],[data-exiting]]:h-0">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm text-gray-600 transition-[height] ease-out [[data-starting-style],[data-ending-style]]:h-0">
           <div className="pb-3">Of course! Base UI is free and open source.</div>
         </Accordion.Panel>
       </Accordion.Item>
diff --git a/docs/src/app/new/(content)/components/alert-dialog/demos/hero/css-modules/index.module.css b/docs/src/app/new/(content)/components/alert-dialog/demos/hero/css-modules/index.module.css
index 91f4db5eb1..446a7cfd98 100644
--- a/docs/src/app/new/(content)/components/alert-dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/new/(content)/components/alert-dialog/demos/hero/css-modules/index.module.css
@@ -42,8 +42,8 @@
     opacity: 0.7;
   }
 
-  &[data-entering],
-  &[data-exiting] {
+  &[data-starting-style],
+  &[data-ending-style] {
     opacity: 0;
   }
 }
@@ -65,8 +65,8 @@
   outline: 0;
   transition: all 150ms;
 
-  &[data-entering],
-  &[data-exiting] {
+  &[data-starting-style],
+  &[data-ending-style] {
     opacity: 0;
     transform: translate(-50%, -50%) scale(0.9);
   }
diff --git a/docs/src/app/new/(content)/components/alert-dialog/demos/hero/tailwind/index.tsx b/docs/src/app/new/(content)/components/alert-dialog/demos/hero/tailwind/index.tsx
index 46aa816b02..3e93a60b7f 100644
--- a/docs/src/app/new/(content)/components/alert-dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/new/(content)/components/alert-dialog/demos/hero/tailwind/index.tsx
@@ -7,8 +7,8 @@ export default function ExampleAlertDialog() {
       <AlertDialog.Trigger className="flex rounded-md bg-gray-50 px-3.5 py-2 font-medium text-red outline-1 outline-gray-200 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-blue active:bg-gray-100">
         Discard draft
       </AlertDialog.Trigger>
-      <AlertDialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-all duration-150 dark:opacity-70 [[data-entering],[data-exiting]]:opacity-0" />
-      <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-1/2 rounded-lg border border-gray-300 bg-gray-50 p-6 text-gray-900 outline-0 transition-all duration-150 [[data-entering],[data-exiting]]:scale-90 [[data-entering],[data-exiting]]:opacity-0">
+      <AlertDialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-all duration-150 dark:opacity-70 [[data-starting-style],[data-ending-style]]:opacity-0" />
+      <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-1/2 rounded-lg border border-gray-300 bg-gray-50 p-6 text-gray-900 outline-0 transition-all duration-150 [[data-starting-style],[data-ending-style]]:scale-90 [[data-starting-style],[data-ending-style]]:opacity-0">
         <AlertDialog.Title className="-mt-1.5 mb-1 text-lg font-medium">
           Discard draft?
         </AlertDialog.Title>
diff --git a/docs/src/app/new/(content)/components/dialog/demos/hero/css-modules/index.module.css b/docs/src/app/new/(content)/components/dialog/demos/hero/css-modules/index.module.css
index bad9b0459f..d70bbef41a 100644
--- a/docs/src/app/new/(content)/components/dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/new/(content)/components/dialog/demos/hero/css-modules/index.module.css
@@ -38,8 +38,8 @@
     opacity: 0.7;
   }
 
-  &[data-entering],
-  &[data-exiting] {
+  &[data-starting-style],
+  &[data-ending-style] {
     opacity: 0;
   }
 }
@@ -61,8 +61,8 @@
   outline: 0;
   transition: all 150ms;
 
-  &[data-entering],
-  &[data-exiting] {
+  &[data-starting-style],
+  &[data-ending-style] {
     opacity: 0;
     transform: translate(-50%, -50%) scale(0.9);
   }
diff --git a/docs/src/app/new/(content)/components/dialog/demos/hero/tailwind/index.tsx b/docs/src/app/new/(content)/components/dialog/demos/hero/tailwind/index.tsx
index 8912b5c348..67390a3e11 100644
--- a/docs/src/app/new/(content)/components/dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/new/(content)/components/dialog/demos/hero/tailwind/index.tsx
@@ -7,8 +7,8 @@ export default function ExampleDialog() {
       <Dialog.Trigger className="flex rounded-md bg-gray-50 px-3.5 py-2 font-medium text-gray-900 outline-1 outline-gray-200 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-blue active:bg-gray-100">
         View notifications
       </Dialog.Trigger>
-      <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-all duration-150 dark:opacity-70 [[data-entering],[data-exiting]]:opacity-0" />
-      <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-1/2 rounded-lg border border-gray-300 bg-gray-50 p-6 text-gray-900 outline-0 transition-all duration-150 [[data-entering],[data-exiting]]:scale-90 [[data-entering],[data-exiting]]:opacity-0">
+      <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-all duration-150 dark:opacity-70 [[data-starting-style],[data-ending-style]]:opacity-0" />
+      <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-1/2 rounded-lg border border-gray-300 bg-gray-50 p-6 text-gray-900 outline-0 transition-all duration-150 [[data-starting-style],[data-ending-style]]:scale-90 [[data-starting-style],[data-ending-style]]:opacity-0">
         <Dialog.Title className="-mt-1.5 mb-1 text-lg font-medium">
           Your notifications
         </Dialog.Title>
diff --git a/docs/src/components/MobileNav.css b/docs/src/components/MobileNav.css
index 1d7e65d95d..20fa701e86 100644
--- a/docs/src/components/MobileNav.css
+++ b/docs/src/components/MobileNav.css
@@ -15,14 +15,14 @@
       background-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / 25%) 6rem);
     }
 
-    &[data-entering],
-    &[data-exiting] {
+    &[data-starting-style],
+    &[data-ending-style] {
       -webkit-backdrop-filter: blur(0px);
       backdrop-filter: blur(0px);
       opacity: 0;
     }
 
-    &[data-exiting] {
+    &[data-ending-style] {
       transition-duration: 250ms;
       transition-timing-function: var(--ease-in-slow);
     }
@@ -43,13 +43,13 @@
     transition-property: transform, filter;
     transition-timing-function: var(--ease-out-fast);
 
-    &[data-entering],
-    &[data-exiting] {
+    &[data-starting-style],
+    &[data-ending-style] {
       transform: translateY(100dvh);
       filter: blur(1px);
     }
 
-    &[data-exiting] {
+    &[data-ending-style] {
       /* Delay the blur transition so it doesn't feel unfocused until halway out */
       transition-delay: 0ms, 125ms;
       transition-duration: 250ms;
diff --git a/docs/src/components/Popup.css b/docs/src/components/Popup.css
index ca300121e5..b7132c149b 100644
--- a/docs/src/components/Popup.css
+++ b/docs/src/components/Popup.css
@@ -23,15 +23,15 @@
     transition-property: opacity, transform;
     transition-timing-function: var(--ease-out-fast);
 
-    &[data-entering],
-    &[data-exiting] {
+    &[data-starting-style],
+    &[data-ending-style] {
       opacity: 0;
       @media (prefers-reduced-motion: no-preference) {
         transform: scale(0.98);
       }
     }
 
-    &[data-exiting] {
+    &[data-ending-style] {
       transition-timing-function: var(--ease-in-slow);
     }
   }
diff --git a/packages/react/src/accordion/item/styleHooks.ts b/packages/react/src/accordion/item/styleHooks.ts
index 8f4cbbd5e7..7ea86251af 100644
--- a/packages/react/src/accordion/item/styleHooks.ts
+++ b/packages/react/src/accordion/item/styleHooks.ts
@@ -9,10 +9,10 @@ export const accordionStyleHookMapping: CustomStyleHookMapping<AccordionItem.Sta
   },
   transitionStatus: (value) => {
     if (value === 'entering') {
-      return { 'data-entering': '' } as Record<string, string>;
+      return { 'data-starting-style': '' } as Record<string, string>;
     }
     if (value === 'exiting') {
-      return { 'data-exiting': '' };
+      return { 'data-ending-style': '' };
     }
     return null;
   },
diff --git a/packages/react/src/alert-dialog/backdrop/AlertDialogBackdrop.tsx b/packages/react/src/alert-dialog/backdrop/AlertDialogBackdrop.tsx
index d18ec77f0b..0cd2cff9f0 100644
--- a/packages/react/src/alert-dialog/backdrop/AlertDialogBackdrop.tsx
+++ b/packages/react/src/alert-dialog/backdrop/AlertDialogBackdrop.tsx
@@ -14,10 +14,10 @@ const customStyleHookMapping: CustomStyleHookMapping<AlertDialogBackdrop.State>
   ...baseMapping,
   transitionStatus: (value) => {
     if (value === 'entering') {
-      return { 'data-entering': '' } as Record<string, string>;
+      return { 'data-starting-style': '' } as Record<string, string>;
     }
     if (value === 'exiting') {
-      return { 'data-exiting': '' };
+      return { 'data-ending-style': '' };
     }
     return null;
   },
diff --git a/packages/react/src/alert-dialog/popup/AlertDialogPopup.tsx b/packages/react/src/alert-dialog/popup/AlertDialogPopup.tsx
index 4178776774..93ce52ff4b 100644
--- a/packages/react/src/alert-dialog/popup/AlertDialogPopup.tsx
+++ b/packages/react/src/alert-dialog/popup/AlertDialogPopup.tsx
@@ -18,10 +18,10 @@ const customStyleHookMapping: CustomStyleHookMapping<AlertDialogPopup.State> = {
   nestedOpenDialogCount: (value) => ({ 'data-nested-dialogs': value.toString() }),
   transitionStatus: (value) => {
     if (value === 'entering') {
-      return { 'data-entering': '' } as Record<string, string>;
+      return { 'data-starting-style': '' } as Record<string, string>;
     }
     if (value === 'exiting') {
-      return { 'data-exiting': '' };
+      return { 'data-ending-style': '' };
     }
     return null;
   },
diff --git a/packages/react/src/collapsible/root/styleHooks.ts b/packages/react/src/collapsible/root/styleHooks.ts
index 4f04971ecf..1529cadd23 100644
--- a/packages/react/src/collapsible/root/styleHooks.ts
+++ b/packages/react/src/collapsible/root/styleHooks.ts
@@ -6,10 +6,10 @@ export const collapsibleStyleHookMapping: CustomStyleHookMapping<CollapsibleRoot
   ...baseMapping,
   transitionStatus: (value) => {
     if (value === 'entering') {
-      return { 'data-entering': '' } as Record<string, string>;
+      return { 'data-starting-style': '' } as Record<string, string>;
     }
     if (value === 'exiting') {
-      return { 'data-exiting': '' };
+      return { 'data-ending-style': '' };
     }
     return null;
   },
diff --git a/packages/react/src/dialog/backdrop/DialogBackdrop.tsx b/packages/react/src/dialog/backdrop/DialogBackdrop.tsx
index e35fd1d56a..b8e82ae6b1 100644
--- a/packages/react/src/dialog/backdrop/DialogBackdrop.tsx
+++ b/packages/react/src/dialog/backdrop/DialogBackdrop.tsx
@@ -14,10 +14,10 @@ const customStyleHookMapping: CustomStyleHookMapping<DialogBackdrop.State> = {
   ...baseMapping,
   transitionStatus: (value) => {
     if (value === 'entering') {
-      return { 'data-entering': '' } as Record<string, string>;
+      return { 'data-starting-style': '' } as Record<string, string>;
     }
     if (value === 'exiting') {
-      return { 'data-exiting': '' };
+      return { 'data-ending-style': '' };
     }
     return null;
   },
diff --git a/packages/react/src/dialog/popup/DialogPopup.tsx b/packages/react/src/dialog/popup/DialogPopup.tsx
index 363350debb..23e83792d8 100644
--- a/packages/react/src/dialog/popup/DialogPopup.tsx
+++ b/packages/react/src/dialog/popup/DialogPopup.tsx
@@ -18,10 +18,10 @@ const customStyleHookMapping: CustomStyleHookMapping<DialogPopup.State> = {
   nestedOpenDialogCount: (value) => ({ 'data-nested-dialogs': value.toString() }),
   transitionStatus: (value) => {
     if (value === 'entering') {
-      return { 'data-entering': '' } as Record<string, string>;
+      return { 'data-starting-style': '' } as Record<string, string>;
     }
     if (value === 'exiting') {
-      return { 'data-exiting': '' };
+      return { 'data-ending-style': '' };
     }
     return null;
   },
diff --git a/packages/react/src/dialog/root/DialogRoot.test.tsx b/packages/react/src/dialog/root/DialogRoot.test.tsx
index a6f4732ba5..30655d3f6a 100644
--- a/packages/react/src/dialog/root/DialogRoot.test.tsx
+++ b/packages/react/src/dialog/root/DialogRoot.test.tsx
@@ -99,7 +99,7 @@ describe('<Dialog.Root />', () => {
             opacity: 1;
           }
 
-          .animation-test-popup[data-exiting] {
+          .animation-test-popup[data-ending-style] {
             animation: test-anim 50ms;
           }
         `;
diff --git a/packages/react/src/menu/popup/MenuPopup.tsx b/packages/react/src/menu/popup/MenuPopup.tsx
index ae0a8650ff..7313a1cdd7 100644
--- a/packages/react/src/menu/popup/MenuPopup.tsx
+++ b/packages/react/src/menu/popup/MenuPopup.tsx
@@ -16,10 +16,10 @@ const customStyleHookMapping: CustomStyleHookMapping<MenuPopup.State> = {
   ...baseMapping,
   transitionStatus(value) {
     if (value === 'entering') {
-      return { 'data-entering': '' } as Record<string, string>;
+      return { 'data-starting-style': '' } as Record<string, string>;
     }
     if (value === 'exiting') {
-      return { 'data-exiting': '' };
+      return { 'data-ending-style': '' };
     }
     return null;
   },
diff --git a/packages/react/src/menu/root/MenuRoot.test.tsx b/packages/react/src/menu/root/MenuRoot.test.tsx
index 0ae05fa6e6..d8829346dc 100644
--- a/packages/react/src/menu/root/MenuRoot.test.tsx
+++ b/packages/react/src/menu/root/MenuRoot.test.tsx
@@ -743,7 +743,7 @@ describe('<Menu.Root />', () => {
             opacity: 1;
           }
 
-          .animation-test-popup[data-exiting] {
+          .animation-test-popup[data-ending-style] {
             animation: test-anim 50ms;
           }
         `;
diff --git a/packages/react/src/popover/backdrop/PopoverBackdrop.tsx b/packages/react/src/popover/backdrop/PopoverBackdrop.tsx
index 3913681f67..47814a6c6f 100644
--- a/packages/react/src/popover/backdrop/PopoverBackdrop.tsx
+++ b/packages/react/src/popover/backdrop/PopoverBackdrop.tsx
@@ -15,10 +15,10 @@ const customStyleHookMapping: CustomStyleHookMapping<PopoverBackdrop.State> = {
   ...baseMapping,
   transitionStatus(value) {
     if (value === 'entering') {
-      return { 'data-entering': '' } as Record<string, string>;
+      return { 'data-starting-style': '' } as Record<string, string>;
     }
     if (value === 'exiting') {
-      return { 'data-exiting': '' };
+      return { 'data-ending-style': '' };
     }
     return null;
   },
diff --git a/packages/react/src/popover/popup/PopoverPopup.tsx b/packages/react/src/popover/popup/PopoverPopup.tsx
index 95c862e493..21b687c813 100644
--- a/packages/react/src/popover/popup/PopoverPopup.tsx
+++ b/packages/react/src/popover/popup/PopoverPopup.tsx
@@ -19,10 +19,10 @@ const customStyleHookMapping: CustomStyleHookMapping<PopoverPopup.State> = {
   ...baseMapping,
   transitionStatus(value) {
     if (value === 'entering') {
-      return { 'data-entering': '' } as Record<string, string>;
+      return { 'data-starting-style': '' } as Record<string, string>;
     }
     if (value === 'exiting') {
-      return { 'data-exiting': '' };
+      return { 'data-ending-style': '' };
     }
     return null;
   },
diff --git a/packages/react/src/popover/root/PopoverRoot.test.tsx b/packages/react/src/popover/root/PopoverRoot.test.tsx
index 063072e4e0..a824e15bd3 100644
--- a/packages/react/src/popover/root/PopoverRoot.test.tsx
+++ b/packages/react/src/popover/root/PopoverRoot.test.tsx
@@ -231,7 +231,7 @@ describe('<Popover.Root />', () => {
             opacity: 1;
           }
 
-          .animation-test-popup[data-exiting] {
+          .animation-test-popup[data-ending-style] {
             animation: test-anim 50ms;
           }
         `;
diff --git a/packages/react/src/preview-card/backdrop/PreviewCardBackdrop.tsx b/packages/react/src/preview-card/backdrop/PreviewCardBackdrop.tsx
index a31a0da04e..a00c6303a3 100644
--- a/packages/react/src/preview-card/backdrop/PreviewCardBackdrop.tsx
+++ b/packages/react/src/preview-card/backdrop/PreviewCardBackdrop.tsx
@@ -15,10 +15,10 @@ const customStyleHookMapping: CustomStyleHookMapping<PreviewCardBackdrop.State>
   ...baseMapping,
   transitionStatus(value) {
     if (value === 'entering') {
-      return { 'data-entering': '' } as Record<string, string>;
+      return { 'data-starting-style': '' } as Record<string, string>;
     }
     if (value === 'exiting') {
-      return { 'data-exiting': '' };
+      return { 'data-ending-style': '' };
     }
     return null;
   },
diff --git a/packages/react/src/preview-card/popup/PreviewCardPopup.tsx b/packages/react/src/preview-card/popup/PreviewCardPopup.tsx
index 09c791ec4e..1f2a3cc63e 100644
--- a/packages/react/src/preview-card/popup/PreviewCardPopup.tsx
+++ b/packages/react/src/preview-card/popup/PreviewCardPopup.tsx
@@ -16,10 +16,10 @@ const customStyleHookMapping: CustomStyleHookMapping<PreviewCardPopup.State> = {
   ...baseMapping,
   transitionStatus(value) {
     if (value === 'entering') {
-      return { 'data-entering': '' } as Record<string, string>;
+      return { 'data-starting-style': '' } as Record<string, string>;
     }
     if (value === 'exiting') {
-      return { 'data-exiting': '' };
+      return { 'data-ending-style': '' };
     }
     return null;
   },
diff --git a/packages/react/src/preview-card/root/PreviewCardRoot.test.tsx b/packages/react/src/preview-card/root/PreviewCardRoot.test.tsx
index 51cf7679fb..0ce3806600 100644
--- a/packages/react/src/preview-card/root/PreviewCardRoot.test.tsx
+++ b/packages/react/src/preview-card/root/PreviewCardRoot.test.tsx
@@ -204,7 +204,7 @@ describe('<PreviewCard.Root />', () => {
             opacity: 1;
           }
 
-          .animation-test-popup[data-exiting] {
+          .animation-test-popup[data-ending-style] {
             animation: test-anim 50ms;
           }
         `;
diff --git a/packages/react/src/select/backdrop/SelectBackdrop.tsx b/packages/react/src/select/backdrop/SelectBackdrop.tsx
index 6613d93a4f..b534053500 100644
--- a/packages/react/src/select/backdrop/SelectBackdrop.tsx
+++ b/packages/react/src/select/backdrop/SelectBackdrop.tsx
@@ -15,11 +15,11 @@ const customStyleHookMapping: CustomStyleHookMapping<SelectBackdrop.State> = {
   ...popupOpenStateMapping,
   transitionStatus(value): Record<string, string> | null {
     if (value === 'entering') {
-      return { 'data-entering': '' };
+      return { 'data-starting-style': '' };
     }
 
     if (value === 'exiting') {
-      return { 'data-exiting': '' };
+      return { 'data-ending-style': '' };
     }
 
     return null;
diff --git a/packages/react/src/select/popup/SelectPopup.tsx b/packages/react/src/select/popup/SelectPopup.tsx
index 3474f7ca91..34f0b44780 100644
--- a/packages/react/src/select/popup/SelectPopup.tsx
+++ b/packages/react/src/select/popup/SelectPopup.tsx
@@ -16,11 +16,11 @@ const customStyleHookMapping: CustomStyleHookMapping<SelectPopup.State> = {
   ...popupOpenStateMapping,
   transitionStatus(value): Record<string, string> | null {
     if (value === 'entering') {
-      return { 'data-entering': '' };
+      return { 'data-starting-style': '' };
     }
 
     if (value === 'exiting') {
-      return { 'data-exiting': '' };
+      return { 'data-ending-style': '' };
     }
 
     return null;
diff --git a/packages/react/src/select/root/SelectRoot.test.tsx b/packages/react/src/select/root/SelectRoot.test.tsx
index 642d5f40a0..e075158085 100644
--- a/packages/react/src/select/root/SelectRoot.test.tsx
+++ b/packages/react/src/select/root/SelectRoot.test.tsx
@@ -252,7 +252,7 @@ describe('<Select.Root />', () => {
             opacity: 1;
           }
 
-          .animation-test-popup[data-exiting] {
+          .animation-test-popup[data-ending-style] {
             animation: test-anim 50ms;
           }
         `;
diff --git a/packages/react/src/tooltip/popup/TooltipPopup.tsx b/packages/react/src/tooltip/popup/TooltipPopup.tsx
index 46605ba558..3dfc3376ae 100644
--- a/packages/react/src/tooltip/popup/TooltipPopup.tsx
+++ b/packages/react/src/tooltip/popup/TooltipPopup.tsx
@@ -15,10 +15,10 @@ const customStyleHookMapping: CustomStyleHookMapping<TooltipPopup.State> = {
   ...baseMapping,
   transitionStatus(value) {
     if (value === 'entering') {
-      return { 'data-entering': '' } as Record<string, string>;
+      return { 'data-starting-style': '' } as Record<string, string>;
     }
     if (value === 'exiting') {
-      return { 'data-exiting': '' };
+      return { 'data-ending-style': '' };
     }
     return null;
   },