diff --git a/docs/reference/generated/form.json b/docs/reference/generated/form.json
index 189b1c0eb1..2bc0908006 100644
--- a/docs/reference/generated/form.json
+++ b/docs/reference/generated/form.json
@@ -4,7 +4,7 @@
   "props": {
     "errors": {
       "type": "Record<string, string | string[]>",
-      "description": "An object where the keys correspond to the `name` attribute of the form fields,\nand the values correspond to the erorr(s) related to that field."
+      "description": "An object where the keys correspond to the `name` attribute of the form fields,\nand the values correspond to the error(s) related to that field."
     },
     "onClearErrors": {
       "type": "(errors) => void",
diff --git a/docs/reference/generated/menu-arrow.json b/docs/reference/generated/menu-arrow.json
index 98e8167679..56a43087cb 100644
--- a/docs/reference/generated/menu-arrow.json
+++ b/docs/reference/generated/menu-arrow.json
@@ -26,7 +26,7 @@
     },
     "data-side": {
       "description": "Indicates which side the menu is positioned relative to the trigger.",
-      "type": "'none' | 'top' | 'right' | 'bottom' | 'left'"
+      "type": "'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'"
     }
   },
   "cssVariables": {}
diff --git a/docs/reference/generated/menu-popup.json b/docs/reference/generated/menu-popup.json
index 8954240821..0ce836710c 100644
--- a/docs/reference/generated/menu-popup.json
+++ b/docs/reference/generated/menu-popup.json
@@ -24,7 +24,7 @@
     },
     "data-side": {
       "description": "Indicates which side the menu is positioned relative to the trigger.",
-      "type": "'none' | 'top' | 'right' | 'bottom' | 'left'"
+      "type": "'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'"
     },
     "data-starting-style": {
       "description": "Present when the menu is animating in."
diff --git a/docs/reference/generated/menu-positioner.json b/docs/reference/generated/menu-positioner.json
index f1f0ebfcbc..dc8fc9f0ac 100644
--- a/docs/reference/generated/menu-positioner.json
+++ b/docs/reference/generated/menu-positioner.json
@@ -75,7 +75,7 @@
     },
     "data-side": {
       "description": "Indicates which side the menu is positioned relative to the trigger.",
-      "type": "'none' | 'top' | 'right' | 'bottom' | 'left'"
+      "type": "'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'"
     }
   },
   "cssVariables": {
diff --git a/docs/reference/generated/popover-arrow.json b/docs/reference/generated/popover-arrow.json
index a21c4cf3d9..0da3f942a4 100644
--- a/docs/reference/generated/popover-arrow.json
+++ b/docs/reference/generated/popover-arrow.json
@@ -26,7 +26,7 @@
     },
     "data-side": {
       "description": "Indicates which side the popup is positioned relative to the trigger.",
-      "type": "'none' | 'top' | 'right' | 'bottom' | 'left'"
+      "type": "'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'"
     }
   },
   "cssVariables": {}
diff --git a/docs/reference/generated/popover-popup.json b/docs/reference/generated/popover-popup.json
index 0691d26689..150af7f8ef 100644
--- a/docs/reference/generated/popover-popup.json
+++ b/docs/reference/generated/popover-popup.json
@@ -32,7 +32,7 @@
     },
     "data-side": {
       "description": "Indicates which side the popup is positioned relative to the trigger.",
-      "type": "'none' | 'top' | 'right' | 'bottom' | 'left'"
+      "type": "'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'"
     },
     "data-starting-style": {
       "description": "Present when the popup is animating in."
diff --git a/docs/reference/generated/popover-positioner.json b/docs/reference/generated/popover-positioner.json
index a8d16717c9..9a155f18dd 100644
--- a/docs/reference/generated/popover-positioner.json
+++ b/docs/reference/generated/popover-positioner.json
@@ -77,7 +77,7 @@
     },
     "data-side": {
       "description": "Indicates which side the popup is positioned relative to the trigger.",
-      "type": "'none' | 'top' | 'right' | 'bottom' | 'left'"
+      "type": "'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'"
     }
   },
   "cssVariables": {
diff --git a/docs/reference/generated/preview-card-arrow.json b/docs/reference/generated/preview-card-arrow.json
index 7cee7ac549..b12b57add6 100644
--- a/docs/reference/generated/preview-card-arrow.json
+++ b/docs/reference/generated/preview-card-arrow.json
@@ -26,7 +26,7 @@
     },
     "data-side": {
       "description": "Indicates which side the preview card is positioned relative to the trigger.",
-      "type": "'none' | 'top' | 'right' | 'bottom' | 'left'"
+      "type": "'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'"
     }
   },
   "cssVariables": {}
diff --git a/docs/reference/generated/preview-card-popup.json b/docs/reference/generated/preview-card-popup.json
index 33e86f81e3..70606fac3c 100644
--- a/docs/reference/generated/preview-card-popup.json
+++ b/docs/reference/generated/preview-card-popup.json
@@ -20,7 +20,7 @@
     },
     "data-side": {
       "description": "Indicates which side the preview card is positioned relative to the trigger.",
-      "type": "'none' | 'top' | 'right' | 'bottom' | 'left'"
+      "type": "'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'"
     },
     "data-starting-style": {
       "description": "Present when the preview card is animating in."
diff --git a/docs/reference/generated/preview-card-positioner.json b/docs/reference/generated/preview-card-positioner.json
index 491da9dd91..5fea11a83e 100644
--- a/docs/reference/generated/preview-card-positioner.json
+++ b/docs/reference/generated/preview-card-positioner.json
@@ -77,7 +77,7 @@
     },
     "data-side": {
       "description": "Indicates which side the preview card is positioned relative to the trigger.",
-      "type": "'none' | 'top' | 'right' | 'bottom' | 'left'"
+      "type": "'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'"
     }
   },
   "cssVariables": {
diff --git a/docs/reference/generated/tooltip-arrow.json b/docs/reference/generated/tooltip-arrow.json
index 30160656a1..f122a0ebac 100644
--- a/docs/reference/generated/tooltip-arrow.json
+++ b/docs/reference/generated/tooltip-arrow.json
@@ -26,7 +26,7 @@
     },
     "data-side": {
       "description": "Indicates which side the tooltip is positioned relative to the trigger.",
-      "type": "'none' | 'top' | 'right' | 'bottom' | 'left'"
+      "type": "'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'"
     }
   },
   "cssVariables": {}
diff --git a/docs/reference/generated/tooltip-popup.json b/docs/reference/generated/tooltip-popup.json
index 4aa77e2744..56325e4847 100644
--- a/docs/reference/generated/tooltip-popup.json
+++ b/docs/reference/generated/tooltip-popup.json
@@ -24,7 +24,7 @@
     },
     "data-side": {
       "description": "Indicates which side the tooltip is positioned relative to the trigger.",
-      "type": "'none' | 'top' | 'right' | 'bottom' | 'left'"
+      "type": "'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'"
     },
     "data-starting-style": {
       "description": "Present when the tooltip is animating in."
diff --git a/docs/reference/generated/tooltip-positioner.json b/docs/reference/generated/tooltip-positioner.json
index b7e0021f1a..538059bb6a 100644
--- a/docs/reference/generated/tooltip-positioner.json
+++ b/docs/reference/generated/tooltip-positioner.json
@@ -77,7 +77,7 @@
     },
     "data-side": {
       "description": "Indicates which side the tooltip is positioned relative to the trigger.",
-      "type": "'none' | 'top' | 'right' | 'bottom' | 'left'"
+      "type": "'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'"
     }
   },
   "cssVariables": {
diff --git a/docs/src/app/(public)/(content)/react/components/accordion/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/accordion/demos/hero/tailwind/index.tsx
index b4a071d0e8..8ba8a16ddd 100644
--- a/docs/src/app/(public)/(content)/react/components/accordion/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/accordion/demos/hero/tailwind/index.tsx
@@ -6,12 +6,12 @@ export default function ExampleAccordion() {
     <Accordion.Root className="flex w-96 max-w-[calc(100vw-8rem)] flex-col justify-center text-gray-900">
       <Accordion.Item className="border-b border-gray-200">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full cursor-pointer items-baseline justify-between gap-4 py-2 text-left font-medium focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full cursor-pointer items-baseline justify-between gap-4 py-2 text-left font-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800">
             What is Base UI?
             <PlusIcon className="mr-2 size-3 shrink-0 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-base text-gray-600 transition-[height] ease-out [[data-starting-style],[data-ending-style]]:h-0">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
           <div className="pb-3">
             Base UI is a library of high-quality unstyled React components for design
             systems and web apps.
@@ -21,12 +21,12 @@ export default function ExampleAccordion() {
 
       <Accordion.Item className="border-b border-gray-200">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full cursor-pointer items-baseline justify-between gap-4 py-2 text-left font-medium focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full cursor-pointer items-baseline justify-between gap-4 py-2 text-left font-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800">
             How do I get started?
             <PlusIcon className="mr-2 size-3 shrink-0 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-base text-gray-600 transition-[height] ease-out [[data-starting-style],[data-ending-style]]:h-0">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-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 at home.
@@ -36,12 +36,12 @@ export default function ExampleAccordion() {
 
       <Accordion.Item className="border-b border-gray-200">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full cursor-pointer items-baseline justify-between gap-4 py-2 text-left font-medium focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full cursor-pointer items-baseline justify-between gap-4 py-2 text-left font-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800">
             Can I use it for my project?
             <PlusIcon className="mr-2 size-3 shrink-0 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-base text-gray-600 transition-[height] ease-out [[data-starting-style],[data-ending-style]]:h-0">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-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/(public)/(content)/react/components/alert-dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
index 7ee26c6c74..09e804af53 100644
--- a/docs/src/app/(public)/(content)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
@@ -4,12 +4,12 @@ import { AlertDialog } from '@base-ui-components/react/alert-dialog';
 export default function ExampleAlertDialog() {
   return (
     <AlertDialog.Root>
-      <AlertDialog.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-red-800 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+      <AlertDialog.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-red-800 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
         Discard draft
       </AlertDialog.Trigger>
       <AlertDialog.Portal>
-        <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 bg-gray-50 p-6 text-gray-900 outline outline-gray-200 transition-all duration-150 dark:outline-gray-300 [[data-starting-style],[data-ending-style]]:scale-90 [[data-starting-style],[data-ending-style]]:opacity-0">
+        <AlertDialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70" />
+        <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-gray-50 p-6 text-gray-900 outline outline-1 outline-gray-200 transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:outline-gray-300">
           <AlertDialog.Title className="-mt-1.5 mb-1 text-lg font-medium">
             Discard draft?
           </AlertDialog.Title>
@@ -17,10 +17,10 @@ export default function ExampleAlertDialog() {
             You can’t undo this action.
           </AlertDialog.Description>
           <div className="flex justify-end gap-4">
-            <AlertDialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+            <AlertDialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
               Cancel
             </AlertDialog.Close>
-            <AlertDialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-red-800 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+            <AlertDialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-red-800 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
               Discard
             </AlertDialog.Close>
           </div>
diff --git a/docs/src/app/(public)/(content)/react/components/checkbox-group/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
index fdeed1ce15..7cf326202d 100644
--- a/docs/src/app/(public)/(content)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function ExampleCheckboxGroup() {
       <label className="flex items-center gap-2">
         <Checkbox.Root
           name="fuji-apple"
-          className="flex size-5 items-center justify-center rounded-sm outline-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
+          className="flex size-5 items-center justify-center rounded-sm outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
         >
           <Checkbox.Indicator className="flex text-gray-50 data-[unchecked]:hidden">
             <CheckIcon className="size-3" />
@@ -28,7 +28,7 @@ export default function ExampleCheckboxGroup() {
       <label className="flex items-center gap-2">
         <Checkbox.Root
           name="gala-apple"
-          className="flex size-5 items-center justify-center rounded-sm outline-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
+          className="flex size-5 items-center justify-center rounded-sm outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
         >
           <Checkbox.Indicator className="flex text-gray-50 data-[unchecked]:hidden">
             <CheckIcon className="size-3" />
@@ -40,7 +40,7 @@ export default function ExampleCheckboxGroup() {
       <label className="flex items-center gap-2">
         <Checkbox.Root
           name="granny-smith-apple"
-          className="flex size-5 items-center justify-center rounded-sm outline-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
+          className="flex size-5 items-center justify-center rounded-sm outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
         >
           <Checkbox.Indicator className="flex text-gray-50 data-[unchecked]:hidden">
             <CheckIcon className="size-3" />
diff --git a/docs/src/app/(public)/(content)/react/components/checkbox/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/checkbox/demos/hero/tailwind/index.tsx
index 96868de5b3..7ef5f0fb75 100644
--- a/docs/src/app/(public)/(content)/react/components/checkbox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/checkbox/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleCheckbox() {
     <label className="flex items-center gap-2 text-base text-gray-900">
       <Checkbox.Root
         defaultChecked
-        className="flex size-5 items-center justify-center rounded-sm outline-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
+        className="flex size-5 items-center justify-center rounded-sm outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
       >
         <Checkbox.Indicator className="flex text-gray-50 data-[unchecked]:hidden">
           <CheckIcon className="size-3" />
diff --git a/docs/src/app/(public)/(content)/react/components/collapsible/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/collapsible/demos/hero/tailwind/index.tsx
index 280181789c..254810ac6f 100644
--- a/docs/src/app/(public)/(content)/react/components/collapsible/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/collapsible/demos/hero/tailwind/index.tsx
@@ -4,11 +4,11 @@ import { Collapsible } from '@base-ui-components/react/collapsible';
 export default function ExampleCollapsible() {
   return (
     <Collapsible.Root className="flex min-h-36 w-56 flex-col justify-center text-gray-900">
-      <Collapsible.Trigger className="group flex items-center gap-2 rounded-sm bg-gray-100 px-2 py-1 text-sm font-medium hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-blue-800 active:bg-gray-200">
+      <Collapsible.Trigger className="group flex items-center gap-2 rounded-sm bg-gray-100 px-2 py-1 text-sm font-medium hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 active:bg-gray-200">
         <ChevronIcon className="size-3 transition-all ease-out group-data-[panel-open]:rotate-90" />
         Recovery keys
       </Collapsible.Trigger>
-      <Collapsible.Panel className="flex h-[var(--collapsible-panel-height)] flex-col justify-end overflow-hidden text-sm transition-all ease-out [[data-starting-style],[data-ending-style]]:h-0">
+      <Collapsible.Panel className="flex h-[var(--collapsible-panel-height)] flex-col justify-end overflow-hidden text-sm transition-all ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
         <div className="mt-1 flex cursor-text flex-col gap-2 rounded-sm bg-gray-100 py-2 pl-7">
           <div>alien-bean-pasta</div>
           <div>wild-irish-burrito</div>
diff --git a/docs/src/app/(public)/(content)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css b/docs/src/app/(public)/(content)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
index 997087552f..834b025923 100644
--- a/docs/src/app/(public)/(content)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
+++ b/docs/src/app/(public)/(content)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
@@ -41,6 +41,7 @@
   font-size: 1rem;
   font-weight: 500;
   line-height: 1.5rem;
+  background-color: transparent;
   color: var(--color-red);
   border-radius: 0.25rem;
   padding: 0.125rem 0.375rem;
diff --git a/docs/src/app/(public)/(content)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index df3f850fa3..50984a3c83 100644
--- a/docs/src/app/(public)/(content)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -22,12 +22,12 @@ export default function ExampleDialog() {
         }
       }}
     >
-      <Dialog.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+      <Dialog.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
         Tweet
       </Dialog.Trigger>
       <Dialog.Portal>
-        <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-[calc(50%+1.25rem*var(--nested-dialogs))] left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 scale-[calc(1-0.1*var(--nested-dialogs))] rounded-lg bg-gray-50 p-6 text-gray-900 outline outline-gray-200 transition-all duration-150 data-[has-nested-dialogs]:after:absolute data-[has-nested-dialogs]:after:inset-0 data-[has-nested-dialogs]:after:rounded-[inherit] data-[has-nested-dialogs]:after:bg-black/5 dark:outline-gray-300 [[data-starting-style],[data-ending-style]]:scale-90 [[data-starting-style],[data-ending-style]]:opacity-0">
+        <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70" />
+        <Dialog.Popup className="fixed top-[calc(50%+1.25rem*var(--nested-dialogs))] left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 scale-[calc(1-0.1*var(--nested-dialogs))] rounded-lg bg-gray-50 p-6 text-gray-900 outline outline-1 outline-gray-200 transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[has-nested-dialogs]:after:absolute data-[has-nested-dialogs]:after:inset-0 data-[has-nested-dialogs]:after:rounded-[inherit] data-[has-nested-dialogs]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:outline-gray-300">
           <Dialog.Title className="-mt-1.5 mb-1 text-lg font-medium">
             New tweet
           </Dialog.Title>
@@ -41,18 +41,18 @@ export default function ExampleDialog() {
           >
             <textarea
               required
-              className="min-h-48 w-full rounded-md border border-gray-200 px-3.5 py-2 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+              className="min-h-48 w-full rounded-md border border-gray-200 px-3.5 py-2 text-base text-gray-900 focus:outline focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
               placeholder="What’s on your mind?"
               value={textareaValue}
               onChange={(event) => setTextareaValue(event.target.value)}
             />
             <div className="flex justify-end gap-4">
-              <Dialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+              <Dialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
                 Cancel
               </Dialog.Close>
               <button
                 type="submit"
-                className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
+                className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
               >
                 Tweet
               </button>
@@ -64,7 +64,7 @@ export default function ExampleDialog() {
       {/* Confirmation dialog */}
       <AlertDialog.Root open={confirmationOpen} onOpenChange={setConfirmationOpen}>
         <AlertDialog.Portal>
-          <AlertDialog.Popup className="fixed top-[calc(50%+1.25rem*var(--nested-dialogs))] left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 scale-[calc(1-0.1*var(--nested-dialogs))] rounded-lg bg-gray-50 p-6 text-gray-900 outline outline-gray-200 transition-all duration-150 data-[has-nested-dialogs]:after:absolute data-[has-nested-dialogs]:after:inset-0 data-[has-nested-dialogs]:after:rounded-[inherit] data-[has-nested-dialogs]:after:bg-black/5 dark:outline-gray-300 [[data-starting-style],[data-ending-style]]:scale-90 [[data-starting-style],[data-ending-style]]:opacity-0">
+          <AlertDialog.Popup className="fixed top-[calc(50%+1.25rem*var(--nested-dialogs))] left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 scale-[calc(1-0.1*var(--nested-dialogs))] rounded-lg bg-gray-50 p-6 text-gray-900 outline outline-1 outline-gray-200 transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[has-nested-dialogs]:after:absolute data-[has-nested-dialogs]:after:inset-0 data-[has-nested-dialogs]:after:rounded-[inherit] data-[has-nested-dialogs]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:outline-gray-300">
             <AlertDialog.Title className="-mt-1.5 mb-1 text-lg font-medium">
               Discard tweet?
             </AlertDialog.Title>
@@ -72,12 +72,12 @@ export default function ExampleDialog() {
               Your tweet will be lost.
             </AlertDialog.Description>
             <div className="flex items-center justify-end gap-4">
-              <AlertDialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+              <AlertDialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
                 Go back
               </AlertDialog.Close>
               <button
                 type="button"
-                className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
+                className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
                 onClick={() => {
                   setConfirmationOpen(false);
                   setDialogOpen(false);
diff --git a/docs/src/app/(public)/(content)/react/components/dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/dialog/demos/hero/tailwind/index.tsx
index 741f25f0dc..76479dbbd3 100644
--- a/docs/src/app/(public)/(content)/react/components/dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/dialog/demos/hero/tailwind/index.tsx
@@ -4,12 +4,12 @@ import { Dialog } from '@base-ui-components/react/dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+      <Dialog.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
-        <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 bg-gray-50 p-6 text-gray-900 outline outline-gray-200 transition-all duration-150 dark:outline-gray-300 [[data-starting-style],[data-ending-style]]:scale-90 [[data-starting-style],[data-ending-style]]:opacity-0">
+        <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70" />
+        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-gray-50 p-6 text-gray-900 outline outline-1 outline-gray-200 transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:outline-gray-300">
           <Dialog.Title className="-mt-1.5 mb-1 text-lg font-medium">
             Notifications
           </Dialog.Title>
@@ -17,7 +17,7 @@ export default function ExampleDialog() {
             You are all caught up. Good job!
           </Dialog.Description>
           <div className="flex justify-end gap-4">
-            <Dialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+            <Dialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
               Close
             </Dialog.Close>
           </div>
diff --git a/docs/src/app/(public)/(content)/react/components/dialog/demos/nested/css-modules/index.module.css b/docs/src/app/(public)/(content)/react/components/dialog/demos/nested/css-modules/index.module.css
index 66f0e6ba32..b528c2d0a9 100644
--- a/docs/src/app/(public)/(content)/react/components/dialog/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(public)/(content)/react/components/dialog/demos/nested/css-modules/index.module.css
@@ -41,6 +41,7 @@
   font-size: 1rem;
   font-weight: 500;
   line-height: 1.5rem;
+  background-color: transparent;
   color: var(--color-blue);
   border-radius: 0.25rem;
   padding: 0.125rem 0.375rem;
diff --git a/docs/src/app/(public)/(content)/react/components/dialog/demos/nested/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/dialog/demos/nested/tailwind/index.tsx
index 344605c188..ea51902586 100644
--- a/docs/src/app/(public)/(content)/react/components/dialog/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/dialog/demos/nested/tailwind/index.tsx
@@ -4,12 +4,12 @@ import { Dialog } from '@base-ui-components/react/dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+      <Dialog.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
-        <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-[calc(50%+1.25rem*var(--nested-dialogs))] left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 scale-[calc(1-0.1*var(--nested-dialogs))] rounded-lg bg-gray-50 p-6 text-gray-900 outline outline-gray-200 transition-all duration-150 data-[has-nested-dialogs]:after:absolute data-[has-nested-dialogs]:after:inset-0 data-[has-nested-dialogs]:after:rounded-[inherit] data-[has-nested-dialogs]:after:bg-black/5 dark:outline-gray-300 [[data-starting-style],[data-ending-style]]:scale-90 [[data-starting-style],[data-ending-style]]:opacity-0">
+        <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70" />
+        <Dialog.Popup className="fixed top-[calc(50%+1.25rem*var(--nested-dialogs))] left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 scale-[calc(1-0.1*var(--nested-dialogs))] rounded-lg bg-gray-50 p-6 text-gray-900 outline outline-1 outline-gray-200 transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[has-nested-dialogs]:after:absolute data-[has-nested-dialogs]:after:inset-0 data-[has-nested-dialogs]:after:rounded-[inherit] data-[has-nested-dialogs]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:outline-gray-300">
           <Dialog.Title className="-mt-1.5 mb-1 text-lg font-medium">
             Notifications
           </Dialog.Title>
@@ -19,11 +19,11 @@ export default function ExampleDialog() {
           <div className="flex items-center justify-end gap-4">
             <div className="mr-auto flex">
               <Dialog.Root>
-                <Dialog.Trigger className="-mx-1.5 -my-0.5 flex items-center justify-center rounded-sm px-1.5 py-0.5 text-base font-medium text-blue-800 hover:bg-blue-800/5 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-blue-800/10 dark:hover:bg-blue-800/15 dark:active:bg-blue-800/25">
+                <Dialog.Trigger className="-mx-1.5 -my-0.5 flex items-center justify-center rounded-sm px-1.5 py-0.5 text-base font-medium text-blue-800 hover:bg-blue-800/5 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-blue-800/10 dark:hover:bg-blue-800/15 dark:active:bg-blue-800/25">
                   Customize
                 </Dialog.Trigger>
                 <Dialog.Portal>
-                  <Dialog.Popup className="fixed top-[calc(50%+1.25rem*var(--nested-dialogs))] left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 scale-[calc(1-0.1*var(--nested-dialogs))] rounded-lg bg-gray-50 p-6 text-gray-900 outline outline-gray-200 transition-all duration-150 data-[has-nested-dialogs]:after:absolute data-[has-nested-dialogs]:after:inset-0 data-[has-nested-dialogs]:after:rounded-[inherit] data-[has-nested-dialogs]:after:bg-black/5 dark:outline-gray-300 [[data-starting-style],[data-ending-style]]:scale-90 [[data-starting-style],[data-ending-style]]:opacity-0">
+                  <Dialog.Popup className="fixed top-[calc(50%+1.25rem*var(--nested-dialogs))] left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 scale-[calc(1-0.1*var(--nested-dialogs))] rounded-lg bg-gray-50 p-6 text-gray-900 outline outline-1 outline-gray-200 transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[has-nested-dialogs]:after:absolute data-[has-nested-dialogs]:after:inset-0 data-[has-nested-dialogs]:after:rounded-[inherit] data-[has-nested-dialogs]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:outline-gray-300">
                     <Dialog.Title className="-mt-1.5 mb-1 text-lg font-medium">
                       Customize notification
                     </Dialog.Title>
@@ -31,7 +31,7 @@ export default function ExampleDialog() {
                       Review your settings here.
                     </Dialog.Description>
                     <div className="flex items-center justify-end gap-4">
-                      <Dialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+                      <Dialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
                         Close
                       </Dialog.Close>
                     </div>
@@ -40,7 +40,7 @@ export default function ExampleDialog() {
               </Dialog.Root>
             </div>
 
-            <Dialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+            <Dialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
               Close
             </Dialog.Close>
           </div>
diff --git a/docs/src/app/(public)/(content)/react/components/field/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/field/demos/hero/tailwind/index.tsx
index cf97c485a1..13a7c25b44 100644
--- a/docs/src/app/(public)/(content)/react/components/field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/field/demos/hero/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleField() {
       <Field.Control
         required
         placeholder="Required"
-        className="h-10 w-full rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+        className="h-10 w-full rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
       />
       <Field.Error className="text-sm text-red-800" match="valueMissing">
         Please enter your name
diff --git a/docs/src/app/(public)/(content)/react/components/fieldset/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/fieldset/demos/hero/tailwind/index.tsx
index 38a7430d31..56547f98eb 100644
--- a/docs/src/app/(public)/(content)/react/components/fieldset/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/fieldset/demos/hero/tailwind/index.tsx
@@ -15,7 +15,7 @@ export default function ExampleField() {
         </Field.Label>
         <Field.Control
           placeholder="Enter company name"
-          className="h-10 w-full rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="h-10 w-full rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
         />
       </Field.Root>
 
@@ -25,7 +25,7 @@ export default function ExampleField() {
         </Field.Label>
         <Field.Control
           placeholder="Enter fiscal number"
-          className="h-10 w-full rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="h-10 w-full rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
         />
       </Field.Root>
     </Fieldset.Root>
diff --git a/docs/src/app/(public)/(content)/react/components/form/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/form/demos/hero/tailwind/index.tsx
index b811532c49..986c5186af 100644
--- a/docs/src/app/(public)/(content)/react/components/form/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/form/demos/hero/tailwind/index.tsx
@@ -36,14 +36,14 @@ export default function ExampleForm() {
           defaultValue="https://example.com"
           placeholder="https://example.com"
           pattern="https?://.*"
-          className="h-10 w-full rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="h-10 w-full rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
         />
         <Field.Error className="text-sm text-red-800" />
       </Field.Root>
       <button
         disabled={loading}
         type="submit"
-        className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400"
+        className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400"
       >
         Submit
       </button>
diff --git a/docs/src/app/(public)/(content)/react/components/input/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/input/demos/hero/tailwind/index.tsx
index 38f341eeb7..1d3d498bdd 100644
--- a/docs/src/app/(public)/(content)/react/components/input/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/input/demos/hero/tailwind/index.tsx
@@ -5,7 +5,7 @@ export default function ExampleInput() {
   return (
     <Input
       placeholder="Name"
-      className="h-10 w-full max-w-64 rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+      className="h-10 w-full max-w-64 rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
     />
   );
 }
diff --git a/docs/src/app/(public)/(content)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index e239c60065..06367024db 100644
--- a/docs/src/app/(public)/(content)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -8,19 +8,19 @@ export default function ExampleMenu() {
 
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
+      <Menu.Trigger className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
         Workspace <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
-        <Menu.Positioner className="outline-0" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline outline-gray-200 transition-[transform,scale,opacity] dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300 [[data-starting-style],[data-ending-style]]:scale-90 [[data-starting-style],[data-ending-style]]:opacity-0">
+        <Menu.Positioner className="outline-none" sideOffset={8}>
+          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
             <Menu.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
               <ArrowSvg />
             </Menu.Arrow>
             <Menu.CheckboxItem
               checked={showMinimap}
               onCheckedChange={setShowMinimap}
-              className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+              className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
             >
               <Menu.CheckboxItemIndicator className="col-start-1">
                 <CheckIcon className="size-3" />
@@ -30,7 +30,7 @@ export default function ExampleMenu() {
             <Menu.CheckboxItem
               checked={showSearch}
               onCheckedChange={setShowSearch}
-              className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+              className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
             >
               <Menu.CheckboxItemIndicator className="col-start-1">
                 <CheckIcon className="size-3" />
@@ -40,7 +40,7 @@ export default function ExampleMenu() {
             <Menu.CheckboxItem
               checked={showSidebar}
               onCheckedChange={setShowSidebar}
-              className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+              className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
             >
               <Menu.CheckboxItemIndicator className="col-start-1">
                 <CheckIcon className="size-3" />
diff --git a/docs/src/app/(public)/(content)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/menu/demos/group-labels/tailwind/index.tsx
index d73f077381..010dcd58b7 100644
--- a/docs/src/app/(public)/(content)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -9,12 +9,12 @@ export default function ExampleMenu() {
 
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
+      <Menu.Trigger className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
         View <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
-        <Menu.Positioner className="outline-0" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline outline-gray-200 transition-[transform,scale,opacity] dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300 [[data-starting-style],[data-ending-style]]:scale-90 [[data-starting-style],[data-ending-style]]:opacity-0">
+        <Menu.Positioner className="outline-none" sideOffset={8}>
+          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
             <Menu.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
               <ArrowSvg />
             </Menu.Arrow>
@@ -26,7 +26,7 @@ export default function ExampleMenu() {
               <Menu.RadioGroup value={value} onValueChange={setValue}>
                 <Menu.RadioItem
                   value="date"
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
                 >
                   <Menu.RadioItemIndicator className="col-start-1">
                     <CheckIcon className="size-3" />
@@ -35,7 +35,7 @@ export default function ExampleMenu() {
                 </Menu.RadioItem>
                 <Menu.RadioItem
                   value="name"
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
                 >
                   <Menu.RadioItemIndicator className="col-start-1">
                     <CheckIcon className="size-3" />
@@ -44,7 +44,7 @@ export default function ExampleMenu() {
                 </Menu.RadioItem>
                 <Menu.RadioItem
                   value="type"
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
                 >
                   <Menu.RadioItemIndicator className="col-start-1">
                     <CheckIcon className="size-3" />
@@ -63,7 +63,7 @@ export default function ExampleMenu() {
               <Menu.CheckboxItem
                 checked={showMinimap}
                 onCheckedChange={setShowMinimap}
-                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
               >
                 <Menu.CheckboxItemIndicator className="col-start-1">
                   <CheckIcon className="size-3" />
@@ -73,7 +73,7 @@ export default function ExampleMenu() {
               <Menu.CheckboxItem
                 checked={showSearch}
                 onCheckedChange={setShowSearch}
-                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
               >
                 <Menu.CheckboxItemIndicator className="col-start-1">
                   <CheckIcon className="size-3" />
@@ -83,7 +83,7 @@ export default function ExampleMenu() {
               <Menu.CheckboxItem
                 checked={showSidebar}
                 onCheckedChange={setShowSidebar}
-                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
               >
                 <Menu.CheckboxItemIndicator className="col-start-1">
                   <CheckIcon className="size-3" />
diff --git a/docs/src/app/(public)/(content)/react/components/menu/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/menu/demos/hero/tailwind/index.tsx
index 136d99f4e9..d3e04facf8 100644
--- a/docs/src/app/(public)/(content)/react/components/menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/menu/demos/hero/tailwind/index.tsx
@@ -4,33 +4,33 @@ import { Menu } from '@base-ui-components/react/menu';
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
+      <Menu.Trigger className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
         Song <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
-        <Menu.Positioner className="outline-0" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline outline-gray-200 transition-[transform,scale,opacity] dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300 [[data-starting-style],[data-ending-style]]:scale-90 [[data-starting-style],[data-ending-style]]:opacity-0">
+        <Menu.Positioner className="outline-none" sideOffset={8}>
+          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
             <Menu.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
               <ArrowSvg />
             </Menu.Arrow>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
               Add to Library
             </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
               Add to Playlist
             </Menu.Item>
             <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
               Play Next
             </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
               Play Last
             </Menu.Item>
             <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
               Favorite
             </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
               Share
             </Menu.Item>
           </Menu.Popup>
diff --git a/docs/src/app/(public)/(content)/react/components/menu/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
index 9742f9b4fb..9514167368 100644
--- a/docs/src/app/(public)/(content)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
@@ -4,26 +4,26 @@ import { Menu } from '@base-ui-components/react/menu';
 export default function ExampleMenu() {
   return (
     <Menu.Root openOnHover>
-      <Menu.Trigger className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
+      <Menu.Trigger className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
         Add to playlist <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
-        <Menu.Positioner className="outline-0" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline outline-gray-200 transition-[transform,scale,opacity] dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300 [[data-starting-style],[data-ending-style]]:scale-90 [[data-starting-style],[data-ending-style]]:opacity-0">
+        <Menu.Positioner className="outline-none" sideOffset={8}>
+          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
             <Menu.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
               <ArrowSvg />
             </Menu.Arrow>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
               Get Up!
             </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
               Inside Out
             </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
               Night Beats
             </Menu.Item>
             <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
               New playlist…
             </Menu.Item>
           </Menu.Popup>
diff --git a/docs/src/app/(public)/(content)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/menu/demos/radio-items/tailwind/index.tsx
index b266186e3f..fc19aa9073 100644
--- a/docs/src/app/(public)/(content)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -5,19 +5,19 @@ export default function ExampleMenu() {
   const [value, setValue] = React.useState('date');
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
+      <Menu.Trigger className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
         Sort <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
-        <Menu.Positioner className="outline-0" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline outline-gray-200 transition-[transform,scale,opacity] dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300 [[data-starting-style],[data-ending-style]]:scale-90 [[data-starting-style],[data-ending-style]]:opacity-0">
+        <Menu.Positioner className="outline-none" sideOffset={8}>
+          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
             <Menu.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
               <ArrowSvg />
             </Menu.Arrow>
             <Menu.RadioGroup value={value} onValueChange={setValue}>
               <Menu.RadioItem
                 value="date"
-                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
               >
                 <Menu.RadioItemIndicator className="col-start-1">
                   <CheckIcon className="size-3" />
@@ -26,7 +26,7 @@ export default function ExampleMenu() {
               </Menu.RadioItem>
               <Menu.RadioItem
                 value="name"
-                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
               >
                 <Menu.RadioItemIndicator className="col-start-1">
                   <CheckIcon className="size-3" />
@@ -35,7 +35,7 @@ export default function ExampleMenu() {
               </Menu.RadioItem>
               <Menu.RadioItem
                 value="type"
-                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
               >
                 <Menu.RadioItemIndicator className="col-start-1">
                   <CheckIcon className="size-3" />
diff --git a/docs/src/app/(public)/(content)/react/components/menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/menu/demos/submenu/tailwind/index.tsx
index d260ffd846..49d27f5e74 100644
--- a/docs/src/app/(public)/(content)/react/components/menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/menu/demos/submenu/tailwind/index.tsx
@@ -4,48 +4,48 @@ import { Menu } from '@base-ui-components/react/menu';
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
+      <Menu.Trigger className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
         Song <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
-        <Menu.Positioner className="outline-0" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline outline-gray-200 transition-[transform,scale,opacity] dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300 [[data-starting-style],[data-ending-style]]:scale-90 [[data-starting-style],[data-ending-style]]:opacity-0">
+        <Menu.Positioner className="outline-none" sideOffset={8}>
+          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
             <Menu.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
               <ArrowSvg />
             </Menu.Arrow>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:text-gray-50 data-[highlighted]:before:bg-gray-900 data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900 [[data-highlighted],[data-popup-open]]:relative [[data-highlighted],[data-popup-open]]:z-0 [[data-highlighted],[data-popup-open]]:before:absolute [[data-highlighted],[data-popup-open]]:before:inset-x-1 [[data-highlighted],[data-popup-open]]:before:inset-y-0 [[data-highlighted],[data-popup-open]]:before:-z-1 [[data-highlighted],[data-popup-open]]:before:rounded-sm">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-sm data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
               Add to Library
             </Menu.Item>
 
             <Menu.Root>
-              <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:text-gray-50 data-[highlighted]:before:bg-gray-900 data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900 [[data-highlighted],[data-popup-open]]:relative [[data-highlighted],[data-popup-open]]:z-0 [[data-highlighted],[data-popup-open]]:before:absolute [[data-highlighted],[data-popup-open]]:before:inset-x-1 [[data-highlighted],[data-popup-open]]:before:inset-y-0 [[data-highlighted],[data-popup-open]]:before:-z-1 [[data-highlighted],[data-popup-open]]:before:rounded-sm">
+              <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-sm data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
                 Add to Playlist <ChevronRightIcon />
               </Menu.SubmenuTrigger>
               <Menu.Portal>
                 <Menu.Positioner
-                  className="outline-0"
+                  className="outline-none"
                   alignOffset={-4}
                   sideOffset={-4}
                 >
-                  <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline outline-gray-200 transition-[transform,scale,opacity] dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300 [[data-starting-style],[data-ending-style]]:scale-90 [[data-starting-style],[data-ending-style]]:opacity-0">
-                    <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:text-gray-50 data-[highlighted]:before:bg-gray-900 data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900 [[data-highlighted],[data-popup-open]]:relative [[data-highlighted],[data-popup-open]]:z-0 [[data-highlighted],[data-popup-open]]:before:absolute [[data-highlighted],[data-popup-open]]:before:inset-x-1 [[data-highlighted],[data-popup-open]]:before:inset-y-0 [[data-highlighted],[data-popup-open]]:before:-z-1 [[data-highlighted],[data-popup-open]]:before:rounded-sm">
+                  <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
+                    <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-sm data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
                       Add to Library
                     </Menu.Item>
-                    <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:text-gray-50 data-[highlighted]:before:bg-gray-900 data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900 [[data-highlighted],[data-popup-open]]:relative [[data-highlighted],[data-popup-open]]:z-0 [[data-highlighted],[data-popup-open]]:before:absolute [[data-highlighted],[data-popup-open]]:before:inset-x-1 [[data-highlighted],[data-popup-open]]:before:inset-y-0 [[data-highlighted],[data-popup-open]]:before:-z-1 [[data-highlighted],[data-popup-open]]:before:rounded-sm">
+                    <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-sm data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
                       Add to Playlist
                     </Menu.Item>
                     <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
-                    <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:text-gray-50 data-[highlighted]:before:bg-gray-900 data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900 [[data-highlighted],[data-popup-open]]:relative [[data-highlighted],[data-popup-open]]:z-0 [[data-highlighted],[data-popup-open]]:before:absolute [[data-highlighted],[data-popup-open]]:before:inset-x-1 [[data-highlighted],[data-popup-open]]:before:inset-y-0 [[data-highlighted],[data-popup-open]]:before:-z-1 [[data-highlighted],[data-popup-open]]:before:rounded-sm">
+                    <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-sm data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
                       Play Next
                     </Menu.Item>
-                    <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:text-gray-50 data-[highlighted]:before:bg-gray-900 data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900 [[data-highlighted],[data-popup-open]]:relative [[data-highlighted],[data-popup-open]]:z-0 [[data-highlighted],[data-popup-open]]:before:absolute [[data-highlighted],[data-popup-open]]:before:inset-x-1 [[data-highlighted],[data-popup-open]]:before:inset-y-0 [[data-highlighted],[data-popup-open]]:before:-z-1 [[data-highlighted],[data-popup-open]]:before:rounded-sm">
+                    <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-sm data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
                       Play Last
                     </Menu.Item>
                     <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
-                    <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:text-gray-50 data-[highlighted]:before:bg-gray-900 data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900 [[data-highlighted],[data-popup-open]]:relative [[data-highlighted],[data-popup-open]]:z-0 [[data-highlighted],[data-popup-open]]:before:absolute [[data-highlighted],[data-popup-open]]:before:inset-x-1 [[data-highlighted],[data-popup-open]]:before:inset-y-0 [[data-highlighted],[data-popup-open]]:before:-z-1 [[data-highlighted],[data-popup-open]]:before:rounded-sm">
+                    <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-sm data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
                       Favorite
                     </Menu.Item>
-                    <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:text-gray-50 data-[highlighted]:before:bg-gray-900 data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900 [[data-highlighted],[data-popup-open]]:relative [[data-highlighted],[data-popup-open]]:z-0 [[data-highlighted],[data-popup-open]]:before:absolute [[data-highlighted],[data-popup-open]]:before:inset-x-1 [[data-highlighted],[data-popup-open]]:before:inset-y-0 [[data-highlighted],[data-popup-open]]:before:-z-1 [[data-highlighted],[data-popup-open]]:before:rounded-sm">
+                    <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-sm data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
                       Share
                     </Menu.Item>
                   </Menu.Popup>
@@ -55,17 +55,17 @@ export default function ExampleMenu() {
 
             <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
 
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:text-gray-50 data-[highlighted]:before:bg-gray-900 data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900 [[data-highlighted],[data-popup-open]]:relative [[data-highlighted],[data-popup-open]]:z-0 [[data-highlighted],[data-popup-open]]:before:absolute [[data-highlighted],[data-popup-open]]:before:inset-x-1 [[data-highlighted],[data-popup-open]]:before:inset-y-0 [[data-highlighted],[data-popup-open]]:before:-z-1 [[data-highlighted],[data-popup-open]]:before:rounded-sm">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-sm data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
               Play Next
             </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:text-gray-50 data-[highlighted]:before:bg-gray-900 data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900 [[data-highlighted],[data-popup-open]]:relative [[data-highlighted],[data-popup-open]]:z-0 [[data-highlighted],[data-popup-open]]:before:absolute [[data-highlighted],[data-popup-open]]:before:inset-x-1 [[data-highlighted],[data-popup-open]]:before:inset-y-0 [[data-highlighted],[data-popup-open]]:before:-z-1 [[data-highlighted],[data-popup-open]]:before:rounded-sm">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-sm data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
               Play Last
             </Menu.Item>
             <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:text-gray-50 data-[highlighted]:before:bg-gray-900 data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900 [[data-highlighted],[data-popup-open]]:relative [[data-highlighted],[data-popup-open]]:z-0 [[data-highlighted],[data-popup-open]]:before:absolute [[data-highlighted],[data-popup-open]]:before:inset-x-1 [[data-highlighted],[data-popup-open]]:before:inset-y-0 [[data-highlighted],[data-popup-open]]:before:-z-1 [[data-highlighted],[data-popup-open]]:before:rounded-sm">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-sm data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
               Favorite
             </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:text-gray-50 data-[highlighted]:before:bg-gray-900 data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900 [[data-highlighted],[data-popup-open]]:relative [[data-highlighted],[data-popup-open]]:z-0 [[data-highlighted],[data-popup-open]]:before:absolute [[data-highlighted],[data-popup-open]]:before:inset-x-1 [[data-highlighted],[data-popup-open]]:before:inset-y-0 [[data-highlighted],[data-popup-open]]:before:-z-1 [[data-highlighted],[data-popup-open]]:before:rounded-sm">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-sm data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
               Share
             </Menu.Item>
           </Menu.Popup>
diff --git a/docs/src/app/(public)/(content)/react/components/number-field/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/number-field/demos/hero/tailwind/index.tsx
index ad2fbbb61e..6d54ea7ca7 100644
--- a/docs/src/app/(public)/(content)/react/components/number-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/number-field/demos/hero/tailwind/index.tsx
@@ -25,7 +25,7 @@ export default function ExampleNumberField() {
         <NumberField.Decrement className="flex size-10 items-center justify-center rounded-tl-md rounded-bl-md border border-gray-200 bg-gray-50 bg-clip-padding text-gray-900 select-none hover:bg-gray-100 active:bg-gray-100">
           <MinusIcon />
         </NumberField.Decrement>
-        <NumberField.Input className="h-10 w-24 border-t border-b border-gray-200 text-center text-base text-gray-900 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800" />
+        <NumberField.Input className="h-10 w-24 border-t border-b border-gray-200 text-center text-base text-gray-900 tabular-nums focus:z-1 focus:outline focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800" />
         <NumberField.Increment className="flex size-10 items-center justify-center rounded-tr-md rounded-br-md border border-gray-200 bg-gray-50 bg-clip-padding text-gray-900 select-none hover:bg-gray-100 active:bg-gray-100">
           <PlusIcon />
         </NumberField.Increment>
diff --git a/docs/src/app/(public)/(content)/react/components/popover/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/popover/demos/hero/tailwind/index.tsx
index 273876f06c..8f45cb3a66 100644
--- a/docs/src/app/(public)/(content)/react/components/popover/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/popover/demos/hero/tailwind/index.tsx
@@ -4,12 +4,12 @@ import { Popover } from '@base-ui-components/react/popover';
 export default function ExamplePopover() {
   return (
     <Popover.Root>
-      <Popover.Trigger className="flex size-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
+      <Popover.Trigger className="flex size-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
         <BellIcon aria-label="Notifications" />
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
-          <Popover.Popup className="origin-[var(--transform-origin)] rounded-lg bg-[canvas] px-6 py-4 text-gray-900 shadow-lg shadow-gray-200 outline outline-gray-200 transition-[transform,scale,opacity] dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300 [[data-starting-style],[data-ending-style]]:scale-90 [[data-starting-style],[data-ending-style]]:opacity-0">
+          <Popover.Popup className="origin-[var(--transform-origin)] rounded-lg bg-[canvas] px-6 py-4 text-gray-900 shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
             <Popover.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
               <ArrowSvg />
             </Popover.Arrow>
diff --git a/docs/src/app/(public)/(content)/react/components/preview-card/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/preview-card/demos/hero/tailwind/index.tsx
index 29838f3e16..965ccc946e 100644
--- a/docs/src/app/(public)/(content)/react/components/preview-card/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/preview-card/demos/hero/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExamplePreviewCard() {
       <p className="max-w-64 text-base text-balance text-gray-900">
         The principles of good{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 no-underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:underline focus-visible:rounded-sm focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800 data-[popup-open]:underline data-[popup-open]:focus-visible:no-underline"
+          className="text-blue-800 no-underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-none hover:underline focus-visible:rounded-sm focus-visible:no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 data-[popup-open]:underline data-[popup-open]:focus-visible:no-underline"
           href="https://en.wikipedia.org/wiki/Typography"
         >
           typography
@@ -17,7 +17,7 @@ export default function ExamplePreviewCard() {
 
       <PreviewCard.Portal>
         <PreviewCard.Positioner sideOffset={8}>
-          <PreviewCard.Popup className="flex w-[240px] origin-[var(--transform-origin)] flex-col gap-2 rounded-lg bg-[canvas] p-2 shadow-lg shadow-gray-200 outline outline-gray-200 transition-[transform,scale,opacity] dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300 [[data-starting-style],[data-ending-style]]:scale-90 [[data-starting-style],[data-ending-style]]:opacity-0">
+          <PreviewCard.Popup className="flex w-[240px] origin-[var(--transform-origin)] flex-col gap-2 rounded-lg bg-[canvas] p-2 shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
             <PreviewCard.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
               <ArrowSvg />
             </PreviewCard.Arrow>
diff --git a/docs/src/app/(public)/(content)/react/components/radio/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/radio/demos/hero/tailwind/index.tsx
index fc2efddfd7..4f60c34ce3 100644
--- a/docs/src/app/(public)/(content)/react/components/radio/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/radio/demos/hero/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function ExampleRadioGroup() {
       <label className="flex items-center gap-2">
         <Radio.Root
           value="fuji-apple"
-          className="flex size-5 items-center justify-center rounded-full outline-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
+          className="flex size-5 items-center justify-center rounded-full outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
         >
           <Radio.Indicator className="flex before:size-2 before:rounded-full before:bg-gray-50 data-[unchecked]:hidden" />
         </Radio.Root>
@@ -26,7 +26,7 @@ export default function ExampleRadioGroup() {
       <label className="flex items-center gap-2">
         <Radio.Root
           value="gala-apple"
-          className="flex size-5 items-center justify-center rounded-full outline-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
+          className="flex size-5 items-center justify-center rounded-full outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
         >
           <Radio.Indicator className="flex before:size-2 before:rounded-full before:bg-gray-50 data-[unchecked]:hidden" />
         </Radio.Root>
@@ -36,7 +36,7 @@ export default function ExampleRadioGroup() {
       <label className="flex items-center gap-2">
         <Radio.Root
           value="granny-smith-apple"
-          className="flex size-5 items-center justify-center rounded-full outline-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
+          className="flex size-5 items-center justify-center rounded-full outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
         >
           <Radio.Indicator className="flex before:size-2 before:rounded-full before:bg-gray-50 data-[unchecked]:hidden" />
         </Radio.Root>
diff --git a/docs/src/app/(public)/(content)/react/components/scroll-area/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/scroll-area/demos/hero/tailwind/index.tsx
index 3a81ca60f2..b5f58269ab 100644
--- a/docs/src/app/(public)/(content)/react/components/scroll-area/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/scroll-area/demos/hero/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { ScrollArea } from '@base-ui-components/react/scroll-area';
 export default function ExampleScrollArea() {
   return (
     <ScrollArea.Root className="h-[8.5rem] w-96 max-w-[calc(100vw-8rem)]">
-      <ScrollArea.Viewport className="h-full overscroll-contain rounded-md outline -outline-offset-1 outline-gray-200 focus-visible:outline-2 focus-visible:outline-blue-800">
+      <ScrollArea.Viewport className="h-full overscroll-contain rounded-md outline outline-1 -outline-offset-1 outline-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800">
         <div className="flex flex-col gap-4 py-3 pr-6 pl-4 text-sm leading-[1.375rem] text-gray-900">
           <p>
             Vernacular architecture is building done outside any academic tradition,
@@ -30,7 +30,7 @@ export default function ExampleScrollArea() {
           </p>
         </div>
       </ScrollArea.Viewport>
-      <ScrollArea.Scrollbar className="m-2 flex w-1 justify-center rounded bg-gray-200 opacity-0 transition-opacity delay-300 [[data-hovering],[data-scrolling]]:opacity-100 [[data-hovering],[data-scrolling]]:delay-0 [[data-hovering],[data-scrolling]]:duration-75">
+      <ScrollArea.Scrollbar className="m-2 flex w-1 justify-center rounded bg-gray-200 opacity-0 transition-opacity delay-300 data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:duration-75 data-[scrolling]:opacity-100 data-[scrolling]:delay-0 data-[scrolling]:duration-75">
         <ScrollArea.Thumb className="w-full rounded bg-gray-500" />
       </ScrollArea.Scrollbar>
     </ScrollArea.Root>
diff --git a/docs/src/app/(public)/(content)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/select/demos/hero/tailwind/index.tsx
index c364e20c87..e7ec3c3f8e 100644
--- a/docs/src/app/(public)/(content)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/select/demos/hero/tailwind/index.tsx
@@ -4,20 +4,20 @@ import { Select } from '@base-ui-components/react/select';
 export default function ExampleSelect() {
   return (
     <Select.Root defaultValue="sans">
-      <Select.Trigger className="flex h-10 min-w-36 items-center justify-between gap-3 rounded-md border border-gray-200 pr-3 pl-3.5 text-base text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
+      <Select.Trigger className="flex h-10 min-w-36 items-center justify-between gap-3 rounded-md border border-gray-200 pr-3 pl-3.5 text-base text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
         <Select.Value placeholder="Sans-serif" />
         <Select.Icon className="flex">
           <ChevronUpDownIcon />
         </Select.Icon>
       </Select.Trigger>
       <Select.Portal>
-        <Select.Positioner className="outline-0" sideOffset={8}>
-          <Select.Popup className="group origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline outline-gray-200 transition-[transform,scale,opacity] dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300 [[data-starting-style],[data-ending-style]]:scale-90 [[data-starting-style],[data-ending-style]]:opacity-0 data-[side=none]:[[data-starting-style],[data-ending-style]]:scale-100 data-[side=none]:[[data-starting-style],[data-ending-style]]:opacity-100 data-[side=none]:[[data-starting-style],[data-ending-style]]:transition-none">
+        <Select.Positioner className="outline-none" sideOffset={8}>
+          <Select.Popup className="group origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:scale-100 data-[ending-style]:opacity-0 data-[ending-style]:opacity-100 data-[ending-style]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0 data-[side=none]:data-[starting-style]:scale-100 data-[side=none]:data-[starting-style]:opacity-100 data-[side=none]:data-[starting-style]:transition-none dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
             <Select.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
               <ArrowSvg />
             </Select.Arrow>
             <Select.Item
-              className="grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-4 pl-2.5 text-sm leading-4 outline-0 select-none group-data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-4 data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+              className="grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-4 pl-2.5 text-sm leading-4 outline-none select-none group-data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-4 data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
               value="sans"
             >
               <Select.ItemIndicator className="col-start-1">
@@ -26,7 +26,7 @@ export default function ExampleSelect() {
               <Select.ItemText className="col-start-2">Sans-serif</Select.ItemText>
             </Select.Item>
             <Select.Item
-              className="grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-4 pl-2.5 text-sm leading-4 outline-0 select-none group-data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-4 data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+              className="grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-4 pl-2.5 text-sm leading-4 outline-none select-none group-data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-4 data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
               value="serif"
             >
               <Select.ItemIndicator className="col-start-1">
@@ -35,7 +35,7 @@ export default function ExampleSelect() {
               <Select.ItemText className="col-start-2">Serif</Select.ItemText>
             </Select.Item>
             <Select.Item
-              className="grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-4 pl-2.5 text-sm leading-4 outline-0 select-none group-data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-4 data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+              className="grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-4 pl-2.5 text-sm leading-4 outline-none select-none group-data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-4 data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
               value="mono"
             >
               <Select.ItemIndicator className="col-start-1">
@@ -44,7 +44,7 @@ export default function ExampleSelect() {
               <Select.ItemText className="col-start-2">Monospace</Select.ItemText>
             </Select.Item>
             <Select.Item
-              className="grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-4 pl-2.5 text-sm leading-4 outline-0 select-none group-data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-4 data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+              className="grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-4 pl-2.5 text-sm leading-4 outline-none select-none group-data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-4 data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
               value="cursive"
             >
               <Select.ItemIndicator className="col-start-1">
diff --git a/docs/src/app/(public)/(content)/react/components/separator/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/separator/demos/hero/tailwind/index.tsx
index f06d902c5d..325ff5d36c 100644
--- a/docs/src/app/(public)/(content)/react/components/separator/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/separator/demos/hero/tailwind/index.tsx
@@ -6,25 +6,25 @@ export default function ExampleSeparator() {
     <div className="flex gap-4 text-nowrap">
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-0 hover:underline focus-visible:rounded-sm focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-none hover:underline focus-visible:rounded-sm focus-visible:no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800"
       >
         Home
       </a>
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-0 hover:underline focus-visible:rounded-sm focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-none hover:underline focus-visible:rounded-sm focus-visible:no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800"
       >
         Pricing
       </a>
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-0 hover:underline focus-visible:rounded-sm focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-none hover:underline focus-visible:rounded-sm focus-visible:no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800"
       >
         Blog
       </a>
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-0 hover:underline focus-visible:rounded-sm focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-none hover:underline focus-visible:rounded-sm focus-visible:no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800"
       >
         Support
       </a>
@@ -33,13 +33,13 @@ export default function ExampleSeparator() {
 
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-0 hover:underline focus-visible:rounded-sm focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-none hover:underline focus-visible:rounded-sm focus-visible:no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800"
       >
         Log in
       </a>
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-0 hover:underline focus-visible:rounded-sm focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-none hover:underline focus-visible:rounded-sm focus-visible:no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800"
       >
         Sign up
       </a>
diff --git a/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx
index fde8b6c76d..1632fac9d2 100644
--- a/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/slider/demos/hero/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleSlider() {
       <Slider.Control className="flex w-56 items-center py-3">
         <Slider.Track className="h-1 w-full rounded bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200">
           <Slider.Indicator className="rounded bg-gray-700" />
-          <Slider.Thumb className="size-4 rounded-full bg-white outline outline-gray-300 focus-visible:outline-2 focus-visible:outline-blue-800" />
+          <Slider.Thumb className="size-4 rounded-full bg-white outline outline-1 outline-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800" />
         </Slider.Track>
       </Slider.Control>
     </Slider.Root>
diff --git a/docs/src/app/(public)/(content)/react/components/switch/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/switch/demos/hero/tailwind/index.tsx
index 9892d7dfcb..04fe4bfa15 100644
--- a/docs/src/app/(public)/(content)/react/components/switch/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/switch/demos/hero/tailwind/index.tsx
@@ -5,7 +5,7 @@ export default function ExampleSwitch() {
   return (
     <Switch.Root
       defaultChecked
-      className="relative flex h-6 w-10 rounded-full bg-gradient-to-r from-gray-700 from-35% to-gray-200 to-65% bg-[length:6.5rem_100%] bg-[100%_0%] bg-no-repeat p-px shadow-[inset_0_1.5px_2px] shadow-gray-200 outline -outline-offset-1 outline-gray-200 transition-[background-position,box-shadow] duration-[125ms] ease-[cubic-bezier(0.26,0.75,0.38,0.45)] before:absolute before:rounded-full before:outline-offset-2 before:outline-blue-800 focus-visible:before:inset-0 focus-visible:before:outline-2 active:bg-gray-100 data-[checked]:bg-[0%_0%] data-[checked]:active:bg-gray-500 dark:from-gray-500 dark:shadow-black/75 dark:outline-white/15 dark:data-[checked]:shadow-none"
+      className="relative flex h-6 w-10 rounded-full bg-gradient-to-r from-gray-700 from-35% to-gray-200 to-65% bg-[length:6.5rem_100%] bg-[100%_0%] bg-no-repeat p-px shadow-[inset_0_1.5px_2px] shadow-gray-200 outline outline-1 -outline-offset-1 outline-gray-200 transition-[background-position,box-shadow] duration-[125ms] ease-[cubic-bezier(0.26,0.75,0.38,0.45)] before:absolute before:rounded-full before:outline-offset-2 before:outline-blue-800 focus-visible:before:inset-0 focus-visible:before:outline focus-visible:before:outline-2 active:bg-gray-100 data-[checked]:bg-[0%_0%] data-[checked]:active:bg-gray-500 dark:from-gray-500 dark:shadow-black/75 dark:outline-white/15 dark:data-[checked]:shadow-none"
     >
       <Switch.Thumb className="aspect-square h-full rounded-full bg-white shadow-[0_0_1px_1px,0_1px_1px,1px_2px_4px_-1px] shadow-gray-100 transition-transform duration-150 data-[checked]:translate-x-4 dark:shadow-black/25" />
     </Switch.Root>
diff --git a/docs/src/app/(public)/(content)/react/components/tabs/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/tabs/demos/hero/tailwind/index.tsx
index f8a5243490..11f220e119 100644
--- a/docs/src/app/(public)/(content)/react/components/tabs/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/tabs/demos/hero/tailwind/index.tsx
@@ -6,39 +6,39 @@ export default function ExampleScrollArea() {
     <Tabs.Root className="rounded-md border border-gray-200" defaultValue="overview">
       <Tabs.List className="relative z-0 flex gap-1 px-1 shadow-[inset_0_-1px] shadow-gray-200">
         <Tabs.Tab
-          className="flex h-8 items-center justify-center border-0 px-2 text-sm font-medium text-gray-600 outline-0 select-none before:inset-x-0 before:inset-y-1 before:rounded-sm before:-outline-offset-1 before:outline-blue-800 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline-2 data-[selected]:text-gray-900"
+          className="flex h-8 items-center justify-center border-0 px-2 text-sm font-medium text-gray-600 outline-none select-none before:inset-x-0 before:inset-y-1 before:rounded-sm before:-outline-offset-1 before:outline-blue-800 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline focus-visible:before:outline-2 data-[selected]:text-gray-900"
           value="overview"
         >
           Overview
         </Tabs.Tab>
         <Tabs.Tab
-          className="flex h-8 items-center justify-center border-0 px-2 text-sm font-medium text-gray-600 outline-0 select-none before:inset-x-0 before:inset-y-1 before:rounded-sm before:-outline-offset-1 before:outline-blue-800 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline-2 data-[selected]:text-gray-900"
+          className="flex h-8 items-center justify-center border-0 px-2 text-sm font-medium text-gray-600 outline-none select-none before:inset-x-0 before:inset-y-1 before:rounded-sm before:-outline-offset-1 before:outline-blue-800 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline focus-visible:before:outline-2 data-[selected]:text-gray-900"
           value="projects"
         >
           Projects
         </Tabs.Tab>
         <Tabs.Tab
-          className="flex h-8 items-center justify-center border-0 px-2 text-sm font-medium text-gray-600 outline-0 select-none before:inset-x-0 before:inset-y-1 before:rounded-sm before:-outline-offset-1 before:outline-blue-800 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline-2 data-[selected]:text-gray-900"
+          className="flex h-8 items-center justify-center border-0 px-2 text-sm font-medium text-gray-600 outline-none select-none before:inset-x-0 before:inset-y-1 before:rounded-sm before:-outline-offset-1 before:outline-blue-800 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline focus-visible:before:outline-2 data-[selected]:text-gray-900"
           value="account"
         >
           Account
         </Tabs.Tab>
-        <Tabs.Indicator className="absolute top-1/2 left-0 -z-1 h-6 w-[var(--active-tab-width)] -translate-y-1/2 translate-x-[var(--active-tab-left)] rounded-sm bg-gray-100 transition-all duration-200 ease-in-out" />
+        <Tabs.Indicator className="absolute top-1/2 left-0 z-[-1] h-6 w-[var(--active-tab-width)] -translate-y-1/2 translate-x-[var(--active-tab-left)] rounded-sm bg-gray-100 transition-all duration-200 ease-in-out" />
       </Tabs.List>
       <Tabs.Panel
-        className="relative flex h-32 items-center justify-center -outline-offset-1 outline-blue-800 focus-visible:rounded-md focus-visible:outline-2"
+        className="relative flex h-32 items-center justify-center -outline-offset-1 outline-blue-800 focus-visible:rounded-md focus-visible:outline focus-visible:outline-2"
         value="overview"
       >
         <OverviewIcon className="size-10 text-gray-300" />
       </Tabs.Panel>
       <Tabs.Panel
-        className="relative flex h-32 items-center justify-center -outline-offset-1 outline-blue-800 focus-visible:rounded-md focus-visible:outline-2"
+        className="relative flex h-32 items-center justify-center -outline-offset-1 outline-blue-800 focus-visible:rounded-md focus-visible:outline focus-visible:outline-2"
         value="projects"
       >
         <ProjectIcon className="size-10 text-gray-300" />
       </Tabs.Panel>
       <Tabs.Panel
-        className="relative flex h-32 items-center justify-center -outline-offset-1 outline-blue-800 focus-visible:rounded-md focus-visible:outline-2"
+        className="relative flex h-32 items-center justify-center -outline-offset-1 outline-blue-800 focus-visible:rounded-md focus-visible:outline focus-visible:outline-2"
         value="account"
       >
         <PersonIcon className="size-10 text-gray-300" />
diff --git a/docs/src/app/(public)/(content)/react/components/toggle-group/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/toggle-group/demos/hero/tailwind/index.tsx
index 17e574a35c..6d72d7c38b 100644
--- a/docs/src/app/(public)/(content)/react/components/toggle-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/toggle-group/demos/hero/tailwind/index.tsx
@@ -11,21 +11,21 @@ export default function ExampleToggleGroup() {
       <Toggle
         aria-label="Align left"
         value="left"
-        className="flex size-8 items-center justify-center rounded-sm text-gray-600 select-none hover:bg-gray-100 focus-visible:bg-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[pressed]:bg-gray-100 data-[pressed]:text-gray-900"
+        className="flex size-8 items-center justify-center rounded-sm text-gray-600 select-none hover:bg-gray-100 focus-visible:bg-none focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[pressed]:bg-gray-100 data-[pressed]:text-gray-900"
       >
         <AlignLeftIcon className="size-4" />
       </Toggle>
       <Toggle
         aria-label="Align center"
         value="center"
-        className="flex size-8 items-center justify-center rounded-sm text-gray-600 select-none hover:bg-gray-100 focus-visible:bg-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[pressed]:bg-gray-100 data-[pressed]:text-gray-900"
+        className="flex size-8 items-center justify-center rounded-sm text-gray-600 select-none hover:bg-gray-100 focus-visible:bg-none focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[pressed]:bg-gray-100 data-[pressed]:text-gray-900"
       >
         <AlignCenterIcon className="size-4" />
       </Toggle>
       <Toggle
         aria-label="Align right"
         value="right"
-        className="flex size-8 items-center justify-center rounded-sm text-gray-600 select-none hover:bg-gray-100 focus-visible:bg-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[pressed]:bg-gray-100 data-[pressed]:text-gray-900"
+        className="flex size-8 items-center justify-center rounded-sm text-gray-600 select-none hover:bg-gray-100 focus-visible:bg-none focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[pressed]:bg-gray-100 data-[pressed]:text-gray-900"
       >
         <AlignRightIcon className="size-4" />
       </Toggle>
diff --git a/docs/src/app/(public)/(content)/react/components/toggle/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/toggle/demos/hero/tailwind/index.tsx
index e15b182f13..7beab7aa95 100644
--- a/docs/src/app/(public)/(content)/react/components/toggle/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/toggle/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleToggle() {
     <div className="flex gap-px rounded-md border border-gray-200 bg-gray-50 p-0.5">
       <Toggle
         aria-label="Favorite"
-        className="flex size-8 items-center justify-center rounded-sm text-gray-600 select-none hover:bg-gray-100 focus-visible:bg-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[pressed]:text-gray-900"
+        className="flex size-8 items-center justify-center rounded-sm text-gray-600 select-none hover:bg-gray-100 focus-visible:bg-none focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[pressed]:text-gray-900"
         render={(props, state) => {
           if (state.pressed) {
             return (
diff --git a/docs/src/app/(public)/(content)/react/components/tooltip/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/tooltip/demos/hero/tailwind/index.tsx
index e9ffd766b4..167e65587b 100644
--- a/docs/src/app/(public)/(content)/react/components/tooltip/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/tooltip/demos/hero/tailwind/index.tsx
@@ -6,12 +6,12 @@ export default function ExampleTooltip() {
     <Tooltip.Provider>
       <div className="flex gap-px rounded-md border border-gray-200 bg-gray-50 p-0.5">
         <Tooltip.Root>
-          <Tooltip.Trigger className="flex size-8 items-center justify-center rounded-sm text-gray-900 select-none hover:bg-gray-100 focus-visible:bg-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[popup-open]:bg-gray-100 focus-visible:[&:not(:hover)]:bg-transparent">
+          <Tooltip.Trigger className="flex size-8 items-center justify-center rounded-sm text-gray-900 select-none hover:bg-gray-100 focus-visible:bg-none focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[popup-open]:bg-gray-100 focus-visible:[&:not(:hover)]:bg-transparent">
             <BoldIcon aria-label="Bold" className="size-4" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Positioner sideOffset={10}>
-              <Tooltip.Popup className="flex origin-[var(--transform-origin)] flex-col rounded-md bg-[canvas] px-2 py-1 text-sm shadow-lg shadow-gray-200 outline outline-gray-200 transition-[transform,scale,opacity] data-[instant]:duration-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300 [[data-starting-style],[data-ending-style]]:scale-90 [[data-starting-style],[data-ending-style]]:opacity-0">
+              <Tooltip.Popup className="flex origin-[var(--transform-origin)] flex-col rounded-md bg-[canvas] px-2 py-1 text-sm shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[instant]:duration-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
                 <Tooltip.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
                   <ArrowSvg />
                 </Tooltip.Arrow>
@@ -22,12 +22,12 @@ export default function ExampleTooltip() {
         </Tooltip.Root>
 
         <Tooltip.Root>
-          <Tooltip.Trigger className="flex size-8 items-center justify-center rounded-sm text-gray-900 select-none hover:bg-gray-100 focus-visible:bg-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[popup-open]:bg-gray-100 focus-visible:[&:not(:hover)]:bg-transparent">
+          <Tooltip.Trigger className="flex size-8 items-center justify-center rounded-sm text-gray-900 select-none hover:bg-gray-100 focus-visible:bg-none focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[popup-open]:bg-gray-100 focus-visible:[&:not(:hover)]:bg-transparent">
             <ItalicIcon aria-label="Italic" className="size-4" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Positioner sideOffset={10}>
-              <Tooltip.Popup className="flex origin-[var(--transform-origin)] flex-col rounded-md bg-[canvas] px-2 py-1 text-sm shadow-lg shadow-gray-200 outline outline-gray-200 transition-[transform,scale,opacity] data-[instant]:duration-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300 [[data-starting-style],[data-ending-style]]:scale-90 [[data-starting-style],[data-ending-style]]:opacity-0">
+              <Tooltip.Popup className="flex origin-[var(--transform-origin)] flex-col rounded-md bg-[canvas] px-2 py-1 text-sm shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[instant]:duration-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
                 <Tooltip.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
                   <ArrowSvg />
                 </Tooltip.Arrow>
@@ -38,12 +38,12 @@ export default function ExampleTooltip() {
         </Tooltip.Root>
 
         <Tooltip.Root>
-          <Tooltip.Trigger className="flex size-8 items-center justify-center rounded-sm text-gray-900 select-none hover:bg-gray-100 focus-visible:bg-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[popup-open]:bg-gray-100 focus-visible:[&:not(:hover)]:bg-transparent">
+          <Tooltip.Trigger className="flex size-8 items-center justify-center rounded-sm text-gray-900 select-none hover:bg-gray-100 focus-visible:bg-none focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[popup-open]:bg-gray-100 focus-visible:[&:not(:hover)]:bg-transparent">
             <UnderlineIcon aria-label="Underline" className="size-4" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Positioner sideOffset={10}>
-              <Tooltip.Popup className="flex origin-[var(--transform-origin)] flex-col rounded-md bg-[canvas] px-2 py-1 text-sm shadow-lg shadow-gray-200 outline outline-gray-200 transition-[transform,scale,opacity] data-[instant]:duration-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300 [[data-starting-style],[data-ending-style]]:scale-90 [[data-starting-style],[data-ending-style]]:opacity-0">
+              <Tooltip.Popup className="flex origin-[var(--transform-origin)] flex-col rounded-md bg-[canvas] px-2 py-1 text-sm shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[instant]:duration-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
                 <Tooltip.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
                   <ArrowSvg />
                 </Tooltip.Arrow>
diff --git a/docs/src/app/(public)/(content)/react/handbook/animation/page.mdx b/docs/src/app/(public)/(content)/react/handbook/animation/page.mdx
index e455907ac5..792148415a 100644
--- a/docs/src/app/(public)/(content)/react/handbook/animation/page.mdx
+++ b/docs/src/app/(public)/(content)/react/handbook/animation/page.mdx
@@ -38,7 +38,7 @@ For example, if the user closes a popup before it finishes opening, with CSS tra
 Use the following Base UI attributes for creating CSS animations when a component becomes visible or hidden:
 
 - `[data-open]` corresponds to the style applied when a component becomes visible.
-- `[data-ending-style]` corresponds the style applied before a component becomes hidden.
+- `[data-closed]` corresponds the style applied before a component becomes hidden.
 
 ```css title="popover.css"
 @keyframes scaleIn {
diff --git a/docs/src/app/(public)/(content)/react/handbook/styling/page.mdx b/docs/src/app/(public)/(content)/react/handbook/styling/page.mdx
index 12ab60b59f..aaba818741 100644
--- a/docs/src/app/(public)/(content)/react/handbook/styling/page.mdx
+++ b/docs/src/app/(public)/(content)/react/handbook/styling/page.mdx
@@ -42,16 +42,16 @@ import { Menu } from '@base-ui-components/react/menu';
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
+      <Menu.Trigger className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
         Song
       </Menu.Trigger>
       <Menu.Portal>
-        <Menu.Positioner className="outline-0" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline outline-gray-200 transition-[transform,scale,opacity] dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300 [[data-starting-style],[data-ending-style]]:scale-90 [[data-starting-style],[data-ending-style]]:opacity-0">
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
+        <Menu.Positioner className="outline-none" sideOffset={8}>
+          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
               Add to Library
             </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-0 select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
               Add to Playlist
             </Menu.Item>
           </Menu.Popup>
diff --git a/docs/src/app/(public)/(content)/react/utils/direction-provider/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/utils/direction-provider/demos/hero/tailwind/index.tsx
index 2cb0255d4a..cfd29efe2b 100644
--- a/docs/src/app/(public)/(content)/react/utils/direction-provider/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/utils/direction-provider/demos/hero/tailwind/index.tsx
@@ -10,7 +10,7 @@ export default function ExampleDirectionProvider() {
           <Slider.Control className="flex w-56 items-center py-3">
             <Slider.Track className="relative h-1 w-full rounded bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200">
               <Slider.Indicator className="rounded bg-gray-700" />
-              <Slider.Thumb className="size-4 rounded-full bg-white outline outline-gray-300 focus-visible:outline-2 focus-visible:outline-blue-800" />
+              <Slider.Thumb className="size-4 rounded-full bg-white outline outline-1 outline-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800" />
             </Slider.Track>
           </Slider.Control>
         </Slider.Root>
diff --git a/docs/src/components/Demo/CodeSandboxLink.tsx b/docs/src/components/Demo/CodeSandboxLink.tsx
index ded2498d39..65c11c2fc6 100644
--- a/docs/src/components/Demo/CodeSandboxLink.tsx
+++ b/docs/src/components/Demo/CodeSandboxLink.tsx
@@ -8,6 +8,23 @@ import { GhostButton } from '../GhostButton';
 const COMMIT_REF = process.env.PULL_REQUEST_ID ? process.env.COMMIT_REF : undefined;
 const SOURCE_CODE_REPO = process.env.SOURCE_CODE_REPO;
 
+const globalCss = `
+    <style>
+      body {
+        font-family: system-ui;
+        margin: 0;
+      }
+      #root {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        min-height: 100vh;
+        padding: 3rem;
+        isolation: isolate;
+      }
+    </style>
+`;
+
 const tailwindSetup = `
     <!-- Check out the Tailwind CSS' installation guide for setting it up: https://tailwindcss.com/docs/installation -->
     <script src="https://cdn.tailwindcss.com"></script>
@@ -33,12 +50,29 @@ export function CodeSandboxLink({ title, description, ...props }: CodeSandboxLin
   } = useDemoContext();
 
   const handleClick = React.useCallback(() => {
-    let additionalHtmlHeadContent: string | undefined;
+    let additionalHtmlHeadContent = globalCss;
 
     if (name === 'tailwind') {
-      additionalHtmlHeadContent = tailwindSetup;
+      additionalHtmlHeadContent += tailwindSetup;
+
+      files.forEach((file) => {
+        const cssClasses = file.content.matchAll(/className="(.+?)"/gs);
+        additionalHtmlHeadContent += `
+
+    <!-- Inject classes used so that Tailwind loaded from the CDN can pre-render them. -->
+    <!-- This is for the CodeSandbox example only. You don't need this in your app. -->`;
+        for (const match of cssClasses) {
+          // Inject css classes used on the page so that initial animations aren't broken
+          // Otherwise, TW running in the browser won't see all the classes before the components
+          // mount for the first time
+          const classes = match[1];
+          if (!additionalHtmlHeadContent.includes(classes)) {
+            additionalHtmlHeadContent += `\n    <meta name="custom" class="${classes}" />`;
+          }
+        }
+      });
     } else if (name === 'css-modules') {
-      additionalHtmlHeadContent = cssThemeSetup;
+      additionalHtmlHeadContent += cssThemeSetup;
     }
 
     createCodeSandbox({
@@ -59,10 +93,7 @@ export function CodeSandboxLink({ title, description, ...props }: CodeSandboxLin
       additionalHtmlHeadContent,
       onAddingFile: (fileName, content) => {
         if (fileName === 'theme.css') {
-          content = content.replace(
-            ':root {',
-            `:root {\n  color-scheme: light dark;\n  font-family: system-ui;\n`,
-          );
+          content = content.replace(':root {', `:root {\n  color-scheme: light dark;\n`);
 
           if (!content.includes(':root {')) {
             throw new Error('Expected to find a ":root" selector in the demo theme file');
diff --git a/docs/src/components/Demo/Demo.css b/docs/src/components/Demo/Demo.css
index 60d750063f..8643bb295d 100644
--- a/docs/src/components/Demo/Demo.css
+++ b/docs/src/components/Demo/Demo.css
@@ -40,7 +40,7 @@
 
     @media (--xs) {
       padding: 3rem 1.5rem;
-      min-height: 11.25rem; /* Match .DemoCodeBlockContainer pre min-height */
+      min-height: 11.25rem; /* Match .DemoCodeBlockRoot pre min-height */
     }
   }
 
@@ -153,51 +153,13 @@
     }
   }
 
-  .DemoCodeBlockContainer {
+  .DemoCodeBlockRoot {
     display: flex;
     flex-direction: column;
     position: relative;
     outline: 0;
 
-    & pre {
-      @apply text-xs;
-      padding: 0.5rem 0.75rem;
-      cursor: text;
-
-      /* Scroll */
-      display: flex;
-      overflow: auto;
-      /* Prevent Chrome/Safari page navigation gestures when scrolling horizontally */
-      overscroll-behavior-x: contain;
-
-      /* Scroll containers may be focusable */
-      &:focus-visible {
-        position: relative;
-        outline: 2px solid var(--color-blue);
-        outline-offset: -1px;
-        z-index: 1;
-      }
-
-      /* Add a border radius when there is no collapse button */
-      &:not(.DemoCollapseButton + &) {
-        border-bottom-left-radius: var(--radius-md);
-        border-bottom-right-radius: var(--radius-md);
-      }
-    }
-
-    & code {
-      /* Different fonts may introduce vertical align issues */
-      display: block;
-      /* Make sure selection highlight spans full container width in Safari */
-      flex-grow: 1;
-    }
-
     &[data-closed] {
-      & pre {
-        overflow: hidden;
-        max-height: calc(8.6lh + 0.5rem); /* Show 8.6 of code lines and account for top padding */
-      }
-
       &::before {
         content: '';
         position: absolute;
@@ -217,6 +179,32 @@
     }
   }
 
+  .DemoCodeBlockViewport {
+    /* Prevent Chrome/Safari page navigation gestures when scrolling horizontally */
+    overscroll-behavior-x: contain;
+
+    /* Max height for code blocks, if we ever want to recover this (https://github.com/mui/base-ui/pull/1187) */
+    /* max-height: clamp(8.75lh + 0.5rem, 80vh, 23.75lh + 0.5rem); */
+
+    &[data-closed] {
+      overflow: hidden;
+      max-height: calc(8.75lh + 0.5rem); /* Show almost 9 code lines plus top padding */
+    }
+  }
+
+  .DemoSourceBrowser {
+    @apply text-xs;
+    padding: 0.5rem 0.75rem;
+    cursor: text;
+
+    & code {
+      /* Different fonts may introduce vertical align issues */
+      display: block;
+      /* Make sure selection highlight spans full container width in Safari */
+      flex-grow: 1;
+    }
+  }
+
   .DemoCollapseButton {
     @apply text-xs;
     background-color: var(--color-gray-50);
diff --git a/docs/src/components/Demo/Demo.tsx b/docs/src/components/Demo/Demo.tsx
index 444aac302d..176d812f09 100644
--- a/docs/src/components/Demo/Demo.tsx
+++ b/docs/src/components/Demo/Demo.tsx
@@ -7,7 +7,7 @@ import clsx from 'clsx';
 import { CheckIcon } from 'docs/src/icons/CheckIcon';
 import { DemoVariantSelector } from './DemoVariantSelector';
 import { DemoFileSelector } from './DemoFileSelector';
-import { DemoSourceBrowser } from './DemoSourceBrowser';
+import { DemoCodeBlock } from './DemoCodeBlock';
 import { CodeSandboxLink } from './CodeSandboxLink';
 import { GhostButton } from '../GhostButton';
 import { DemoPlayground } from './DemoPlayground';
@@ -62,7 +62,7 @@ export function Demo({
             </div>
           )}
 
-          <DemoSourceBrowser collapsibleOpen={open} compact={compact} />
+          <DemoCodeBlock collapsibleOpen={open} compact={compact} />
         </div>
       </Collapsible.Root>
     </BaseDemo.Root>
diff --git a/docs/src/components/Demo/DemoCodeBlock.tsx b/docs/src/components/Demo/DemoCodeBlock.tsx
new file mode 100644
index 0000000000..e8095eaccd
--- /dev/null
+++ b/docs/src/components/Demo/DemoCodeBlock.tsx
@@ -0,0 +1,95 @@
+import * as React from 'react';
+import * as BaseDemo from 'docs/src/blocks/Demo';
+import { Collapsible } from '@base-ui-components/react/collapsible';
+import * as ScrollArea from '../ScrollArea';
+
+interface DemoCodeBlockProps {
+  collapsibleOpen: boolean;
+  /** How many lines should the code block have to get collapsed instead of rendering fully */
+  collapsibleLinesThreshold?: number;
+  /** When compact, we don't show a preview of the collapse code */
+  compact: boolean;
+}
+
+function Root(props: React.ComponentProps<typeof ScrollArea.Root>) {
+  return (
+    <ScrollArea.Root
+      {...props}
+      className="DemoCodeBlockRoot"
+      tabIndex={-1}
+      onKeyDown={(event: React.KeyboardEvent) => {
+        if (
+          event.key === 'a' &&
+          (event.metaKey || event.ctrlKey) &&
+          !event.shiftKey &&
+          !event.altKey
+        ) {
+          event.preventDefault();
+          window.getSelection()?.selectAllChildren(event.currentTarget);
+        }
+      }}
+    />
+  );
+}
+
+export function DemoCodeBlock({
+  compact,
+  collapsibleOpen,
+  collapsibleLinesThreshold = 12,
+}: DemoCodeBlockProps) {
+  const demoContext = React.useContext(BaseDemo.DemoContext);
+
+  if (!demoContext) {
+    throw new Error('Demo.Playground must be used within a Demo.Root');
+  }
+
+  const { selectedFile } = demoContext;
+  const lineBreaks = selectedFile.content.match(/\n/g) ?? [];
+
+  if (lineBreaks.length < collapsibleLinesThreshold) {
+    return (
+      <Root>
+        <ScrollArea.Viewport>
+          <BaseDemo.SourceBrowser className="DemoSourceBrowser" />
+        </ScrollArea.Viewport>
+        <ScrollArea.Corner />
+        <ScrollArea.Scrollbar orientation="vertical" />
+        <ScrollArea.Scrollbar orientation="horizontal" />
+      </Root>
+    );
+  }
+
+  return (
+    <React.Fragment>
+      <Root
+        render={
+          <Collapsible.Panel
+            keepMounted={compact ? undefined : true}
+            hidden={compact ? undefined : false}
+          />
+        }
+      >
+        <ScrollArea.Viewport
+          aria-hidden={!collapsibleOpen}
+          data-closed={collapsibleOpen ? undefined : ''}
+          className="DemoCodeBlockViewport"
+          {...(!collapsibleOpen && { tabIndex: undefined, style: { overflow: undefined } })}
+        >
+          <BaseDemo.SourceBrowser className="DemoSourceBrowser" />
+        </ScrollArea.Viewport>
+
+        {collapsibleOpen && (
+          <React.Fragment>
+            <ScrollArea.Corner />
+            <ScrollArea.Scrollbar orientation="vertical" />
+            <ScrollArea.Scrollbar orientation="horizontal" />
+          </React.Fragment>
+        )}
+      </Root>
+
+      <Collapsible.Trigger className="DemoCollapseButton">
+        {collapsibleOpen ? 'Hide' : 'Show'} code
+      </Collapsible.Trigger>
+    </React.Fragment>
+  );
+}
diff --git a/docs/src/components/Demo/DemoSourceBrowser.tsx b/docs/src/components/Demo/DemoSourceBrowser.tsx
deleted file mode 100644
index 85a54e9ac2..0000000000
--- a/docs/src/components/Demo/DemoSourceBrowser.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import * as React from 'react';
-import * as BaseDemo from 'docs/src/blocks/Demo';
-import { Collapsible } from '@base-ui-components/react/collapsible';
-import * as ScrollArea from '../ScrollArea';
-
-interface DemoSourceBrowserProps {
-  collapsibleOpen: boolean;
-  /** How many lines should the code block have to get collapsed instead of rendering fully */
-  collapsibleLinesThreshold?: number;
-  /** When compact, we don't show a preview of the collapse code */
-  compact: boolean;
-}
-
-export function DemoSourceBrowser({
-  compact,
-  collapsibleOpen,
-  collapsibleLinesThreshold = 12,
-}: DemoSourceBrowserProps) {
-  const demoContext = React.useContext(BaseDemo.DemoContext);
-
-  if (!demoContext) {
-    throw new Error('Demo.Playground must be used within a Demo.Root');
-  }
-
-  const { selectedFile } = demoContext;
-  const lineBreaks = selectedFile.content.match(/\n/g) ?? [];
-
-  if (lineBreaks.length < collapsibleLinesThreshold) {
-    return (
-      <DemoCodeBlockContainer>
-        <ScrollArea.Viewport
-          style={{ overflow: undefined }}
-          render={({ children, tabIndex, ...props }) => {
-            return <BaseDemo.SourceBrowser {...props} />;
-          }}
-        />
-        <ScrollArea.Scrollbar orientation="horizontal" />
-      </DemoCodeBlockContainer>
-    );
-  }
-
-  return (
-    // The trigger has to appear before the panel in the DOM in order
-    // for the screen reader cursor navigation to make sense.
-    <div className="flex flex-col-reverse">
-      <Collapsible.Trigger className="DemoCollapseButton">
-        {collapsibleOpen ? 'Hide' : 'Show'} code
-      </Collapsible.Trigger>
-      <Collapsible.Panel
-        keepMounted={compact ? undefined : true}
-        hidden={compact ? undefined : false}
-        render={<DemoCodeBlockContainer />}
-      >
-        <ScrollArea.Viewport
-          style={{ overflow: undefined }}
-          render={({ children, tabIndex, ...props }) => {
-            return <BaseDemo.SourceBrowser aria-hidden={!collapsibleOpen} {...props} />;
-          }}
-        />
-        <ScrollArea.Scrollbar orientation="horizontal" />
-      </Collapsible.Panel>
-    </div>
-  );
-}
-
-function DemoCodeBlockContainer(props: React.ComponentProps<typeof ScrollArea.Root>) {
-  return (
-    <ScrollArea.Root
-      {...props}
-      className="DemoCodeBlockContainer"
-      tabIndex={-1}
-      onKeyDown={handleSelectAll}
-    />
-  );
-}
-
-function handleSelectAll(event: React.KeyboardEvent) {
-  if (event.key === 'a' && (event.metaKey || event.ctrlKey) && !event.shiftKey && !event.altKey) {
-    event.preventDefault();
-    window.getSelection()?.selectAllChildren(event.currentTarget);
-  }
-}
diff --git a/docs/src/components/QuickNav/QuickNav.tsx b/docs/src/components/QuickNav/QuickNav.tsx
index d93a6e231c..e05efe1940 100644
--- a/docs/src/components/QuickNav/QuickNav.tsx
+++ b/docs/src/components/QuickNav/QuickNav.tsx
@@ -65,16 +65,17 @@ function onMounted(ref: React.RefObject<HTMLDivElement | null>) {
 
     ref.current.style.top = '0px';
     ref.current.style.bottom = '';
-    ref.current.style.marginTop = '0px';
+    ref.current.style.marginTop = '';
     ref.current.style.marginBottom = '';
 
     // Get the nav top Y coordinate from the start of the document
     // if it was `position: static` and `position: absolute`
     // relative to the start of the document
     ref.current.style.position = 'static';
-    const staticTop = window.scrollY + ref.current.getBoundingClientRect().y;
+    const staticTop = window.scrollY + Math.round(ref.current.getBoundingClientRect().y);
+    ref.current.style.marginTop = '0px';
     ref.current.style.position = 'absolute';
-    const absoluteTop = window.scrollY + ref.current.getBoundingClientRect().y;
+    const absoluteTop = window.scrollY + Math.round(ref.current.getBoundingClientRect().y);
 
     // Get the nav bottom Y coordinate when it's at its maximum possible bottom position
     // relative to the start of the document
@@ -82,7 +83,7 @@ function onMounted(ref: React.RefObject<HTMLDivElement | null>) {
     ref.current.style.top = 'auto';
     ref.current.style.bottom = '0';
     const rect = ref.current.getBoundingClientRect();
-    const absoluteBottom = window.scrollY + rect.bottom;
+    const absoluteBottom = window.scrollY + Math.round(rect.bottom);
 
     ref.current.style.position = '';
     ref.current.style.top = initialStyles.top;
@@ -159,14 +160,12 @@ function onMounted(ref: React.RefObject<HTMLDivElement | null>) {
       if (!ref.current || isScrollLocked) {
         return;
       }
-
       const delta = window.scrollY - prevScrollY;
       prevScrollY = window.scrollY;
 
-      // We may get into <0.1px rounding issues in Safari and Firefox
       const rect = ref.current.getBoundingClientRect();
-      top = Math.round(rect.top);
-      bottom = Math.round(rect.bottom);
+      top = rect.top;
+      bottom = rect.bottom;
 
       // Skip when scrolling in the direction that matches the sticky position
       if ((delta > 0 && state === 'StickyBottom') || (delta < 0 && state === 'StickyTop')) {
@@ -184,11 +183,12 @@ function onMounted(ref: React.RefObject<HTMLDivElement | null>) {
       if (state === 'StickyTop') {
         const clippedAtBottom = bottom - window.innerHeight;
 
-        if (clippedAtBottom - top >= stickyTopThreshold) {
+        if (clippedAtBottom - top > stickyTopThreshold) {
           if (delta >= clippedAtBottom) {
             stickToBottom();
-          } else {
-            unstick(top - delta, bottom - delta);
+            // Unstick if we are scrolling down (and not recovering from overscroll)
+          } else if (delta > 0 && !isOverscrolling()) {
+            unstick(Math.round(top) - delta, Math.round(bottom) - delta);
           }
         }
         return;
@@ -197,13 +197,14 @@ function onMounted(ref: React.RefObject<HTMLDivElement | null>) {
       if (state === 'StickyBottom') {
         if (delta <= top) {
           stickToTop();
-        } else {
-          unstick(top - delta, bottom - delta);
+          // Unstick if we are scrolling up (and not recovering from overscroll)
+        } else if (delta < 0 && !isOverscrolling()) {
+          unstick(Math.round(top) - delta, Math.round(bottom) - delta);
         }
         return;
       }
 
-      if (state === 'Scrollable' && delta <= 0 && top - delta >= cssTop) {
+      if (state === 'Scrollable' && delta < 0 && top - delta >= cssTop) {
         stickToTop();
         return;
       }
@@ -259,6 +260,13 @@ function onMounted(ref: React.RefObject<HTMLDivElement | null>) {
   };
 }
 
+function isOverscrolling() {
+  return (
+    window.scrollY < 0 ||
+    window.scrollY + window.innerHeight > document.documentElement.scrollHeight
+  );
+}
+
 export function Title({ className, ...props }: React.ComponentProps<'header'>) {
   return <header className={clsx('QuickNavTitle', className)} {...props} />;
 }
diff --git a/docs/src/components/ScrollArea.css b/docs/src/components/ScrollArea.css
index 3d367c38c9..ef98385fd7 100644
--- a/docs/src/components/ScrollArea.css
+++ b/docs/src/components/ScrollArea.css
@@ -13,16 +13,12 @@
 
   .ScrollAreaScrollbar {
     display: flex;
-    background-color: var(--color-gray-200);
     border-radius: 0.375rem;
-    margin: 0.5rem;
-    pointer-events: none;
 
     opacity: 0;
     transition: opacity 150ms 300ms;
 
     &[data-scrolling] {
-      pointer-events: auto;
       opacity: 1;
       transition-duration: 75ms;
       transition-delay: 0ms;
@@ -30,49 +26,57 @@
 
     @media (hover: hover) {
       &:hover {
-        /* Once shown, don't hide if hovering (like macOS scrollbar) */
-        pointer-events: auto;
+        transition-duration: 75ms;
+        transition-delay: 25ms;
         opacity: 1;
       }
     }
 
-    &[data-orientation='horizontal'] {
-      height: 0.25rem;
-    }
-
-    &[data-orientation='vertical'] {
-      width: 0.25rem;
-    }
-
-    &[data-orientation='vertical'] {
-      width: 0.25rem;
-    }
-
     &::before {
       content: '';
       position: absolute;
+      border-radius: inherit;
     }
 
-    &[data-orientation='horizontal']::before {
-      align-self: center;
+    &[data-orientation='horizontal'] {
+      align-items: center;
       height: 1.25rem;
-      width: 100%;
+      margin-inline: 0.5rem;
+
+      &::before {
+        height: 0.25rem;
+        inset-inline: 0;
+        background-color: var(--color-gray-200);
+      }
     }
 
-    &[data-orientation='vertical']::before {
-      justify-self: center;
+    &[data-orientation='vertical'] {
+      justify-content: center;
       width: 1.25rem;
-      height: 100%;
+      margin-block: 0.5rem;
+
+      &::before {
+        width: 0.25rem;
+        inset-block: 0;
+        background-color: var(--color-gray-200);
+      }
     }
   }
 
   .ScrollAreaThumb {
     position: relative;
-    height: 100%;
-    width: 100%;
     border-radius: inherit;
     background-color: var(--color-gray-400);
 
+    &[data-orientation='horizontal'] {
+      height: 0.25rem;
+    }
+
+    &[data-orientation='vertical'] {
+      width: 0.25rem;
+    }
+
+    /* Draggable area */
     &::before {
       content: '';
       position: absolute;
diff --git a/docs/src/components/ScrollArea.tsx b/docs/src/components/ScrollArea.tsx
index cb53161ee4..4d6d5baef1 100644
--- a/docs/src/components/ScrollArea.tsx
+++ b/docs/src/components/ScrollArea.tsx
@@ -15,3 +15,7 @@ export function Scrollbar({ className, ...props }: ScrollArea.Scrollbar.Props) {
     </ScrollArea.Scrollbar>
   );
 }
+
+export function Corner({ className, ...props }: ScrollArea.Corner.Props) {
+  return <ScrollArea.Corner className={clsx('ScrollAreaCorner', className)} {...props} />;
+}
diff --git a/docs/src/components/SideNav.css b/docs/src/components/SideNav.css
index 7c7024c697..fc31ec353b 100644
--- a/docs/src/components/SideNav.css
+++ b/docs/src/components/SideNav.css
@@ -101,26 +101,28 @@
   }
 
   .SideNavLink {
-    display: block;
-    padding: var(--side-nav-item-padding-y) 0.75rem;
+    flex-grow: 1;
+    padding: calc(var(--side-nav-item-padding-y) - 1px) 0.75rem;
+    border-block: 1px solid transparent; /* Maintain a 1px gap between active an inactive item */
+    background-clip: padding-box;
     border-radius: var(--radius-md);
+    letter-spacing: 0.0025em;
 
     @media (hover: hover) {
       &:hover {
-        text-decoration: underline;
-        text-decoration-color: var(--color-gray-500);
-        text-decoration-thickness: 1px;
-        text-underline-offset: 2px;
+        background-color: var(--color-gray-50);
       }
     }
 
     &[data-active] {
-      flex-grow: 1;
+      border: none;
+      padding: var(--side-nav-item-padding-y) 0.75rem;
       background-color: var(--color-gray-50);
       outline: 1px solid var(--color-gray-200);
       outline-offset: -1px;
-      text-decoration: none;
       font-weight: 500;
+      letter-spacing: -0.0025em;
+      word-spacing: -0.005em;
       cursor: default;
     }
 
diff --git a/docs/src/components/SideNav.tsx b/docs/src/components/SideNav.tsx
index f6051a92e2..dd54aeca59 100644
--- a/docs/src/components/SideNav.tsx
+++ b/docs/src/components/SideNav.tsx
@@ -124,8 +124,15 @@ export function Item({ children, className, href, ...props }: ItemProps) {
         data-active={active || undefined}
         className="SideNavLink"
         href={href}
+        scroll={!active}
+        onClick={() => {
+          // Scroll to top smoothly when clicking on the currently active item
+          if (active) {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }
+        }}
       >
-        {children}
+        <span className="SideNavLinkInner">{children}</span>
       </NextLink>
     </li>
   );
diff --git a/docs/src/syntax-highlighting/rehypeEmptyLines.mjs b/docs/src/syntax-highlighting/rehypeEmptyLines.mjs
new file mode 100644
index 0000000000..51cec35513
--- /dev/null
+++ b/docs/src/syntax-highlighting/rehypeEmptyLines.mjs
@@ -0,0 +1,27 @@
+import { visitParents } from 'unist-util-visit-parents';
+
+/** Move line breaks from outside of empty [data-line] elements inside them for styling purposes */
+export function rehypeEmptyLines() {
+  return (tree) => {
+    // Insert line breaks into empty [data-line] elements
+    visitParents(tree, (node) => {
+      if (node.properties?.['data-line'] === '' && node.children?.length === 0) {
+        node.children.push({ type: 'text', value: '\n' });
+      }
+    });
+
+    // Remove line breaks from elements that don't belong to lines
+    visitParents(tree, (node, ancestors) => {
+      if (
+        node.type === 'text' &&
+        node.value === '\n' &&
+        ancestors.find(({ tagName }) => tagName === 'pre') &&
+        !ancestors.find((ancestor) => ancestor.properties?.['data-line'])
+      ) {
+        const parent = ancestors.slice(-1)[0];
+        const index = parent.children.indexOf(node);
+        parent.children.splice(index, 1);
+      }
+    });
+  };
+}
diff --git a/packages/react/src/form/Form.tsx b/packages/react/src/form/Form.tsx
index 2b49c2b422..106947bf24 100644
--- a/packages/react/src/form/Form.tsx
+++ b/packages/react/src/form/Form.tsx
@@ -93,7 +93,7 @@ namespace Form {
   export interface Props extends BaseUIComponentProps<'form', State> {
     /**
      * An object where the keys correspond to the `name` attribute of the form fields,
-     * and the values correspond to the erorr(s) related to that field.
+     * and the values correspond to the error(s) related to that field.
      */
     errors?: FormContext['errors'];
     /**
@@ -120,7 +120,7 @@ Form.propTypes /* remove-proptypes */ = {
   className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /**
    * An object where the keys correspond to the `name` attribute of the form fields,
-   * and the values correspond to the erorr(s) related to that field.
+   * and the values correspond to the error(s) related to that field.
    */
   errors: PropTypes.object,
   /**
diff --git a/packages/react/src/menu/arrow/MenuArrow.tsx b/packages/react/src/menu/arrow/MenuArrow.tsx
index a608447b90..e75cd61a03 100644
--- a/packages/react/src/menu/arrow/MenuArrow.tsx
+++ b/packages/react/src/menu/arrow/MenuArrow.tsx
@@ -1,7 +1,6 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useMenuArrow } from './useMenuArrow';
 import { useMenuPositionerContext } from '../positioner/MenuPositionerContext';
 import { useMenuRootContext } from '../root/MenuRootContext';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
@@ -9,6 +8,7 @@ import { useForkRef } from '../../utils/useForkRef';
 import type { Side, Align } from '../../utils/useAnchorPositioning';
 import type { BaseUIComponentProps } from '../../utils/types';
 import { popupStateMapping } from '../../utils/popupStateMapping';
+import { mergeReactProps } from '../../utils/mergeReactProps';
 
 /**
  * Displays an element positioned against the menu anchor.
@@ -25,9 +25,15 @@ const MenuArrow = React.forwardRef(function MenuArrow(
   const { open } = useMenuRootContext();
   const { arrowRef, side, align, arrowUncentered, arrowStyles } = useMenuPositionerContext();
 
-  const { getArrowProps } = useMenuArrow({
-    arrowStyles,
-  });
+  const getArrowProps = React.useCallback(
+    (externalProps = {}) => {
+      return mergeReactProps<'div'>(externalProps, {
+        style: arrowStyles,
+        'aria-hidden': true,
+      });
+    },
+    [arrowStyles],
+  );
 
   const state: MenuArrow.State = React.useMemo(
     () => ({
diff --git a/packages/react/src/menu/arrow/MenuArrowDataAttributes.ts b/packages/react/src/menu/arrow/MenuArrowDataAttributes.ts
index 6d407a0cf3..e3d0b6ea92 100644
--- a/packages/react/src/menu/arrow/MenuArrowDataAttributes.ts
+++ b/packages/react/src/menu/arrow/MenuArrowDataAttributes.ts
@@ -13,7 +13,7 @@ export enum MenuArrowDataAttributes {
   anchorHidden = 'data-anchor-hidden',
   /**
    * Indicates which side the menu is positioned relative to the trigger.
-   * @type {'none' | 'top' | 'right' | 'bottom' | 'left'}
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
   side = 'data-side',
   /**
diff --git a/packages/react/src/menu/arrow/useMenuArrow.ts b/packages/react/src/menu/arrow/useMenuArrow.ts
deleted file mode 100644
index c0b1d30ed9..0000000000
--- a/packages/react/src/menu/arrow/useMenuArrow.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-'use client';
-import * as React from 'react';
-import { mergeReactProps } from '../../utils/mergeReactProps';
-import type { GenericHTMLProps } from '../../utils/types';
-
-export function useMenuArrow(params: useMenuArrow.Parameters): useMenuArrow.ReturnValue {
-  const { arrowStyles } = params;
-
-  const getArrowProps = React.useCallback(
-    (externalProps = {}) => {
-      return mergeReactProps<'div'>(externalProps, {
-        style: arrowStyles,
-      });
-    },
-    [arrowStyles],
-  );
-
-  return React.useMemo(
-    () => ({
-      getArrowProps,
-    }),
-    [getArrowProps],
-  );
-}
-
-export namespace useMenuArrow {
-  export interface Parameters {
-    arrowStyles: React.CSSProperties;
-  }
-
-  export interface ReturnValue {
-    getArrowProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;
-  }
-}
diff --git a/packages/react/src/menu/item/useMenuItem.ts b/packages/react/src/menu/item/useMenuItem.ts
index 3954a7266e..b1f836fd0e 100644
--- a/packages/react/src/menu/item/useMenuItem.ts
+++ b/packages/react/src/menu/item/useMenuItem.ts
@@ -3,8 +3,7 @@ import * as React from 'react';
 import { FloatingEvents } from '@floating-ui/react';
 import { useButton } from '../../use-button';
 import { mergeReactProps } from '../../utils/mergeReactProps';
-import { GenericHTMLProps } from '../../utils/types';
-import { MuiCancellableEvent } from '../../utils/MuiCancellableEvent';
+import { GenericHTMLProps, BaseUIEvent } from '../../utils/types';
 import { useForkRef } from '../../utils/useForkRef';
 
 export function useMenuItem(params: useMenuItem.Parameters): useMenuItem.ReturnValue {
@@ -34,9 +33,9 @@ export function useMenuItem(params: useMenuItem.Parameters): useMenuItem.ReturnV
           id,
           role: 'menuitem',
           tabIndex: highlighted ? 0 : -1,
-          onKeyUp: (event: React.KeyboardEvent & MuiCancellableEvent) => {
+          onKeyUp: (event: BaseUIEvent<React.KeyboardEvent>) => {
             if (event.key === ' ' && typingRef.current) {
-              event.defaultMuiPrevented = true;
+              event.preventBaseUIHandler();
             }
           },
           onClick: (event: React.MouseEvent | React.KeyboardEvent) => {
diff --git a/packages/react/src/menu/popup/MenuPopupDataAttributes.ts b/packages/react/src/menu/popup/MenuPopupDataAttributes.ts
index 82b7acbd52..9d7734b13a 100644
--- a/packages/react/src/menu/popup/MenuPopupDataAttributes.ts
+++ b/packages/react/src/menu/popup/MenuPopupDataAttributes.ts
@@ -17,7 +17,7 @@ export enum MenuPopupDataAttributes {
   endingStyle = 'data-ending-style',
   /**
    * Indicates which side the menu is positioned relative to the trigger.
-   * @type {'none' | 'top' | 'right' | 'bottom' | 'left'}
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
   side = 'data-side',
   /**
diff --git a/packages/react/src/menu/positioner/MenuPositionerDataAttributes.ts b/packages/react/src/menu/positioner/MenuPositionerDataAttributes.ts
index 456e619956..6fa553aa2c 100644
--- a/packages/react/src/menu/positioner/MenuPositionerDataAttributes.ts
+++ b/packages/react/src/menu/positioner/MenuPositionerDataAttributes.ts
@@ -13,7 +13,7 @@ export enum MenuPositionerDataAttributes {
   anchorHidden = 'data-anchor-hidden',
   /**
    * Indicates which side the menu is positioned relative to the trigger.
-   * @type {'none' | 'top' | 'right' | 'bottom' | 'left'}
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
   side = 'data-side',
 }
diff --git a/packages/react/src/popover/arrow/PopoverArrow.tsx b/packages/react/src/popover/arrow/PopoverArrow.tsx
index 40caaf0192..9507aaf8d5 100644
--- a/packages/react/src/popover/arrow/PopoverArrow.tsx
+++ b/packages/react/src/popover/arrow/PopoverArrow.tsx
@@ -5,10 +5,10 @@ import { usePopoverPositionerContext } from '../positioner/PopoverPositionerCont
 import { usePopoverRootContext } from '../root/PopoverRootContext';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useForkRef } from '../../utils/useForkRef';
-import { usePopoverArrow } from './usePopoverArrow';
 import type { Align, Side } from '../../utils/useAnchorPositioning';
 import type { BaseUIComponentProps } from '../../utils/types';
 import { popupStateMapping } from '../../utils/popupStateMapping';
+import { mergeReactProps } from '../../utils/mergeReactProps';
 
 /**
  * Displays an element positioned against the popover anchor.
@@ -25,9 +25,15 @@ const PopoverArrow = React.forwardRef(function PopoverArrow(
   const { open } = usePopoverRootContext();
   const { arrowRef, side, align, arrowUncentered, arrowStyles } = usePopoverPositionerContext();
 
-  const { getArrowProps } = usePopoverArrow({
-    arrowStyles,
-  });
+  const getArrowProps = React.useCallback(
+    (externalProps = {}) => {
+      return mergeReactProps<'div'>(externalProps, {
+        style: arrowStyles,
+        'aria-hidden': true,
+      });
+    },
+    [arrowStyles],
+  );
 
   const state: PopoverArrow.State = React.useMemo(
     () => ({
diff --git a/packages/react/src/popover/arrow/PopoverArrowDataAttributes.ts b/packages/react/src/popover/arrow/PopoverArrowDataAttributes.ts
index 5acd964ea4..5871cbc87b 100644
--- a/packages/react/src/popover/arrow/PopoverArrowDataAttributes.ts
+++ b/packages/react/src/popover/arrow/PopoverArrowDataAttributes.ts
@@ -13,7 +13,7 @@ export enum PopoverArrowDataAttributes {
   anchorHidden = 'data-anchor-hidden',
   /**
    * Indicates which side the popup is positioned relative to the trigger.
-   * @type {'none' | 'top' | 'right' | 'bottom' | 'left'}
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
   side = 'data-side',
   /**
diff --git a/packages/react/src/popover/arrow/usePopoverArrow.ts b/packages/react/src/popover/arrow/usePopoverArrow.ts
deleted file mode 100644
index 740a1755fb..0000000000
--- a/packages/react/src/popover/arrow/usePopoverArrow.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react';
-import { mergeReactProps } from '../../utils/mergeReactProps';
-import type { GenericHTMLProps } from '../../utils/types';
-
-export function usePopoverArrow(params: usePopoverArrow.Parameters): usePopoverArrow.ReturnValue {
-  const { arrowStyles } = params;
-
-  const getArrowProps = React.useCallback(
-    (externalProps = {}) => {
-      return mergeReactProps<'div'>(externalProps, {
-        style: arrowStyles,
-      });
-    },
-    [arrowStyles],
-  );
-
-  return React.useMemo(
-    () => ({
-      getArrowProps,
-    }),
-    [getArrowProps],
-  );
-}
-
-namespace usePopoverArrow {
-  export interface Parameters {
-    arrowStyles: React.CSSProperties;
-  }
-
-  export interface ReturnValue {
-    getArrowProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;
-  }
-}
diff --git a/packages/react/src/popover/popup/PopoverPopupDataAttributes.ts b/packages/react/src/popover/popup/PopoverPopupDataAttributes.ts
index 0e143dd1e8..e705ace7c9 100644
--- a/packages/react/src/popover/popup/PopoverPopupDataAttributes.ts
+++ b/packages/react/src/popover/popup/PopoverPopupDataAttributes.ts
@@ -17,7 +17,7 @@ export enum PopoverPopupDataAttributes {
   endingStyle = 'data-ending-style',
   /**
    * Indicates which side the popup is positioned relative to the trigger.
-   * @type {'none' | 'top' | 'right' | 'bottom' | 'left'}
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
   side = 'data-side',
   /**
diff --git a/packages/react/src/popover/positioner/PopoverPositionerDataAttributes.ts b/packages/react/src/popover/positioner/PopoverPositionerDataAttributes.ts
index 9067baaa42..87da1ede04 100644
--- a/packages/react/src/popover/positioner/PopoverPositionerDataAttributes.ts
+++ b/packages/react/src/popover/positioner/PopoverPositionerDataAttributes.ts
@@ -13,7 +13,7 @@ export enum PopoverPositionerDataAttributes {
   anchorHidden = 'data-anchor-hidden',
   /**
    * Indicates which side the popup is positioned relative to the trigger.
-   * @type {'none' | 'top' | 'right' | 'bottom' | 'left'}
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
   side = 'data-side',
 }
diff --git a/packages/react/src/preview-card/arrow/PreviewCardArrow.tsx b/packages/react/src/preview-card/arrow/PreviewCardArrow.tsx
index 08695fa4f5..204571c830 100644
--- a/packages/react/src/preview-card/arrow/PreviewCardArrow.tsx
+++ b/packages/react/src/preview-card/arrow/PreviewCardArrow.tsx
@@ -3,12 +3,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { usePreviewCardPositionerContext } from '../positioner/PreviewCardPositionerContext';
-import { usePreviewCardArrow } from './usePreviewCardArrow';
 import { useForkRef } from '../../utils/useForkRef';
 import { usePreviewCardRootContext } from '../root/PreviewCardContext';
 import type { BaseUIComponentProps } from '../../utils/types';
 import type { Align, Side } from '../../utils/useAnchorPositioning';
 import { popupStateMapping } from '../../utils/popupStateMapping';
+import { mergeReactProps } from '../../utils/mergeReactProps';
 
 /**
  * Displays an element positioned against the preview card anchor.
@@ -25,9 +25,14 @@ const PreviewCardArrow = React.forwardRef(function PreviewCardArrow(
   const { open } = usePreviewCardRootContext();
   const { arrowRef, side, align, arrowUncentered, arrowStyles } = usePreviewCardPositionerContext();
 
-  const { getArrowProps } = usePreviewCardArrow({
-    arrowStyles,
-  });
+  const getArrowProps = React.useCallback(
+    (externalProps = {}) =>
+      mergeReactProps<'div'>(externalProps, {
+        style: arrowStyles,
+        'aria-hidden': true,
+      }),
+    [arrowStyles],
+  );
 
   const state: PreviewCardArrow.State = React.useMemo(
     () => ({
diff --git a/packages/react/src/preview-card/arrow/PreviewCardArrowDataAttributes.ts b/packages/react/src/preview-card/arrow/PreviewCardArrowDataAttributes.ts
index 0acae052d4..87023917c8 100644
--- a/packages/react/src/preview-card/arrow/PreviewCardArrowDataAttributes.ts
+++ b/packages/react/src/preview-card/arrow/PreviewCardArrowDataAttributes.ts
@@ -13,7 +13,7 @@ export enum PreviewCardArrowDataAttributes {
   anchorHidden = 'data-anchor-hidden',
   /**
    * Indicates which side the preview card is positioned relative to the trigger.
-   * @type {'none' | 'top' | 'right' | 'bottom' | 'left'}
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
   side = 'data-side',
   /**
diff --git a/packages/react/src/preview-card/arrow/usePreviewCardArrow.ts b/packages/react/src/preview-card/arrow/usePreviewCardArrow.ts
deleted file mode 100644
index 6080cfeea8..0000000000
--- a/packages/react/src/preview-card/arrow/usePreviewCardArrow.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { mergeReactProps } from '../../utils/mergeReactProps';
-
-export function usePreviewCardArrow(
-  params: usePreviewCardArrow.Parameters,
-): usePreviewCardArrow.ReturnValue {
-  const { arrowStyles } = params;
-
-  const getArrowProps = React.useCallback(
-    (externalProps = {}) => {
-      return mergeReactProps<'div'>(externalProps, {
-        style: arrowStyles,
-      });
-    },
-    [arrowStyles],
-  );
-
-  return React.useMemo(
-    () => ({
-      getArrowProps,
-    }),
-    [getArrowProps],
-  );
-}
-
-namespace usePreviewCardArrow {
-  export interface Parameters {
-    arrowStyles: React.CSSProperties;
-    hidden?: boolean;
-  }
-
-  export interface ReturnValue {
-    getArrowProps: (
-      externalProps?: React.HTMLAttributes<HTMLDivElement>,
-    ) => React.HTMLAttributes<HTMLDivElement>;
-  }
-}
diff --git a/packages/react/src/preview-card/popup/PreviewCardPopupDataAttributes.ts b/packages/react/src/preview-card/popup/PreviewCardPopupDataAttributes.ts
index da89b87af8..007c8dbf41 100644
--- a/packages/react/src/preview-card/popup/PreviewCardPopupDataAttributes.ts
+++ b/packages/react/src/preview-card/popup/PreviewCardPopupDataAttributes.ts
@@ -17,7 +17,7 @@ export enum PreviewCardPopupDataAttributes {
   endingStyle = 'data-ending-style',
   /**
    * Indicates which side the preview card is positioned relative to the trigger.
-   * @type {'none' | 'top' | 'right' | 'bottom' | 'left'}
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
   side = 'data-side',
 }
diff --git a/packages/react/src/preview-card/positioner/PreviewCardPositionerDataAttributes.ts b/packages/react/src/preview-card/positioner/PreviewCardPositionerDataAttributes.ts
index 6925582cc5..3bb786dee4 100644
--- a/packages/react/src/preview-card/positioner/PreviewCardPositionerDataAttributes.ts
+++ b/packages/react/src/preview-card/positioner/PreviewCardPositionerDataAttributes.ts
@@ -13,7 +13,7 @@ export enum PreviewCardPositionerDataAttributes {
   anchorHidden = 'data-anchor-hidden',
   /**
    * Indicates which side the preview card is positioned relative to the trigger.
-   * @type {'none' | 'top' | 'right' | 'bottom' | 'left'}
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
   side = 'data-side',
 }
diff --git a/packages/react/src/progress/indicator/ProgressIndicator.test.tsx b/packages/react/src/progress/indicator/ProgressIndicator.test.tsx
index 3c3b4bb9f8..ae1721bace 100644
--- a/packages/react/src/progress/indicator/ProgressIndicator.test.tsx
+++ b/packages/react/src/progress/indicator/ProgressIndicator.test.tsx
@@ -44,11 +44,28 @@ describe('<Progress.Indicator />', () => {
       const indicator = getByTestId('indicator');
 
       expect(indicator).toHaveComputedStyle({
-        left: '0px',
+        insetInlineStart: '0px',
         width: '33%',
       });
     });
 
+    it('sets zero width when value is 0', async () => {
+      const { getByTestId } = await render(
+        <Progress.Root value={0}>
+          <Progress.Track>
+            <Progress.Indicator data-testid="indicator" />
+          </Progress.Track>
+        </Progress.Root>,
+      );
+
+      const indicator = getByTestId('indicator');
+
+      expect(indicator).toHaveComputedStyle({
+        insetInlineStart: '0px',
+        width: '0%',
+      });
+    });
+
     it('indeterminate', async () => {
       const { getByTestId } = await render(
         <Progress.Root value={null}>
diff --git a/packages/react/src/progress/indicator/useProgressIndicator.ts b/packages/react/src/progress/indicator/useProgressIndicator.ts
index 130af5aecc..d44ad728b7 100644
--- a/packages/react/src/progress/indicator/useProgressIndicator.ts
+++ b/packages/react/src/progress/indicator/useProgressIndicator.ts
@@ -15,7 +15,7 @@ function useProgressIndicator(
     Number.isFinite(value) && value !== null ? valueToPercent(value, min, max) : null;
 
   const getStyles = React.useCallback(() => {
-    if (!percentageValue) {
+    if (percentageValue == null) {
       return {};
     }
 
diff --git a/packages/react/src/scroll-area/root/ScrollAreaRootContext.ts b/packages/react/src/scroll-area/root/ScrollAreaRootContext.ts
index f9d26a558f..2e7fb8f6ad 100644
--- a/packages/react/src/scroll-area/root/ScrollAreaRootContext.ts
+++ b/packages/react/src/scroll-area/root/ScrollAreaRootContext.ts
@@ -9,8 +9,10 @@ export interface ScrollAreaRootContext {
   touchModality: boolean;
   hovering: boolean;
   setHovering: React.Dispatch<React.SetStateAction<boolean>>;
-  scrolling: boolean;
-  setScrolling: React.Dispatch<React.SetStateAction<boolean>>;
+  scrollingX: boolean;
+  setScrollingX: React.Dispatch<React.SetStateAction<boolean>>;
+  scrollingY: boolean;
+  setScrollingY: React.Dispatch<React.SetStateAction<boolean>>;
   viewportRef: React.RefObject<HTMLDivElement | null>;
   scrollbarYRef: React.RefObject<HTMLDivElement | null>;
   thumbYRef: React.RefObject<HTMLDivElement | null>;
@@ -20,7 +22,7 @@ export interface ScrollAreaRootContext {
   handlePointerDown: (event: React.PointerEvent) => void;
   handlePointerMove: (event: React.PointerEvent) => void;
   handlePointerUp: (event: React.PointerEvent) => void;
-  handleScroll: () => void;
+  handleScroll: (scrollPosition: { x: number; y: number }) => void;
   rootId: string | undefined;
   hiddenState: {
     scrollbarYHidden: boolean;
diff --git a/packages/react/src/scroll-area/root/useScrollAreaRoot.ts b/packages/react/src/scroll-area/root/useScrollAreaRoot.ts
index e1edda89b3..05b818fdb8 100644
--- a/packages/react/src/scroll-area/root/useScrollAreaRoot.ts
+++ b/packages/react/src/scroll-area/root/useScrollAreaRoot.ts
@@ -16,7 +16,8 @@ export function useScrollAreaRoot(params: useScrollAreaRoot.Parameters) {
   const { dir: dirParam } = params;
 
   const [hovering, setHovering] = React.useState(false);
-  const [scrolling, setScrolling] = React.useState(false);
+  const [scrollingX, setScrollingX] = React.useState(false);
+  const [scrollingY, setScrollingY] = React.useState(false);
   const [cornerSize, setCornerSize] = React.useState<Size>({ width: 0, height: 0 });
   const [thumbSize, setThumbSize] = React.useState<Size>({ width: 0, height: 0 });
   const [touchModality, setTouchModality] = React.useState(false);
@@ -36,7 +37,9 @@ export function useScrollAreaRoot(params: useScrollAreaRoot.Parameters) {
   const startScrollTopRef = React.useRef(0);
   const startScrollLeftRef = React.useRef(0);
   const currentOrientationRef = React.useRef<'vertical' | 'horizontal'>('vertical');
-  const timeoutRef = React.useRef(-1);
+  const scrollYTimeoutRef = React.useRef(-1);
+  const scrollXTimeoutRef = React.useRef(-1);
+  const scrollPositionRef = React.useRef({ x: 0, y: 0 });
 
   const [hiddenState, setHiddenState] = React.useState({
     scrollbarYHidden: false,
@@ -55,17 +58,33 @@ export function useScrollAreaRoot(params: useScrollAreaRoot.Parameters) {
 
   React.useEffect(() => {
     return () => {
-      window.clearTimeout(timeoutRef.current);
+      window.clearTimeout(scrollYTimeoutRef.current);
+      window.clearTimeout(scrollXTimeoutRef.current);
     };
   }, []);
 
-  const handleScroll = useEventCallback(() => {
-    setScrolling(true);
+  const handleScroll = useEventCallback((scrollPosition: { x: number; y: number }) => {
+    const offsetX = scrollPosition.x - scrollPositionRef.current.x;
+    const offsetY = scrollPosition.y - scrollPositionRef.current.y;
+    scrollPositionRef.current = scrollPosition;
 
-    window.clearTimeout(timeoutRef.current);
-    timeoutRef.current = window.setTimeout(() => {
-      setScrolling(false);
-    }, SCROLL_TIMEOUT);
+    if (offsetY !== 0) {
+      setScrollingY(true);
+
+      window.clearTimeout(scrollYTimeoutRef.current);
+      scrollYTimeoutRef.current = window.setTimeout(() => {
+        setScrollingY(false);
+      }, SCROLL_TIMEOUT);
+    }
+
+    if (offsetX !== 0) {
+      setScrollingX(true);
+
+      window.clearTimeout(scrollXTimeoutRef.current);
+      scrollXTimeoutRef.current = window.setTimeout(() => {
+        setScrollingX(false);
+      }, SCROLL_TIMEOUT);
+    }
   });
 
   const handlePointerDown = useEventCallback((event: React.PointerEvent) => {
@@ -116,10 +135,12 @@ export function useScrollAreaRoot(params: useScrollAreaRoot.Parameters) {
         viewportRef.current.scrollTop =
           startScrollTopRef.current + scrollRatioY * (scrollableContentHeight - viewportHeight);
         event.preventDefault();
-        setScrolling(true);
-        window.clearTimeout(timeoutRef.current);
-        timeoutRef.current = window.setTimeout(() => {
-          setScrolling(false);
+
+        setScrollingY(true);
+
+        window.clearTimeout(scrollYTimeoutRef.current);
+        scrollYTimeoutRef.current = window.setTimeout(() => {
+          setScrollingY(false);
         }, SCROLL_TIMEOUT);
       }
 
@@ -137,10 +158,12 @@ export function useScrollAreaRoot(params: useScrollAreaRoot.Parameters) {
         viewportRef.current.scrollLeft =
           startScrollLeftRef.current + scrollRatioX * (scrollableContentWidth - viewportWidth);
         event.preventDefault();
-        setScrolling(true);
-        window.clearTimeout(timeoutRef.current);
-        timeoutRef.current = window.setTimeout(() => {
-          setScrolling(false);
+
+        setScrollingX(true);
+
+        window.clearTimeout(scrollXTimeoutRef.current);
+        scrollXTimeoutRef.current = window.setTimeout(() => {
+          setScrollingX(false);
         }, SCROLL_TIMEOUT);
       }
     }
@@ -201,8 +224,10 @@ export function useScrollAreaRoot(params: useScrollAreaRoot.Parameters) {
       setThumbSize,
       touchModality,
       cornerRef,
-      scrolling,
-      setScrolling,
+      scrollingX,
+      setScrollingX,
+      scrollingY,
+      setScrollingY,
       hovering,
       setHovering,
       viewportRef,
@@ -224,7 +249,10 @@ export function useScrollAreaRoot(params: useScrollAreaRoot.Parameters) {
       thumbSize,
       touchModality,
       cornerRef,
-      scrolling,
+      scrollingX,
+      setScrollingX,
+      scrollingY,
+      setScrollingY,
       hovering,
       setHovering,
       viewportRef,
diff --git a/packages/react/src/scroll-area/scrollbar/ScrollAreaScrollbar.test.tsx b/packages/react/src/scroll-area/scrollbar/ScrollAreaScrollbar.test.tsx
index fde46c87ff..03a497a1dc 100644
--- a/packages/react/src/scroll-area/scrollbar/ScrollAreaScrollbar.test.tsx
+++ b/packages/react/src/scroll-area/scrollbar/ScrollAreaScrollbar.test.tsx
@@ -18,7 +18,7 @@ describe('<ScrollArea.Scrollbar />', () => {
     },
   }));
 
-  it('adds [data-scrolling] attribute when viewport is scrolled', async () => {
+  it('adds [data-scrolling] attribute when viewport is scrolled in the correct direction', async () => {
     await render(
       <ScrollArea.Root style={{ width: 200, height: 200 }}>
         <ScrollArea.Viewport data-testid="viewport" style={{ width: '100%', height: '100%' }}>
@@ -32,19 +32,40 @@ describe('<ScrollArea.Scrollbar />', () => {
 
     const verticalScrollbar = screen.getByTestId('vertical');
     const horizontalScrollbar = screen.getByTestId('horizontal');
+    const viewport = screen.getByTestId('viewport');
 
     expect(verticalScrollbar).not.to.have.attribute('data-scrolling');
     expect(horizontalScrollbar).not.to.have.attribute('data-scrolling');
 
-    fireEvent.scroll(screen.getByTestId('viewport'));
+    fireEvent.scroll(viewport, {
+      target: {
+        scrollTop: 1,
+      },
+    });
 
     expect(verticalScrollbar).to.have.attribute('data-scrolling', '');
-    expect(horizontalScrollbar).to.have.attribute('data-scrolling', '');
+    expect(horizontalScrollbar).not.to.have.attribute('data-scrolling', '');
 
     clock.tick(SCROLL_TIMEOUT - 1);
 
     expect(verticalScrollbar).to.have.attribute('data-scrolling', '');
-    expect(horizontalScrollbar).to.have.attribute('data-scrolling', '');
+    expect(horizontalScrollbar).not.to.have.attribute('data-scrolling', '');
+
+    fireEvent.scroll(viewport, {
+      target: {
+        scrollLeft: 1,
+      },
+    });
+
+    clock.tick(1); // vertical just finished
+
+    expect(verticalScrollbar).not.to.have.attribute('data-scrolling');
+    expect(horizontalScrollbar).to.have.attribute('data-scrolling');
+
+    clock.tick(SCROLL_TIMEOUT - 2); // already ticked 1ms above
+
+    expect(verticalScrollbar).not.to.have.attribute('data-scrolling');
+    expect(horizontalScrollbar).to.have.attribute('data-scrolling');
 
     clock.tick(1);
 
diff --git a/packages/react/src/scroll-area/scrollbar/ScrollAreaScrollbar.tsx b/packages/react/src/scroll-area/scrollbar/ScrollAreaScrollbar.tsx
index cc217e55fd..0f2d67131f 100644
--- a/packages/react/src/scroll-area/scrollbar/ScrollAreaScrollbar.tsx
+++ b/packages/react/src/scroll-area/scrollbar/ScrollAreaScrollbar.tsx
@@ -20,7 +20,7 @@ const ScrollAreaScrollbar = React.forwardRef(function ScrollAreaScrollbar(
 ) {
   const { render, className, orientation = 'vertical', keepMounted = false, ...otherProps } = props;
 
-  const { hovering, scrolling, hiddenState, scrollbarYRef, scrollbarXRef } =
+  const { hovering, scrollingX, scrollingY, hiddenState, scrollbarYRef, scrollbarXRef } =
     useScrollAreaRootContext();
 
   const mergedRef = useForkRef(
@@ -31,10 +31,13 @@ const ScrollAreaScrollbar = React.forwardRef(function ScrollAreaScrollbar(
   const state: ScrollAreaScrollbar.State = React.useMemo(
     () => ({
       hovering,
-      scrolling,
+      scrolling: {
+        horizontal: scrollingX,
+        vertical: scrollingY,
+      }[orientation],
       orientation,
     }),
-    [hovering, scrolling, orientation],
+    [hovering, scrollingX, scrollingY, orientation],
   );
 
   const { getScrollbarProps } = useScrollAreaScrollbar({
diff --git a/packages/react/src/scroll-area/thumb/ScrollAreaThumb.tsx b/packages/react/src/scroll-area/thumb/ScrollAreaThumb.tsx
index c87d8189cc..ad7c933faa 100644
--- a/packages/react/src/scroll-area/thumb/ScrollAreaThumb.tsx
+++ b/packages/react/src/scroll-area/thumb/ScrollAreaThumb.tsx
@@ -27,7 +27,8 @@ const ScrollAreaThumb = React.forwardRef(function ScrollAreaThumb(
     handlePointerDown,
     handlePointerMove,
     handlePointerUp,
-    setScrolling,
+    setScrollingX,
+    setScrollingY,
   } = useScrollAreaRootContext();
 
   const { orientation } = useScrollAreaScrollbarContext();
@@ -45,7 +46,12 @@ const ScrollAreaThumb = React.forwardRef(function ScrollAreaThumb(
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
       onPointerUp(event) {
-        setScrolling(false);
+        if (orientation === 'vertical') {
+          setScrollingY(false);
+        }
+        if (orientation === 'horizontal') {
+          setScrollingX(false);
+        }
         handlePointerUp(event);
       },
       style: {
diff --git a/packages/react/src/scroll-area/viewport/useScrollAreaViewport.tsx b/packages/react/src/scroll-area/viewport/useScrollAreaViewport.tsx
index ed3f242e12..92fb1fa479 100644
--- a/packages/react/src/scroll-area/viewport/useScrollAreaViewport.tsx
+++ b/packages/react/src/scroll-area/viewport/useScrollAreaViewport.tsx
@@ -184,8 +184,16 @@ export function useScrollAreaViewport(params: useScrollAreaViewport.Parameters)
           overflow: 'scroll',
         },
         onScroll() {
+          if (!viewportRef.current) {
+            return;
+          }
+
           computeThumb();
-          handleScroll();
+
+          handleScroll({
+            x: viewportRef.current.scrollLeft,
+            y: viewportRef.current.scrollTop,
+          });
         },
         children: (
           <div
@@ -205,6 +213,7 @@ export function useScrollAreaViewport(params: useScrollAreaViewport.Parameters)
       children,
       computeThumb,
       handleScroll,
+      viewportRef,
     ],
   );
 
diff --git a/packages/react/src/select/arrow/SelectArrow.tsx b/packages/react/src/select/arrow/SelectArrow.tsx
index 499b113a66..eaf588b309 100644
--- a/packages/react/src/select/arrow/SelectArrow.tsx
+++ b/packages/react/src/select/arrow/SelectArrow.tsx
@@ -29,6 +29,7 @@ const SelectArrow = React.forwardRef(function SelectArrow(
     (externalProps = {}) =>
       mergeReactProps<'div'>(externalProps, {
         style: arrowStyles,
+        'aria-hidden': true,
       }),
     [arrowStyles],
   );
diff --git a/packages/react/src/tooltip/arrow/TooltipArrow.tsx b/packages/react/src/tooltip/arrow/TooltipArrow.tsx
index c3064cb752..28e625a116 100644
--- a/packages/react/src/tooltip/arrow/TooltipArrow.tsx
+++ b/packages/react/src/tooltip/arrow/TooltipArrow.tsx
@@ -4,10 +4,10 @@ import PropTypes from 'prop-types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useForkRef } from '../../utils/useForkRef';
 import { useTooltipPositionerContext } from '../positioner/TooltipPositionerContext';
-import { useTooltipArrow } from './useTooltipArrow';
 import type { BaseUIComponentProps } from '../../utils/types';
 import type { Side, Align } from '../../utils/useAnchorPositioning';
 import { popupStateMapping } from '../../utils/popupStateMapping';
+import { mergeReactProps } from '../../utils/mergeReactProps';
 
 /**
  * Displays an element positioned against the tooltip anchor.
@@ -24,9 +24,15 @@ const TooltipArrow = React.forwardRef(function TooltipArrow(
   const { open, arrowRef, side, align, arrowUncentered, arrowStyles } =
     useTooltipPositionerContext();
 
-  const { getArrowProps } = useTooltipArrow({
-    arrowStyles,
-  });
+  const getArrowProps = React.useCallback(
+    (externalProps = {}) => {
+      return mergeReactProps<'div'>(externalProps, {
+        style: arrowStyles,
+        'aria-hidden': true,
+      });
+    },
+    [arrowStyles],
+  );
 
   const state: TooltipArrow.State = React.useMemo(
     () => ({
diff --git a/packages/react/src/tooltip/arrow/TooltipArrowDataAttributes.ts b/packages/react/src/tooltip/arrow/TooltipArrowDataAttributes.ts
index 7ff12d955d..f0dd323ca4 100644
--- a/packages/react/src/tooltip/arrow/TooltipArrowDataAttributes.ts
+++ b/packages/react/src/tooltip/arrow/TooltipArrowDataAttributes.ts
@@ -13,7 +13,7 @@ export enum TooltipArrowDataAttributes {
   anchorHidden = 'data-anchor-hidden',
   /**
    * Indicates which side the tooltip is positioned relative to the trigger.
-   * @type {'none' | 'top' | 'right' | 'bottom' | 'left'}
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
   side = 'data-side',
   /**
diff --git a/packages/react/src/tooltip/arrow/useTooltipArrow.ts b/packages/react/src/tooltip/arrow/useTooltipArrow.ts
deleted file mode 100644
index f1fcd3529c..0000000000
--- a/packages/react/src/tooltip/arrow/useTooltipArrow.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react';
-import { mergeReactProps } from '../../utils/mergeReactProps';
-import type { GenericHTMLProps } from '../../utils/types';
-
-export function useTooltipArrow(params: useTooltipArrow.Parameters): useTooltipArrow.ReturnValue {
-  const { arrowStyles } = params;
-
-  const getArrowProps = React.useCallback(
-    (externalProps = {}) => {
-      return mergeReactProps<'div'>(externalProps, {
-        style: arrowStyles,
-      });
-    },
-    [arrowStyles],
-  );
-
-  return React.useMemo(
-    () => ({
-      getArrowProps,
-    }),
-    [getArrowProps],
-  );
-}
-
-namespace useTooltipArrow {
-  export interface Parameters {
-    arrowStyles: React.CSSProperties;
-  }
-
-  export interface ReturnValue {
-    getArrowProps: (props?: GenericHTMLProps) => GenericHTMLProps;
-  }
-}
diff --git a/packages/react/src/tooltip/popup/TooltipPopupDataAttributes.ts b/packages/react/src/tooltip/popup/TooltipPopupDataAttributes.ts
index 26052c278d..9bf2420a26 100644
--- a/packages/react/src/tooltip/popup/TooltipPopupDataAttributes.ts
+++ b/packages/react/src/tooltip/popup/TooltipPopupDataAttributes.ts
@@ -17,7 +17,7 @@ export enum TooltipPopupDataAttributes {
   endingStyle = 'data-ending-style',
   /**
    * Indicates which side the tooltip is positioned relative to the trigger.
-   * @type {'none' | 'top' | 'right' | 'bottom' | 'left'}
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
   side = 'data-side',
   /**
diff --git a/packages/react/src/tooltip/positioner/TooltipPositionerDataAttributes.ts b/packages/react/src/tooltip/positioner/TooltipPositionerDataAttributes.ts
index 88f2929051..6dfea51321 100644
--- a/packages/react/src/tooltip/positioner/TooltipPositionerDataAttributes.ts
+++ b/packages/react/src/tooltip/positioner/TooltipPositionerDataAttributes.ts
@@ -13,7 +13,7 @@ export enum TooltipPositionerDataAttributes {
   anchorHidden = 'data-anchor-hidden',
   /**
    * Indicates which side the tooltip is positioned relative to the trigger.
-   * @type {'none' | 'top' | 'right' | 'bottom' | 'left'}
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
   side = 'data-side',
 }
diff --git a/packages/react/src/use-button/useButton.test.tsx b/packages/react/src/use-button/useButton.test.tsx
index 17d06f9619..d1c5f987d7 100644
--- a/packages/react/src/use-button/useButton.test.tsx
+++ b/packages/react/src/use-button/useButton.test.tsx
@@ -1,28 +1,31 @@
 import * as React from 'react';
-import { createRenderer } from '@mui/internal-test-utils';
 import { expect } from 'chai';
+import { spy } from 'sinon';
+import { act, describeSkipIf, fireEvent } from '@mui/internal-test-utils';
+import { createRenderer } from '#test-utils';
 import { useButton } from '.';
 
+const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+
 describe('useButton', () => {
-  const { render } = createRenderer();
+  const { render, renderToString } = createRenderer();
 
   describe('tabIndex', () => {
-    it('does not return tabIndex in getButtonProps when host component is BUTTON', () => {
-      function TestComponent() {
-        const buttonRef = React.useRef(null);
-        const { getButtonProps } = useButton({ buttonRef });
+    it('does not return tabIndex in getButtonProps when host component is BUTTON', async () => {
+      function TestButton() {
+        const { getButtonProps } = useButton();
 
         expect(getButtonProps().tabIndex).to.equal(undefined);
 
         return <button {...getButtonProps()} />;
       }
 
-      const { getByRole } = render(<TestComponent />);
+      const { getByRole } = await render(<TestButton />);
       expect(getByRole('button')).to.have.property('tabIndex', 0);
     });
 
-    it('returns tabIndex in getButtonProps when host component is not BUTTON', () => {
-      function TestComponent() {
+    it('returns tabIndex in getButtonProps when host component is not BUTTON', async () => {
+      function TestButton() {
         const buttonRef = React.useRef(null);
         const { getButtonProps } = useButton({ buttonRef });
 
@@ -31,33 +34,105 @@ describe('useButton', () => {
         return <span {...getButtonProps()} />;
       }
 
-      const { getByRole } = render(<TestComponent />);
+      const { getByRole } = await render(<TestButton />);
       expect(getByRole('button')).to.have.property('tabIndex', 0);
     });
 
-    it('returns tabIndex in getButtonProps if it is explicitly provided', () => {
+    it('returns tabIndex in getButtonProps if it is explicitly provided', async () => {
       const customTabIndex = 3;
-      function TestComponent() {
-        const buttonRef = React.useRef(null);
-        const { getButtonProps } = useButton({ buttonRef, tabIndex: customTabIndex });
+      function TestButton() {
+        const { getButtonProps } = useButton({ tabIndex: customTabIndex });
         return <button {...getButtonProps()} />;
       }
 
-      const { getByRole } = render(<TestComponent />);
+      const { getByRole } = await render(<TestButton />);
       expect(getByRole('button')).to.have.property('tabIndex', customTabIndex);
     });
   });
 
   describe('arbitrary props', () => {
-    it('are passed to the host component', () => {
+    it('are passed to the host component', async () => {
       const buttonTestId = 'button-test-id';
-      function TestComponent() {
-        const { getButtonProps } = useButton({});
+      function TestButton() {
+        const { getButtonProps } = useButton();
         return <button {...getButtonProps({ 'data-testid': buttonTestId })} />;
       }
 
-      const { getByRole } = render(<TestComponent />);
+      const { getByRole } = await render(<TestButton />);
       expect(getByRole('button')).to.have.attribute('data-testid', buttonTestId);
     });
   });
+
+  describe('event handlers', () => {
+    // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
+    // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
+    it('key: Space fires a click event even if preventDefault was called on keyUp', async () => {
+      const handleClick = spy();
+
+      function TestButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+        const { getButtonProps } = useButton();
+
+        return <span {...getButtonProps(props)} />;
+      }
+
+      const { getByRole, user } = await render(
+        <TestButton
+          onKeyUp={(event: React.KeyboardEvent<HTMLButtonElement>) => event.preventDefault()}
+          onClick={handleClick}
+        />,
+      );
+
+      const button = getByRole('button');
+
+      await user.keyboard('[Tab]');
+      expect(button).toHaveFocus();
+
+      await user.keyboard('[Space]');
+      expect(handleClick.callCount).to.equal(1);
+    });
+
+    it('key: Enter fires keydown then click on non-native buttons', async () => {
+      const handleKeyDown = spy();
+      const handleClick = spy();
+
+      function TestButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+        const { getButtonProps } = useButton();
+
+        return <span {...getButtonProps(props)} />;
+      }
+
+      const { getByRole } = await render(
+        <TestButton onKeyDown={handleKeyDown} onClick={handleClick} />,
+      );
+
+      const button = getByRole('button');
+
+      act(() => button.focus());
+      expect(button).toHaveFocus();
+
+      expect(handleKeyDown.callCount).to.equal(0);
+      fireEvent.keyDown(button, { key: 'Enter' });
+      expect(handleKeyDown.callCount).to.equal(1);
+      expect(handleClick.callCount).to.equal(1);
+    });
+  });
+
+  describeSkipIf(isJSDOM)('server-side rendering', () => {
+    it('should server-side render', async () => {
+      function TestButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+        const { disabled, type, ...otherProps } = props;
+        const { getButtonProps } = useButton({ disabled, type });
+
+        return <span {...getButtonProps(otherProps)} />;
+      }
+
+      const { container } = await renderToString(
+        <TestButton disabled type="submit">
+          Submit
+        </TestButton>,
+      );
+
+      expect(container.firstChild).to.have.text('Submit');
+    });
+  });
 });
diff --git a/packages/react/src/use-button/useButton.ts b/packages/react/src/use-button/useButton.ts
index fd7c39eedd..292ead123c 100644
--- a/packages/react/src/use-button/useButton.ts
+++ b/packages/react/src/use-button/useButton.ts
@@ -1,28 +1,27 @@
 'use client';
 import * as React from 'react';
 import { useForkRef } from '../utils/useForkRef';
-import { extractEventHandlers } from '../utils/extractEventHandlers';
+import { mergeReactProps } from '../utils/mergeReactProps';
+import { useEventCallback } from '../utils/useEventCallback';
 import { useRootElementName } from '../utils/useRootElementName';
-import { EventHandlers } from '../utils/types';
-import { MuiCancellableEvent } from '../utils/MuiCancellableEvent';
+import { GenericHTMLProps } from '../utils/types';
 
 export function useButton(parameters: useButton.Parameters = {}): useButton.ReturnValue {
   const {
+    buttonRef: externalRef,
     disabled = false,
     focusableWhenDisabled,
-    buttonRef: externalRef,
     tabIndex,
     type,
     elementName: elementNameProp,
   } = parameters;
   const buttonRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement | null>(null);
 
-  const [elementName, updateElementName] = useRootElementName({
+  const { rootElementName: elementName, updateRootElementName } = useRootElementName({
     rootElementName: elementNameProp,
-    componentName: 'Button',
   });
 
-  const isNativeButton = () => {
+  const isNativeButton = useEventCallback(() => {
     const button = buttonRef.current;
 
     return (
@@ -30,116 +29,92 @@ export function useButton(parameters: useButton.Parameters = {}): useButton.Retu
       (elementName === 'INPUT' &&
         ['button', 'submit', 'reset'].includes((button as HTMLInputElement)?.type))
     );
-  };
+  });
 
-  const createHandleClick = (otherHandlers: EventHandlers) => (event: React.MouseEvent) => {
-    if (!disabled) {
-      otherHandlers.onClick?.(event);
-    }
-  };
+  const mergedRef = useForkRef(updateRootElementName, externalRef, buttonRef);
 
-  const createHandleKeyDown =
-    (otherHandlers: EventHandlers) => (event: React.KeyboardEvent & MuiCancellableEvent) => {
-      otherHandlers.onKeyDown?.(event);
+  const buttonProps = React.useMemo(() => {
+    const additionalProps: AdditionalButtonProps = {};
 
-      if (event.defaultMuiPrevented) {
-        return;
-      }
-
-      if (event.target === event.currentTarget && !isNativeButton() && event.key === ' ') {
-        event.preventDefault();
-      }
+    if (tabIndex !== undefined) {
+      additionalProps.tabIndex = tabIndex;
+    }
 
-      // Keyboard accessibility for non interactive elements
-      if (
-        event.target === event.currentTarget &&
-        !isNativeButton() &&
-        event.key === 'Enter' &&
-        !disabled
-      ) {
-        otherHandlers.onClick?.(event);
-        event.preventDefault();
+    if (elementName === 'BUTTON' || elementName === 'INPUT') {
+      if (focusableWhenDisabled) {
+        additionalProps['aria-disabled'] = disabled;
+      } else {
+        additionalProps.disabled = disabled;
       }
-    };
-
-  const createHandleKeyUp =
-    (otherHandlers: EventHandlers) => (event: React.KeyboardEvent & MuiCancellableEvent) => {
-      // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
-      // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
-
-      otherHandlers.onKeyUp?.(event);
-
-      // Keyboard accessibility for non interactive elements
-      if (
-        event.target === event.currentTarget &&
-        !isNativeButton() &&
-        !disabled &&
-        event.key === ' ' &&
-        !event.defaultMuiPrevented
-      ) {
-        otherHandlers.onClick?.(event);
+    } else if (elementName !== '') {
+      additionalProps.role = 'button';
+      additionalProps.tabIndex = tabIndex ?? 0;
+      if (disabled) {
+        additionalProps['aria-disabled'] = disabled as boolean;
+        additionalProps.tabIndex = focusableWhenDisabled ? (tabIndex ?? 0) : -1;
       }
-    };
-
-  const handleRef = useForkRef(updateElementName, externalRef, buttonRef);
-
-  interface AdditionalButtonProps {
-    type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
-    disabled?: boolean;
-    role?: React.AriaRole;
-    'aria-disabled'?: React.AriaAttributes['aria-disabled'];
-    tabIndex?: number;
-  }
-
-  const buttonProps: AdditionalButtonProps = {};
-
-  if (tabIndex !== undefined) {
-    buttonProps.tabIndex = tabIndex;
-  }
-
-  if (elementName === 'BUTTON' || elementName === 'INPUT') {
-    if (focusableWhenDisabled) {
-      buttonProps['aria-disabled'] = disabled;
-    } else {
-      buttonProps.disabled = disabled;
     }
-  } else if (elementName !== '') {
-    buttonProps.role = 'button';
-    buttonProps.tabIndex = tabIndex ?? 0;
-    if (disabled) {
-      buttonProps['aria-disabled'] = disabled as boolean;
-      buttonProps.tabIndex = focusableWhenDisabled ? (tabIndex ?? 0) : -1;
-    }
-  }
 
-  const getButtonProps = (
-    externalProps: React.ComponentPropsWithRef<any>,
-  ): React.ComponentPropsWithRef<any> => {
-    const externalEventHandlers = {
-      ...extractEventHandlers(parameters),
-      ...extractEventHandlers(externalProps),
-    };
-
-    const props = {
-      type,
-      ...externalEventHandlers,
-      ...buttonProps,
-      ...externalProps,
-      onClick: createHandleClick(externalEventHandlers),
-      onKeyDown: createHandleKeyDown(externalEventHandlers),
-      onKeyUp: createHandleKeyUp(externalEventHandlers),
-      ref: handleRef,
-    };
-
-    return props;
-  };
+    return additionalProps;
+  }, [disabled, elementName, focusableWhenDisabled, tabIndex]);
+
+  const getButtonProps = React.useCallback(
+    (externalProps: GenericButtonProps): GenericButtonProps => {
+      return mergeReactProps(externalProps, buttonProps, {
+        type,
+        onKeyDown(event: React.KeyboardEvent) {
+          if (event.target === event.currentTarget && !isNativeButton() && event.key === ' ') {
+            event.preventDefault();
+          }
+
+          // Keyboard accessibility for non interactive elements
+          if (
+            event.target === event.currentTarget &&
+            !isNativeButton() &&
+            event.key === 'Enter' &&
+            !disabled
+          ) {
+            externalProps?.onClick?.(event);
+            event.preventDefault();
+          }
+        },
+        onKeyUp(event: React.KeyboardEvent) {
+          // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
+          // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
+          // Keyboard accessibility for non interactive elements
+          if (
+            event.target === event.currentTarget &&
+            !isNativeButton() &&
+            !disabled &&
+            event.key === ' '
+          ) {
+            externalProps.onClick?.(event);
+          }
+        },
+        ref: mergedRef,
+      });
+    },
+    [buttonProps, disabled, mergedRef, isNativeButton, type],
+  );
 
   return {
     getButtonProps,
-    buttonRef: handleRef,
+    buttonRef: mergedRef,
   };
 }
 
+interface GenericButtonProps extends Omit<GenericHTMLProps, 'onClick'>, AdditionalButtonProps {
+  onClick?: (event: React.SyntheticEvent) => void;
+}
+
+interface AdditionalButtonProps
+  extends Partial<{
+    'aria-disabled': React.AriaAttributes['aria-disabled'];
+    disabled: boolean;
+    role: React.AriaRole;
+    tabIndex: number;
+  }> {}
+
 export namespace useButton {
   export interface Parameters {
     /**
diff --git a/packages/react/src/utils/MuiCancellableEvent.ts b/packages/react/src/utils/MuiCancellableEvent.ts
deleted file mode 100644
index 78596ff9ba..0000000000
--- a/packages/react/src/utils/MuiCancellableEvent.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type MuiCancellableEvent = {
-  defaultMuiPrevented?: boolean;
-};
-
-export type MuiCancellableEventHandler<Event> = (event: Event & MuiCancellableEvent) => void;
diff --git a/packages/react/src/utils/extractEventHandlers.test.ts b/packages/react/src/utils/extractEventHandlers.test.ts
deleted file mode 100644
index 130f5dd514..0000000000
--- a/packages/react/src/utils/extractEventHandlers.test.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { expect } from 'chai';
-import { extractEventHandlers } from './extractEventHandlers';
-
-describe('extractEventHandlers', () => {
-  it('extracts the fields starting with `on[A-Z]` and being a function', () => {
-    const input = {
-      onClick: () => {},
-      onChange: () => {},
-      once: () => {},
-      on: () => {},
-      onInvalid: 0,
-      on1: () => {},
-      xonClick: () => {},
-    };
-
-    const result = extractEventHandlers(input);
-    expect(result).to.deep.equal({
-      onClick: input.onClick,
-      onChange: input.onChange,
-    });
-  });
-
-  it('returns an empty object if an empty object is provided', () => {
-    const result = extractEventHandlers({});
-    expect(result).to.deep.equal({});
-  });
-
-  it('returns an empty object if undefined is passed in', () => {
-    const result = extractEventHandlers(undefined);
-    expect(result).to.deep.equal({});
-  });
-
-  it('excludes the provided handlers from the result', () => {
-    const input = {
-      onClick: () => {},
-      onChange: () => {},
-      onFocus: () => {},
-    };
-
-    const result = extractEventHandlers(input, ['onClick', 'onFocus']);
-    expect(result).to.deep.equal({ onChange: input.onChange });
-  });
-});
diff --git a/packages/react/src/utils/extractEventHandlers.ts b/packages/react/src/utils/extractEventHandlers.ts
deleted file mode 100644
index e3998c358e..0000000000
--- a/packages/react/src/utils/extractEventHandlers.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { EventHandlers } from './types';
-
-/**
- * Extracts event handlers from a given object.
- * A prop is considered an event handler if it is a function and its name starts with `on`.
- *
- * @param object An object to extract event handlers from.
- * @param excludeKeys An array of keys to exclude from the returned object.
- */
-export function extractEventHandlers(
-  object: Record<string, any> | undefined,
-  excludeKeys: string[] = [],
-): EventHandlers {
-  if (object === undefined) {
-    return {};
-  }
-
-  const result: EventHandlers = {};
-
-  Object.keys(object)
-    .filter(
-      (prop) =>
-        prop.match(/^on[A-Z]/) && typeof object[prop] === 'function' && !excludeKeys.includes(prop),
-    )
-    .forEach((prop) => {
-      result[prop] = object[prop];
-    });
-
-  return result;
-}
diff --git a/packages/react/src/utils/index.ts b/packages/react/src/utils/index.ts
index 2eea2bc728..e820941bc0 100644
--- a/packages/react/src/utils/index.ts
+++ b/packages/react/src/utils/index.ts
@@ -1,7 +1,6 @@
 // Public utils
 
 export * from './getReactElementRef';
-export * from './MuiCancellableEvent';
 export * from './useControlled';
 export * from './useEnhancedEffect';
 export * from './useForkRef';
diff --git a/packages/react/src/utils/mergeReactProps.test.ts b/packages/react/src/utils/mergeReactProps.test.ts
index e8e2e9efc3..fa7166711b 100644
--- a/packages/react/src/utils/mergeReactProps.test.ts
+++ b/packages/react/src/utils/mergeReactProps.test.ts
@@ -1,6 +1,7 @@
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { mergeReactProps } from './mergeReactProps';
+import type { BaseUIEvent } from './types';
 
 describe('mergeReactProps', () => {
   it('merges event handlers', () => {
@@ -136,7 +137,34 @@ describe('mergeReactProps', () => {
     expect(ran).to.equal(false);
   });
 
-  it('merges internal event handlers so that the ones defined first override the ones defined later', () => {
+  it('prevents handlers merged after event.preventBaseUIHandler() is called', () => {
+    const log: string[] = [];
+
+    const mergedProps = mergeReactProps(
+      {
+        onClick() {
+          log.push('0');
+        },
+      },
+      {
+        onClick(event: BaseUIEvent<React.MouseEvent>) {
+          event.preventBaseUIHandler();
+          log.push('1');
+        },
+      },
+      {
+        onClick() {
+          log.push('2');
+        },
+      },
+    );
+
+    mergedProps.onClick?.({} as any);
+
+    expect(log).to.deep.equal(['0', '1']);
+  });
+
+  it('merges internal props so that the ones defined first override the ones defined later', () => {
     const mergedProps = mergeReactProps<'button'>(
       {},
       {
diff --git a/packages/react/src/utils/types.ts b/packages/react/src/utils/types.ts
index 26ff46ddda..fdb367d49e 100644
--- a/packages/react/src/utils/types.ts
+++ b/packages/react/src/utils/types.ts
@@ -1,7 +1,5 @@
 import * as React from 'react';
 
-export type EventHandlers = Record<string, React.EventHandler<any>>;
-
 export type GenericHTMLProps = React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined };
 
 export type BaseUIEvent<E extends React.SyntheticEvent<Element, Event>> = E & {
diff --git a/packages/react/src/utils/useRootElementName.ts b/packages/react/src/utils/useRootElementName.ts
index 607a67fe49..a477cb3282 100644
--- a/packages/react/src/utils/useRootElementName.ts
+++ b/packages/react/src/utils/useRootElementName.ts
@@ -1,18 +1,24 @@
 'use client';
 import * as React from 'react';
+import { useEnhancedEffect } from './useEnhancedEffect';
+import { warn } from './warn';
 
-type UseRootElementNameParameters = {
+interface UseRootElementNameParameters {
   /**
    * The HTML element expected to be rendered, for example 'div', 'button' etc
    * @default ''
    */
   rootElementName?: keyof HTMLElementTagNameMap;
+}
+
+interface UseRootElementNameReturnValue {
   /**
-   * The name of the component using useRootElementName.
-   * For debugging purposes.
+   * The HTML element expected to be rendered, for example 'div', 'button' etc
+   * @default ''
    */
-  componentName?: string;
-};
+  rootElementName: string;
+  updateRootElementName: (element: HTMLElement | null) => void;
+}
 
 /**
  * @ignore - do not document.
@@ -21,8 +27,8 @@ type UseRootElementNameParameters = {
  */
 export function useRootElementName(
   parameters: UseRootElementNameParameters,
-): [string, (instance: HTMLElement | null) => void] {
-  const { rootElementName: rootElementNameProp = '', componentName } = parameters;
+): UseRootElementNameReturnValue {
+  const { rootElementName: rootElementNameProp = '' } = parameters;
 
   const [rootElementName, setRootElementName] = React.useState<string>(
     rootElementNameProp.toUpperCase(),
@@ -30,21 +36,19 @@ export function useRootElementName(
 
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useEffect(() => {
+    useEnhancedEffect(() => {
       if (rootElementNameProp && rootElementName !== rootElementNameProp.toUpperCase()) {
-        console.error(
-          `useRootElementName: the \`rootElementName\` prop of ${
-            componentName ? `the ${componentName} component` : 'a component'
-          } expected the '${rootElementNameProp}' element, but a '${rootElementName.toLowerCase()}' was rendered instead`,
+        warn(
+          `useRootElementName expected the '${rootElementNameProp}' element, but a '${rootElementName.toLowerCase()}' was rendered instead`,
           'This may cause hydration issues in an SSR context, for example in a Next.js app',
         );
       }
-    }, [rootElementNameProp, rootElementName, componentName]);
+    }, [rootElementNameProp, rootElementName]);
   }
 
-  const updateRootElementName = React.useCallback((instance: HTMLElement | null) => {
-    setRootElementName(instance?.tagName ?? '');
+  const updateRootElementName = React.useCallback((element: HTMLElement | null) => {
+    setRootElementName(element?.tagName ?? '');
   }, []);
 
-  return [rootElementName, updateRootElementName];
+  return { rootElementName, updateRootElementName };
 }